@lglab/compose-ui 0.1.1 → 0.2.0

package/dist/components/accordion.d.ts

@@ -0,0 +1,30 @@
+import { Accordion as BaseAccordion } from '@base-ui/react/accordion';
+import * as React from 'react';
+type AccordionRootProps = React.ComponentProps<typeof BaseAccordion.Root>;
+declare const AccordionRoot: {
+    ({ className, ...props }: AccordionRootProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+type AccordionItemProps = React.ComponentProps<typeof BaseAccordion.Item>;
+declare const AccordionItem: {
+    ({ className, ...props }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+type AccordionHeaderProps = React.ComponentProps<typeof BaseAccordion.Header>;
+declare const AccordionHeader: {
+    ({ className, ...props }: AccordionHeaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+type AccordionTriggerProps = React.ComponentProps<typeof BaseAccordion.Trigger>;
+declare const AccordionTrigger: {
+    ({ className, children, ...props }: AccordionTriggerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+type AccordionPanelProps = React.ComponentProps<typeof BaseAccordion.Panel>;
+declare const AccordionPanel: {
+    ({ className, ...props }: AccordionPanelProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { AccordionRoot, AccordionItem, AccordionHeader, AccordionTrigger, AccordionPanel };
+export type { AccordionRootProps, AccordionItemProps, AccordionHeaderProps, AccordionTriggerProps, AccordionPanelProps, };
+//# sourceMappingURL=accordion.d.ts.map

package/dist/components/accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../src/components/accordion.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,IAAI,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAErE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,KAAK,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,CAAA;AAEzE,QAAA,MAAM,aAAa;8BAA6B,kBAAkB;;CAEjE,CAAA;AAQD,KAAK,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,CAAA;AAEzE,QAAA,MAAM,aAAa;8BAA6B,kBAAkB;;CAOjE,CAAA;AAQD,KAAK,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,MAAM,CAAC,CAAA;AAE7E,QAAA,MAAM,eAAe;8BAA6B,oBAAoB;;CAErE,CAAA;AAQD,KAAK,qBAAqB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,CAAA;AAE/E,QAAA,MAAM,gBAAgB;wCAAuC,qBAAqB;;CAiBjF,CAAA;AAQD,KAAK,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC,CAAA;AAE3E,QAAA,MAAM,cAAc;8BAA6B,mBAAmB;;CAUnE,CAAA;AAQD,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,eAAe,EAAE,gBAAgB,EAAE,cAAc,EAAE,CAAA;AAE1F,YAAY,EACV,kBAAkB,EAClB,kBAAkB,EAClB,oBAAoB,EACpB,qBAAqB,EACrB,mBAAmB,GACpB,CAAA"}

package/dist/index.d.ts

@@ -3,9 +3,11 @@ export { ScrollAreaRoot, ScrollAreaViewport, ScrollAreaContent, ScrollAreaScroll
 export { TabsRoot, TabsList, TabsTab, TabsIndicator, TabsPanel } from './components/tabs';
 export { DialogRoot, DialogTrigger, DialogPortal, DialogBackdrop, DialogPopup, DialogTitle, DialogDescription, DialogClose, DialogHeader, DialogFooter, } from './components/dialog';
 export { DrawerRoot, DrawerTrigger, DrawerPortal, DrawerBackdrop, DrawerPopup, DrawerTitle, DrawerDescription, DrawerClose, DrawerHeader, DrawerContent, DrawerFooter, } from './components/drawer';
+export { AccordionRoot, AccordionItem, AccordionHeader, AccordionTrigger, AccordionPanel, } from './components/accordion';
 export type { ButtonProps } from './components/button';
 export type { ScrollAreaRootProps, ScrollAreaViewportProps, ScrollAreaContentProps, ScrollAreaScrollbarProps, ScrollAreaThumbProps, ScrollAreaCornerProps, } from './components/scroll-area';
 export type { TabsRootProps, TabsListProps, TabsTabProps, TabsIndicatorProps, TabsPanelProps, } from './components/tabs';
 export type { DialogRootProps, DialogTriggerProps, DialogPortalProps, DialogBackdropProps, DialogPopupProps, DialogTitleProps, DialogDescriptionProps, DialogCloseProps, DialogHeaderProps, DialogFooterProps, } from './components/dialog';
 export type { DrawerRootProps, DrawerTriggerProps, DrawerPortalProps, DrawerBackdropProps, DrawerPopupProps, DrawerTitleProps, DrawerDescriptionProps, DrawerCloseProps, DrawerHeaderProps, DrawerContentProps, DrawerFooterProps, } from './components/drawer';
+export type { AccordionRootProps, AccordionItemProps, AccordionHeaderProps, AccordionTriggerProps, AccordionPanelProps, } from './components/accordion';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EACL,cAAc,EACd,kBAAkB,EAClB,iBAAiB,EACjB,mBAAmB,EACnB,eAAe,EACf,gBAAgB,GACjB,MAAM,0BAA0B,CAAA;AACjC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AACzF,OAAO,EACL,UAAU,EACV,aAAa,EACb,YAAY,EACZ,cAAc,EACd,WAAW,EACX,WAAW,EACX,iBAAiB,EACjB,WAAW,EACX,YAAY,EACZ,YAAY,GACb,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EACL,UAAU,EACV,aAAa,EACb,YAAY,EACZ,cAAc,EACd,WAAW,EACX,WAAW,EACX,iBAAiB,EACjB,WAAW,EACX,YAAY,EACZ,aAAa,EACb,YAAY,GACb,MAAM,qBAAqB,CAAA;AAE5B,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACtD,YAAY,EACV,mBAAmB,EACnB,uBAAuB,EACvB,sBAAsB,EACtB,wBAAwB,EACxB,oBAAoB,EACpB,qBAAqB,GACtB,MAAM,0BAA0B,CAAA;AACjC,YAAY,EACV,aAAa,EACb,aAAa,EACb,YAAY,EACZ,kBAAkB,EAClB,cAAc,GACf,MAAM,mBAAmB,CAAA;AAC1B,YAAY,EACV,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EACjB,mBAAmB,EACnB,gBAAgB,EAChB,gBAAgB,EAChB,sBAAsB,EACtB,gBAAgB,EAChB,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,qBAAqB,CAAA;AAC5B,YAAY,EACV,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EACjB,mBAAmB,EACnB,gBAAgB,EAChB,gBAAgB,EAChB,sBAAsB,EACtB,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,GAClB,MAAM,qBAAqB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EACL,cAAc,EACd,kBAAkB,EAClB,iBAAiB,EACjB,mBAAmB,EACnB,eAAe,EACf,gBAAgB,GACjB,MAAM,0BAA0B,CAAA;AACjC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AACzF,OAAO,EACL,UAAU,EACV,aAAa,EACb,YAAY,EACZ,cAAc,EACd,WAAW,EACX,WAAW,EACX,iBAAiB,EACjB,WAAW,EACX,YAAY,EACZ,YAAY,GACb,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EACL,UAAU,EACV,aAAa,EACb,YAAY,EACZ,cAAc,EACd,WAAW,EACX,WAAW,EACX,iBAAiB,EACjB,WAAW,EACX,YAAY,EACZ,aAAa,EACb,YAAY,GACb,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EACL,aAAa,EACb,aAAa,EACb,eAAe,EACf,gBAAgB,EAChB,cAAc,GACf,MAAM,wBAAwB,CAAA;AAE/B,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACtD,YAAY,EACV,mBAAmB,EACnB,uBAAuB,EACvB,sBAAsB,EACtB,wBAAwB,EACxB,oBAAoB,EACpB,qBAAqB,GACtB,MAAM,0BAA0B,CAAA;AACjC,YAAY,EACV,aAAa,EACb,aAAa,EACb,YAAY,EACZ,kBAAkB,EAClB,cAAc,GACf,MAAM,mBAAmB,CAAA;AAC1B,YAAY,EACV,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EACjB,mBAAmB,EACnB,gBAAgB,EAChB,gBAAgB,EAChB,sBAAsB,EACtB,gBAAgB,EAChB,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,qBAAqB,CAAA;AAC5B,YAAY,EACV,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EACjB,mBAAmB,EACnB,gBAAgB,EAChB,gBAAgB,EAChB,sBAAsB,EACtB,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,GAClB,MAAM,qBAAqB,CAAA;AAC5B,YAAY,EACV,kBAAkB,EAClB,kBAAkB,EAClB,oBAAoB,EACpB,qBAAqB,EACrB,mBAAmB,GACpB,MAAM,wBAAwB,CAAA"}

package/dist/index.es.js

@@ -1,14 +1,15 @@
 "use client";
-import { jsx as t, jsxs as f, Fragment as b } from "react/jsx-runtime";
+import { jsx as t, jsxs as m, Fragment as y } from "react/jsx-runtime";
 import { Button as v } from "@base-ui/react/button";
-import { LoaderCircle as y } from "lucide-react";
-import { cva as l } from "class-variance-authority";
+import { LoaderCircle as N, ChevronDown as h } from "lucide-react";
+import { cva as n } from "class-variance-authority";
 import { clsx as x } from "clsx";
-import { twMerge as N } from "tailwind-merge";
-import { ScrollArea as n } from "@base-ui/react/scroll-area";
+import { twMerge as w } from "tailwind-merge";
+import { ScrollArea as l } from "@base-ui/react/scroll-area";
 import { Tabs as d } from "@base-ui/react/tabs";
-import { Dialog as s } from "@base-ui/react/dialog";
-const c = l(
+import { Dialog as i } from "@base-ui/react/dialog";
+import { Accordion as c } from "@base-ui/react/accordion";
+const u = n(
   // Base styles
   [
     "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-80 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
@@ -39,48 +40,48 @@ const c = l(
   }
 );
 function r(...e) {
-  return N(x(e));
+  return w(x(e));
 }
-const h = ({
+const D = ({
   className: e,
   variant: a,
   size: o,
-  loading: i = !1,
-  loadingText: g,
-  disabled: p,
-  children: u,
-  ...m
+  loading: s = !1,
+  loadingText: p,
+  disabled: f,
+  children: g,
+  ...b
 }) => /* @__PURE__ */ t(
   v,
   {
-    className: r(c({ variant: a, size: o }), e),
-    disabled: p || i,
-    ...m,
-    children: i ? /* @__PURE__ */ f(b, { children: [
-      /* @__PURE__ */ t(y, { className: "animate-spin" }),
-      g ?? u
-    ] }) : u
+    className: r(u({ variant: a, size: o }), e),
+    disabled: f || s,
+    ...b,
+    children: s ? /* @__PURE__ */ m(y, { children: [
+      /* @__PURE__ */ t(N, { className: "animate-spin" }),
+      p ?? g
+    ] }) : g
   }
 );
-h.displayName = "Button";
-const w = ({ className: e, ...a }) => /* @__PURE__ */ t(n.Root, { className: r("relative", e), ...a });
-w.displayName = "ScrollAreaRoot";
-const D = ({ className: e, ...a }) => /* @__PURE__ */ t(
-  n.Viewport,
+D.displayName = "Button";
+const T = ({ className: e, ...a }) => /* @__PURE__ */ t(l.Root, { className: r("relative", e), ...a });
+T.displayName = "ScrollAreaRoot";
+const k = ({ className: e, ...a }) => /* @__PURE__ */ t(
+  l.Viewport,
   {
     className: r("h-full overscroll-contain pr-3", e),
     ...a
   }
 );
-D.displayName = "ScrollAreaViewport";
-const T = ({ className: e, ...a }) => /* @__PURE__ */ t(n.Content, { className: r("min-w-full", e), ...a });
-T.displayName = "ScrollAreaContent";
-const k = ({
+k.displayName = "ScrollAreaViewport";
+const A = ({ className: e, ...a }) => /* @__PURE__ */ t(l.Content, { className: r("min-w-full", e), ...a });
+A.displayName = "ScrollAreaContent";
+const z = ({
   className: e,
   orientation: a = "vertical",
   ...o
 }) => /* @__PURE__ */ t(
-  n.Scrollbar,
+  l.Scrollbar,
   {
     className: r(
       "flex touch-none select-none p-0.5 transition-colors duration-150 ease-out",
@@ -93,9 +94,9 @@ const k = ({
     ...o
   }
 );
-k.displayName = "ScrollAreaScrollbar";
-const z = ({ className: e, ...a }) => /* @__PURE__ */ t(
-  n.Thumb,
+z.displayName = "ScrollAreaScrollbar";
+const P = ({ className: e, ...a }) => /* @__PURE__ */ t(
+  l.Thumb,
   {
     className: r(
       "relative flex-1 rounded-full bg-border transition-colors",
@@ -105,12 +106,12 @@ const z = ({ className: e, ...a }) => /* @__PURE__ */ t(
     ...a
   }
 );
-z.displayName = "ScrollAreaThumb";
-const P = ({ className: e, ...a }) => /* @__PURE__ */ t(n.Corner, { className: r("bg-muted/50", e), ...a });
-P.displayName = "ScrollAreaCorner";
+P.displayName = "ScrollAreaThumb";
+const C = ({ className: e, ...a }) => /* @__PURE__ */ t(l.Corner, { className: r("bg-muted/50", e), ...a });
+C.displayName = "ScrollAreaCorner";
 const S = ({ className: e, ...a }) => /* @__PURE__ */ t(d.Root, { className: r("flex flex-col", e), ...a });
 S.displayName = "TabsRoot";
-const C = l(
+const R = n(
   ["relative inline-flex w-fit items-center gap-1", "rounded-lg bg-muted p-1"],
   {
     variants: {
@@ -126,12 +127,12 @@ const C = l(
 ), V = ({ className: e, orientation: a = "horizontal", ...o }) => /* @__PURE__ */ t(
   d.List,
   {
-    className: r(C({ orientation: a }), e),
+    className: r(R({ orientation: a }), e),
     ...o
   }
 );
 V.displayName = "TabsList";
-const A = l(
+const B = n(
   [
     "relative z-10 inline-flex items-center justify-center whitespace-nowrap",
     "rounded-md px-3 py-1.5 text-sm font-medium",
@@ -154,9 +155,9 @@ const A = l(
       size: "default"
     }
   }
-), R = ({ className: e, size: a, ...o }) => /* @__PURE__ */ t(d.Tab, { className: r(A({ size: a }), e), ...o });
-R.displayName = "TabsTab";
-const B = l(
+), H = ({ className: e, size: a, ...o }) => /* @__PURE__ */ t(d.Tab, { className: r(B({ size: a }), e), ...o });
+H.displayName = "TabsTab";
+const I = n(
   ["absolute rounded-md bg-background shadow-sm", "transition-all duration-200 ease-out"],
   {
     variants: {
@@ -176,7 +177,7 @@ const B = l(
 }) => /* @__PURE__ */ t(
   d.Indicator,
   {
-    className: r(B({ orientation: a }), e),
+    className: r(I({ orientation: a }), e),
     ...o
   }
 );
@@ -193,20 +194,20 @@ const F = ({ className: e, ...a }) => /* @__PURE__ */ t(
   }
 );
 F.displayName = "TabsPanel";
-const L = (e) => /* @__PURE__ */ t(s.Root, { ...e });
+const L = (e) => /* @__PURE__ */ t(i.Root, { ...e });
 L.displayName = "DialogRoot";
-const H = ({ className: e, variant: a, size: o, ...i }) => /* @__PURE__ */ t(
-  s.Trigger,
+const _ = ({ className: e, variant: a, size: o, ...s }) => /* @__PURE__ */ t(
+  i.Trigger,
   {
-    className: r(c({ variant: a, size: o }), e),
-    ...i
+    className: r(u({ variant: a, size: o }), e),
+    ...s
   }
 );
-H.displayName = "DialogTrigger";
-const I = (e) => /* @__PURE__ */ t(s.Portal, { ...e });
-I.displayName = "DialogPortal";
-const _ = ({ className: e, ...a }) => /* @__PURE__ */ t(
-  s.Backdrop,
+_.displayName = "DialogTrigger";
+const M = (e) => /* @__PURE__ */ t(i.Portal, { ...e });
+M.displayName = "DialogPortal";
+const $ = ({ className: e, ...a }) => /* @__PURE__ */ t(
+  i.Backdrop,
   {
     className: r(
       "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm",
@@ -217,8 +218,8 @@ const _ = ({ className: e, ...a }) => /* @__PURE__ */ t(
     ...a
   }
 );
-_.displayName = "DialogBackdrop";
-const M = l(
+$.displayName = "DialogBackdrop";
+const q = n(
   [
     "fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2",
     "w-full max-w-[calc(100vw-2rem)] rounded-lg border border-border bg-background p-6 shadow-lg",
@@ -243,35 +244,35 @@ const M = l(
       size: "default"
     }
   }
-), $ = ({ className: e, size: a, ...o }) => /* @__PURE__ */ t(
-  s.Popup,
+), E = ({ className: e, size: a, ...o }) => /* @__PURE__ */ t(
+  i.Popup,
   {
-    className: r(M({ size: a }), e),
+    className: r(q({ size: a }), e),
     ...o
   }
 );
-$.displayName = "DialogPopup";
-const q = ({ className: e, ...a }) => /* @__PURE__ */ t(
-  s.Title,
+E.displayName = "DialogPopup";
+const G = ({ className: e, ...a }) => /* @__PURE__ */ t(
+  i.Title,
   {
     className: r("text-lg font-semibold leading-none tracking-tight", e),
     ...a
   }
 );
-q.displayName = "DialogTitle";
-const E = ({ className: e, ...a }) => /* @__PURE__ */ t(s.Description, { className: r("mt-2", e), ...a });
-E.displayName = "DialogDescription";
-const G = ({ className: e, variant: a, size: o, ...i }) => /* @__PURE__ */ t(
-  s.Close,
+G.displayName = "DialogTitle";
+const J = ({ className: e, ...a }) => /* @__PURE__ */ t(i.Description, { className: r("mt-2", e), ...a });
+J.displayName = "DialogDescription";
+const K = ({ className: e, variant: a, size: o, ...s }) => /* @__PURE__ */ t(
+  i.Close,
   {
-    className: r(c({ variant: a ?? "outline", size: o }), e),
-    ...i
+    className: r(u({ variant: a ?? "outline", size: o }), e),
+    ...s
   }
 );
-G.displayName = "DialogClose";
-const J = ({ className: e, ...a }) => /* @__PURE__ */ t("div", { className: r("flex flex-col space-y-1 mb-5", e), ...a });
-J.displayName = "DialogHeader";
-const K = ({ className: e, ...a }) => /* @__PURE__ */ t(
+K.displayName = "DialogClose";
+const O = ({ className: e, ...a }) => /* @__PURE__ */ t("div", { className: r("flex flex-col space-y-1 mb-5", e), ...a });
+O.displayName = "DialogHeader";
+const Q = ({ className: e, ...a }) => /* @__PURE__ */ t(
   "div",
   {
     className: r(
@@ -281,21 +282,21 @@ const K = ({ className: e, ...a }) => /* @__PURE__ */ t(
     ...a
   }
 );
-K.displayName = "DialogFooter";
-const O = (e) => /* @__PURE__ */ t(s.Root, { ...e });
-O.displayName = "DrawerRoot";
-const Q = ({ className: e, variant: a, size: o, ...i }) => /* @__PURE__ */ t(
-  s.Trigger,
+Q.displayName = "DialogFooter";
+const U = (e) => /* @__PURE__ */ t(i.Root, { ...e });
+U.displayName = "DrawerRoot";
+const W = ({ className: e, variant: a, size: o, ...s }) => /* @__PURE__ */ t(
+  i.Trigger,
   {
-    className: r(c({ variant: a, size: o }), e),
-    ...i
+    className: r(u({ variant: a, size: o }), e),
+    ...s
   }
 );
-Q.displayName = "DrawerTrigger";
-const U = (e) => /* @__PURE__ */ t(s.Portal, { ...e });
-U.displayName = "DrawerPortal";
-const W = ({ className: e, ...a }) => /* @__PURE__ */ t(
-  s.Backdrop,
+W.displayName = "DrawerTrigger";
+const X = (e) => /* @__PURE__ */ t(i.Portal, { ...e });
+X.displayName = "DrawerPortal";
+const Y = ({ className: e, ...a }) => /* @__PURE__ */ t(
+  i.Backdrop,
   {
     className: r(
       "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm",
@@ -306,8 +307,8 @@ const W = ({ className: e, ...a }) => /* @__PURE__ */ t(
     ...a
   }
 );
-W.displayName = "DrawerBackdrop";
-const X = l(
+Y.displayName = "DrawerBackdrop";
+const Z = n(
   [
     "fixed z-50 flex flex-col bg-background p-6 shadow-lg",
     "outline-none",
@@ -344,70 +345,117 @@ const X = l(
       side: "right"
     }
   }
-), Y = ({ className: e, side: a, ...o }) => /* @__PURE__ */ t(
-  s.Popup,
+), ee = ({ className: e, side: a, ...o }) => /* @__PURE__ */ t(
+  i.Popup,
   {
-    className: r(X({ side: a }), e),
+    className: r(Z({ side: a }), e),
     ...o
   }
 );
-Y.displayName = "DrawerPopup";
-const Z = ({ className: e, ...a }) => /* @__PURE__ */ t(
-  s.Title,
+ee.displayName = "DrawerPopup";
+const ae = ({ className: e, ...a }) => /* @__PURE__ */ t(
+  i.Title,
   {
     className: r("text-lg font-semibold leading-none tracking-tight", e),
     ...a
   }
 );
-Z.displayName = "DrawerTitle";
-const ee = ({ className: e, ...a }) => /* @__PURE__ */ t(s.Description, { className: r("", e), ...a });
-ee.displayName = "DrawerDescription";
-const ae = ({ className: e, variant: a, size: o, ...i }) => /* @__PURE__ */ t(
-  s.Close,
+ae.displayName = "DrawerTitle";
+const te = ({ className: e, ...a }) => /* @__PURE__ */ t(i.Description, { className: r("", e), ...a });
+te.displayName = "DrawerDescription";
+const re = ({ className: e, variant: a, size: o, ...s }) => /* @__PURE__ */ t(
+  i.Close,
   {
-    className: r(c({ variant: a ?? "outline", size: o }), e),
-    ...i
+    className: r(u({ variant: a ?? "outline", size: o }), e),
+    ...s
   }
 );
-ae.displayName = "DrawerClose";
-const te = ({ className: e, ...a }) => /* @__PURE__ */ t("div", { className: r("flex flex-col space-y-1.5", e), ...a });
-te.displayName = "DrawerHeader";
-const re = ({ className: e, ...a }) => /* @__PURE__ */ t("div", { className: r("py-5", e), ...a });
-re.displayName = "DrawerContent";
-const oe = ({ className: e, ...a }) => /* @__PURE__ */ t("div", { className: r("", e), ...a });
-oe.displayName = "DrawerFooter";
+re.displayName = "DrawerClose";
+const oe = ({ className: e, ...a }) => /* @__PURE__ */ t("div", { className: r("flex flex-col space-y-1.5", e), ...a });
+oe.displayName = "DrawerHeader";
+const ie = ({ className: e, ...a }) => /* @__PURE__ */ t("div", { className: r("py-5", e), ...a });
+ie.displayName = "DrawerContent";
+const se = ({ className: e, ...a }) => /* @__PURE__ */ t("div", { className: r("", e), ...a });
+se.displayName = "DrawerFooter";
+const ne = ({ className: e, ...a }) => /* @__PURE__ */ t(c.Root, { className: r("w-full", e), ...a });
+ne.displayName = "AccordionRoot";
+const le = ({ className: e, ...a }) => /* @__PURE__ */ t(
+  c.Item,
+  {
+    className: r("border-b border-border last:border-b-0", e),
+    ...a
+  }
+);
+le.displayName = "AccordionItem";
+const de = ({ className: e, ...a }) => /* @__PURE__ */ t(c.Header, { className: r("flex", e), ...a });
+de.displayName = "AccordionHeader";
+const ce = ({ className: e, children: a, ...o }) => /* @__PURE__ */ m(
+  c.Trigger,
+  {
+    className: r(
+      "flex flex-1 items-center justify-between py-3 font-medium",
+      "transition-all duration-200",
+      "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "data-disabled:pointer-events-none data-disabled:opacity-80",
+      "[&[data-panel-open]_svg:last-child]:rotate-180",
+      e
+    ),
+    ...o,
+    children: [
+      a,
+      /* @__PURE__ */ t(h, { className: "h-5 w-5 shrink-0 text-muted-foreground transition-transform duration-200" })
+    ]
+  }
+);
+ce.displayName = "AccordionTrigger";
+const ue = ({ className: e, ...a }) => /* @__PURE__ */ t(
+  c.Panel,
+  {
+    className: r(
+      "overflow-hidden duration-200 h-(--accordion-panel-height) transition-height ease-out data-ending-style:h-0 data-starting-style:h-0",
+      e
+    ),
+    ...a
+  }
+);
+ue.displayName = "AccordionPanel";
 export {
-  h as Button,
-  _ as DialogBackdrop,
-  G as DialogClose,
-  E as DialogDescription,
-  K as DialogFooter,
-  J as DialogHeader,
-  $ as DialogPopup,
-  I as DialogPortal,
+  de as AccordionHeader,
+  le as AccordionItem,
+  ue as AccordionPanel,
+  ne as AccordionRoot,
+  ce as AccordionTrigger,
+  D as Button,
+  $ as DialogBackdrop,
+  K as DialogClose,
+  J as DialogDescription,
+  Q as DialogFooter,
+  O as DialogHeader,
+  E as DialogPopup,
+  M as DialogPortal,
   L as DialogRoot,
-  q as DialogTitle,
-  H as DialogTrigger,
-  W as DrawerBackdrop,
-  ae as DrawerClose,
-  re as DrawerContent,
-  ee as DrawerDescription,
-  oe as DrawerFooter,
-  te as DrawerHeader,
-  Y as DrawerPopup,
-  U as DrawerPortal,
-  O as DrawerRoot,
-  Z as DrawerTitle,
-  Q as DrawerTrigger,
-  T as ScrollAreaContent,
-  P as ScrollAreaCorner,
-  w as ScrollAreaRoot,
-  k as ScrollAreaScrollbar,
-  z as ScrollAreaThumb,
-  D as ScrollAreaViewport,
+  G as DialogTitle,
+  _ as DialogTrigger,
+  Y as DrawerBackdrop,
+  re as DrawerClose,
+  ie as DrawerContent,
+  te as DrawerDescription,
+  se as DrawerFooter,
+  oe as DrawerHeader,
+  ee as DrawerPopup,
+  X as DrawerPortal,
+  U as DrawerRoot,
+  ae as DrawerTitle,
+  W as DrawerTrigger,
+  A as ScrollAreaContent,
+  C as ScrollAreaCorner,
+  T as ScrollAreaRoot,
+  z as ScrollAreaScrollbar,
+  P as ScrollAreaThumb,
+  k as ScrollAreaViewport,
   j as TabsIndicator,
   V as TabsList,
   F as TabsPanel,
   S as TabsRoot,
-  R as TabsTab
+  H as TabsTab
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lglab/compose-ui",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "A collection of components built with Base UI & Tailwind CSS",
   "author": "LGLab",
   "license": "MIT",