@lglab/compose-ui 0.20.0 → 0.21.0

package/dist/accordion.d.ts

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

package/dist/accordion.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx as r } from "react/jsx-runtime";
+import { Accordion as t } from "@base-ui/react/accordion";
+import { c as a } from "./utils-B6yFEsav.js";
+const n = ({ className: e, ...o }) => /* @__PURE__ */ r(t.Root, { className: a("w-full", e), ...o });
+n.displayName = "AccordionRoot";
+const i = ({ className: e, ...o }) => /* @__PURE__ */ r(
+  t.Item,
+  {
+    className: a("border-b border-border last:border-b-0", e),
+    ...o
+  }
+);
+i.displayName = "AccordionItem";
+const d = ({ className: e, ...o }) => /* @__PURE__ */ r(t.Header, { className: a("flex", e), ...o });
+d.displayName = "AccordionHeader";
+const s = ({ className: e, children: o, ...c }) => /* @__PURE__ */ r(
+  t.Trigger,
+  {
+    className: a(
+      "flex flex-1 items-center justify-between py-3 font-medium",
+      e
+    ),
+    ...c,
+    children: o
+  }
+);
+s.displayName = "AccordionTrigger";
+const l = ({ className: e, ...o }) => /* @__PURE__ */ r(
+  t.Panel,
+  {
+    className: a(
+      "overflow-hidden duration-200 h-(--accordion-panel-height) transition-height ease-out data-ending-style:h-0 data-starting-style:h-0",
+      e
+    ),
+    ...o
+  }
+);
+l.displayName = "AccordionPanel";
+export {
+  d as AccordionHeader,
+  i as AccordionItem,
+  l as AccordionPanel,
+  n as AccordionRoot,
+  s as AccordionTrigger
+};

package/dist/alert-dialog.d.ts

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

package/dist/alert-dialog.js

@@ -0,0 +1,112 @@
+"use client";
+import { jsx as e } from "react/jsx-runtime";
+import { AlertDialog as l } from "@base-ui/react/alert-dialog";
+import { AlertDialog as T } from "@base-ui/react/alert-dialog";
+import { cva as n } from "class-variance-authority";
+import { b as s } from "./button-variants-CbFMPwc8.js";
+import { c as r } from "./utils-B6yFEsav.js";
+const d = (a) => /* @__PURE__ */ e(l.Root, { ...a });
+d.displayName = "AlertDialogRoot";
+const g = ({
+  className: a,
+  variant: t,
+  size: o,
+  ...i
+}) => /* @__PURE__ */ e(
+  l.Trigger,
+  {
+    className: r(s({ variant: t, size: o }), a),
+    ...i
+  }
+);
+g.displayName = "AlertDialogTrigger";
+const c = (a) => /* @__PURE__ */ e(l.Portal, { ...a });
+c.displayName = "AlertDialogPortal";
+const p = ({ className: a, ...t }) => /* @__PURE__ */ e(
+  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",
+      a
+    ),
+    ...t
+  }
+);
+p.displayName = "AlertDialogBackdrop";
+const m = ({ className: a, ...t }) => /* @__PURE__ */ e(
+  l.Viewport,
+  {
+    className: r("fixed inset-0 z-50 flex items-center justify-center p-4", a),
+    ...t
+  }
+);
+m.displayName = "AlertDialogViewport";
+const u = 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"
+    }
+  }
+), D = ({ className: a, size: t, ...o }) => /* @__PURE__ */ e(
+  l.Popup,
+  {
+    className: r(u({ size: t }), a),
+    ...o
+  }
+);
+D.displayName = "AlertDialogPopup";
+const f = ({ className: a, ...t }) => /* @__PURE__ */ e(
+  l.Title,
+  {
+    className: r("text-lg font-semibold leading-none tracking-tight", a),
+    ...t
+  }
+);
+f.displayName = "AlertDialogTitle";
+const y = ({ className: a, ...t }) => /* @__PURE__ */ e(l.Description, { className: r("mt-2", a), ...t });
+y.displayName = "AlertDialogDescription";
+const A = ({
+  className: a,
+  variant: t,
+  size: o,
+  ...i
+}) => /* @__PURE__ */ e(
+  l.Close,
+  {
+    className: r(s({ variant: t ?? "outline", size: o }), a),
+    ...i
+  }
+);
+A.displayName = "AlertDialogClose";
+export {
+  T as AlertDialog,
+  p as AlertDialogBackdrop,
+  A as AlertDialogClose,
+  y as AlertDialogDescription,
+  D as AlertDialogPopup,
+  c as AlertDialogPortal,
+  d as AlertDialogRoot,
+  f as AlertDialogTitle,
+  g as AlertDialogTrigger,
+  m as AlertDialogViewport
+};

package/dist/arrow-svg-C6zQTvgS.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { c as o } from "./utils-B6yFEsav.js";
+function n({
+  fillClassName: s = "fill-background",
+  strokeClassName: e = "fill-border",
+  className: a,
+  ...i
+}) {
+  return /* @__PURE__ */ l(
+    "svg",
+    {
+      width: "20",
+      height: "10",
+      viewBox: "0 0 20 10",
+      fill: "none",
+      className: o(a),
+      ...i,
+      children: [
+        /* @__PURE__ */ r(
+          "path",
+          {
+            d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",
+            className: s
+          }
+        ),
+        /* @__PURE__ */ r(
+          "path",
+          {
+            d: "M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z",
+            className: e
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  n as A
+};

package/dist/avatar.d.ts

@@ -0,0 +1,47 @@
+import { Avatar } from '@base-ui/react/avatar';
+import { JSX } from 'react/jsx-runtime';
+import * as React_2 from 'react';
+
+export declare const AvatarFallback: {
+    ({ className, ...props }: AvatarFallbackProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type AvatarFallbackProps = React_2.ComponentProps<typeof Avatar.Fallback>;
+
+export declare const AvatarImage: {
+    ({ className, ...props }: AvatarImageProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type AvatarImageProps = React_2.ComponentProps<typeof Avatar.Image>;
+
+export declare const AvatarRoot: {
+    ({ className, size, ...props }: AvatarRootProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type AvatarRootProps = React_2.ComponentProps<typeof Avatar.Root> & {
+    /** Size of the avatar */
+    size?: AvatarSize;
+};
+
+declare type AvatarSize = 'sm' | 'default' | 'lg';
+
+export declare const AvatarStack: {
+    ({ "aria-label": ariaLabel, maxVisible, className, children, }: AvatarStackProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type AvatarStackProps = {
+    /** ARIA label for the avatar stack list */
+    'aria-label': string;
+    /** Maximum number of avatars to display before showing overflow indicator */
+    maxVisible?: number;
+    /** Additional CSS classes */
+    className?: string;
+    /** Avatar components to display */
+    children: React_2.ReactNode;
+};
+
+export { }

package/dist/avatar.js

@@ -0,0 +1,81 @@
+"use client";
+import { jsx as a, jsxs as u } from "react/jsx-runtime";
+import { Avatar as n } from "@base-ui/react/avatar";
+import { cva as A } from "class-variance-authority";
+import * as f from "react";
+import { c as s } from "./utils-B6yFEsav.js";
+const v = A(
+  [
+    "relative flex shrink-0 items-center justify-center overflow-hidden rounded-full",
+    "bg-muted text-foreground",
+    "border-2 border-background"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "size-8 text-xs",
+        default: "size-10 text-sm",
+        lg: "size-12 text-base"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+), h = ({ className: t, size: e, ...l }) => /* @__PURE__ */ a(n.Root, { className: s(v({ size: e }), t), ...l });
+h.displayName = "AvatarRoot";
+const g = ({ className: t, ...e }) => /* @__PURE__ */ a(
+  n.Image,
+  {
+    className: s("aspect-square h-full w-full object-cover", t),
+    ...e
+  }
+);
+g.displayName = "AvatarImage";
+const y = ({ className: t, ...e }) => /* @__PURE__ */ a(
+  n.Fallback,
+  {
+    className: s(
+      "flex h-full w-full items-center justify-center font-medium",
+      t
+    ),
+    ...e
+  }
+);
+y.displayName = "AvatarFallback";
+const z = ({
+  "aria-label": t,
+  maxVisible: e,
+  className: l,
+  children: p
+}) => {
+  const o = f.Children.toArray(p), i = o.length, c = e !== void 0 ? Math.min(e, i) : i, d = i - c, b = o.slice(0, c), x = (() => {
+    const r = o[0];
+    return f.isValidElement(r) && r.type === h ? r.props.size ?? "default" : "default";
+  })();
+  return /* @__PURE__ */ u("ul", { "aria-label": t, className: s("flex -space-x-2", l), children: [
+    b.map((r, m) => /* @__PURE__ */ a("li", { children: r }, m)),
+    d > 0 && /* @__PURE__ */ a("li", { children: /* @__PURE__ */ u(
+      "span",
+      {
+        className: s(
+          "relative flex shrink-0 items-center justify-center overflow-hidden rounded-full",
+          "bg-muted text-foreground border-2 border-background",
+          "font-medium",
+          v({ size: x })
+        ),
+        children: [
+          "+",
+          d
+        ]
+      }
+    ) })
+  ] });
+};
+z.displayName = "AvatarStack";
+export {
+  y as AvatarFallback,
+  g as AvatarImage,
+  h as AvatarRoot,
+  z as AvatarStack
+};

package/dist/button-variants-CbFMPwc8.js

@@ -0,0 +1,33 @@
+import { cva as e } from "class-variance-authority";
+const t = e(
+  [
+    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all select-none [&_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"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border border-border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+export {
+  t as b
+};

package/dist/button.d.ts

@@ -0,0 +1,21 @@
+import { Button as Button_2 } from '@base-ui/react/button';
+import { JSX } from 'react/jsx-runtime';
+import * as React_2 from 'react';
+
+export declare const Button: {
+    ({ className, variant, size, disabled, children, ...props }: ButtonProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type ButtonProps = React_2.ComponentProps<typeof Button_2> & {
+    /** Visual style variant */
+    variant?: ButtonVariant;
+    /** Size of the button */
+    size?: ButtonSize;
+};
+
+declare type ButtonSize = 'sm' | 'default' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg';
+
+declare type ButtonVariant = 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link';
+
+export { }

package/dist/button.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as a } from "react/jsx-runtime";
+import { Button as i } from "@base-ui/react/button";
+import { b as u } from "./button-variants-CbFMPwc8.js";
+import { c as e } from "./utils-B6yFEsav.js";
+const p = ({
+  className: t,
+  variant: o,
+  size: r,
+  disabled: m,
+  children: n,
+  ...s
+}) => /* @__PURE__ */ a(
+  i,
+  {
+    className: e(u({ variant: o, size: r }), t),
+    disabled: m,
+    ...s,
+    children: n
+  }
+);
+p.displayName = "Button";
+export {
+  p as Button
+};

package/dist/card.d.ts

@@ -0,0 +1,99 @@
+import { ClassProp } from 'class-variance-authority/types';
+import { JSX } from 'react/jsx-runtime';
+import * as React_2 from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * Container for the main content of the card.
+ */
+export declare const CardContent: {
+    ({ className, ...props }: CardContentProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type CardContentProps = React_2.ComponentProps<'div'>;
+
+/**
+ * Secondary text content for the card.
+ */
+export declare const CardDescription: {
+    ({ className, ...props }: CardDescriptionProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type CardDescriptionProps = React_2.ComponentProps<'p'>;
+
+/**
+ * Container for card actions and footer content.
+ * Use Separator component above footer if a visual divider is needed.
+ */
+export declare const CardFooter: {
+    ({ className, ...props }: CardFooterProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type CardFooterProps = React_2.ComponentProps<'footer'>;
+
+/**
+ * Container for the card's header content (title, description).
+ */
+export declare const CardHeader: {
+    ({ className, ...props }: CardHeaderProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type CardHeaderProps = React_2.ComponentProps<'header'>;
+
+/**
+ * Container for media content (images, videos) within a card.
+ * Use Tailwind aspect-* classes for aspect ratios (e.g., className="aspect-video").
+ */
+export declare const CardMedia: {
+    ({ className, ...props }: CardMediaProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type CardMediaProps = React_2.ComponentProps<'div'>;
+
+/**
+ * The root container for a card component.
+ * Renders as an `<article>` for semantic HTML.
+ */
+export declare const CardRoot: React_2.ForwardRefExoticComponent<Omit<CardRootProps, "ref"> & React_2.RefAttributes<HTMLElement>>;
+
+export declare type CardRootProps = React_2.ComponentProps<'article'> & VariantProps<typeof cardVariants>;
+
+/**
+ * A distinct section within a card, useful for multi-section layouts.
+ * Use Separator component between sections if visual dividers are needed.
+ */
+export declare const CardSection: {
+    ({ className, ...props }: CardSectionProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type CardSectionProps = React_2.ComponentProps<'section'>;
+
+/**
+ * The card's title. Renders as an `<h3>` by default.
+ * Use the `as` prop to change the heading level.
+ */
+export declare const CardTitle: {
+    ({ as: Component, className, ...props }: CardTitleProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type CardTitleProps = React_2.ComponentProps<'h3'> & {
+    /** The heading level to render */
+    as?: HeadingLevel;
+};
+
+export declare type CardVariant = VariantProps<typeof cardVariants>['variant'];
+
+declare const cardVariants: (props?: ({
+    variant?: "default" | "outline" | "elevated" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+declare type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
+export { }