@lglab/compose-ui 0.3.0 → 0.4.0

package/dist/components/alert-dialog.d.ts

@@ -0,0 +1,64 @@
+import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog';
+import { ButtonSize, ButtonVariant } from '../lib/button-variants';
+import * as React from 'react';
+type AlertDialogRootProps = React.ComponentProps<typeof BaseAlertDialog.Root>;
+declare const AlertDialogRoot: {
+    (props: AlertDialogRootProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+type AlertDialogTriggerProps = React.ComponentProps<typeof BaseAlertDialog.Trigger> & {
+    /** Visual style variant */
+    variant?: ButtonVariant;
+    /** Size of the trigger button */
+    size?: ButtonSize;
+};
+declare const AlertDialogTrigger: {
+    ({ className, variant, size, ...props }: AlertDialogTriggerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+type AlertDialogPortalProps = React.ComponentProps<typeof BaseAlertDialog.Portal>;
+declare const AlertDialogPortal: {
+    (props: AlertDialogPortalProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+type AlertDialogBackdropProps = React.ComponentProps<typeof BaseAlertDialog.Backdrop>;
+declare const AlertDialogBackdrop: {
+    ({ className, ...props }: AlertDialogBackdropProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+type AlertDialogViewportProps = React.ComponentProps<typeof BaseAlertDialog.Viewport>;
+declare const AlertDialogViewport: {
+    ({ className, ...props }: AlertDialogViewportProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+type AlertDialogPopupProps = React.ComponentProps<typeof BaseAlertDialog.Popup> & {
+    /** Size of the alert dialog popup */
+    size?: 'sm' | 'default' | 'lg' | 'xl' | 'full';
+};
+declare const AlertDialogPopup: {
+    ({ className, size, ...props }: AlertDialogPopupProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+type AlertDialogTitleProps = React.ComponentProps<typeof BaseAlertDialog.Title>;
+declare const AlertDialogTitle: {
+    ({ className, ...props }: AlertDialogTitleProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+type AlertDialogDescriptionProps = React.ComponentProps<typeof BaseAlertDialog.Description>;
+declare const AlertDialogDescription: {
+    ({ className, ...props }: AlertDialogDescriptionProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+type AlertDialogCloseProps = React.ComponentProps<typeof BaseAlertDialog.Close> & {
+    /** Visual style variant */
+    variant?: ButtonVariant;
+    /** Size of the close button */
+    size?: ButtonSize;
+};
+declare const AlertDialogClose: {
+    ({ className, variant, size, ...props }: AlertDialogCloseProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { AlertDialogRoot, AlertDialogTrigger, AlertDialogPortal, AlertDialogBackdrop, AlertDialogViewport, AlertDialogPopup, AlertDialogTitle, AlertDialogDescription, AlertDialogClose, };
+export type { AlertDialogRootProps, AlertDialogTriggerProps, AlertDialogPortalProps, AlertDialogBackdropProps, AlertDialogViewportProps, AlertDialogPopupProps, AlertDialogTitleProps, AlertDialogDescriptionProps, AlertDialogCloseProps, };
+//# sourceMappingURL=alert-dialog.d.ts.map

package/dist/components/alert-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog.d.ts","sourceRoot":"","sources":["../../src/components/alert-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAE5E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EACL,KAAK,UAAU,EACf,KAAK,aAAa,EAEnB,MAAM,wBAAwB,CAAA;AAO/B,KAAK,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,CAAA;AAE7E,QAAA,MAAM,eAAe;YAAW,oBAAoB;;CAEnD,CAAA;AAQD,KAAK,uBAAuB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,GAAG;IACpF,2BAA2B;IAC3B,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,iCAAiC;IACjC,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB,CAAA;AAED,QAAA,MAAM,kBAAkB;6CAKrB,uBAAuB;;CAOzB,CAAA;AAQD,KAAK,sBAAsB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,MAAM,CAAC,CAAA;AAEjF,QAAA,MAAM,iBAAiB;YAAW,sBAAsB;;CAEvD,CAAA;AAQD,KAAK,wBAAwB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,QAAQ,CAAC,CAAA;AAErF,QAAA,MAAM,mBAAmB;8BAA6B,wBAAwB;;CAY7E,CAAA;AAQD,KAAK,wBAAwB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,QAAQ,CAAC,CAAA;AAErF,QAAA,MAAM,mBAAmB;8BAA6B,wBAAwB;;CAO7E,CAAA;AAkCD,KAAK,qBAAqB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,GAAG;IAChF,qCAAqC;IACrC,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAA;CAC/C,CAAA;AAED,QAAA,MAAM,gBAAgB;oCAAmC,qBAAqB;;CAO7E,CAAA;AAQD,KAAK,qBAAqB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,CAAA;AAE/E,QAAA,MAAM,gBAAgB;8BAA6B,qBAAqB;;CAOvE,CAAA;AAQD,KAAK,2BAA2B,GAAG,KAAK,CAAC,cAAc,CACrD,OAAO,eAAe,CAAC,WAAW,CACnC,CAAA;AAED,QAAA,MAAM,sBAAsB;8BAA6B,2BAA2B;;CAEnF,CAAA;AAQD,KAAK,qBAAqB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,GAAG;IAChF,2BAA2B;IAC3B,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,+BAA+B;IAC/B,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB,CAAA;AAED,QAAA,MAAM,gBAAgB;6CAKnB,qBAAqB;;CAOvB,CAAA;AAQD,OAAO,EACL,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EACjB,mBAAmB,EACnB,mBAAmB,EACnB,gBAAgB,EAChB,gBAAgB,EAChB,sBAAsB,EACtB,gBAAgB,GACjB,CAAA;AAED,YAAY,EACV,oBAAoB,EACpB,uBAAuB,EACvB,sBAAsB,EACtB,wBAAwB,EACxB,wBAAwB,EACxB,qBAAqB,EACrB,qBAAqB,EACrB,2BAA2B,EAC3B,qBAAqB,GACtB,CAAA"}

package/dist/index.d.ts

@@ -1,10 +1,13 @@
 export { Button } from './components/button';
+export { AlertDialogRoot, AlertDialogTrigger, AlertDialogPortal, AlertDialogBackdrop, AlertDialogViewport, AlertDialogPopup, AlertDialogTitle, AlertDialogDescription, AlertDialogClose, } from './components/alert-dialog';
+export { AlertDialog } from '@base-ui/react/alert-dialog';
 export { ScrollAreaRoot, ScrollAreaViewport, ScrollAreaContent, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaCorner, } from './components/scroll-area';
 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 { AlertDialogRootProps, AlertDialogTriggerProps, AlertDialogPortalProps, AlertDialogBackdropProps, AlertDialogViewportProps, AlertDialogPopupProps, AlertDialogTitleProps, AlertDialogDescriptionProps, AlertDialogCloseProps, } from './components/alert-dialog';
 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';

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;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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EACL,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EACjB,mBAAmB,EACnB,mBAAmB,EACnB,gBAAgB,EAChB,gBAAgB,EAChB,sBAAsB,EACtB,gBAAgB,GACjB,MAAM,2BAA2B,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAA;AACzD,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,oBAAoB,EACpB,uBAAuB,EACvB,sBAAsB,EACtB,wBAAwB,EACxB,wBAAwB,EACxB,qBAAqB,EACrB,qBAAqB,EACrB,2BAA2B,EAC3B,qBAAqB,GACtB,MAAM,2BAA2B,CAAA;AAClC,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,16 @@
 "use client";
 import { jsx as t } from "react/jsx-runtime";
-import { Button as p } from "@base-ui/react/button";
+import { Button as f } from "@base-ui/react/button";
 import { cva as n } from "class-variance-authority";
-import { clsx as f } from "clsx";
-import { twMerge as b } from "tailwind-merge";
-import { ScrollArea as i } from "@base-ui/react/scroll-area";
-import { Tabs as d } from "@base-ui/react/tabs";
-import { Dialog as s } from "@base-ui/react/dialog";
-import { Accordion as c } from "@base-ui/react/accordion";
-const u = n(
+import { clsx as b } from "clsx";
+import { twMerge as y } from "tailwind-merge";
+import { AlertDialog as i } from "@base-ui/react/alert-dialog";
+import { AlertDialog as Va } from "@base-ui/react/alert-dialog";
+import { ScrollArea as c } from "@base-ui/react/scroll-area";
+import { Tabs as g } from "@base-ui/react/tabs";
+import { Dialog as l } from "@base-ui/react/dialog";
+import { Accordion as u } from "@base-ui/react/accordion";
+const d = n(
   [
     "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
   ],
@@ -37,74 +39,167 @@ const u = n(
     }
   }
 );
-function r(...e) {
-  return b(f(e));
+function r(...a) {
+  return y(b(a));
 }
-const y = ({
-  className: e,
-  variant: a,
+const N = ({
+  className: a,
+  variant: e,
   size: o,
-  disabled: l,
-  children: m,
-  ...g
+  disabled: s,
+  children: p,
+  ...m
 }) => /* @__PURE__ */ t(
-  p,
+  f,
   {
-    className: r(u({ variant: a, size: o }), e),
-    disabled: l,
-    ...g,
-    children: m
+    className: r(d({ variant: e, size: o }), a),
+    disabled: s,
+    ...m,
+    children: p
   }
 );
-y.displayName = "Button";
-const v = ({ className: e, ...a }) => /* @__PURE__ */ t(i.Root, { className: r("relative", e), ...a });
-v.displayName = "ScrollAreaRoot";
-const N = ({ className: e, ...a }) => /* @__PURE__ */ t(
+N.displayName = "Button";
+const v = (a) => /* @__PURE__ */ t(i.Root, { ...a });
+v.displayName = "AlertDialogRoot";
+const x = ({
+  className: a,
+  variant: e,
+  size: o,
+  ...s
+}) => /* @__PURE__ */ t(
+  i.Trigger,
+  {
+    className: r(d({ variant: e, size: o }), a),
+    ...s
+  }
+);
+x.displayName = "AlertDialogTrigger";
+const D = (a) => /* @__PURE__ */ t(i.Portal, { ...a });
+D.displayName = "AlertDialogPortal";
+const h = ({ className: a, ...e }) => /* @__PURE__ */ t(
+  i.Backdrop,
+  {
+    className: r(
+      "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm",
+      "transition-opacity duration-200",
+      "data-starting-style:opacity-0 data-ending-style:opacity-0",
+      a
+    ),
+    ...e
+  }
+);
+h.displayName = "AlertDialogBackdrop";
+const w = ({ className: a, ...e }) => /* @__PURE__ */ t(
   i.Viewport,
   {
-    className: r("h-full overscroll-contain pr-3", e),
-    ...a
+    className: r("fixed inset-0 z-50 flex items-center justify-center p-4", a),
+    ...e
+  }
+);
+w.displayName = "AlertDialogViewport";
+const A = 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",
+    "transition-all duration-200",
+    "data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
+    "data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
+    "top-[calc(50%+1.25rem*var(--nested-dialogs))] scale-[calc(1-0.1*var(--nested-dialogs))]",
+    "data-[nested-dialog-open]:after:absolute data-[nested-dialog-open]:after:inset-0 data-[nested-dialog-open]:after:rounded-[inherit] data-[nested-dialog-open]:after:bg-black/5"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "w-sm",
+        default: "w-lg",
+        lg: "w-2xl",
+        xl: "w-4xl",
+        full: "h-[calc(100vh-2rem)]"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+), T = ({ className: a, size: e, ...o }) => /* @__PURE__ */ t(
+  i.Popup,
+  {
+    className: r(A({ size: e }), a),
+    ...o
+  }
+);
+T.displayName = "AlertDialogPopup";
+const k = ({ className: a, ...e }) => /* @__PURE__ */ t(
+  i.Title,
+  {
+    className: r("text-lg font-semibold leading-none tracking-tight", a),
+    ...e
+  }
+);
+k.displayName = "AlertDialogTitle";
+const z = ({ className: a, ...e }) => /* @__PURE__ */ t(i.Description, { className: r("mt-2", a), ...e });
+z.displayName = "AlertDialogDescription";
+const P = ({
+  className: a,
+  variant: e,
+  size: o,
+  ...s
+}) => /* @__PURE__ */ t(
+  i.Close,
+  {
+    className: r(d({ variant: e ?? "outline", size: o }), a),
+    ...s
+  }
+);
+P.displayName = "AlertDialogClose";
+const V = ({ className: a, ...e }) => /* @__PURE__ */ t(c.Root, { className: r("relative", a), ...e });
+V.displayName = "ScrollAreaRoot";
+const R = ({ className: a, ...e }) => /* @__PURE__ */ t(
+  c.Viewport,
+  {
+    className: r("h-full overscroll-contain pr-3", a),
+    ...e
   }
 );
-N.displayName = "ScrollAreaViewport";
-const x = ({ className: e, ...a }) => /* @__PURE__ */ t(i.Content, { className: r("min-w-full", e), ...a });
-x.displayName = "ScrollAreaContent";
-const h = ({
-  className: e,
-  orientation: a = "vertical",
+R.displayName = "ScrollAreaViewport";
+const C = ({ className: a, ...e }) => /* @__PURE__ */ t(c.Content, { className: r("min-w-full", a), ...e });
+C.displayName = "ScrollAreaContent";
+const S = ({
+  className: a,
+  orientation: e = "vertical",
   ...o
 }) => /* @__PURE__ */ t(
-  i.Scrollbar,
+  c.Scrollbar,
   {
     className: r(
       "flex touch-none select-none p-0.5 transition-colors duration-150 ease-out",
       "data-hovering:bg-muted/50",
-      a === "vertical" && "h-full w-2.5",
-      a === "horizontal" && "h-2.5 w-full flex-col",
-      e
+      e === "vertical" && "h-full w-2.5",
+      e === "horizontal" && "h-2.5 w-full flex-col",
+      a
     ),
-    orientation: a,
+    orientation: e,
     ...o
   }
 );
-h.displayName = "ScrollAreaScrollbar";
-const w = ({ className: e, ...a }) => /* @__PURE__ */ t(
-  i.Thumb,
+S.displayName = "ScrollAreaScrollbar";
+const B = ({ className: a, ...e }) => /* @__PURE__ */ t(
+  c.Thumb,
   {
     className: r(
       "relative flex-1 rounded-full bg-border transition-colors",
       "hover:bg-muted-foreground/50",
-      e
+      a
     ),
-    ...a
+    ...e
   }
 );
-w.displayName = "ScrollAreaThumb";
-const D = ({ className: e, ...a }) => /* @__PURE__ */ t(i.Corner, { className: r("bg-muted/50", e), ...a });
-D.displayName = "ScrollAreaCorner";
-const T = ({ className: e, ...a }) => /* @__PURE__ */ t(d.Root, { className: r("flex flex-col", e), ...a });
-T.displayName = "TabsRoot";
-const k = n(
+B.displayName = "ScrollAreaThumb";
+const H = ({ className: a, ...e }) => /* @__PURE__ */ t(c.Corner, { className: r("bg-muted/50", a), ...e });
+H.displayName = "ScrollAreaCorner";
+const I = ({ className: a, ...e }) => /* @__PURE__ */ t(g.Root, { className: r("flex flex-col", a), ...e });
+I.displayName = "TabsRoot";
+const j = n(
   ["relative inline-flex w-fit items-center gap-1", "rounded-lg bg-muted p-1"],
   {
     variants: {
@@ -117,15 +212,15 @@ const k = n(
       orientation: "horizontal"
     }
   }
-), A = ({ className: e, orientation: a = "horizontal", ...o }) => /* @__PURE__ */ t(
-  d.List,
+), F = ({ className: a, orientation: e = "horizontal", ...o }) => /* @__PURE__ */ t(
+  g.List,
   {
-    className: r(k({ orientation: a }), e),
+    className: r(j({ orientation: e }), a),
     ...o
   }
 );
-A.displayName = "TabsList";
-const z = n(
+F.displayName = "TabsList";
+const L = n(
   [
     "relative z-10 inline-flex items-center justify-center whitespace-nowrap",
     "rounded-md px-3 py-1.5 text-sm font-medium",
@@ -146,9 +241,9 @@ const z = n(
       size: "default"
     }
   }
-), P = ({ className: e, size: a, ...o }) => /* @__PURE__ */ t(d.Tab, { className: r(z({ size: a }), e), ...o });
-P.displayName = "TabsTab";
-const S = n(
+), _ = ({ className: a, size: e, ...o }) => /* @__PURE__ */ t(g.Tab, { className: r(L({ size: e }), a), ...o });
+_.displayName = "TabsTab";
+const M = n(
   ["absolute rounded-md bg-background shadow-sm", "transition-all duration-200 ease-out"],
   {
     variants: {
@@ -161,46 +256,46 @@ const S = n(
       orientation: "horizontal"
     }
   }
-), R = ({
-  className: e,
-  orientation: a = "horizontal",
+), $ = ({
+  className: a,
+  orientation: e = "horizontal",
   ...o
 }) => /* @__PURE__ */ t(
-  d.Indicator,
+  g.Indicator,
   {
-    className: r(S({ orientation: a }), e),
+    className: r(M({ orientation: e }), a),
     ...o
   }
 );
-R.displayName = "TabsIndicator";
-const V = ({ className: e, ...a }) => /* @__PURE__ */ t(d.Panel, { className: r("mt-2 ring-offset-background", e), ...a });
-V.displayName = "TabsPanel";
-const C = (e) => /* @__PURE__ */ t(s.Root, { ...e });
-C.displayName = "DialogRoot";
-const B = ({ className: e, variant: a, size: o, ...l }) => /* @__PURE__ */ t(
-  s.Trigger,
+$.displayName = "TabsIndicator";
+const q = ({ className: a, ...e }) => /* @__PURE__ */ t(g.Panel, { className: r("mt-2 ring-offset-background", a), ...e });
+q.displayName = "TabsPanel";
+const E = (a) => /* @__PURE__ */ t(l.Root, { ...a });
+E.displayName = "DialogRoot";
+const G = ({ className: a, variant: e, size: o, ...s }) => /* @__PURE__ */ t(
+  l.Trigger,
   {
-    className: r(u({ variant: a, size: o }), e),
-    ...l
+    className: r(d({ variant: e, size: o }), a),
+    ...s
   }
 );
-B.displayName = "DialogTrigger";
-const H = (e) => /* @__PURE__ */ t(s.Portal, { ...e });
-H.displayName = "DialogPortal";
-const I = ({ className: e, ...a }) => /* @__PURE__ */ t(
-  s.Backdrop,
+G.displayName = "DialogTrigger";
+const J = (a) => /* @__PURE__ */ t(l.Portal, { ...a });
+J.displayName = "DialogPortal";
+const K = ({ className: a, ...e }) => /* @__PURE__ */ t(
+  l.Backdrop,
   {
     className: r(
       "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm",
       "transition-opacity duration-200",
       "data-starting-style:opacity-0 data-ending-style:opacity-0",
-      e
+      a
     ),
-    ...a
+    ...e
   }
 );
-I.displayName = "DialogBackdrop";
-const j = n(
+K.displayName = "DialogBackdrop";
+const O = 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",
@@ -224,71 +319,71 @@ const j = n(
       size: "default"
     }
   }
-), F = ({ className: e, size: a, ...o }) => /* @__PURE__ */ t(
-  s.Popup,
+), Q = ({ className: a, size: e, ...o }) => /* @__PURE__ */ t(
+  l.Popup,
   {
-    className: r(j({ size: a }), e),
+    className: r(O({ size: e }), a),
     ...o
   }
 );
-F.displayName = "DialogPopup";
-const L = ({ className: e, ...a }) => /* @__PURE__ */ t(
-  s.Title,
+Q.displayName = "DialogPopup";
+const U = ({ className: a, ...e }) => /* @__PURE__ */ t(
+  l.Title,
   {
-    className: r("text-lg font-semibold leading-none tracking-tight", e),
-    ...a
+    className: r("text-lg font-semibold leading-none tracking-tight", a),
+    ...e
   }
 );
-L.displayName = "DialogTitle";
-const _ = ({ className: e, ...a }) => /* @__PURE__ */ t(s.Description, { className: r("mt-2", e), ...a });
-_.displayName = "DialogDescription";
-const M = ({ className: e, variant: a, size: o, ...l }) => /* @__PURE__ */ t(
-  s.Close,
+U.displayName = "DialogTitle";
+const W = ({ className: a, ...e }) => /* @__PURE__ */ t(l.Description, { className: r("mt-2", a), ...e });
+W.displayName = "DialogDescription";
+const X = ({ className: a, variant: e, size: o, ...s }) => /* @__PURE__ */ t(
+  l.Close,
   {
-    className: r(u({ variant: a ?? "outline", size: o }), e),
-    ...l
+    className: r(d({ variant: e ?? "outline", size: o }), a),
+    ...s
   }
 );
-M.displayName = "DialogClose";
-const $ = ({ className: e, ...a }) => /* @__PURE__ */ t("div", { className: r("flex flex-col space-y-1 mb-5", e), ...a });
-$.displayName = "DialogHeader";
-const q = ({ className: e, ...a }) => /* @__PURE__ */ t(
+X.displayName = "DialogClose";
+const Y = ({ className: a, ...e }) => /* @__PURE__ */ t("div", { className: r("flex flex-col space-y-1 mb-5", a), ...e });
+Y.displayName = "DialogHeader";
+const Z = ({ className: a, ...e }) => /* @__PURE__ */ t(
   "div",
   {
     className: r(
       "mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-      e
+      a
     ),
-    ...a
+    ...e
   }
 );
-q.displayName = "DialogFooter";
-const E = (e) => /* @__PURE__ */ t(s.Root, { ...e });
-E.displayName = "DrawerRoot";
-const G = ({ className: e, variant: a, size: o, ...l }) => /* @__PURE__ */ t(
-  s.Trigger,
+Z.displayName = "DialogFooter";
+const aa = (a) => /* @__PURE__ */ t(l.Root, { ...a });
+aa.displayName = "DrawerRoot";
+const ea = ({ className: a, variant: e, size: o, ...s }) => /* @__PURE__ */ t(
+  l.Trigger,
   {
-    className: r(u({ variant: a, size: o }), e),
-    ...l
+    className: r(d({ variant: e, size: o }), a),
+    ...s
   }
 );
-G.displayName = "DrawerTrigger";
-const J = (e) => /* @__PURE__ */ t(s.Portal, { ...e });
-J.displayName = "DrawerPortal";
-const K = ({ className: e, ...a }) => /* @__PURE__ */ t(
-  s.Backdrop,
+ea.displayName = "DrawerTrigger";
+const ta = (a) => /* @__PURE__ */ t(l.Portal, { ...a });
+ta.displayName = "DrawerPortal";
+const ra = ({ className: a, ...e }) => /* @__PURE__ */ t(
+  l.Backdrop,
   {
     className: r(
       "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm",
       "transition-opacity duration-300",
       "data-starting-style:opacity-0 data-ending-style:opacity-0",
-      e
+      a
     ),
-    ...a
+    ...e
   }
 );
-K.displayName = "DrawerBackdrop";
-const O = n(
+ra.displayName = "DrawerBackdrop";
+const oa = n(
   [
     "fixed z-50 flex flex-col bg-background p-6 shadow-lg",
     "transition-transform duration-300 ease-out",
@@ -324,110 +419,120 @@ const O = n(
       side: "right"
     }
   }
-), Q = ({ className: e, side: a, ...o }) => /* @__PURE__ */ t(
-  s.Popup,
+), la = ({ className: a, side: e, ...o }) => /* @__PURE__ */ t(
+  l.Popup,
   {
-    className: r(O({ side: a }), e),
+    className: r(oa({ side: e }), a),
     ...o
   }
 );
-Q.displayName = "DrawerPopup";
-const U = ({ className: e, ...a }) => /* @__PURE__ */ t(
-  s.Title,
+la.displayName = "DrawerPopup";
+const sa = ({ className: a, ...e }) => /* @__PURE__ */ t(
+  l.Title,
   {
-    className: r("text-lg font-semibold leading-none tracking-tight", e),
-    ...a
+    className: r("text-lg font-semibold leading-none tracking-tight", a),
+    ...e
   }
 );
-U.displayName = "DrawerTitle";
-const W = ({ className: e, ...a }) => /* @__PURE__ */ t(s.Description, { className: r("", e), ...a });
-W.displayName = "DrawerDescription";
-const X = ({ className: e, variant: a, size: o, ...l }) => /* @__PURE__ */ t(
-  s.Close,
+sa.displayName = "DrawerTitle";
+const ia = ({ className: a, ...e }) => /* @__PURE__ */ t(l.Description, { className: r("", a), ...e });
+ia.displayName = "DrawerDescription";
+const na = ({ className: a, variant: e, size: o, ...s }) => /* @__PURE__ */ t(
+  l.Close,
   {
-    className: r(u({ variant: a ?? "outline", size: o }), e),
-    ...l
+    className: r(d({ variant: e ?? "outline", size: o }), a),
+    ...s
   }
 );
-X.displayName = "DrawerClose";
-const Y = ({ className: e, ...a }) => /* @__PURE__ */ t("div", { className: r("flex flex-col space-y-1.5", e), ...a });
-Y.displayName = "DrawerHeader";
-const Z = ({ className: e, ...a }) => /* @__PURE__ */ t("div", { className: r("py-5", e), ...a });
-Z.displayName = "DrawerContent";
-const ee = ({ className: e, ...a }) => /* @__PURE__ */ t("div", { className: r("", e), ...a });
-ee.displayName = "DrawerFooter";
-const ae = ({ className: e, ...a }) => /* @__PURE__ */ t(c.Root, { className: r("w-full", e), ...a });
-ae.displayName = "AccordionRoot";
-const te = ({ className: e, ...a }) => /* @__PURE__ */ t(
-  c.Item,
-  {
-    className: r("border-b border-border last:border-b-0", e),
-    ...a
+na.displayName = "DrawerClose";
+const da = ({ className: a, ...e }) => /* @__PURE__ */ t("div", { className: r("flex flex-col space-y-1.5", a), ...e });
+da.displayName = "DrawerHeader";
+const ca = ({ className: a, ...e }) => /* @__PURE__ */ t("div", { className: r("py-5", a), ...e });
+ca.displayName = "DrawerContent";
+const ga = ({ className: a, ...e }) => /* @__PURE__ */ t("div", { className: r("", a), ...e });
+ga.displayName = "DrawerFooter";
+const ua = ({ className: a, ...e }) => /* @__PURE__ */ t(u.Root, { className: r("w-full", a), ...e });
+ua.displayName = "AccordionRoot";
+const pa = ({ className: a, ...e }) => /* @__PURE__ */ t(
+  u.Item,
+  {
+    className: r("border-b border-border last:border-b-0", a),
+    ...e
   }
 );
-te.displayName = "AccordionItem";
-const re = ({ className: e, ...a }) => /* @__PURE__ */ t(c.Header, { className: r("flex", e), ...a });
-re.displayName = "AccordionHeader";
-const oe = ({ className: e, children: a, ...o }) => /* @__PURE__ */ t(
-  c.Trigger,
+pa.displayName = "AccordionItem";
+const ma = ({ className: a, ...e }) => /* @__PURE__ */ t(u.Header, { className: r("flex", a), ...e });
+ma.displayName = "AccordionHeader";
+const fa = ({ className: a, children: e, ...o }) => /* @__PURE__ */ t(
+  u.Trigger,
   {
     className: r(
       "flex flex-1 items-center justify-between py-3 font-medium",
-      e
+      a
     ),
     ...o,
-    children: a
+    children: e
   }
 );
-oe.displayName = "AccordionTrigger";
-const se = ({ className: e, ...a }) => /* @__PURE__ */ t(
-  c.Panel,
+fa.displayName = "AccordionTrigger";
+const ba = ({ className: a, ...e }) => /* @__PURE__ */ t(
+  u.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
     ),
-    ...a
+    ...e
   }
 );
-se.displayName = "AccordionPanel";
+ba.displayName = "AccordionPanel";
 export {
-  re as AccordionHeader,
-  te as AccordionItem,
-  se as AccordionPanel,
-  ae as AccordionRoot,
-  oe as AccordionTrigger,
-  y as Button,
-  I as DialogBackdrop,
-  M as DialogClose,
-  _ as DialogDescription,
-  q as DialogFooter,
-  $ as DialogHeader,
-  F as DialogPopup,
-  H as DialogPortal,
-  C as DialogRoot,
-  L as DialogTitle,
-  B as DialogTrigger,
-  K as DrawerBackdrop,
-  X as DrawerClose,
-  Z as DrawerContent,
-  W as DrawerDescription,
-  ee as DrawerFooter,
-  Y as DrawerHeader,
-  Q as DrawerPopup,
-  J as DrawerPortal,
-  E as DrawerRoot,
-  U as DrawerTitle,
-  G as DrawerTrigger,
-  x as ScrollAreaContent,
-  D as ScrollAreaCorner,
-  v as ScrollAreaRoot,
-  h as ScrollAreaScrollbar,
-  w as ScrollAreaThumb,
-  N as ScrollAreaViewport,
-  R as TabsIndicator,
-  A as TabsList,
-  V as TabsPanel,
-  T as TabsRoot,
-  P as TabsTab
+  ma as AccordionHeader,
+  pa as AccordionItem,
+  ba as AccordionPanel,
+  ua as AccordionRoot,
+  fa as AccordionTrigger,
+  Va as AlertDialog,
+  h as AlertDialogBackdrop,
+  P as AlertDialogClose,
+  z as AlertDialogDescription,
+  T as AlertDialogPopup,
+  D as AlertDialogPortal,
+  v as AlertDialogRoot,
+  k as AlertDialogTitle,
+  x as AlertDialogTrigger,
+  w as AlertDialogViewport,
+  N as Button,
+  K as DialogBackdrop,
+  X as DialogClose,
+  W as DialogDescription,
+  Z as DialogFooter,
+  Y as DialogHeader,
+  Q as DialogPopup,
+  J as DialogPortal,
+  E as DialogRoot,
+  U as DialogTitle,
+  G as DialogTrigger,
+  ra as DrawerBackdrop,
+  na as DrawerClose,
+  ca as DrawerContent,
+  ia as DrawerDescription,
+  ga as DrawerFooter,
+  da as DrawerHeader,
+  la as DrawerPopup,
+  ta as DrawerPortal,
+  aa as DrawerRoot,
+  sa as DrawerTitle,
+  ea as DrawerTrigger,
+  C as ScrollAreaContent,
+  H as ScrollAreaCorner,
+  V as ScrollAreaRoot,
+  S as ScrollAreaScrollbar,
+  B as ScrollAreaThumb,
+  R as ScrollAreaViewport,
+  $ as TabsIndicator,
+  F as TabsList,
+  q as TabsPanel,
+  I as TabsRoot,
+  _ as TabsTab
 };

package/package.json

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