@konstructio/ui 0.1.2-alpha.8 → 0.1.2-alpha.81

package/dist/components/ProgressBar/ProgressBar.js

@@ -1,62 +1,32 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { cn as s } from "../../utils/index.js";
-import { progressBarProgress as f, progressBarVariants as N } from "./ProgressBar.variants.js";
-const j = ({
-  backgroundBarClassName: t,
-  label: r,
-  labelClassName: o,
-  labelWrapperClassName: l,
-  percent: a,
-  percentClassName: n,
-  progressBarClassName: d,
-  status: m,
-  theme: c,
-  wrapperClassName: h
-}) => /* @__PURE__ */ i(
-  "div",
-  {
-    className: s("w-full text-inherit", h),
-    "data-theme": c,
-    children: [
-      /* @__PURE__ */ i(
-        "div",
-        {
-          className: s(
-            "flex font-semibold",
-            {
-              "justify-between": r,
-              "justify-end": !r
-            },
-            l
-          ),
-          children: [
-            r ? /* @__PURE__ */ e("label", { className: s(o), children: r }) : null,
-            /* @__PURE__ */ i("span", { className: s(n), children: [
-              a,
-              "%"
-            ] })
-          ]
-        }
-      ),
-      /* @__PURE__ */ e(
-        "div",
-        {
-          className: s(N({ className: t })),
-          children: /* @__PURE__ */ e(
-            "div",
-            {
-              className: s(
-                f({ status: m, className: d }),
-                a > 0 && a < 99 ? "transition-width duration-500" : "transition-colors duration-0"
-              ),
-              style: { width: `${a}%` }
-            }
-          )
-        }
-      )
-    ]
-  }
-);
+import { t as n } from "../../utils-DHuiYnx1.js";
+import { progressBarFillVariants as p, progressBarTrackVariants as x } from "./ProgressBar.variants.js";
+import { jsx as s, jsxs as i } from "react/jsx-runtime";
+var w = ({ className: l, fillClassName: r, leftContent: a, percent: c, rightContent: e, status: m, theme: d, trackClassName: t }) => {
+  const h = Math.min(Math.max(c, 0), 100), o = a || e;
+  return /* @__PURE__ */ i("div", {
+    className: n("flex flex-col gap-1 w-full", l),
+    "data-theme": d,
+    children: [o && /* @__PURE__ */ i("div", {
+      className: "flex items-center justify-between",
+      children: [a && /* @__PURE__ */ s("div", {
+        className: "overflow-hidden text-ellipsis whitespace-nowrap",
+        children: a
+      }), e && /* @__PURE__ */ s("div", {
+        className: "text-right shrink-0",
+        children: e
+      })]
+    }), /* @__PURE__ */ s("div", {
+      className: x({ className: t }),
+      children: /* @__PURE__ */ s("div", {
+        className: p({
+          status: r ? null : m,
+          className: r
+        }),
+        style: { width: `${h}%` }
+      })
+    })]
+  });
+};
 export {
-  j as ProgressBar
+  w as ProgressBar
 };

package/dist/components/ProgressBar/ProgressBar.variants.js

@@ -1,36 +1,28 @@
-import { c as s } from "../../index-D29mdTf5.js";
-const a = s([
+import { t as r } from "../../dist-DtEbXv47.js";
+var t = r([
+  "relative",
   "h-2",
-  "rounded-full",
-  "overflow-hidden",
-  "mt-4",
-  "bg-zinc-200"
-]), t = s(
-  ["h-full", "bg-[length:100%_100%]", "animate-gradient-move"],
-  {
-    variants: {
-      status: {
-        success: "",
-        progress: "",
-        error: ""
-      }
-    },
-    compoundVariants: [
-      {
-        status: "progress",
-        class: ["bg-linear-to-r from-[#81e2b4] to-kubefirst-primary"]
-      },
-      {
-        status: "success",
-        class: ["bg-[#81E2B4]"]
-      }
-    ],
-    defaultVariants: {
-      status: "success"
-    }
-  }
-);
+  "w-full",
+  "rounded",
+  "bg-gray-300",
+  "dark:bg-gray-700"
+]), e = r([
+  "absolute",
+  "inset-y-0",
+  "left-0",
+  "rounded",
+  "transition-[width,background-color]",
+  "duration-500"
+], {
+  variants: { status: {
+    default: "bg-metal-600",
+    success: "bg-green-600",
+    warning: "bg-amber-500",
+    error: "bg-red-500"
+  } },
+  defaultVariants: { status: "default" }
+});
 export {
-  t as progressBarProgress,
-  a as progressBarVariants
+  e as progressBarFillVariants,
+  t as progressBarTrackVariants
 };

package/dist/components/Radio/Radio.js

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

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

@@ -1,92 +1,90 @@
-import { c as e } from "../../index-D29mdTf5.js";
-const a = e(
-  ["inline-flex", "items-center", "cursor-pointer", "gap-2", "w-max"],
-  {
-    variants: {
-      disabled: {
-        true: ["cursor-not-allowed"],
-        false: ["cursor-pointer"]
-      }
+import { t as e } from "../../dist-DtEbXv47.js";
+var a = e([
+  "inline-flex",
+  "items-center",
+  "cursor-pointer",
+  "gap-2",
+  "w-max"
+], {
+  variants: { disabled: {
+    true: ["cursor-not-allowed"],
+    false: ["cursor-pointer"]
+  } },
+  defaultVariants: { disabled: !1 }
+}), o = e([
+  "border",
+  "border-zinc-400",
+  "dark:border-metal-600",
+  "duration-300",
+  "inline-block",
+  "rounded-full",
+  "transition-all",
+  "flex",
+  "flex-col",
+  "items-center",
+  "justify-center",
+  "before:content-['']",
+  "before:rounded-full",
+  "before:w-0",
+  "before:h-0",
+  "before:duration-100",
+  "before:transition-all",
+  "h-4",
+  "w-4",
+  "peer-checked:before:h-[70%]",
+  "peer-checked:before:w-[70%]"
+], {
+  variants: {
+    disabled: {
+      true: "",
+      false: ""
     },
-    defaultVariants: {
-      disabled: !1
+    checked: {
+      true: "",
+      false: ""
     }
-  }
-), o = e(
-  [
-    "border",
-    "border-gray-300",
-    "duration-300",
-    "inline-block",
-    "rounded-full",
-    "transition-all",
-    "flex",
-    "flex-col",
-    "items-center",
-    "justify-center",
-    "before:content-['']",
-    "before:rounded-full",
-    "before:w-0",
-    "before:h-0",
-    "before:duration-100",
-    "before:transition-all",
-    "h-4",
-    "w-4",
-    "peer-checked:before:h-[70%]",
-    "peer-checked:before:w-[70%]"
-  ],
-  {
-    variants: {
-      disabled: {
-        true: "",
-        false: ""
-      },
-      checked: {
-        true: "",
-        false: ""
-      }
+  },
+  compoundVariants: [
+    {
+      disabled: !1,
+      checked: [!0, !1],
+      class: [
+        "kubefirst:peer-checked:border-kubefirst-primary",
+        "kubefirst:peer-checked:before:bg-kubefirst-primary",
+        "peer-checked:border-aurora-500",
+        "peer-checked:before:bg-aurora-500"
+      ]
+    },
+    {
+      disabled: !0,
+      checked: !0,
+      class: [
+        "peer-checked:border-zinc-300",
+        "peer-checked:before:bg-zinc-300",
+        "cursor-not-allowed",
+        "[&+span]:cursor-not-allowed",
+        "dark:peer-checked:before:bg-aurora-500/50",
+        "dark:peer-checked:border-aurora-500/50"
+      ]
     },
-    compoundVariants: [
-      {
-        disabled: !1,
-        checked: [!0, !1],
-        class: [
-          "kubefirst:peer-checked:border-kubefirst-primary",
-          "kubefirst:peer-checked:before:bg-kubefirst-primary",
-          "peer-checked:border-aurora-500",
-          "peer-checked:before:bg-aurora-500"
-        ]
-      },
-      {
-        disabled: !0,
-        checked: !0,
-        class: [
-          "peer-checked:border-gray-300",
-          "peer-checked:before:bg-gray-300",
-          "cursor-not-allowed",
-          "[&+span]:cursor-not-allowed"
-        ]
-      },
-      {
-        disabled: !0,
-        checked: !1,
-        class: [
-          "peer-checked:border-gray-200",
-          "peer-checked:border-gray-200",
-          "peer-checked:before:bg-gray-200",
-          "cursor-not-allowed",
-          "[&+span]:cursor-not-allowed",
-          "bg-gray-50"
-        ]
-      }
-    ],
-    defaultVariants: {
-      disabled: !1
+    {
+      disabled: !0,
+      checked: !1,
+      class: [
+        "peer-checked:border-zinc-300",
+        "peer-checked:before:bg-zinc-50",
+        "cursor-not-allowed",
+        "[&+span]:cursor-not-allowed",
+        "bg-gray-50",
+        "dark:bg-metal-800",
+        "dark:bg-metal-800"
+      ]
     }
-  }
-), c = e(["text-sm", "text-zinc-700"]);
+  ],
+  defaultVariants: { disabled: !1 }
+}), d = e(["text-sm", "text-zinc-700"]);
 export {
-  c as labelRadioVariants,
+  d as labelRadioVariants,
   o as radioVariants,
   a as wrapperRadioVariants
 };

package/dist/components/RadioCard/RadioCard.js

@@ -1,37 +1,20 @@
-import { jsx as m } from "react/jsx-runtime";
-import { cn as a } from "../../utils/index.js";
+import { t as a } from "../../utils-DHuiYnx1.js";
 import { Card as d } from "../Card/Card.js";
 import { Radio as l } from "../Radio/Radio.js";
 import { radioCardVariants as e } from "./RadioCard.variants.js";
-const f = ({
-  wrapperClassName: r,
-  theme: i,
-  labelWrapperClassName: t,
-  checked: o,
-  description: s,
-  ...p
-}) => /* @__PURE__ */ m(
-  d,
-  {
-    "data-theme": i,
-    className: a(
-      e({
-        className: r
-      })
-    ),
-    wrapperClassName: a("w-max", r),
-    isActive: o,
-    children: /* @__PURE__ */ m(
-      l,
-      {
-        wrapperClassName: a("w-full h-full p-3 gap-3", t),
-        checked: o,
-        description: s,
-        ...p
-      }
-    )
-  }
-);
+import { jsx as o } from "react/jsx-runtime";
+var f = ({ wrapperClassName: r, theme: i, labelWrapperClassName: t, checked: m, description: s, ...p }) => /* @__PURE__ */ o(d, {
+  "data-theme": i,
+  className: a(e({ className: r })),
+  wrapperClassName: a("w-max", r),
+  isActive: m,
+  children: /* @__PURE__ */ o(l, {
+    wrapperClassName: a("w-full h-full p-3 gap-3", t),
+    checked: m,
+    description: s,
+    ...p
+  })
+});
 f.displayName = "KonstructRadioCard";
 export {
   f as RadioCard

package/dist/components/RadioCard/RadioCard.variants.js

@@ -1,9 +1,9 @@
-import { c as r } from "../../index-D29mdTf5.js";
-const e = r([
+import { t as r } from "../../dist-DtEbXv47.js";
+var e = r([
   "flex",
   "items-center",
   "p-0",
-  "border-2"
+  "border"
 ]);
 export {
   e as radioCardVariants

package/dist/components/RadioCardGroup/RadioCardGroup.js

@@ -1,45 +1,27 @@
-import { jsx as o } from "react/jsx-runtime";
-import { useState as C, useCallback as N } from "react";
-import { cn as t } from "../../utils/index.js";
-import { RadioCard as S } from "../RadioCard/RadioCard.js";
-import { radioCardGroupVariants as k } from "./RadioCardGroup.variants.js";
-const g = ({
-  className: a,
-  defaultChecked: m,
-  direction: s,
-  name: c,
-  options: d,
-  theme: i,
-  wrapperClassName: p,
-  onValueChange: e
-}) => {
-  const [n, f] = C(m), l = N(
-    (r) => {
-      f(r), e?.(r);
-    },
-    [e]
-  );
-  return /* @__PURE__ */ o(
-    "div",
-    {
-      className: t(
-        k({ className: p, direction: s })
-      ),
-      "data-theme": i,
-      children: d.map(({ value: r, ...h }) => /* @__PURE__ */ o(
-        S,
-        {
-          value: r,
-          name: c,
-          className: t(a),
-          checked: n === r,
-          onChange: () => l(r),
-          ...h
-        },
-        r
-      ))
-    }
-  );
+import { t } from "../../utils-DHuiYnx1.js";
+import { RadioCard as C } from "../RadioCard/RadioCard.js";
+import { radioCardGroupVariants as N } from "./RadioCardGroup.variants.js";
+import { useCallback as S, useState as k } from "react";
+import { jsx as a } from "react/jsx-runtime";
+var g = ({ className: o, defaultChecked: m, direction: s, name: d, options: c, theme: i, wrapperClassName: p, onValueChange: e }) => {
+  const [n, f] = k(m), l = S((r) => {
+    f(r), e?.(r);
+  }, [e]);
+  return /* @__PURE__ */ a("div", {
+    className: t(N({
+      className: p,
+      direction: s
+    })),
+    "data-theme": i,
+    children: c.map(({ value: r, ...h }) => /* @__PURE__ */ a(C, {
+      value: r,
+      name: d,
+      className: t(o),
+      checked: n === r,
+      onChange: () => l(r),
+      ...h
+    }, r))
+  });
 };
 export {
   g as RadioCardGroup

package/dist/components/RadioCardGroup/RadioCardGroup.variants.js

@@ -1,15 +1,11 @@
-import { c as a } from "../../index-D29mdTf5.js";
-const r = a(["flex"], {
-  variants: {
-    direction: {
-      row: ["flex-row", "gap-8"],
-      col: ["flex-col", "gap-4"]
-    }
-  },
-  defaultVariants: {
-    direction: "col"
-  }
+import { t as a } from "../../dist-DtEbXv47.js";
+var o = a(["flex"], {
+  variants: { direction: {
+    row: ["flex-row", "gap-8"],
+    col: ["flex-col", "gap-4"]
+  } },
+  defaultVariants: { direction: "col" }
 });
 export {
-  r as radioCardGroupVariants
+  o as radioCardGroupVariants
 };