@lglab/compose-ui 0.26.0 → 0.28.0

package/dist/autocomplete.d.ts

@@ -0,0 +1,96 @@
+import { Autocomplete } from '@base-ui/react/autocomplete';
+import { AutocompleteRootProps } from '@base-ui/react/autocomplete';
+import { JSX } from 'react/jsx-runtime';
+import * as React_2 from 'react';
+
+export { Autocomplete }
+
+export declare const AutocompleteCollection: {
+    (props: AutocompleteCollectionProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type AutocompleteCollectionProps = React_2.ComponentProps<typeof Autocomplete.Collection>;
+
+export declare const AutocompleteEmpty: {
+    ({ className, ...props }: AutocompleteEmptyProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type AutocompleteEmptyProps = React_2.ComponentProps<typeof Autocomplete.Empty>;
+
+export declare const AutocompleteGroup: {
+    ({ className, ...props }: AutocompleteGroupProps): JSX.Element;
+    displayName: string;
+};
+
+export declare const AutocompleteGroupLabel: {
+    ({ className, ...props }: AutocompleteGroupLabelProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type AutocompleteGroupLabelProps = React_2.ComponentProps<typeof Autocomplete.GroupLabel>;
+
+export declare type AutocompleteGroupProps = React_2.ComponentProps<typeof Autocomplete.Group>;
+
+export declare const AutocompleteInput: {
+    ({ className, ...props }: AutocompleteInputProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type AutocompleteInputProps = React_2.ComponentProps<typeof Autocomplete.Input>;
+
+export declare const AutocompleteItem: {
+    ({ className, ...props }: AutocompleteItemProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type AutocompleteItemProps = React_2.ComponentProps<typeof Autocomplete.Item>;
+
+export declare const AutocompleteList: {
+    ({ className, ...props }: AutocompleteListProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type AutocompleteListProps = React_2.ComponentProps<typeof Autocomplete.List>;
+
+export declare const AutocompletePopup: {
+    ({ className, ...props }: AutocompletePopupProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type AutocompletePopupProps = React_2.ComponentProps<typeof Autocomplete.Popup>;
+
+export declare const AutocompletePortal: {
+    (props: AutocompletePortalProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type AutocompletePortalProps = React_2.ComponentProps<typeof Autocomplete.Portal>;
+
+export declare const AutocompletePositioner: {
+    ({ className, ...props }: AutocompletePositionerProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type AutocompletePositionerProps = React_2.ComponentProps<typeof Autocomplete.Positioner>;
+
+export declare const AutocompleteRoot: typeof Autocomplete.Root;
+
+export { AutocompleteRootProps }
+
+export declare const AutocompleteSeparator: {
+    ({ className, ...props }: AutocompleteSeparatorProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type AutocompleteSeparatorProps = React_2.ComponentProps<typeof Autocomplete.Separator>;
+
+export declare const AutocompleteStatus: {
+    ({ className, ...props }: AutocompleteStatusProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type AutocompleteStatusProps = React_2.ComponentProps<typeof Autocomplete.Status>;
+
+export { }

package/dist/autocomplete.js

@@ -0,0 +1,117 @@
+"use client";
+import { jsx as a } from "react/jsx-runtime";
+import { Autocomplete as o } from "@base-ui/react/autocomplete";
+import { Autocomplete as G } from "@base-ui/react/autocomplete";
+import { i as l } from "./form-variants-LJ8gIbk0.js";
+import { c as r } from "./utils-B6yFEsav.js";
+const P = o.Root, p = ({ className: t, ...e }) => /* @__PURE__ */ a(o.Input, { className: r(l, t), ...e });
+p.displayName = "AutocompleteInput";
+const m = (t) => /* @__PURE__ */ a(o.Portal, { ...t });
+m.displayName = "AutocompletePortal";
+const s = ({ className: t, ...e }) => /* @__PURE__ */ a(
+  o.Positioner,
+  {
+    className: r("z-50 outline-none", t),
+    sideOffset: 4,
+    ...e
+  }
+);
+s.displayName = "AutocompletePositioner";
+const n = ({ className: t, ...e }) => /* @__PURE__ */ a(
+  o.Popup,
+  {
+    className: r(
+      "group flex flex-col min-w-(--anchor-width) max-h-[min(23rem,var(--available-height))] max-w-(--available-width) origin-(--transform-origin) rounded-md bg-background text-foreground shadow-lg shadow-gray-200 border border-border transition-[transform,scale,opacity] duration-100",
+      "data-ending-style:scale-95 data-ending-style:opacity-0",
+      "data-starting-style:scale-95 data-starting-style:opacity-0",
+      "dark:shadow-none",
+      t
+    ),
+    ...e
+  }
+);
+n.displayName = "AutocompletePopup";
+const c = ({ className: t, ...e }) => /* @__PURE__ */ a(
+  o.Empty,
+  {
+    className: r(
+      "shrink-0 p-4 text-sm leading-4 text-muted-foreground empty:m-0 empty:p-0",
+      t
+    ),
+    ...e
+  }
+);
+c.displayName = "AutocompleteEmpty";
+const u = ({ className: t, ...e }) => /* @__PURE__ */ a(
+  o.List,
+  {
+    className: r(
+      "outline-0 overflow-y-auto scroll-py-2 overscroll-contain flex-1 min-h-0 data-empty:p-0",
+      t
+    ),
+    ...e
+  }
+);
+u.displayName = "AutocompleteList";
+const i = ({ className: t, ...e }) => /* @__PURE__ */ a(
+  o.Item,
+  {
+    className: r(
+      "flex items-center gap-2 py-2 px-4 text-sm leading-4 outline-none select-none",
+      "data-highlighted:bg-accent data-highlighted:text-accent-foreground",
+      t
+    ),
+    ...e
+  }
+);
+i.displayName = "AutocompleteItem";
+const d = ({ className: t, ...e }) => /* @__PURE__ */ a(
+  o.Status,
+  {
+    className: r(
+      "flex items-center gap-2 py-2 px-4 text-sm text-muted-foreground empty:hidden",
+      t
+    ),
+    ...e
+  }
+);
+d.displayName = "AutocompleteStatus";
+const y = ({ className: t, ...e }) => /* @__PURE__ */ a(o.Group, { className: t, ...e });
+y.displayName = "AutocompleteGroup";
+const g = ({ className: t, ...e }) => /* @__PURE__ */ a(
+  o.GroupLabel,
+  {
+    className: r(
+      "px-4 py-1.5 text-sm font-semibold sticky top-0 z-1 bg-background",
+      t
+    ),
+    ...e
+  }
+);
+g.displayName = "AutocompleteGroupLabel";
+const A = (t) => /* @__PURE__ */ a(o.Collection, { ...t });
+A.displayName = "AutocompleteCollection";
+const x = ({ className: t, ...e }) => /* @__PURE__ */ a(
+  o.Separator,
+  {
+    className: r("my-1 border-t border-border", t),
+    ...e
+  }
+);
+x.displayName = "AutocompleteSeparator";
+export {
+  G as Autocomplete,
+  A as AutocompleteCollection,
+  c as AutocompleteEmpty,
+  y as AutocompleteGroup,
+  g as AutocompleteGroupLabel,
+  p as AutocompleteInput,
+  i as AutocompleteItem,
+  u as AutocompleteList,
+  n as AutocompletePopup,
+  m as AutocompletePortal,
+  s as AutocompletePositioner,
+  P as AutocompleteRoot,
+  x as AutocompleteSeparator,
+  d as AutocompleteStatus
+};

package/dist/badge.d.ts

@@ -0,0 +1,42 @@
+import { JSX } from 'react/jsx-runtime';
+import * as React_2 from 'react';
+
+export declare const Badge: {
+    ({ className, variant, appearance, size, shape, ...props }: BadgeProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type BadgeAppearance = 'default' | 'outline' | 'light' | 'ghost';
+
+export declare const BadgeButton: {
+    ({ className, ...props }: BadgeButtonProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type BadgeButtonProps = React_2.ComponentProps<'button'>;
+
+export declare const BadgeDot: {
+    ({ className, ...props }: BadgeDotProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type BadgeDotProps = React_2.ComponentProps<'span'>;
+
+export declare type BadgeProps = React_2.ComponentProps<'span'> & {
+    /** Visual style variant */
+    variant?: BadgeVariant;
+    /** Appearance style */
+    appearance?: BadgeAppearance;
+    /** Size of the badge */
+    size?: BadgeSize;
+    /** Shape of the badge */
+    shape?: BadgeShape;
+};
+
+export declare type BadgeShape = 'pill' | 'rounded';
+
+export declare type BadgeSize = 'sm' | 'md' | 'lg';
+
+export declare type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'success' | 'warning' | 'info';
+
+export { }

package/dist/badge.js

@@ -0,0 +1,203 @@
+"use client";
+import { jsx as t } from "react/jsx-runtime";
+import { cva as o } from "class-variance-authority";
+import { c as s } from "./utils-B6yFEsav.js";
+const p = o(
+  [
+    "inline-flex items-center gap-1.5 whitespace-nowrap font-medium transition-colors",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "",
+        secondary: "",
+        destructive: "",
+        success: "",
+        warning: "",
+        info: ""
+      },
+      appearance: {
+        default: "",
+        outline: "border",
+        light: "",
+        ghost: ""
+      },
+      size: {
+        sm: "text-xs px-2 h-5 min-w-5 [&_svg]:size-3",
+        md: "text-xs px-2.5 h-6 min-w-6 [&_svg]:size-3.5",
+        lg: "text-sm px-3 h-7 min-w-7 [&_svg]:size-4"
+      },
+      shape: {
+        pill: "rounded-full",
+        rounded: "rounded-md"
+      }
+    },
+    compoundVariants: [
+      // Default appearance (solid) - full color bg, white text
+      {
+        variant: "default",
+        appearance: "default",
+        class: "bg-primary text-primary-foreground"
+      },
+      {
+        variant: "secondary",
+        appearance: "default",
+        class: "bg-secondary text-secondary-foreground"
+      },
+      {
+        variant: "destructive",
+        appearance: "default",
+        class: "bg-destructive text-white"
+      },
+      {
+        variant: "success",
+        appearance: "default",
+        class: "bg-success text-white"
+      },
+      {
+        variant: "warning",
+        appearance: "default",
+        class: "bg-warning text-white"
+      },
+      {
+        variant: "info",
+        appearance: "default",
+        class: "bg-info text-white"
+      },
+      // Light appearance - 10% bg, colored text
+      {
+        variant: "default",
+        appearance: "light",
+        class: "bg-primary/10 text-primary"
+      },
+      {
+        variant: "secondary",
+        appearance: "light",
+        class: "bg-secondary text-secondary-foreground"
+      },
+      {
+        variant: "destructive",
+        appearance: "light",
+        class: "bg-destructive/10 text-destructive"
+      },
+      {
+        variant: "success",
+        appearance: "light",
+        class: "bg-success/10 text-success"
+      },
+      {
+        variant: "warning",
+        appearance: "light",
+        class: "bg-warning/10 text-warning"
+      },
+      {
+        variant: "info",
+        appearance: "light",
+        class: "bg-info/10 text-info"
+      },
+      // Outline appearance - border + 10% bg, colored text
+      {
+        variant: "default",
+        appearance: "outline",
+        class: "border-primary bg-primary/10 text-primary"
+      },
+      {
+        variant: "secondary",
+        appearance: "outline",
+        class: "bg-secondary border-border text-foreground"
+      },
+      {
+        variant: "destructive",
+        appearance: "outline",
+        class: "border-destructive bg-destructive/10 text-destructive"
+      },
+      {
+        variant: "success",
+        appearance: "outline",
+        class: "border-success bg-success/10 text-success"
+      },
+      {
+        variant: "warning",
+        appearance: "outline",
+        class: "border-warning bg-warning/10 text-warning"
+      },
+      {
+        variant: "info",
+        appearance: "outline",
+        class: "border-info bg-info/10 text-info"
+      },
+      // Ghost appearance - just colored text
+      {
+        variant: "default",
+        appearance: "ghost",
+        class: "text-primary"
+      },
+      {
+        variant: "secondary",
+        appearance: "ghost",
+        class: "text-secondary-foreground"
+      },
+      {
+        variant: "destructive",
+        appearance: "ghost",
+        class: "text-destructive"
+      },
+      {
+        variant: "success",
+        appearance: "ghost",
+        class: "text-success"
+      },
+      {
+        variant: "warning",
+        appearance: "ghost",
+        class: "text-warning"
+      },
+      {
+        variant: "info",
+        appearance: "ghost",
+        class: "text-info"
+      }
+    ],
+    defaultVariants: {
+      variant: "default",
+      appearance: "default",
+      size: "md",
+      shape: "rounded"
+    }
+  }
+), d = ({ className: a, variant: e, appearance: r, size: n, shape: i, ...c }) => /* @__PURE__ */ t(
+  "span",
+  {
+    className: s(p({ variant: e, appearance: r, size: n, shape: i }), a),
+    ...c
+  }
+);
+d.displayName = "Badge";
+const l = ({ className: a, ...e }) => /* @__PURE__ */ t(
+  "span",
+  {
+    "data-slot": "badge-dot",
+    className: s("size-2 rounded-full bg-[currentColor]", a),
+    ...e
+  }
+);
+l.displayName = "BadgeDot";
+const u = ({ className: a, ...e }) => /* @__PURE__ */ t(
+  "button",
+  {
+    "data-slot": "badge-button",
+    type: "button",
+    className: s(
+      "cursor-pointer transition-all inline-flex items-center justify-center leading-none size-3.5 [&>svg]:opacity-100! [&>svg]:size-3.5! p-0 rounded-md -me-0.5 opacity-60 hover:opacity-100",
+      a
+    ),
+    ...e
+  }
+);
+u.displayName = "BadgeButton";
+export {
+  d as Badge,
+  u as BadgeButton,
+  l as BadgeDot
+};

package/dist/combobox.d.ts

@@ -0,0 +1,182 @@
+import { Combobox } from '@base-ui/react/combobox';
+import { ComboboxChipsProps as ComboboxChipsProps_2 } from '@base-ui/react';
+import { ComboboxRootProps as ComboboxRootProps_2 } from '@base-ui/react/combobox';
+import { JSX } from 'react/jsx-runtime';
+import * as React_2 from 'react';
+
+export { Combobox }
+
+export declare const ComboboxArrow: {
+    ({ className, ...props }: ComboboxArrowProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type ComboboxArrowProps = React_2.ComponentProps<typeof Combobox.Arrow>;
+
+export declare const ComboboxBackdrop: {
+    ({ className, ...props }: ComboboxBackdropProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type ComboboxBackdropProps = React_2.ComponentProps<typeof Combobox.Backdrop>;
+
+export declare const ComboboxChip: {
+    ({ className, ...props }: ComboboxChipProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type ComboboxChipProps = React_2.ComponentProps<typeof Combobox.Chip>;
+
+export declare const ComboboxChipRemove: {
+    ({ className, ...props }: ComboboxChipRemoveProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type ComboboxChipRemoveProps = React_2.ComponentProps<typeof Combobox.ChipRemove>;
+
+export declare const ComboboxChips: React_2.ForwardRefExoticComponent<Omit<Omit<ComboboxChipsProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare type ComboboxChipsProps = React_2.ComponentProps<typeof Combobox.Chips>;
+
+export declare const ComboboxClear: {
+    ({ className, ...props }: ComboboxClearProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type ComboboxClearProps = React_2.ComponentProps<typeof Combobox.Clear>;
+
+export declare const ComboboxCollection: {
+    (props: ComboboxCollectionProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type ComboboxCollectionProps = React_2.ComponentProps<typeof Combobox.Collection>;
+
+export declare const ComboboxControl: {
+    ({ className, ...props }: ComboboxControlProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type ComboboxControlProps = React_2.ComponentProps<'div'>;
+
+export declare const ComboboxEmpty: {
+    ({ className, ...props }: ComboboxEmptyProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type ComboboxEmptyProps = React_2.ComponentProps<typeof Combobox.Empty>;
+
+export declare const ComboboxGroup: {
+    ({ className, ...props }: ComboboxGroupProps): JSX.Element;
+    displayName: string;
+};
+
+export declare const ComboboxGroupLabel: {
+    ({ className, ...props }: ComboboxGroupLabelProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type ComboboxGroupLabelProps = React_2.ComponentProps<typeof Combobox.GroupLabel>;
+
+export declare type ComboboxGroupProps = React_2.ComponentProps<typeof Combobox.Group>;
+
+export declare const ComboboxIcon: {
+    ({ className, ...props }: ComboboxIconProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type ComboboxIconProps = React_2.ComponentProps<typeof Combobox.Icon>;
+
+export declare const ComboboxInput: {
+    ({ className, ...props }: ComboboxInputProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type ComboboxInputProps = React_2.ComponentProps<typeof Combobox.Input>;
+
+export declare const ComboboxItem: {
+    ({ className, ...props }: ComboboxItemProps): JSX.Element;
+    displayName: string;
+};
+
+export declare const ComboboxItemIndicator: {
+    ({ className, ...props }: ComboboxItemIndicatorProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type ComboboxItemIndicatorProps = React_2.ComponentProps<typeof Combobox.ItemIndicator>;
+
+export declare type ComboboxItemProps = React_2.ComponentProps<typeof Combobox.Item>;
+
+export declare const ComboboxItemText: {
+    ({ className, ...props }: ComboboxItemTextProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type ComboboxItemTextProps = React_2.ComponentProps<'span'>;
+
+export declare const ComboboxList: {
+    ({ className, ...props }: ComboboxListProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type ComboboxListProps = React_2.ComponentProps<typeof Combobox.List>;
+
+export declare const ComboboxPopup: {
+    ({ className, ...props }: ComboboxPopupProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type ComboboxPopupProps = React_2.ComponentProps<typeof Combobox.Popup>;
+
+export declare const ComboboxPortal: {
+    (props: ComboboxPortalProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type ComboboxPortalProps = React_2.ComponentProps<typeof Combobox.Portal>;
+
+export declare const ComboboxPositioner: {
+    ({ className, ...props }: ComboboxPositionerProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type ComboboxPositionerProps = React_2.ComponentProps<typeof Combobox.Positioner>;
+
+export declare function ComboboxRoot<Value, Multiple extends boolean | undefined = false>(props: ComboboxRootProps_2<Value, Multiple>): JSX.Element;
+
+export declare namespace ComboboxRoot {
+    var displayName: string;
+}
+
+export declare type ComboboxRootProps<Value, Multiple extends boolean | undefined = false> = ComboboxRootProps_2<Value, Multiple>;
+
+export declare const ComboboxSeparator: {
+    ({ className, ...props }: ComboboxSeparatorProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type ComboboxSeparatorProps = React_2.ComponentProps<typeof Combobox.Separator>;
+
+export declare const ComboboxStatus: {
+    ({ className, ...props }: ComboboxStatusProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type ComboboxStatusProps = React_2.ComponentProps<typeof Combobox.Status>;
+
+export declare const ComboboxTrigger: {
+    ({ className, ...props }: ComboboxTriggerProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type ComboboxTriggerProps = React_2.ComponentProps<typeof Combobox.Trigger>;
+
+export declare const ComboboxValue: {
+    (props: ComboboxValueProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type ComboboxValueProps = React_2.ComponentProps<typeof Combobox.Value>;
+
+export { }