@konstructio/ui 0.1.0-alpha.9 → 0.1.1-alpha.1

package/dist/components/ProgressBar/ProgressBar.js

@@ -1,30 +1,62 @@
-import { jsxs as i, jsx as a } from "react/jsx-runtime";
-import { cn as o } from "../../utils/index.js";
-import { progressBarProgress as l, progressBarVariants as d } from "./ProgressBar.variants.js";
-const f = ({
+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,
-  theme: e,
-  percent: s,
-  status: t
-}) => /* @__PURE__ */ i("div", { className: "w-full", "data-theme": e, children: [
-  /* @__PURE__ */ i("div", { className: o("flex", r ? "justify-between" : "justify-end"), children: [
-    r ? /* @__PURE__ */ a("label", { className: "font-semibold", children: r }) : null,
-    /* @__PURE__ */ i("span", { className: "font-semibold", children: [
-      s,
-      "%"
-    ] })
-  ] }),
-  /* @__PURE__ */ a("div", { className: o(d()), children: /* @__PURE__ */ a(
-    "div",
-    {
-      className: o(
-        l({ status: t }),
-        s > 0 && s < 99 ? "transition-width duration-500" : "transition-colors duration-0"
+  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,
+              "%"
+            ] })
+          ]
+        }
       ),
-      style: { width: `${s}%` }
-    }
-  ) })
-] });
+      /* @__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}%` }
+            }
+          )
+        }
+      )
+    ]
+  }
+);
 export {
-  f as ProgressBar
+  j as ProgressBar
 };

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

@@ -1,4 +1,4 @@
-import { c as s } from "../../index-BNmRGtA6.js";
+import { c as s } from "../../index-D29mdTf5.js";
 const a = s([
   "h-2",
   "rounded-full",

package/dist/components/Radio/Radio.js

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

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

@@ -1,4 +1,4 @@
-import { c as e } from "../../index-BNmRGtA6.js";
+import { c as e } from "../../index-D29mdTf5.js";
 const a = e(
   ["inline-flex", "items-center", "cursor-pointer", "gap-2", "w-max"],
   {
@@ -53,8 +53,8 @@ const a = e(
         class: [
           "peer-checked:border-kubefirst-primary",
           "peer-checked:before:bg-kubefirst-primary",
-          "civo:peer-checked:border-civo-primary",
-          "civo:peer-checked:before:bg-civo-primary"
+          "civo:peer-checked:border-aurora-500",
+          "civo:peer-checked:before:bg-aurora-500"
         ]
       },
       {

package/dist/components/RadioCard/RadioCard.js

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

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

@@ -1,4 +1,4 @@
-import { c as r } from "../../index-BNmRGtA6.js";
+import { c as r } from "../../index-D29mdTf5.js";
 const e = r([
   "flex",
   "items-center",

package/dist/components/RadioCardGroup/RadioCardGroup.js

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

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

@@ -1,4 +1,4 @@
-import { c as a } from "../../index-BNmRGtA6.js";
+import { c as a } from "../../index-D29mdTf5.js";
 const r = a(["flex"], {
   variants: {
     direction: {

package/dist/components/RadioGroup/RadioGroup.js

@@ -1,50 +1,50 @@
-import { jsx as r } from "react/jsx-runtime";
-import { S as x } from "../../index-B5MIi2tR.js";
-import { useState as G, useCallback as R } from "react";
-import { cn as m } from "../../utils/index.js";
-import { Radio as b } from "../Radio/Radio.js";
-import { radioGroupVariants as j } from "./RadioGroup.variants.js";
-const B = ({
-  asChild: s,
-  className: c,
-  defaultChecked: e,
-  name: i,
-  options: d,
-  theme: p,
-  wrapperClassName: a,
-  direction: f,
-  onValueChange: o
+import { jsx as e } from "react/jsx-runtime";
+import { S as k } from "../../index-DQH6odE9.js";
+import { useState as x, useCallback as C } from "react";
+import { cn as r } from "../../utils/index.js";
+import { Radio as G } from "../Radio/Radio.js";
+import { radioGroupVariants as R } from "./RadioGroup.variants.js";
+const y = ({
+  asChild: m,
+  className: s,
+  defaultChecked: c,
+  name: a,
+  options: i,
+  theme: d,
+  wrapperClassName: n,
+  direction: p,
+  onValueChange: t
 }) => {
-  const S = s ? x : "div", [n, N] = G(
-    () => e
-  ), k = R(
-    (t) => {
-      N(t), o == null || o(t);
+  const f = m ? k : "div", [l, S] = x(
+    () => c
+  ), h = C(
+    (o) => {
+      S(o), t?.(o);
     },
-    [o]
+    [t]
   );
-  return /* @__PURE__ */ r(
-    S,
+  return /* @__PURE__ */ e(
+    f,
     {
-      className: m(
-        j({ className: a, direction: f })
+      className: r(
+        R({ className: n, direction: p })
       ),
-      "data-theme": p,
-      children: d.map(({ value: t, ...l }) => /* @__PURE__ */ r(
-        b,
+      "data-theme": d,
+      children: i.map(({ value: o, ...N }) => /* @__PURE__ */ e(
+        G,
         {
-          value: t,
-          name: i,
-          className: m(c),
-          checked: n === t,
-          onChange: () => k(t),
-          ...l
+          value: o,
+          name: a,
+          className: r(s),
+          checked: l === o,
+          onChange: () => h(o),
+          ...N
         },
-        t
+        o
       ))
     }
   );
 };
 export {
-  B as RadioGroup
+  y as RadioGroup
 };

package/dist/components/RadioGroup/RadioGroup.variants.js

@@ -1,4 +1,4 @@
-import { c as o } from "../../index-BNmRGtA6.js";
+import { c as o } from "../../index-D29mdTf5.js";
 const r = o(["flex"], {
   variants: {
     direction: {

package/dist/components/Range/Range.js

@@ -1,5 +1,5 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { R as g, T as R, a as V, b as c } from "../../index-BvCZBMfr.js";
+import { R as g, T as R, a as V, b as c } from "../../index-DB2XhXHn.js";
 import { forwardRef as v, useRef as b, useState as j, useImperativeHandle as k, useEffect as w, useCallback as y } from "react";
 import { cn as a } from "../../utils/index.js";
 import { rangeOutsideVariants as C, trackVariants as T, thumbVariants as i, rangeVariants as S } from "./Range.variants.js";

package/dist/components/Range/Range.variants.js

@@ -1,4 +1,4 @@
-import { c as r } from "../../index-BNmRGtA6.js";
+import { c as r } from "../../index-D29mdTf5.js";
 const a = r([
   "relative",
   "flex",
@@ -11,8 +11,7 @@ const a = r([
 ]), s = r([
   "absolute",
   "h-full",
-  "bg-kubefirst-secondary",
-  "colony:bg-red-500"
+  "bg-kubefirst-secondary"
 ]), t = r(
   ["relative", "flex-grow", "bg-gray-100", "rounded-full"],
   {

package/dist/components/Sidebar/Sidebar.js

@@ -5,20 +5,21 @@ import { Logo as p } from "./components/Logo/Logo.js";
 import { Navigation as m } from "./components/Navigation/Navigation.js";
 import { NavigationGroup as n } from "./components/NavigationGroup/NavigationGroup.js";
 import { NavigationOption as g } from "./components/NavigationOption/NavigationOption.js";
-import { NavigationSeparator as f } from "./components/NavigationSeparator/NavigationSeparator.js";
+import { NavigationSeparator as e } from "./components/NavigationSeparator/NavigationSeparator.js";
 const o = (r) => /* @__PURE__ */ i(t, { ...r });
+o.displayName = "KonstructSidebar";
 o.Footer = a;
 o.Logo = p;
 o.Navigation = m;
 o.NavigationGroup = n;
 o.NavigationOption = g;
-o.NavigationSeparator = f;
+o.NavigationSeparator = e;
 export {
   a as Footer,
   p as Logo,
   m as Navigation,
   n as NavigationGroup,
   g as NavigationOption,
-  f as NavigationSeparator,
+  e as NavigationSeparator,
   o as Sidebar
 };

package/dist/components/Sidebar/Sidebar.variants.js

@@ -1,4 +1,4 @@
-import { c as r } from "../../index-BNmRGtA6.js";
+import { c as r } from "../../index-D29mdTf5.js";
 const e = r([
   "duration-200",
   "ease-linear",

package/dist/components/Sidebar/components/Footer/Footer.js

@@ -1,7 +1,8 @@
 import { jsx as t } from "react/jsx-runtime";
-import { cn as m } from "../../../../utils/index.js";
-import { footerVariants as e } from "./Footer.variants.js";
-const i = ({ className: o, children: r }) => /* @__PURE__ */ t("footer", { className: m(e({ className: o })), children: r });
+import { cn as e } from "../../../../utils/index.js";
+import { footerVariants as m } from "./Footer.variants.js";
+const a = ({ className: o, children: r }) => /* @__PURE__ */ t("footer", { className: e(m({ className: o })), children: r });
+a.displayName = "KonstructSidebarFooter";
 export {
-  i as Footer
+  a as Footer
 };

package/dist/components/Sidebar/components/Footer/Footer.variants.js

@@ -1,4 +1,4 @@
-import { c as t } from "../../../../index-BNmRGtA6.js";
+import { c as t } from "../../../../index-D29mdTf5.js";
 const e = t([
   "p-2",
   "pb-5",

package/dist/components/Sidebar/components/Logo/Logo.js

@@ -1,7 +1,8 @@
-import { jsx as m } from "react/jsx-runtime";
-import { cn as t } from "../../../../utils/index.js";
-import { logoVariants as a } from "./Logo.variants.js";
-const p = ({ children: o, className: r }) => /* @__PURE__ */ m("header", { className: t(a({ className: r })), children: o });
+import { jsx as a } from "react/jsx-runtime";
+import { cn as m } from "../../../../utils/index.js";
+import { logoVariants as t } from "./Logo.variants.js";
+const s = ({ children: o, className: r }) => /* @__PURE__ */ a("header", { className: m(t({ className: r })), children: o });
+s.displayName = "KonstructSidebarLogo";
 export {
-  p as Logo
+  s as Logo
 };

package/dist/components/Sidebar/components/Logo/Logo.variants.js

@@ -1,4 +1,4 @@
-import { c as p } from "../../../../index-BNmRGtA6.js";
+import { c as p } from "../../../../index-D29mdTf5.js";
 const o = p([
   "md:px-4",
   "md:py-5",

package/dist/components/Sidebar/components/Navigation/Navigation.js

@@ -4,11 +4,12 @@ import { NavigationGroup as n } from "../NavigationGroup/NavigationGroup.js";
 import { NavigationOption as m } from "../NavigationOption/NavigationOption.js";
 import { NavigationSeparator as p } from "../NavigationSeparator/NavigationSeparator.js";
 import { NavigationTitle as v } from "../NavigationTitle/NavigationTitle.js";
-import { navigationVariants as g } from "./Navigation.variants.js";
+import { navigationVariants as N } from "./Navigation.variants.js";
 const i = ({
-  className: o,
-  children: a
-}) => /* @__PURE__ */ t("nav", { className: r(g({ className: o })), children: a });
+  className: a,
+  children: o
+}) => /* @__PURE__ */ t("nav", { className: r(N({ className: a })), children: o });
+i.displayName = "KonstructSidebarNavigation";
 i.NavigationGroup = n;
 i.NavigationOption = m;
 i.NavigationSeparator = p;

package/dist/components/Sidebar/components/Navigation/Navigation.variants.js

@@ -1,4 +1,4 @@
-import { c as a } from "../../../../index-BNmRGtA6.js";
+import { c as a } from "../../../../index-D29mdTf5.js";
 const o = a(["flex", "flex-1", "w-full", "flex-col"]);
 export {
   o as navigationVariants