@lglab/compose-ui 0.25.0 → 0.27.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/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 { }

package/dist/combobox.js

@@ -0,0 +1,252 @@
+"use client";
+import { jsx as e } from "react/jsx-runtime";
+import { Combobox as r } from "@base-ui/react/combobox";
+import { Combobox as q } from "@base-ui/react/combobox";
+import * as m from "react";
+import { i as s } from "./form-variants-LJ8gIbk0.js";
+import { c as a } from "./utils-B6yFEsav.js";
+function i(o) {
+  return /* @__PURE__ */ e(r.Root, { ...o });
+}
+i.displayName = "ComboboxRoot";
+const b = (o) => /* @__PURE__ */ e(r.Value, { ...o });
+b.displayName = "ComboboxValue";
+const p = ({ className: o, ...t }) => /* @__PURE__ */ e(r.Icon, { className: a("flex", o), ...t });
+p.displayName = "ComboboxIcon";
+const d = ({ className: o, ...t }) => /* @__PURE__ */ e(
+  r.Input,
+  {
+    className: a(
+      s,
+      "shrink-0",
+      "group-[&]/control:w-auto group-[&]/control:flex-1 group-[&]/control:border-0 group-[&]/control:bg-transparent",
+      "group-[&]/chips:w-auto group-[&]/chips:min-w-12 group-[&]/chips:flex-1 group-[&]/chips:border-0 group-[&]/chips:bg-transparent group-[&]/chips:h-7",
+      o
+    ),
+    ...t
+  }
+);
+d.displayName = "ComboboxInput";
+const l = ({ className: o, ...t }) => /* @__PURE__ */ e(
+  "div",
+  {
+    className: a(
+      s,
+      "group/control flex items-center p-0 pr-1",
+      o
+    ),
+    ...t
+  }
+);
+l.displayName = "ComboboxControl";
+const c = ({ className: o, ...t }) => /* @__PURE__ */ e(
+  r.Clear,
+  {
+    className: a(
+      "flex h-9 w-6 items-center justify-center rounded bg-transparent p-0 text-muted-foreground hover:text-foreground",
+      o
+    ),
+    ...t
+  }
+);
+c.displayName = "ComboboxClear";
+const x = ({ className: o, ...t }) => /* @__PURE__ */ e(
+  r.Trigger,
+  {
+    className: a(
+      "flex h-9 w-fit min-w-6 items-center justify-center rounded bg-transparent p-0 text-muted-foreground hover:text-foreground",
+      o
+    ),
+    ...t
+  }
+);
+x.displayName = "ComboboxTrigger";
+const u = ({ className: o, ...t }) => /* @__PURE__ */ e(
+  r.Backdrop,
+  {
+    className: a(
+      "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",
+      o
+    ),
+    ...t
+  }
+);
+u.displayName = "ComboboxBackdrop";
+const g = (o) => /* @__PURE__ */ e(r.Portal, { ...o });
+g.displayName = "ComboboxPortal";
+const C = ({ className: o, ...t }) => /* @__PURE__ */ e(
+  r.Positioner,
+  {
+    className: a("z-50 outline-none", o),
+    sideOffset: 4,
+    ...t
+  }
+);
+C.displayName = "ComboboxPositioner";
+const y = ({ className: o, ...t }) => /* @__PURE__ */ e(
+  r.Popup,
+  {
+    className: a(
+      "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",
+      o
+    ),
+    ...t
+  }
+);
+y.displayName = "ComboboxPopup";
+const f = ({ className: o, ...t }) => /* @__PURE__ */ e(
+  r.List,
+  {
+    className: a(
+      "outline-0 overflow-y-auto scroll-py-2 overscroll-contain flex-1 min-h-0 data-empty:p-0",
+      o
+    ),
+    ...t
+  }
+);
+f.displayName = "ComboboxList";
+const h = ({ className: o, ...t }) => /* @__PURE__ */ e(
+  r.Empty,
+  {
+    className: a(
+      "shrink-0 p-4 text-sm leading-4 text-muted-foreground empty:m-0 empty:p-0",
+      o
+    ),
+    ...t
+  }
+);
+h.displayName = "ComboboxEmpty";
+const N = ({ className: o, ...t }) => /* @__PURE__ */ e(
+  r.Item,
+  {
+    className: a(
+      "flex items-center justify-between gap-2 py-2 px-4 text-sm leading-4 outline-none select-none",
+      "data-selected:bg-accent data-selected:text-accent-foreground",
+      "data-highlighted:bg-accent data-highlighted:text-accent-foreground",
+      o
+    ),
+    ...t
+  }
+);
+N.displayName = "ComboboxItem";
+const w = ({ className: o, ...t }) => /* @__PURE__ */ e("span", { className: o, ...t });
+w.displayName = "ComboboxItemText";
+const I = ({ className: o, ...t }) => /* @__PURE__ */ e(r.ItemIndicator, { className: o, ...t });
+I.displayName = "ComboboxItemIndicator";
+const v = ({ className: o, ...t }) => /* @__PURE__ */ e(r.Group, { className: o, ...t });
+v.displayName = "ComboboxGroup";
+const k = ({ className: o, ...t }) => /* @__PURE__ */ e(
+  r.GroupLabel,
+  {
+    className: a(
+      "px-4 py-1.5 text-sm font-semibold sticky top-0 z-1 bg-background",
+      o
+    ),
+    ...t
+  }
+);
+k.displayName = "ComboboxGroupLabel";
+const P = (o) => /* @__PURE__ */ e(r.Collection, { ...o });
+P.displayName = "ComboboxCollection";
+const R = ({ className: o, ...t }) => /* @__PURE__ */ e(
+  r.Separator,
+  {
+    className: a("my-1 border-t border-border", o),
+    ...t
+  }
+);
+R.displayName = "ComboboxSeparator";
+const S = ({ className: o, ...t }) => /* @__PURE__ */ e(
+  r.Status,
+  {
+    className: a(
+      "flex items-center gap-2 py-1 px-4 text-sm text-muted-foreground empty:hidden",
+      o
+    ),
+    ...t
+  }
+);
+S.displayName = "ComboboxStatus";
+const G = m.forwardRef(
+  ({ className: o, ...t }, n) => /* @__PURE__ */ e(
+    r.Chips,
+    {
+      ref: n,
+      className: a(
+        s,
+        "group/chips flex flex-wrap items-center gap-1 px-1 py-1 h-auto",
+        o
+      ),
+      ...t
+    }
+  )
+);
+G.displayName = "ComboboxChips";
+const L = ({ className: o, ...t }) => /* @__PURE__ */ e(
+  r.Chip,
+  {
+    className: a(
+      "flex items-center gap-1 rounded-md bg-muted px-1.5 py-0.5 text-xs text-foreground font-medium",
+      "data-highlighted:bg-primary data-highlighted:text-primary-foreground",
+      "focus-within:bg-primary focus-within:text-primary-foreground",
+      o
+    ),
+    ...t
+  }
+);
+L.displayName = "ComboboxChip";
+const T = ({ className: o, ...t }) => /* @__PURE__ */ e(
+  r.ChipRemove,
+  {
+    className: a(
+      "rounded-md p-0.5 text-inherit hover:bg-muted-foreground/20",
+      o
+    ),
+    ...t
+  }
+);
+T.displayName = "ComboboxChipRemove";
+const j = ({ className: o, ...t }) => /* @__PURE__ */ e(
+  r.Arrow,
+  {
+    className: a(
+      "flex data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180",
+      o
+    ),
+    ...t
+  }
+);
+j.displayName = "ComboboxArrow";
+export {
+  q as Combobox,
+  j as ComboboxArrow,
+  u as ComboboxBackdrop,
+  L as ComboboxChip,
+  T as ComboboxChipRemove,
+  G as ComboboxChips,
+  c as ComboboxClear,
+  P as ComboboxCollection,
+  l as ComboboxControl,
+  h as ComboboxEmpty,
+  v as ComboboxGroup,
+  k as ComboboxGroupLabel,
+  p as ComboboxIcon,
+  d as ComboboxInput,
+  N as ComboboxItem,
+  I as ComboboxItemIndicator,
+  w as ComboboxItemText,
+  f as ComboboxList,
+  y as ComboboxPopup,
+  g as ComboboxPortal,
+  C as ComboboxPositioner,
+  i as ComboboxRoot,
+  R as ComboboxSeparator,
+  S as ComboboxStatus,
+  x as ComboboxTrigger,
+  b as ComboboxValue
+};