@kolking/react-ui 1.5.0 → 1.7.0

package/dist/components/ToggleButton/ToggleButton.js

@@ -1,16 +1,21 @@
 import { jsx as i } from "react/jsx-runtime";
-import { Button as t } from "../Button/Button.js";
-const n = ({ selected: a = !1, role: o, ...r }) => /* @__PURE__ */ i(
-  t,
-  {
-    ...r,
-    role: o,
-    "aria-checked": o === "radio" ? a : void 0,
-    "aria-pressed": o !== "radio" ? a : void 0,
-    "data-selected": a,
-    variant: a ? "primary" : "secondary"
-  }
+import d from "react";
+import { Button as f } from "../Button/Button.js";
+const e = d.forwardRef(
+  ({ selected: a = !1, role: o, ...r }, t) => /* @__PURE__ */ i(
+    f,
+    {
+      ...r,
+      ref: t,
+      role: o,
+      "data-toggle-button": !0,
+      "data-selected": a,
+      variant: a ? "primary" : "secondary",
+      "aria-checked": o === "radio" ? a : void 0,
+      "aria-pressed": o !== "radio" ? a : void 0
+    }
+  )
 );
 export {
-  n as ToggleButton
+  e as ToggleButton
 };

package/dist/components/ToggleButton/ToggleGroup.js

@@ -1,43 +1,46 @@
-import { jsx as _ } from "react/jsx-runtime";
-import e from "react";
-import x from "classnames";
-import { cssProps as h } from "../../utils/helpers.js";
-const k = "ToggleButton_group_yo9Nc", t = {
-  group: k
-}, T = ({
+import { jsx as e } from "react/jsx-runtime";
+import t from "react";
+import { Composite as _, CompositeItem as x } from "@floating-ui/react";
+import h from "classnames";
+import { cssProps as k } from "../../utils/helpers.js";
+const B = "ToggleButton_group_yo9Nc", l = {
+  group: B
+}, E = ({
   variant: o = "inline",
-  selected: l,
-  disabled: s,
-  equalWidth: c,
-  minWidth: p,
-  maxWidth: i,
+  selected: s,
+  disabled: p,
+  equalWidth: i,
+  minWidth: m,
+  maxWidth: c,
   className: n,
   style: g,
-  children: m,
-  onSelect: u,
-  ...d
+  children: u,
+  onSelect: d,
+  ...a
 }) => {
-  const a = o === "block" ? "flex" : void 0, f = c ? "0" : void 0;
-  return /* @__PURE__ */ _(
-    "div",
+  const f = o === "block" ? "flex" : void 0, y = i ? "0" : void 0;
+  return /* @__PURE__ */ e(
+    _,
     {
-      ...d,
+      ...a,
       role: "radiogroup",
       "data-toggle-group": !0,
-      className: x(t.group, t[o], n),
-      style: { ...g, ...h({ display: a, flexBasis: f, minWidth: p, maxWidth: i }) },
-      children: e.Children.map(
-        m,
-        (y, r) => e.cloneElement(y, {
-          role: "radio",
-          disabled: s,
-          selected: r === l,
-          onClick: () => u(r)
-        })
-      )
+      className: h(l.group, l[o], n),
+      style: { ...g, ...k({ display: f, flexBasis: y, minWidth: m, maxWidth: c }) },
+      children: t.Children.map(u, (C, r) => /* @__PURE__ */ e(
+        x,
+        {
+          render: t.cloneElement(C, {
+            role: "radio",
+            disabled: p,
+            selected: r === s,
+            onClick: () => d(r)
+          })
+        }
+      ))
     }
   );
 };
 export {
-  T as ToggleGroup
+  E as ToggleGroup
 };

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 a } 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", f = {
+  tooltip: K,
+  arrow: L,
+  content: Q
+}, et = ({
   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: t, context: e, 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(e),
+    I(e, { role: "tooltip" }),
+    V(e, { move: !1, enabled: r.includes("hover") }),
+    $(e, { enabled: r.includes("focus") }),
+    q(e, { enabled: r.includes("click") })
+  ]), M = z([
+    t.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 = t.domReference.current) == null ? void 0 : n.closest("[data-floating-root]");
+    !i && s && (p.current = s);
+  }, [t, i]), R(() => {
+    l && t.setPositionReference(l);
+  }, [t, l]), i ? o : /* @__PURE__ */ m(S, { children: [
+    j.cloneElement(o, y({ ref: M, ...o.props })),
+    d && /* @__PURE__ */ a(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: t.setFloating,
+        "data-tooltip": c,
+        className: k(f.tooltip, v),
+        style: { ...T, minWidth: F, maxWidth: _ },
+        ...E(),
         children: [
-          /* @__PURE__ */ i(
-            G,
+          /* @__PURE__ */ a(
+            J,
             {
               width: 12,
               height: 6,
-              ref: c,
+              ref: u,
               context: e,
-              className: a.arrow,
-              staticOffset: x ? 8 : null
+              className: f.arrow,
+              staticOffset: N ? 8 : null
             }
           ),
-          /* @__PURE__ */ i("div", { className: a.content, children: g })
+          /* @__PURE__ */ a("div", { "data-tooltip-content": !0, className: f.content, children: h })
         ]
       }
     ) })
   ] });
 };
 export {
-  ee as Tooltip
+  et 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
 };

package/dist/styles/_theme-default.scss

@@ -5,10 +5,11 @@ $font-family: (
 );
 
 $font-weight: (
-  normal: 400,
-  medium: 600,
-  bold:   700,
-  black:  800,
+  normal:  400,
+  medium:  600,
+  bold:    700,
+  black:   800,
+  heading: 700,
 );
 
 $font-size: (
@@ -66,11 +67,11 @@ $ease-out-bounce: cubic-bezier(0.1, 1.3, 0.7, 1.1);
 $light-colors: (
   black:      #000000,
   white:      #FFFFFF,
-  fg:         #191919,
+  fg:         #101010,
   bg:         #FFFFFF,
+  input:      #FFFFFF,
   popup:      #FFFFFF,
   dialog:     #FFFFFF,
-  input:      #FFFFFF,
   backdrop:   rgb(0 0 0 / 50%),
   focus:      var(--color-accent-400),
   link:       var(--color-blue-500),
@@ -79,28 +80,28 @@ $light-colors: (
 );
 
 $dark-colors: (
-  fg:         #E6E6E6,
-  bg:         #161616,
-  popup:      #262626,
+  fg:         #F0F0F0,
+  bg:         #131313,
+  input:      #0C0C0C,
+  popup:      #202020,
   dialog:     #191919,
-  input:      #101010,
-  backdrop:   rgb(0 0 0 / 65%),
+  backdrop:   rgb(0 0 0 / 70%),
 );
 
 $light-palette: (
   colors: (
-    gray:   #8E8E99,
-    red:    #FF3B30,
-    orange: #FF9500,
-    yellow: #FFCC00,
-    green:  #34C759,
-    teal:   #30B0C7,
-    cyan:   #32ADE6,
-    blue:   #007AFF,
-    indigo: #5856D6,
-    purple: #AF52DE,
-    brown:  #A2845E,
-    accent: #007AFF,
+    gray:   #8D8D96,
+    brown:  #A08060,
+    red:    #F03020,
+    orange: #FF8000,
+    yellow: #FFBB00,
+    green:  #20B610,
+    teal:   #30B0C0,
+    cyan:   #30B0F0,
+    blue:   #0070F7,
+    indigo: #6056ED,
+    purple: #A949D9,
+    accent: #0070F7,
   ),
   tints: (
     50:  95%,
@@ -117,18 +118,18 @@ $light-palette: (
 
 $dark-palette: (
   colors: (
-    gray:   #737380,
-    red:    #FF453A,
-    orange: #FF9E0B,
-    yellow: #FED709,
-    green:  #31D158,
-    teal:   #40C8E0,
-    cyan:   #64D3FF,
-    blue:   #0B84FF,
-    indigo: #5E5CE6,
-    purple: #BF5AF2,
-    brown:  #AC8E68,
-    accent: #0B84FF,
+    gray:   #656573,
+    brown:  #A08060,
+    red:    #F03020,
+    orange: #FF8000,
+    yellow: #FFBB00,
+    green:  #20B610,
+    teal:   #30B0C0,
+    cyan:   #30B0F0,
+    blue:   #0080FF,
+    indigo: #7369FF,
+    purple: #B353E3,
+    accent: #0080FF,
   ),
   tints: (
     50:  95%,