@plexui/ui 0.2.1 → 0.4.0

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

@@ -0,0 +1,58 @@
+import type { ControlSize } from "../../types";
+export type FieldChildProps = {
+    id: string;
+    "aria-describedby"?: string;
+    "aria-invalid"?: boolean;
+};
+export type FieldProps = {
+    /**
+     * Label text for the field
+     */
+    label: React.ReactNode;
+    /**
+     * Helper/description text displayed below the label.
+     * Automatically linked via aria-describedby.
+     */
+    description?: React.ReactNode;
+    /**
+     * Error message displayed below the control.
+     * When provided, the child control receives aria-invalid="true".
+     * Uses the existing FieldError component internally.
+     */
+    errorMessage?: React.ReactNode;
+    /**
+     * Controls the font size of the label to visually match the child control's size.
+     * Matches the ControlSize scale used by Input, Select, etc.
+     * @default "md"
+     */
+    size?: ControlSize;
+    /**
+     * Display a required indicator (asterisk) after the label.
+     * This is purely visual — it does not add the `required` HTML attribute.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Layout direction of label and control.
+     * - "vertical": label stacked above control (default)
+     * - "horizontal": label beside control
+     * @default "vertical"
+     */
+    orientation?: "vertical" | "horizontal";
+    /**
+     * Allows overriding the auto-generated `id`. When provided, this becomes
+     * the id set on the child control and the `htmlFor` on the label.
+     */
+    id?: string;
+    /**
+     * CSS class applied to the root wrapper
+     */
+    className?: string;
+    /**
+     * The form control(s) to render.
+     * - If a single ReactElement, Field clones it with { id, aria-describedby, aria-invalid }.
+     * - If a function (render prop), it is called with { id, "aria-describedby", "aria-invalid" }.
+     */
+    children: React.ReactElement | ((fieldProps: FieldChildProps) => React.ReactNode);
+};
+export declare function Field({ label, description, errorMessage, size, required, orientation, id: idProp, className, children, }: FieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Field/index.d.ts

@@ -0,0 +1 @@
+export { Field, type FieldProps, type FieldChildProps } from "./Field";

package/dist/types/components/SegmentedControl/index.d.ts

@@ -1,2 +1,2 @@
-export { SegmentedControl } from "./SegmentedControl";
-export type { SegmentedControlBadgeProp, SegmentedControlOptionProps, SegmentedControlProps, SizeVariant, } from "./SegmentedControl";
+export { Tabs as SegmentedControl } from "../Tabs";
+export type { TabsBadgeProp as SegmentedControlBadgeProp, TabProps as SegmentedControlOptionProps, TabsProps as SegmentedControlProps, SizeVariant, } from "../Tabs";

package/dist/types/components/Slider/Slider.d.ts

@@ -4,11 +4,7 @@ export type SliderMark = {
     value: number;
     label: string;
 };
-export type SliderProps = {
-    /**
-     * The current value of the slider
-     */
-    value: number;
+type SliderBaseProps = {
     /**
      * The minimum value the slider can have
      */
@@ -21,15 +17,6 @@ export type SliderProps = {
      * The step increment between slider values
      */
     step: number;
-    /**
-     * Value that will be offered as a "reset to default" option
-     */
-    resetValue?: number;
-    /**
-     * String that will be displayed in the tooltip
-     * @default Reset to default
-     */
-    resetTooltip?: string;
     /**
      * Unit to display next to the slider value (e.g., ms, px)
      */
@@ -57,13 +44,55 @@ export type SliderProps = {
     className?: string;
     disabled?: boolean;
     /**
-     * Callback function invoked when the slider value changes.
-     *
-     * @param value - The new value of the slider.
+     * Orientation of the slider
+     * @default "horizontal"
      */
-    onChange: (value: number) => void;
+    orientation?: "horizontal" | "vertical";
     onBlur?: FocusEventHandler<HTMLInputElement>;
     onFocus?: FocusEventHandler<HTMLInputElement>;
     ref?: React.Ref<ElementRef<typeof RadixSlider.Root> | null>;
 };
+type SingleSliderProps = SliderBaseProps & {
+    /**
+     * When false or omitted, the slider has a single thumb
+     */
+    range?: false;
+    /**
+     * The current value of the slider
+     */
+    value: number;
+    /**
+     * Callback function invoked when the slider value changes.
+     */
+    onChange: (value: number) => void;
+    /**
+     * Value that will be offered as a "reset to default" option
+     */
+    resetValue?: number;
+    /**
+     * String that will be displayed in the tooltip
+     * @default Reset to default
+     */
+    resetTooltip?: string;
+};
+type RangeSliderProps = SliderBaseProps & {
+    /**
+     * When true, the slider supports multiple thumbs
+     */
+    range: true;
+    /**
+     * Array of values, one per thumb
+     */
+    value: number[];
+    /**
+     * Callback function invoked when slider values change.
+     */
+    onChange: (value: number[]) => void;
+    /**
+     * Minimum number of steps between thumbs
+     */
+    minStepsBetweenThumbs?: number;
+};
+export type SliderProps = SingleSliderProps | RangeSliderProps;
 export declare const Slider: import("react").MemoExoticComponent<(props: SliderProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/dist/types/components/{SegmentedControl/SegmentedControl.d.ts → Tabs/Tabs.d.ts}

@@ -1,6 +1,8 @@
 import { type ControlSize, type SemanticColors, type Sizes, type Variants } from "../../types";
 export type SizeVariant = "2xs" | "xs" | "sm" | "md" | "lg" | "xl";
-export type SegmentedControlProps<T extends string> = {
+export type TabsVariant = "segmented" | "underline";
+export type TabsOrientation = "horizontal" | "vertical";
+export type TabsProps<T extends string> = {
     /**
      * Controlled value for the group
      */
@@ -14,7 +16,19 @@ export type SegmentedControlProps<T extends string> = {
      */
     "aria-label": string;
     /**
-     * Controls the size of the segmented control
+     * Visual variant of the tab group
+     * - `"segmented"` — background container with sliding highlight (default)
+     * - `"underline"` — no background, animated line indicator under active tab
+     * @default "segmented"
+     */
+    "variant"?: TabsVariant;
+    /**
+     * Orientation of the tab layout
+     * @default "horizontal"
+     */
+    "orientation"?: TabsOrientation;
+    /**
+     * Controls the size of the tabs
      *
      * | 3xs     | 2xs     | xs      | sm      | md      | lg      | xl      | 2xl     | 3xl     |
      * | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- |
@@ -39,38 +53,40 @@ export type SegmentedControlProps<T extends string> = {
      */
     "block"?: boolean;
     /**
-     * Determines if the segment control, and its options, should be a fully rounded pill shape.
+     * Determines if the tabs should be a fully rounded pill shape.
+     * Only applies to the `"segmented"` variant.
      * @default true
      */
     "pill"?: boolean;
     "className"?: string;
     "children": React.ReactNode;
 };
-export declare const SegmentedControl: {
-    <T extends string>({ value, onChange, children, block, pill, size, gutterSize, className, onClick, ...restProps }: SegmentedControlProps<T>): import("react/jsx-runtime").JSX.Element;
-    Option: ({ children, icon, badge, ...restProps }: SegmentedControlOptionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tabs: {
+    <T extends string>({ value, onChange, children, variant, orientation, block, pill, size, gutterSize, className, onClick, ...restProps }: TabsProps<T>): import("react/jsx-runtime").JSX.Element;
+    Tab: ({ children, icon, badge, ...restProps }: TabProps) => import("react/jsx-runtime").JSX.Element;
+    Option: ({ children, icon, badge, ...restProps }: TabProps) => import("react/jsx-runtime").JSX.Element;
 };
 /**
- * Badge configuration for SegmentedControl.Option
+ * Badge configuration for Tabs.Tab
  */
-export type SegmentedControlBadgeProp = React.ReactNode | {
+export type TabsBadgeProp = React.ReactNode | {
     content: React.ReactNode;
     color?: SemanticColors<"secondary" | "success" | "danger" | "warning" | "info" | "discovery" | "caution">;
     variant?: Variants<"soft" | "solid">;
     pill?: boolean;
     loading?: boolean;
 };
-export type SegmentedControlOptionProps = {
+export type TabProps = {
     /**
-     * Option value
+     * Tab value
      */
     "value": string;
     /**
-     * Text read aloud to screen readers when the option is focused
+     * Text read aloud to screen readers when the tab is focused
      */
     "aria-label"?: string;
     /**
-     * Text content to render in the option
+     * Text content to render in the tab
      */
     "children"?: React.ReactNode;
     /**
@@ -83,9 +99,9 @@ export type SegmentedControlOptionProps = {
      * @example badge={5}
      * @example badge={{ content: 5, color: "danger" }}
      */
-    "badge"?: SegmentedControlBadgeProp;
+    "badge"?: TabsBadgeProp;
     /**
-     * Disable the individual option
+     * Disable the individual tab
      */
     "disabled"?: boolean;
 };

package/dist/types/components/Tabs/index.d.ts

@@ -0,0 +1,2 @@
+export { Tabs } from "./Tabs";
+export type { TabsBadgeProp, TabsOrientation, TabsProps, TabsVariant, TabProps, SizeVariant, } from "./Tabs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plexui/ui",
-  "version": "0.2.1",
+  "version": "0.4.0",
   "description": "Modern design system for building high-quality applications",
   "type": "module",
   "license": "MIT",

package/dist/es/components/SegmentedControl/SegmentedControl.js

@@ -1,118 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
-import { ToggleGroup } from "radix-ui";
-import { useCallback, useLayoutEffect, useRef } from "react";
-import { useResizeObserver } from "usehooks-ts";
-import { handlePressableMouseEnter, waitForAnimationFrame } from "../../lib/helpers";
-import {} from "../../types";
-import { LoadingIndicator } from "../Indicator";
-import s from "./SegmentedControl.module.css";
-export const SegmentedControl = ({ value, onChange, children, block, pill = true, size = "md", gutterSize, className, onClick, ...restProps }) => {
-    const rootRef = useRef(null);
-    const thumbRef = useRef(null);
-    const prevSizeRef = useRef(size);
-    const applyThumbSizing = useCallback((attemptScroll) => {
-        const root = rootRef.current;
-        const thumb = thumbRef.current;
-        if (!root || !thumb) {
-            return;
-        }
-        // Get selected node
-        const activeNode = root?.querySelector('[data-state="on"]');
-        // Impossible
-        if (!activeNode) {
-            return;
-        }
-        const rootWidth = root.clientWidth;
-        let targetWidth = Math.floor(activeNode.clientWidth);
-        const targetOffset = activeNode.offsetLeft;
-        // Detect if the thumb is moving too far to the edge of the container.
-        // This would most commonly be due to subpixel widths adding up to excessive distance.
-        if (rootWidth - (targetWidth + targetOffset) < 2) {
-            targetWidth = targetWidth - 1;
-        }
-        thumb.style.width = `${Math.floor(targetWidth)}px`;
-        thumb.style.transform = `translateX(${targetOffset}px)`;
-        // If the control is scrollable, ensure the active option is visible
-        if (root.scrollWidth > rootWidth) {
-            // Only scroll items near the edge, but not the inner 2/3.
-            const buffer = rootWidth * 0.15;
-            const scrollLeft = root.scrollLeft;
-            const left = activeNode.offsetLeft;
-            const right = left + targetWidth;
-            if (left < scrollLeft + buffer || right > scrollLeft + rootWidth - buffer) {
-                // Cheap trick to avoid unintentional scroll on mount - transition is set after mounting
-                if (attemptScroll) {
-                    activeNode.scrollIntoView({ block: "nearest", inline: "center", behavior: "smooth" });
-                }
-            }
-        }
-    }, []);
-    useResizeObserver({
-        // @ts-expect-error(2322) -- bug in types: https://github.com/juliencrn/usehooks-ts/issues/663
-        ref: rootRef,
-        onResize: () => {
-            const thumb = thumbRef.current;
-            if (!thumb) {
-                return;
-            }
-            // Perform the size update instantly
-            const currentTransition = thumb.style.transition;
-            thumb.style.transition = "";
-            applyThumbSizing(false);
-            thumb.style.transition = currentTransition;
-        },
-    });
-    useLayoutEffect(() => {
-        const root = rootRef.current;
-        const thumb = thumbRef.current;
-        if (!root || !thumb) {
-            return;
-        }
-        const sizeChanged = prevSizeRef.current !== size;
-        prevSizeRef.current = size;
-        if (sizeChanged) {
-            // Size changed - disable transition, wait for CSS, then apply sizing
-            const currentTransition = thumb.style.transition;
-            thumb.style.transition = "";
-            waitForAnimationFrame(() => {
-                applyThumbSizing(false);
-                waitForAnimationFrame(() => {
-                    thumb.style.transition = currentTransition;
-                });
-            });
-        }
-        else {
-            // Normal update (value change, etc.)
-            waitForAnimationFrame(() => {
-                applyThumbSizing(!!thumb.style.transition);
-                // Apply transition after initial calculation is set
-                if (!thumb.style.transition) {
-                    waitForAnimationFrame(() => {
-                        thumb.style.transition =
-                            "width 300ms var(--cubic-enter), transform 300ms var(--cubic-enter)";
-                    });
-                }
-            });
-        }
-    }, [applyThumbSizing, value, size, gutterSize, pill]);
-    const handleValueChange = (nextValue) => {
-        // Only trigger onChange when a value exists
-        // Disallow toggling off enabled items
-        if (nextValue && onChange)
-            onChange(nextValue);
-    };
-    return (_jsxs(ToggleGroup.Root, { ref: rootRef, className: clsx(s.SegmentedControl, className), type: "single", value: value, loop: false, onValueChange: handleValueChange, onClick: onClick, "data-block": block ? "" : undefined, "data-pill": pill ? "" : undefined, "data-size": size, "data-gutter-size": gutterSize, ...restProps, children: [_jsx("div", { className: s.SegmentedControlThumb, ref: thumbRef }), children] }));
-};
-// Type guard for badge object form
-const isBadgeObject = (badge) => {
-    return badge != null && typeof badge === "object" && "content" in badge;
-};
-const Segment = ({ children, icon, badge, ...restProps }) => {
-    // Normalize badge prop
-    const badgeProps = badge != null ? (isBadgeObject(badge) ? badge : { content: badge }) : null;
-    return (_jsx(ToggleGroup.Item, { className: s.SegmentedControlOption, ...restProps, onPointerEnter: handlePressableMouseEnter, children: _jsxs("span", { className: s.SegmentedControlOptionContent, children: [icon, children && _jsx("span", { children: children }), badgeProps && (_jsx("span", { className: s.OptionBadge, "data-color": badgeProps.color ?? "secondary", "data-variant": badgeProps.variant ?? "soft", "data-pill": badgeProps.pill ? "" : undefined, children: badgeProps.loading ? _jsx(LoadingIndicator, {}) : badgeProps.content }))] }) }));
-};
-SegmentedControl.Option = Segment;
-//# sourceMappingURL=SegmentedControl.js.map

package/dist/es/components/SegmentedControl/SegmentedControl.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SegmentedControl.js","sourceRoot":"","sources":["../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { ToggleGroup } from \"radix-ui\"\nimport { useCallback, useLayoutEffect, useRef } from \"react\"\nimport { useResizeObserver } from \"usehooks-ts\"\nimport { handlePressableMouseEnter, waitForAnimationFrame } from \"../../lib/helpers\"\nimport { type ControlSize, type SemanticColors, type Sizes, type Variants } from \"../../types\"\nimport { LoadingIndicator } from \"../Indicator\"\nimport s from \"./SegmentedControl.module.css\"\n\nexport type SizeVariant = \"2xs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"\n\nexport type SegmentedControlProps<T extends string> = {\n  /**\n   * Controlled value for the group\n   */\n  \"value\": T\n  /** Callback for when a new value is selected */\n  \"onChange\"?: (nextValue: T) => void\n  /** Callback any time the control is clicked (even if a new value was not selected) */\n  \"onClick\"?: () => void\n  /**\n   * Text read aloud to screen readers when the control is focused\n   */\n  \"aria-label\": string\n  /**\n   * Controls the size of the segmented control\n   *\n   * | 3xs     | 2xs     | xs      | sm      | md      | lg      | xl      | 2xl     | 3xl     |\n   * | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- |\n   * | `22px`  | `24px`  | `26px`  | `28px`  | `32px`  | `36px`  | `40px`  | `44px`  | `48px`  |\n   *\n   * @default md\n   */\n  \"size\"?: ControlSize\n  /**\n   * Controls gutter on the edges of the button, defaults to value from `size`.\n   *\n   * | 2xs    | xs     | sm     | md     | lg     | xl     |\n   * | ------ | ------ | ------ | ------ | ------ | ------ |\n   * | `6px`  | `8px`  | `10px` | `12px` | `14px` | `16px` |\n   */\n  \"gutterSize\"?: Sizes<\"2xs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\">\n  /** Disable the entire group */\n  \"disabled\"?: boolean\n  /**\n   * Display the control as a block element with equal width segments\n   * @default false\n   */\n  \"block\"?: boolean\n  /**\n   * Determines if the segment control, and its options, should be a fully rounded pill shape.\n   * @default true\n   */\n  \"pill\"?: boolean\n  \"className\"?: string\n  \"children\": React.ReactNode\n}\n\nexport const SegmentedControl = <T extends string>({\n  value,\n  onChange,\n  children,\n  block,\n  pill = true,\n  size = \"md\",\n  gutterSize,\n  className,\n  onClick,\n  ...restProps\n}: SegmentedControlProps<T>) => {\n  const rootRef = useRef<HTMLDivElement>(null)\n  const thumbRef = useRef<HTMLDivElement>(null)\n  const prevSizeRef = useRef(size)\n\n  const applyThumbSizing = useCallback((attemptScroll: boolean) => {\n    const root = rootRef.current\n    const thumb = thumbRef.current\n\n    if (!root || !thumb) {\n      return\n    }\n\n    // Get selected node\n    const activeNode = root?.querySelector<HTMLDivElement>('[data-state=\"on\"]')\n\n    // Impossible\n    if (!activeNode) {\n      return\n    }\n\n    const rootWidth = root.clientWidth\n    let targetWidth = Math.floor(activeNode.clientWidth)\n    const targetOffset = activeNode.offsetLeft\n\n    // Detect if the thumb is moving too far to the edge of the container.\n    // This would most commonly be due to subpixel widths adding up to excessive distance.\n    if (rootWidth - (targetWidth + targetOffset) < 2) {\n      targetWidth = targetWidth - 1\n    }\n\n    thumb.style.width = `${Math.floor(targetWidth)}px`\n    thumb.style.transform = `translateX(${targetOffset}px)`\n\n    // If the control is scrollable, ensure the active option is visible\n    if (root.scrollWidth > rootWidth) {\n      // Only scroll items near the edge, but not the inner 2/3.\n      const buffer = rootWidth * 0.15\n      const scrollLeft = root.scrollLeft\n      const left = activeNode.offsetLeft\n      const right = left + targetWidth\n      if (left < scrollLeft + buffer || right > scrollLeft + rootWidth - buffer) {\n        // Cheap trick to avoid unintentional scroll on mount - transition is set after mounting\n        if (attemptScroll) {\n          activeNode.scrollIntoView({ block: \"nearest\", inline: \"center\", behavior: \"smooth\" })\n        }\n      }\n    }\n  }, [])\n\n  useResizeObserver({\n    // @ts-expect-error(2322) -- bug in types: https://github.com/juliencrn/usehooks-ts/issues/663\n    ref: rootRef,\n    onResize: () => {\n      const thumb = thumbRef.current\n\n      if (!thumb) {\n        return\n      }\n\n      // Perform the size update instantly\n      const currentTransition = thumb.style.transition\n      thumb.style.transition = \"\"\n      applyThumbSizing(false)\n      thumb.style.transition = currentTransition\n    },\n  })\n\n  useLayoutEffect(() => {\n    const root = rootRef.current\n    const thumb = thumbRef.current\n\n    if (!root || !thumb) {\n      return\n    }\n\n    const sizeChanged = prevSizeRef.current !== size\n    prevSizeRef.current = size\n\n    if (sizeChanged) {\n      // Size changed - disable transition, wait for CSS, then apply sizing\n      const currentTransition = thumb.style.transition\n      thumb.style.transition = \"\"\n\n      waitForAnimationFrame(() => {\n        applyThumbSizing(false)\n        waitForAnimationFrame(() => {\n          thumb.style.transition = currentTransition\n        })\n      })\n    } else {\n      // Normal update (value change, etc.)\n      waitForAnimationFrame(() => {\n        applyThumbSizing(!!thumb.style.transition)\n\n        // Apply transition after initial calculation is set\n        if (!thumb.style.transition) {\n          waitForAnimationFrame(() => {\n            thumb.style.transition =\n              \"width 300ms var(--cubic-enter), transform 300ms var(--cubic-enter)\"\n          })\n        }\n      })\n    }\n  }, [applyThumbSizing, value, size, gutterSize, pill])\n\n  const handleValueChange = (nextValue: T) => {\n    // Only trigger onChange when a value exists\n    // Disallow toggling off enabled items\n    if (nextValue && onChange) onChange(nextValue)\n  }\n\n  return (\n    <ToggleGroup.Root\n      ref={rootRef}\n      className={clsx(s.SegmentedControl, className)}\n      type=\"single\"\n      value={value}\n      loop={false}\n      onValueChange={handleValueChange}\n      onClick={onClick}\n      data-block={block ? \"\" : undefined}\n      data-pill={pill ? \"\" : undefined}\n      data-size={size}\n      data-gutter-size={gutterSize}\n      {...restProps}\n    >\n      <div className={s.SegmentedControlThumb} ref={thumbRef} />\n      {children}\n    </ToggleGroup.Root>\n  )\n}\n\n/**\n * Badge configuration for SegmentedControl.Option\n */\nexport type SegmentedControlBadgeProp =\n  | React.ReactNode\n  | {\n      content: React.ReactNode\n      color?: SemanticColors<\n        \"secondary\" | \"success\" | \"danger\" | \"warning\" | \"info\" | \"discovery\" | \"caution\"\n      >\n      variant?: Variants<\"soft\" | \"solid\">\n      pill?: boolean\n      loading?: boolean\n    }\n\nexport type SegmentedControlOptionProps = {\n  /**\n   * Option value\n   */\n  \"value\": string\n  /**\n   * Text read aloud to screen readers when the option is focused\n   */\n  \"aria-label\"?: string\n  /**\n   * Text content to render in the option\n   */\n  \"children\"?: React.ReactNode\n  /**\n   * Icon to render before the text content\n   */\n  \"icon\"?: React.ReactNode\n  /**\n   * Badge to render after the text content.\n   * Can be a simple value or an object with content, color, variant, and loading options.\n   * @example badge={5}\n   * @example badge={{ content: 5, color: \"danger\" }}\n   */\n  \"badge\"?: SegmentedControlBadgeProp\n  /**\n   * Disable the individual option\n   */\n  \"disabled\"?: boolean\n}\n\n// Type guard for badge object form\nconst isBadgeObject = (\n  badge: SegmentedControlBadgeProp,\n): badge is Exclude<SegmentedControlBadgeProp, React.ReactNode> & { content: React.ReactNode } => {\n  return badge != null && typeof badge === \"object\" && \"content\" in badge\n}\n\nconst Segment = ({ children, icon, badge, ...restProps }: SegmentedControlOptionProps) => {\n  // Normalize badge prop\n  const badgeProps = badge != null ? (isBadgeObject(badge) ? badge : { content: badge }) : null\n\n  return (\n    <ToggleGroup.Item\n      className={s.SegmentedControlOption}\n      {...restProps}\n      onPointerEnter={handlePressableMouseEnter}\n    >\n      <span className={s.SegmentedControlOptionContent}>\n        {icon}\n        {children && <span>{children}</span>}\n        {badgeProps && (\n          <span\n            className={s.OptionBadge}\n            data-color={badgeProps.color ?? \"secondary\"}\n            data-variant={badgeProps.variant ?? \"soft\"}\n            data-pill={badgeProps.pill ? \"\" : undefined}\n          >\n            {badgeProps.loading ? <LoadingIndicator /> : badgeProps.content}\n          </span>\n        )}\n      </span>\n    </ToggleGroup.Item>\n  )\n}\n\nSegmentedControl.Option = Segment\n"]}