@konstructio/ui 0.1.0-alpha.20 → 0.1.0-alpha.22

package/dist/components/Toast/Toast.js

@@ -6,7 +6,7 @@ import { P as L, r as Se, d as Ie } from "../../index-BCGvACM9.js";
 import { c as Ne, a as Ae, b, u as Fe } from "../../index-Cq1I1cG9.js";
 import { c as _e } from "../../index-rUBNhTeF.js";
 import { B as De, R as Le, P as Me } from "../../index-DNRcvRTB.js";
-import { P as Oe } from "../../index-Dm-ooN_M.js";
+import { P as Oe } from "../../index-j2KyU-zG.js";
 import { u as $ } from "../../index-DwYXX2sM.js";
 import { V as ie, R as ke } from "../../index--EmNlyHx.js";
 import { cn as q } from "../../utils/index.js";
@@ -20,7 +20,7 @@ var Z = "ToastProvider", [ee, Xe, $e] = _e("Toast"), [ce, Rt] = Ne("Toast", [$e]
     swipeDirection: u = "right",
     swipeThreshold: d = 50,
     children: f
-  } = e, [m, v] = s.useState(null), [n, h] = s.useState(0), w = s.useRef(!1), S = s.useRef(!1);
+  } = e, [m, v] = s.useState(null), [n, y] = s.useState(0), w = s.useRef(!1), S = s.useRef(!1);
   return o.trim() || console.error(
     `Invalid prop \`label\` supplied to \`${Z}\`. Expected non-empty \`string\`.`
   ), /* @__PURE__ */ c(ee.Provider, { scope: r, children: /* @__PURE__ */ c(
@@ -34,8 +34,8 @@ var Z = "ToastProvider", [ee, Xe, $e] = _e("Toast"), [ce, Rt] = Ne("Toast", [$e]
       toastCount: n,
       viewport: m,
       onViewportChange: v,
-      onToastAdd: s.useCallback(() => h((g) => g + 1), []),
-      onToastRemove: s.useCallback(() => h((g) => g - 1), []),
+      onToastAdd: s.useCallback(() => y((g) => g + 1), []),
+      onToastRemove: s.useCallback(() => y((g) => g - 1), []),
       isFocusedToastEscapeKeyDownRef: w,
       isClosePausedRef: S,
       children: f
@@ -50,7 +50,7 @@ var le = "ToastViewport", Ye = ["F8"], G = "toast.viewportPause", J = "toast.vie
       hotkey: t = Ye,
       label: u = "Notifications ({hotkey})",
       ...d
-    } = e, f = U(le, o), m = Xe(o), v = s.useRef(null), n = s.useRef(null), h = s.useRef(null), w = s.useRef(null), S = ae(r, w, f.onViewportChange), g = t.join("+").replace(/Key/g, "").replace(/Digit/g, ""), R = f.toastCount > 0;
+    } = e, f = U(le, o), m = Xe(o), v = s.useRef(null), n = s.useRef(null), y = s.useRef(null), w = s.useRef(null), S = ae(r, w, f.onViewportChange), g = t.join("+").replace(/Key/g, "").replace(/Digit/g, ""), R = f.toastCount > 0;
     s.useEffect(() => {
       const i = (C) => {
         var T;
@@ -72,19 +72,19 @@ var le = "ToastViewport", Ye = ["F8"], G = "toast.viewportPause", J = "toast.vie
           }
         }, E = (P) => {
           !i.contains(P.relatedTarget) && T();
-        }, y = () => {
+        }, h = () => {
           i.contains(document.activeElement) || T();
         };
-        return i.addEventListener("focusin", p), i.addEventListener("focusout", E), i.addEventListener("pointermove", p), i.addEventListener("pointerleave", y), window.addEventListener("blur", p), window.addEventListener("focus", T), () => {
-          i.removeEventListener("focusin", p), i.removeEventListener("focusout", E), i.removeEventListener("pointermove", p), i.removeEventListener("pointerleave", y), window.removeEventListener("blur", p), window.removeEventListener("focus", T);
+        return i.addEventListener("focusin", p), i.addEventListener("focusout", E), i.addEventListener("pointermove", p), i.addEventListener("pointerleave", h), window.addEventListener("blur", p), window.addEventListener("focus", T), () => {
+          i.removeEventListener("focusin", p), i.removeEventListener("focusout", E), i.removeEventListener("pointermove", p), i.removeEventListener("pointerleave", h), window.removeEventListener("blur", p), window.removeEventListener("focus", T);
         };
       }
     }, [R, f.isClosePausedRef]);
     const l = s.useCallback(
       ({ tabbingDirection: i }) => {
         const p = m().map((T) => {
-          const E = T.ref.current, y = [E, ...nt(E)];
-          return i === "forwards" ? y : y.reverse();
+          const E = T.ref.current, h = [E, ...nt(E)];
+          return i === "forwards" ? h : h.reverse();
         });
         return (i === "forwards" ? p.reverse() : p).flat();
       },
@@ -94,16 +94,16 @@ var le = "ToastViewport", Ye = ["F8"], G = "toast.viewportPause", J = "toast.vie
       const i = w.current;
       if (i) {
         const C = (p) => {
-          var y, P, N;
+          var h, P, N;
           const T = p.altKey || p.ctrlKey || p.metaKey;
           if (p.key === "Tab" && !T) {
             const M = document.activeElement, F = p.shiftKey;
             if (p.target === i && F) {
-              (y = n.current) == null || y.focus();
+              (h = n.current) == null || h.focus();
               return;
             }
             const A = l({ tabbingDirection: F ? "backwards" : "forwards" }), K = A.findIndex((a) => a === M);
-            z(A.slice(K + 1)) ? p.preventDefault() : F ? (P = n.current) == null || P.focus() : (N = h.current) == null || N.focus();
+            z(A.slice(K + 1)) ? p.preventDefault() : F ? (P = n.current) == null || P.focus() : (N = y.current) == null || N.focus();
           }
         };
         return i.addEventListener("keydown", C), () => i.removeEventListener("keydown", C);
@@ -133,7 +133,7 @@ var le = "ToastViewport", Ye = ["F8"], G = "toast.viewportPause", J = "toast.vie
           R && /* @__PURE__ */ c(
             Q,
             {
-              ref: h,
+              ref: y,
               onFocusFromOutsideViewport: () => {
                 const i = l({
                   tabbingDirection: "backwards"
@@ -154,7 +154,6 @@ var fe = "ToastFocusProxy", Q = s.forwardRef(
     return /* @__PURE__ */ c(
       ie,
       {
-        "aria-hidden": !0,
         tabIndex: 0,
         ...u,
         ref: r,
@@ -190,15 +189,15 @@ var V = "Toast", Be = "toast.swipeStart", je = "toast.swipeMove", qe = "toast.sw
           n.currentTarget.setAttribute("data-swipe", "start");
         }),
         onSwipeMove: b(e.onSwipeMove, (n) => {
-          const { x: h, y: w } = n.detail.delta;
-          n.currentTarget.setAttribute("data-swipe", "move"), n.currentTarget.style.setProperty("--radix-toast-swipe-move-x", `${h}px`), n.currentTarget.style.setProperty("--radix-toast-swipe-move-y", `${w}px`);
+          const { x: y, y: w } = n.detail.delta;
+          n.currentTarget.setAttribute("data-swipe", "move"), n.currentTarget.style.setProperty("--radix-toast-swipe-move-x", `${y}px`), n.currentTarget.style.setProperty("--radix-toast-swipe-move-y", `${w}px`);
         }),
         onSwipeCancel: b(e.onSwipeCancel, (n) => {
           n.currentTarget.setAttribute("data-swipe", "cancel"), n.currentTarget.style.removeProperty("--radix-toast-swipe-move-x"), n.currentTarget.style.removeProperty("--radix-toast-swipe-move-y"), n.currentTarget.style.removeProperty("--radix-toast-swipe-end-x"), n.currentTarget.style.removeProperty("--radix-toast-swipe-end-y");
         }),
         onSwipeEnd: b(e.onSwipeEnd, (n) => {
-          const { x: h, y: w } = n.detail.delta;
-          n.currentTarget.setAttribute("data-swipe", "end"), n.currentTarget.style.removeProperty("--radix-toast-swipe-move-x"), n.currentTarget.style.removeProperty("--radix-toast-swipe-move-y"), n.currentTarget.style.setProperty("--radix-toast-swipe-end-x", `${h}px`), n.currentTarget.style.setProperty("--radix-toast-swipe-end-y", `${w}px`), v(!1);
+          const { x: y, y: w } = n.detail.delta;
+          n.currentTarget.setAttribute("data-swipe", "end"), n.currentTarget.style.removeProperty("--radix-toast-swipe-move-x"), n.currentTarget.style.removeProperty("--radix-toast-swipe-move-y"), n.currentTarget.style.setProperty("--radix-toast-swipe-end-x", `${y}px`), n.currentTarget.style.setProperty("--radix-toast-swipe-end-y", `${w}px`), v(!1);
         })
       }
     ) });
@@ -219,12 +218,12 @@ var [Ge, Je] = ce(V, {
       onEscapeKeyDown: m,
       onPause: v,
       onResume: n,
-      onSwipeStart: h,
+      onSwipeStart: y,
       onSwipeMove: w,
       onSwipeCancel: S,
       onSwipeEnd: g,
       ...R
-    } = e, l = U(V, o), [i, C] = s.useState(null), p = ae(r, (a) => C(a)), T = s.useRef(null), E = s.useRef(null), y = u || l.duration, P = s.useRef(0), N = s.useRef(y), M = s.useRef(0), { onToastAdd: F, onToastRemove: Y } = l, _ = $(() => {
+    } = e, l = U(V, o), [i, C] = s.useState(null), p = ae(r, (a) => C(a)), T = s.useRef(null), E = s.useRef(null), h = u || l.duration, P = s.useRef(0), N = s.useRef(h), M = s.useRef(0), { onToastAdd: F, onToastRemove: Y } = l, _ = $(() => {
       var x;
       (i == null ? void 0 : i.contains(document.activeElement)) && ((x = l.viewport) == null || x.focus()), f();
     }), A = s.useCallback(
@@ -246,9 +245,9 @@ var [Ge, Je] = ce(V, {
           a.removeEventListener(G, I), a.removeEventListener(J, x);
         };
       }
-    }, [l.viewport, y, v, n, A]), s.useEffect(() => {
-      d && !l.isClosePausedRef.current && A(y);
-    }, [d, y, l.isClosePausedRef, A]), s.useEffect(() => (F(), () => Y()), [F, Y]);
+    }, [l.viewport, h, v, n, A]), s.useEffect(() => {
+      d && !l.isClosePausedRef.current && A(h);
+    }, [d, h, l.isClosePausedRef, A]), s.useEffect(() => (F(), () => Y()), [F, Y]);
     const K = s.useMemo(() => i ? Ce(i) : null, [i]);
     return l.viewport ? /* @__PURE__ */ D(se, { children: [
       K && /* @__PURE__ */ c(
@@ -257,7 +256,6 @@ var [Ge, Je] = ce(V, {
           __scopeToast: o,
           role: "status",
           "aria-live": t === "foreground" ? "assertive" : "polite",
-          "aria-atomic": !0,
           children: K
         }
       ),
@@ -272,9 +270,6 @@ var [Ge, Je] = ce(V, {
             children: /* @__PURE__ */ c(
               L.li,
               {
-                role: "status",
-                "aria-live": "off",
-                "aria-atomic": !0,
                 tabIndex: 0,
                 "data-state": d ? "open" : "closed",
                 "data-swipe-direction": l.swipeDirection,
@@ -292,7 +287,7 @@ var [Ge, Je] = ce(V, {
                   const x = a.clientX - T.current.x, I = a.clientY - T.current.y, O = !!E.current, k = ["left", "right"].includes(l.swipeDirection), H = ["left", "up"].includes(l.swipeDirection) ? Math.min : Math.max, Pe = k ? H(0, x) : 0, xe = k ? 0 : H(0, I), B = a.pointerType === "touch" ? 10 : 2, W = { x: Pe, y: xe }, te = { originalEvent: a, delta: W };
                   O ? (E.current = W, X(je, w, te, {
                     discrete: !1
-                  })) : ne(W, l.swipeDirection, B) ? (E.current = W, X(Be, h, te, {
+                  })) : ne(W, l.swipeDirection, B) ? (E.current = W, X(Be, y, te, {
                     discrete: !1
                   }), a.target.setPointerCapture(a.pointerId)) : (Math.abs(x) > B || Math.abs(I) > B) && (T.current = null);
                 }),
@@ -349,16 +344,16 @@ Te.displayName = tt;
 var ve = "ToastAction", we = s.forwardRef(
   (e, r) => {
     const { altText: o, ...t } = e;
-    return o.trim() ? /* @__PURE__ */ c(ye, { altText: o, asChild: !0, children: /* @__PURE__ */ c(he, { ...t, ref: r }) }) : (console.error(
+    return o.trim() ? /* @__PURE__ */ c(he, { altText: o, asChild: !0, children: /* @__PURE__ */ c(ye, { ...t, ref: r }) }) : (console.error(
       `Invalid prop \`altText\` supplied to \`${ve}\`. Expected non-empty \`string\`.`
     ), null);
   }
 );
 we.displayName = ve;
-var Ee = "ToastClose", he = s.forwardRef(
+var Ee = "ToastClose", ye = s.forwardRef(
   (e, r) => {
     const { __scopeToast: o, ...t } = e, u = Je(Ee, o);
-    return /* @__PURE__ */ c(ye, { asChild: !0, children: /* @__PURE__ */ c(
+    return /* @__PURE__ */ c(he, { asChild: !0, children: /* @__PURE__ */ c(
       L.button,
       {
         type: "button",
@@ -369,8 +364,8 @@ var Ee = "ToastClose", he = s.forwardRef(
     ) });
   }
 );
-he.displayName = Ee;
-var ye = s.forwardRef((e, r) => {
+ye.displayName = Ee;
+var he = s.forwardRef((e, r) => {
   const { __scopeToast: o, altText: t, ...u } = e;
   return /* @__PURE__ */ c(
     L.div,
@@ -443,7 +438,7 @@ const bt = ({
   showCloseButton: m = !0,
   closeButtonClassName: v,
   className: n,
-  open: h = !1,
+  open: y = !1,
   setOpen: w
 }) => {
   const S = Re(0);
@@ -458,7 +453,7 @@ const bt = ({
       {
         className: q(Ke({ className: n })),
         "data-theme": f,
-        open: h,
+        open: y,
         onOpenChange: w,
         children: [
           /* @__PURE__ */ c(ct, { asChild: !0, className: o, children: g }),

package/dist/{index-BNU3RH-3.js → index-CT6_TaZk.js}

@@ -2,7 +2,7 @@ import { jsx as i, jsxs as w } from "react/jsx-runtime";
 import * as l from "react";
 import { c as M, b as x } from "./index-Cq1I1cG9.js";
 import { u as A, b as I } from "./index-B5MIi2tR.js";
-import { c as v, R as $, P as L, O as F, W as G, C as W, T as j, d as B, b as D, e as Y } from "./index-DLYwlPRZ.js";
+import { c as v, R as $, P as L, O as F, W as G, C as W, T as j, d as B, b as D, e as Y } from "./index-aR9z1Fe3.js";
 import { Button as k } from "./components/Button/Button.js";
 import { cn as q } from "./utils/index.js";
 var f = "AlertDialog", [H, se] = M(f, [

package/dist/{index-CvfCCTEO.js → index-DdbImHmO.js}

@@ -7,7 +7,7 @@ import { P as C } from "./index-BCGvACM9.js";
 import { u as ue } from "./index-DwYXX2sM.js";
 import { u as k } from "./index-BdMNhZnh.js";
 import { jsx as l } from "react/jsx-runtime";
-import { P as le } from "./index-Dm-ooN_M.js";
+import { P as le } from "./index-j2KyU-zG.js";
 var N = "rovingFocusGroup.onEntryFocus", de = { bubbles: !1, cancelable: !0 }, h = "RovingFocusGroup", [D, V, fe] = ce(h), [ve, U] = K(
   h,
   [fe]

package/dist/{index-DLYwlPRZ.js → index-aR9z1Fe3.js}

@@ -6,7 +6,7 @@ import { P as be, D as Ce } from "./index-DNRcvRTB.js";
 import { P as N } from "./index-BCGvACM9.js";
 import { u as j } from "./index-DwYXX2sM.js";
 import { jsx as f, jsxs as q, Fragment as B } from "react/jsx-runtime";
-import { P as U } from "./index-Dm-ooN_M.js";
+import { P as U } from "./index-j2KyU-zG.js";
 import { R as Ae } from "./Combination-VYaRRJBZ.js";
 var x = "focusScope.autoFocusOnMount", L = "focusScope.autoFocusOnUnmount", V = { bubbles: !1, cancelable: !0 }, Re = "FocusScope", Q = i.forwardRef((e, n) => {
   const {

package/dist/{index-Dm-ooN_M.js → index-j2KyU-zG.js}

@@ -36,7 +36,7 @@ function P(n) {
     if (e) {
       let o;
       const m = e.ownerDocument.defaultView ?? window, d = (u) => {
-        const g = l(t.current).includes(u.animationName);
+        const g = l(t.current).includes(CSS.escape(u.animationName));
         if (u.target === e && g && (s("ANIMATION_END"), !i.current)) {
           const O = e.style.animationFillMode;
           e.style.animationFillMode = "forwards", o = m.setTimeout(() => {

package/dist/{index-Dkt8F6CZ.js → index-oBRTQ54R.js}

@@ -1,4 +1,4 @@
-import { R as Ee, P as ke, O as Se, C as Ie } from "./index-DLYwlPRZ.js";
+import { R as Ee, P as ke, O as Se, C as Ie } from "./index-aR9z1Fe3.js";
 import * as n from "react";
 import { P as C } from "./index-BCGvACM9.js";
 import { u as P } from "./index-Cs8Lv8Wj.js";

package/dist/index.d.ts

@@ -202,8 +202,11 @@ export declare const DropdownButton: FC<Props>;
 
 declare interface DropdownProps extends VariantProps<typeof dropdownVariants>, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
     className?: string;
+    error?: string;
+    helperText?: string;
     iconClassName?: string;
     isLoading?: boolean;
+    isRequired?: boolean;
     label?: string;
     labelClassName?: string;
     listClassName?: string;
@@ -216,7 +219,9 @@ declare interface DropdownProps extends VariantProps<typeof dropdownVariants>, O
     onChange?: OnChangeFn;
 }
 
-declare const dropdownVariants: (props?: ClassProp | undefined) => string;
+declare const dropdownVariants: (props?: ({
+    hasError?: boolean | null | undefined;
+} & ClassProp) | undefined) => string;
 
 export declare const Filter: FilterComponentProps;
 

package/dist/package.json

@@ -2,7 +2,7 @@
   "name": "@konstructio/ui",
   "description": "A set of reusable and customizable React components built for konstruct.io",
   "private": false,
-  "version": "0.1.0-alpha.19",
+  "version": "0.1.0-alpha.21",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",
@@ -55,14 +55,14 @@
     "test:watch": "vitest dev"
   },
   "dependencies": {
-    "@radix-ui/react-alert-dialog": "^1.1.14",
-    "@radix-ui/react-checkbox": "^1.3.2",
-    "@radix-ui/react-dialog": "^1.1.14",
-    "@radix-ui/react-slider": "^1.3.5",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-slider": "^1.3.6",
     "@radix-ui/react-slot": "^1.2.3",
-    "@radix-ui/react-switch": "^1.2.5",
-    "@radix-ui/react-tabs": "^1.1.12",
-    "@radix-ui/react-toast": "^1.2.14",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toast": "^1.2.15",
     "@radix-ui/react-visually-hidden": "^1.2.3",
     "chart.js": "^4.5.0",
     "class-variance-authority": "^0.7.1",
@@ -111,8 +111,8 @@
     "@storybook/addon-docs": "^9.1.2",
     "@storybook/addon-links": "^9.1.2",
     "@storybook/react-vite": "^9.1.2",
-    "@tailwindcss/vite": "^4.1.11",
-    "@testing-library/jest-dom": "^6.6.4",
+    "@tailwindcss/vite": "^4.1.12",
+    "@testing-library/jest-dom": "^6.7.0",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest-axe": "^3.5.9",
@@ -138,7 +138,7 @@
     "prettier": "^3.6.2",
     "rimraf": "^6.0.1",
     "storybook": "^9.1.2",
-    "tailwindcss": "^4.1.11",
+    "tailwindcss": "^4.1.12",
     "ts-node": "^10.9.2",
     "typescript": "^5.9.2",
     "vite": "^6.3.5",