@kolking/react-ui 1.5.0 → 1.7.0

package/dist/components/Menu/Menu.js

@@ -1,78 +1,84 @@
-import { jsxs as E, Fragment as I, jsx as t } from "react/jsx-runtime";
-import N, { useState as r, useRef as d, useMemo as j, useEffect as B } from "react";
-import { flushSync as L } from "react-dom";
-import { useFloating as O, offset as W, flip as _, size as b, autoUpdate as k, useInteractions as A, useDismiss as D, useRole as H, useClick as U, useListNavigation as q, FloatingPortal as G, FloatingFocusManager as J, FloatingList as K } from "@floating-ui/react";
-import Q from "classnames";
-import { MenuContext as T } from "./MenuContext.js";
-import { s as V } from "../../styles.module-CUhWny5T.js";
-const ne = ({
-  placement: p = "bottom-start",
+import { jsxs as B, Fragment as L, jsx as t } from "react/jsx-runtime";
+import O, { useState as r, useRef as p, useMemo as W, useEffect as _ } from "react";
+import { flushSync as b } from "react-dom";
+import { useFloating as k, offset as A, flip as D, size as H, autoUpdate as U, useInteractions as q, useDismiss as G, useRole as J, useClick as K, useListNavigation as Q, FloatingPortal as T, FloatingFocusManager as V, FloatingList as X } from "@floating-ui/react";
+import Y from "classnames";
+import { MenuContext as Z } from "./MenuContext.js";
+import { cssProps as $ } from "../../utils/helpers.js";
+import { s as ee } from "../../styles.module-D1F3R7Vi.js";
+const me = ({
+  size: g,
+  placement: h = "bottom-start",
   trigger: a,
-  minWidth: g,
-  maxWidth: h,
-  className: R,
-  children: v,
-  ...x
+  minWidth: R,
+  maxWidth: v,
+  minHeight: x,
+  maxHeight: F,
+  className: P,
+  children: y,
+  onSelect: l,
+  ...z
 }) => {
-  const [l, c] = r(!1), [i, F] = r(null), [y, M] = r({}), m = d([]), u = d(null), { refs: o, context: e, floatingStyles: P } = O({
-    open: l,
-    placement: p,
+  const [m, c] = r(!1), [i, M] = r(null), [w, C] = r({}), u = p([]), f = p(null), { refs: o, context: e, floatingStyles: E } = k({
+    open: m,
+    placement: h,
     onOpenChange: c,
-    whileElementsMounted: k,
+    whileElementsMounted: U,
     middleware: [
-      W(5),
-      _({ padding: 10 }),
-      b({
+      A(5),
+      D({ padding: 10 }),
+      H({
         padding: 10,
-        apply({ rects: n, availableWidth: s, availableHeight: z }) {
-          L(() => {
-            M({
-              minWidth: n.reference.width,
-              maxWidth: s,
-              maxHeight: z
+        apply({ rects: n, availableWidth: s, availableHeight: j }) {
+          b(() => {
+            C({
+              minHeight: x,
+              minWidth: R ?? n.reference.width,
+              maxWidth: v ?? s,
+              maxHeight: F ?? j
             });
           });
         }
       })
     ]
-  }), { getReferenceProps: w, getFloatingProps: C, getItemProps: f } = A([
-    D(e),
-    H(e, { role: "menu" }),
-    U(e, { event: "mousedown" }),
-    q(e, {
-      listRef: m,
+  }), { getReferenceProps: I, getFloatingProps: N, getItemProps: d } = q([
+    G(e),
+    J(e, { role: "menu" }),
+    K(e, { event: "mousedown" }),
+    Q(e, {
+      listRef: u,
       loop: !0,
       activeIndex: i,
-      onNavigate: F
+      onNavigate: M
     })
-  ]), S = j(
-    () => ({ active: i, setOpen: c, getItemProps: f }),
-    [i, f]
+  ]), S = W(
+    () => ({ active: i, setOpen: c, getItemProps: d, onSelect: l }),
+    [i, d, l]
   );
-  return B(() => {
+  return _(() => {
     var s;
     const n = (s = o.domReference.current) == null ? void 0 : s.closest("[data-floating-root]");
-    n && (u.current = n);
-  }, [o]), /* @__PURE__ */ E(I, { children: [
-    N.cloneElement(a, {
+    n && (f.current = n);
+  }, [o]), /* @__PURE__ */ B(L, { children: [
+    O.cloneElement(a, {
       ref: o.setReference,
-      "data-menu": "trigger",
-      ...w(a.props)
+      ...I(a.props),
+      "data-menu-trigger": !0
     }),
-    /* @__PURE__ */ t(T.Provider, { value: S, children: l && /* @__PURE__ */ t(G, { root: u, children: /* @__PURE__ */ t(J, { context: e, modal: !1, initialFocus: -1, children: /* @__PURE__ */ t(
+    /* @__PURE__ */ t(Z.Provider, { value: S, children: m && /* @__PURE__ */ t(T, { root: f, children: /* @__PURE__ */ t(V, { context: e, modal: !1, initialFocus: -1, children: /* @__PURE__ */ t(
       "div",
       {
-        ...x,
+        ...z,
+        ...N(),
         ref: o.setFloating,
-        "data-menu": "content",
-        className: Q(V.menu, R),
-        style: { ...P, ...y, minWidth: g, maxWidth: h },
-        ...C(),
-        children: /* @__PURE__ */ t(K, { elementsRef: m, children: v })
+        "data-menu": !0,
+        className: Y(ee.menu, P),
+        style: { ...E, ...w, ...$({ size: g }) },
+        children: /* @__PURE__ */ t(X, { elementsRef: u, children: y })
       }
     ) }) }) })
   ] });
 };
 export {
-  ne as Menu
+  me as Menu
 };

package/dist/components/Menu/MenuContext.d.ts

@@ -4,5 +4,6 @@ export type MenuContextProps = {
     active: number | null;
     setOpen: (value: boolean) => void;
     getItemProps: UseInteractionsReturn['getItemProps'];
+    onSelect?: (index: number) => void;
 };
 export declare const MenuContext: React.Context<MenuContextProps>;

package/dist/components/Menu/MenuItem.d.ts

@@ -1,7 +1,6 @@
-export type MenuItemProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type MenuItemProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'title'> & {
     scheme?: 'default' | 'negative' | 'positive' | 'warning';
     icon?: React.ReactElement;
     title?: React.ReactNode;
 };
-export declare const MenuItem: ({ size, scheme, icon, title, children, className, style, onClick, ...props }: MenuItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuItem: ({ scheme, icon, title, children, className, onClick, ...props }: MenuItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Menu/MenuItem.js

@@ -1,50 +1,44 @@
-import { jsx as i, jsxs as h, Fragment as j } from "react/jsx-runtime";
-import { useContext as M, useCallback as N } from "react";
-import { useListItem as P } from "@floating-ui/react";
-import v from "classnames";
+import { jsx as I, jsxs as g, Fragment as h } from "react/jsx-runtime";
+import { useContext as j, useCallback as y } from "react";
+import { useListItem as M } from "@floating-ui/react";
+import N from "classnames";
 import { MenuContext as w } from "./MenuContext.js";
-import { cssProps as A } from "../../utils/helpers.js";
-import { s as n } from "../../styles.module-CUhWny5T.js";
-function a(t) {
-  return typeof t == "string" ? /* @__PURE__ */ i("span", { children: t }) : t;
-}
-const D = ({
-  size: t,
+import { wrapNode as n } from "../../utils/helpers.js";
+import { s as i } from "../../styles.module-D1F3R7Vi.js";
+const B = ({
   scheme: p = "default",
-  icon: c,
+  icon: u,
   title: r,
   children: s,
   className: f,
-  style: u,
-  onClick: e,
+  onClick: t,
   ...d
 }) => {
-  const { active: x, setOpen: o, getItemProps: l } = M(w), { ref: b, index: y } = P(), m = y === x, I = N(
-    (g) => {
-      o(!1), e == null || e(g);
+  const { active: c, setOpen: o, getItemProps: x, onSelect: e } = j(w), { ref: b, index: m } = M(), a = m === c, l = y(
+    (v) => {
+      o(!1), e == null || e(m), t == null || t(v);
     },
-    [o, e]
+    [m, o, e, t]
   );
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ I(
     "button",
     {
       ...d,
       ref: b,
       type: "button",
       role: "menuitem",
-      "data-menu": "item",
-      "data-active": m,
-      tabIndex: m ? 0 : -1,
-      className: v(n.menuitem, n[p], f),
-      style: { ...u, ...A({ size: t }) },
-      ...l({ onClick: I }),
-      children: s ? a(s) : /* @__PURE__ */ h(j, { children: [
-        c,
-        r && a(r)
+      "data-menu-item": !0,
+      "data-active": a,
+      tabIndex: a ? 0 : -1,
+      className: N(i.menuitem, i[p], f),
+      ...x({ onClick: l }),
+      children: s ? n(s, "span") : /* @__PURE__ */ g(h, { children: [
+        u,
+        r !== void 0 && n(r, "span")
       ] })
     }
   );
 };
 export {
-  D as MenuItem
+  B as MenuItem
 };

package/dist/components/Notice/Notice.js

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

package/dist/components/Progress/ProgressBar.js

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

package/dist/components/Progress/ProgressCircular.js

@@ -1,8 +1,8 @@
-import { jsxs as c, jsx as n } from "react/jsx-runtime";
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
 import j from "react";
 import N 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", a = {
+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,
@@ -29,20 +29,21 @@ const H = j.forwardRef(
     children: t,
     ...v
   }, P) => {
-    const o = e !== null ? w(e, r, s) : void 0;
+    const a = e !== null ? w(e, r, s) : void 0;
     return /* @__PURE__ */ c(
       "div",
       {
+        "aria-label": a ? `${a} percent` : "indeterminate",
         ...v,
         ref: P,
         role: "progressbar",
         "aria-valuemin": r,
         "aria-valuemax": s,
-        "aria-valuenow": o,
-        "data-progress": "circular",
+        "aria-valuenow": a,
+        "data-progress-circular": !0,
         "data-countdown": l,
-        "data-progress-value": o ?? "indeterminate",
-        className: N(a.container, _),
+        "data-progress-value": a ?? "indeterminate",
+        className: N(n.container, _),
         style: {
           ...f,
           ...k({
@@ -52,15 +53,15 @@ const H = j.forwardRef(
             color: d,
             trackColor: p,
             margin: m,
-            value: F(r, s, o)
+            value: F(r, s, a)
           })
         },
         children: [
-          /* @__PURE__ */ c("svg", { "aria-hidden": !0, className: a.progress, children: [
-            /* @__PURE__ */ n("circle", { fill: "none", className: a.track }),
-            /* @__PURE__ */ n("circle", { fill: "none", className: a.range })
+          /* @__PURE__ */ c("svg", { "aria-hidden": !0, className: n.progress, children: [
+            /* @__PURE__ */ o("circle", { fill: "none", className: n.track }),
+            /* @__PURE__ */ o("circle", { fill: "none", className: n.range })
           ] }),
-          t && /* @__PURE__ */ n("div", { className: a.inner, children: t })
+          t && /* @__PURE__ */ o("div", { className: n.inner, children: t })
         ]
       }
     );

package/dist/components/Segmented/Segmented.js

@@ -1,49 +1,57 @@
-import { jsx as r } from "react/jsx-runtime";
-import p from "classnames";
-import { cssProps as i } from "../../utils/helpers.js";
-const h = "Segmented_segmented_UOs8Z", S = {
-  segmented: h
-}, b = ({
-  size: n,
-  items: o,
+import { jsx as o } from "react/jsx-runtime";
+import i from "classnames";
+import { Composite as l, CompositeItem as h } from "@floating-ui/react";
+import { cssProps as f, wrapNode as u } from "../../utils/helpers.js";
+const S = "Segmented_segmented_UOs8Z", y = {
+  segmented: S
+}, _ = ({
+  size: s,
+  items: r,
   selected: t,
-  disabled: s,
-  margin: m,
-  className: g,
-  style: a,
-  onSelect: c,
-  ...d
-}) => /* @__PURE__ */ r(
-  "div",
+  disabled: m,
+  margin: n,
+  className: a,
+  style: d,
+  onSelect: g,
+  ...p
+}) => /* @__PURE__ */ o(
+  l,
   {
-    ...d,
+    ...p,
     role: "radiogroup",
-    "data-segmented": t,
-    className: p(S.segmented, g),
+    "data-segmented": !0,
+    "data-disabled": m,
+    className: i(y.segmented, a),
     style: {
-      ...a,
-      ...i({
-        size: n,
-        margin: m,
-        length: o.length.toString(),
+      ...d,
+      ...f({
+        size: s,
+        margin: n,
+        length: r.length.toString(),
         selected: t.toString()
       })
     },
-    children: o.map((l, e) => /* @__PURE__ */ r(
-      "button",
+    children: r.map((c, e) => /* @__PURE__ */ o(
+      h,
       {
-        role: "radio",
-        type: "button",
-        disabled: s,
-        "aria-checked": e === t,
-        "data-selected": e === t,
-        onClick: () => e !== t && c(e),
-        children: l
+        render: /* @__PURE__ */ o(
+          "button",
+          {
+            role: "radio",
+            type: "button",
+            disabled: m,
+            "data-segmented-item": e,
+            "aria-checked": e === t,
+            "data-selected": e === t,
+            onClick: () => e !== t && g(e),
+            children: u(c, "span")
+          }
+        )
       },
       e
     ))
   }
 );
 export {
-  b as Segmented
+  _ as Segmented
 };

package/dist/components/Spinner/Spinner.js

@@ -11,10 +11,10 @@ const f = "Spinner_container_CGGmW", g = "Spinner_spinner_vU3LR", S = "Spinner_t
   ({ size: e, color: a, overlay: s, overlayColor: i, className: t, style: o, ...c }, l) => /* @__PURE__ */ r(
     "span",
     {
+      "aria-label": "loading",
       ...c,
       ref: l,
       role: "status",
-      "aria-label": "loading",
       "data-spinner": !0,
       "data-overlay": s,
       className: d(n.container, t),

package/dist/components/Tag/Tag.js

@@ -1,10 +1,12 @@
-import { jsx as f, jsxs as i, Fragment as T } from "react/jsx-runtime";
+import { jsx as n, jsxs as f, Fragment as T } from "react/jsx-runtime";
 import c from "classnames";
 import { wrapNode as t, cssProps as p } from "../../utils/helpers.js";
 const y = "Tag_tag_-ovOm", _ = {
   tag: y,
   "default-gray": "Tag_default-gray_Ju2wo",
   "solid-gray": "Tag_solid-gray_q6GO4",
+  "default-brown": "Tag_default-brown_csCrz",
+  "solid-brown": "Tag_solid-brown_5IxVx",
   "default-red": "Tag_default-red_5NeXY",
   "solid-red": "Tag_solid-red_uPhj-",
   "default-orange": "Tag_default-orange_fuy0F",
@@ -23,8 +25,6 @@ const y = "Tag_tag_-ovOm", _ = {
   "solid-indigo": "Tag_solid-indigo_2gfJj",
   "default-purple": "Tag_default-purple_oBbek",
   "solid-purple": "Tag_solid-purple_e10WH",
-  "default-brown": "Tag_default-brown_csCrz",
-  "solid-brown": "Tag_solid-brown_5IxVx",
   "default-accent": "Tag_default-accent_uUXnO",
   "solid-accent": "Tag_solid-accent_bbTSM"
 }, j = ({
@@ -33,23 +33,23 @@ const y = "Tag_tag_-ovOm", _ = {
   scheme: l = "gray",
   title: e,
   icon: d,
-  iconPosition: g = "start",
+  iconPosition: o = "start",
   className: r,
   style: u,
-  children: o,
-  ...n
-}) => /* @__PURE__ */ f(
+  children: g,
+  ...i
+}) => /* @__PURE__ */ n(
   "span",
   {
-    ...n,
+    ...i,
     "data-tag": a,
     "data-scheme": l,
     className: c(_.tag, _[`${a}-${l}`], r),
     style: { ...u, ...p({ size: s }) },
-    children: o ? t(o, "span") : /* @__PURE__ */ i(T, { children: [
-      g === "start" && d,
-      e && t(e, "span"),
-      g === "end" && d
+    children: g ? t(g, "span") : /* @__PURE__ */ f(T, { children: [
+      o === "start" && d,
+      e !== void 0 && t(e, "span"),
+      o === "end" && d
     ] })
   }
 );

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

@@ -1,5 +1,19 @@
+import { default as React } from 'react';
 import { ButtonProps } from '../Button';
 export type ToggleButtonProps = Omit<ButtonProps, 'variant'> & {
     selected?: boolean;
 };
-export declare const ToggleButton: ({ selected, role, ...props }: ToggleButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ToggleButton: React.ForwardRefExoticComponent<Omit<ButtonProps, "variant"> & {
+    selected?: boolean;
+} & React.RefAttributes<(<T extends React.ElementType = "button">(props: {
+    as?: T | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    variant?: "primary" | "secondary" | "tertiary";
+    scheme?: "default" | "negative" | "positive" | "warning";
+    minWidth?: React.CSSProperties["minWidth"];
+    maxWidth?: React.CSSProperties["maxWidth"];
+    busy?: boolean;
+    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)>>;