@lglab/compose-ui 0.26.0 → 0.28.0

package/dist/number-field.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as t } from "react/jsx-runtime";
 import { NumberField as o } from "@base-ui/react/number-field";
-import { f as s } from "./form-variants-D4ge0qav.js";
+import { a as s } from "./form-variants-LJ8gIbk0.js";
 import { c as n } from "./utils-B6yFEsav.js";
 const u = ({ className: e, ...r }) => /* @__PURE__ */ t(o.Root, { className: n(s, e), ...r });
 u.displayName = "NumberFieldRoot";
@@ -13,7 +13,7 @@ const m = ({ className: e, ...r }) => /* @__PURE__ */ t(
   }
 );
 m.displayName = "NumberFieldScrubArea";
-const d = ({
+const a = ({
   className: e,
   ...r
 }) => /* @__PURE__ */ t(
@@ -23,9 +23,9 @@ const d = ({
     ...r
   }
 );
-d.displayName = "NumberFieldScrubAreaCursor";
-const a = ({ className: e, ...r }) => /* @__PURE__ */ t(o.Group, { className: n("flex", e), ...r });
-a.displayName = "NumberFieldGroup";
+a.displayName = "NumberFieldScrubAreaCursor";
+const d = ({ className: e, ...r }) => /* @__PURE__ */ t(o.Group, { className: n("flex", e), ...r });
+d.displayName = "NumberFieldGroup";
 const b = ({ className: e, ...r }) => /* @__PURE__ */ t(
   o.Input,
   {
@@ -61,10 +61,10 @@ const l = ({ className: e, ...r }) => /* @__PURE__ */ t(
 l.displayName = "NumberFieldIncrement";
 export {
   c as NumberFieldDecrement,
-  a as NumberFieldGroup,
+  d as NumberFieldGroup,
   l as NumberFieldIncrement,
   b as NumberFieldInput,
   u as NumberFieldRoot,
   m as NumberFieldScrubArea,
-  d as NumberFieldScrubAreaCursor
+  a as NumberFieldScrubAreaCursor
 };

package/dist/select.js

@@ -18,17 +18,17 @@ const n = ({ className: e, ...t }) => /* @__PURE__ */ a(
   }
 );
 n.displayName = "SelectTrigger";
-const d = ({ className: e, ...t }) => /* @__PURE__ */ a(
+const c = ({ className: e, ...t }) => /* @__PURE__ */ a(
   r.Value,
   {
     className: o("data-placeholder:text-muted-foreground text-sm", e),
     ...t
   }
 );
-d.displayName = "SelectValue";
-const i = ({ className: e, ...t }) => /* @__PURE__ */ a(r.Icon, { className: o("flex", e), ...t });
-i.displayName = "SelectIcon";
-const c = ({ className: e, ...t }) => /* @__PURE__ */ a(
+c.displayName = "SelectValue";
+const d = ({ className: e, ...t }) => /* @__PURE__ */ a(r.Icon, { className: o("flex", e), ...t });
+d.displayName = "SelectIcon";
+const i = ({ className: e, ...t }) => /* @__PURE__ */ a(
   r.Backdrop,
   {
     className: o(
@@ -40,10 +40,10 @@ const c = ({ className: e, ...t }) => /* @__PURE__ */ a(
     ...t
   }
 );
-c.displayName = "SelectBackdrop";
-const p = (e) => /* @__PURE__ */ a(r.Portal, { ...e });
-p.displayName = "SelectPortal";
-const m = ({ className: e, ...t }) => /* @__PURE__ */ a(
+i.displayName = "SelectBackdrop";
+const m = (e) => /* @__PURE__ */ a(r.Portal, { ...e });
+m.displayName = "SelectPortal";
+const p = ({ className: e, ...t }) => /* @__PURE__ */ a(
   r.Positioner,
   {
     className: o("outline-none select-none z-50", e),
@@ -51,7 +51,7 @@ const m = ({ className: e, ...t }) => /* @__PURE__ */ a(
     ...t
   }
 );
-m.displayName = "SelectPositioner";
+p.displayName = "SelectPositioner";
 const u = ({ className: e, ...t }) => /* @__PURE__ */ a(
   r.Popup,
   {
@@ -68,7 +68,7 @@ const u = ({ className: e, ...t }) => /* @__PURE__ */ a(
   }
 );
 u.displayName = "SelectPopup";
-const g = ({ className: e, ...t }) => /* @__PURE__ */ a(
+const f = ({ className: e, ...t }) => /* @__PURE__ */ a(
   r.List,
   {
     className: o(
@@ -78,7 +78,7 @@ const g = ({ className: e, ...t }) => /* @__PURE__ */ a(
     ...t
   }
 );
-g.displayName = "SelectList";
+f.displayName = "SelectList";
 const b = ({ className: e, ...t }) => /* @__PURE__ */ a(
   r.Arrow,
   {
@@ -91,36 +91,33 @@ const b = ({ className: e, ...t }) => /* @__PURE__ */ a(
   }
 );
 b.displayName = "SelectArrow";
-const f = ({ className: e, ...t }) => /* @__PURE__ */ a(
+const g = ({ className: e, ...t }) => /* @__PURE__ */ a(
   r.Item,
   {
     className: o(
-      "grid cursor-default grid-cols-[0.75rem_1fr] items-center gap-2 py-1.5 pr-4 pl-2.5 text-sm outline-none select-none",
-      "group-data-[side=none]:pr-12 group-data-[side=none]:text-base group-data-[side=none]:leading-4",
-      "data-highlighted:relative data-highlighted:z-0 data-highlighted:text-background",
-      "data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:rounded-sm data-highlighted:before:bg-foreground",
-      "pointer-coarse:py-2.5 pointer-coarse:text-[0.925rem]",
+      "flex items-center justify-between gap-2 py-1.5 px-4 text-sm outline-none select-none",
+      "data-selected:bg-accent data-selected:text-accent-foreground",
       e
     ),
     ...t
   }
 );
-f.displayName = "SelectItem";
-const h = ({ className: e, ...t }) => /* @__PURE__ */ a(r.ItemText, { className: o("col-start-2 text-sm", e), ...t });
-h.displayName = "SelectItemText";
+g.displayName = "SelectItem";
+const S = ({ className: e, ...t }) => /* @__PURE__ */ a(r.ItemText, { className: o("col-start-2 text-sm", e), ...t });
+S.displayName = "SelectItemText";
 const y = ({ className: e, ...t }) => /* @__PURE__ */ a(r.ItemIndicator, { className: o("col-start-1", e), ...t });
 y.displayName = "SelectItemIndicator";
-const S = ({ className: e, ...t }) => /* @__PURE__ */ a(r.Group, { className: o(e), ...t });
-S.displayName = "SelectGroup";
-const x = ({ className: e, ...t }) => /* @__PURE__ */ a(
+const x = ({ className: e, ...t }) => /* @__PURE__ */ a(r.Group, { className: o(e), ...t });
+x.displayName = "SelectGroup";
+const N = ({ className: e, ...t }) => /* @__PURE__ */ a(
   r.GroupLabel,
   {
     className: o("px-3 py-1.5 text-sm font-semibold", e),
     ...t
   }
 );
-x.displayName = "SelectGroupLabel";
-const N = ({ className: e, ...t }) => /* @__PURE__ */ a(
+N.displayName = "SelectGroupLabel";
+const w = ({ className: e, ...t }) => /* @__PURE__ */ a(
   r.ScrollUpArrow,
   {
     className: o(
@@ -130,8 +127,8 @@ const N = ({ className: e, ...t }) => /* @__PURE__ */ a(
     ...t
   }
 );
-N.displayName = "SelectScrollUpArrow";
-const w = ({ className: e, ...t }) => /* @__PURE__ */ a(
+w.displayName = "SelectScrollUpArrow";
+const h = ({ className: e, ...t }) => /* @__PURE__ */ a(
   r.ScrollDownArrow,
   {
     className: o(
@@ -141,7 +138,7 @@ const w = ({ className: e, ...t }) => /* @__PURE__ */ a(
     ...t
   }
 );
-w.displayName = "SelectScrollDownArrow";
+h.displayName = "SelectScrollDownArrow";
 const I = ({ className: e, ...t }) => /* @__PURE__ */ a(
   r.Separator,
   {
@@ -152,21 +149,21 @@ const I = ({ className: e, ...t }) => /* @__PURE__ */ a(
 I.displayName = "SelectSeparator";
 export {
   b as SelectArrow,
-  c as SelectBackdrop,
-  S as SelectGroup,
-  x as SelectGroupLabel,
-  i as SelectIcon,
-  f as SelectItem,
+  i as SelectBackdrop,
+  x as SelectGroup,
+  N as SelectGroupLabel,
+  d as SelectIcon,
+  g as SelectItem,
   y as SelectItemIndicator,
-  h as SelectItemText,
-  g as SelectList,
+  S as SelectItemText,
+  f as SelectList,
   u as SelectPopup,
-  p as SelectPortal,
-  m as SelectPositioner,
+  m as SelectPortal,
+  p as SelectPositioner,
   s as SelectRoot,
-  w as SelectScrollDownArrow,
-  N as SelectScrollUpArrow,
+  h as SelectScrollDownArrow,
+  w as SelectScrollUpArrow,
   I as SelectSeparator,
   n as SelectTrigger,
-  d as SelectValue
+  c as SelectValue
 };

package/dist/styles/default.css

@@ -17,6 +17,9 @@
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);
   --color-destructive: var(--destructive);
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-info: var(--info);
   --color-input: var(--input);
   --color-border: var(--border);
   --color-ring: var(--ring);
@@ -37,6 +40,9 @@
   --accent: oklch(0.97 0 0);
   --accent-foreground: oklch(0.205 0 0);
   --destructive: oklch(0.577 0.245 27.325);
+  --success: oklch(0.59 0.2 145);
+  --warning: oklch(0.75 0.18 85);
+  --info: oklch(0.55 0.2 255);
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
   --ring: oklch(0.708 0 0);
@@ -56,6 +62,9 @@
   --accent: oklch(0.269 0 0);
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.704 0.191 22.216);
+  --success: oklch(0.65 0.2 145);
+  --warning: oklch(0.795 0.184 86.047);
+  --info: oklch(0.65 0.2 255);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
   --ring: oklch(0.556 0 0);
@@ -76,6 +85,9 @@
     --accent: oklch(0.269 0 0);
     --accent-foreground: oklch(0.985 0 0);
     --destructive: oklch(0.704 0.191 22.216);
+    --success: oklch(0.65 0.2 145);
+    --warning: oklch(0.795 0.184 86.047);
+    --info: oklch(0.65 0.2 255);
     --input: oklch(1 0 0 / 15%);
     --border: oklch(1 0 0 / 10%);
     --ring: oklch(0.556 0 0);

package/dist/textarea.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as t } from "react/jsx-runtime";
-import { i as r } from "./form-variants-D4ge0qav.js";
+import { i as r } from "./form-variants-LJ8gIbk0.js";
 import { c as s } from "./utils-B6yFEsav.js";
 const m = ({ className: a, ...e }) => /* @__PURE__ */ t(
   "textarea",

package/dist/toolbar.d.ts

@@ -0,0 +1,56 @@
+import { JSX } from 'react/jsx-runtime';
+import * as React_2 from 'react';
+import { Toolbar } from '@base-ui/react/toolbar';
+
+declare type ControlSize = 'sm' | 'default' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg';
+
+declare type ControlVariant = 'default' | 'ghost';
+
+export declare const ToolbarButton: {
+    ({ className, variant, size, ...props }: ToolbarButtonProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type ToolbarButtonProps = React_2.ComponentProps<typeof Toolbar.Button> & {
+    /** Visual style of the toolbar button */
+    variant?: ControlVariant;
+    /** Size of the toolbar button */
+    size?: ControlSize;
+};
+
+export declare const ToolbarGroup: {
+    ({ className, ...props }: ToolbarGroupProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type ToolbarGroupProps = React_2.ComponentProps<typeof Toolbar.Group>;
+
+export declare const ToolbarInput: {
+    ({ className, ...props }: ToolbarInputProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type ToolbarInputProps = React_2.ComponentProps<typeof Toolbar.Input>;
+
+export declare const ToolbarLink: {
+    ({ className, ...props }: ToolbarLinkProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type ToolbarLinkProps = React_2.ComponentProps<typeof Toolbar.Link>;
+
+export declare const ToolbarRoot: {
+    ({ className, ...props }: ToolbarRootProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type ToolbarRootProps = React_2.ComponentProps<typeof Toolbar.Root>;
+
+export declare const ToolbarSeparator: {
+    ({ className, ...props }: ToolbarSeparatorProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type ToolbarSeparatorProps = React_2.ComponentProps<typeof Toolbar.Separator>;
+
+export { }

package/dist/toolbar.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsx as e } from "react/jsx-runtime";
+import { Toolbar as a } from "@base-ui/react/toolbar";
+import { c as l } from "./control-variants-Bwep4n0y.js";
+import { c as t } from "./utils-B6yFEsav.js";
+const m = ({ className: o, ...r }) => /* @__PURE__ */ e(
+  a.Root,
+  {
+    className: t(
+      "flex items-center gap-1 flex-wrap rounded-md border border-border bg-muted p-1",
+      o
+    ),
+    ...r
+  }
+);
+m.displayName = "ToolbarRoot";
+const p = ({
+  className: o,
+  variant: r = "ghost",
+  size: n,
+  ...s
+}) => /* @__PURE__ */ e(
+  a.Button,
+  {
+    className: t(l({ variant: r, size: n }), o),
+    ...s
+  }
+);
+p.displayName = "ToolbarButton";
+const d = ({ className: o, ...r }) => /* @__PURE__ */ e(
+  a.Link,
+  {
+    className: t(
+      "text-sm text-muted-foreground no-underline hover:text-foreground",
+      o
+    ),
+    ...r
+  }
+);
+d.displayName = "ToolbarLink";
+const u = ({ className: o, ...r }) => /* @__PURE__ */ e(
+  a.Input,
+  {
+    className: t(
+      "h-8 rounded-md border border-border bg-background px-2 text-sm outline-none",
+      o
+    ),
+    ...r
+  }
+);
+u.displayName = "ToolbarInput";
+const b = ({ className: o, ...r }) => /* @__PURE__ */ e(a.Group, { className: t("flex items-center gap-1", o), ...r });
+b.displayName = "ToolbarGroup";
+const c = ({ className: o, ...r }) => /* @__PURE__ */ e(
+  a.Separator,
+  {
+    className: t("mx-1 h-4 w-px shrink-0 bg-border", o),
+    ...r
+  }
+);
+c.displayName = "ToolbarSeparator";
+export {
+  p as ToolbarButton,
+  b as ToolbarGroup,
+  u as ToolbarInput,
+  d as ToolbarLink,
+  m as ToolbarRoot,
+  c as ToolbarSeparator
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lglab/compose-ui",
-  "version": "0.26.0",
+  "version": "0.28.0",
   "description": "A collection of components built with Base UI & Tailwind CSS",
   "author": "LGLab",
   "license": "MIT",
@@ -30,6 +30,10 @@
       "import": "./dist/accordion.js",
       "types": "./dist/accordion.d.ts"
     },
+    "./autocomplete": {
+      "import": "./dist/autocomplete.js",
+      "types": "./dist/autocomplete.d.ts"
+    },
     "./alert-dialog": {
       "import": "./dist/alert-dialog.js",
       "types": "./dist/alert-dialog.d.ts"
@@ -38,6 +42,10 @@
       "import": "./dist/avatar.js",
       "types": "./dist/avatar.d.ts"
     },
+    "./badge": {
+      "import": "./dist/badge.js",
+      "types": "./dist/badge.d.ts"
+    },
     "./button": {
       "import": "./dist/button.js",
       "types": "./dist/button.d.ts"
@@ -58,6 +66,10 @@
       "import": "./dist/collapsible.js",
       "types": "./dist/collapsible.d.ts"
     },
+    "./combobox": {
+      "import": "./dist/combobox.js",
+      "types": "./dist/combobox.d.ts"
+    },
     "./context-menu": {
       "import": "./dist/context-menu.js",
       "types": "./dist/context-menu.d.ts"
@@ -166,6 +178,10 @@
       "import": "./dist/toggle-group.js",
       "types": "./dist/toggle-group.d.ts"
     },
+    "./toolbar": {
+      "import": "./dist/toolbar.js",
+      "types": "./dist/toolbar.d.ts"
+    },
     "./tooltip": {
       "import": "./dist/tooltip.js",
       "types": "./dist/tooltip.d.ts"
@@ -190,11 +206,11 @@
   },
   "devDependencies": {
     "@base-ui/react": "^1.1.0",
-    "@types/node": "^25.0.9",
-    "@types/react": "^19.2.8",
+    "@types/node": "^25.0.10",
+    "@types/react": "^19.2.9",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.2",
-    "globals": "^17.0.0",
+    "globals": "^17.1.0",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "rollup-preserve-directives": "^1.1.3",
@@ -202,7 +218,7 @@
     "typescript-eslint": "^8.53.1",
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4",
-    "vite-plugin-static-copy": "^3.1.5"
+    "vite-plugin-static-copy": "^3.1.6"
   },
   "scripts": {
     "build": "tsc -b && vite build"