@kolking/react-ui 1.9.0 → 1.9.2

package/dist/components/Lightbox/Lightbox.js

@@ -1,27 +1,27 @@
-import { jsxs as b, jsx as n } from "react/jsx-runtime";
-import { useId as j, useRef as D, useCallback as m, useEffect as q } from "react";
-import { useFloating as A, useInteractions as B, useDismiss as H, useRole as K, useListNavigation as M, FloatingPortal as V, FloatingOverlay as z, FloatingFocusManager as G } from "@floating-ui/react";
+import { jsxs as b, jsx as i } from "react/jsx-runtime";
+import { useId as j, useRef as q, useCallback as m, useEffect as A } from "react";
+import { useFloating as D, useInteractions as B, useDismiss as H, useRole as K, useListNavigation as M, FloatingPortal as V, FloatingOverlay as z, FloatingFocusManager as G } from "@floating-ui/react";
 import J from "classnames";
 import { Icon as v } from "../Icon/Icon.js";
 import { Button as p } from "../Button/Button.js";
 import { afterTransition as Q, htmlImage as U } from "../../utils/helpers.js";
 import { s as e, T as W } from "../../Thumbnails-BlXFynlF.js";
 const X = ({
-  images: x,
+  images: d,
   selected: o,
   loop: c = !0,
-  className: I,
+  className: x,
   children: y,
-  onSelect: i,
+  onSelect: n,
   renderImage: N = U,
   ...w
 }) => {
-  const F = j(), a = x.length, O = o !== void 0, s = D([]), k = document.querySelector("[data-floating-root]") ?? document.body, C = a > 1 && (c || o > 0), P = a > 1 && (c || o < a - 1), { refs: R, context: u, elements: l } = A({
+  const F = j(), a = d.length, O = o !== void 0, s = q([]), $ = document.querySelector("[data-floating-root]") ?? document.body, k = a > 1 && (c || o > 0), C = a > 1 && (c || o < a - 1), { refs: P, context: u, elements: l } = D({
     open: O,
     onOpenChange: (t) => {
-      t || d();
+      t || I();
     }
-  }), { getFloatingProps: L, getItemProps: T } = B([
+  }), { getFloatingProps: R, getItemProps: L } = B([
     H(u),
     K(u, { role: "dialog" }),
     M(u, {
@@ -35,32 +35,34 @@ const X = ({
       openOnArrowKeyDown: !1,
       scrollItemIntoView: { inline: "nearest" },
       onNavigate: (t) => {
-        t !== null && t !== o && (s.current[t]?.focus(), i(t));
+        t !== null && t !== o && (s.current[t]?.focus(), n(t));
       }
     })
   ]), f = m(
     (t) => {
-      !c && (t === 0 || t === a - 1) && s.current[t]?.focus();
+      !c && (t === 0 || t === a - 1) && requestAnimationFrame(() => {
+        s.current[t]?.focus();
+      });
     },
     [c, a]
-  ), d = m(() => {
+  ), I = m(() => {
     l.floating?.classList.add(e.willhide), Q(l.floating, () => {
-      i(void 0);
+      n(void 0);
     });
-  }, [l.floating, i]), $ = m(() => {
+  }, [l.floating, n]), T = m(() => {
     const t = o === 0 ? a - 1 : o - 1;
-    i(t), f(t);
-  }, [a, o, f, i]), E = m(() => {
+    n(t), f(t);
+  }, [a, o, f, n]), E = m(() => {
     const t = o === a - 1 ? 0 : o + 1;
-    i(t), f(t);
-  }, [a, o, f, i]);
-  return q(() => {
+    n(t), f(t);
+  }, [a, o, f, n]);
+  return A(() => {
     const t = new IntersectionObserver(
       (r) => {
         r.forEach((g) => {
           if (g.isIntersecting) {
             const h = s.current.indexOf(g.target);
-            h !== -1 && h !== o && i(h);
+            h !== -1 && h !== o && n(h);
           }
         });
       },
@@ -74,70 +76,84 @@ const X = ({
     }), () => {
       t.disconnect();
     };
-  }, [l.floating, o, i]), /* @__PURE__ */ b(V, { root: k, children: [
-    /* @__PURE__ */ n(z, { lockScroll: !0 }),
-    /* @__PURE__ */ n(G, { context: u, children: /* @__PURE__ */ b(
+  }, [l.floating, o, n]), /* @__PURE__ */ b(V, { root: $, children: [
+    /* @__PURE__ */ i(z, { lockScroll: !0 }),
+    /* @__PURE__ */ i(G, { context: u, children: /* @__PURE__ */ b(
       "div",
       {
-        ...L(w),
-        ref: R.setFloating,
+        ...R(w),
+        ref: P.setFloating,
         "data-lightbox": !0,
         "data-floating-root": !0,
-        className: J(e.lightbox, I),
+        className: J(e.lightbox, x),
         children: [
-          /* @__PURE__ */ b("div", { "data-lightbox-content": !0, className: e.content, children: [
-            /* @__PURE__ */ n("div", { "data-lightbox-images": !0, className: e.images, children: x.map((t, r) => /* @__PURE__ */ n(
-              "figure",
-              {
-                ref: (g) => {
-                  s.current[r] = g;
-                },
-                id: `${F}${r}`,
-                "data-lightbox-image": r,
-                "data-selected": r === o,
-                tabIndex: r === o ? 0 : -1,
-                ...T(),
-                children: N({ ...t, alt: t.alt ?? `Image ${r + 1} of ${a}` })
-              },
-              r
-            )) }),
-            /* @__PURE__ */ n(
-              p,
-              {
-                type: "button",
-                variant: "tertiary",
-                "data-lightbox-close": !0,
-                "aria-label": "close lightbox",
-                icon: /* @__PURE__ */ n(v, { name: "close" }),
-                className: e.close,
-                onClick: d
-              }
-            ),
-            P && /* @__PURE__ */ n(
-              p,
-              {
-                type: "button",
-                variant: "tertiary",
-                "data-lightbox-next": !0,
-                "aria-label": "next image",
-                icon: /* @__PURE__ */ n(v, { name: "arrow-right" }),
-                className: e.next,
-                onClick: E
-              }
-            ),
-            C && /* @__PURE__ */ n(
-              p,
-              {
-                type: "button",
-                variant: "tertiary",
-                "data-lightbox-prev": !0,
-                "aria-label": "previous image",
-                icon: /* @__PURE__ */ n(v, { name: "arrow-left" }),
-                className: e.prev,
-                onClick: $
-              }
-            )
-          ] }),
+          /* @__PURE__ */ b(
+            "div",
+            {
+              role: "region",
+              "aria-label": "images",
+              "aria-roledescription": "carousel",
+              "data-lightbox-content": !0,
+              className: e.content,
+              children: [
+                /* @__PURE__ */ i("div", { "data-lightbox-images": !0, className: e.images, children: d.map((t, r) => /* @__PURE__ */ i(
+                  "figure",
+                  {
+                    ref: (g) => {
+                      s.current[r] = g;
+                    },
+                    role: "group",
+                    "aria-roledescription": "slide",
+                    "aria-label": `${r + 1} of ${a}`,
+                    id: `${F}${r}`,
+                    "data-lightbox-image": r,
+                    "data-selected": r === o,
+                    "aria-current": r === o,
+                    tabIndex: r === o ? 0 : -1,
+                    ...L(),
+                    children: N({ ...t, alt: t.alt ?? `Image ${r + 1} of ${a}` })
+                  },
+                  r
+                )) }),
+                /* @__PURE__ */ i(
+                  p,
+                  {
+                    type: "button",
+                    variant: "tertiary",
+                    "data-lightbox-close": !0,
+                    "aria-label": "close lightbox",
+                    icon: /* @__PURE__ */ i(v, { name: "close" }),
+                    className: e.close,
+                    onClick: I
+                  }
+                ),
+                C && /* @__PURE__ */ i(
+                  p,
+                  {
+                    type: "button",
+                    variant: "tertiary",
+                    "data-lightbox-next": !0,
+                    "aria-label": "next image",
+                    icon: /* @__PURE__ */ i(v, { name: "arrow-right" }),
+                    className: e.next,
+                    onClick: E
+                  }
+                ),
+                k && /* @__PURE__ */ i(
+                  p,
+                  {
+                    type: "button",
+                    variant: "tertiary",
+                    "data-lightbox-prev": !0,
+                    "aria-label": "previous image",
+                    icon: /* @__PURE__ */ i(v, { name: "arrow-left" }),
+                    className: e.prev,
+                    onClick: T
+                  }
+                )
+              ]
+            }
+          ),
           y
         ]
       }

package/dist/components/Notice/Notice.js

@@ -1,53 +1,68 @@
-import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
 import v from "classnames";
 import { cssProps as p, getErrorMessage as y } from "../../utils/helpers.js";
-import { Icon as w } from "../Icon/Icon.js";
-const h = "Notice_container_d9QoU", z = "Notice_content_cvC5c", j = "Notice_message_hI1yz", x = "Notice_accessory_AjvqC", C = "Notice_info_tgW7c", F = "Notice_error_ClIfR", I = "Notice_success_-vXfu", k = "Notice_warning_zFUFN", M = "Notice_neutral_Vryzr", Q = "Notice_vertical_DsMZQ", U = "Notice_plain_l9FV5", c = {
-  container: h,
-  content: z,
-  message: j,
-  accessory: x,
-  info: C,
-  error: F,
-  success: I,
-  warning: k,
-  neutral: M,
-  vertical: Q,
-  plain: U
-}, a = {
-  info: "info-circle",
-  warning: "warning",
-  error: "error-circle",
-  success: "checkmark-circle",
-  neutral: "info-outline"
-}, E = ({
-  error: t,
-  scheme: e = t ? "error" : "neutral",
-  layout: n = "horizontal",
+import { Icon as b } from "../Icon/Icon.js";
+const w = "Notice_container_d9QoU", h = "Notice_content_cvC5c", k = "Notice_message_hI1yz", z = "Notice_accessory_AjvqC", I = "Notice_info_tgW7c", j = "Notice_error_ClIfR", x = "Notice_success_-vXfu", C = "Notice_warning_zFUFN", F = "Notice_neutral_Vryzr", M = "Notice_vertical_DsMZQ", Q = "Notice_plain_l9FV5", c = {
+  container: w,
+  content: h,
+  message: k,
+  accessory: z,
+  info: I,
+  error: j,
+  success: x,
+  warning: C,
+  neutral: F,
+  vertical: M,
+  plain: Q
+}, o = {
+  info: {
+    name: "info-circle",
+    label: "info icon"
+  },
+  warning: {
+    name: "warning",
+    label: "warning icon"
+  },
+  error: {
+    name: "error-circle",
+    label: "error icon"
+  },
+  success: {
+    name: "checkmark-circle",
+    label: "checkmark icon"
+  },
+  neutral: {
+    name: "info-outline",
+    label: "info icon"
+  }
+}, U = (e) => o[e] && /* @__PURE__ */ t(b, { name: o[e].name, "aria-label": o[e].label }), E = ({
+  error: e,
+  scheme: n = e ? "error" : "neutral",
+  layout: a = "horizontal",
   variant: l = "default",
-  size: _,
-  icon: s,
-  accessory: r,
-  margin: N,
-  padding: d,
-  className: m,
-  style: u,
-  children: f,
-  ...g
-}) => /* @__PURE__ */ i(
+  size: m,
+  icon: r,
+  accessory: i,
+  margin: _,
+  padding: N,
+  className: d,
+  style: f,
+  children: g,
+  ...u
+}) => /* @__PURE__ */ s(
   "div",
   {
-    ...g,
-    "data-notice": e,
-    "data-layout": n,
-    className: v(c.container, c[e], c[n], c[l], m),
-    style: { ...u, ...p({ size: _, margin: N, padding: d }) },
+    ...u,
+    "data-notice": n,
+    "data-layout": a,
+    className: v(c.container, c[n], c[a], c[l], d),
+    style: { ...f, ...p({ size: m, margin: _, padding: N }) },
     children: [
-      /* @__PURE__ */ i("div", { "data-notice-content": !0, className: c.content, children: [
-        s !== void 0 ? s : a[e] && /* @__PURE__ */ o(w, { name: a[e] }),
-        /* @__PURE__ */ o("div", { "data-notice-message": !0, className: c.message, children: t ? y(t) : f })
+      /* @__PURE__ */ s("div", { "data-notice-content": !0, className: c.content, children: [
+        r !== void 0 ? r : U(n),
+        /* @__PURE__ */ t("div", { "data-notice-message": !0, className: c.message, children: e ? y(e) : g })
       ] }),
-      r && /* @__PURE__ */ o("div", { "data-notice-accessory": !0, className: c.accessory, children: r })
+      i && /* @__PURE__ */ t("div", { "data-notice-accessory": !0, className: c.accessory, children: i })
     ]
   }
 );

package/dist/components/Progress/ProgressBar.js

@@ -1,11 +1,11 @@
 import { jsx as a } from "react/jsx-runtime";
-import u from "react";
+import v from "react";
 import _ from "classnames";
-import { cssProps as v, clamp as b } from "../../utils/helpers.js";
-const w = "Progress_progress_LSrhF", P = "Progress_indicator_KDwMt", e = {
-  progress: w,
-  indicator: P
-}, R = u.forwardRef(
+import { cssProps as b, clamp as w } from "../../utils/helpers.js";
+const P = "Progress_progress_LSrhF", h = "Progress_indicator_KDwMt", e = {
+  progress: P,
+  indicator: h
+}, $ = v.forwardRef(
   ({
     value: s,
     width: o,
@@ -15,15 +15,15 @@ const w = "Progress_progress_LSrhF", P = "Progress_indicator_KDwMt", e = {
     minWidth: c,
     maxWidth: p,
     margin: d,
-    style: m,
-    className: l,
+    style: l,
+    className: m,
     ...g
   }, f) => {
-    const r = s ? b(s, 0, 100) : void 0;
+    const r = s ? w(s, 0, 100) : void 0, u = r !== void 0 ? `${r} percent` : "indeterminate";
     return /* @__PURE__ */ a(
       "div",
       {
-        "aria-label": r ? `${r} percent` : "indeterminate",
+        "aria-label": u,
         ...g,
         ref: f,
         role: "progressbar",
@@ -32,10 +32,10 @@ const w = "Progress_progress_LSrhF", P = "Progress_indicator_KDwMt", e = {
         "aria-valuenow": r,
         "data-progress-bar": !0,
         "data-progress-value": r ?? "indeterminate",
-        className: _(e.progress, l),
+        className: _(e.progress, m),
         style: {
-          ...m,
-          ...v({ width: o, height: t, color: i, trackColor: n, minWidth: c, maxWidth: p, margin: d })
+          ...l,
+          ...b({ width: o, height: t, color: i, trackColor: n, minWidth: c, maxWidth: p, margin: d })
         },
         children: /* @__PURE__ */ a(
           "span",
@@ -50,5 +50,5 @@ const w = "Progress_progress_LSrhF", P = "Progress_indicator_KDwMt", e = {
   }
 );
 export {
-  R as ProgressBar
+  $ as ProgressBar
 };

package/dist/components/Progress/ProgressCircular.js

@@ -1,18 +1,18 @@
 import { jsxs as c, jsx as o } from "react/jsx-runtime";
-import j from "react";
-import N from "classnames";
+import N from "react";
+import b from "classnames";
 import { cssProps as k, clamp as w } from "../../utils/helpers.js";
-const b = "Progress_inner_Zoiac", h = "Progress_container_tFVew", x = "Progress_range_uqjFb", y = "Progress_progress_MHEjj", C = "Progress_track_jWvrX", n = {
-  inner: b,
-  container: h,
-  range: x,
-  progress: y,
-  track: C
+const h = "Progress_inner_Zoiac", x = "Progress_container_tFVew", y = "Progress_range_uqjFb", C = "Progress_progress_MHEjj", F = "Progress_track_jWvrX", n = {
+  inner: h,
+  container: x,
+  range: y,
+  progress: C,
+  track: F
 };
-function F(r, s, e) {
+function R(r, s, e) {
   return e !== void 0 ? ((e - r) / (s - r) * 100).toString() : e;
 }
-const H = j.forwardRef(
+const M = N.forwardRef(
   ({
     min: r = 0,
     max: s = 100,
@@ -29,11 +29,11 @@ const H = j.forwardRef(
     children: t,
     ...v
   }, P) => {
-    const a = e !== null ? w(e, r, s) : void 0;
+    const a = e !== null ? w(e, r, s) : void 0, j = a !== void 0 ? `${a} percent` : "indeterminate";
     return /* @__PURE__ */ c(
       "div",
       {
-        "aria-label": a ? `${a} percent` : "indeterminate",
+        "aria-label": j,
         ...v,
         ref: P,
         role: "progressbar",
@@ -43,7 +43,7 @@ const H = j.forwardRef(
         "data-progress-circular": !0,
         "data-countdown": l,
         "data-progress-value": a ?? "indeterminate",
-        className: N(n.container, _),
+        className: b(n.container, _),
         style: {
           ...f,
           ...k({
@@ -53,7 +53,7 @@ const H = j.forwardRef(
             color: d,
             trackColor: p,
             margin: m,
-            value: F(r, s, a)
+            value: R(r, s, a)
           })
         },
         children: [
@@ -68,5 +68,5 @@ const H = j.forwardRef(
   }
 );
 export {
-  H as ProgressCircular
+  M as ProgressCircular
 };