@konstructio/ui 0.1.2-alpha.46 → 0.1.2-alpha.47

package/dist/components/Counter/Counter.js

@@ -0,0 +1,210 @@
+import { jsxs as f, jsx as u } from "react/jsx-runtime";
+import { R as x } from "../../index-BKjcReYh.js";
+import p, { forwardRef as g, useId as $, useCallback as N } from "react";
+import { cn as y } from "../../utils/index.js";
+import { labelVariants as T, buttonVariants as P, counterVariants as W } from "./Counter.variants.js";
+import { Typography as V } from "../Typography/Typography.js";
+import { P as a } from "../../index-BOE_3f_Z.js";
+function v() {
+  return v = Object.assign || function(e) {
+    for (var o = 1; o < arguments.length; o++) {
+      var r = arguments[o];
+      for (var t in r)
+        Object.prototype.hasOwnProperty.call(r, t) && (e[t] = r[t]);
+    }
+    return e;
+  }, v.apply(this, arguments);
+}
+function M(e, o) {
+  if (e == null) return {};
+  var r = R(e, o), t, n;
+  if (Object.getOwnPropertySymbols) {
+    var i = Object.getOwnPropertySymbols(e);
+    for (n = 0; n < i.length; n++)
+      t = i[n], !(o.indexOf(t) >= 0) && Object.prototype.propertyIsEnumerable.call(e, t) && (r[t] = e[t]);
+  }
+  return r;
+}
+function R(e, o) {
+  if (e == null) return {};
+  var r = {}, t = Object.keys(e), n, i;
+  for (i = 0; i < t.length; i++)
+    n = t[i], !(o.indexOf(n) >= 0) && (r[n] = e[n]);
+  return r;
+}
+var O = g(function(e, o) {
+  var r = e.color, t = r === void 0 ? "currentColor" : r, n = e.size, i = n === void 0 ? 24 : n, l = M(e, ["color", "size"]);
+  return /* @__PURE__ */ p.createElement("svg", v({
+    ref: o,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: i,
+    height: i,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: t,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, l), /* @__PURE__ */ p.createElement("line", {
+    x1: "5",
+    y1: "12",
+    x2: "19",
+    y2: "12"
+  }));
+});
+O.propTypes = {
+  color: a.string,
+  size: a.oneOfType([a.string, a.number])
+};
+O.displayName = "Minus";
+function b() {
+  return b = Object.assign || function(e) {
+    for (var o = 1; o < arguments.length; o++) {
+      var r = arguments[o];
+      for (var t in r)
+        Object.prototype.hasOwnProperty.call(r, t) && (e[t] = r[t]);
+    }
+    return e;
+  }, b.apply(this, arguments);
+}
+function C(e, o) {
+  if (e == null) return {};
+  var r = B(e, o), t, n;
+  if (Object.getOwnPropertySymbols) {
+    var i = Object.getOwnPropertySymbols(e);
+    for (n = 0; n < i.length; n++)
+      t = i[n], !(o.indexOf(t) >= 0) && Object.prototype.propertyIsEnumerable.call(e, t) && (r[t] = e[t]);
+  }
+  return r;
+}
+function B(e, o) {
+  if (e == null) return {};
+  var r = {}, t = Object.keys(e), n, i;
+  for (i = 0; i < t.length; i++)
+    n = t[i], !(o.indexOf(n) >= 0) && (r[n] = e[n]);
+  return r;
+}
+var w = g(function(e, o) {
+  var r = e.color, t = r === void 0 ? "currentColor" : r, n = e.size, i = n === void 0 ? 24 : n, l = C(e, ["color", "size"]);
+  return /* @__PURE__ */ p.createElement("svg", b({
+    ref: o,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: i,
+    height: i,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: t,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, l), /* @__PURE__ */ p.createElement("line", {
+    x1: "12",
+    y1: "5",
+    x2: "12",
+    y2: "19"
+  }), /* @__PURE__ */ p.createElement("line", {
+    x1: "5",
+    y1: "12",
+    x2: "19",
+    y2: "12"
+  }));
+});
+w.propTypes = {
+  color: a.string,
+  size: a.oneOfType([a.string, a.number])
+};
+w.displayName = "Plus";
+const J = g(
+  ({
+    canDecrement: e = !0,
+    canIncrement: o = !0,
+    className: r,
+    decrementButtonClassName: t,
+    incrementButtonClassName: n,
+    isRequired: i,
+    label: l,
+    max: d = -1 / 0,
+    min: h = 1 / 0,
+    name: j,
+    theme: k,
+    value: z,
+    onChange: m
+  }, I) => {
+    const _ = $(), s = z ?? 0, E = N(() => {
+      let c = 0;
+      h === 1 / 0 ? c = s - 1 : c = Math.max(h, s - 1), m?.({ target: { value: c } });
+    }, [s, h, m]), L = N(() => {
+      let c = 0;
+      d === -1 / 0 ? c = s + 1 : c = Math.min(d, s + 1), m?.({ target: { value: c } });
+    }, [s, d, m]);
+    return /* @__PURE__ */ f("div", { className: "flex flex-col gap-1", "data-theme": k, children: [
+      l ? /* @__PURE__ */ f(
+        V,
+        {
+          component: "label",
+          htmlFor: j ?? _,
+          variant: "labelLarge",
+          className: y(T()),
+          children: [
+            "Number of nodes",
+            " ",
+            i && /* @__PURE__ */ u("span", { className: "text-red-600", children: "*" })
+          ]
+        }
+      ) : null,
+      /* @__PURE__ */ f("div", { className: "flex items-center", role: "presentation", children: [
+        /* @__PURE__ */ f(
+          "button",
+          {
+            type: "button",
+            onClick: E,
+            className: y(
+              P({
+                button: "rigth",
+                className: t
+              })
+            ),
+            disabled: !e,
+            children: [
+              /* @__PURE__ */ u(O, { className: "w-4 h-4" }),
+              /* @__PURE__ */ u(x, { children: "Decrement" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ u(
+          "input",
+          {
+            ref: I,
+            type: "number",
+            value: s,
+            name: j,
+            className: y(W({ className: r })),
+            readOnly: !0,
+            "aria-label": typeof l == "string" ? l : "number input"
+          }
+        ),
+        /* @__PURE__ */ f(
+          "button",
+          {
+            type: "button",
+            onClick: L,
+            className: y(
+              P({
+                button: "left",
+                className: n
+              })
+            ),
+            disabled: !o,
+            children: [
+              /* @__PURE__ */ u(w, { className: "w-4 h-4" }),
+              /* @__PURE__ */ u(x, { children: "Increment" })
+            ]
+          }
+        )
+      ] })
+    ] });
+  }
+);
+export {
+  J as Counter
+};

package/dist/components/Counter/Counter.variants.js

@@ -0,0 +1,70 @@
+import { c as e } from "../../index-D29mdTf5.js";
+const t = e([
+  "[&::-webkit-inner-spin-button]:appearance-none",
+  "[&::-webkit-outer-spin-button]:appearance-none",
+  "[-moz-appearance:textfield]",
+  "appearance-none",
+  "border",
+  "border-x-0",
+  "focus-visible:outline-none",
+  "focus-visible:ring-transparent",
+  "h-9",
+  "max-w-16",
+  "text-right",
+  "px-3",
+  "border-gray-300",
+  "text-slate-800",
+  "bg-white",
+  "dark:bg-metal-800",
+  "dark:border-metal-700",
+  "dark:text-metal-50"
+]), r = e(
+  [
+    "h-9",
+    "w-9",
+    "flex",
+    "items-center",
+    "justify-center",
+    "border",
+    "text-slate-500",
+    "border-gray-300",
+    "bg-white",
+    "cursor-pointer",
+    "hover:bg-aurora-50",
+    "hover:text-slate-600",
+    "disabled:hover:bg-white",
+    "disabled:bg-white",
+    "disabled:text-slate-400",
+    "dark:bg-metal-800",
+    "dark:border-metal-700",
+    "dark:text-aurora-500",
+    "dark:hover:bg-aurora-900",
+    "dark:hover:text-aurora-500",
+    "dark:disabled:text-metal-400",
+    "dark:disabled:hover:bg-metal-800",
+    "dark:disabled:bg-metal-800",
+    "disabled:cursor-not-allowed"
+  ],
+  {
+    variants: {
+      button: {
+        left: ["rounded-e"],
+        rigth: ["rounded-s"]
+      }
+    }
+  }
+), o = e(["cursor-pointer"], {
+  variants: {
+    variant: {
+      default: ""
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+export {
+  r as buttonVariants,
+  t as counterVariants,
+  o as labelVariants
+};

package/dist/components/ImageUpload/ImageUpload.js

@@ -195,7 +195,7 @@ const pe = ({
               children: Y
             }
           ) }),
-          (a === t.Default || a === t.Error) && /* @__PURE__ */ e("div", { className: "shrink-0 w-[calc(100px+1rem)]" }),
+          (a === t.Default || a === t.Error) && /* @__PURE__ */ e("div", { className: "shrink-0 w-29" }),
           a === t.Uploading && /* @__PURE__ */ e("div", { className: "shrink-0 w-10" })
         ] }),
         /* @__PURE__ */ e(

package/dist/components/ImageUpload/ImageUpload.variants.js

@@ -15,7 +15,7 @@ const a = t(
     }
   }
 ), r = t(
-  ["flex", "gap-2", "h-[60px]", "items-center", "w-full"],
+  ["flex", "gap-2", "h-15", "items-center", "w-full"],
   {
     variants: {
       status: {

package/dist/components/Radio/Radio.js

@@ -1,53 +1,54 @@
-import { jsxs as n, jsx as s } from "react/jsx-runtime";
-import { forwardRef as g, useId as j, useCallback as w } from "react";
+import { jsxs as c, jsx as s } from "react/jsx-runtime";
+import { forwardRef as V, useId as j, useCallback as w } from "react";
+import { Typography as d } from "../Typography/Typography.js";
 import { cn as a } from "../../utils/index.js";
-import { radioVariants as y, labelRadioVariants as t, wrapperRadioVariants as F } from "./Radio.variants.js";
-const $ = g(
+import { radioVariants as F, labelRadioVariants as p, wrapperRadioVariants as $ } from "./Radio.variants.js";
+const C = V(
   ({
     checked: r = !1,
-    className: p,
-    defaultChecked: o,
+    className: f,
+    defaultChecked: l,
     disabled: e,
-    label: f,
-    labelTextClassName: N,
-    description: l,
-    descriptionClassName: h,
-    name: i,
-    theme: x,
-    value: m,
-    wrapperClassName: R,
-    onChange: c
-  }, u) => {
-    const d = `${j()}-${i}`, b = w(
-      (V) => {
-        c?.(V);
+    label: N,
+    labelTextClassName: h,
+    description: o,
+    descriptionClassName: x,
+    name: m,
+    theme: R,
+    value: n,
+    wrapperClassName: u,
+    onChange: i
+  }, y) => {
+    const t = `${j()}-${m}`, b = w(
+      (g) => {
+        i?.(g);
       },
-      [c]
+      [i]
     );
-    return /* @__PURE__ */ n(
+    return /* @__PURE__ */ c(
       "label",
       {
-        htmlFor: d,
+        htmlFor: t,
         className: a(
-          F({
-            className: R,
+          $({
+            className: u,
             disabled: e || !1
           })
         ),
-        "data-theme": x,
+        "data-theme": R,
         children: [
           /* @__PURE__ */ s(
             "input",
             {
-              ref: u,
-              id: d,
+              ref: y,
+              id: t,
               type: "radio",
-              name: i,
-              value: m,
+              name: m,
+              value: n,
               checked: r,
-              defaultChecked: o,
+              defaultChecked: l,
               className: "hidden peer",
-              onChange: () => b(m),
+              onChange: () => b(n),
               disabled: e
             }
           ),
@@ -55,31 +56,33 @@ const $ = g(
             "span",
             {
               className: a(
-                y({
-                  className: p,
+                F({
+                  className: f,
                   disabled: e || !1,
-                  checked: r || o || !1
+                  checked: r || l || !1
                 })
               )
             }
           ),
-          /* @__PURE__ */ n("div", { className: a(l && "flex flex-col gap-1"), children: [
+          /* @__PURE__ */ c("div", { className: a(o && "flex flex-col gap-1"), children: [
             /* @__PURE__ */ s(
-              "span",
+              d,
               {
+                component: "span",
                 className: a(
-                  t({ className: N })
+                  p({ className: h })
                 ),
-                children: f
+                children: N
               }
             ),
-            l && /* @__PURE__ */ s(
-              "span",
+            o && /* @__PURE__ */ s(
+              d,
               {
+                component: "span",
                 className: a(
-                  t({ className: h })
+                  p({ className: x })
                 ),
-                children: l
+                children: o
               }
             )
           ] })
@@ -88,7 +91,7 @@ const $ = g(
     );
   }
 );
-$.displayName = "KonstructRadio";
+C.displayName = "KonstructRadio";
 export {
-  $ as Radio
+  C as Radio
 };

package/dist/components/Radio/Radio.variants.js

@@ -15,7 +15,8 @@ const a = e(
 ), o = e(
   [
     "border",
-    "border-gray-300",
+    "border-zinc-400",
+    "dark:border-metal-600",
     "duration-300",
     "inline-block",
     "rounded-full",
@@ -61,22 +62,25 @@ const a = e(
         disabled: !0,
         checked: !0,
         class: [
-          "peer-checked:border-gray-300",
-          "peer-checked:before:bg-gray-300",
+          "peer-checked:border-zinc-300",
+          "peer-checked:before:bg-zinc-300",
           "cursor-not-allowed",
-          "[&+span]:cursor-not-allowed"
+          "[&+span]:cursor-not-allowed",
+          "dark:peer-checked:before:bg-aurora-500/50",
+          "dark:peer-checked:border-aurora-500/50"
         ]
       },
       {
         disabled: !0,
         checked: !1,
         class: [
-          "peer-checked:border-gray-200",
-          "peer-checked:border-gray-200",
-          "peer-checked:before:bg-gray-200",
+          "peer-checked:border-zinc-300",
+          "peer-checked:before:bg-zinc-50",
           "cursor-not-allowed",
           "[&+span]:cursor-not-allowed",
-          "bg-gray-50"
+          "bg-gray-50",
+          "dark:bg-metal-800",
+          "dark:bg-metal-800"
         ]
       }
     ],

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

@@ -1,5 +1,5 @@
-import { c as t } from "../../index-D29mdTf5.js";
-const e = t([
+import { c as r } from "../../index-D29mdTf5.js";
+const e = r([
   "border",
   "rounded",
   "p-2.5",
@@ -7,8 +7,10 @@ const e = t([
   "flex",
   "items-center",
   "justify-between",
+  "bg-white",
   "border-gray-300",
   "dark:border-metal-700",
+  "dark:bg-metal-800",
   "cursor-pointer",
   "transition-all",
   "transition-duration-100",
@@ -16,7 +18,7 @@ const e = t([
   "text-sm",
   "text-slate-800",
   "dark:text-slate-50"
-]), a = t([
+]), a = r([
   "snap-y",
   "snap-mandatory",
   "overflow-y-scroll",
@@ -24,7 +26,7 @@ const e = t([
   "flex",
   "flex-col",
   "dark:text-metal-50"
-]), o = t([
+]), o = r([
   "w-15",
   "h-10",
   "snap-start",
@@ -46,8 +48,11 @@ const e = t([
   "focus-within:border-blue-200",
   "dark:focus-within:border-aurora-50",
   "dark:data-[active=true]:bg-aurora-500",
-  "dark:data-[active=true]:text-metal-900"
-]), n = t([
+  "dark:data-[active=true]:hover:border-aurora-50",
+  "dark:hover:border-transparent",
+  "dark:data-[active=true]:text-metal-900",
+  "dark:hover:bg-metal-700"
+]), n = r([
   "flex",
   "items-center",
   "justify-center",

package/dist/components/TimePicker/components/MeridianList/MeridianList.js

@@ -1,39 +1,44 @@
 import { jsxs as f, jsx as r } from "react/jsx-runtime";
 import { useCallback as b } from "react";
 import { cn as t } from "../../../../utils/index.js";
-import { buttonVariants as n, liVariants as c } from "../../TimePicker.variants.js";
-import { useTimePickerContext as N } from "../../contexts/time-picker.hook.js";
-const x = ({
-  listClassName: s,
-  listItemClassName: a,
-  listItemButtonClassName: i
+import { buttonVariants as n, liVariants as s } from "../../TimePicker.variants.js";
+import { useTimePickerContext as x } from "../../contexts/time-picker.hook.js";
+const N = ({
+  listClassName: c,
+  listItemClassName: i,
+  listItemButtonClassName: l
 }) => {
-  const { format: m, isAM: l, onSelectAM: p, onSelectPM: u } = N(), o = b(
-    (e, d) => {
-      e.currentTarget?.blur(), d();
+  const { format: m, isAM: a, onSelectAM: d, onSelectPM: p } = x(), o = b(
+    (e, u) => {
+      e.currentTarget?.blur(), u();
     },
     []
   );
   return m === "24" ? null : /* @__PURE__ */ f(
     "ul",
     {
-      className: t("flex items-center justify-center flex-col", s),
+      className: t("flex items-center justify-center flex-col", c),
       "aria-label": "meridian",
       role: "listbox",
       children: [
         /* @__PURE__ */ r(
           "li",
           {
-            className: t(c({ className: a })),
-            "data-active": l,
+            className: t(s({ className: i })),
+            "data-active": a,
             role: "presentation",
             children: /* @__PURE__ */ r(
               "button",
               {
                 type: "button",
                 role: "option",
-                className: t(n({ className: i })),
-                onClick: (e) => o(e, p),
+                className: t(
+                  n({ className: l }),
+                  {
+                    "dark:text-slate-50": !a
+                  }
+                ),
+                onClick: (e) => o(e, d),
                 children: "AM"
               }
             )
@@ -42,16 +47,21 @@ const x = ({
         /* @__PURE__ */ r(
           "li",
           {
-            className: t(c({ className: a })),
-            "data-active": !l,
+            className: t(s({ className: i })),
+            "data-active": !a,
             role: "presentation",
             children: /* @__PURE__ */ r(
               "button",
               {
                 type: "button",
                 role: "option",
-                className: t(n({ className: i })),
-                onClick: (e) => o(e, u),
+                className: t(
+                  n({ className: l }),
+                  {
+                    "dark:text-slate-50": a
+                  }
+                ),
+                onClick: (e) => o(e, p),
                 children: "PM"
               }
             )
@@ -61,7 +71,7 @@ const x = ({
     }
   );
 };
-x.displayName = "MeridianList";
+N.displayName = "MeridianList";
 export {
-  x as MeridianList
+  N as MeridianList
 };