@kolking/react-ui 1.8.20 → 1.9.0

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

package/dist/index.js

@@ -6,80 +6,88 @@ import { ButtonGroup as l } from "./components/Button/ButtonGroup.js";
 import { Dialog as n, DialogClose as s, DialogContent as u, DialogFooter as d, DialogTitle as c } from "./components/Dialog/Dialog.js";
 import { useDialog as T } from "./components/Dialog/useDialog.js";
 import { withDialog as F } from "./components/Dialog/withDialog.js";
-import { Flex as w } from "./components/Flex/Flex.js";
-import { Checkbox as I } from "./components/Fields/Checkbox.js";
-import { Field as P, FieldDescription as R, FieldLabel as b } from "./components/Fields/Field.js";
-import { I as N } from "./Input-BG84zXZH.js";
-import { Numeric as E } from "./components/Fields/Numeric.js";
-import { Radio as V } from "./components/Fields/Radio.js";
-import { Range as A } from "./components/Fields/Range.js";
-import { Select as L } from "./components/Fields/Select.js";
-import { Switch as q } from "./components/Fields/Switch.js";
-import { Textarea as z } from "./components/Fields/Textarea.js";
-import { V as K } from "./ValidationTooltip-N4SQpl9r.js";
-import { Heading as Q } from "./components/Heading/Heading.js";
-import { Icon as W } from "./components/Icon/Icon.js";
-import { Menu as Y } from "./components/Menu/Menu.js";
-import { MenuItem as _ } from "./components/Menu/MenuItem.js";
-import { MenuSeparator as oo } from "./components/Menu/MenuSeparator.js";
-import { Notice as eo } from "./components/Notice/Notice.js";
-import { Popover as po } from "./components/Popover/Popover.js";
-import { ProgressBar as xo } from "./components/Progress/ProgressBar.js";
-import { ProgressCircular as ao } from "./components/Progress/ProgressCircular.js";
-import { Segmented as lo } from "./components/Segmented/Segmented.js";
-import { Spinner as no } from "./components/Spinner/Spinner.js";
-import { Tag as uo } from "./components/Tag/Tag.js";
-import { ToggleButton as Do } from "./components/ToggleButton/ToggleButton.js";
-import { ToggleGroup as Bo } from "./components/ToggleButton/ToggleGroup.js";
-import { Tooltip as So } from "./components/Tooltip/Tooltip.js";
-import { palette as Co } from "./utils/colors.js";
-import { clamp as Mo, cssProps as Po, fixedForwardRef as Ro, getElementRef as bo, getErrorMessage as ho, wrapNode as No } from "./utils/helpers.js";
+import { Checkbox as h } from "./components/Fields/Checkbox.js";
+import { Field as b, FieldDescription as w, FieldLabel as C } from "./components/Fields/Field.js";
+import { I as M } from "./Input-BG84zXZH.js";
+import { Numeric as R } from "./components/Fields/Numeric.js";
+import { Radio as v } from "./components/Fields/Radio.js";
+import { Range as E } from "./components/Fields/Range.js";
+import { Select as V } from "./components/Fields/Select.js";
+import { Switch as A } from "./components/Fields/Switch.js";
+import { Textarea as j } from "./components/Fields/Textarea.js";
+import { V as z } from "./ValidationTooltip-N4SQpl9r.js";
+import { Flex as K } from "./components/Flex/Flex.js";
+import { Gallery as Q } from "./components/Gallery/Gallery.js";
+import { GalleryItem as W } from "./components/Gallery/GalleryItem.js";
+import { Heading as Y } from "./components/Heading/Heading.js";
+import { Icon as _ } from "./components/Icon/Icon.js";
+import { Lightbox as oo } from "./components/Lightbox/Lightbox.js";
+import { Menu as eo } from "./components/Menu/Menu.js";
+import { MenuItem as po } from "./components/Menu/MenuItem.js";
+import { MenuSeparator as xo } from "./components/Menu/MenuSeparator.js";
+import { Notice as ao } from "./components/Notice/Notice.js";
+import { Popover as lo } from "./components/Popover/Popover.js";
+import { ProgressBar as no } from "./components/Progress/ProgressBar.js";
+import { ProgressCircular as uo } from "./components/Progress/ProgressCircular.js";
+import { Segmented as Do } from "./components/Segmented/Segmented.js";
+import { Spinner as Bo } from "./components/Spinner/Spinner.js";
+import { Tag as Io } from "./components/Tag/Tag.js";
+import { ToggleButton as So } from "./components/ToggleButton/ToggleButton.js";
+import { ToggleGroup as wo } from "./components/ToggleButton/ToggleGroup.js";
+import { Tooltip as Go } from "./components/Tooltip/Tooltip.js";
+import { palette as Po } from "./utils/colors.js";
+import { afterTransition as No, clamp as vo, cssProps as yo, fixedForwardRef as Eo, getElementRef as Lo, getErrorMessage as Vo, htmlImage as ko, wrapNode as Ao } from "./utils/helpers.js";
 export {
   e as Avatar,
   p as Badge,
   x as Breadcrumbs,
   a as Button,
   l as ButtonGroup,
-  I as Checkbox,
+  h as Checkbox,
   n as Dialog,
   s as DialogClose,
   u as DialogContent,
   d as DialogFooter,
   c as DialogTitle,
-  P as Field,
-  R as FieldDescription,
-  b as FieldLabel,
-  w as Flex,
-  Q as Heading,
-  W as Icon,
-  N as Input,
-  Y as Menu,
-  _ as MenuItem,
-  oo as MenuSeparator,
-  eo as Notice,
-  E as Numeric,
-  po as Popover,
-  xo as ProgressBar,
-  ao as ProgressCircular,
-  V as Radio,
-  A as Range,
-  lo as Segmented,
-  L as Select,
-  no as Spinner,
-  q as Switch,
-  uo as Tag,
-  z as Textarea,
-  Do as ToggleButton,
-  Bo as ToggleGroup,
-  So as Tooltip,
-  K as ValidationTooltip,
-  Mo as clamp,
-  Po as cssProps,
-  Ro as fixedForwardRef,
-  bo as getElementRef,
-  ho as getErrorMessage,
-  Co as palette,
+  b as Field,
+  w as FieldDescription,
+  C as FieldLabel,
+  K as Flex,
+  Q as Gallery,
+  W as GalleryItem,
+  Y as Heading,
+  _ as Icon,
+  M as Input,
+  oo as Lightbox,
+  eo as Menu,
+  po as MenuItem,
+  xo as MenuSeparator,
+  ao as Notice,
+  R as Numeric,
+  lo as Popover,
+  no as ProgressBar,
+  uo as ProgressCircular,
+  v as Radio,
+  E as Range,
+  Do as Segmented,
+  V as Select,
+  Bo as Spinner,
+  A as Switch,
+  Io as Tag,
+  j as Textarea,
+  So as ToggleButton,
+  wo as ToggleGroup,
+  Go as Tooltip,
+  z as ValidationTooltip,
+  No as afterTransition,
+  vo as clamp,
+  yo as cssProps,
+  Eo as fixedForwardRef,
+  Lo as getElementRef,
+  Vo as getErrorMessage,
+  ko as htmlImage,
+  Po as palette,
   T as useDialog,
   F as withDialog,
-  No as wrapNode
+  Ao as wrapNode
 };