@konstructio/ui 0.1.2-alpha.105 → 0.1.2-alpha.107

package/README.md

@@ -1,62 +1,149 @@
-> 🚧🚨 **Work in Progress** 🚨🚧
->
-> ⚠️ This library is currently under construction. Features may change and documentation is incomplete. ⚠️
+# @konstructio/ui
 
-# Konstruct React Component Library
+[![npm version](https://img.shields.io/npm/v/@konstructio/ui.svg)](https://www.npmjs.com/package/@konstructio/ui)
+[![license](https://img.shields.io/npm/l/@konstructio/ui.svg)](./LICENSE.md)
+[![Storybook](https://img.shields.io/badge/docs-storybook-ff4785.svg)](https://konstructio.github.io/konstruct-ui)
 
-This repository contains a set of reusable and customizable React components built for **Konstruct**'s infrastructure and Kubernetes products. These components aim to streamline the development process, ensuring consistency and high-quality UI for **Kubefirst**, **Colony**, and other future projects.
+A React component library for [Konstruct](https://konstruct.io) infrastructure products (Kubefirst, Colony) and the Civo dashboard. Built with React, TypeScript, Tailwind CSS v4, and Radix UI primitives.
 
-## Features:
+> **Note**: This library is in active development (alpha). APIs may change between releases.
 
-- **Reusable**: Designed to be used across different projects, reducing development time and effort.
-- **Customizable**: Easily adjustable to fit specific needs or branding requirements.
-- **Responsive**: Optimized for all screen sizes, ensuring a seamless experience on both desktop and mobile.
-- **Accessible**: Built with accessibility in mind, following best practices to ensure compatibility with all users.
-- **Tailwind CSS Integration**: Seamlessly integrated with Tailwind CSS for rapid UI development and easy theming.
+## Features
 
-## **Installation Guide**
+- **40+ components** — forms, tables, modals, charts, navigation, and more
+- **Accessible** — built on Radix UI primitives, tested with jest-axe
+- **Themeable** — light, dark, and brand themes switchable at runtime
+- **Tree-shakeable** — ESM build with component-level code splitting
+- **Broad React support** — compatible with React 16.8+, 17, 18, and 19
 
-Follow these steps to integrate `@konstructio/ui` into your project:
+## Requirements
 
-### Step 1: Install the Library
+| Peer dependency         | Version                    |
+| ----------------------- | -------------------------- |
+| `react` / `react-dom`   | `^16.8 \|\| ^17 \|\| ^18 \|\| ^19` |
+| `tailwindcss`           | `^4`                       |
+| `@tanstack/react-query` | `^5.90`                    |
+| `react-router-dom`      | `^7`                       |
 
-Run the following command to install the package:
+## Installation
 
 ```bash
 npm install @konstructio/ui
 ```
 
----
+## Setup
 
-### Step 2: Install Tailwind CSS v4
+### 1. Import the styles
 
-Tailwind CSS v4 is a peer dependency. If you don't already have it installed, follow the official [Tailwind CSS installation guide](https://tailwindcss.com/docs/installation).
-
----
-
-### Step 3: Import the theme styles
-
-In your global CSS file, import Tailwind and the library theme, plus the brand theme you need:
+In your global CSS file, import Tailwind, the library theme, and the brand theme you need:
 
 ```css
 @import 'tailwindcss';
+
 @import '@konstructio/ui/ui/theme.css';
-@import '@konstructio/ui/ui/utilities.css';
 @import '@konstructio/ui/ui/civo-theme.css'; /* or kubefirst-theme.css */
+@import '@konstructio/ui/ui/utilities.css';
 ```
 
 Component styles are bundled with the components and injected automatically — no extra CSS import is needed.
 
----
-
-### Step 4: Include `@konstructio/ui` in Tailwind's source detection
+### 2. Register the package with Tailwind
 
-So Tailwind generates the utility classes used by the components, add the package to your global CSS with `@source` (the path is relative to your CSS file):
+Add the package to Tailwind's source detection so it generates the utility classes used by the components. The path is relative to your CSS file:
 
 ```css
 @source '../node_modules/@konstructio/ui/dist';
 ```
 
-## Final Steps
+### 3. Wrap your app in the theme provider
+
+```tsx
+import { ThemeProvider } from '@konstructio/ui';
+
+const App = () => {
+  return (
+    <ThemeProvider theme="light">
+      <YourApp />
+    </ThemeProvider>
+  );
+};
+```
+
+## Usage
+
+```tsx
+import { Alert, Button, Input, Modal, Typography } from '@konstructio/ui';
+
+const Example = () => {
+  return (
+    <form>
+      <Typography variant="h3">Create instance</Typography>
+      <Input label="Hostname" isRequired helperText="Must be unique" />
+      <Button variant="primary" type="submit">
+        Create
+      </Button>
+    </form>
+  );
+};
+```
+
+Icons ship as a separate entry point:
+
+```tsx
+import { AlertOutlineIcon, InfoCircleIcon } from '@konstructio/ui/icons';
+```
+
+Utilities such as the `cn` class-merging helper are exported from the root:
+
+```tsx
+import { cn } from '@konstructio/ui';
+
+<div className={cn('flex items-center', isActive && 'bg-primary')} />;
+```
+
+## Theming
+
+Four themes are available: `light` (default styling), `dark`, `kubefirst`, and `kubefirst-dark`. The active theme is applied through the `data-theme` attribute on `<body>` and persisted in a cookie.
+
+Switch themes at runtime with the `useTheme` hook:
+
+```tsx
+import { useTheme } from '@konstructio/ui';
+
+const { theme, setTheme } = useTheme();
+setTheme('dark');
+```
+
+Alternatively, set `data-theme` directly on the document root — useful when the theme is controlled by a host application, such as a micro-frontend shell:
+
+```html
+<html data-theme="dark"></html>
+```
+
+## Components
+
+| Category     | Components                                                                                                                                                                                                                                       |
+| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Forms        | Input, TextArea, Select, Checkbox, Switch, Radio, RadioGroup, RadioCard, Counter, Datepicker, TimePicker, PhoneNumberInput, Range, Slider, Autocomplete, Filter, TagSelect, MultiSelectDropdown, ImageUpload                                       |
+| UI           | Button, Badge, Card, Alert, AlertDialog, Modal, Breadcrumb, Divider, Tag, Tooltip, Toast, Tabs, Typography                                                                                                                                         |
+| Data display | Table, VirtualizedTable, PieChart, ProgressBar, Loading, Spinner                                                                                                                                                                                   |
+| Layout       | Sidebar                                                                                                                                                                                                                                            |
+| Other        | DropdownButton, Command                                                                                                                                                                                                                            |
+
+Full documentation with live examples is available in the [Storybook](https://konstructio.github.io/konstruct-ui).
+
+## Development
+
+```bash
+npm install && npm run setup   # install dependencies and rebuild trusted packages
+npm run storybook              # dev server on http://localhost:6006
+npm run test                   # run tests with coverage
+npm run lint                   # lint
+npm run check:types            # type check
+npm run build                  # production build
+npm run ci                     # full CI pipeline
+```
+
+## License
 
-After completing the above steps, you can now use `@konstructio/ui` components in your project. Restart your development server to apply the changes.
+[MIT](./LICENSE.md)

package/dist/{AdditionalOptions-D0BAS2HG.js → AdditionalOptions-Crcnz0_g.js}

@@ -1,5 +1,5 @@
 import { t as i } from "./dist-xCbHbMLA.js";
-import { t as p } from "./utils-Cx-WzRZF.js";
+import { t as p } from "./utils-B-6R7kNE.js";
 import { useSelectContext as s } from "./components/Select/contexts/select.hook.js";
 import { listGroupLabelVariants as m } from "./components/Select/components/List/List.variants.js";
 import { additionalOptionSlotClassName as l } from "./components/Select/components/AdditionalOptions/AdditionalOptions.variants.js";

package/dist/{AlertDialogTrigger-BGo_acd5.js → AlertDialogTrigger-ouMGAlJW.js}

@@ -1,52 +1,52 @@
 import { a as A } from "./dist-xCbHbMLA.js";
-import { t as d } from "./utils-Cx-WzRZF.js";
-import { i as m, r as _ } from "./dist-D-yS0HN8.js";
-import { a as C, c as P, i as R, l as u, n as v, o as S, r as T, s as O, t as w } from "./dist-C3YVLapk.js";
-import { Button as y } from "./components/Button/Button.js";
+import { t as m } from "./utils-B-6R7kNE.js";
+import { i as _, r as C } from "./dist-D-yS0HN8.js";
+import { a as P, c as R, i as S, l as u, n as v, o as T, r as O, s as w, t as y } from "./dist-DO3apbIh.js";
+import { Button as h } from "./components/Button/Button.js";
 import * as n from "react";
-import { forwardRef as h } from "react";
+import { forwardRef as x } from "react";
 import { jsx as i } from "react/jsx-runtime";
-var x = Object.defineProperty, c = (l, o) => x(l, "name", {
+var b = Object.defineProperty, c = (l, o) => b(l, "name", {
   value: o,
   configurable: !0
-}), [b, X] = m("AlertDialog", [u]), s = u(), E = /* @__PURE__ */ c((l) => {
+}), [E, Y] = _("AlertDialog", [u]), s = u(), N = /* @__PURE__ */ c((l) => {
   const { __scopeAlertDialog: o, ...r } = l, e = s(o);
-  return /* @__PURE__ */ i(w, {
+  return /* @__PURE__ */ i(y, {
     ...e,
     ...r,
     modal: !0
   });
-}, "AlertDialog"), N = n.forwardRef(/* @__PURE__ */ c(function(o, r) {
+}, "AlertDialog"), j = n.forwardRef(/* @__PURE__ */ c(function(o, r) {
   const { __scopeAlertDialog: e, ...a } = o, t = s(e);
-  return /* @__PURE__ */ i(P, {
+  return /* @__PURE__ */ i(R, {
     ...t,
     ...a,
     ref: r
   });
-}, "AlertDialogTrigger")), j = /* @__PURE__ */ c((l) => {
+}, "AlertDialogTrigger")), F = /* @__PURE__ */ c((l) => {
   const { __scopeAlertDialog: o, ...r } = l, e = s(o);
-  return /* @__PURE__ */ i(S, {
+  return /* @__PURE__ */ i(T, {
     ...e,
     ...r
   });
-}, "AlertDialogPortal"), F = n.forwardRef(/* @__PURE__ */ c(function(o, r) {
+}, "AlertDialogPortal"), $ = n.forwardRef(/* @__PURE__ */ c(function(o, r) {
   const { __scopeAlertDialog: e, ...a } = o, t = s(e);
-  return /* @__PURE__ */ i(C, {
+  return /* @__PURE__ */ i(P, {
     ...t,
     ...a,
     ref: r
   });
-}, "AlertDialogOverlay")), [$, k] = b("AlertDialogContent"), B = n.forwardRef(/* @__PURE__ */ c(function(o, r) {
-  const { __scopeAlertDialog: e, children: a, ...t } = o, g = s(e), p = A(r, n.useRef(null)), f = n.useRef(null);
-  return /* @__PURE__ */ i($, {
+}, "AlertDialogOverlay")), [k, B] = E("AlertDialogContent"), H = n.forwardRef(/* @__PURE__ */ c(function(o, r) {
+  const { __scopeAlertDialog: e, children: a, ...t } = o, g = s(e), p = n.useRef(null), d = A(r, p), f = n.useRef(null);
+  return /* @__PURE__ */ i(k, {
     scope: e,
     cancelRef: f,
-    children: /* @__PURE__ */ i(T, {
+    children: /* @__PURE__ */ i(O, {
       role: "alertdialog",
       ...g,
       ...t,
-      ref: p,
-      onOpenAutoFocus: _(t.onOpenAutoFocus, (D) => {
+      ref: d,
+      onOpenAutoFocus: C(t.onOpenAutoFocus, (D) => {
         D.preventDefault(), f.current?.focus({ preventScroll: !0 });
       }),
       onPointerDownOutside: (D) => D.preventDefault(),
@@ -54,42 +54,42 @@ var x = Object.defineProperty, c = (l, o) => x(l, "name", {
       children: a
     })
   });
-}, "AlertDialogContent")), H = n.forwardRef(/* @__PURE__ */ c(function(o, r) {
+}, "AlertDialogContent")), I = n.forwardRef(/* @__PURE__ */ c(function(o, r) {
   const { __scopeAlertDialog: e, ...a } = o, t = s(e);
-  return /* @__PURE__ */ i(O, {
+  return /* @__PURE__ */ i(w, {
     ...t,
     ...a,
     ref: r
   });
-}, "AlertDialogTitle")), I = n.forwardRef(/* @__PURE__ */ c(function(o, r) {
+}, "AlertDialogTitle")), L = n.forwardRef(/* @__PURE__ */ c(function(o, r) {
   const { __scopeAlertDialog: e, ...a } = o, t = s(e);
-  return /* @__PURE__ */ i(R, {
+  return /* @__PURE__ */ i(S, {
     ...t,
     ...a,
     ref: r
   });
-}, "AlertDialogDescription")), L = n.forwardRef(/* @__PURE__ */ c(function(o, r) {
+}, "AlertDialogDescription")), M = n.forwardRef(/* @__PURE__ */ c(function(o, r) {
   const { __scopeAlertDialog: e, ...a } = o, t = s(e);
   return /* @__PURE__ */ i(v, {
     ...t,
     ...a,
     ref: r
   });
-}, "AlertDialogAction")), M = "AlertDialogCancel", q = n.forwardRef(/* @__PURE__ */ c(function(o, r) {
-  const { __scopeAlertDialog: e, ...a } = o, { cancelRef: t } = k(M, e), g = s(e), p = A(r, t);
+}, "AlertDialogAction")), q = "AlertDialogCancel", z = n.forwardRef(/* @__PURE__ */ c(function(o, r) {
+  const { __scopeAlertDialog: e, ...a } = o, { cancelRef: t } = B(q, e), g = s(e), p = A(r, t);
   return /* @__PURE__ */ i(v, {
     ...g,
     ...a,
     ref: p
   });
-}, "AlertDialogCancel")), Y = E, z = N, Z = j, oo = F, eo = B, ro = L, to = q, ao = H, lo = I, io = h(({ "data-theme": l, className: o, text: r, variant: e, onOpen: a, onClick: t }, g) => /* @__PURE__ */ i(z, {
+}, "AlertDialogCancel")), Z = N, G = j, oo = F, eo = $, ro = H, to = M, ao = z, lo = I, io = L, no = x(({ "data-theme": l, className: o, text: r, variant: e, onOpen: a, onClick: t }, g) => /* @__PURE__ */ i(G, {
   asChild: !0,
-  children: /* @__PURE__ */ i(y, {
+  children: /* @__PURE__ */ i(h, {
     ref: g,
     type: "button",
     variant: e,
     "data-theme": l,
-    className: d(o),
+    className: m(o),
     onClick: () => {
       a(), t?.();
     },
@@ -97,13 +97,13 @@ var x = Object.defineProperty, c = (l, o) => x(l, "name", {
   })
 }));
 export {
-  lo as a,
-  Y as c,
-  eo as i,
-  ao as l,
-  ro as n,
-  oo as o,
-  to as r,
-  Z as s,
-  io as t
+  io as a,
+  Z as c,
+  ro as i,
+  lo as l,
+  to as n,
+  eo as o,
+  ao as r,
+  oo as s,
+  no as t
 };

package/dist/{Breadcrumb-Cp3abB2w.js → Breadcrumb-MrF1Z6w2.js}

@@ -1,6 +1,6 @@
-import { o as b } from "./rolldown-runtime-Ck3dxwZt.js";
-import { t as y } from "./prop-types-CfEYxTbR.js";
-import { t as u } from "./utils-Cx-WzRZF.js";
+import { o as b } from "./rolldown-runtime-Dw9YIBcH.js";
+import { t as y } from "./prop-types-BCUW56rg.js";
+import { t as u } from "./utils-B-6R7kNE.js";
 import { breadcrumbVariants as O, breadcrumbWrapperVariants as j } from "./components/Breadcrumb/Breadcrumb.variants.js";
 import { BackButton as w } from "./components/Breadcrumb/components/BackButton/BackButton.js";
 import { Item as _ } from "./components/Breadcrumb/components/Item/Item.js";

package/dist/{Checkbox-B_ngk9Dj.js → Checkbox-8KnRLpQG.js}

@@ -1,16 +1,16 @@
-import { o as X } from "./rolldown-runtime-Ck3dxwZt.js";
-import { t as J } from "./prop-types-CfEYxTbR.js";
+import { o as X } from "./rolldown-runtime-Dw9YIBcH.js";
+import { t as J } from "./prop-types-BCUW56rg.js";
 import { a as U } from "./dist-xCbHbMLA.js";
 import { t as N } from "./dist-CCdbu9GU.js";
-import { t as O } from "./utils-Cx-WzRZF.js";
+import { t as O } from "./utils-B-6R7kNE.js";
 import { i as Q, r as S, t as Y } from "./dist-D-yS0HN8.js";
 import { t as Z } from "./dist-BUocnzkM.js";
 import { useToggle as ee } from "./hooks/useToggle.js";
-import { t as te } from "./dist-pWlMx4Fi2.js";
+import { t as te } from "./dist-pWlMx4Fi.js";
 import { checkboxVariants as re, labelVariants as oe } from "./components/Checkbox/Checkbox.variants.js";
 import * as u from "react";
 import q, { forwardRef as A, useId as ne } from "react";
-import { Fragment as ce, jsx as f, jsxs as $ } from "react/jsx-runtime";
+import { Fragment as ce, jsx as p, jsxs as $ } from "react/jsx-runtime";
 var w = /* @__PURE__ */ X(J());
 function j() {
   return j = Object.assign || function(e) {
@@ -63,45 +63,45 @@ var ie = Object.defineProperty, x = (e, o) => ie(e, "name", {
   configurable: !0
 }), T = "Checkbox", [ue, je] = Q(T), [le, z] = ue(T);
 function D(e) {
-  const { __scopeCheckbox: o, checked: n, children: t, defaultChecked: r, disabled: c, form: a, name: l, onCheckedChange: s, required: d, value: C = "on", internal_do_not_use_render: h } = e, [p, b] = Y({
+  const { __scopeCheckbox: o, checked: n, children: t, defaultChecked: r, disabled: c, form: a, name: l, onCheckedChange: s, required: d, value: C = "on", internal_do_not_use_render: m } = e, [h, k] = Y({
     prop: n,
     defaultProp: r ?? !1,
     onChange: s,
     caller: T
-  }), [v, m] = u.useState(null), [y, R] = u.useState(null), _ = u.useRef(!1), [i, k] = u.useReducer((I) => I + 1, 0), P = v ? !!a || !!v.closest("form") : !0, E = {
-    checked: p,
+  }), [v, I] = u.useState(null), [y, R] = u.useState(null), _ = u.useRef(!1), [i, f] = u.useReducer((b) => b + 1, 0), P = v ? !!a || !!v.closest("form") : !0, E = {
+    checked: h,
     disabled: c,
-    setChecked: b,
+    setChecked: k,
     control: v,
-    setControl: m,
+    setControl: I,
     name: l,
     form: a,
     value: C,
     hasConsumerStoppedPropagationRef: _,
     userInteractionCount: i,
-    onUserInteraction: k,
+    onUserInteraction: f,
     required: d,
     defaultChecked: g(r) ? !1 : r,
     isFormControl: P,
     bubbleInput: y,
     setBubbleInput: R
   };
-  return /* @__PURE__ */ f(le, {
+  return /* @__PURE__ */ p(le, {
     scope: o,
     ...E,
-    children: H(h) ? h(E) : t
+    children: H(m) ? m(E) : t
   });
 }
 x(D, "CheckboxProvider");
 var de = "CheckboxTrigger", fe = /* @__PURE__ */ u.forwardRef(/* @__PURE__ */ x(function({ __scopeCheckbox: o, onKeyDown: n, onClick: t, ...r }, c) {
-  const { control: a, value: l, disabled: s, checked: d, required: C, setControl: h, setChecked: p, hasConsumerStoppedPropagationRef: b, onUserInteraction: v, isFormControl: m, bubbleInput: y } = z(de, o), R = U(c, h), _ = u.useRef(d);
+  const { control: a, value: l, disabled: s, checked: d, required: C, setControl: m, setChecked: h, hasConsumerStoppedPropagationRef: k, onUserInteraction: v, isFormControl: I, bubbleInput: y } = z(de, o), R = U(c, m), _ = u.useRef(d);
   return u.useEffect(() => {
     const i = a?.form;
     if (i) {
-      const k = /* @__PURE__ */ x(() => p(_.current), "reset");
-      return i.addEventListener("reset", k), () => i.removeEventListener("reset", k);
+      const f = /* @__PURE__ */ x(() => h(_.current), "reset");
+      return i.addEventListener("reset", f), () => i.removeEventListener("reset", f);
     }
-  }, [a, p]), /* @__PURE__ */ f(N.button, {
+  }, [a, h]), /* @__PURE__ */ p(N.button, {
     type: "button",
     role: "checkbox",
     "aria-checked": g(d) ? "mixed" : d,
@@ -116,12 +116,12 @@ var de = "CheckboxTrigger", fe = /* @__PURE__ */ u.forwardRef(/* @__PURE__ */ x(
       i.key === "Enter" && i.preventDefault();
     }),
     onClick: S(t, (i) => {
-      v(), p((k) => g(k) ? !0 : !k), y && m && (b.current = i.isPropagationStopped(), b.current || i.stopPropagation());
+      v(), h((f) => g(f) ? !0 : !f), y && I && (k.current = i.isPropagationStopped(), k.current || i.stopPropagation());
     })
   });
 }, "CheckboxTrigger")), pe = /* @__PURE__ */ u.forwardRef(/* @__PURE__ */ x(function(o, n) {
-  const { __scopeCheckbox: t, name: r, checked: c, defaultChecked: a, required: l, disabled: s, value: d, onCheckedChange: C, form: h, ...p } = o;
-  return /* @__PURE__ */ f(D, {
+  const { __scopeCheckbox: t, name: r, checked: c, defaultChecked: a, required: l, disabled: s, value: d, onCheckedChange: C, form: m, ...h } = o;
+  return /* @__PURE__ */ p(D, {
     __scopeCheckbox: t,
     checked: c,
     defaultChecked: a,
@@ -129,19 +129,19 @@ var de = "CheckboxTrigger", fe = /* @__PURE__ */ u.forwardRef(/* @__PURE__ */ x(
     required: l,
     onCheckedChange: C,
     name: r,
-    form: h,
+    form: m,
     value: d,
-    internal_do_not_use_render: ({ isFormControl: b }) => /* @__PURE__ */ $(ce, { children: [/* @__PURE__ */ f(fe, {
-      ...p,
+    internal_do_not_use_render: ({ isFormControl: k }) => /* @__PURE__ */ $(ce, { children: [/* @__PURE__ */ p(fe, {
+      ...h,
       ref: n,
       __scopeCheckbox: t
-    }), b && /* @__PURE__ */ f(ke, { __scopeCheckbox: t })] })
+    }), k && /* @__PURE__ */ p(ke, { __scopeCheckbox: t })] })
   });
 }, "Checkbox")), he = "CheckboxIndicator", be = /* @__PURE__ */ u.forwardRef(/* @__PURE__ */ x(function(o, n) {
   const { __scopeCheckbox: t, forceMount: r, ...c } = o, a = z(he, t);
-  return /* @__PURE__ */ f(Z, {
+  return /* @__PURE__ */ p(Z, {
     present: r || g(a.checked) || a.checked === !0,
-    children: /* @__PURE__ */ f(N.span, {
+    children: /* @__PURE__ */ p(N.span, {
       "data-state": F(a.checked),
       "data-disabled": a.disabled ? "" : void 0,
       ...c,
@@ -153,41 +153,41 @@ var de = "CheckboxTrigger", fe = /* @__PURE__ */ u.forwardRef(/* @__PURE__ */ x(
     })
   });
 }, "CheckboxIndicator")), me = "CheckboxBubbleInput", ke = /* @__PURE__ */ u.forwardRef(/* @__PURE__ */ x(function({ __scopeCheckbox: o, onClick: n, ...t }, r) {
-  const { control: c, hasConsumerStoppedPropagationRef: a, userInteractionCount: l, checked: s, defaultChecked: d, required: C, disabled: h, name: p, value: b, form: v, bubbleInput: m, setBubbleInput: y } = z(me, o), R = U(r, y), _ = te(c), i = u.useRef(!1), k = u.useRef(s), P = u.useRef(l);
+  const { control: c, hasConsumerStoppedPropagationRef: a, userInteractionCount: l, checked: s, defaultChecked: d, required: C, disabled: m, name: h, value: k, form: v, bubbleInput: I, setBubbleInput: y } = z(me, o), R = U(r, y), _ = te(c), i = u.useRef(!1), f = u.useRef(s), P = u.useRef(l);
   u.useEffect(() => {
-    const I = m;
-    if (!I) return;
+    const b = I;
+    if (!b) return;
     const K = window.HTMLInputElement.prototype, L = Object.getOwnPropertyDescriptor(K, "checked").set, M = l !== P.current;
     P.current = l;
-    const W = k.current !== s;
-    k.current = s;
+    const W = f.current !== s;
+    f.current = s;
     const G = !(M && a.current);
     if (W && L) {
       i.current = !M;
       const V = new Event("click", { bubbles: G });
-      I.indeterminate = g(s), L.call(I, g(s) ? !1 : s), I.dispatchEvent(V), i.current = !1;
+      b.indeterminate = g(s), L.call(b, g(s) ? !1 : s), b.dispatchEvent(V), i.current = !1;
     }
   }, [
-    m,
+    I,
     s,
     a,
     l
   ]);
   const E = u.useRef(g(s) ? !1 : s);
-  return /* @__PURE__ */ f(N.input, {
+  return /* @__PURE__ */ p(N.input, {
     type: "checkbox",
     "aria-hidden": !0,
     defaultChecked: d ?? E.current,
     required: C,
-    disabled: h,
-    name: p,
-    value: b,
+    disabled: m,
+    name: h,
+    value: k,
     form: v,
     ...t,
     tabIndex: -1,
     ref: R,
-    onClick: S(n, (I) => {
-      i.current && I.stopPropagation();
+    onClick: S(n, (b) => {
+      i.current && b.stopPropagation();
     }),
     style: {
       ...t.style,
@@ -212,34 +212,33 @@ function F(e) {
   return g(e) ? "indeterminate" : e ? "checked" : "unchecked";
 }
 x(F, "getState");
-var Ce = A(({ ariaLabelledBy: e, className: o, defaultChecked: n, disabled: t, id: r, label: c, labelClassName: a, labelWrapperClassName: l, name: s, theme: d, title: C, variant: h, onChange: p, ...b }, v) => {
-  const [m, y] = ee(n ?? !1), R = ne(), _ = (i) => {
-    y(i), p?.(i);
+var Ce = A(({ ariaLabelledBy: e, checked: o, className: n, defaultChecked: t, disabled: r, id: c, label: a, labelClassName: l, labelWrapperClassName: s, name: d, theme: C, title: m, variant: h, onChange: k, ...v }, I) => {
+  const [y, R] = ee(t ?? !1), _ = o !== void 0, i = _ ? o : y, f = ne(), P = c ?? f, E = (b) => {
+    _ || R(b), k?.(b);
   };
   return /* @__PURE__ */ $("div", {
-    className: O("flex items-center gap-4", l),
-    "data-theme": d,
-    children: [/* @__PURE__ */ f(pe, {
-      id: r ?? R,
-      checked: m,
-      ref: v,
-      name: s,
-      disabled: t,
+    className: O("flex items-center gap-4", s),
+    "data-theme": C,
+    children: [/* @__PURE__ */ p(pe, {
+      id: P,
+      checked: i,
+      ref: I,
+      name: d,
+      disabled: r,
       "aria-labelledby": e,
-      title: C,
+      title: m,
       className: O(re({
-        className: o,
+        className: n,
         variant: h,
-        checked: m
+        checked: i
       })),
-      onCheckedChange: _,
-      ...b,
-      children: /* @__PURE__ */ f(be, { children: /* @__PURE__ */ f(B, { className: "w-4 h-4 stroke-2" }) })
-    }), c ? /* @__PURE__ */ f("label", {
-      htmlFor: s ?? r,
-      className: O(oe({ className: a }), { "cursor-not-allowed": t }),
-      onClick: () => !t && _(!m),
-      children: c
+      onCheckedChange: E,
+      ...v,
+      children: /* @__PURE__ */ p(be, { children: /* @__PURE__ */ p(B, { className: "w-4 h-4 stroke-2" }) })
+    }), a ? /* @__PURE__ */ p("label", {
+      htmlFor: P,
+      className: O(oe({ className: l }), { "cursor-not-allowed": r }),
+      children: a
     }) : null]
   });
 });

package/dist/{CommandInput-BLq69pOT.js → CommandInput-CGnqfudl.js}

@@ -1,8 +1,8 @@
-import { o as v } from "./rolldown-runtime-Ck3dxwZt.js";
-import { t as y } from "./prop-types-CfEYxTbR.js";
-import { t as c } from "./utils-Cx-WzRZF.js";
+import { o as v } from "./rolldown-runtime-Dw9YIBcH.js";
+import { t as y } from "./prop-types-BCUW56rg.js";
+import { t as c } from "./utils-B-6R7kNE.js";
 import { inputVariants as g, searchInconInputVariants as h } from "./components/Command/Command.variants.js";
-import { t as m } from "./dist-BZNE2Tnx.js";
+import { t as m } from "./dist-BbX4Nrk2.js";
 import p, { forwardRef as u } from "react";
 import { jsx as f, jsxs as b } from "react/jsx-runtime";
 var a = /* @__PURE__ */ v(y());

package/dist/{Counter-BV680M5r.js → Counter-CDXdP1Af.js}

@@ -1,7 +1,7 @@
-import { o as D } from "./rolldown-runtime-Ck3dxwZt.js";
-import { t as R } from "./prop-types-CfEYxTbR.js";
+import { o as D } from "./rolldown-runtime-Dw9YIBcH.js";
+import { t as R } from "./prop-types-BCUW56rg.js";
 import { t as P } from "./dist-DX0sBG3Q.js";
-import { t as f } from "./utils-Cx-WzRZF.js";
+import { t as f } from "./utils-B-6R7kNE.js";
 import { Typography as F } from "./components/Typography/Typography.js";
 import { buttonVariants as _, counterVariants as q, labelVariants as A } from "./components/Counter/Counter.variants.js";
 import m, { forwardRef as x, useId as G, useState as H } from "react";