stofli-ui
Version:
Biblioteca moderna de componentes UI para React con Tailwind CSS y Framer Motion
4 lines (3 loc) • 2.77 kB
JavaScript
'use client';
import{jsx as e,jsxs as t}from"react/jsx-runtime";import i from"react";import{AnimatePresence as r,motion as n}from"framer-motion";import{ChevronDown as a}from"lucide-react";import{clsx as o}from"clsx";import{twMerge as l}from"tailwind-merge";function c(e,t,i){if(i||2===arguments.length)for(var r,n=0,a=t.length;n<a;n++)!r&&n in t||(r||(r=Array.prototype.slice.call(t,0,n)),r[n]=t[n]);return e.concat(r||Array.prototype.slice.call(t))}function d(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];return l(o(e))}"function"==typeof SuppressedError&&SuppressedError;var s=function(i){var o=i.title,l=i.children,c=i.isOpen,s=i.onClick,u=i.className,m=void 0===u?"":u,f=i.buttonClassName,p=void 0===f?"":f,v=i.titleClassName,h=void 0===v?"":v,N=i.contentClassName,b=void 0===N?"":N,x=i.iconClassName,C=void 0===x?"":x,y=i.id,g="accordion-header-".concat(y),k="accordion-content-".concat(y);return t("div",{className:d("border-b border-zinc-200 dark:border-zinc-800 p-3 last:border-0",m),children:[e("h3",{children:t("button",{className:d("flex w-full items-center justify-between py-4 text-left text-neutral-900 dark:text-neutral-100",p),onClick:s,"aria-expanded":c,"aria-controls":k,id:g,type:"button",children:[e("span",{className:d("text-sm font-medium text-neutral-900 dark:text-neutral-100",h),children:o}),e(a,{className:d("h-5 w-5 text-neutral-500 transition-transform duration-200",c&&"rotate-180",C),"aria-hidden":"true"})]})}),e(r,{initial:!1,children:c&&e(n.div,{initial:{height:0,opacity:0},animate:{height:"auto",opacity:1},exit:{height:0,opacity:0},transition:{duration:.2},className:"overflow-hidden",role:"region","aria-labelledby":g,id:k,children:e("div",{className:d("pb-4 text-sm text-neutral-600 dark:text-neutral-400",b),children:l})})})]})},u=function(t){var r=t.items,n=t.defaultOpen,a=void 0===n?-1:n,o=t.allowMultiple,l=void 0!==o&&o,u=t.className,m=void 0===u?"":u,f=t.itemClassName,p=void 0===f?"":f,v=t.buttonClassName,h=void 0===v?"":v,N=t.titleClassName,b=void 0===N?"":N,x=t.contentClassName,C=void 0===x?"":x,y=t.iconClassName,g=void 0===y?"":y,k=i.useState(a>=0?[a]:[]),w=k[0],z=k[1];return e("div",{className:d("divide-y divide-zinc-200 dark:divide-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-black",m),role:"presentation",children:r.map((function(t,i){return e(s,{id:"accordion-".concat(i),title:t.title,isOpen:w.includes(i),onClick:function(){return function(e){z(l?function(t){return t.includes(e)?t.filter((function(t){return t!==e})):c(c([],t,!0),[e],!1)}:function(t){return t.includes(e)?[]:[e]})}(i)},className:p,buttonClassName:h,titleClassName:b,contentClassName:C,iconClassName:g,children:t.content},i)}))})};export{u as default};
//# sourceMappingURL=index.esm.js.map