@konstructio/ui 0.1.2-alpha.7 → 0.1.2-alpha.71

package/dist/components/Checkbox/Checkbox.js

@@ -1,196 +1,195 @@
-import { jsx as u, jsxs as B, Fragment as U } from "react/jsx-runtime";
-import * as h from "react";
-import S, { forwardRef as z, useId as V, useCallback as X } from "react";
-import { u as L } from "../../index-DQH6odE9.js";
-import { c as J, a as Q, b as j } from "../../index-BfXxHr_2.js";
+import { jsx as f, jsxs as B, Fragment as U } from "react/jsx-runtime";
+import * as p from "react";
+import j, { forwardRef as z, useId as V, useCallback as X } from "react";
+import { u as L } from "../../index-DLcqcWxM.js";
+import { P as I, a as J, c as T, b as Q } from "../../index--l0zux8V.js";
 import { u as Y } from "../../index-BZPx6jYI.js";
-import { u as Z } from "../../index-BAEWsOG1.js";
-import { P as ee } from "../../index-C1g_chDT.js";
-import { P as w } from "../../index-BVRIAMfe.js";
-import { cn as T } from "../../utils/index.js";
+import { u as Z } from "../../index-BRXMsxSL.js";
+import { P as ee } from "../../index-3fEdeexs.js";
+import { cn as E } from "../../utils/index.js";
 import { checkboxVariants as te, labelVariants as re } from "./Checkbox.variants.js";
 import { useToggle as oe } from "../../hooks/useToggle.js";
-import { P as y } from "../../index-N2OStZoU.js";
+import { P } from "../../index-BOE_3f_Z.js";
 function R() {
   return R = Object.assign || function(e) {
     for (var a = 1; a < arguments.length; a++) {
-      var o = arguments[a];
-      for (var n in o)
-        Object.prototype.hasOwnProperty.call(o, n) && (e[n] = o[n]);
+      var n = arguments[a];
+      for (var r in n)
+        Object.prototype.hasOwnProperty.call(n, r) && (e[r] = n[r]);
     }
     return e;
   }, R.apply(this, arguments);
 }
 function ne(e, a) {
   if (e == null) return {};
-  var o = ae(e, a), n, r;
+  var n = ae(e, a), r, o;
   if (Object.getOwnPropertySymbols) {
     var t = Object.getOwnPropertySymbols(e);
-    for (r = 0; r < t.length; r++)
-      n = t[r], !(a.indexOf(n) >= 0) && Object.prototype.propertyIsEnumerable.call(e, n) && (o[n] = e[n]);
+    for (o = 0; o < t.length; o++)
+      r = t[o], !(a.indexOf(r) >= 0) && Object.prototype.propertyIsEnumerable.call(e, r) && (n[r] = e[r]);
   }
-  return o;
+  return n;
 }
 function ae(e, a) {
   if (e == null) return {};
-  var o = {}, n = Object.keys(e), r, t;
-  for (t = 0; t < n.length; t++)
-    r = n[t], !(a.indexOf(r) >= 0) && (o[r] = e[r]);
-  return o;
+  var n = {}, r = Object.keys(e), o, t;
+  for (t = 0; t < r.length; t++)
+    o = r[t], !(a.indexOf(o) >= 0) && (n[o] = e[o]);
+  return n;
 }
-var I = z(function(e, a) {
-  var o = e.color, n = o === void 0 ? "currentColor" : o, r = e.size, t = r === void 0 ? 24 : r, l = ne(e, ["color", "size"]);
-  return /* @__PURE__ */ S.createElement("svg", R({
+var N = z(function(e, a) {
+  var n = e.color, r = n === void 0 ? "currentColor" : n, o = e.size, t = o === void 0 ? 24 : o, l = ne(e, ["color", "size"]);
+  return /* @__PURE__ */ j.createElement("svg", R({
     ref: a,
     xmlns: "http://www.w3.org/2000/svg",
     width: t,
     height: t,
     viewBox: "0 0 24 24",
     fill: "none",
-    stroke: n,
+    stroke: r,
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, l), /* @__PURE__ */ S.createElement("polyline", {
+  }, l), /* @__PURE__ */ j.createElement("polyline", {
     points: "20 6 9 17 4 12"
   }));
 });
-I.propTypes = {
-  color: y.string,
-  size: y.oneOfType([y.string, y.number])
+N.propTypes = {
+  color: P.string,
+  size: P.oneOfType([P.string, P.number])
 };
-I.displayName = "Check";
-var P = "Checkbox", [ce, Pe] = J(P), [se, N] = ce(P);
+N.displayName = "Check";
+var _ = "Checkbox", [ce] = Q(_), [se, O] = ce(_);
 function ie(e) {
   const {
     __scopeCheckbox: a,
-    checked: o,
-    children: n,
-    defaultChecked: r,
+    checked: n,
+    children: r,
+    defaultChecked: o,
     disabled: t,
     form: l,
-    name: f,
-    onCheckedChange: d,
+    name: h,
+    onCheckedChange: i,
     required: b,
     value: k = "on",
     // @ts-expect-error
-    internal_do_not_use_render: i
-  } = e, [p, x] = Q({
-    prop: o,
-    defaultProp: r ?? !1,
-    onChange: d,
-    caller: P
-  }), [m, C] = h.useState(null), [g, c] = h.useState(null), s = h.useRef(!1), _ = m ? !!l || !!m.closest("form") : (
+    internal_do_not_use_render: d
+  } = e, [u, x] = J({
+    prop: n,
+    defaultProp: o ?? !1,
+    onChange: i,
+    caller: _
+  }), [C, m] = p.useState(null), [v, c] = p.useState(null), s = p.useRef(!1), y = C ? !!l || !!C.closest("form") : (
     // We set this to true by default so that events bubble to forms without JS (SSR)
     !0
-  ), E = {
-    checked: p,
+  ), w = {
+    checked: u,
     disabled: t,
     setChecked: x,
-    control: m,
-    setControl: C,
-    name: f,
+    control: C,
+    setControl: m,
+    name: h,
     form: l,
     value: k,
     hasConsumerStoppedPropagationRef: s,
     required: b,
-    defaultChecked: v(r) ? !1 : r,
-    isFormControl: _,
-    bubbleInput: g,
+    defaultChecked: g(o) ? !1 : o,
+    isFormControl: y,
+    bubbleInput: v,
     setBubbleInput: c
   };
-  return /* @__PURE__ */ u(
+  return /* @__PURE__ */ f(
     se,
     {
       scope: a,
-      ...E,
-      children: le(i) ? i(E) : n
+      ...w,
+      children: le(d) ? d(w) : r
     }
   );
 }
-var M = "CheckboxTrigger", q = h.forwardRef(
-  ({ __scopeCheckbox: e, onKeyDown: a, onClick: o, ...n }, r) => {
+var M = "CheckboxTrigger", q = p.forwardRef(
+  ({ __scopeCheckbox: e, onKeyDown: a, onClick: n, ...r }, o) => {
     const {
       control: t,
       value: l,
-      disabled: f,
-      checked: d,
+      disabled: h,
+      checked: i,
       required: b,
       setControl: k,
-      setChecked: i,
-      hasConsumerStoppedPropagationRef: p,
+      setChecked: d,
+      hasConsumerStoppedPropagationRef: u,
       isFormControl: x,
-      bubbleInput: m
-    } = N(M, e), C = L(r, k), g = h.useRef(d);
-    return h.useEffect(() => {
+      bubbleInput: C
+    } = O(M, e), m = L(o, k), v = p.useRef(i);
+    return p.useEffect(() => {
       const c = t?.form;
       if (c) {
-        const s = () => i(g.current);
+        const s = () => d(v.current);
         return c.addEventListener("reset", s), () => c.removeEventListener("reset", s);
       }
-    }, [t, i]), /* @__PURE__ */ u(
-      w.button,
+    }, [t, d]), /* @__PURE__ */ f(
+      I.button,
       {
         type: "button",
         role: "checkbox",
-        "aria-checked": v(d) ? "mixed" : d,
+        "aria-checked": g(i) ? "mixed" : i,
         "aria-required": b,
-        "data-state": W(d),
-        "data-disabled": f ? "" : void 0,
-        disabled: f,
+        "data-state": W(i),
+        "data-disabled": h ? "" : void 0,
+        disabled: h,
         value: l,
-        ...n,
-        ref: C,
-        onKeyDown: j(a, (c) => {
+        ...r,
+        ref: m,
+        onKeyDown: T(a, (c) => {
           c.key === "Enter" && c.preventDefault();
         }),
-        onClick: j(o, (c) => {
-          i((s) => v(s) ? !0 : !s), m && x && (p.current = c.isPropagationStopped(), p.current || c.stopPropagation());
+        onClick: T(n, (c) => {
+          d((s) => g(s) ? !0 : !s), C && x && (u.current = c.isPropagationStopped(), u.current || c.stopPropagation());
         })
       }
     );
   }
 );
 q.displayName = M;
-var A = h.forwardRef(
+var A = p.forwardRef(
   (e, a) => {
     const {
-      __scopeCheckbox: o,
-      name: n,
-      checked: r,
+      __scopeCheckbox: n,
+      name: r,
+      checked: o,
       defaultChecked: t,
       required: l,
-      disabled: f,
-      value: d,
+      disabled: h,
+      value: i,
       onCheckedChange: b,
       form: k,
-      ...i
+      ...d
     } = e;
-    return /* @__PURE__ */ u(
+    return /* @__PURE__ */ f(
       ie,
       {
-        __scopeCheckbox: o,
-        checked: r,
+        __scopeCheckbox: n,
+        checked: o,
         defaultChecked: t,
-        disabled: f,
+        disabled: h,
         required: l,
         onCheckedChange: b,
-        name: n,
+        name: r,
         form: k,
-        value: d,
-        internal_do_not_use_render: ({ isFormControl: p }) => /* @__PURE__ */ B(U, { children: [
-          /* @__PURE__ */ u(
+        value: i,
+        internal_do_not_use_render: ({ isFormControl: u }) => /* @__PURE__ */ B(U, { children: [
+          /* @__PURE__ */ f(
             q,
             {
-              ...i,
+              ...d,
               ref: a,
-              __scopeCheckbox: o
+              __scopeCheckbox: n
             }
           ),
-          p && /* @__PURE__ */ u(
+          u && /* @__PURE__ */ f(
             K,
             {
-              __scopeCheckbox: o
+              __scopeCheckbox: n
             }
           )
         ] })
@@ -198,20 +197,20 @@ var A = h.forwardRef(
     );
   }
 );
-A.displayName = P;
-var F = "CheckboxIndicator", D = h.forwardRef(
+A.displayName = _;
+var F = "CheckboxIndicator", D = p.forwardRef(
   (e, a) => {
-    const { __scopeCheckbox: o, forceMount: n, ...r } = e, t = N(F, o);
-    return /* @__PURE__ */ u(
+    const { __scopeCheckbox: n, forceMount: r, ...o } = e, t = O(F, n);
+    return /* @__PURE__ */ f(
       ee,
       {
-        present: n || v(t.checked) || t.checked === !0,
-        children: /* @__PURE__ */ u(
-          w.span,
+        present: r || g(t.checked) || t.checked === !0,
+        children: /* @__PURE__ */ f(
+          I.span,
           {
             "data-state": W(t.checked),
             "data-disabled": t.disabled ? "" : void 0,
-            ...r,
+            ...o,
             ref: a,
             style: { pointerEvents: "none", ...e.style }
           }
@@ -221,51 +220,51 @@ var F = "CheckboxIndicator", D = h.forwardRef(
   }
 );
 D.displayName = F;
-var H = "CheckboxBubbleInput", K = h.forwardRef(
-  ({ __scopeCheckbox: e, ...a }, o) => {
+var H = "CheckboxBubbleInput", K = p.forwardRef(
+  ({ __scopeCheckbox: e, ...a }, n) => {
     const {
-      control: n,
-      hasConsumerStoppedPropagationRef: r,
+      control: r,
+      hasConsumerStoppedPropagationRef: o,
       checked: t,
       defaultChecked: l,
-      required: f,
-      disabled: d,
+      required: h,
+      disabled: i,
       name: b,
       value: k,
-      form: i,
-      bubbleInput: p,
+      form: d,
+      bubbleInput: u,
       setBubbleInput: x
-    } = N(H, e), m = L(o, x), C = Y(t), g = Z(n);
-    h.useEffect(() => {
-      const s = p;
+    } = O(H, e), C = L(n, x), m = Y(t), v = Z(r);
+    p.useEffect(() => {
+      const s = u;
       if (!s) return;
-      const _ = window.HTMLInputElement.prototype, O = Object.getOwnPropertyDescriptor(
-        _,
+      const y = window.HTMLInputElement.prototype, S = Object.getOwnPropertyDescriptor(
+        y,
         "checked"
-      ).set, $ = !r.current;
-      if (C !== t && O) {
+      ).set, $ = !o.current;
+      if (m !== t && S) {
         const G = new Event("click", { bubbles: $ });
-        s.indeterminate = v(t), O.call(s, v(t) ? !1 : t), s.dispatchEvent(G);
+        s.indeterminate = g(t), S.call(s, g(t) ? !1 : t), s.dispatchEvent(G);
       }
-    }, [p, C, t, r]);
-    const c = h.useRef(v(t) ? !1 : t);
-    return /* @__PURE__ */ u(
-      w.input,
+    }, [u, m, t, o]);
+    const c = p.useRef(g(t) ? !1 : t);
+    return /* @__PURE__ */ f(
+      I.input,
       {
         type: "checkbox",
         "aria-hidden": !0,
         defaultChecked: l ?? c.current,
-        required: f,
-        disabled: d,
+        required: h,
+        disabled: i,
         name: b,
         value: k,
-        form: i,
+        form: d,
         ...a,
         tabIndex: -1,
-        ref: m,
+        ref: C,
         style: {
           ...a.style,
-          ...g,
+          ...v,
           position: "absolute",
           pointerEvents: "none",
           opacity: 0,
@@ -283,70 +282,82 @@ K.displayName = H;
 function le(e) {
   return typeof e == "function";
 }
-function v(e) {
+function g(e) {
   return e === "indeterminate";
 }
 function W(e) {
-  return v(e) ? "indeterminate" : e ? "checked" : "unchecked";
+  return g(e) ? "indeterminate" : e ? "checked" : "unchecked";
 }
 const de = z(
   ({
     ariaLabelledBy: e,
     className: a,
-    defaultChecked: o,
-    disabled: n,
-    id: r,
+    defaultChecked: n,
+    disabled: r,
+    id: o,
     label: t,
     labelClassName: l,
-    name: f,
-    theme: d,
-    title: b,
-    variant: k,
-    onChange: i,
-    ...p
-  }, x) => {
-    const [m, C] = oe(o ?? !1), g = V(), c = X(
-      (s) => {
-        C(s), i?.(s);
+    labelWrapperClassName: h,
+    name: i,
+    theme: b,
+    title: k,
+    variant: d,
+    onChange: u,
+    ...x
+  }, C) => {
+    const [m, v] = oe(n ?? !1), c = V(), s = X(
+      (y) => {
+        v(y), u?.(y);
       },
-      [i, C]
+      [u, v]
     );
-    return /* @__PURE__ */ B("div", { className: "flex items-center gap-2", "data-theme": d, children: [
-      /* @__PURE__ */ u(
-        A,
-        {
-          id: r ?? g,
-          checked: m,
-          ref: x,
-          name: f,
-          disabled: n,
-          "aria-labelledby": e,
-          title: b,
-          className: T(
-            te({
-              className: a,
-              variant: k,
-              checked: m
-            })
-          ),
-          onCheckedChange: c,
-          ...p,
-          children: /* @__PURE__ */ u(D, { children: /* @__PURE__ */ u(I, { className: "w-4 h-4 stroke-2 civo:text-slate-700" }) })
-        }
-      ),
-      t ? /* @__PURE__ */ u(
-        "label",
-        {
-          htmlFor: f ?? r,
-          className: T(
-            re({
-              className: l
-            })
+    return /* @__PURE__ */ B(
+      "div",
+      {
+        className: E("flex items-center gap-4", h),
+        "data-theme": b,
+        children: [
+          /* @__PURE__ */ f(
+            A,
+            {
+              id: o ?? c,
+              checked: m,
+              ref: C,
+              name: i,
+              disabled: r,
+              "aria-labelledby": e,
+              title: k,
+              className: E(
+                te({
+                  className: a,
+                  variant: d,
+                  checked: m
+                })
+              ),
+              onCheckedChange: s,
+              ...x,
+              children: /* @__PURE__ */ f(D, { children: /* @__PURE__ */ f(N, { className: "w-4 h-4 stroke-2" }) })
+            }
           ),
-          children: t
-        }
-      ) : null
-    ] });
+          t ? /* @__PURE__ */ f(
+            "label",
+            {
+              htmlFor: i ?? o,
+              className: E(
+                re({
+                  className: l
+                }),
+                {
+                  "cursor-not-allowed": r
+                }
+              ),
+              onClick: () => !r && s(!m),
+              children: t
+            }
+          ) : null
+        ]
+      }
+    );
   }
 );
 de.displayName = "KonstructCheckbox";

package/dist/components/Checkbox/Checkbox.types.d.ts

@@ -0,0 +1,38 @@
+import { CheckboxProps as CheckboxPropsPrimitive } from '@radix-ui/react-checkbox';
+import { VariantProps } from 'class-variance-authority';
+import { Theme } from '../../domain/theme';
+import { checkboxVariants } from './Checkbox.variants';
+/**
+ * Props for the Checkbox component.
+ *
+ * @example
+ * ```tsx
+ * <Checkbox label="Accept terms" onChange={(checked) => setAccepted(checked)} />
+ * <Checkbox label="Remember me" defaultChecked />
+ * <Checkbox label="Disabled option" disabled />
+ * ```
+ */
+export interface CheckboxProps extends Omit<CheckboxPropsPrimitive, 'onChange'>, Omit<VariantProps<typeof checkboxVariants>, 'checked'> {
+    /** ID of element that labels the checkbox for accessibility */
+    ariaLabelledBy?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Initial checked state */
+    defaultChecked?: boolean;
+    /** Whether the checkbox is disabled */
+    disabled?: boolean;
+    /** HTML id attribute */
+    id?: string;
+    /** Label text displayed next to checkbox */
+    label?: string;
+    /** CSS classes for the label */
+    labelClassName?: string;
+    /** Additional CSS classes for the label wrapper */
+    labelWrapperClassName?: string;
+    /** Form field name */
+    name?: string;
+    /** Theme override for this component */
+    theme?: Theme;
+    /** Callback when checked state changes */
+    onChange?: (checked: boolean) => void;
+}

package/dist/components/Checkbox/Checkbox.variants.d.ts

@@ -0,0 +1,5 @@
+export declare const checkboxVariants: (props?: ({
+    variant?: "default" | null | undefined;
+    checked?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const labelVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/components/Checkbox/Checkbox.variants.js

@@ -1,5 +1,5 @@
-import { c as r } from "../../index-D29mdTf5.js";
-const e = r(
+import { c as e } from "../../index-D29mdTf5.js";
+const t = e(
   [
     "cursor-pointer",
     "border",
@@ -12,8 +12,7 @@ const e = r(
     "transition-all",
     "text-slate-800",
     "border-zinc-400",
-    "kubefirst:border-kubefirst-primary",
-    "kubefirst:text-white"
+    "disabled:cursor-not-allowed"
   ],
   {
     variants: {
@@ -29,9 +28,31 @@ const e = r(
       {
         checked: !0,
         class: [
+          "kubefirst:border-kubefirst-primary",
           "kubefirst:bg-kubefirst-primary",
           "bg-aurora-500",
-          "border-aurora-500"
+          "border-aurora-500",
+          "disabled:bg-zinc-300",
+          "disabled:border-transparent",
+          "*:text-metal-900",
+          "kubefirst:*:text-white",
+          "disabled:*:text-white",
+          "dark:disabled:*:text-metal-900",
+          "dark:disabled:bg-aurora-500/45"
+        ]
+      },
+      {
+        checked: !1,
+        class: [
+          "kubefirst:border-kubefirst-primary",
+          "kubefirst:text-white",
+          "border-zinc-400",
+          "disabled:bg-zinc-50",
+          "disabled:border-zinc-300",
+          "dark:disabled:bg-metal-800",
+          "dark:disabled:border-metal-600",
+          "dark:border-metal-600",
+          "dark:bg-metal-800"
         ]
       }
     ],
@@ -39,8 +60,14 @@ const e = r(
       variant: "default"
     }
   }
-), a = r(["cursor-pointer", "text-slate-800"]);
+), a = e([
+  "select-none",
+  "cursor-pointer",
+  "text-sm",
+  "text-slate-800",
+  "dark:text-slate-50"
+]);
 export {
-  e as checkboxVariants,
+  t as checkboxVariants,
   a as labelVariants
 };

package/dist/components/Command/Command.d.ts

@@ -0,0 +1,27 @@
+import { FC } from 'react';
+import { CommandProps } from './Command.types';
+import { CommandGroup, CommandItem, CommandSeparator } from './components';
+/**
+ * A command palette dialog for keyboard-driven navigation and actions.
+ * Built on cmdk and Radix UI Dialog for accessibility.
+ *
+ * @example
+ * ```tsx
+ * const [open, setOpen] = useState(false);
+ *
+ * <Command open={open} onOpenChange={setOpen} title="Commands">
+ *   <CommandGroup heading="Navigation">
+ *     <CommandItem onSelect={() => navigate('/home')}>Home</CommandItem>
+ *     <CommandItem onSelect={() => navigate('/settings')}>Settings</CommandItem>
+ *   </CommandGroup>
+ *   <CommandSeparator />
+ *   <CommandGroup heading="Actions">
+ *     <CommandItem onSelect={() => logout()}>Logout</CommandItem>
+ *   </CommandGroup>
+ * </Command>
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-command--docs Storybook}
+ */
+declare const Command: FC<CommandProps>;
+export { Command, CommandGroup, CommandItem, CommandSeparator };