@kolking/react-ui 1.8.20 → 1.9.1

package/dist/components/Popover/Popover.js

@@ -1,65 +1,64 @@
-import { jsxs as w, Fragment as C, jsx as r } from "react/jsx-runtime";
-import D, { useRef as H, useState as S, useEffect as U, useLayoutEffect as X } from "react";
-import b from "classnames";
-import { useFloating as B, offset as I, flip as L, shift as N, autoUpdate as T, useInteractions as q, useDismiss as z, useRole as A, useHover as G, useFocus as J, useClick as K, useMergeRefs as Q, FloatingPortal as V, FloatingFocusManager as W } from "@floating-ui/react";
-import { getElementRef as Y } from "../../utils/helpers.js";
-const Z = "Popover_popover_sXXB0", $ = {
-  popover: Z
-}, le = ({
-  open: m,
+import { jsxs as j, Fragment as w, jsx as r } from "react/jsx-runtime";
+import C, { useRef as D, useState as H, useEffect as S, useLayoutEffect as U } from "react";
+import X from "classnames";
+import { useFloating as b, offset as B, flip as I, shift as L, autoUpdate as N, useInteractions as T, useDismiss as q, useRole as z, useHover as A, useFocus as G, useClick as J, useMergeRefs as K, FloatingPortal as Q, FloatingFocusManager as V } from "@floating-ui/react";
+import { getElementRef as W } from "../../utils/helpers.js";
+const Y = "Popover_popover_sXXB0", Z = {
+  popover: Y
+}, ne = ({
+  open: d,
   event: s = "click",
   placement: c = "bottom",
   trigger: t,
-  offset: g = 5,
+  offset: m = 5,
   modal: f = !1,
   anchor: n,
   boundary: i,
   disabled: l,
-  minWidth: R,
-  maxWidth: v,
-  className: F,
-  children: P,
-  onToggle: h,
-  ...E
+  minWidth: g,
+  maxWidth: R,
+  className: v,
+  children: F,
+  onToggle: P,
+  ...h
 }) => {
-  const p = H(null), [x, y] = S(!1), a = m ?? x, O = h ?? y, { refs: e, context: o, floatingStyles: _ } = B({
+  const p = D(null), [E, x] = H(!1), a = d ?? E, y = P ?? x, { refs: e, context: o, floatingStyles: O } = b({
     open: a,
     placement: c,
-    onOpenChange: O,
-    whileElementsMounted: T,
+    onOpenChange: y,
+    whileElementsMounted: N,
     middleware: [
-      I(g),
-      L({ padding: 10, boundary: i }),
-      N({ padding: 5, boundary: i })
+      B(m),
+      I({ padding: 10, boundary: i }),
+      L({ padding: 5, boundary: i })
     ]
-  }), { getReferenceProps: k, getFloatingProps: M } = q([
-    z(o),
-    A(o, { role: "dialog" }),
-    G(o, { move: !1, enabled: s.includes("hover") }),
-    J(o, { enabled: s.includes("focus") }),
-    K(o, { enabled: s.includes("click") })
-  ]), j = Q([e.setReference, Y(t)]);
-  return U(() => {
-    var d;
-    const u = (d = e.domReference.current) == null ? void 0 : d.closest("[data-floating-root]");
+  }), { getReferenceProps: _, getFloatingProps: k } = T([
+    q(o),
+    z(o, { role: "dialog" }),
+    A(o, { move: !1, enabled: s.includes("hover") }),
+    G(o, { enabled: s.includes("focus") }),
+    J(o, { enabled: s.includes("click") })
+  ]), M = K([e.setReference, W(t)]);
+  return S(() => {
+    const u = e.domReference.current?.closest("[data-floating-root]");
     !l && u && (p.current = u);
-  }, [e, l]), X(() => {
+  }, [e, l]), U(() => {
     n && e.setPositionReference(n);
-  }, [e, n]), l ? t : /* @__PURE__ */ w(C, { children: [
-    D.cloneElement(t, k({ ...t.props, ref: j })),
-    a && /* @__PURE__ */ r(V, { root: p, children: /* @__PURE__ */ r(W, { context: o, modal: f, visuallyHiddenDismiss: f, children: /* @__PURE__ */ r(
+  }, [e, n]), l ? t : /* @__PURE__ */ j(w, { children: [
+    C.cloneElement(t, _({ ...t.props, ref: M })),
+    a && /* @__PURE__ */ r(Q, { root: p, children: /* @__PURE__ */ r(V, { context: o, modal: f, visuallyHiddenDismiss: f, children: /* @__PURE__ */ r(
       "div",
       {
-        ...M(E),
+        ...k(h),
         ref: e.setFloating,
         "data-popover": c,
-        className: b($.popover, F),
-        style: { ..._, minWidth: R, maxWidth: v },
-        children: P
+        className: X(Z.popover, v),
+        style: { ...O, minWidth: g, maxWidth: R },
+        children: F
       }
     ) }) })
   ] });
 };
 export {
-  le as Popover
+  ne as Popover
 };

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

package/dist/components/Segmented/Segmented.js

@@ -1,65 +1,61 @@
-import { jsxs as h, jsx as l } from "react/jsx-runtime";
-import _ from "classnames";
-import { useState as x, useEffect as y } from "react";
-import { Composite as C, CompositeItem as N } from "@floating-ui/react";
-import { cssProps as j, wrapNode as k } from "../../utils/helpers.js";
-const q = "Segmented_button_FPqA0", P = "Segmented_segmented_UOs8Z", m = {
-  button: q,
-  segmented: P
-}, E = ({
-  size: u,
-  items: a,
-  selected: t = a[0].value,
-  disabled: s,
-  segmentsWidth: i = "auto",
-  margin: p,
-  children: c,
-  className: g,
-  style: b,
-  onSelect: o,
+import { jsxs as S, jsx as d } from "react/jsx-runtime";
+import h from "classnames";
+import { useState as _, useEffect as x } from "react";
+import { Composite as y, CompositeItem as C } from "@floating-ui/react";
+import { cssProps as N, wrapNode as j } from "../../utils/helpers.js";
+const k = "Segmented_button_FPqA0", q = "Segmented_segmented_UOs8Z", l = {
+  button: k,
+  segmented: q
+}, B = ({
+  size: m,
+  items: o,
+  selected: t = o[0].value,
+  disabled: a,
+  segmentsWidth: u = "auto",
+  margin: c,
+  children: i,
+  className: p,
+  style: g,
+  onSelect: b,
   ...f
 }) => {
-  const v = i === "equal" ? 0 : void 0, [r, n] = x(t);
-  return y(() => {
+  const v = u === "equal" ? 0 : void 0, [s, n] = _(t);
+  return x(() => {
     n(t);
-  }, [t]), /* @__PURE__ */ h(
-    C,
+  }, [t]), /* @__PURE__ */ S(
+    y,
     {
       ...f,
       role: "radiogroup",
       orientation: "horizontal",
       "data-segmented": !0,
-      "data-disabled": s,
-      className: _(m.segmented, g),
-      style: { ...b, ...j({ size: u, margin: p, flexBasis: v }) },
+      "data-disabled": a,
+      className: h(l.segmented, p),
+      style: { ...g, ...N({ size: m, margin: c, flexBasis: v }) },
       children: [
-        a.map((e, d) => /* @__PURE__ */ l(
-          N,
+        o.map((e, r) => /* @__PURE__ */ d(
+          C,
           {
-            render: /* @__PURE__ */ l(
-              "button",
-              {
-                role: "radio",
-                type: "button",
-                disabled: s || e.disabled,
-                "data-segmented-item": d,
-                "aria-checked": e.value === r,
-                "data-selected": e.value === r,
-                className: m.button,
-                onClick: () => {
-                  n(e.value), o == null || o(e.value);
-                },
-                children: k(e.label, "span")
-              }
-            )
+            role: "radio",
+            type: "button",
+            render: /* @__PURE__ */ d("button", {}),
+            disabled: a || e.disabled,
+            "data-segmented-item": r,
+            "aria-checked": e.value === s,
+            "data-selected": e.value === s,
+            className: l.button,
+            onClick: () => {
+              n(e.value), b?.(e.value);
+            },
+            children: j(e.label, "span")
           },
-          d
+          r
         )),
-        c
+        i
       ]
     }
   );
 };
 export {
-  E as Segmented
+  B as Segmented
 };

package/dist/components/Tag/Tag.d.ts

@@ -18,4 +18,4 @@ export declare const Tag: <T extends React.ElementType = "span">(props: {
     title?: React.ReactNode;
     icon?: React.ReactElement;
     iconPosition?: "start" | "end";
-} & Omit<React.PropsWithoutRef<React.ComponentProps<T>>, "title" | "size" | "as" | "icon" | "scheme" | "variant" | "iconPosition"> & React.RefAttributes<unknown>) => React.ReactElement | null;
+} & Omit<React.PropsWithoutRef<React.ComponentProps<T>>, "title" | "as" | "size" | "icon" | "scheme" | "variant" | "iconPosition"> & React.RefAttributes<unknown>) => React.ReactElement | null;

package/dist/components/ToggleButton/ToggleButton.d.ts

@@ -16,4 +16,4 @@ export declare const ToggleButton: React.ForwardRefExoticComponent<Omit<ButtonPr
     title?: React.ReactNode;
     icon?: React.ReactElement;
     iconPosition?: "start" | "end";
-} & Omit<React.PropsWithoutRef<React.ComponentProps<T>>, "title" | "size" | "as" | "icon" | "scheme" | "minWidth" | "maxWidth" | "variant" | "busy" | "iconPosition"> & React.RefAttributes<unknown>) => React.ReactElement | null)>>;
+} & Omit<React.PropsWithoutRef<React.ComponentProps<T>>, "title" | "as" | "size" | "icon" | "scheme" | "minWidth" | "maxWidth" | "variant" | "busy" | "iconPosition"> & React.RefAttributes<unknown>) => React.ReactElement | null)>>;

package/dist/components/ToggleButton/ToggleGroup.js

@@ -1,50 +1,52 @@
-import { jsx as u } from "react/jsx-runtime";
-import I from "classnames";
-import a, { useState as b, useEffect as k } from "react";
-import { Composite as x, CompositeItem as E } from "@floating-ui/react";
-import { cssProps as N } from "../../utils/helpers.js";
-const T = "ToggleButton_group_yo9Nc", j = {
-  group: T
-}, q = ({
+import { jsx as s } from "react/jsx-runtime";
+import b from "classnames";
+import p, { useState as y, useEffect as I } from "react";
+import { Composite as h, CompositeItem as k } from "@floating-ui/react";
+import { cssProps as x } from "../../utils/helpers.js";
+const E = "ToggleButton_group_yo9Nc", N = {
+  group: E
+}, P = ({
   selected: o = 0,
-  disabled: g,
-  minWidth: l,
-  maxWidth: i,
-  flexBasis: d,
-  className: n,
-  style: c,
-  children: f,
-  onSelect: r,
-  ...C
+  disabled: l,
+  minWidth: n,
+  maxWidth: c,
+  flexBasis: m,
+  className: u,
+  style: i,
+  children: a,
+  onSelect: d,
+  ...g
 }) => {
-  const [_, s] = b(o);
-  return k(() => {
-    s(o);
-  }, [o]), /* @__PURE__ */ u(
-    x,
+  const [f, t] = y(o);
+  return I(() => {
+    t(o);
+  }, [o]), /* @__PURE__ */ s(
+    h,
     {
-      ...C,
+      ...g,
       role: "radiogroup",
       "data-toggle-group": !0,
-      className: I(j.group, n),
-      style: { ...c, ...N({ flexBasis: d, minWidth: l, maxWidth: i }) },
-      children: a.Children.map(f, (e, t) => /* @__PURE__ */ u(
-        E,
-        {
-          render: a.cloneElement(e, {
-            role: "radio",
-            disabled: g || e.props.disabled,
-            selected: t === _,
-            onClick: (y) => {
-              var p, m;
-              s(t), r == null || r(t), (m = (p = e.props).onClick) == null || m.call(p, y);
-            }
-          })
-        }
-      ))
+      className: b(N.group, u),
+      style: { ...i, ...x({ flexBasis: m, minWidth: n, maxWidth: c }) },
+      children: p.Children.map(a, (C, e) => {
+        const r = C;
+        return /* @__PURE__ */ s(
+          k,
+          {
+            render: p.cloneElement(r, {
+              role: "radio",
+              disabled: l || r.props?.disabled,
+              selected: e === f,
+              onClick: (_) => {
+                t(e), d?.(e), r.props?.onClick?.(_);
+              }
+            })
+          }
+        );
+      })
     }
   );
 };
 export {
-  q as ToggleGroup
+  P as ToggleGroup
 };

package/dist/components/Tooltip/Tooltip.js

@@ -1,74 +1,73 @@
-import { jsxs as m, Fragment as S, jsx as f } from "react/jsx-runtime";
+import { jsxs as m, Fragment as S, jsx as i } from "react/jsx-runtime";
 import j, { useRef as g, useState as w, useEffect as k, useLayoutEffect as C } from "react";
 import U from "classnames";
 import { useFloating as W, offset as b, flip as A, shift as B, arrow as D, autoUpdate as H, useInteractions as I, useDismiss as L, useRole as V, useHover as $, useFocus as q, useClick as z, useMergeRefs as G, FloatingPortal as J, FloatingArrow as K } from "@floating-ui/react";
 import { getElementRef as Q } from "../../utils/helpers.js";
-const X = "Tooltip_tooltip_u1Uix", Y = "Tooltip_arrow_NBFiV", Z = "Tooltip_content_lfpfM", a = {
+const X = "Tooltip_tooltip_u1Uix", Y = "Tooltip_arrow_NBFiV", Z = "Tooltip_content_lfpfM", f = {
   tooltip: X,
   arrow: Y,
   content: Z
 }, rt = ({
-  trigger: r = "hover focus",
-  placement: c = "top",
+  trigger: n = "hover focus",
+  placement: a = "top",
   offset: R = 8,
-  anchor: l,
+  anchor: r,
   content: h,
-  disabled: i,
+  disabled: l,
   minWidth: F,
   maxWidth: _,
   className: v,
-  children: n,
+  children: s,
   ...x
 }) => {
-  const u = g(null), p = g(null), [d, E] = w(!1), [O, y] = w(!1), { refs: t, context: e, floatingStyles: N } = W({
-    open: d,
-    placement: c,
+  const c = g(null), u = g(null), [p, E] = w(!1), [O, y] = w(!1), { refs: t, context: e, floatingStyles: N } = W({
+    open: p,
+    placement: a,
     onOpenChange: E,
     whileElementsMounted: H,
     middleware: [
       b(R),
       A({ padding: 10 }),
       B({ padding: 5 }),
-      D(({ placement: o, rects: s }) => (y(
-        s.floating.width < s.reference.width && (o.endsWith("-start") || o.endsWith("-end"))
-      ), { element: u, padding: 8 }))
+      D(({ placement: o, rects: d }) => (y(
+        d.floating.width < d.reference.width && (o.endsWith("-start") || o.endsWith("-end"))
+      ), { element: c, padding: 8 }))
     ]
   }), { getReferenceProps: P, getFloatingProps: T } = I([
     L(e),
     V(e, { role: "tooltip" }),
-    $(e, { move: !1, enabled: r.includes("hover") }),
-    q(e, { enabled: r.includes("focus") }),
-    z(e, { enabled: r.includes("click") })
-  ]), M = G([t.setReference, Q(n)]);
+    $(e, { move: !1, enabled: n.includes("hover") }),
+    q(e, { enabled: n.includes("focus") }),
+    z(e, { enabled: n.includes("click") })
+  ]), M = G([t.setReference, Q(s)]);
   return k(() => {
-    var s;
-    const o = (s = t.domReference.current) == null ? void 0 : s.closest("[data-floating-root]");
-    !i && o && (p.current = o);
-  }, [t, i]), C(() => {
-    l && t.setPositionReference(l);
-  }, [t, l]), i ? n : /* @__PURE__ */ m(S, { children: [
-    j.cloneElement(n, P({ ...n.props, ref: M })),
-    d && /* @__PURE__ */ f(J, { root: p, children: /* @__PURE__ */ m(
+    const o = t.domReference.current?.closest("[data-floating-root]");
+    !l && o && (u.current = o);
+  }, [t, l]), C(() => {
+    r && t.setPositionReference(r);
+  }, [t, r]), l ? s : /* @__PURE__ */ m(S, { children: [
+    j.cloneElement(s, P({ ...s.props, ref: M })),
+    p && /* @__PURE__ */ i(J, { root: u, children: /* @__PURE__ */ m(
       "div",
       {
         ...T(x),
         ref: t.setFloating,
-        "data-tooltip": c,
-        className: U(a.tooltip, v),
+        "data-tooltip": a,
+        className: U(f.tooltip, v),
         style: { ...N, minWidth: F, maxWidth: _ },
         children: [
-          /* @__PURE__ */ f(
+          /* @__PURE__ */ i(
             K,
             {
               width: 12,
               height: 6,
-              ref: u,
+              ref: c,
               context: e,
-              className: a.arrow,
+              className: f.arrow,
               staticOffset: O ? 8 : null
             }
           ),
-          /* @__PURE__ */ f("div", { "data-tooltip-content": !0, className: a.content, children: h })
+          /* @__PURE__ */ i("div", { "data-tooltip-content": !0, className: f.content, children: h })
         ]
       }
     ) })

package/dist/index.d.ts

@@ -3,10 +3,12 @@ export * from './components/Badge';
 export * from './components/Breadcrumbs';
 export * from './components/Button';
 export * from './components/Dialog';
-export * from './components/Flex';
 export * from './components/Fields';
+export * from './components/Flex';
+export * from './components/Gallery';
 export * from './components/Heading';
 export * from './components/Icon';
+export * from './components/Lightbox';
 export * from './components/Menu';
 export * from './components/Notice';
 export * from './components/Popover';