@konstructio/ui 0.1.2-alpha.98 → 0.1.3

package/README.md

@@ -1,68 +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
+### 1. Import the styles
 
-If you don't already have Tailwind CSS installed, follow the official installation guide from the [Tailwind CSS documentation](https://tailwindcss.com/docs/installation). Ensure that Tailwind is properly configured in your project.
+In your global CSS file, import Tailwind, the library theme, and the brand theme you need:
 
----
+```css
+@import 'tailwindcss';
 
-### Step 3: Import and Configure the Plugin
+@import '@konstructio/ui/ui/theme.css';
+@import '@konstructio/ui/ui/civo-theme.css'; /* or kubefirst-theme.css */
+@import '@konstructio/ui/ui/utilities.css';
+```
 
-To use the components provided by `@konstructio/ui`, you need to import the plugin and add it to your Tailwind CSS configuration file.
+Component styles are bundled with the components and injected automatically — no extra CSS import is needed.
 
-Modify your Tailwind configuration file (usually `tailwind.config.js` or `tailwind.config.ts`) as follows:
+### 2. Register the package with Tailwind
 
-```ts
-import { konstructPlugin } from '@konstructio/ui';
+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:
 
-const config: Config = {
-  plugins: [konstructPlugin],
-};
+```css
+@source '../node_modules/@konstructio/ui/dist';
 ```
 
----
+### 3. Wrap your app in the theme provider
 
-### Step 4: Include `@konstructio/ui` in Tailwind Content
+```tsx
+import { ThemeProvider } from '@konstructio/ui';
 
-To ensure Tailwind parses the components from `@konstructio/ui`, add its path to the `content` array in your Tailwind configuration file:
+const App = () => {
+  return (
+    <ThemeProvider theme="light">
+      <YourApp />
+    </ThemeProvider>
+  );
+};
+```
 
-```ts
-const config: Config = {
-  content: [
-    // Other content paths
-    './node_modules/@konstructio/ui/dist/**/*.{js,ts,jsx,tsx}',
-  ],
+## 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>
+  );
 };
 ```
 
-## Final Steps
+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, CopyButton, 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-UEegkZqG.js → AdditionalOptions-ClcR_Kf7.js}

@@ -1,5 +1,5 @@
-import { t as i } from "./dist-CMPkuWNy.js";
-import { t as p } from "./utils-COaoD3PI.js";
+import { t as i } from "./dist-CK8FUUUn.js";
+import { t as p } from "./utils-DnIJruo0.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-DqPQznFI.js

@@ -0,0 +1,109 @@
+import { i as m, r as _ } from "./dist-DbeY0Pzx.js";
+import { a as A } from "./dist-CK8FUUUn.js";
+import { a as C, c as P, i as R, l as u, n as d, o as S, r as w, s as O, t as T } from "./dist-DWopnVS-.js";
+import { Button as h } from "./components/Button/Button.js";
+import { t as y } from "./utils-DnIJruo0.js";
+import * as n from "react";
+import { forwardRef as x } from "react";
+import { jsx as i } from "react/jsx-runtime";
+var b = Object.defineProperty, c = (l, o) => b(l, "name", {
+  value: o,
+  configurable: !0
+}), [E, z] = m("AlertDialog", [u]), s = u(), G = /* @__PURE__ */ c((l) => {
+  const { __scopeAlertDialog: o, ...r } = l, e = s(o);
+  return /* @__PURE__ */ i(T, {
+    ...e,
+    ...r,
+    modal: !0
+  });
+}, "AlertDialog"), N = n.forwardRef(/* @__PURE__ */ c(function(o, r) {
+  const { __scopeAlertDialog: e, ...a } = o, t = s(e);
+  return /* @__PURE__ */ i(P, {
+    ...t,
+    ...a,
+    ref: r
+  });
+}, "AlertDialogTrigger")), J = /* @__PURE__ */ c((l) => {
+  const { __scopeAlertDialog: o, ...r } = l, e = s(o);
+  return /* @__PURE__ */ i(S, {
+    ...e,
+    ...r
+  });
+}, "AlertDialogPortal"), K = n.forwardRef(/* @__PURE__ */ c(function(o, r) {
+  const { __scopeAlertDialog: e, ...a } = o, t = s(e);
+  return /* @__PURE__ */ i(C, {
+    ...t,
+    ...a,
+    ref: r
+  });
+}, "AlertDialogOverlay")), [j, F] = E("AlertDialogContent"), Q = n.forwardRef(/* @__PURE__ */ c(function(o, r) {
+  const { __scopeAlertDialog: e, children: a, ...t } = o, g = s(e), p = n.useRef(null), v = A(r, p), f = n.useRef(null);
+  return /* @__PURE__ */ i(j, {
+    scope: e,
+    cancelRef: f,
+    children: /* @__PURE__ */ i(w, {
+      role: "alertdialog",
+      ...g,
+      ...t,
+      ref: v,
+      onOpenAutoFocus: _(t.onOpenAutoFocus, (D) => {
+        D.preventDefault(), f.current?.focus({ preventScroll: !0 });
+      }),
+      onPointerDownOutside: (D) => D.preventDefault(),
+      onInteractOutside: (D) => D.preventDefault(),
+      children: a
+    })
+  });
+}, "AlertDialogContent")), U = n.forwardRef(/* @__PURE__ */ c(function(o, r) {
+  const { __scopeAlertDialog: e, ...a } = o, t = s(e);
+  return /* @__PURE__ */ i(O, {
+    ...t,
+    ...a,
+    ref: r
+  });
+}, "AlertDialogTitle")), V = n.forwardRef(/* @__PURE__ */ c(function(o, r) {
+  const { __scopeAlertDialog: e, ...a } = o, t = s(e);
+  return /* @__PURE__ */ i(R, {
+    ...t,
+    ...a,
+    ref: r
+  });
+}, "AlertDialogDescription")), W = n.forwardRef(/* @__PURE__ */ c(function(o, r) {
+  const { __scopeAlertDialog: e, ...a } = o, t = s(e);
+  return /* @__PURE__ */ i(d, {
+    ...t,
+    ...a,
+    ref: r
+  });
+}, "AlertDialogAction")), $ = "AlertDialogCancel", X = n.forwardRef(/* @__PURE__ */ c(function(o, r) {
+  const { __scopeAlertDialog: e, ...a } = o, { cancelRef: t } = F($, e), g = s(e), p = A(r, t);
+  return /* @__PURE__ */ i(d, {
+    ...g,
+    ...a,
+    ref: p
+  });
+}, "AlertDialogCancel")), Y = x(({ "data-theme": l, className: o, text: r, variant: e, onOpen: a, onClick: t }, g) => /* @__PURE__ */ i(N, {
+  asChild: !0,
+  children: /* @__PURE__ */ i(h, {
+    ref: g,
+    type: "button",
+    variant: e,
+    "data-theme": l,
+    className: y(o),
+    onClick: () => {
+      a(), t?.();
+    },
+    children: r
+  })
+}));
+export {
+  Q as a,
+  J as c,
+  X as i,
+  U as l,
+  G as n,
+  V as o,
+  W as r,
+  K as s,
+  Y as t
+};

package/dist/Breadcrumb-DzavonoC.js

@@ -0,0 +1,93 @@
+import { o as N } from "./rolldown-runtime-B28h4lGi.js";
+import { t as x } from "./prop-types-qsAjMBb1.js";
+import { t as y } from "./utils-DnIJruo0.js";
+import { breadcrumbVariants as S, breadcrumbWrapperVariants as z } from "./components/Breadcrumb/Breadcrumb.variants.js";
+import { BackButton as C } from "./components/Breadcrumb/components/BackButton/BackButton.js";
+import { t as P } from "./CollapsedSteps-CkMuzOHx.js";
+import { Item as $ } from "./components/Breadcrumb/components/Item/Item.js";
+import b, { Fragment as k, forwardRef as E, useId as L } from "react";
+import { Fragment as R, jsx as i, jsxs as d } from "react/jsx-runtime";
+var s = /* @__PURE__ */ N(x());
+function f() {
+  return f = Object.assign || function(r) {
+    for (var o = 1; o < arguments.length; o++) {
+      var a = arguments[o];
+      for (var t in a) Object.prototype.hasOwnProperty.call(a, t) && (r[t] = a[t]);
+    }
+    return r;
+  }, f.apply(this, arguments);
+}
+function W(r, o) {
+  if (r == null) return {};
+  var a = F(r, o), t, e;
+  if (Object.getOwnPropertySymbols) {
+    var n = Object.getOwnPropertySymbols(r);
+    for (e = 0; e < n.length; e++)
+      t = n[e], !(o.indexOf(t) >= 0) && Object.prototype.propertyIsEnumerable.call(r, t) && (a[t] = r[t]);
+  }
+  return a;
+}
+function F(r, o) {
+  if (r == null) return {};
+  for (var a = {}, t = Object.keys(r), e, n = 0; n < t.length; n++)
+    e = t[n], !(o.indexOf(e) >= 0) && (a[e] = r[e]);
+  return a;
+}
+var c = E(function(r, o) {
+  var a = r.color, t = a === void 0 ? "currentColor" : a, e = r.size, n = e === void 0 ? 24 : e, l = W(r, ["color", "size"]);
+  return /* @__PURE__ */ b.createElement("svg", f({
+    ref: o,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: n,
+    height: n,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: t,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, l), /* @__PURE__ */ b.createElement("polyline", { points: "9 18 15 12 9 6" }));
+});
+c.propTypes = {
+  color: s.default.string,
+  size: s.default.oneOfType([s.default.string, s.default.number])
+};
+c.displayName = "ChevronRight";
+var J = ({ "aria-label": r = "breadcrumb", backButton: o, className: a, collapsedLabel: t = "Show hidden steps", maxVisibleItems: e, steps: n, theme: l, wrapperClassName: w, ...O }) => {
+  const j = L(), h = e !== void 0 && e >= 2 && n.length > e, u = n.length - (e ?? 0) + 1, g = h ? n.slice(1, u) : [], p = h ? [n[0], ...n.slice(u)] : n;
+  return /* @__PURE__ */ d("nav", {
+    "aria-label": r,
+    "data-theme": l,
+    className: y(z({ className: w })),
+    children: [o && /* @__PURE__ */ i(C, {
+      ...o,
+      theme: l
+    }), /* @__PURE__ */ i("ol", {
+      className: y(S({ className: a }), o && "max-md:hidden"),
+      ...O,
+      children: p.map(({ label: v, ..._ }, m) => /* @__PURE__ */ d(k, { children: [
+        /* @__PURE__ */ i($, {
+          ..._,
+          label: v,
+          isLast: m === p.length - 1
+        }),
+        m !== p.length - 1 && /* @__PURE__ */ i("li", {
+          "aria-hidden": "true",
+          className: "flex items-center",
+          children: /* @__PURE__ */ i(c, { className: "text-gray-400 w-5 h-5" })
+        }),
+        m === 0 && g.length > 0 && /* @__PURE__ */ d(R, { children: [/* @__PURE__ */ i(P, {
+          label: t,
+          steps: g
+        }), /* @__PURE__ */ i("li", {
+          "aria-hidden": "true",
+          className: "flex items-center",
+          children: /* @__PURE__ */ i(c, { className: "text-gray-400 w-5 h-5" })
+        })] })
+      ] }, `${j}-${v}`))
+    })]
+  });
+};
+export {
+  J as t
+};

package/dist/Checkbox-DtgzySMh.js

@@ -0,0 +1,252 @@
+import { o as X } from "./rolldown-runtime-B28h4lGi.js";
+import { a as A } from "./dist-CK8FUUUn.js";
+import { i as J, r as j, t as Q } from "./dist-DbeY0Pzx.js";
+import { t as Y } from "./dist-vDSmnSS_.js";
+import { t as Z } from "./dist-uuWgjOcO.js";
+import { t as T } from "./dist-CYuWoi9I.js";
+import { t as ee } from "./prop-types-qsAjMBb1.js";
+import { useToggle as te } from "./hooks/useToggle.js";
+import { t as N } from "./utils-DnIJruo0.js";
+import { checkboxVariants as re, labelVariants as ne } from "./components/Checkbox/Checkbox.variants.js";
+import * as l from "react";
+import M, { forwardRef as $, useId as oe } from "react";
+import { Fragment as ce, jsx as h, jsxs as D } from "react/jsx-runtime";
+var E = /* @__PURE__ */ X(ee());
+function B() {
+  return B = Object.assign || function(e) {
+    for (var n = 1; n < arguments.length; n++) {
+      var c = arguments[n];
+      for (var t in c) Object.prototype.hasOwnProperty.call(c, t) && (e[t] = c[t]);
+    }
+    return e;
+  }, B.apply(this, arguments);
+}
+function se(e, n) {
+  if (e == null) return {};
+  var c = ae(e, n), t, r;
+  if (Object.getOwnPropertySymbols) {
+    var s = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < s.length; r++)
+      t = s[r], !(n.indexOf(t) >= 0) && Object.prototype.propertyIsEnumerable.call(e, t) && (c[t] = e[t]);
+  }
+  return c;
+}
+function ae(e, n) {
+  if (e == null) return {};
+  for (var c = {}, t = Object.keys(e), r, s = 0; s < t.length; s++)
+    r = t[s], !(n.indexOf(r) >= 0) && (c[r] = e[r]);
+  return c;
+}
+var U = $(function(e, n) {
+  var c = e.color, t = c === void 0 ? "currentColor" : c, r = e.size, s = r === void 0 ? 24 : r, o = se(e, ["color", "size"]);
+  return /* @__PURE__ */ M.createElement("svg", B({
+    ref: n,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: s,
+    height: s,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: t,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, o), /* @__PURE__ */ M.createElement("polyline", { points: "20 6 9 17 4 12" }));
+});
+U.propTypes = {
+  color: E.default.string,
+  size: E.default.oneOfType([E.default.string, E.default.number])
+};
+U.displayName = "Check";
+var ie = Object.defineProperty, y = (e, n) => ie(e, "name", {
+  value: n,
+  configurable: !0
+}), q = "Checkbox", [le, Ne] = J(q), [ue, z] = le(q);
+function H(e) {
+  const { __scopeCheckbox: n, checked: c, children: t, defaultChecked: r, disabled: s, form: o, name: a, onCheckedChange: k, required: u, value: g = "on", internal_do_not_use_render: m } = e, [b, v] = Q({
+    prop: c,
+    defaultProp: r ?? !1,
+    onChange: k,
+    caller: q
+  }), [C, I] = l.useState(null), [P, R] = l.useState(null), [i, d] = l.useState(null), x = C ? !!o || !!C.closest("form") : !0, _ = {
+    checked: b,
+    disabled: s,
+    setChecked: v,
+    control: C,
+    setControl: I,
+    name: a,
+    form: o,
+    value: g,
+    userClick: i,
+    onUserClick: d,
+    required: u,
+    defaultChecked: p(r) ? !1 : r,
+    isFormControl: x,
+    bubbleInput: P,
+    setBubbleInput: R
+  };
+  return /* @__PURE__ */ h(ue, {
+    scope: n,
+    ..._,
+    children: K(m) ? m(_) : t
+  });
+}
+y(H, "CheckboxProvider");
+var de = "CheckboxTrigger", fe = /* @__PURE__ */ l.forwardRef(/* @__PURE__ */ y(function({ __scopeCheckbox: n, onKeyDown: c, onClick: t, ...r }, s) {
+  const { control: o, value: a, disabled: k, checked: u, required: g, setControl: m, setChecked: b, onUserClick: v, isFormControl: C, bubbleInput: I } = z(de, n), P = A(s, m), R = l.useRef(u);
+  return l.useEffect(() => {
+    const i = o?.form;
+    if (i) {
+      const d = /* @__PURE__ */ y(() => b(R.current), "reset");
+      return i.addEventListener("reset", d), () => i.removeEventListener("reset", d);
+    }
+  }, [o, b]), /* @__PURE__ */ h(T.button, {
+    type: "button",
+    role: "checkbox",
+    "aria-checked": p(u) ? "mixed" : u,
+    "aria-required": g,
+    "data-state": F(u),
+    "data-disabled": k ? "" : void 0,
+    disabled: k,
+    value: a,
+    ...r,
+    ref: P,
+    onKeyDown: j(c, (i) => {
+      i.key === "Enter" && i.preventDefault();
+    }),
+    onClick: j(t, (i) => {
+      const d = i.isPropagationStopped();
+      v({
+        requestedChecked: p(u) ? !0 : !u,
+        hasConsumerStoppedPropagation: d
+      }), b((x) => p(x) ? !0 : !x), I && C && (d || i.stopPropagation());
+    })
+  });
+}, "CheckboxTrigger")), pe = /* @__PURE__ */ l.forwardRef(/* @__PURE__ */ y(function(n, c) {
+  const { __scopeCheckbox: t, name: r, checked: s, defaultChecked: o, required: a, disabled: k, value: u, onCheckedChange: g, form: m, ...b } = n;
+  return /* @__PURE__ */ h(H, {
+    __scopeCheckbox: t,
+    checked: s,
+    defaultChecked: o,
+    disabled: k,
+    required: a,
+    onCheckedChange: g,
+    name: r,
+    form: m,
+    value: u,
+    internal_do_not_use_render: ({ isFormControl: v }) => /* @__PURE__ */ D(ce, { children: [/* @__PURE__ */ h(fe, {
+      ...b,
+      ref: c,
+      __scopeCheckbox: t
+    }), v && /* @__PURE__ */ h(me, { __scopeCheckbox: t })] })
+  });
+}, "Checkbox")), he = "CheckboxIndicator", be = /* @__PURE__ */ l.forwardRef(/* @__PURE__ */ y(function(n, c) {
+  const { __scopeCheckbox: t, forceMount: r, ...s } = n, o = z(he, t);
+  return /* @__PURE__ */ h(Z, {
+    present: r || p(o.checked) || o.checked === !0,
+    children: /* @__PURE__ */ h(T.span, {
+      "data-state": F(o.checked),
+      "data-disabled": o.disabled ? "" : void 0,
+      ...s,
+      ref: c,
+      style: {
+        pointerEvents: "none",
+        ...n.style
+      }
+    })
+  });
+}, "CheckboxIndicator")), ke = "CheckboxBubbleInput", me = /* @__PURE__ */ l.forwardRef(/* @__PURE__ */ y(function({ __scopeCheckbox: n, onClick: c, ...t }, r) {
+  const { control: s, userClick: o, checked: a, defaultChecked: k, required: u, disabled: g, name: m, value: b, form: v, bubbleInput: C, setBubbleInput: I } = z(ke, n), P = A(r, I), R = Y(s), i = l.useRef(!1), d = l.useRef(a), x = l.useRef(o), _ = l.useRef(null);
+  l.useEffect(() => {
+    const f = C;
+    if (!f) return;
+    const W = window.HTMLInputElement.prototype, S = Object.getOwnPropertyDescriptor(W, "checked").set;
+    if (!S) return;
+    const O = d.current !== a;
+    d.current = a;
+    const G = o !== null && o !== x.current;
+    if (x.current = o, G)
+      _.current = O ? null : o, O && (f.indeterminate = p(a), S.call(f, p(a) ? !1 : a)), f.dispatchEvent(new Event("click", { bubbles: !o.hasConsumerStoppedPropagation }));
+    else if (O) {
+      const L = _.current;
+      _.current = null;
+      const V = L?.requestedChecked === a;
+      i.current = !0, f.indeterminate = p(a), S.call(f, p(a) ? !1 : a), f.dispatchEvent(new Event("click", { bubbles: !(V && L.hasConsumerStoppedPropagation) })), i.current = !1;
+    }
+  }, [
+    C,
+    a,
+    o
+  ]);
+  const w = l.useRef(p(a) ? !1 : a);
+  return /* @__PURE__ */ h(T.input, {
+    type: "checkbox",
+    "aria-hidden": !0,
+    defaultChecked: k ?? w.current,
+    required: u,
+    disabled: g,
+    name: m,
+    value: b,
+    form: v,
+    ...t,
+    tabIndex: -1,
+    ref: P,
+    onClick: j(c, (f) => {
+      i.current && f.stopPropagation();
+    }),
+    style: {
+      ...t.style,
+      ...R,
+      position: "absolute",
+      pointerEvents: "none",
+      opacity: 0,
+      margin: 0,
+      transform: "translateX(-100%)"
+    }
+  });
+}, "CheckboxBubbleInput"));
+function K(e) {
+  return typeof e == "function";
+}
+y(K, "isFunction");
+function p(e) {
+  return e === "indeterminate";
+}
+y(p, "isIndeterminate");
+function F(e) {
+  return p(e) ? "indeterminate" : e ? "checked" : "unchecked";
+}
+y(F, "getState");
+var Ce = $(({ ariaLabelledBy: e, checked: n, className: c, defaultChecked: t, disabled: r, id: s, label: o, labelClassName: a, labelWrapperClassName: k, name: u, theme: g, title: m, variant: b, onChange: v, ...C }, I) => {
+  const [P, R] = te(t ?? !1), i = n !== void 0, d = i ? n : P, x = oe(), _ = s ?? x, w = (f) => {
+    i || R(f), v?.(f);
+  };
+  return /* @__PURE__ */ D("div", {
+    className: N("flex items-center gap-4", k),
+    "data-theme": g,
+    children: [/* @__PURE__ */ h(pe, {
+      id: _,
+      checked: d,
+      ref: I,
+      name: u,
+      disabled: r,
+      "aria-labelledby": e,
+      title: m,
+      className: N(re({
+        className: c,
+        variant: b,
+        checked: d
+      })),
+      onCheckedChange: w,
+      ...C,
+      children: /* @__PURE__ */ h(be, { children: /* @__PURE__ */ h(U, { className: "w-4 h-4 stroke-2" }) })
+    }), o ? /* @__PURE__ */ h("label", {
+      htmlFor: _,
+      className: N(ne({ className: a }), { "cursor-not-allowed": r }),
+      children: o
+    }) : null]
+  });
+});
+Ce.displayName = "KonstructCheckbox";
+export {
+  Ce as t
+};