@konstructio/ui 0.1.0-alpha.2 → 0.1.0-alpha.20

package/dist/components/Switch/Switch.js

@@ -1,171 +1,186 @@
-import { jsxs as x, jsx as d } from "react/jsx-runtime";
-import * as h from "react";
-import { forwardRef as _, useRef as H, useId as M, useImperativeHandle as $, useEffect as j } from "react";
-import { a as z, c as B, b as q } from "../../index-bYyfdsls.js";
-import { u as A } from "../../index-Bk324h27.js";
-import { u as F, a as O } from "../../index-Bry5AFQ2.js";
-import { P } from "../../index-g-TFwd6Y.js";
-import { cn as C } from "../../utils/index.js";
-import { thumbVariants as V, switchVariants as D } from "./Switch.variants.js";
-var k = "Switch", [L, ce] = B(k), [U, W] = L(k), R = h.forwardRef(
-  (e, u) => {
+import { jsxs as x, jsx as n } from "react/jsx-runtime";
+import * as p from "react";
+import { forwardRef as H, useRef as M, useId as $, useImperativeHandle as j, useEffect as z } from "react";
+import { a as A, c as U, b as q } from "../../index-Cq1I1cG9.js";
+import { u as P } from "../../index-B5MIi2tR.js";
+import { u as F, a as L } from "../../index-Bc1LNrRD.js";
+import { P as y } from "../../index-BCGvACM9.js";
+import { cn as R } from "../../utils/index.js";
+import { thumbVariants as O, switchVariants as V } from "./Switch.variants.js";
+var b = "Switch", [D, ce] = U(b), [W, X] = D(b), N = p.forwardRef(
+  (t, i) => {
     const {
-      __scopeSwitch: t,
-      name: s,
-      checked: a,
-      defaultChecked: n,
-      required: l,
-      disabled: r,
-      value: o = "on",
-      onCheckedChange: f,
-      form: c,
-      ...p
-    } = e, [i, w] = h.useState(null), g = A(u, (b) => w(b)), v = h.useRef(!1), S = i ? c || !!i.closest("form") : !0, [m = !1, I] = z({
-      prop: a,
-      defaultProp: n,
-      onChange: f
+      __scopeSwitch: r,
+      name: a,
+      checked: s,
+      defaultChecked: d,
+      required: u,
+      disabled: o,
+      value: c = "on",
+      onCheckedChange: m,
+      form: e,
+      ...f
+    } = t, [l, h] = p.useState(null), v = P(i, (S) => h(S)), k = p.useRef(!1), C = l ? e || !!l.closest("form") : !0, [w, B] = A({
+      prop: s,
+      defaultProp: d ?? !1,
+      onChange: m,
+      caller: b
     });
-    return /* @__PURE__ */ x(U, { scope: t, checked: m, disabled: r, children: [
-      /* @__PURE__ */ d(
-        P.button,
+    return /* @__PURE__ */ x(W, { scope: r, checked: w, disabled: o, children: [
+      /* @__PURE__ */ n(
+        y.button,
         {
           type: "button",
           role: "switch",
-          "aria-checked": m,
-          "aria-required": l,
-          "data-state": E(m),
-          "data-disabled": r ? "" : void 0,
-          disabled: r,
-          value: o,
-          ...p,
-          ref: g,
-          onClick: q(e.onClick, (b) => {
-            I((T) => !T), S && (v.current = b.isPropagationStopped(), v.current || b.stopPropagation());
+          "aria-checked": w,
+          "aria-required": u,
+          "data-state": g(w),
+          "data-disabled": o ? "" : void 0,
+          disabled: o,
+          value: c,
+          ...f,
+          ref: v,
+          onClick: q(t.onClick, (S) => {
+            B((T) => !T), C && (k.current = S.isPropagationStopped(), k.current || S.stopPropagation());
           })
         }
       ),
-      S && /* @__PURE__ */ d(
-        X,
+      C && /* @__PURE__ */ n(
+        I,
         {
-          control: i,
-          bubbles: !v.current,
-          name: s,
-          value: o,
-          checked: m,
-          required: l,
-          disabled: r,
-          form: c,
+          control: l,
+          bubbles: !k.current,
+          name: a,
+          value: c,
+          checked: w,
+          required: u,
+          disabled: o,
+          form: e,
           style: { transform: "translateX(-100%)" }
         }
       )
     ] });
   }
 );
-R.displayName = k;
-var y = "SwitchThumb", N = h.forwardRef(
-  (e, u) => {
-    const { __scopeSwitch: t, ...s } = e, a = W(y, t);
-    return /* @__PURE__ */ d(
-      P.span,
+N.displayName = b;
+var E = "SwitchThumb", _ = p.forwardRef(
+  (t, i) => {
+    const { __scopeSwitch: r, ...a } = t, s = X(E, r);
+    return /* @__PURE__ */ n(
+      y.span,
       {
-        "data-state": E(a.checked),
-        "data-disabled": a.disabled ? "" : void 0,
-        ...s,
-        ref: u
+        "data-state": g(s.checked),
+        "data-disabled": s.disabled ? "" : void 0,
+        ...a,
+        ref: i
       }
     );
   }
 );
-N.displayName = y;
-var X = (e) => {
-  const { control: u, checked: t, bubbles: s = !0, ...a } = e, n = h.useRef(null), l = F(t), r = O(u);
-  return h.useEffect(() => {
-    const o = n.current, f = window.HTMLInputElement.prototype, p = Object.getOwnPropertyDescriptor(f, "checked").set;
-    if (l !== t && p) {
-      const i = new Event("click", { bubbles: s });
-      p.call(o, t), o.dispatchEvent(i);
-    }
-  }, [l, t, s]), /* @__PURE__ */ d(
-    "input",
-    {
-      type: "checkbox",
-      "aria-hidden": !0,
-      defaultChecked: t,
-      ...a,
-      tabIndex: -1,
-      ref: n,
-      style: {
-        ...e.style,
-        ...r,
-        position: "absolute",
-        pointerEvents: "none",
-        opacity: 0,
-        margin: 0
+_.displayName = E;
+var G = "SwitchBubbleInput", I = p.forwardRef(
+  ({
+    __scopeSwitch: t,
+    control: i,
+    checked: r,
+    bubbles: a = !0,
+    ...s
+  }, d) => {
+    const u = p.useRef(null), o = P(u, d), c = F(r), m = L(i);
+    return p.useEffect(() => {
+      const e = u.current;
+      if (!e) return;
+      const f = window.HTMLInputElement.prototype, h = Object.getOwnPropertyDescriptor(
+        f,
+        "checked"
+      ).set;
+      if (c !== r && h) {
+        const v = new Event("click", { bubbles: a });
+        h.call(e, r), e.dispatchEvent(v);
       }
-    }
-  );
-};
-function E(e) {
-  return e ? "checked" : "unchecked";
+    }, [c, r, a]), /* @__PURE__ */ n(
+      "input",
+      {
+        type: "checkbox",
+        "aria-hidden": !0,
+        defaultChecked: r,
+        ...s,
+        tabIndex: -1,
+        ref: o,
+        style: {
+          ...s.style,
+          ...m,
+          position: "absolute",
+          pointerEvents: "none",
+          opacity: 0,
+          margin: 0
+        }
+      }
+    );
+  }
+);
+I.displayName = G;
+function g(t) {
+  return t ? "checked" : "unchecked";
 }
-var G = R, J = N;
-const se = _(
+var J = N, K = _;
+const ae = H(
   ({
-    name: e,
-    alignment: u = "horizontal",
-    theme: t,
-    thumbClassName: s,
-    className: a,
-    label: n,
-    defaultChecked: l,
-    onChange: r,
-    value: o
-  }, f) => {
-    const c = H(null), p = M(), i = e ? `${p}-${e}` : p;
-    return $(f, () => c.current, [c]), j(() => {
-      c.current && (c.current.value = `${o}`);
-    }, [o]), /* @__PURE__ */ x(
+    name: t,
+    alignment: i = "horizontal",
+    theme: r,
+    thumbClassName: a,
+    className: s,
+    label: d,
+    defaultChecked: u,
+    onChange: o,
+    value: c
+  }, m) => {
+    const e = M(null), f = $(), l = t ? `${f}-${t}` : f;
+    return j(m, () => e.current, [e]), z(() => {
+      e.current && (e.current.value = `${c}`);
+    }, [c]), /* @__PURE__ */ x(
       "div",
       {
-        className: C(
+        className: R(
           "w-full flex gap-3",
-          u === "vertical" ? "flex-col" : "flex-row"
+          i === "vertical" ? "flex-col" : "flex-row"
         ),
-        "data-theme": t,
+        "data-theme": r,
         children: [
-          n ? /* @__PURE__ */ d(
+          d ? /* @__PURE__ */ n(
             "label",
             {
               className: "text-base",
-              htmlFor: i,
+              htmlFor: l,
               style: { paddingRight: 15 },
-              children: n
+              children: d
             }
           ) : null,
-          /* @__PURE__ */ d(
-            G,
+          /* @__PURE__ */ n(
+            J,
             {
-              id: i,
-              defaultChecked: l,
-              checked: o,
-              onCheckedChange: (w) => r == null ? void 0 : r(w),
-              className: C(D({ className: a })),
-              "aria-label": n,
-              children: /* @__PURE__ */ d(
-                J,
+              id: l,
+              defaultChecked: u,
+              checked: c,
+              onCheckedChange: (h) => o == null ? void 0 : o(h),
+              className: R(V({ className: s })),
+              "aria-label": d,
+              children: /* @__PURE__ */ n(
+                K,
                 {
-                  className: V({
-                    className: s
+                  className: O({
+                    className: a
                   })
                 }
               )
             }
           ),
-          /* @__PURE__ */ d(
+          /* @__PURE__ */ n(
             "input",
             {
-              ref: c,
-              name: e,
+              ref: e,
+              name: t,
               type: "text",
               className: "hidden",
               "aria-hidden": "true"
@@ -177,5 +192,5 @@ const se = _(
   }
 );
 export {
-  se as Switch
+  ae as Switch
 };

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,27 @@
+import { jsx as e } from "react/jsx-runtime";
+import { R as n } from "../../index-CvfCCTEO.js";
+import { cn as s } from "../../utils/index.js";
+import { rootVariants as p } from "./Tabs.variants.js";
+import { List as f } from "./components/List.js";
+import { Trigger as g } from "./components/Trigger.js";
+import { Content as c } from "./components/Content.js";
+const t = ({ children: o, theme: m, className: a, orientation: r, ...i }) => /* @__PURE__ */ e(
+  n,
+  {
+    ...i,
+    "data-theme": m,
+    "data-orientation": r,
+    "aria-orientation": r,
+    className: s(p({ variant: r, className: a })),
+    children: o
+  }
+);
+t.List = f;
+t.Trigger = g;
+t.Content = c;
+export {
+  c as Content,
+  f as List,
+  t as Tabs,
+  g as Trigger
+};

package/dist/components/Tabs/Tabs.variants.js

@@ -0,0 +1,58 @@
+import { c as a } from "../../index-BNmRGtA6.js";
+const r = a([""], {
+  variants: {
+    variant: {
+      horizontal: "",
+      vertical: "flex gap-6"
+    }
+  },
+  defaultVariants: {
+    variant: "horizontal"
+  }
+}), i = a([""], {
+  variants: {
+    variant: {
+      default: ""
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+}), n = a(["flex"], {
+  variants: {
+    variant: {
+      default: "flex gap-6",
+      horizontal: "",
+      vertical: "flex-col min-w-[132px] h-full items-center"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+}), e = a(["cursor-pointer", "h-[27px]", "w-fit"], {
+  variants: {
+    variant: {
+      default: "",
+      active: [
+        "text-zinc-700",
+        "font-[600]",
+        "civo:border-b-2",
+        "civo:border-civo-primary",
+        "kubefirst:border-b-2",
+        "kubefirst:border-kubefirst-primary",
+        "colony:border-b-2",
+        "colony:border-colony-primary"
+      ],
+      inactive: "text-slate-500 font-[600]"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+export {
+  i as contentVariants,
+  n as listVariants,
+  r as rootVariants,
+  e as triggerVariants
+};

package/dist/components/Tabs/components/Content.js

@@ -0,0 +1,19 @@
+import { jsx as n } from "react/jsx-runtime";
+import { C as m } from "../../../index-CvfCCTEO.js";
+import { cn as a } from "../../../utils/index.js";
+import { contentVariants as e } from "../Tabs.variants.js";
+const c = ({
+  children: t,
+  className: o,
+  ...r
+}) => /* @__PURE__ */ n(
+  m,
+  {
+    ...r,
+    className: a(e({ variant: "default", className: o })),
+    children: t
+  }
+);
+export {
+  c as Content
+};

package/dist/components/Tabs/components/List.js

@@ -0,0 +1,20 @@
+import { jsx as r } from "react/jsx-runtime";
+import { L as n } from "../../../index-CvfCCTEO.js";
+import { cn as t } from "../../../utils/index.js";
+import { listVariants as a } from "../Tabs.variants.js";
+const p = ({
+  children: i,
+  className: s,
+  orientation: m,
+  ...o
+}) => /* @__PURE__ */ r("div", { className: t(a({ variant: "default" })), children: /* @__PURE__ */ r(
+  n,
+  {
+    className: t(a({ variant: m, className: s })),
+    ...o,
+    children: i
+  }
+) });
+export {
+  p as List
+};

package/dist/components/Tabs/components/Trigger.js

@@ -0,0 +1,26 @@
+import { jsx as r } from "react/jsx-runtime";
+import { T as e } from "../../../index-CvfCCTEO.js";
+import { Typography as m } from "../../Typography/Typography.js";
+import { cn as n } from "../../../utils/index.js";
+import { triggerVariants as p } from "../Tabs.variants.js";
+const l = ({
+  tab: i,
+  label: o,
+  isActive: t,
+  className: a
+}) => /* @__PURE__ */ r(e, { value: i, children: /* @__PURE__ */ r(
+  m,
+  {
+    variant: "body2",
+    className: n(
+      p({
+        variant: t ? "active" : "inactive",
+        className: a
+      })
+    ),
+    children: o
+  }
+) });
+export {
+  l as Trigger
+};

package/dist/components/Tabs/components/index.js

@@ -0,0 +1,8 @@
+import { Content as t } from "./Content.js";
+import { List as f } from "./List.js";
+import { Trigger as p } from "./Trigger.js";
+export {
+  t as Content,
+  f as List,
+  p as Trigger
+};

package/dist/components/Tag/Tag.js

@@ -1,5 +1,5 @@
 import { jsxs as n, jsx as a } from "react/jsx-runtime";
-import { S as r } from "../../index-Bk324h27.js";
+import { S as r } from "../../index-B5MIi2tR.js";
 import { cn as o } from "../../utils/index.js";
 import { tagVariants as c } from "./Tag.variants.js";
 const u = ({

package/dist/components/TagSelect/components/Wrapper/Wrapper.js

@@ -6,8 +6,8 @@ import { Tag as C } from "../../../Tag/Tag.js";
 import { cn as r } from "../../../../utils/index.js";
 import { useTagSelect as S } from "../../hooks/useTagSelect.js";
 import { labelVariants as k, tagSelectVariants as R, wrapperVariants as I } from "../../TagSelect.variants.js";
-import { X as O } from "../../../../x-DU-Zw-L_.js";
-import { C as V } from "../../../../chevron-up-DgLBQCKD.js";
+import { X as O } from "../../../../x-BPcqkRZd.js";
+import { C as V } from "../../../../chevron-up-RLP4nX7V.js";
 import { useTagSelect as j } from "../../contexts/TagSelect.hook.js";
 const B = w(
   ({

package/dist/components/TimePicker/TimePicker.js

@@ -0,0 +1,8 @@
+import { jsx as r } from "react/jsx-runtime";
+import { TimePickerProvider as m } from "./contexts/time-picker.provider.js";
+import { Wrapper as o } from "./components/Wrapper/Wrapper.js";
+const p = ({ format: i = "12", ...e }) => /* @__PURE__ */ r(m, { format: i, children: /* @__PURE__ */ r(o, { ...e }) });
+p.displayName = "TimePicker";
+export {
+  p as TimePicker
+};

package/dist/components/TimePicker/TimePicker.variants.js

@@ -0,0 +1,62 @@
+import { c as r } from "../../index-BNmRGtA6.js";
+const t = r([
+  "border",
+  "rounded",
+  "p-[0.625rem]",
+  "w-full",
+  "flex",
+  "items-center",
+  "justify-between",
+  "border-gray-300",
+  "cursor-pointer",
+  "transition-all",
+  "transition-duration-100",
+  "data-[open=true]:border-blue-primary",
+  "data-[open=true]:border-civo-primary",
+  "text-sm"
+]), o = r([
+  "snap-y",
+  "snap-mandatory",
+  "overflow-y-scroll",
+  "scrollbar-none",
+  "flex",
+  "flex-col"
+]), a = r([
+  "w-[60px]",
+  "h-[40px]",
+  "snap-start",
+  "rounded",
+  "transition-all",
+  "transition-duration-100",
+  "focus-within:outline-2",
+  "border-2",
+  "border-transparent",
+  "outline-none",
+  "hover:bg-gray-100",
+  "hover:border-2",
+  "hover:border-white",
+  "data-[active=true]:bg-blue-600",
+  "data-[active=true]:hover:border-blue-200",
+  "data-[active=true]:text-white",
+  "data-[active=true]:font-medium",
+  "focus-visible:border-blue-200",
+  "focus-within:border-blue-200"
+]), n = r([
+  "flex",
+  "items-center",
+  "justify-center",
+  "cursor-pointer",
+  "w-full",
+  "h-full",
+  "px-6",
+  "py-3",
+  "outline-none",
+  "focus:border-blue-200",
+  "text-sm"
+]);
+export {
+  n as buttonVariants,
+  a as liVariants,
+  t as timePickerVariants,
+  o as ulVariants
+};

package/dist/components/TimePicker/components/HoursList/HoursList.js

@@ -0,0 +1,93 @@
+import { jsx as a } from "react/jsx-runtime";
+import { useRef as p, useCallback as v, useEffect as y } from "react";
+import { cn as o } from "../../../../utils/index.js";
+import { buttonVariants as b, liVariants as d, ulVariants as h } from "../../TimePicker.variants.js";
+import { useTimePickerContext as k } from "../../contexts/time-picker.hook.js";
+const H = ({ hours: l, scrollBehavior: i }) => {
+  const n = p(null), u = p(!0), { format: c, onSelectHour: m } = k(), s = c === "12" && l >= 12 ? l - 12 : l, f = v(
+    (r, e) => {
+      var t;
+      (t = r.currentTarget) == null || t.blur(), m(e);
+    },
+    [m]
+  );
+  if (y(() => {
+    if (u.current) {
+      const r = n.current, e = s === 0 && c === "12" ? 12 : s;
+      if (r) {
+        const t = r.querySelector(
+          `[data-value="${`0${e}`.slice(-2)}"]`
+        );
+        t == null || t.scrollIntoView({
+          behavior: i,
+          block: "center"
+        });
+      }
+      u.current = !1;
+    }
+  }, [c, s, i]), c === "12") {
+    const r = s === 0 ? 12 : s;
+    return /* @__PURE__ */ a(
+      "ul",
+      {
+        ref: n,
+        className: o(h()),
+        "aria-label": "hours",
+        role: "listbox",
+        children: Array.from({ length: 12 }, (e, t) => /* @__PURE__ */ a(
+          "li",
+          {
+            className: o(d()),
+            "data-value": `0${t + 1}`.slice(-2),
+            "data-active": r - 1 === t,
+            role: "presentation",
+            children: /* @__PURE__ */ a(
+              "button",
+              {
+                type: "button",
+                role: "option",
+                className: o(b()),
+                onClick: (N) => f(N, t + 1),
+                children: t + 1
+              }
+            )
+          },
+          t
+        ))
+      }
+    );
+  }
+  return /* @__PURE__ */ a(
+    "ul",
+    {
+      ref: n,
+      className: o(h()),
+      "aria-label": "hours",
+      role: "listbox",
+      children: Array.from({ length: 24 }, (r, e) => /* @__PURE__ */ a(
+        "li",
+        {
+          className: o(d()),
+          "data-value": `0${e}`.slice(-2),
+          "data-active": l === e,
+          role: "presentation",
+          children: /* @__PURE__ */ a(
+            "button",
+            {
+              type: "button",
+              role: "option",
+              className: o(b()),
+              onClick: (t) => f(t, e),
+              children: e
+            }
+          )
+        },
+        e
+      ))
+    }
+  );
+};
+H.displayName = "HoursList";
+export {
+  H as HoursList
+};