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

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/RadioGroup/RadioGroup.js

@@ -8,11 +8,11 @@ const y = ({
   asChild: m,
   className: s,
   defaultChecked: c,
-  name: a,
-  options: i,
-  theme: d,
-  wrapperClassName: n,
-  direction: p,
+  direction: a,
+  name: i,
+  options: d,
+  theme: n,
+  wrapperClassName: p,
   onValueChange: t
 }) => {
   const f = m ? k : "div", [l, S] = x(
@@ -27,14 +27,14 @@ const y = ({
     f,
     {
       className: r(
-        R({ className: n, direction: p })
+        R({ className: p, direction: a })
       ),
-      "data-theme": d,
-      children: i.map(({ value: o, ...N }) => /* @__PURE__ */ e(
+      "data-theme": n,
+      children: d.map(({ value: o, ...N }) => /* @__PURE__ */ e(
         G,
         {
           value: o,
-          name: a,
+          name: i,
           className: r(s),
           checked: l === o,
           onChange: () => h(o),

package/dist/components/Select/components/Wrapper.js

@@ -87,7 +87,7 @@ const de = [
               onClick: () => !t && j(),
               children: [
                 v,
-                h && /* @__PURE__ */ r("span", { className: "text-red-600 ml-1", children: "*" })
+                h && /* @__PURE__ */ r("span", { className: "text-red-600 dark:text-red-500 ml-1", children: "*" })
               ]
             }
           ) : null,

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
 };

package/dist/components/TimePicker/components/Wrapper/Wrapper.js

@@ -1,30 +1,31 @@
 import { jsxs as t, jsx as a } from "react/jsx-runtime";
-import { useId as N, useState as y, useRef as E, useCallback as O, useEffect as I } from "react";
-import { cn as c } from "../../../../utils/index.js";
-import { timePickerVariants as L } from "../../TimePicker.variants.js";
+import { useId as N, useState as E, useRef as L, useCallback as O, useEffect as I } from "react";
+import { Typography as c } from "../../../Typography/Typography.js";
+import { cn as d } from "../../../../utils/index.js";
+import { timePickerVariants as T } from "../../TimePicker.variants.js";
 import { WrapperList as j } from "../WrapperList/WrapperList.js";
 import { C as P } from "../../../../chevron-down-DgT-uSF9.js";
 import { useTimePickerContext as R } from "../../contexts/time-picker.hook.js";
-const V = ({
-  name: d,
-  label: l,
-  required: p,
-  scrollBehavior: f,
-  className: u,
+const q = ({
+  name: p,
+  label: i,
+  isRequired: f,
+  scrollBehavior: u,
+  className: h,
   listClassName: x,
-  listItemClassName: h,
-  listItemButtonClassName: w
+  listItemClassName: w,
+  listItemButtonClassName: b
 }) => {
-  const b = N(), [n, r] = y(!1), i = E(null), { format: k, formattedTime: m } = R(), s = d ?? `time-${b}`, g = O(() => r((e) => !e), []);
+  const g = N(), [n, r] = E(!1), l = L(null), { format: k, formattedTime: m } = R(), o = p ?? `time-${g}`, v = O(() => r((e) => !e), []);
   return I(() => {
-    const e = new AbortController(), v = (o) => {
-      o.key === "Escape" && r(!1);
-    }, C = (o) => {
-      i.current?.contains(o.target) || r(!1);
+    const e = new AbortController(), y = (s) => {
+      s.key === "Escape" && r(!1);
+    }, C = (s) => {
+      l.current?.contains(s.target) || r(!1);
     };
     return document.addEventListener("mousedown", C, {
       signal: e.signal
-    }), document.addEventListener("keydown", v, {
+    }), document.addEventListener("keydown", y, {
       signal: e.signal
     }), () => {
       e.abort();
@@ -32,21 +33,35 @@ const V = ({
   }, []), /* @__PURE__ */ t(
     "div",
     {
-      ref: i,
-      className: c(
-        "w-max text-slate-800 text-sm flex flex-col gap-2",
-        k === "12" ? "w-52" : "w-[140px]"
+      ref: l,
+      className: d(
+        "w-max",
+        "text-slate-800",
+        "text-sm",
+        "flex",
+        "flex-col",
+        "gap-2",
+        k === "12" ? "w-53 min-w-53" : "w-36 min-w-36"
       ),
       children: [
-        l ? /* @__PURE__ */ t(
-          "label",
+        i ? /* @__PURE__ */ t(
+          c,
           {
-            htmlFor: s,
-            className: "text-slate-500 dark:text-metal-50 font-medium",
+            component: "label",
+            variant: "labelLarge",
+            htmlFor: o,
+            className: "font-medium",
             children: [
-              l,
+              i,
               " ",
-              p && /* @__PURE__ */ a("span", { className: "text-red-600", children: "*" })
+              f && /* @__PURE__ */ a(
+                c,
+                {
+                  component: "span",
+                  className: "text-red-600 dark:text-red-500 text-sm font-normal",
+                  children: "*"
+                }
+              )
             ]
           }
         ) : null,
@@ -54,13 +69,13 @@ const V = ({
           /* @__PURE__ */ t(
             "button",
             {
-              "aria-label": s,
+              "aria-label": o,
               "aria-haspopup": "listbox",
               "aria-expanded": "true",
               "aria-controls": "time-options",
-              className: c(L({ className: u })),
+              className: d(T({ className: h })),
               "data-open": n,
-              onClick: g,
+              onClick: v,
               children: [
                 m,
                 /* @__PURE__ */ a(
@@ -77,10 +92,10 @@ const V = ({
             j,
             {
               isOpen: n,
-              scrollBehavior: f,
+              scrollBehavior: u,
               listClassName: x,
-              listItemClassName: h,
-              listItemButtonClassName: w
+              listItemClassName: w,
+              listItemButtonClassName: b
             }
           )
         ] }),
@@ -88,7 +103,7 @@ const V = ({
           "input",
           {
             type: "hidden",
-            name: s,
+            name: o,
             value: m,
             className: "hidden"
           }
@@ -98,5 +113,5 @@ const V = ({
   );
 };
 export {
-  V as Wrapper
+  q as Wrapper
 };

package/dist/components/Typography/Typography.js

@@ -2,27 +2,25 @@ import { jsx as n } from "react/jsx-runtime";
 import { forwardRef as y } from "react";
 import { cn as c } from "../../utils/index.js";
 import { typographyVariants as f } from "./Typography.variants.js";
-const d = y(({ className: o, theme: r, children: p, variant: t, component: e, ...m }, a) => {
-  const s = e ?? (t?.includes("h") ? t : "p");
+const h = y(({ className: r, theme: p, children: t, variant: o, component: m, ...e }, s) => {
+  const a = m ?? (o?.includes("h") ? o : "p");
   return /* @__PURE__ */ n(
-    s,
+    a,
     {
-      ref: a,
-      "data-theme": r,
+      ref: s,
+      "data-theme": p,
       className: c(
-        "text-slate-800",
-        "dark:text-metal-50",
         f({
-          className: o,
-          variant: t
+          className: r,
+          variant: o
         })
       ),
-      ...m,
-      children: p
+      ...e,
+      children: t
     }
   );
 });
-d.displayName = "KonstructTypography";
+h.displayName = "KonstructTypography";
 export {
-  d as Typography
+  h as Typography
 };

package/dist/components/Typography/Typography.variants.js

@@ -1,52 +1,60 @@
 import { c as t } from "../../index-D29mdTf5.js";
-const a = t([], {
-  variants: {
-    variant: {
-      h1: ["text-[57px]", "leading-16"],
-      h2: ["text-[45px]", "leading-13"],
-      h3: ["text-4xl", "leading-11"],
-      h4: ["text-[32px]", "leading-10"],
-      h5: ["text-[28px]", "leading-9"],
-      h6: ["text-2xl", "font-medium", "leading-8", "tracking-[0.15px]"],
-      subtitle1: ["text-[22px]", "leading-7"],
-      subtitle2: ["text-sm", "font-medium", "leading-6", "tracking-[0.15px]"],
-      subtitle3: [
-        "text-[14px]",
-        "font-medium",
-        "leading-5",
-        "tracking-[0.1px]"
-      ],
-      labelLarge: ["text-sm", "leading-5", "tracking-[0.1px]"],
-      labelMedium: [
-        "text-[12px]",
-        "font-medium",
-        "leading-4",
-        "tracking-[0.5px]",
-        "uppercase"
-      ],
-      labelSmall: [
-        "text-[11px]",
-        "font-medium",
-        "leading-4",
-        "tracking-[0.5px]",
-        "uppercase"
-      ],
-      buttonSmall: [
-        "text-[14px]",
-        "font-semibold",
-        "leading-5",
-        "tracking-[0.25px]"
-      ],
-      body1: ["text-base", "leading-6", "tracking-[0.5px]"],
-      body2: ["text-sm", "leading-5", "tracking-[0.25px]"],
-      body3: ["text-xs", "leading-4", "tracking-[0.4px]"],
-      tooltip: ["text-sm", "leading-5.5"]
+const a = t(
+  ["text-slate-800", "dark:text-metal-50"],
+  {
+    variants: {
+      variant: {
+        h1: ["text-[57px]", "leading-16"],
+        h2: ["text-[45px]", "leading-13"],
+        h3: ["text-4xl", "leading-11"],
+        h4: ["text-[32px]", "leading-10"],
+        h5: ["text-[28px]", "leading-9"],
+        h6: ["text-2xl", "font-medium", "leading-8", "tracking-[0.15px]"],
+        subtitle1: ["text-[22px]", "leading-7"],
+        subtitle2: ["text-sm", "font-medium", "leading-6", "tracking-[0.15px]"],
+        subtitle3: [
+          "text-[14px]",
+          "font-medium",
+          "leading-5",
+          "tracking-[0.1px]"
+        ],
+        labelLarge: [
+          "text-sm",
+          "font-medium",
+          "text-slate-500",
+          "dark:text-metal-50"
+        ],
+        labelMedium: [
+          "text-[12px]",
+          "font-medium",
+          "leading-4",
+          "tracking-[0.5px]",
+          "uppercase"
+        ],
+        labelSmall: [
+          "text-[11px]",
+          "font-medium",
+          "leading-4",
+          "tracking-[0.5px]",
+          "uppercase"
+        ],
+        buttonSmall: [
+          "text-[14px]",
+          "font-semibold",
+          "leading-5",
+          "tracking-[0.25px]"
+        ],
+        body1: ["text-base", "leading-6", "tracking-[0.5px]"],
+        body2: ["text-sm", "leading-5", "tracking-[0.25px]"],
+        body3: ["text-xs", "leading-4", "tracking-[0.4px]"],
+        tooltip: ["text-sm", "leading-5.5"]
+      }
+    },
+    defaultVariants: {
+      variant: "body1"
     }
-  },
-  defaultVariants: {
-    variant: "body1"
   }
-});
+);
 export {
   a as typographyVariants
 };

package/dist/components/VirtualizedTable/VirtualizedTable.js

@@ -14,11 +14,11 @@ const J = ({
   ariaLabel: p,
   columns: d,
   data: f,
-  totalItems: b = -1 / 0,
-  className: u,
+  totalItems: u = -1 / 0,
+  className: b,
   classNameHeaderActiveArrows: T,
-  classNameHeaderArrows: x,
-  classNameHeaderTable: N,
+  classNameHeaderArrows: N,
+  classNameHeaderTable: x,
   classNameTable: A,
   classNameWrapperTable: y,
   isLoading: a,
@@ -26,8 +26,8 @@ const J = ({
   queryOptions: z,
   // Pagination
   showPagination: B,
-  showTotalItems: i,
-  showDropdownPagination: t,
+  showTotalItems: t,
+  showDropdownPagination: i,
   showDotPagination: l,
   showFormPagination: m,
   pageSizes: V,
@@ -42,8 +42,8 @@ const J = ({
 }) => {
   const e = I(
     () => B || [
-      i,
       t,
+      i,
       l,
       m
     ].some(Boolean),
@@ -56,10 +56,10 @@ const J = ({
       columns: d,
       data: f,
       fetchData: h,
-      totalItems: b,
+      totalItems: u,
       queryOptions: z,
       isPaginationEnabled: e,
-      children: /* @__PURE__ */ s("section", { className: c("w-full min-w-fit", u), children: [
+      children: /* @__PURE__ */ s("section", { className: c("w-full min-w-fit", b), children: [
         j && /* @__PURE__ */ r(
           M,
           {
@@ -81,7 +81,7 @@ const J = ({
               "table",
               {
                 className: c(
-                  "w-full border-collapse table-fixed",
+                  "w-full border-collapse table-auto",
                   "dark:border-separate dark:border-spacing-0",
                   A
                 ),
@@ -90,8 +90,8 @@ const J = ({
                   /* @__PURE__ */ r(
                     g,
                     {
-                      className: N,
-                      classNameArrows: x,
+                      className: x,
+                      classNameArrows: N,
                       classNameActiveArrows: T
                     }
                   ),
@@ -104,8 +104,8 @@ const J = ({
         e && /* @__PURE__ */ r(
           C,
           {
-            showTotalItems: i,
-            showDropdownPagination: t,
+            showTotalItems: t,
+            showDropdownPagination: i,
             showDotPagination: l,
             showFormPagination: m,
             pageSizes: V,