@kolking/react-ui 1.5.0 → 1.6.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/Tooltip/Tooltip.d.ts

@@ -5,10 +5,11 @@ export type TooltipProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'content'
     trigger?: Trigger;
     disabled?: boolean;
     placement?: Placement;
+    anchor?: Element | null;
     content: React.ReactNode;
     children: React.JSX.Element;
     minWidth?: React.CSSProperties['minWidth'];
     maxWidth?: React.CSSProperties['maxWidth'];
 };
-export declare const Tooltip: ({ trigger, placement, content, disabled, minWidth, maxWidth, className, children, ...props }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tooltip: ({ trigger, placement, anchor, content, disabled, minWidth, maxWidth, className, children, ...props }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Tooltip/Tooltip.js

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

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export * from './components/Avatar';
 export * from './components/Badge';
+export * from './components/Breadcrumbs';
 export * from './components/Button';
 export * from './components/Dialog';
 export * from './components/Flex';

package/dist/index.js

@@ -1,68 +1,72 @@
 import { Avatar as e } from "./components/Avatar/Avatar.js";
 import { Badge as p } from "./components/Badge/Badge.js";
-import { Button as x } from "./components/Button/Button.js";
-import { Dialog as i, DialogClose as a, DialogContent as l, DialogFooter as g, DialogTitle as n } from "./components/Dialog/Dialog.js";
-import { useDialog as u } from "./components/Dialog/useDialog.js";
-import { withDialog as d } from "./components/Dialog/withDialog.js";
-import { Flex as T } from "./components/Flex/Flex.js";
-import { Checkbox as B } from "./components/Fields/Checkbox.js";
-import { Field as I, FieldDescription as S, FieldLabel as h } from "./components/Fields/Field.js";
-import { I as w } from "./Input-DbQTM4UI.js";
-import { Numeric as N } from "./components/Fields/Numeric.js";
-import { Radio as V } from "./components/Fields/Radio.js";
-import { Select as v } from "./components/Fields/Select.js";
-import { Switch as G } from "./components/Fields/Switch.js";
-import { Textarea as L } from "./components/Fields/Textarea.js";
-import { V as j } from "./ValidationTooltip-BgSwl0hJ.js";
-import { Heading as y } from "./components/Heading/Heading.js";
-import { Icon as E } from "./components/Icon/Icon.js";
-import { Menu as K } from "./components/Menu/Menu.js";
-import { MenuItem as Q } from "./components/Menu/MenuItem.js";
-import { Notice as W } from "./components/Notice/Notice.js";
-import { ProgressBar as Y } from "./components/Progress/ProgressBar.js";
-import { ProgressCircular as _ } from "./components/Progress/ProgressCircular.js";
-import { Segmented as oo } from "./components/Segmented/Segmented.js";
-import { Spinner as eo } from "./components/Spinner/Spinner.js";
-import { Tag as po } from "./components/Tag/Tag.js";
-import { ToggleButton as xo } from "./components/ToggleButton/ToggleButton.js";
-import { ToggleGroup as io } from "./components/ToggleButton/ToggleGroup.js";
-import { Tooltip as lo } from "./components/Tooltip/Tooltip.js";
-import { palette as no } from "./utils/colors.js";
+import { Breadcrumbs as x } from "./components/Breadcrumbs/Breadcrumbs.js";
+import { Button as a } from "./components/Button/Button.js";
+import { Dialog as l, DialogClose as g, DialogContent as n, DialogFooter as s, DialogTitle as u } from "./components/Dialog/Dialog.js";
+import { useDialog as d } from "./components/Dialog/useDialog.js";
+import { withDialog as T } from "./components/Dialog/withDialog.js";
+import { Flex as F } from "./components/Flex/Flex.js";
+import { Checkbox as I } from "./components/Fields/Checkbox.js";
+import { Field as b, FieldDescription as h, FieldLabel as w } from "./components/Fields/Field.js";
+import { I as N } from "./Input-D46mAsdt.js";
+import { Numeric as R } from "./components/Fields/Numeric.js";
+import { Radio as k } from "./components/Fields/Radio.js";
+import { Range as A } from "./components/Fields/Range.js";
+import { Select as H } from "./components/Fields/Select.js";
+import { Switch as j } from "./components/Fields/Switch.js";
+import { Textarea as y } from "./components/Fields/Textarea.js";
+import { V as E } from "./ValidationTooltip-D8d9O6Re.js";
+import { Heading as K } from "./components/Heading/Heading.js";
+import { Icon as Q } from "./components/Icon/Icon.js";
+import { Menu as W } from "./components/Menu/Menu.js";
+import { MenuItem as Y } from "./components/Menu/MenuItem.js";
+import { Notice as _ } from "./components/Notice/Notice.js";
+import { ProgressBar as oo } from "./components/Progress/ProgressBar.js";
+import { ProgressCircular as eo } from "./components/Progress/ProgressCircular.js";
+import { Segmented as po } from "./components/Segmented/Segmented.js";
+import { Spinner as xo } from "./components/Spinner/Spinner.js";
+import { Tag as ao } from "./components/Tag/Tag.js";
+import { ToggleButton as lo } from "./components/ToggleButton/ToggleButton.js";
+import { ToggleGroup as no } from "./components/ToggleButton/ToggleGroup.js";
+import { Tooltip as uo } from "./components/Tooltip/Tooltip.js";
+import { palette as Do } from "./utils/colors.js";
 export {
   e as Avatar,
   p as Badge,
-  x as Button,
-  B as Checkbox,
-  i as Dialog,
-  a as DialogClose,
-  l as DialogContent,
-  g as DialogFooter,
-  n as DialogTitle,
-  I as Field,
-  S as FieldDescription,
-  h as FieldLabel,
-  T as Flex,
-  y as Heading,
-  E as Icon,
-  w as Input,
-  K as Menu,
-  Q as MenuItem,
-  W as Notice,
-  N as Numeric,
-  Y as ProgressBar,
-  _ as ProgressCircular,
-  V as Radio,
-  oo as Segmented,
-  v as Select,
-  eo as Spinner,
-  G as Switch,
-  po as Tag,
-  L as Textarea,
-  xo as ToggleButton,
-  io as ToggleGroup,
-  lo as Tooltip,
-  j as ValidationTooltip,
-  no as palette,
-  u as useDialog,
-  d as withDialog
+  x as Breadcrumbs,
+  a as Button,
+  I as Checkbox,
+  l as Dialog,
+  g as DialogClose,
+  n as DialogContent,
+  s as DialogFooter,
+  u as DialogTitle,
+  b as Field,
+  h as FieldDescription,
+  w as FieldLabel,
+  F as Flex,
+  K as Heading,
+  Q as Icon,
+  N as Input,
+  W as Menu,
+  Y as MenuItem,
+  _ as Notice,
+  R as Numeric,
+  oo as ProgressBar,
+  eo as ProgressCircular,
+  k as Radio,
+  A as Range,
+  po as Segmented,
+  H as Select,
+  xo as Spinner,
+  j as Switch,
+  ao as Tag,
+  y as Textarea,
+  lo as ToggleButton,
+  no as ToggleGroup,
+  uo as Tooltip,
+  E as ValidationTooltip,
+  Do as palette,
+  d as useDialog,
+  T as withDialog
 };