@kolking/react-ui 1.4.0 → 1.6.0

package/dist/components/Segmented/Segmented.js

@@ -1,40 +1,43 @@
-import { jsx as o } from "react/jsx-runtime";
+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
-}, u = ({
-  size: s,
-  items: n,
+}, b = ({
+  size: n,
+  items: o,
   selected: t,
-  disabled: m,
-  margin: r,
+  disabled: s,
+  margin: m,
   className: g,
-  style: c,
-  onSelect: d,
-  ...a
-}) => /* @__PURE__ */ o(
+  style: a,
+  onSelect: c,
+  ...d
+}) => /* @__PURE__ */ r(
   "div",
   {
-    ...a,
+    ...d,
+    role: "radiogroup",
     "data-segmented": t,
     className: p(S.segmented, g),
     style: {
-      ...c,
+      ...a,
       ...i({
-        size: s,
-        margin: r,
-        length: n.length.toString(),
+        size: n,
+        margin: m,
+        length: o.length.toString(),
         selected: t.toString()
       })
     },
-    children: n.map((l, e) => /* @__PURE__ */ o(
+    children: o.map((l, e) => /* @__PURE__ */ r(
       "button",
       {
+        role: "radio",
         type: "button",
-        disabled: m,
+        disabled: s,
+        "aria-checked": e === t,
         "data-selected": e === t,
-        onClick: () => e !== t && d(e),
+        onClick: () => e !== t && c(e),
         children: l
       },
       e
@@ -42,5 +45,5 @@ const h = "Segmented_segmented_UOs8Z", S = {
   }
 );
 export {
-  u as Segmented
+  b as Segmented
 };

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

@@ -0,0 +1,5 @@
+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;

package/dist/components/ToggleButton/ToggleButton.js

@@ -0,0 +1,16 @@
+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"
+  }
+);
+export {
+  n as ToggleButton
+};

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

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+export type ToggleGroupProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> & {
+    variant?: 'inline' | 'block';
+    selected: number;
+    disabled?: boolean;
+    equalWidth?: boolean;
+    children: React.ReactElement[];
+    minWidth?: React.CSSProperties['minWidth'];
+    maxWidth?: React.CSSProperties['maxWidth'];
+    onSelect: (index: number) => void;
+};
+export declare const ToggleGroup: ({ variant, selected, disabled, equalWidth, minWidth, maxWidth, className, style, children, onSelect, ...props }: ToggleGroupProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ToggleButton/ToggleGroup.js

@@ -0,0 +1,43 @@
+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 = ({
+  variant: o = "inline",
+  selected: l,
+  disabled: s,
+  equalWidth: c,
+  minWidth: p,
+  maxWidth: i,
+  className: n,
+  style: g,
+  children: m,
+  onSelect: u,
+  ...d
+}) => {
+  const a = o === "block" ? "flex" : void 0, f = c ? "0" : void 0;
+  return /* @__PURE__ */ _(
+    "div",
+    {
+      ...d,
+      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)
+        })
+      )
+    }
+  );
+};
+export {
+  T as ToggleGroup
+};

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

@@ -0,0 +1,2 @@
+export * from './ToggleButton';
+export * from './ToggleGroup';

package/dist/components/ToggleButton/index.js

@@ -0,0 +1,6 @@
+import { ToggleButton as e } from "./ToggleButton.js";
+import { ToggleGroup as t } from "./ToggleGroup.js";
+export {
+  e as ToggleButton,
+  t 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 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';
@@ -12,5 +13,6 @@ export * from './components/Progress';
 export * from './components/Segmented';
 export * from './components/Spinner';
 export * from './components/Tag';
+export * from './components/ToggleButton';
 export * from './components/Tooltip';
 export * from './utils/colors';

package/dist/index.js

@@ -1,62 +1,72 @@
 import { Avatar as e } from "./components/Avatar/Avatar.js";
 import { Badge as p } from "./components/Badge/Badge.js";
-import { Button as m } from "./components/Button/Button.js";
-import { Dialog as a, DialogClose as i, DialogContent as l, DialogFooter as n, DialogTitle as g } from "./components/Dialog/Dialog.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 u } from "./components/Dialog/withDialog.js";
+import { withDialog as T } from "./components/Dialog/withDialog.js";
 import { Flex as F } from "./components/Flex/Flex.js";
-import { Checkbox as C } from "./components/Fields/Checkbox.js";
-import { Field as B, FieldDescription as S, FieldLabel as b } from "./components/Fields/Field.js";
-import { I as M } from "./Input-DE1QkW7S.js";
-import { Quantity as V } from "./components/Fields/Quantity.js";
-import { Radio as v } from "./components/Fields/Radio.js";
-import { Select as y } from "./components/Fields/Select.js";
-import { Textarea as H } from "./components/Fields/Textarea.js";
-import { V as N } from "./ValidationTooltip-BgSwl0hJ.js";
-import { Heading as R } from "./components/Heading/Heading.js";
-import { Icon as q } from "./components/Icon/Icon.js";
-import { Menu as E } from "./components/Menu/Menu.js";
-import { MenuItem as J } from "./components/Menu/MenuItem.js";
-import { Notice as O } from "./components/Notice/Notice.js";
-import { ProgressBar as W } from "./components/Progress/ProgressBar.js";
-import { ProgressCircular as Y } from "./components/Progress/ProgressCircular.js";
-import { Segmented as _ } from "./components/Segmented/Segmented.js";
-import { Spinner as oo } from "./components/Spinner/Spinner.js";
-import { Tag as eo } from "./components/Tag/Tag.js";
-import { Tooltip as po } from "./components/Tooltip/Tooltip.js";
-import { palette as mo } from "./utils/colors.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,
-  m as Button,
-  C as Checkbox,
-  a as Dialog,
-  i as DialogClose,
-  l as DialogContent,
-  n as DialogFooter,
-  g as DialogTitle,
-  B as Field,
-  S as FieldDescription,
-  b as FieldLabel,
+  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,
-  R as Heading,
-  q as Icon,
-  M as Input,
-  E as Menu,
-  J as MenuItem,
-  O as Notice,
-  W as ProgressBar,
-  Y as ProgressCircular,
-  V as Quantity,
-  v as Radio,
-  _ as Segmented,
-  y as Select,
-  oo as Spinner,
-  eo as Tag,
-  H as Textarea,
-  po as Tooltip,
-  N as ValidationTooltip,
-  mo as palette,
+  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,
-  u as withDialog
+  T as withDialog
 };

package/dist/styles/_theme-default.scss

@@ -13,17 +13,17 @@ $font-weight: (
 
 $font-size: (
   em: 16px,
-  xs: 0.750rem,
-  sm: 0.875rem,
-  md: 1.000rem,
-  lg: 1.125rem,
-  xl: 1.250rem,
-  h6: clamp(1.000rem, 2.25vw, 1.125rem),
-  h5: clamp(1.125rem, 2.50vw, 1.250rem),
-  h4: clamp(1.250rem, 3.00vw, 1.500rem),
-  h3: clamp(1.500rem, 3.50vw, 1.750rem),
-  h2: clamp(1.750rem, 4.00vw, 2.000rem),
-  h1: clamp(2.000rem, 5.00vw, 2.500rem),
+  xs: 0.750rem, // 12
+  sm: 0.875rem, // 14
+  md: 1.000rem, // 16
+  lg: 1.125rem, // 18
+  xl: 1.250rem, // 20
+  h6: clamp(1.000rem, 2.25vw, 1.125rem), // 16 → 18
+  h5: clamp(1.125rem, 2.50vw, 1.250rem), // 18 → 20
+  h4: clamp(1.250rem, 3.00vw, 1.500rem), // 20 → 24
+  h3: clamp(1.500rem, 3.50vw, 1.750rem), // 24 → 28
+  h2: clamp(1.750rem, 4.00vw, 2.000rem), // 28 → 32
+  h1: clamp(2.000rem, 5.00vw, 2.500rem), // 32 → 40
 );
 
 $line-height: (
@@ -35,19 +35,21 @@ $line-height: (
 );
 
 $border-radius: (
-  xs: 0.1875rem, // 3px
-  sm: 0.3125rem, // 5px
-  md: 0.5000rem, // 8px
-  lg: 0.7500rem, // 12px
-  xl: 1.1250rem, // 18px
+  xs: 0.1875rem, // 03
+  sm: 0.3125rem, // 05
+  md: 0.5000rem, // 08
+  lg: 0.7500rem, // 12
+  xl: 1.1250rem, // 18
 );
 
 $spacing: (
-  xs: clamp(0.5rem, 0.9765625vw, 0.625rem), // 8 → 10
-  sm: clamp(1.0rem, 1.7578125vw, 1.125rem), // 16 → 18
-  md: clamp(1.5rem, 2.7343750vw, 1.750rem), // 24 → 28
-  lg: clamp(2.0rem, 3.5156250vw, 2.250rem), // 32 → 36
-  xl: clamp(2.5rem, 4.4921875vw, 2.875rem), // 40 → 46
+  2xs: clamp(0.500rem, 1.25vw, 0.625rem), // 08 → 10
+  xs:  clamp(0.750rem, 1.75vw, 0.875rem), // 12 → 14
+  sm:  clamp(1.000rem, 2.50vw, 1.250rem), // 16 → 20
+  md:  clamp(1.375rem, 3.50vw, 1.750rem), // 22 → 28
+  lg:  clamp(1.875rem, 4.75vw, 2.375rem), // 30 → 38
+  xl:  clamp(2.500rem, 6.25vw, 3.125rem), // 40 → 50
+  2xl: clamp(3.250rem, 8.00vw, 4.000rem), // 52 → 64
 );
 
 $drop-shadow: (