@konstructio/ui 0.1.2-alpha.12 → 0.1.2-alpha.121

package/dist/components/Checkbox/Checkbox.js

@@ -1,355 +1,4 @@
-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 { 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 { 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";
-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]);
-    }
-    return e;
-  }, R.apply(this, arguments);
-}
-function ne(e, a) {
-  if (e == null) return {};
-  var o = ae(e, a), n, r;
-  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]);
-  }
-  return o;
-}
-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 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({
-    ref: a,
-    xmlns: "http://www.w3.org/2000/svg",
-    width: t,
-    height: t,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: n,
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, l), /* @__PURE__ */ S.createElement("polyline", {
-    points: "20 6 9 17 4 12"
-  }));
-});
-I.propTypes = {
-  color: y.string,
-  size: y.oneOfType([y.string, y.number])
-};
-I.displayName = "Check";
-var P = "Checkbox", [ce, Pe] = J(P), [se, N] = ce(P);
-function ie(e) {
-  const {
-    __scopeCheckbox: a,
-    checked: o,
-    children: n,
-    defaultChecked: r,
-    disabled: t,
-    form: l,
-    name: f,
-    onCheckedChange: d,
-    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") : (
-    // We set this to true by default so that events bubble to forms without JS (SSR)
-    !0
-  ), E = {
-    checked: p,
-    disabled: t,
-    setChecked: x,
-    control: m,
-    setControl: C,
-    name: f,
-    form: l,
-    value: k,
-    hasConsumerStoppedPropagationRef: s,
-    required: b,
-    defaultChecked: v(r) ? !1 : r,
-    isFormControl: _,
-    bubbleInput: g,
-    setBubbleInput: c
-  };
-  return /* @__PURE__ */ u(
-    se,
-    {
-      scope: a,
-      ...E,
-      children: le(i) ? i(E) : n
-    }
-  );
-}
-var M = "CheckboxTrigger", q = h.forwardRef(
-  ({ __scopeCheckbox: e, onKeyDown: a, onClick: o, ...n }, r) => {
-    const {
-      control: t,
-      value: l,
-      disabled: f,
-      checked: d,
-      required: b,
-      setControl: k,
-      setChecked: i,
-      hasConsumerStoppedPropagationRef: p,
-      isFormControl: x,
-      bubbleInput: m
-    } = N(M, e), C = L(r, k), g = h.useRef(d);
-    return h.useEffect(() => {
-      const c = t?.form;
-      if (c) {
-        const s = () => i(g.current);
-        return c.addEventListener("reset", s), () => c.removeEventListener("reset", s);
-      }
-    }, [t, i]), /* @__PURE__ */ u(
-      w.button,
-      {
-        type: "button",
-        role: "checkbox",
-        "aria-checked": v(d) ? "mixed" : d,
-        "aria-required": b,
-        "data-state": W(d),
-        "data-disabled": f ? "" : void 0,
-        disabled: f,
-        value: l,
-        ...n,
-        ref: C,
-        onKeyDown: j(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());
-        })
-      }
-    );
-  }
-);
-q.displayName = M;
-var A = h.forwardRef(
-  (e, a) => {
-    const {
-      __scopeCheckbox: o,
-      name: n,
-      checked: r,
-      defaultChecked: t,
-      required: l,
-      disabled: f,
-      value: d,
-      onCheckedChange: b,
-      form: k,
-      ...i
-    } = e;
-    return /* @__PURE__ */ u(
-      ie,
-      {
-        __scopeCheckbox: o,
-        checked: r,
-        defaultChecked: t,
-        disabled: f,
-        required: l,
-        onCheckedChange: b,
-        name: n,
-        form: k,
-        value: d,
-        internal_do_not_use_render: ({ isFormControl: p }) => /* @__PURE__ */ B(U, { children: [
-          /* @__PURE__ */ u(
-            q,
-            {
-              ...i,
-              ref: a,
-              __scopeCheckbox: o
-            }
-          ),
-          p && /* @__PURE__ */ u(
-            K,
-            {
-              __scopeCheckbox: o
-            }
-          )
-        ] })
-      }
-    );
-  }
-);
-A.displayName = P;
-var F = "CheckboxIndicator", D = h.forwardRef(
-  (e, a) => {
-    const { __scopeCheckbox: o, forceMount: n, ...r } = e, t = N(F, o);
-    return /* @__PURE__ */ u(
-      ee,
-      {
-        present: n || v(t.checked) || t.checked === !0,
-        children: /* @__PURE__ */ u(
-          w.span,
-          {
-            "data-state": W(t.checked),
-            "data-disabled": t.disabled ? "" : void 0,
-            ...r,
-            ref: a,
-            style: { pointerEvents: "none", ...e.style }
-          }
-        )
-      }
-    );
-  }
-);
-D.displayName = F;
-var H = "CheckboxBubbleInput", K = h.forwardRef(
-  ({ __scopeCheckbox: e, ...a }, o) => {
-    const {
-      control: n,
-      hasConsumerStoppedPropagationRef: r,
-      checked: t,
-      defaultChecked: l,
-      required: f,
-      disabled: d,
-      name: b,
-      value: k,
-      form: i,
-      bubbleInput: p,
-      setBubbleInput: x
-    } = N(H, e), m = L(o, x), C = Y(t), g = Z(n);
-    h.useEffect(() => {
-      const s = p;
-      if (!s) return;
-      const _ = window.HTMLInputElement.prototype, O = Object.getOwnPropertyDescriptor(
-        _,
-        "checked"
-      ).set, $ = !r.current;
-      if (C !== t && O) {
-        const G = new Event("click", { bubbles: $ });
-        s.indeterminate = v(t), O.call(s, v(t) ? !1 : t), s.dispatchEvent(G);
-      }
-    }, [p, C, t, r]);
-    const c = h.useRef(v(t) ? !1 : t);
-    return /* @__PURE__ */ u(
-      w.input,
-      {
-        type: "checkbox",
-        "aria-hidden": !0,
-        defaultChecked: l ?? c.current,
-        required: f,
-        disabled: d,
-        name: b,
-        value: k,
-        form: i,
-        ...a,
-        tabIndex: -1,
-        ref: m,
-        style: {
-          ...a.style,
-          ...g,
-          position: "absolute",
-          pointerEvents: "none",
-          opacity: 0,
-          margin: 0,
-          // We transform because the input is absolutely positioned but we have
-          // rendered it **after** the button. This pulls it back to sit on top
-          // of the button.
-          transform: "translateX(-100%)"
-        }
-      }
-    );
-  }
-);
-K.displayName = H;
-function le(e) {
-  return typeof e == "function";
-}
-function v(e) {
-  return e === "indeterminate";
-}
-function W(e) {
-  return v(e) ? "indeterminate" : e ? "checked" : "unchecked";
-}
-const de = z(
-  ({
-    ariaLabelledBy: e,
-    className: a,
-    defaultChecked: o,
-    disabled: n,
-    id: r,
-    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);
-      },
-      [i, C]
-    );
-    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
-            })
-          ),
-          children: t
-        }
-      ) : null
-    ] });
-  }
-);
-de.displayName = "KonstructCheckbox";
+import { t as r } from "../../Checkbox-DrounE52.js";
 export {
-  de as Checkbox
+  r as Checkbox
 };

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

@@ -1,46 +1,63 @@
-import { c as r } from "../../index-D29mdTf5.js";
-const e = r(
-  [
-    "cursor-pointer",
-    "border",
-    "rounded",
-    "w-5",
-    "h-5",
-    "flex",
-    "justify-center",
-    "items-center",
-    "transition-all",
-    "text-slate-800",
-    "border-zinc-400",
-    "kubefirst:border-kubefirst-primary",
-    "kubefirst:text-white"
-  ],
-  {
-    variants: {
-      variant: {
-        default: ""
-      },
-      checked: {
-        true: "",
-        false: ""
-      }
-    },
-    compoundVariants: [
-      {
-        checked: !0,
-        class: [
-          "kubefirst:bg-kubefirst-primary",
-          "bg-aurora-500",
-          "border-aurora-500"
-        ]
-      }
-    ],
-    defaultVariants: {
-      variant: "default"
+import { t as e } from "../../dist-B9GE4SXf.js";
+var a = e([
+  "cursor-pointer",
+  "border",
+  "rounded",
+  "w-5",
+  "h-5",
+  "flex",
+  "justify-center",
+  "items-center",
+  "transition-all",
+  "text-slate-800",
+  "border-zinc-400",
+  "disabled:cursor-not-allowed"
+], {
+  variants: {
+    variant: { default: "" },
+    checked: {
+      true: "",
+      false: ""
     }
-  }
-), a = r(["cursor-pointer", "text-slate-800"]);
+  },
+  compoundVariants: [{
+    checked: !0,
+    class: [
+      "kubefirst:border-kubefirst-primary",
+      "kubefirst:bg-kubefirst-primary",
+      "bg-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"
+    ]
+  }],
+  defaultVariants: { variant: "default" }
+}), t = e([
+  "select-none",
+  "cursor-pointer",
+  "text-sm",
+  "text-slate-800",
+  "dark:text-slate-50"
+]);
 export {
-  e as checkboxVariants,
-  a as labelVariants
+  a as checkboxVariants,
+  t as labelVariants
 };

package/dist/components/CheckboxCard/CheckboxCard.js

@@ -0,0 +1,52 @@
+import { t as j } from "../../Checkbox-DrounE52.js";
+import { t as e } from "../../utils-DnIJruo0.js";
+import { Typography as m } from "../Typography/Typography.js";
+import { Card as $ } from "../Card/Card.js";
+import { useId as A, useState as B } from "react";
+import { jsx as r, jsxs as d } from "react/jsx-runtime";
+var F = ({ checked: i, className: p, contentClassName: h, defaultChecked: f, description: o, disabled: a = !1, id: x, label: u, name: C, theme: k, value: b, wrapperClassName: y, onChange: N }) => {
+  const g = A(), t = x ?? g, s = `${t}-label`, l = `${t}-description`, [v, I] = B(f ?? !1), n = i ?? v, w = (c) => {
+    I(c), N?.(c);
+  };
+  return /* @__PURE__ */ r($, {
+    "data-theme": k,
+    isActive: n,
+    canHover: !a,
+    wrapperClassName: e("w-full", y),
+    className: e("flex items-start p-0", a && "cursor-not-allowed opacity-50"),
+    children: /* @__PURE__ */ d("label", {
+      htmlFor: t,
+      className: e("flex w-full items-start gap-3 p-4", a ? "cursor-not-allowed" : "cursor-pointer"),
+      children: [/* @__PURE__ */ r(j, {
+        id: t,
+        name: C,
+        value: b,
+        checked: n,
+        disabled: a,
+        ariaLabelledBy: s,
+        "aria-describedby": o ? l : void 0,
+        className: e("mt-0.5 shrink-0", p),
+        onChange: w
+      }), /* @__PURE__ */ d("span", {
+        className: e("flex flex-col gap-1", h),
+        children: [/* @__PURE__ */ r(m, {
+          id: s,
+          component: "span",
+          variant: "body2",
+          className: "font-medium text-slate-800 dark:text-metal-50",
+          children: u
+        }), o ? /* @__PURE__ */ r(m, {
+          id: l,
+          component: "span",
+          variant: "body3",
+          className: "text-slate-500 dark:text-metal-400",
+          children: o
+        }) : null]
+      })]
+    })
+  });
+};
+F.displayName = "KonstructCheckboxCard";
+export {
+  F as CheckboxCard
+};

package/dist/components/Collapse/Collapse.js

@@ -0,0 +1,63 @@
+import { t as p } from "../../utils-DnIJruo0.js";
+import { useState as A } from "react";
+import { jsx as i } from "react/jsx-runtime";
+import { AnimatePresence as C, motion as f, useReducedMotion as x } from "motion/react";
+var e = [
+  0.4,
+  0,
+  0.2,
+  1
+], y = ({ children: n, className: r, collapsedMarginTop: u = 0, id: s, isOpen: t, keepMounted: h = !1, onExitComplete: v }) => {
+  const g = x(), [l, o] = A(!1), m = g ? { duration: 0 } : {
+    height: {
+      duration: 0.35,
+      ease: e
+    },
+    marginTop: {
+      duration: 0.35,
+      ease: e
+    },
+    opacity: {
+      duration: 0.25,
+      ease: e
+    }
+  }, a = {
+    opacity: 0,
+    height: 0,
+    marginTop: u
+  }, d = {
+    opacity: 1,
+    height: "auto",
+    marginTop: 0
+  }, c = t && !l ? "overflow-visible" : "overflow-hidden";
+  return h ? /* @__PURE__ */ i(f.div, {
+    id: s,
+    initial: !1,
+    animate: t ? d : a,
+    transition: m,
+    hidden: !t && !l,
+    "aria-hidden": !t || void 0,
+    className: p(c, r),
+    onAnimationStart: () => o(!0),
+    onAnimationComplete: () => o(!1),
+    children: n
+  }) : /* @__PURE__ */ i(C, {
+    initial: !1,
+    onExitComplete: v,
+    children: t ? /* @__PURE__ */ i(f.div, {
+      id: s,
+      initial: a,
+      animate: d,
+      exit: a,
+      transition: m,
+      className: p(c, r),
+      onAnimationStart: () => o(!0),
+      onAnimationComplete: () => o(!1),
+      children: n
+    }, "collapse") : null
+  });
+};
+y.displayName = "KonstructCollapse";
+export {
+  y as Collapse
+};

package/dist/components/Command/Command.js

@@ -1,40 +1,31 @@
-import { jsx as o, jsxs as i } from "react/jsx-runtime";
-import { R as s, D as p } from "../../index-amYX3uxF.js";
-import { V as l } from "../../index-sp5ZfG6g.js";
-import { cn as m } from "../../utils/index.js";
-import { wrapperVariants as f } from "./Command.variants.js";
-import { DialogContent as c } from "./components/DialogContent.js";
-import { Command as h } from "./components/Command.js";
-import { CommandGroup as b } from "./components/CommandGroup.js";
-import { CommandItem as y } from "./components/CommandItem.js";
-import { CommandSeparator as H } from "./components/CommandSeparator.js";
-const j = ({
-  children: r,
-  title: a,
-  titleClassName: e,
-  wrapperClassName: n,
-  theme: t,
-  ...d
-}) => /* @__PURE__ */ o(s, { ...d, children: /* @__PURE__ */ i(
-  c,
-  {
-    className: "overflow-hidden p-0 border-0 !rounded-none",
+import { t as n } from "../../dist-C_jtUTU9.js";
+import { t as o } from "../../utils-DnIJruo0.js";
+import { s, t as p } from "../../dist-BqDJX7m1.js";
+import { wrapperVariants as l } from "./Command.variants.js";
+import { CommandGroup as D } from "./components/CommandGroup.js";
+import { CommandItem as v } from "./components/CommandItem.js";
+import { CommandSeparator as V } from "./components/CommandSeparator.js";
+import { DialogContent as f } from "./components/DialogContent.js";
+import { Command as c } from "./components/Command.js";
+import "./components/index.js";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+var I = ({ children: r, title: a, titleClassName: i, wrapperClassName: e, theme: t, ...d }) => /* @__PURE__ */ m(p, {
+  ...d,
+  children: /* @__PURE__ */ h(f, {
+    className: "overflow-hidden p-0 border-0 rounded-none!",
     "data-theme": t,
-    children: [
-      /* @__PURE__ */ o(p, { className: m("hidden", e), children: /* @__PURE__ */ o(l, { children: a }) }),
-      /* @__PURE__ */ o(
-        h,
-        {
-          className: m(f({ className: n })),
-          children: r
-        }
-      )
-    ]
-  }
-) });
+    children: [/* @__PURE__ */ m(s, {
+      className: o("hidden", i),
+      children: /* @__PURE__ */ m(n, { children: a })
+    }), /* @__PURE__ */ m(c, {
+      className: o(l({ className: e })),
+      children: r
+    })]
+  })
+});
 export {
-  j as Command,
-  b as CommandGroup,
-  y as CommandItem,
-  H as CommandSeparator
+  I as Command,
+  D as CommandGroup,
+  v as CommandItem,
+  V as CommandSeparator
 };

package/dist/components/Command/Command.variants.js

@@ -1,5 +1,5 @@
-import { c as e } from "../../index-D29mdTf5.js";
-const r = e([
+import { t as e } from "../../dist-B9GE4SXf.js";
+var t = e([
   "[&_[cmdk-group-heading]]:font-medium",
   "[&_[cmdk-group-heading]]:px-2",
   "[&_[cmdk-group-heading]]:text-muted-foreground",
@@ -46,5 +46,5 @@ const r = e([
 export {
   d as inputVariants,
   o as searchInconInputVariants,
-  r as wrapperVariants
+  t as wrapperVariants
 };

package/dist/components/Command/components/Command.js

@@ -1,8 +1,16 @@
+import { t as r } from "../../../dist-4IVGO6ZT.js";
+import { forwardRef as d } from "react";
 import { jsx as m } from "react/jsx-runtime";
-import { forwardRef as p } from "react";
-import { _ as o } from "../../../index-0XtjXVpJ.js";
-const s = p(({ className: r, children: a, ...e }, i) => /* @__PURE__ */ m(o, { ref: i, className: r, ...e, children: /* @__PURE__ */ m("div", { className: "w-[500px]", children: a }) }));
-s.displayName = o.displayName;
+var p = d(({ className: a, children: o, ...e }, i) => /* @__PURE__ */ m(r, {
+  ref: i,
+  className: a,
+  ...e,
+  children: /* @__PURE__ */ m("div", {
+    className: "w-125",
+    children: o
+  })
+}));
+p.displayName = r.displayName;
 export {
-  s as Command
+  p as Command
 };