@konstructio/ui 0.1.2-alpha.5 → 0.1.2-alpha.51

package/dist/components/Counter/Counter.js

@@ -0,0 +1,210 @@
+import { jsxs as f, jsx as u } from "react/jsx-runtime";
+import { R as j } from "../../index-BKjcReYh.js";
+import p, { forwardRef as g, useId as $, useCallback as k } from "react";
+import { cn as d } from "../../utils/index.js";
+import { labelVariants as T, buttonVariants as N, 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: y = -1 / 0,
+    min: h = 1 / 0,
+    name: x,
+    theme: P,
+    value: z,
+    onChange: m
+  }, I) => {
+    const _ = $(), s = z ?? 0, E = k(() => {
+      let c = 0;
+      h === 1 / 0 ? c = s - 1 : c = Math.max(h, s - 1), m?.({ target: { value: c } });
+    }, [s, h, m]), L = k(() => {
+      let c = 0;
+      y === -1 / 0 ? c = s + 1 : c = Math.min(y, s + 1), m?.({ target: { value: c } });
+    }, [s, y, m]);
+    return /* @__PURE__ */ f("div", { className: "flex flex-col gap-1", "data-theme": P, children: [
+      l ? /* @__PURE__ */ f(
+        V,
+        {
+          component: "label",
+          htmlFor: x ?? _,
+          variant: "labelLarge",
+          className: d(T()),
+          children: [
+            "Number of nodes",
+            " ",
+            i && /* @__PURE__ */ u("span", { className: "text-red-600 dark:text-red-500", children: "*" })
+          ]
+        }
+      ) : null,
+      /* @__PURE__ */ f("div", { className: "flex items-center", role: "presentation", children: [
+        /* @__PURE__ */ f(
+          "button",
+          {
+            type: "button",
+            onClick: E,
+            className: d(
+              N({
+                button: "rigth",
+                className: t
+              })
+            ),
+            disabled: !e,
+            children: [
+              /* @__PURE__ */ u(O, { className: "w-4 h-4" }),
+              /* @__PURE__ */ u(j, { children: "Decrement" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ u(
+          "input",
+          {
+            ref: I,
+            type: "number",
+            value: s,
+            name: x,
+            className: d(W({ className: r })),
+            readOnly: !0,
+            "aria-label": typeof l == "string" ? l : "number input"
+          }
+        ),
+        /* @__PURE__ */ f(
+          "button",
+          {
+            type: "button",
+            onClick: L,
+            className: d(
+              N({
+                button: "left",
+                className: n
+              })
+            ),
+            disabled: !o,
+            children: [
+              /* @__PURE__ */ u(w, { className: "w-4 h-4" }),
+              /* @__PURE__ */ u(j, { 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
+};