@kolking/react-ui 1.8.15 → 1.8.17

package/dist/components/Badge/Badge.js

@@ -1,10 +1,11 @@
 import { jsx as h } from "react/jsx-runtime";
 import { useRef as _, useLayoutEffect as w, useEffect as l } from "react";
 import E from "classnames";
-import { wrapNode as P, cssProps as M } from "../../utils/helpers.js";
-const x = "Badge_badge_-mEE7", H = "Badge_appear_LbxbS", L = "Badge_gray_7jA-J", I = "Badge_brown_x1GS7", R = "Badge_red_zPgCR", S = "Badge_orange_EoLmF", X = "Badge_yellow_qvbb6", j = "Badge_green_XX-1c", v = "Badge_teal_VHoFK", C = "Badge_cyan_1ksBn", F = "Badge_blue_YulfT", K = "Badge_indigo_2KXUy", N = "Badge_purple_o55fQ", O = "Badge_accent_BIYve", g = {
-  badge: x,
-  appear: H,
+import { wrapNode as P, cssProps as H } from "../../utils/helpers.js";
+const M = "Badge_badge_-mEE7", k = "Badge_appear_LbxbS", x = "Badge_accent_BIYve", L = "Badge_gray_7jA-J", I = "Badge_brown_x1GS7", R = "Badge_red_zPgCR", S = "Badge_orange_EoLmF", X = "Badge_yellow_qvbb6", j = "Badge_green_XX-1c", v = "Badge_teal_VHoFK", C = "Badge_cyan_1ksBn", F = "Badge_blue_YulfT", K = "Badge_indigo_2KXUy", N = "Badge_purple_o55fQ", O = "Badge_pink_T5H--", g = {
+  badge: M,
+  appear: k,
+  accent: x,
   gray: L,
   brown: I,
   red: R,
@@ -16,9 +17,9 @@ const x = "Badge_badge_-mEE7", H = "Badge_appear_LbxbS", L = "Badge_gray_7jA-J",
   blue: F,
   indigo: K,
   purple: N,
-  accent: O
+  pink: O
 };
-function Y(a) {
+function T(a) {
   const n = _();
   return l(() => {
     n.current = a;
@@ -34,7 +35,7 @@ const A = ({
   style: f,
   ...y
 }) => {
-  const e = !o, p = Y(e), t = _(null);
+  const e = !o, p = T(e), t = _(null);
   if (w(() => {
     var r;
     p && !e && ((r = t.current) == null || r.classList.add(g.appear));
@@ -43,12 +44,12 @@ const A = ({
       const r = t.current.clientHeight, d = t.current.parentElement, i = d ? Math.min(
         parseInt(getComputedStyle(d).getPropertyValue("border-radius")),
         d.clientHeight / 2
-      ) : 0, B = i * (1 - Math.sin(45 * Math.PI / 180)), m = (1 + Math.min(i / r, 1)) * (r / 4);
-      t.current.style.setProperty("--offset", `${B - m}px`);
+      ) : 0, b = i * (1 - Math.sin(45 * Math.PI / 180)), m = (1 + Math.min(i / r, 1)) * (r / 4);
+      t.current.style.setProperty("--offset", `${b - m}px`);
     }
   }, [e, s]), e)
     return null;
-  const b = typeof o == "number" && c > 0 && o > c;
+  const B = typeof o == "number" && c > 0 && o > c;
   return /* @__PURE__ */ h(
     "div",
     {
@@ -57,8 +58,8 @@ const A = ({
       "data-badge": n,
       "data-placement": s,
       className: E(g.badge, g[n], u),
-      style: { ...f, ...M({ size: a }) },
-      children: P(b ? `${c}+` : o, "span")
+      style: { ...f, ...H({ size: a }) },
+      children: P(B ? `${c}+` : o, "span")
     }
   );
 };

package/dist/components/Button/Button.js

@@ -1,62 +1,48 @@
-import { jsxs as u, jsx as v, Fragment as B } from "react/jsx-runtime";
-import b from "classnames";
-import { fixedForwardRef as w, wrapNode as d, cssProps as x } from "../../utils/helpers.js";
+import { jsxs as m, jsx as y, Fragment as j } from "react/jsx-runtime";
+import w from "classnames";
+import { fixedForwardRef as E, wrapNode as i, cssProps as F } from "../../utils/helpers.js";
 import { Spinner as N } from "../Spinner/Spinner.js";
-const h = "Button_button_WuG2z", y = {
-  button: h,
-  "primary-default": "Button_primary-default_lVt-V",
-  "secondary-default": "Button_secondary-default_yggNH",
-  "tertiary-default": "Button_tertiary-default_qSFa6",
-  "primary-negative": "Button_primary-negative_AupXJ",
-  "secondary-negative": "Button_secondary-negative_bZbAE",
-  "tertiary-negative": "Button_tertiary-negative_7Dh-3",
-  "primary-positive": "Button_primary-positive_4Mnfc",
-  "secondary-positive": "Button_secondary-positive_h1UJg",
-  "tertiary-positive": "Button_tertiary-positive_oTrM5",
-  "primary-warning": "Button_primary-warning_9A3NY",
-  "secondary-warning": "Button_secondary-warning_mbIUl",
-  "tertiary-warning": "Button_tertiary-warning_gM2um"
-};
-function A({
-  as: _,
+import { s as l } from "../../styles.module-q4f7jLJ9.js";
+function $({
+  as: p,
   variant: r = "primary",
-  scheme: a = "default",
-  size: p,
-  minWidth: m,
-  maxWidth: l,
+  scheme: e = "default",
+  size: f,
+  minWidth: u,
+  maxWidth: c,
   busy: t,
-  title: e,
-  icon: n,
-  iconPosition: i = "start",
-  children: o,
-  className: g,
-  style: c,
-  ...s
-}, f) {
-  return /* @__PURE__ */ u(
-    _ ?? "button",
+  title: a,
+  icon: o,
+  iconPosition: s = "start",
+  children: d,
+  className: b,
+  style: x,
+  ...n
+}, v) {
+  return /* @__PURE__ */ m(
+    p ?? "button",
     {
-      ...s,
-      ref: f,
+      ...n,
+      ref: v,
       "data-busy": t,
       "data-button": r,
-      "data-scheme": a,
-      "aria-disabled": s.disabled,
+      "data-scheme": e,
+      "aria-disabled": n.disabled,
       "aria-live": t ? "polite" : void 0,
-      className: b(y.button, y[`${r}-${a}`], g),
-      style: { ...c, ...x({ size: p, minWidth: m, maxWidth: l }) },
+      className: w(l.button, l[`${r}-${e}`], b),
+      style: { ...x, ...F({ size: f, minWidth: u, maxWidth: c }) },
       children: [
-        o ? d(o, "span") : /* @__PURE__ */ u(B, { children: [
-          i === "start" && n,
-          e !== void 0 && d(e, "span"),
-          i === "end" && n
+        d ? i(d, "span") : /* @__PURE__ */ m(j, { children: [
+          s === "start" && o,
+          a !== void 0 && i(a, "span"),
+          s === "end" && o
         ] }),
-        t && /* @__PURE__ */ v(N, { overlay: !0 })
+        t && /* @__PURE__ */ y(N, { overlay: !0 })
       ]
     }
   );
 }
-const S = w(A);
+const q = E($);
 export {
-  S as Button
+  q as Button
 };

package/dist/components/Button/ButtonGroup.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+export type ButtonGroupProps = React.HTMLAttributes<HTMLDivElement> & {
+    children: React.ReactElement[];
+    minWidth?: React.CSSProperties['minWidth'];
+    maxWidth?: React.CSSProperties['maxWidth'];
+    flexBasis?: React.CSSProperties['flexBasis'];
+};
+export declare const ButtonGroup: ({ minWidth, maxWidth, flexBasis, className, style, children, ...props }: ButtonGroupProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Button/ButtonGroup.js

@@ -0,0 +1,25 @@
+import { jsx as a } from "react/jsx-runtime";
+import e from "classnames";
+import { cssProps as i } from "../../utils/helpers.js";
+import { s as c } from "../../styles.module-q4f7jLJ9.js";
+const g = ({
+  minWidth: o,
+  maxWidth: r,
+  flexBasis: t,
+  className: s,
+  style: m,
+  children: p,
+  ...u
+}) => /* @__PURE__ */ a(
+  "div",
+  {
+    ...u,
+    "data-button-group": !0,
+    className: e(c.group, s),
+    style: { ...m, ...i({ flexBasis: t, minWidth: o, maxWidth: r }) },
+    children: p
+  }
+);
+export {
+  g as ButtonGroup
+};

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

@@ -1 +1,2 @@
 export * from './Button';
+export * from './ButtonGroup';

package/dist/components/Button/index.js

@@ -1,4 +1,6 @@
 import { Button as r } from "./Button.js";
+import { ButtonGroup as u } from "./ButtonGroup.js";
 export {
-  r as Button
+  r as Button,
+  u as ButtonGroup
 };

package/dist/components/Fields/Field.d.ts

@@ -2,6 +2,7 @@ import { default as React } from 'react';
 export interface FieldConfig {
     id?: string;
     label?: React.ReactNode;
+    labelId?: string;
     labelAccessory?: React.ReactNode;
     help?: React.ReactNode;
     required?: boolean;
@@ -14,7 +15,7 @@ export type FieldLabelProps = React.LabelHTMLAttributes<HTMLLabelElement> & {
     required?: boolean;
 };
 export declare const FieldLabel: ({ label, required, className, children, ...props }: FieldLabelProps) => import("react/jsx-runtime").JSX.Element;
-export type FieldDescriptionProps = React.HTMLAttributes<HTMLDivElement>;
+export type FieldDescriptionProps = React.HTMLAttributes<HTMLSpanElement>;
 export declare const FieldDescription: ({ className, children, ...props }: FieldDescriptionProps) => import("react/jsx-runtime").JSX.Element;
 export type FieldProps = React.HTMLAttributes<HTMLDivElement> & FieldConfig;
-export declare const Field: ({ id, label, labelAccessory, help, required, minWidth, maxWidth, className, children, style, ...props }: FieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Field: ({ id, label, labelId, labelAccessory, help, required, minWidth, maxWidth, className, children, style, ...props }: FieldProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Fields/Field.js

@@ -1,53 +1,54 @@
-import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { jsxs as i, jsx as a } from "react/jsx-runtime";
 import d from "classnames";
-import _ from "react";
-import { cssProps as p } from "../../utils/helpers.js";
-const u = "styles_field_hqzKT", b = "styles_header_Iwsz6", N = "styles_label_zRVTS", F = "styles_accessory_S4ccn", v = "styles_description_fZnNW", a = {
-  field: u,
-  header: b,
-  label: N,
-  accessory: F,
-  description: v
-}, x = ({ label: e, required: s, className: l, children: t, ...c }) => /* @__PURE__ */ i("div", { "data-field-header": !0, className: a.header, children: [
-  /* @__PURE__ */ r(
+import p from "react";
+import { cssProps as u } from "../../utils/helpers.js";
+const b = "styles_field_hqzKT", N = "styles_header_Iwsz6", F = "styles_label_zRVTS", v = "styles_accessory_S4ccn", x = "styles_description_fZnNW", t = {
+  field: b,
+  header: N,
+  label: F,
+  accessory: v,
+  description: x
+}, z = ({ label: e, required: s, className: l, children: r, ...c }) => /* @__PURE__ */ i("div", { "data-field-header": !0, className: t.header, children: [
+  /* @__PURE__ */ a(
     "label",
     {
       ...c,
       "data-field-label": !0,
       "data-required": s,
-      className: d(a.label, l),
+      className: d(t.label, l),
       children: e
     }
   ),
-  _.Children.toArray(t).length > 0 && /* @__PURE__ */ r("div", { "data-field-accessory": !0, className: a.accessory, children: t })
-] }), z = ({ className: e, children: s, ...l }) => /* @__PURE__ */ r("small", { ...l, "data-field-description": !0, className: d(a.description, e), children: s }), T = ({
+  p.Children.toArray(r).length > 0 && /* @__PURE__ */ a("div", { "data-field-accessory": !0, className: t.accessory, children: r })
+] }), j = ({ className: e, children: s, ...l }) => /* @__PURE__ */ a("small", { ...l, "data-field-description": !0, className: d(t.description, e), children: s }), g = ({
   id: e,
   label: s,
-  labelAccessory: l,
-  help: t,
-  required: c,
-  minWidth: o,
-  maxWidth: n,
-  className: f,
-  children: m,
-  style: y,
-  ...h
+  labelId: l,
+  labelAccessory: r,
+  help: c,
+  required: o,
+  minWidth: n,
+  maxWidth: f,
+  className: m,
+  children: y,
+  style: h,
+  ..._
 }) => /* @__PURE__ */ i(
   "div",
   {
-    ...h,
+    ..._,
     "data-field": e || !0,
-    className: d(a.field, f),
-    style: { ...y, ...p({ minWidth: o, maxWidth: n }) },
+    className: d(t.field, m),
+    style: { ...h, ...u({ minWidth: n, maxWidth: f }) },
     children: [
-      s && /* @__PURE__ */ r(x, { htmlFor: e, label: s, required: c, children: l }),
-      m,
-      t && /* @__PURE__ */ r(z, { children: t })
+      s && /* @__PURE__ */ a(z, { id: l, htmlFor: e, label: s, required: o, children: r }),
+      y,
+      c && /* @__PURE__ */ a(j, { children: c })
     ]
   }
 );
 export {
-  T as Field,
-  z as FieldDescription,
-  x as FieldLabel
+  g as Field,
+  j as FieldDescription,
+  z as FieldLabel
 };

package/dist/components/Fields/Numeric.js

@@ -2,20 +2,21 @@ import { jsxs as f, jsx as a } from "react/jsx-runtime";
 import y from "classnames";
 import _, { useRef as h, useImperativeHandle as v, useCallback as s } from "react";
 import { Icon as i } from "../Icon/Icon.js";
-import { Button as l } from "../Button/Button.js";
+import { Button as o } from "../Button/Button.js";
+import "../../utils/helpers.js";
 import { I as w } from "../../Input-D46mAsdt.js";
 const E = "styles_numeric_dzUSE", R = "styles_increase_5S-Jo", g = "styles_decrease_j8UR6", c = {
   numeric: E,
   increase: R,
   decrease: g
-}, x = _.forwardRef(
-  ({ labelIncrease: o = "increase", labelDecrease: d = "decrease", className: u, ...n }, m) => {
+}, C = _.forwardRef(
+  ({ labelIncrease: l = "increase", labelDecrease: d = "decrease", className: u, ...n }, m) => {
     const e = h(null);
     v(m, () => e.current);
-    const b = s(() => {
+    const p = s(() => {
       var r, t;
       (r = e.current) == null || r.stepUp(), (t = e.current) == null || t.dispatchEvent(new Event("change", { bubbles: !0 }));
-    }, []), p = s(() => {
+    }, []), b = s(() => {
       var r, t;
       (r = e.current) == null || r.stepDown(), (t = e.current) == null || t.dispatchEvent(new Event("change", { bubbles: !0 }));
     }, []);
@@ -29,19 +30,19 @@ const E = "styles_numeric_dzUSE", R = "styles_increase_5S-Jo", g = "styles_decre
         className: y(c.numeric, u),
         children: [
           /* @__PURE__ */ a(
-            l,
+            o,
             {
               type: "button",
               variant: "secondary",
-              "aria-label": o,
+              "aria-label": l,
               disabled: n.disabled || n.readOnly,
               className: c.increase,
               icon: /* @__PURE__ */ a(i, { name: "triangle-up" }),
-              onClick: b
+              onClick: p
             }
           ),
           /* @__PURE__ */ a(
-            l,
+            o,
             {
               type: "button",
               variant: "secondary",
@@ -49,7 +50,7 @@ const E = "styles_numeric_dzUSE", R = "styles_increase_5S-Jo", g = "styles_decre
               disabled: n.disabled || n.readOnly,
               className: c.decrease,
               icon: /* @__PURE__ */ a(i, { name: "triangle-down" }),
-              onClick: p
+              onClick: b
             }
           )
         ]
@@ -58,5 +59,5 @@ const E = "styles_numeric_dzUSE", R = "styles_increase_5S-Jo", g = "styles_decre
   }
 );
 export {
-  x as Numeric
+  C as Numeric
 };

package/dist/components/Segmented/Segmented.d.ts

@@ -1,9 +1,14 @@
-export type SegmentedProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> & {
+export type SegmentedItem<T> = {
+    value: T;
+    label: React.ReactNode;
+    disabled?: boolean;
+};
+export type SegmentedProps<T> = Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> & {
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    items: React.ReactNode[];
-    selected: number;
+    items: SegmentedItem<T>[];
+    selected?: T;
     disabled?: boolean;
     margin?: React.CSSProperties['margin'];
-    onSelect: (index: number) => void;
+    onSelect?: (value: T) => void;
 };
-export declare const Segmented: ({ size, items, selected, disabled, margin, children, className, style, onSelect, ...props }: SegmentedProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Segmented: <T>({ size, items, selected, disabled, margin, children, className, style, onSelect, ...props }: SegmentedProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Segmented/Segmented.js

@@ -1,53 +1,64 @@
-import { jsxs as l, jsx as s } from "react/jsx-runtime";
-import f from "classnames";
-import { Composite as u, CompositeItem as h } from "@floating-ui/react";
-import { cssProps as y, wrapNode as C } from "../../utils/helpers.js";
-const b = "Segmented_segmented_UOs8Z", j = {
-  segmented: b
-}, w = ({
-  size: m,
-  items: r,
-  selected: t,
-  disabled: o,
-  margin: a,
-  children: n,
-  className: d,
-  style: p,
-  onSelect: c,
-  ...g
-}) => /* @__PURE__ */ l(
-  u,
-  {
-    ...g,
-    role: "radiogroup",
-    "data-segmented": !0,
-    "data-disabled": o,
-    className: f(j.segmented, d),
-    style: { ...p, ...y({ size: m, margin: a }) },
-    children: [
-      r.map((i, e) => /* @__PURE__ */ s(
-        h,
-        {
-          render: /* @__PURE__ */ s(
-            "button",
-            {
-              role: "radio",
-              type: "button",
-              disabled: o,
-              "data-segmented-item": e,
-              "aria-checked": e === t,
-              "data-selected": e === t,
-              onClick: () => e !== t && c(e),
-              children: C(i, "span")
-            }
-          )
-        },
-        e
-      )),
-      n
-    ]
-  }
-);
+import { jsxs as f, jsx as m } from "react/jsx-runtime";
+import v from "classnames";
+import { useState as h, useEffect as _ } from "react";
+import { Composite as y, CompositeItem as C } from "@floating-ui/react";
+import { cssProps as N, wrapNode as j } from "../../utils/helpers.js";
+const k = "Segmented_button_FPqA0", x = "Segmented_segmented_UOs8Z", l = {
+  button: k,
+  segmented: x
+}, A = ({
+  size: u,
+  items: a,
+  selected: t = a[0].value,
+  disabled: s,
+  margin: p,
+  children: c,
+  className: i,
+  style: g,
+  onSelect: o,
+  ...b
+}) => {
+  const [r, n] = h(t);
+  return _(() => {
+    n(t);
+  }, [t]), /* @__PURE__ */ f(
+    y,
+    {
+      ...b,
+      role: "radiogroup",
+      orientation: "horizontal",
+      "data-segmented": !0,
+      "data-disabled": s,
+      className: v(l.segmented, i),
+      style: { ...g, ...N({ size: u, margin: p }) },
+      children: [
+        a.map((e, d) => /* @__PURE__ */ m(
+          C,
+          {
+            render: /* @__PURE__ */ m(
+              "button",
+              {
+                role: "radio",
+                type: "button",
+                disabled: s || e.disabled,
+                "data-segmented-item": d,
+                "aria-checked": e.value === r,
+                "data-selected": e.value === r,
+                className: l.button,
+                onClick: () => {
+                  n(e.value), o == null || o(e.value);
+                },
+                children: j(e.label, "span")
+              }
+            )
+          },
+          d
+        )),
+        c
+      ]
+    }
+  );
+};
 export {
-  w as Segmented
+  A as Segmented
 };

package/dist/components/Tag/Tag.js

@@ -3,6 +3,9 @@ import T from "classnames";
 import { fixedForwardRef as f, wrapNode as c, cssProps as y } from "../../utils/helpers.js";
 const b = "Tag_tag_-ovOm", _ = {
   tag: b,
+  "default-accent": "Tag_default-accent_uUXnO",
+  "solid-accent": "Tag_solid-accent_bbTSM",
+  "plain-accent": "Tag_plain-accent_cqQHI",
   "default-gray": "Tag_default-gray_Ju2wo",
   "solid-gray": "Tag_solid-gray_q6GO4",
   "plain-gray": "Tag_plain-gray_VOC5n",
@@ -36,41 +39,41 @@ const b = "Tag_tag_-ovOm", _ = {
   "default-purple": "Tag_default-purple_oBbek",
   "solid-purple": "Tag_solid-purple_e10WH",
   "plain-purple": "Tag_plain-purple_sVJ5H",
-  "default-accent": "Tag_default-accent_uUXnO",
-  "solid-accent": "Tag_solid-accent_bbTSM",
-  "plain-accent": "Tag_plain-accent_cqQHI"
+  "default-pink": "Tag_default-pink_OAPbj",
+  "solid-pink": "Tag_solid-pink_MDD-Z",
+  "plain-pink": "Tag_plain-pink_cFBKk"
 };
 function w({
   as: d,
   size: g,
   variant: a = "default",
   scheme: l = "gray",
-  title: o,
+  title: i,
   icon: e,
   iconPosition: n = "start",
-  className: i,
+  className: o,
   style: t,
   children: r,
-  ...u
-}, p) {
+  ...p
+}, u) {
   return /* @__PURE__ */ s(
     d ?? "span",
     {
-      ...u,
-      ref: p,
+      ...p,
+      ref: u,
       "data-tag": a,
       "data-scheme": l,
-      className: T(_.tag, _[`${a}-${l}`], i),
+      className: T(_.tag, _[`${a}-${l}`], o),
       style: { ...t, ...y({ size: g }) },
       children: [
         n === "start" && e,
-        c(r || o, "span"),
+        c(r || i, "span"),
         n === "end" && e
       ]
     }
   );
 }
-const x = f(w);
+const V = f(w);
 export {
-  x as Tag
+  V as Tag
 };

package/dist/components/ToggleButton/ToggleButton.js

@@ -1,21 +1,23 @@
 import { jsx as i } from "react/jsx-runtime";
 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,
+import { Button as m } from "../Button/Button.js";
+import "classnames";
+import "../../utils/helpers.js";
+const g = d.forwardRef(
+  ({ selected: o = !1, role: r, ...a }, t) => /* @__PURE__ */ i(
+    m,
     {
-      ...r,
+      ...a,
       ref: t,
-      role: o,
+      role: r,
       "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
+      "data-selected": o,
+      variant: o ? "primary" : "secondary",
+      "aria-checked": r === "radio" ? o : void 0,
+      "aria-pressed": r !== "radio" ? o : void 0
     }
   )
 );
 export {
-  e as ToggleButton
+  g as ToggleButton
 };

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

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