@lglab/compose-ui 0.26.0 → 0.28.0

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
+};

package/dist/dialog.js

@@ -2,20 +2,20 @@
 import { jsx as t } from "react/jsx-runtime";
 import { Dialog as o } from "@base-ui/react/dialog";
 import { cva as n } from "class-variance-authority";
-import { b as r } from "./button-variants-CbFMPwc8.js";
+import { b as s } from "./button-variants-CbFMPwc8.js";
 import { c as l } from "./utils-B6yFEsav.js";
 const d = (a) => /* @__PURE__ */ t(o.Root, { ...a });
 d.displayName = "DialogRoot";
-const c = ({ className: a, variant: e, size: i, ...s }) => /* @__PURE__ */ t(
+const g = ({ className: a, variant: e, size: i, ...r }) => /* @__PURE__ */ t(
   o.Trigger,
   {
-    className: l(r({ variant: e, size: i }), a),
-    ...s
+    className: l(s({ variant: e, size: i }), a),
+    ...r
   }
 );
-c.displayName = "DialogTrigger";
-const g = (a) => /* @__PURE__ */ t(o.Portal, { ...a });
-g.displayName = "DialogPortal";
+g.displayName = "DialogTrigger";
+const c = (a) => /* @__PURE__ */ t(o.Portal, { ...a });
+c.displayName = "DialogPortal";
 const p = ({ className: a, ...e }) => /* @__PURE__ */ t(
   o.Backdrop,
   {
@@ -64,24 +64,24 @@ u.displayName = "DialogPopup";
 const f = ({ className: a, ...e }) => /* @__PURE__ */ t(
   o.Title,
   {
-    className: l("text-lg font-semibold leading-none tracking-tight", a),
+    className: l("text-lg font-medium leading-none tracking-tight", a),
     ...e
   }
 );
 f.displayName = "DialogTitle";
-const y = ({ className: a, ...e }) => /* @__PURE__ */ t(o.Description, { className: l("mt-2", a), ...e });
-y.displayName = "DialogDescription";
-const D = ({ className: a, variant: e, size: i, ...s }) => /* @__PURE__ */ t(
+const D = ({ className: a, ...e }) => /* @__PURE__ */ t(o.Description, { className: l("text-sm", a), ...e });
+D.displayName = "DialogDescription";
+const y = ({ className: a, variant: e, size: i, ...r }) => /* @__PURE__ */ t(
   o.Close,
   {
-    className: l(r({ variant: e ?? "outline", size: i }), a),
-    ...s
+    className: l(s({ variant: e ?? "outline", size: i }), a),
+    ...r
   }
 );
-D.displayName = "DialogClose";
-const N = ({ className: a, ...e }) => /* @__PURE__ */ t("div", { className: l("flex flex-col space-y-1 mb-5", a), ...e });
+y.displayName = "DialogClose";
+const N = ({ className: a, ...e }) => /* @__PURE__ */ t("div", { className: l("flex flex-col gap-1 mb-5", a), ...e });
 N.displayName = "DialogHeader";
-const b = ({ className: a, ...e }) => /* @__PURE__ */ t(
+const x = ({ className: a, ...e }) => /* @__PURE__ */ t(
   "div",
   {
     className: l(
@@ -91,16 +91,16 @@ const b = ({ className: a, ...e }) => /* @__PURE__ */ t(
     ...e
   }
 );
-b.displayName = "DialogFooter";
+x.displayName = "DialogFooter";
 export {
   p as DialogBackdrop,
-  D as DialogClose,
-  y as DialogDescription,
-  b as DialogFooter,
+  y as DialogClose,
+  D as DialogDescription,
+  x as DialogFooter,
   N as DialogHeader,
   u as DialogPopup,
-  g as DialogPortal,
+  c as DialogPortal,
   d as DialogRoot,
   f as DialogTitle,
-  c as DialogTrigger
+  g as DialogTrigger
 };

package/dist/field.js

@@ -1,19 +1,19 @@
 "use client";
 import { jsx as s } from "react/jsx-runtime";
 import { Field as i } from "@base-ui/react/field";
-import { f as a, l as r, i as o, d, e as m, a as n } from "./form-variants-D4ge0qav.js";
+import { i as a, d as r, e as o, f as d, l as m, a as n } from "./form-variants-LJ8gIbk0.js";
 import { c as t } from "./utils-B6yFEsav.js";
-const c = ({ className: e, ...l }) => /* @__PURE__ */ s(i.Root, { className: t(a, e), ...l });
+const c = ({ className: e, ...l }) => /* @__PURE__ */ s(i.Root, { className: t(n, e), ...l });
 c.displayName = "FieldRoot";
-const p = ({ className: e, ...l }) => /* @__PURE__ */ s(i.Label, { className: t(r, e), ...l });
+const p = ({ className: e, ...l }) => /* @__PURE__ */ s(i.Label, { className: t(m, e), ...l });
 p.displayName = "FieldLabel";
-const y = ({ className: e, ...l }) => /* @__PURE__ */ s(i.Control, { className: t(o, e), ...l });
+const y = ({ className: e, ...l }) => /* @__PURE__ */ s(i.Control, { className: t(a, e), ...l });
 y.displayName = "FieldControl";
-const F = ({ className: e, ...l }) => /* @__PURE__ */ s(i.Description, { className: t(d, e), ...l });
+const F = ({ className: e, ...l }) => /* @__PURE__ */ s(i.Description, { className: t(r, e), ...l });
 F.displayName = "FieldDescription";
-const N = ({ className: e, ...l }) => /* @__PURE__ */ s(i.Error, { className: t(m, e), ...l });
+const N = ({ className: e, ...l }) => /* @__PURE__ */ s(i.Error, { className: t(o, e), ...l });
 N.displayName = "FieldError";
-const u = ({ className: e, ...l }) => /* @__PURE__ */ s(i.Item, { className: t(n, e), ...l });
+const u = ({ className: e, ...l }) => /* @__PURE__ */ s(i.Item, { className: t(d, e), ...l });
 u.displayName = "FieldItem";
 const f = (e) => /* @__PURE__ */ s(i.Validity, { ...e });
 f.displayName = "FieldValidity";

package/dist/fieldset.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as s } from "react/jsx-runtime";
 import { Fieldset as o } from "@base-ui/react/fieldset";
-import { l as r } from "./form-variants-D4ge0qav.js";
+import { l as r } from "./form-variants-LJ8gIbk0.js";
 import { c as l } from "./utils-B6yFEsav.js";
 const a = ({ className: e, ...t }) => /* @__PURE__ */ s(
   o.Root,

package/dist/{form-variants-D4ge0qav.js → form-variants-LJ8gIbk0.js}

@@ -1,9 +1,9 @@
 const e = "flex w-full rounded-md text-sm h-9 px-3 bg-transparent text-foreground border border-input transition-colors duration-200 placeholder:text-muted-foreground aria-invalid:border-destructive aria-invalid:ring-destructive/20", t = "flex items-center gap-2 text-sm font-medium text-foreground data-disabled:opacity-50", r = "text-sm text-muted-foreground", s = "text-sm text-destructive", o = "flex flex-col gap-1.5", a = "flex items-center gap-2";
 export {
-  a,
+  o as a,
   r as d,
   s as e,
-  o as f,
+  a as f,
   e as i,
   t as l
 };