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

package/dist/components/TagSelect/components/Wrapper/Wrapper.js

@@ -1,135 +1,86 @@
 import "../Item/Item.js";
-import { List as j } from "../List/List.js";
-import { jsxs as g, jsx as i } from "react/jsx-runtime";
-import b, { forwardRef as w, useId as k, useImperativeHandle as T } from "react";
-import { Tag as P } from "../../../Tag/Tag.js";
-import { cn as l } from "../../../../utils/index.js";
-import { useTagSelect as C } from "../../hooks/useTagSelect.js";
-import { labelVariants as S, tagSelectVariants as z, wrapperVariants as R } from "../../TagSelect.variants.js";
-import { X as _ } from "../../../../x-4F_5p77m.js";
-import { P as p } from "../../../../index-N2OStZoU.js";
-import { useTagSelect as I } from "../../contexts/TagSelect.hook.js";
-function u() {
-  return u = Object.assign || function(e) {
-    for (var o = 1; o < arguments.length; o++) {
-      var t = arguments[o];
-      for (var r in t)
-        Object.prototype.hasOwnProperty.call(t, r) && (e[r] = t[r]);
-    }
-    return e;
-  }, u.apply(this, arguments);
-}
-function L(e, o) {
-  if (e == null) return {};
-  var t = W(e, o), r, n;
-  if (Object.getOwnPropertySymbols) {
-    var a = Object.getOwnPropertySymbols(e);
-    for (n = 0; n < a.length; n++)
-      r = a[n], !(o.indexOf(r) >= 0) && Object.prototype.propertyIsEnumerable.call(e, r) && (t[r] = e[r]);
-  }
-  return t;
-}
-function W(e, o) {
-  if (e == null) return {};
-  var t = {}, r = Object.keys(e), n, a;
-  for (a = 0; a < r.length; a++)
-    n = r[a], !(o.indexOf(n) >= 0) && (t[n] = e[n]);
-  return t;
-}
-var d = w(function(e, o) {
-  var t = e.color, r = t === void 0 ? "currentColor" : t, n = e.size, a = n === void 0 ? 24 : n, c = L(e, ["color", "size"]);
-  return /* @__PURE__ */ b.createElement("svg", u({
-    ref: o,
-    xmlns: "http://www.w3.org/2000/svg",
-    width: a,
-    height: a,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: r,
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, c), /* @__PURE__ */ b.createElement("polyline", {
-    points: "18 15 12 9 6 15"
-  }));
-});
-d.propTypes = {
-  color: p.string,
-  size: p.oneOfType([p.string, p.number])
-};
-d.displayName = "ChevronUp";
-const G = w(
+import { List as g } from "../List/List.js";
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { forwardRef as w, useId as T, useImperativeHandle as b } from "react";
+import { Tag as C } from "../../../Tag/Tag.js";
+import { cn as r } from "../../../../utils/index.js";
+import { useTagSelect as S } from "../../hooks/useTagSelect.js";
+import { labelVariants as k, tagSelectVariants as R, wrapperVariants as I } from "../../TagSelect.variants.js";
+import { X as O } from "../../../../x-Eoa9FJjA.js";
+import { C as V } from "../../../../chevron-up-DEfvgPCw.js";
+import { useTagSelect as j } from "../../contexts/TagSelect.hook.js";
+const B = w(
   ({
-    label: e,
-    labelClassName: o,
+    label: o,
+    labelClassName: c,
     name: t,
-    placeholder: r = "Select a value...",
-    theme: n,
-    wrapperClassName: a
-  }, c) => {
-    const h = k(), { selectedTags: v, isOpen: m, onOpen: x, onRemoveTag: y, inputRef: f } = I(), { wrapperRef: O, handleOpen: N } = C();
-    return T(c, () => f.current, [f]), /* @__PURE__ */ g(
+    placeholder: p = "Select a value...",
+    theme: d,
+    wrapperClassName: f
+  }, h) => {
+    const i = T(), { selectedTags: n, isOpen: s, onOpen: u, onRemoveTag: x, inputRef: l } = j(), { wrapperRef: N, handleOpen: v } = S();
+    return b(h, () => l.current, [l]), /* @__PURE__ */ m(
       "div",
       {
-        ref: O,
-        className: l(
-          R({
-            className: a
+        ref: N,
+        className: r(
+          I({
+            className: f
           })
         ),
-        "data-theme": n,
+        "data-theme": d,
         children: [
-          e ? /* @__PURE__ */ i(
+          o ? /* @__PURE__ */ e(
             "label",
             {
-              htmlFor: t ?? h,
-              className: l(
-                S({
-                  className: o
+              htmlFor: t ?? i,
+              className: r(
+                k({
+                  className: c
                 })
               ),
-              onClick: () => x(!0),
-              children: e
+              onClick: () => u(!0),
+              children: o
             }
           ) : null,
-          /* @__PURE__ */ g(
+          /* @__PURE__ */ m(
             "div",
             {
-              id: t ?? h,
-              className: l(z()),
+              id: t ?? i,
+              className: r(R()),
               role: "combobox",
-              onClick: N,
-              "aria-expanded": m,
+              onClick: v,
+              "aria-expanded": s,
               children: [
-                v.length === 0 ? /* @__PURE__ */ i("span", { className: "text-base text-inherit select-none", children: r }) : /* @__PURE__ */ i("div", { className: "flex flex-wrap gap-1.5", children: v.map((s) => /* @__PURE__ */ i(
-                  P,
+                n.length === 0 ? /* @__PURE__ */ e("span", { className: "text-base text-inherit select-none", children: p }) : /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-1.5", children: n.map((a) => /* @__PURE__ */ e(
+                  C,
                   {
-                    ...s,
+                    ...a,
                     className: "select-none",
-                    rightIcon: /* @__PURE__ */ i(_, { className: "w-3 h-3", onClick: () => y(s) }),
-                    "data-value": s.label
+                    rightIcon: /* @__PURE__ */ e(O, { className: "w-3 h-3", onClick: () => x(a) }),
+                    "data-value": a.label
                   },
-                  s.id
+                  a.id
                 )) }),
-                /* @__PURE__ */ i(
-                  d,
+                /* @__PURE__ */ e(
+                  V,
                   {
-                    className: l(
+                    className: r(
                       "w-4 h-4 text-inherit transition-all duration-50 shrink-0",
-                      m ? "rotate-0" : "rotate-180"
+                      s ? "rotate-0" : "rotate-180"
                     )
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ i("input", { ref: f, type: "text", name: t, className: "hidden" }),
-          m ? /* @__PURE__ */ i(j, {}) : null
+          /* @__PURE__ */ e("input", { ref: l, type: "text", name: t, className: "hidden" }),
+          s ? /* @__PURE__ */ e(g, {}) : null
         ]
       }
     );
   }
 );
 export {
-  G as Wrapper
+  B as Wrapper
 };

package/dist/components/TimePicker/TimePicker.js

@@ -2,7 +2,7 @@ import { jsx as r } from "react/jsx-runtime";
 import { TimePickerProvider as m } from "./contexts/time-picker.provider.js";
 import { Wrapper as o } from "./components/Wrapper/Wrapper.js";
 const p = ({ format: i = "12", ...e }) => /* @__PURE__ */ r(m, { format: i, children: /* @__PURE__ */ r(o, { ...e }) });
-p.displayName = "TimePicker";
+p.displayName = "KonstructTimePicker";
 export {
   p as TimePicker
 };

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

@@ -1,28 +1,34 @@
 import { c as r } from "../../index-D29mdTf5.js";
-const t = r([
+const e = r([
   "border",
   "rounded",
-  "p-[0.625rem]",
+  "p-2.5",
   "w-full",
   "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",
   "data-[open=true]:border-aurora-500",
-  "text-sm"
-]), o = r([
+  "text-sm",
+  "text-slate-800",
+  "dark:text-slate-50"
+]), a = r([
   "snap-y",
   "snap-mandatory",
   "overflow-y-scroll",
   "scrollbar-none",
   "flex",
-  "flex-col"
-]), n = r([
-  "w-[60px]",
-  "h-[40px]",
+  "flex-col",
+  "dark:text-metal-50"
+]), o = r([
+  "w-15",
+  "h-10",
   "snap-start",
   "rounded",
   "transition-all",
@@ -39,8 +45,14 @@ const t = r([
   "data-[active=true]:text-white",
   "data-[active=true]:font-medium",
   "focus-visible:border-blue-200",
-  "focus-within:border-blue-200"
-]), a = r([
+  "focus-within:border-blue-200",
+  "dark:focus-within:border-aurora-50",
+  "dark:data-[active=true]:bg-aurora-500",
+  "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",
@@ -54,8 +66,8 @@ const t = r([
   "text-sm"
 ]);
 export {
-  a as buttonVariants,
-  n as liVariants,
-  t as timePickerVariants,
-  o as ulVariants
+  n as buttonVariants,
+  o as liVariants,
+  e as timePickerVariants,
+  a as ulVariants
 };

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 m } 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-MZvQoT2F.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,
+const q = ({
+  name: p,
   label: i,
-  required: p,
-  scrollBehavior: f,
-  className: u,
+  isRequired: f,
+  scrollBehavior: u,
+  className: h,
   listClassName: x,
-  listItemClassName: h,
-  listItemButtonClassName: w
+  listItemClassName: w,
+  listItemButtonClassName: b
 }) => {
-  const b = N(), [n, r] = y(!1), l = E(null), { format: g, formattedTime: c } = R(), s = d ?? `time-${b}`, k = 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) => {
-      l.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();
@@ -33,29 +34,50 @@ const V = ({
     "div",
     {
       ref: l,
-      className: m(
-        "w-max text-slate-800 text-sm flex flex-col gap-2",
-        g === "12" ? "w-[208px]" : "w-[140px]"
+      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: [
-        i ? /* @__PURE__ */ t("label", { htmlFor: s, className: "text-slate-500 font-medium", children: [
-          i,
-          " ",
-          p && /* @__PURE__ */ a("span", { className: "text-red-600", children: "*" })
-        ] }) : null,
+        i ? /* @__PURE__ */ t(
+          c,
+          {
+            component: "label",
+            variant: "labelLarge",
+            htmlFor: o,
+            className: "font-medium",
+            children: [
+              i,
+              " ",
+              f && /* @__PURE__ */ a(
+                c,
+                {
+                  component: "span",
+                  className: "text-red-600 dark:text-red-500 text-sm font-normal",
+                  children: "*"
+                }
+              )
+            ]
+          }
+        ) : null,
         /* @__PURE__ */ t("div", { className: "relative", children: [
           /* @__PURE__ */ t(
             "button",
             {
-              "aria-label": s,
+              "aria-label": o,
               "aria-haspopup": "listbox",
               "aria-expanded": "true",
               "aria-controls": "time-options",
-              className: m(L({ className: u })),
+              className: d(T({ className: h })),
               "data-open": n,
-              onClick: k,
+              onClick: v,
               children: [
-                c,
+                m,
                 /* @__PURE__ */ a(
                   P,
                   {
@@ -70,10 +92,10 @@ const V = ({
             j,
             {
               isOpen: n,
-              scrollBehavior: f,
+              scrollBehavior: u,
               listClassName: x,
-              listItemClassName: h,
-              listItemButtonClassName: w
+              listItemClassName: w,
+              listItemButtonClassName: b
             }
           )
         ] }),
@@ -81,8 +103,8 @@ const V = ({
           "input",
           {
             type: "hidden",
-            name: s,
-            value: c,
+            name: o,
+            value: m,
             className: "hidden"
           }
         )
@@ -91,5 +113,5 @@ const V = ({
   );
 };
 export {
-  V as Wrapper
+  q as Wrapper
 };

package/dist/components/TimePicker/components/WrapperList/WrapperList.js

@@ -1,51 +1,59 @@
-import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { jsxs as f, jsx as t } from "react/jsx-runtime";
 import { useMemo as n } from "react";
-import { cn as s } from "../../../../utils/index.js";
-import { getHours as d, getMinutes as M } from "../../utils/index.js";
-import { HoursList as x } from "../HoursList/HoursList.js";
-import { MeridianList as L } from "../MeridianList/MeridianList.js";
-import { MinutesList as g } from "../MinutesList/MinutesList.js";
-import { wrapperVariants as H } from "./WrapperList.variants.js";
-import { useTimePickerContext as j } from "../../contexts/time-picker.hook.js";
-const v = ({
-  isOpen: m,
-  scrollBehavior: p,
+import { cn as c } from "../../../../utils/index.js";
+import { getHours as s, getMinutes as x } from "../../utils/index.js";
+import { HoursList as g } from "../HoursList/HoursList.js";
+import { MeridianList as b } from "../MeridianList/MeridianList.js";
+import { MinutesList as M } from "../MinutesList/MinutesList.js";
+import { useTimePickerContext as h } from "../../contexts/time-picker.hook.js";
+const T = ({
+  isOpen: d,
+  scrollBehavior: m,
   listClassName: o,
-  listItemClassName: i,
-  listItemButtonClassName: t
+  listItemClassName: e,
+  listItemButtonClassName: i
 }) => {
-  const { time: r } = j(), u = n(() => d(r), [r]), f = n(() => M(r), [r]);
-  return m ? /* @__PURE__ */ c("div", { role: "group", className: s(H()), children: [
-    /* @__PURE__ */ e(
-      x,
-      {
-        hours: u,
-        scrollBehavior: p,
-        listClassName: o,
-        listItemClassName: i,
-        listItemButtonClassName: t
-      }
-    ),
-    /* @__PURE__ */ e(
-      g,
-      {
-        minutes: f,
-        scrollBehavior: p,
-        listClassName: o,
-        listItemClassName: i,
-        listItemButtonClassName: t
-      }
-    ),
-    /* @__PURE__ */ e(
-      L,
-      {
-        listClassName: o,
-        listItemClassName: i,
-        listItemButtonClassName: t
-      }
-    )
-  ] }) : null;
+  const { time: r } = h(), p = n(() => s(r), [r]), u = n(() => x(r), [r]);
+  return d ? /* @__PURE__ */ f(
+    "div",
+    {
+      role: "group",
+      className: c(
+        "flex gap-1.5 p-2 rounded-md shadow w-full max-h-[216px] absolute mt-1 bg-white z-10 animate-in fade-in-0 zoom-in-95 dark:bg-metal-800 dark:border dark:border-metal-700"
+      ),
+      children: [
+        /* @__PURE__ */ t(
+          g,
+          {
+            hours: p,
+            scrollBehavior: m,
+            listClassName: o,
+            listItemClassName: e,
+            listItemButtonClassName: i
+          }
+        ),
+        /* @__PURE__ */ t(
+          M,
+          {
+            minutes: u,
+            scrollBehavior: m,
+            listClassName: o,
+            listItemClassName: e,
+            listItemButtonClassName: i
+          }
+        ),
+        /* @__PURE__ */ t(
+          b,
+          {
+            listClassName: o,
+            listItemClassName: e,
+            listItemButtonClassName: i
+          }
+        )
+      ]
+    }
+  ) : null;
 };
 export {
-  v as WrapperList
+  T as WrapperList
 };