@kolking/react-ui 1.3.0 → 1.5.0

package/dist/components/Flex/Flex.js

@@ -1,36 +1,37 @@
-import { jsx as a } from "react/jsx-runtime";
+import { jsx as p } from "react/jsx-runtime";
 import d from "classnames";
-import { fixedForwardRef as i, cssProps as p } from "../../utils/helpers.js";
-const y = "Flex_flex_GBHBA", F = {
-  flex: y
+import { fixedForwardRef as i, cssProps as F } from "../../utils/helpers.js";
+const u = "Flex_flex_GBHBA", w = {
+  flex: u
 };
-function u({
-  as: l,
+function y({
+  as: o,
   direction: e = "row",
-  gap: o,
-  align: r,
+  gap: r,
+  align: t,
   justify: s,
-  wrap: f,
-  marginStart: n,
-  marginEnd: x,
-  className: m,
-  ...t
-}, c) {
-  return /* @__PURE__ */ a(
-    l ?? "div",
+  wrap: l,
+  marginStart: f,
+  marginEnd: n,
+  className: x,
+  style: m,
+  ...c
+}, a) {
+  return /* @__PURE__ */ p(
+    o ?? "div",
     {
-      ...t,
-      ref: c,
+      ...c,
+      ref: a,
       "data-flex": e,
-      className: d(F.flex, m),
+      className: d(w.flex, x),
       style: {
-        ...t.style,
-        ...p({ gap: o, align: r, justify: s, direction: e, wrap: f, marginStart: n, marginEnd: x })
+        ...m,
+        ...F({ gap: r, align: t, justify: s, direction: e, wrap: l, marginStart: f, marginEnd: n })
       }
     }
   );
 }
-const j = i(u);
+const v = i(y);
 export {
-  j as Flex
+  v as Flex
 };

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/index.d.ts

@@ -12,5 +12,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,68 @@
 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 { useDialog as d } from "./components/Dialog/useDialog.js";
-import { withDialog as u } 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 { 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";
 export {
   e as Avatar,
   p as Badge,
-  m as Button,
-  C as Checkbox,
-  a as Dialog,
-  i as DialogClose,
+  x as Button,
+  B as Checkbox,
+  i as Dialog,
+  a as DialogClose,
   l as DialogContent,
-  n as DialogFooter,
-  g as DialogTitle,
-  B as Field,
+  g as DialogFooter,
+  n as DialogTitle,
+  I as Field,
   S as FieldDescription,
-  b 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,
-  d as useDialog,
-  u as withDialog
+  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
 };

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: (

package/dist/styles/_utils.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use 'sass:math';
 @use 'sass:meta';
+@use 'sass:list';
 @use 'sass:color';
 @use 'sass:string';
 
@@ -44,6 +45,17 @@
   @return map.merge($colors, color-palette($palette, $bg, $fg));
 }
 
+// Returns a list of keys converted into strings,
+// mainly used to get a palette color names as strings
+// to avoid sass interpolation warnings
+@function string-keys($map) {
+  $output: ();
+  @each $key in map.keys($map) {
+    $output: list.append($output, $key + '');
+  }
+  @return $output;
+}
+
 // Shortcut to set an opacity for a CSS variable
 @function color-opacity($hex, $opacity) {
   @return color-mix(in srgb, $hex $opacity, transparent);
@@ -84,11 +96,6 @@
   @return string.unquote('#' + string.slice($ie-hex, 4));
 }
 
-// Convert color to string
-@function to-string($color) {
-  @return $color + '';
-}
-
 @mixin focus-visible($color: var(--color-focus)) {
   outline-width: 3px;
   outline-offset: 2px;