@konstructio/ui 0.0.4 → 0.0.6

package/dist/components/Checkbox/Checkbox.types.d.ts

@@ -2,9 +2,11 @@ import { InputHTMLAttributes } from 'react';
 import { VariantProps } from 'class-variance-authority';
 import { checkboxVariants } from './Checkbox.variants';
 export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'checked'>, VariantProps<typeof checkboxVariants> {
+    ariaLabelledBy?: string;
     className?: string;
     defaultChecked?: boolean;
     disabled?: boolean;
+    id?: string;
     label?: string;
     labelClassName?: string;
     name?: string;

package/dist/components/Dropdown/components/List/List.js

@@ -1,25 +1,26 @@
 import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as l, useRef as p, useImperativeHandle as a } from "react";
-import { cn as u } from "../../../../utils/index.js";
-import { useNavigationUlList as c } from "../../hooks/useNavigationList.js";
-import { useDropdownContext as d } from "../../contexts/dropdown.hook.js";
+import { forwardRef as p, useRef as a, useImperativeHandle as u } from "react";
+import { cn as c } from "../../../../utils/index.js";
+import { useNavigationUlList as d } from "../../hooks/useNavigationList.js";
+import { useDropdownContext as x } from "../../contexts/dropdown.hook.js";
 import "../../contexts/dropdown.context.js";
-import { ListItem as x } from "../ListItem/ListItem.js";
-import { listVariants as v } from "./List.variants.js";
-const j = l(
-  ({ options: i, theme: o, wrapperRef: m, wrapperInputRef: s }, n) => {
-    const r = p(null), { isOpen: f } = d();
-    return a(n, () => r.current, [r]), c({ ulRef: r, wrapperRef: m, wrapperInputRef: s }), /* @__PURE__ */ e(
+import { ListItem as v } from "../ListItem/ListItem.js";
+import { listVariants as L } from "./List.variants.js";
+const C = p(
+  ({ options: i, theme: t, wrapperRef: m, wrapperInputRef: s, name: l }, n) => {
+    const r = a(null), { isOpen: f } = x();
+    return u(n, () => r.current, [r]), d({ ulRef: r, wrapperRef: m, wrapperInputRef: s }), /* @__PURE__ */ e(
       "ul",
       {
         ref: r,
+        title: l,
         role: "listbox",
-        className: u(v({ theme: o }), f ? "flex" : "hidden"),
-        children: i.map((t) => /* @__PURE__ */ e(x, { theme: o, ...t }, t.value))
+        className: c(L({ theme: t }), f ? "flex" : "hidden"),
+        children: i.map((o) => /* @__PURE__ */ e(v, { theme: t, ...o }, o.value))
       }
     );
   }
 );
 export {
-  j as List
+  C as List
 };

package/dist/components/Dropdown/components/List/List.types.d.ts

@@ -1,8 +1,6 @@
 import { ComponentRef, RefObject } from 'react';
 import { DropdownProps } from '../../Dropdown.types';
-export type ListProps = {
-    options: DropdownProps['options'];
-    theme: DropdownProps['theme'];
+export type ListProps = Pick<DropdownProps, 'name' | 'options' | 'theme'> & {
     wrapperRef: RefObject<ComponentRef<'div'> | null>;
     wrapperInputRef: RefObject<ComponentRef<'div'> | null>;
 };

package/dist/components/Dropdown/components/ListItem/ListItem.js

@@ -1,29 +1,36 @@
-import { jsx as s, jsxs as a } from "react/jsx-runtime";
-import { useCallback as c } from "react";
-import { useDropdownContext as m } from "../../contexts/dropdown.hook.js";
+import { jsxs as m, jsx as f } from "react/jsx-runtime";
+import { useRef as u, useCallback as r } from "react";
+import { useDropdownContext as d } from "../../contexts/dropdown.hook.js";
 import "../../contexts/dropdown.context.js";
-import { listItemVariants as i } from "./ListItem.variants.js";
-const d = ({ theme: n, ...e }) => {
-  const { setValue: t, toggleOpen: l } = m(), r = c(
-    (o) => {
-      t(o), l(!1);
+import { listItemVariants as p } from "./ListItem.variants.js";
+const y = ({ theme: o, ...e }) => {
+  const { setValue: n, toggleOpen: s } = d(), c = u(null), t = r(
+    (l) => {
+      n(l), s(!1);
     },
-    [t, l]
+    [n, s]
+  ), a = r(
+    (l, i) => {
+      l.key === "Enter" && t(i);
+    },
+    [t]
   );
-  return /* @__PURE__ */ s("li", { className: i({ theme: n }), role: "option", tabIndex: 0, children: /* @__PURE__ */ a(
-    "button",
+  return /* @__PURE__ */ m(
+    "li",
     {
-      type: "button",
-      role: "button",
-      className: "m-0 p-0 w-full flex items-center gap-3",
-      onClick: () => r(e),
+      ref: c,
+      role: "option",
+      className: p({ theme: o }),
+      tabIndex: 0,
+      onClick: () => t(e),
+      onKeyDown: (l) => a(l, e),
       children: [
-        e.leftIcon ? /* @__PURE__ */ s("span", { className: "w-4 h-4 flex justify-center items-center", children: e.leftIcon }) : null,
+        e.leftIcon ? /* @__PURE__ */ f("span", { className: "w-4 h-4 flex justify-center items-center", children: e.leftIcon }) : null,
         e.label
       ]
     }
-  ) });
+  );
 };
 export {
-  d as ListItem
+  y as ListItem
 };

package/dist/components/Dropdown/components/ListItem/ListItem.variants.js

@@ -1,6 +1,17 @@
 import { c as e } from "../../../../index-BNmRGtA6.js";
-const o = e(
-  ["cursor-pointer", "py-1", "px-2", "h-full", "focus-visible:outline-none"],
+const t = e(
+  [
+    "cursor-pointer",
+    "py-2",
+    "px-2",
+    "h-full",
+    "focus-visible:outline-none",
+    "m-0",
+    "w-full",
+    "flex",
+    "items-center",
+    "gap-3"
+  ],
   {
     variants: {
       theme: {
@@ -15,5 +26,5 @@ const o = e(
   }
 );
 export {
-  o as listItemVariants
+  t as listItemVariants
 };

package/dist/components/Dropdown/components/Wrapper.js

@@ -1,5 +1,5 @@
-import { jsxs as a, jsx as t } from "react/jsx-runtime";
-import { forwardRef as D, useId as F, useRef as b, useImperativeHandle as L, useEffect as m } from "react";
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import { forwardRef as D, useId as F, useRef as N, useImperativeHandle as L, useEffect as f } from "react";
 import { cn as $ } from "../../../utils/index.js";
 import "../../../contexts/theme.context.js";
 import { useTheme as A } from "../../../contexts/theme.hook.js";
@@ -11,52 +11,54 @@ import "../contexts/dropdown.context.js";
 import { List as q } from "./List/List.js";
 import { C as z } from "../../../chevron-up-CvquEaNg.js";
 const _ = D(
-  ({ theme: R, label: f, placeholder: g, name: i, options: l, defaultValue: c }, O) => {
-    const p = F(), r = b(null), u = b(null), { wrapperRef: n, wrapperInputRef: d, handleOpen: j, handleOpenIfClosed: E } = U({ ulRef: u }), { isOpen: h, value: e, setValue: x, toggleOpen: w } = W(), { theme: T } = A(), v = R ?? T, C = i ? `${p}-${i}` : p;
-    L(O, () => r.current, [r]), m(() => {
+  ({ theme: R, label: p, placeholder: g, name: o, options: a, defaultValue: c }, O) => {
+    const d = F(), r = N(null), u = N(null), { wrapperRef: n, wrapperInputRef: h, handleOpen: j, handleOpenIfClosed: y } = U({ ulRef: u }), { isOpen: x, value: e, setValue: w, toggleOpen: b } = W(), { theme: E } = A(), v = R ?? E, i = o ? `${d}-${o}` : d;
+    L(O, () => r.current, [r]), f(() => {
       r.current && (r.current.value = e ? e.value : "");
-    }, [e]), m(() => {
+    }, [e]), f(() => {
       if (c) {
-        const o = l.find(
-          (s) => s.value === c
+        const s = a.find(
+          (l) => l.value === c
         );
-        o && x(o);
+        s && w(s);
       }
-    }, [c, l, x]), m(() => {
-      var s;
-      const o = new AbortController();
-      return (s = n.current) == null || s.addEventListener("focusout", (y) => {
-        var N;
-        const I = y.relatedTarget;
-        (!I || !((N = n.current) != null && N.contains(I))) && w(!1);
+    }, [c, a, w]), f(() => {
+      var l;
+      const s = new AbortController();
+      return (l = n.current) == null || l.addEventListener("focusout", (k) => {
+        var I;
+        const C = k.relatedTarget;
+        (!C || !((I = n.current) != null && I.contains(C))) && b(!1);
       }), () => {
-        o.abort();
+        s.abort();
       };
-    }, [w, n]);
-    const k = () => e != null && e.leftIcon ? /* @__PURE__ */ t("span", { className: "w-4 h-4 flex justify-center items-center", children: e.leftIcon }) : null;
-    return /* @__PURE__ */ a("div", { ref: n, className: "flex flex-col w-full relative", children: [
-      f ? /* @__PURE__ */ t(
+    }, [b, n]);
+    const T = () => e != null && e.leftIcon ? /* @__PURE__ */ t("span", { className: "w-4 h-4 flex justify-center items-center", children: e.leftIcon }) : null;
+    return /* @__PURE__ */ m("div", { ref: n, className: "flex flex-col w-full relative", children: [
+      p ? /* @__PURE__ */ t(
         "label",
         {
+          id: i,
           className: "m-2 cursor-pointer",
-          htmlFor: C,
-          onClick: E,
-          children: f
+          htmlFor: i,
+          onClick: y,
+          children: p
         }
       ) : null,
-      /* @__PURE__ */ a(
+      /* @__PURE__ */ m(
         "div",
         {
-          ref: d,
-          id: C,
+          ref: h,
+          id: i,
           className: H({ theme: v }),
           role: "combobox",
           onClick: j,
-          "aria-expanded": h,
+          "aria-expanded": x,
           tabIndex: 0,
+          "aria-labelledby": i,
           children: [
-            /* @__PURE__ */ t("span", { className: "text-base text-inherit", children: e ? /* @__PURE__ */ a("span", { className: "flex gap-3 items-center", children: [
-              k(),
+            /* @__PURE__ */ t("span", { className: "text-base text-inherit", children: e ? /* @__PURE__ */ m("span", { className: "flex gap-3 items-center", children: [
+              T(),
               e.label
             ] }) : g }),
             /* @__PURE__ */ t(
@@ -64,21 +66,31 @@ const _ = D(
               {
                 className: $(
                   "w-4 h-4 text-inherit transition-all duration-50",
-                  h ? "rotate-0" : "rotate-180"
+                  x ? "rotate-0" : "rotate-180"
                 )
               }
             )
           ]
         }
       ),
-      /* @__PURE__ */ t("input", { ref: r, type: "text", name: i, className: "hidden" }),
+      /* @__PURE__ */ t(
+        "input",
+        {
+          ref: r,
+          type: "text",
+          name: o,
+          className: "hidden",
+          "aria-hidden": "true"
+        }
+      ),
       /* @__PURE__ */ t(
         q,
         {
           ref: u,
+          name: o,
           wrapperRef: n,
-          wrapperInputRef: d,
-          options: l,
+          wrapperInputRef: h,
+          options: a,
           theme: v
         }
       )

package/dist/components/Modal/Modal.js

@@ -1,9 +1,9 @@
 import "react/jsx-runtime";
-import "../../index-OOfdXoxx.js";
+import "../../index-BaNV0qac.js";
 import "./components/Body/Body.js";
 import "./components/Footer/Footer.js";
 import "./components/Header/Header.js";
-import { M as d } from "../../Modal-Bg9UG35z.js";
+import { M as d } from "../../Modal-Ca3bkvvt.js";
 import "./hooks/useModal.js";
 export {
   d as Modal

package/dist/components/Modal/components/Wrapper/Wrapper.js

@@ -1,8 +1,8 @@
 import "react/jsx-runtime";
 import "react";
-import { W as b } from "../../../../Modal-Bg9UG35z.js";
+import { W as b } from "../../../../Modal-Ca3bkvvt.js";
 import "../../../../Combination-Cmu9JRkv.js";
-import "../../../../index-ffjBR8Av.js";
+import "../../../../index-BtibbG81.js";
 import "../../../../contexts/theme.context.js";
 import "../../../../contexts/theme.hook.js";
 import "../../../../js.cookie-OLEfuq_g.js";

package/dist/components/Modal/components/index.js

@@ -1,7 +1,7 @@
 import { Body as e } from "./Body/Body.js";
 import { Footer as t } from "./Footer/Footer.js";
 import { Header as m } from "./Header/Header.js";
-import { W as a } from "../../../Modal-Bg9UG35z.js";
+import { W as a } from "../../../Modal-Ca3bkvvt.js";
 export {
   e as Body,
   t as Footer,

package/dist/components/NumberInput/NumberInput.js

@@ -1,45 +1,45 @@
 import { jsxs as y, jsx as u } from "react/jsx-runtime";
-import p, { forwardRef as v, useId as _, useState as E, useCallback as w } from "react";
-import { R as x } from "../../index-ffjBR8Av.js";
+import p, { forwardRef as b, useId as _, useState as E, useCallback as w } from "react";
+import { R as j } from "../../index-BtibbG81.js";
 import "../../contexts/theme.context.js";
 import { useTheme as T } from "../../contexts/theme.hook.js";
 import "../../js.cookie-OLEfuq_g.js";
-import { labelVariants as $, buttonVariants as j, numberInputVariants as L } from "./NumberInput.variants.js";
+import { labelVariants as $, buttonVariants as x, numberInputVariants as L } from "./NumberInput.variants.js";
 import { P as a } from "../../index-D68N8v8R.js";
 function h() {
   return h = Object.assign || function(e) {
-    for (var o = 1; o < arguments.length; o++) {
-      var n = arguments[o];
-      for (var t in n)
-        Object.prototype.hasOwnProperty.call(n, t) && (e[t] = n[t]);
+    for (var i = 1; i < arguments.length; i++) {
+      var r = arguments[i];
+      for (var t in r)
+        Object.prototype.hasOwnProperty.call(r, t) && (e[t] = r[t]);
     }
     return e;
   }, h.apply(this, arguments);
 }
-function W(e, o) {
+function W(e, i) {
   if (e == null) return {};
-  var n = V(e, o), t, r;
+  var r = V(e, i), t, n;
   if (Object.getOwnPropertySymbols) {
-    var i = Object.getOwnPropertySymbols(e);
-    for (r = 0; r < i.length; r++)
-      t = i[r], !(o.indexOf(t) >= 0) && Object.prototype.propertyIsEnumerable.call(e, t) && (n[t] = e[t]);
+    var o = Object.getOwnPropertySymbols(e);
+    for (n = 0; n < o.length; n++)
+      t = o[n], !(i.indexOf(t) >= 0) && Object.prototype.propertyIsEnumerable.call(e, t) && (r[t] = e[t]);
   }
-  return n;
+  return r;
 }
-function V(e, o) {
+function V(e, i) {
   if (e == null) return {};
-  var n = {}, t = Object.keys(e), r, i;
-  for (i = 0; i < t.length; i++)
-    r = t[i], !(o.indexOf(r) >= 0) && (n[r] = e[r]);
-  return n;
+  var r = {}, t = Object.keys(e), n, o;
+  for (o = 0; o < t.length; o++)
+    n = t[o], !(i.indexOf(n) >= 0) && (r[n] = e[n]);
+  return r;
 }
-var d = v(function(e, o) {
-  var n = e.color, t = n === void 0 ? "currentColor" : n, r = e.size, i = r === void 0 ? 24 : r, f = W(e, ["color", "size"]);
+var d = b(function(e, i) {
+  var r = e.color, t = r === void 0 ? "currentColor" : r, n = e.size, o = n === void 0 ? 24 : n, f = W(e, ["color", "size"]);
   return /* @__PURE__ */ p.createElement("svg", h({
-    ref: o,
+    ref: i,
     xmlns: "http://www.w3.org/2000/svg",
-    width: i,
-    height: i,
+    width: o,
+    height: o,
     viewBox: "0 0 24 24",
     fill: "none",
     stroke: t,
@@ -58,40 +58,40 @@ d.propTypes = {
   size: a.oneOfType([a.string, a.number])
 };
 d.displayName = "Minus";
-function b() {
-  return b = Object.assign || function(e) {
-    for (var o = 1; o < arguments.length; o++) {
-      var n = arguments[o];
-      for (var t in n)
-        Object.prototype.hasOwnProperty.call(n, t) && (e[t] = n[t]);
+function v() {
+  return v = Object.assign || function(e) {
+    for (var i = 1; i < arguments.length; i++) {
+      var r = arguments[i];
+      for (var t in r)
+        Object.prototype.hasOwnProperty.call(r, t) && (e[t] = r[t]);
     }
     return e;
-  }, b.apply(this, arguments);
+  }, v.apply(this, arguments);
 }
-function M(e, o) {
+function M(e, i) {
   if (e == null) return {};
-  var n = R(e, o), t, r;
+  var r = R(e, i), t, n;
   if (Object.getOwnPropertySymbols) {
-    var i = Object.getOwnPropertySymbols(e);
-    for (r = 0; r < i.length; r++)
-      t = i[r], !(o.indexOf(t) >= 0) && Object.prototype.propertyIsEnumerable.call(e, t) && (n[t] = e[t]);
+    var o = Object.getOwnPropertySymbols(e);
+    for (n = 0; n < o.length; n++)
+      t = o[n], !(i.indexOf(t) >= 0) && Object.prototype.propertyIsEnumerable.call(e, t) && (r[t] = e[t]);
   }
-  return n;
+  return r;
 }
-function R(e, o) {
+function R(e, i) {
   if (e == null) return {};
-  var n = {}, t = Object.keys(e), r, i;
-  for (i = 0; i < t.length; i++)
-    r = t[i], !(o.indexOf(r) >= 0) && (n[r] = e[r]);
-  return n;
+  var r = {}, t = Object.keys(e), n, o;
+  for (o = 0; o < t.length; o++)
+    n = t[o], !(i.indexOf(n) >= 0) && (r[n] = e[n]);
+  return r;
 }
-var O = v(function(e, o) {
-  var n = e.color, t = n === void 0 ? "currentColor" : n, r = e.size, i = r === void 0 ? 24 : r, f = M(e, ["color", "size"]);
-  return /* @__PURE__ */ p.createElement("svg", b({
-    ref: o,
+var O = b(function(e, i) {
+  var r = e.color, t = r === void 0 ? "currentColor" : r, n = e.size, o = n === void 0 ? 24 : n, f = M(e, ["color", "size"]);
+  return /* @__PURE__ */ p.createElement("svg", v({
+    ref: i,
     xmlns: "http://www.w3.org/2000/svg",
-    width: i,
-    height: i,
+    width: o,
+    height: o,
     viewBox: "0 0 24 24",
     fill: "none",
     stroke: t,
@@ -115,45 +115,45 @@ O.propTypes = {
   size: a.oneOfType([a.string, a.number])
 };
 O.displayName = "Plus";
-const J = v(
+const J = b(
   ({
     className: e,
-    init: o,
-    label: n,
+    init: i,
+    label: r,
     max: t = -1 / 0,
-    min: r = 1 / 0,
-    name: i,
+    min: n = 1 / 0,
+    name: o,
     theme: f,
     onChange: s
   }, P) => {
-    const { theme: k } = T(), m = f ?? k, I = _(), [c, g] = E(() => o || 0), N = w(() => {
+    const { theme: k } = T(), m = f ?? k, I = _(), [c, g] = E(() => i || 0), N = w(() => {
       let l = 0;
-      r === 1 / 0 ? l = c - 1 : l = Math.max(r, c - 1), g(l), s == null || s(l);
-    }, [c, r, s]), z = w(() => {
+      n === 1 / 0 ? l = c - 1 : l = Math.max(n, c - 1), g(l), s == null || s(l);
+    }, [c, n, s]), z = w(() => {
       let l = 0;
       t === -1 / 0 ? l = c + 1 : l = Math.min(t, c + 1), g(l), s == null || s(l);
     }, [c, t, s]);
     return /* @__PURE__ */ y("div", { className: "flex flex-col gap-1", children: [
-      n ? /* @__PURE__ */ u(
+      r ? /* @__PURE__ */ u(
         "label",
         {
-          htmlFor: i ?? I,
+          htmlFor: o ?? I,
           className: $({
             theme: m
           }),
-          children: n
+          children: r
         }
       ) : null,
-      /* @__PURE__ */ y("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ y("div", { className: "flex items-center", role: "presentation", children: [
         /* @__PURE__ */ y(
           "button",
           {
             type: "button",
             onClick: N,
-            className: j({ theme: m, button: "rigth" }),
+            className: x({ theme: m, button: "rigth" }),
             children: [
               /* @__PURE__ */ u(d, { className: "w-4 h-4" }),
-              /* @__PURE__ */ u(x, { children: "Decrement" })
+              /* @__PURE__ */ u(j, { children: "Decrement" })
             ]
           }
         ),
@@ -163,10 +163,10 @@ const J = v(
             ref: P,
             type: "number",
             value: c,
-            name: i,
+            name: o,
             className: L({ className: e, theme: m }),
             readOnly: !0,
-            role: "textbox"
+            "aria-label": r
           }
         ),
         /* @__PURE__ */ y(
@@ -174,10 +174,10 @@ const J = v(
           {
             type: "button",
             onClick: z,
-            className: j({ theme: m, button: "left" }),
+            className: x({ theme: m, button: "left" }),
             children: [
               /* @__PURE__ */ u(O, { className: "w-4 h-4" }),
-              /* @__PURE__ */ u(x, { children: "Increment" })
+              /* @__PURE__ */ u(j, { children: "Increment" })
             ]
           }
         )

package/dist/components/Range/Range.js

@@ -1,6 +1,6 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
 import { forwardRef as R, useRef as V, useState as v, useImperativeHandle as T, useEffect as b, useCallback as j } from "react";
-import { R as k, T as w, a as y, b as l } from "../../index-Ci9Yg4G1.js";
+import { R as k, T as w, a as y, b as l } from "../../index-z-AJyzdv.js";
 import { cn as C } from "../../utils/index.js";
 import "../../contexts/theme.context.js";
 import { useTheme as S } from "../../contexts/theme.hook.js";

package/dist/components/Slider/Slider.js

@@ -1,6 +1,6 @@
 import { jsxs as n, jsx as t } from "react/jsx-runtime";
 import { forwardRef as N, useRef as v, useState as T, useImperativeHandle as V, useEffect as b, useCallback as R } from "react";
-import { R as g, T as j, b as k } from "../../index-Ci9Yg4G1.js";
+import { R as g, T as j, b as k } from "../../index-z-AJyzdv.js";
 import "../../contexts/theme.context.js";
 import { useTheme as w } from "../../contexts/theme.hook.js";
 import "../../js.cookie-OLEfuq_g.js";