@plexui/ui 0.3.0 → 0.4.1

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

@@ -1,2 +1,2 @@
-export { SegmentedControl } from "./SegmentedControl";
+export { Tabs as SegmentedControl } from "../Tabs";
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/SegmentedControl/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA","sourcesContent":["export { SegmentedControl } from \"./SegmentedControl\"\nexport type {\n  SegmentedControlBadgeProp,\n  SegmentedControlOptionProps,\n  SegmentedControlProps,\n  SizeVariant,\n} from \"./SegmentedControl\"\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/SegmentedControl/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,IAAI,gBAAgB,EAAE,MAAM,SAAS,CAAA","sourcesContent":["export { Tabs as SegmentedControl } from \"../Tabs\"\nexport type {\n  TabsBadgeProp as SegmentedControlBadgeProp,\n  TabProps as SegmentedControlOptionProps,\n  TabsProps as SegmentedControlProps,\n  SizeVariant,\n} from \"../Tabs\"\n"]}

package/dist/es/components/Tabs/Tabs.js

@@ -0,0 +1,153 @@
+"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 "./Tabs.module.css";
+export const Tabs = ({ value, onChange, children, variant = "segmented", orientation = "horizontal", block, pill = true, size = "md", gutterSize, className, onClick, ...restProps }) => {
+    const rootRef = useRef(null);
+    const thumbRef = useRef(null);
+    const prevSizeRef = useRef(size);
+    const isVertical = orientation === "vertical";
+    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;
+        }
+        if (isVertical) {
+            const rootHeight = root.clientHeight;
+            let targetHeight = Math.floor(activeNode.clientHeight);
+            const targetOffset = activeNode.offsetTop;
+            // Detect subpixel edge case
+            if (rootHeight - (targetHeight + targetOffset) < 2) {
+                targetHeight = targetHeight - 1;
+            }
+            thumb.style.height = `${Math.floor(targetHeight)}px`;
+            thumb.style.width = "";
+            thumb.style.transform = `translateY(${targetOffset}px)`;
+            // Scroll into view if needed
+            if (root.scrollHeight > rootHeight) {
+                const buffer = rootHeight * 0.15;
+                const scrollTop = root.scrollTop;
+                const top = activeNode.offsetTop;
+                const bottom = top + targetHeight;
+                if (top < scrollTop + buffer || bottom > scrollTop + rootHeight - buffer) {
+                    if (attemptScroll) {
+                        activeNode.scrollIntoView({ block: "center", inline: "nearest", behavior: "smooth" });
+                    }
+                }
+            }
+        }
+        else {
+            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.height = "";
+            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" });
+                    }
+                }
+            }
+        }
+    }, [isVertical]);
+    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;
+        },
+    });
+    const transitionProperty = isVertical
+        ? "height 300ms var(--cubic-enter), transform 300ms var(--cubic-enter)"
+        : "width 300ms var(--cubic-enter), transform 300ms var(--cubic-enter)";
+    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 = transitionProperty;
+                    });
+                }
+            });
+        }
+    }, [applyThumbSizing, value, size, gutterSize, pill, transitionProperty]);
+    const handleValueChange = (nextValue) => {
+        // Only trigger onChange when a value exists
+        // Disallow toggling off enabled items
+        if (nextValue && onChange)
+            onChange(nextValue);
+    };
+    // Only apply pill for segmented variant
+    const isPill = variant === "segmented" && pill;
+    return (_jsxs(ToggleGroup.Root, { ref: rootRef, className: clsx(s.Tabs, className), type: "single", value: value, loop: false, onValueChange: handleValueChange, onClick: onClick, "data-variant": variant, "data-orientation": orientation, "data-block": block ? "" : undefined, "data-pill": isPill ? "" : undefined, "data-size": size, "data-gutter-size": gutterSize, ...restProps, children: [_jsx("div", { className: s.TabsThumb, ref: thumbRef }), children] }));
+};
+// Type guard for badge object form
+const isBadgeObject = (badge) => {
+    return badge != null && typeof badge === "object" && "content" in badge;
+};
+const Tab = ({ children, icon, badge, ...restProps }) => {
+    // Normalize badge prop
+    const badgeProps = badge != null ? (isBadgeObject(badge) ? badge : { content: badge }) : null;
+    return (_jsx(ToggleGroup.Item, { className: s.Tab, ...restProps, onPointerEnter: handlePressableMouseEnter, children: _jsxs("span", { className: s.TabContent, children: [icon, children && _jsx("span", { children: children }), badgeProps && (_jsx("span", { className: s.TabBadge, "data-color": badgeProps.color ?? "secondary", "data-variant": badgeProps.variant ?? "soft", "data-pill": badgeProps.pill ? "" : undefined, children: badgeProps.loading ? _jsx(LoadingIndicator, {}) : badgeProps.content }))] }) }));
+};
+// Attach sub-components
+Tabs.Tab = Tab;
+// Backward-compat alias
+Tabs.Option = Tab;
+//# sourceMappingURL=Tabs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AACtC,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAA;AAC/C,OAAO,EAAE,yBAAyB,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AACpF,OAAO,EAAoE,MAAM,aAAa,CAAA;AAC9F,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,CAAC,MAAM,mBAAmB,CAAA;AAmEjC,MAAM,CAAC,MAAM,IAAI,GAAG,CAAmB,EACrC,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,OAAO,GAAG,WAAW,EACrB,WAAW,GAAG,YAAY,EAC1B,KAAK,EACL,IAAI,GAAG,IAAI,EACX,IAAI,GAAG,IAAI,EACX,UAAU,EACV,SAAS,EACT,OAAO,EACP,GAAG,SAAS,EACC,EAAE,EAAE;IACjB,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC5C,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC7C,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;IAChC,MAAM,UAAU,GAAG,WAAW,KAAK,UAAU,CAAA;IAE7C,MAAM,gBAAgB,GAAG,WAAW,CAClC,CAAC,aAAsB,EAAE,EAAE;QACzB,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAA;QAC5B,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAA;QAE9B,IAAI,CAAC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACpB,OAAM;QACR,CAAC;QAED,oBAAoB;QACpB,MAAM,UAAU,GAAG,IAAI,EAAE,aAAa,CAAiB,mBAAmB,CAAC,CAAA;QAE3E,aAAa;QACb,IAAI,CAAC,UAAU,EAAE,CAAC;YAChB,OAAM;QACR,CAAC;QAED,IAAI,UAAU,EAAE,CAAC;YACf,MAAM,UAAU,GAAG,IAAI,CAAC,YAAY,CAAA;YACpC,IAAI,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAA;YACtD,MAAM,YAAY,GAAG,UAAU,CAAC,SAAS,CAAA;YAEzC,4BAA4B;YAC5B,IAAI,UAAU,GAAG,CAAC,YAAY,GAAG,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC;gBACnD,YAAY,GAAG,YAAY,GAAG,CAAC,CAAA;YACjC,CAAC;YAED,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,CAAA;YACpD,KAAK,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAA;YACtB,KAAK,CAAC,KAAK,CAAC,SAAS,GAAG,cAAc,YAAY,KAAK,CAAA;YAEvD,6BAA6B;YAC7B,IAAI,IAAI,CAAC,YAAY,GAAG,UAAU,EAAE,CAAC;gBACnC,MAAM,MAAM,GAAG,UAAU,GAAG,IAAI,CAAA;gBAChC,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAA;gBAChC,MAAM,GAAG,GAAG,UAAU,CAAC,SAAS,CAAA;gBAChC,MAAM,MAAM,GAAG,GAAG,GAAG,YAAY,CAAA;gBACjC,IAAI,GAAG,GAAG,SAAS,GAAG,MAAM,IAAI,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,EAAE,CAAC;oBACzE,IAAI,aAAa,EAAE,CAAC;wBAClB,UAAU,CAAC,cAAc,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAA;oBACvF,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC;aAAM,CAAC;YACN,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,CAAA;YAClC,IAAI,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAA;YACpD,MAAM,YAAY,GAAG,UAAU,CAAC,UAAU,CAAA;YAE1C,sEAAsE;YACtE,sFAAsF;YACtF,IAAI,SAAS,GAAG,CAAC,WAAW,GAAG,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC;gBACjD,WAAW,GAAG,WAAW,GAAG,CAAC,CAAA;YAC/B,CAAC;YAED,KAAK,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAA;YAClD,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,EAAE,CAAA;YACvB,KAAK,CAAC,KAAK,CAAC,SAAS,GAAG,cAAc,YAAY,KAAK,CAAA;YAEvD,oEAAoE;YACpE,IAAI,IAAI,CAAC,WAAW,GAAG,SAAS,EAAE,CAAC;gBACjC,0DAA0D;gBAC1D,MAAM,MAAM,GAAG,SAAS,GAAG,IAAI,CAAA;gBAC/B,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAA;gBAClC,MAAM,IAAI,GAAG,UAAU,CAAC,UAAU,CAAA;gBAClC,MAAM,KAAK,GAAG,IAAI,GAAG,WAAW,CAAA;gBAChC,IAAI,IAAI,GAAG,UAAU,GAAG,MAAM,IAAI,KAAK,GAAG,UAAU,GAAG,SAAS,GAAG,MAAM,EAAE,CAAC;oBAC1E,wFAAwF;oBACxF,IAAI,aAAa,EAAE,CAAC;wBAClB,UAAU,CAAC,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAA;oBACvF,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC,EACD,CAAC,UAAU,CAAC,CACb,CAAA;IAED,iBAAiB,CAAC;QAChB,8FAA8F;QAC9F,GAAG,EAAE,OAAO;QACZ,QAAQ,EAAE,GAAG,EAAE;YACb,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAA;YAE9B,IAAI,CAAC,KAAK,EAAE,CAAC;gBACX,OAAM;YACR,CAAC;YAED,oCAAoC;YACpC,MAAM,iBAAiB,GAAG,KAAK,CAAC,KAAK,CAAC,UAAU,CAAA;YAChD,KAAK,CAAC,KAAK,CAAC,UAAU,GAAG,EAAE,CAAA;YAC3B,gBAAgB,CAAC,KAAK,CAAC,CAAA;YACvB,KAAK,CAAC,KAAK,CAAC,UAAU,GAAG,iBAAiB,CAAA;QAC5C,CAAC;KACF,CAAC,CAAA;IAEF,MAAM,kBAAkB,GAAG,UAAU;QACnC,CAAC,CAAC,qEAAqE;QACvE,CAAC,CAAC,oEAAoE,CAAA;IAExE,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAA;QAC5B,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAA;QAE9B,IAAI,CAAC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACpB,OAAM;QACR,CAAC;QAED,MAAM,WAAW,GAAG,WAAW,CAAC,OAAO,KAAK,IAAI,CAAA;QAChD,WAAW,CAAC,OAAO,GAAG,IAAI,CAAA;QAE1B,IAAI,WAAW,EAAE,CAAC;YAChB,qEAAqE;YACrE,MAAM,iBAAiB,GAAG,KAAK,CAAC,KAAK,CAAC,UAAU,CAAA;YAChD,KAAK,CAAC,KAAK,CAAC,UAAU,GAAG,EAAE,CAAA;YAE3B,qBAAqB,CAAC,GAAG,EAAE;gBACzB,gBAAgB,CAAC,KAAK,CAAC,CAAA;gBACvB,qBAAqB,CAAC,GAAG,EAAE;oBACzB,KAAK,CAAC,KAAK,CAAC,UAAU,GAAG,iBAAiB,CAAA;gBAC5C,CAAC,CAAC,CAAA;YACJ,CAAC,CAAC,CAAA;QACJ,CAAC;aAAM,CAAC;YACN,qCAAqC;YACrC,qBAAqB,CAAC,GAAG,EAAE;gBACzB,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,CAAA;gBAE1C,oDAAoD;gBACpD,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;oBAC5B,qBAAqB,CAAC,GAAG,EAAE;wBACzB,KAAK,CAAC,KAAK,CAAC,UAAU,GAAG,kBAAkB,CAAA;oBAC7C,CAAC,CAAC,CAAA;gBACJ,CAAC;YACH,CAAC,CAAC,CAAA;QACJ,CAAC;IACH,CAAC,EAAE,CAAC,gBAAgB,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,kBAAkB,CAAC,CAAC,CAAA;IAEzE,MAAM,iBAAiB,GAAG,CAAC,SAAY,EAAE,EAAE;QACzC,4CAA4C;QAC5C,sCAAsC;QACtC,IAAI,SAAS,IAAI,QAAQ;YAAE,QAAQ,CAAC,SAAS,CAAC,CAAA;IAChD,CAAC,CAAA;IAED,wCAAwC;IACxC,MAAM,MAAM,GAAG,OAAO,KAAK,WAAW,IAAI,IAAI,CAAA;IAE9C,OAAO,CACL,MAAC,WAAW,CAAC,IAAI,IACf,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAClC,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,KAAK,EACX,aAAa,EAAE,iBAAiB,EAChC,OAAO,EAAE,OAAO,kBACF,OAAO,sBACH,WAAW,gBACjB,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,eACvB,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,eACvB,IAAI,sBACG,UAAU,KACxB,SAAS,aAEb,cAAK,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,GAAG,EAAE,QAAQ,GAAI,EAC7C,QAAQ,IACQ,CACpB,CAAA;AACH,CAAC,CAAA;AA+CD,mCAAmC;AACnC,MAAM,aAAa,GAAG,CACpB,KAAoB,EAC6D,EAAE;IACnF,OAAO,KAAK,IAAI,IAAI,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,SAAS,IAAI,KAAK,CAAA;AACzE,CAAC,CAAA;AAED,MAAM,GAAG,GAAG,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,SAAS,EAAY,EAAE,EAAE;IAChE,uBAAuB;IACvB,MAAM,UAAU,GAAG,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;IAE7F,OAAO,CACL,KAAC,WAAW,CAAC,IAAI,IACf,SAAS,EAAE,CAAC,CAAC,GAAG,KACZ,SAAS,EACb,cAAc,EAAE,yBAAyB,YAEzC,gBAAM,SAAS,EAAE,CAAC,CAAC,UAAU,aAC1B,IAAI,EACJ,QAAQ,IAAI,yBAAO,QAAQ,GAAQ,EACnC,UAAU,IAAI,CACb,eACE,SAAS,EAAE,CAAC,CAAC,QAAQ,gBACT,UAAU,CAAC,KAAK,IAAI,WAAW,kBAC7B,UAAU,CAAC,OAAO,IAAI,MAAM,eAC/B,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,YAE1C,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,KAAC,gBAAgB,KAAG,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,GAC1D,CACR,IACI,GACU,CACpB,CAAA;AACH,CAAC,CAAA;AAED,wBAAwB;AACxB,IAAI,CAAC,GAAG,GAAG,GAAG,CAAA;AACd,wBAAwB;AACxB,IAAI,CAAC,MAAM,GAAG,GAAG,CAAA","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 \"./Tabs.module.css\"\n\nexport type SizeVariant = \"2xs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"\n\nexport type TabsVariant = \"segmented\" | \"underline\"\nexport type TabsOrientation = \"horizontal\" | \"vertical\"\n\nexport type TabsProps<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   * Visual variant of the tab group\n   * - `\"segmented\"` — background container with sliding highlight (default)\n   * - `\"underline\"` — no background, animated line indicator under active tab\n   * @default \"segmented\"\n   */\n  \"variant\"?: TabsVariant\n  /**\n   * Orientation of the tab layout\n   * @default \"horizontal\"\n   */\n  \"orientation\"?: TabsOrientation\n  /**\n   * Controls the size of the tabs\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 tabs should be a fully rounded pill shape.\n   * Only applies to the `\"segmented\"` variant.\n   * @default true\n   */\n  \"pill\"?: boolean\n  \"className\"?: string\n  \"children\": React.ReactNode\n}\n\nexport const Tabs = <T extends string>({\n  value,\n  onChange,\n  children,\n  variant = \"segmented\",\n  orientation = \"horizontal\",\n  block,\n  pill = true,\n  size = \"md\",\n  gutterSize,\n  className,\n  onClick,\n  ...restProps\n}: TabsProps<T>) => {\n  const rootRef = useRef<HTMLDivElement>(null)\n  const thumbRef = useRef<HTMLDivElement>(null)\n  const prevSizeRef = useRef(size)\n  const isVertical = orientation === \"vertical\"\n\n  const applyThumbSizing = useCallback(\n    (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      if (isVertical) {\n        const rootHeight = root.clientHeight\n        let targetHeight = Math.floor(activeNode.clientHeight)\n        const targetOffset = activeNode.offsetTop\n\n        // Detect subpixel edge case\n        if (rootHeight - (targetHeight + targetOffset) < 2) {\n          targetHeight = targetHeight - 1\n        }\n\n        thumb.style.height = `${Math.floor(targetHeight)}px`\n        thumb.style.width = \"\"\n        thumb.style.transform = `translateY(${targetOffset}px)`\n\n        // Scroll into view if needed\n        if (root.scrollHeight > rootHeight) {\n          const buffer = rootHeight * 0.15\n          const scrollTop = root.scrollTop\n          const top = activeNode.offsetTop\n          const bottom = top + targetHeight\n          if (top < scrollTop + buffer || bottom > scrollTop + rootHeight - buffer) {\n            if (attemptScroll) {\n              activeNode.scrollIntoView({ block: \"center\", inline: \"nearest\", behavior: \"smooth\" })\n            }\n          }\n        }\n      } else {\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.height = \"\"\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    [isVertical],\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  const transitionProperty = isVertical\n    ? \"height 300ms var(--cubic-enter), transform 300ms var(--cubic-enter)\"\n    : \"width 300ms var(--cubic-enter), transform 300ms var(--cubic-enter)\"\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 = transitionProperty\n          })\n        }\n      })\n    }\n  }, [applyThumbSizing, value, size, gutterSize, pill, transitionProperty])\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  // Only apply pill for segmented variant\n  const isPill = variant === \"segmented\" && pill\n\n  return (\n    <ToggleGroup.Root\n      ref={rootRef}\n      className={clsx(s.Tabs, className)}\n      type=\"single\"\n      value={value}\n      loop={false}\n      onValueChange={handleValueChange}\n      onClick={onClick}\n      data-variant={variant}\n      data-orientation={orientation}\n      data-block={block ? \"\" : undefined}\n      data-pill={isPill ? \"\" : undefined}\n      data-size={size}\n      data-gutter-size={gutterSize}\n      {...restProps}\n    >\n      <div className={s.TabsThumb} ref={thumbRef} />\n      {children}\n    </ToggleGroup.Root>\n  )\n}\n\n/**\n * Badge configuration for Tabs.Tab\n */\nexport type TabsBadgeProp =\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 TabProps = {\n  /**\n   * Tab value\n   */\n  \"value\": string\n  /**\n   * Text read aloud to screen readers when the tab is focused\n   */\n  \"aria-label\"?: string\n  /**\n   * Text content to render in the tab\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\"?: TabsBadgeProp\n  /**\n   * Disable the individual tab\n   */\n  \"disabled\"?: boolean\n}\n\n// Type guard for badge object form\nconst isBadgeObject = (\n  badge: TabsBadgeProp,\n): badge is Exclude<TabsBadgeProp, React.ReactNode> & { content: React.ReactNode } => {\n  return badge != null && typeof badge === \"object\" && \"content\" in badge\n}\n\nconst Tab = ({ children, icon, badge, ...restProps }: TabProps) => {\n  // Normalize badge prop\n  const badgeProps = badge != null ? (isBadgeObject(badge) ? badge : { content: badge }) : null\n\n  return (\n    <ToggleGroup.Item\n      className={s.Tab}\n      {...restProps}\n      onPointerEnter={handlePressableMouseEnter}\n    >\n      <span className={s.TabContent}>\n        {icon}\n        {children && <span>{children}</span>}\n        {badgeProps && (\n          <span\n            className={s.TabBadge}\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\n// Attach sub-components\nTabs.Tab = Tab\n// Backward-compat alias\nTabs.Option = Tab\n"]}

package/dist/es/components/{SegmentedControl/SegmentedControl.module.css → Tabs/Tabs.module.css}

@@ -1,47 +1,113 @@
-@layer components {.SegmentedControl {
-  --segmented-control-option-radius: calc(
-    var(--segmented-control-radius) - var(--segmented-control-gutter)
-  );
-
+@layer components {.Tabs {
   position: relative;
-  overflow: auto;
   display: inline-flex;
   flex-wrap: nowrap;
   gap: var(--segmented-control-gap);
-  height: var(--segmented-control-size);
-  padding: var(--segmented-control-gutter);
-  border-radius: var(--segmented-control-radius);
-  background: var(--segmented-control-background);
   font-size: var(--segmented-control-font-size);
   font-weight: var(--segmented-control-font-weight);
   -ms-overflow-style: none;
   scrollbar-width: none;
-  /* Remove inline-flex baseline gap */
   vertical-align: middle;
   white-space: nowrap;
 }
 
-  .SegmentedControl::-webkit-scrollbar {
+  .Tabs::-webkit-scrollbar {
     width: 0;
     height: 0;
   }
 
-  .SegmentedControl::-webkit-scrollbar-track,
-  .SegmentedControl::-webkit-scrollbar-thumb {
+  .Tabs::-webkit-scrollbar-track,
+  .Tabs::-webkit-scrollbar-thumb {
+    background: transparent;
+  }
+
+  /* =============================================
+    Variant: Segmented (default — existing behavior)
+  ============================================= */
+  .Tabs:where([data-variant="segmented"]) {
+    overflow: auto;
+    height: var(--segmented-control-size);
+    padding: var(--segmented-control-gutter);
+    border-radius: var(--segmented-control-radius);
+    background: var(--segmented-control-background);
+  }
+
+  .Tabs:where([data-variant="segmented"]:not([data-pill])) {
+    --segmented-control-option-radius: calc(
+      var(--segmented-control-radius) - var(--segmented-control-gutter)
+    );
+  }
+
+  .Tabs:where([data-variant="segmented"][data-pill]) {
+    border-radius: var(--radius-full);
+    --segmented-control-option-radius: var(--radius-full);
+  }
+
+  .Tabs:where([data-variant="segmented"][data-block]) {
+    overflow: hidden;
+    display: flex;
+    width: 100%;
+    white-space: normal;
+  }
+
+  /* =============================================
+    Variant: Underline
+  ============================================= */
+  .Tabs:where([data-variant="underline"]) {
+    --segmented-control-option-radius: 0;
+
+    overflow: auto;
+    height: var(--segmented-control-size);
+    padding: 0;
+    border-radius: 0;
     background: transparent;
+    gap: 0;
+    border-bottom: 1px solid var(--tabs-underline-border-color);
   }
 
-  .SegmentedControl:where([data-block]) {
+  .Tabs:where([data-variant="underline"][data-block]) {
     overflow: hidden;
     display: flex;
     width: 100%;
     white-space: normal;
   }
 
+  /* =============================================
+    Vertical orientation
+  ============================================= */
+  .Tabs:where([data-orientation="vertical"]) {
+    flex-direction: column;
+    height: auto;
+    width: -moz-fit-content;
+    width: fit-content;
+    white-space: nowrap;
+  }
+
+  .Tabs:where([data-orientation="vertical"][data-variant="segmented"]) {
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  .Tabs:where([data-orientation="vertical"][data-variant="underline"]) {
+    overflow-y: auto;
+    overflow-x: hidden;
+    border-bottom: none;
+    border-left: 1px solid var(--tabs-underline-border-color);
+  }
+
+  .Tabs:where([data-orientation="vertical"][data-block]) {
+    width: 100%;
+  }
+
+  .Tabs:where([data-orientation="vertical"][data-variant="segmented"][data-pill]) {
+    border-radius: calc(var(--segmented-control-size) / 2);
+    --segmented-control-option-radius: calc(var(--segmented-control-size) / 2);
+  }
+
   /* =============================================
     Sizes
   ============================================= */
-  .SegmentedControl:where([data-size="3xs"]) {
+  .Tabs:where([data-size="3xs"]) {
     --segmented-control-size: var(--control-size-3xs);
     --segmented-control-font-size: var(--control-font-size-sm);
     --segmented-control-radius: var(--control-radius-sm);
@@ -60,7 +126,7 @@
     --option-badge-radius: var(--badge-radius-2xs);
   }
 
-  .SegmentedControl:where([data-size="2xs"]) {
+  .Tabs:where([data-size="2xs"]) {
     --segmented-control-size: var(--control-size-2xs);
     --segmented-control-font-size: var(--control-font-size-sm);
     --segmented-control-radius: var(--control-radius-sm);
@@ -79,7 +145,7 @@
     --option-badge-radius: var(--badge-radius-2xs);
   }
 
-  .SegmentedControl:where([data-size="xs"]) {
+  .Tabs:where([data-size="xs"]) {
     --segmented-control-size: var(--control-size-xs);
     --segmented-control-font-size: var(--control-font-size-md);
     --segmented-control-radius: var(--control-radius-sm);
@@ -98,7 +164,7 @@
     --option-badge-radius: var(--badge-radius-xs);
   }
 
-  .SegmentedControl:where([data-size="sm"]) {
+  .Tabs:where([data-size="sm"]) {
     --segmented-control-size: var(--control-size-sm);
     --segmented-control-font-size: var(--control-font-size-md);
     --segmented-control-radius: var(--control-radius-md);
@@ -117,7 +183,7 @@
     --option-badge-radius: var(--badge-radius-sm);
   }
 
-  .SegmentedControl:where([data-size="md"]) {
+  .Tabs:where([data-size="md"]) {
     --segmented-control-size: var(--control-size-md);
     --segmented-control-font-size: var(--control-font-size-md);
     --segmented-control-radius: var(--control-radius-md);
@@ -136,7 +202,7 @@
     --option-badge-radius: var(--badge-radius-md);
   }
 
-  .SegmentedControl:where([data-size="lg"]) {
+  .Tabs:where([data-size="lg"]) {
     --segmented-control-size: var(--control-size-lg);
     --segmented-control-font-size: var(--control-font-size-md);
     --segmented-control-radius: var(--control-radius-md);
@@ -155,7 +221,7 @@
     --option-badge-radius: var(--badge-radius-md);
   }
 
-  .SegmentedControl:where([data-size="xl"]) {
+  .Tabs:where([data-size="xl"]) {
     --segmented-control-size: var(--control-size-xl);
     --segmented-control-font-size: var(--control-font-size-md);
     --segmented-control-radius: var(--control-radius-lg);
@@ -174,7 +240,7 @@
     --option-badge-radius: var(--badge-radius-md);
   }
 
-  .SegmentedControl:where([data-size="2xl"]) {
+  .Tabs:where([data-size="2xl"]) {
     --segmented-control-size: var(--control-size-2xl);
     --segmented-control-font-size: var(--control-font-size-lg);
     --segmented-control-radius: var(--control-radius-xl);
@@ -193,7 +259,7 @@
     --option-badge-radius: var(--badge-radius-lg);
   }
 
-  .SegmentedControl:where([data-size="3xl"]) {
+  .Tabs:where([data-size="3xl"]) {
     --segmented-control-size: var(--control-size-3xl);
     --segmented-control-font-size: var(--control-font-size-lg);
     --segmented-control-radius: var(--control-radius-xl);
@@ -213,42 +279,35 @@
   }
 
   /* =============================================
-    Gutter sizes
+    Gutter sizes (segmented variant only)
   ============================================= */
-  .SegmentedControl:where([data-gutter-size="2xs"]) {
+  .Tabs:where([data-gutter-size="2xs"]) {
     --segmented-control-option-gutter: var(--control-gutter-2xs);
   }
 
-  .SegmentedControl:where([data-gutter-size="xs"]) {
+  .Tabs:where([data-gutter-size="xs"]) {
     --segmented-control-option-gutter: var(--control-gutter-xs);
   }
 
-  .SegmentedControl:where([data-gutter-size="sm"]) {
+  .Tabs:where([data-gutter-size="sm"]) {
     --segmented-control-option-gutter: var(--control-gutter-sm);
   }
 
-  .SegmentedControl:where([data-gutter-size="md"]) {
+  .Tabs:where([data-gutter-size="md"]) {
     --segmented-control-option-gutter: var(--control-gutter-md);
   }
 
-  .SegmentedControl:where([data-gutter-size="lg"]) {
+  .Tabs:where([data-gutter-size="lg"]) {
     --segmented-control-option-gutter: var(--control-gutter-lg);
   }
 
-  .SegmentedControl:where([data-gutter-size="xl"]) {
+  .Tabs:where([data-gutter-size="xl"]) {
     --segmented-control-option-gutter: var(--control-gutter-xl);
-  }
-
-  /* =============================================
-    Pill
-  ============================================= */
-  .SegmentedControl:where([data-pill]) {
-    --segmented-control-radius: var(--radius-full);
-    --segmented-control-option-radius: var(--radius-full);
-  }.SegmentedControlOption {
+  }/* =============================================
+  Tab (trigger item)
+============================================= */.Tab {
   position: relative;
   padding: 0 var(--segmented-control-option-gutter);
-  border-radius: var(--segmented-control-option-radius);
   color: var(--color-text-secondary);
   cursor: pointer;
   line-height: 1;
@@ -261,24 +320,28 @@
   transition-timing-function: var(--transition-ease-basic);
 }
 
-  .SegmentedControlOption:focus {
+  .Tab:focus {
     outline: 0;
   }
 
-  :where(.SegmentedControl[data-block]) .SegmentedControlOption {
+  /* =============================================
+    Segmented variant — Tab styles
+  ============================================= */
+  :where(.Tabs[data-variant="segmented"]) .Tab {
+    border-radius: var(--segmented-control-option-radius);
+  }
+
+  :where(.Tabs[data-variant="segmented"][data-block]) .Tab {
     flex: 1;
   }
 
-  :where(.SegmentedControl[data-pill]) .SegmentedControlOption {
+  :where(.Tabs[data-variant="segmented"][data-pill]) .Tab {
     min-width: calc(var(--segmented-control-size) - 2 * var(--segmented-control-gutter));
     padding: 0 calc(var(--segmented-control-option-gutter) * var(--control-gutter-pill-scaling));
   }
 
-  .SegmentedControlOption[data-state="on"]:focus-visible {
-    outline: 2px solid var(--color-ring);
-  }
-
-  .SegmentedControlOption::before {
+  /* Hover highlight pseudo-element (segmented only) */
+  :where(.Tabs[data-variant="segmented"]) .Tab::before {
     position: absolute;
     inset: var(--segmented-control-option-highlight-gutter);
     border-radius: var(--segmented-control-option-radius);
@@ -293,55 +356,132 @@
     will-change: transform;
   }
 
-  .SegmentedControlOption:active::before {
+  :where(.Tabs[data-variant="segmented"]) .Tab:active::before {
     transform: scale(var(--scale), 0.97);
   }
-
-  .SegmentedControlOption svg {
-    display: block;
-  }
-    @media (hover: hover) and (pointer: fine) {.SegmentedControlOption[data-state="off"]:where(:not([disabled])):hover {
+    @media (hover: hover) and (pointer: fine) {:where(.Tabs[data-variant="segmented"]) .Tab[data-state="off"]:where(:not([disabled])):hover {
       color: var(--color-text);
 }
 
-      .SegmentedControlOption[data-state="off"]:where(:not([disabled])):hover::before {
+      :where(.Tabs[data-variant="segmented"]) .Tab[data-state="off"]:where(:not([disabled])):hover::before {
         opacity: 0.5;
       }
 }
 
-    .SegmentedControlOption[data-state="off"]:where(:not([disabled])):focus-visible {
+    :where(.Tabs[data-variant="segmented"]) .Tab[data-state="off"]:where(:not([disabled])):focus-visible {
       color: var(--color-text);
       outline: 2px solid var(--color-ring);
     }
 
-    .SegmentedControlOption[data-state="off"]:where(:not([disabled])):active::before {
+    :where(.Tabs[data-variant="segmented"]) .Tab[data-state="off"]:where(:not([disabled])):active::before {
       opacity: 0.75;
     }
 
-  .SegmentedControlOption[data-state="on"] {
+  /* =============================================
+    Underline variant — Tab styles
+  ============================================= */
+  :where(.Tabs[data-variant="underline"]) .Tab {
+    border-radius: 0;
+  }
+
+  :where(.Tabs[data-variant="underline"][data-block]) .Tab {
+    flex: 1;
+  }
+    @media (hover: hover) and (pointer: fine) {:where(.Tabs[data-variant="underline"]) .Tab[data-state="off"]:where(:not([disabled])):hover {
+      color: var(--color-text);
+}
+}
+
+    :where(.Tabs[data-variant="underline"]) .Tab[data-state="off"]:where(:not([disabled])):focus-visible {
+      color: var(--color-text);
+      outline: 2px solid var(--color-ring);
+      outline-offset: -2px;
+    }
+
+  /* =============================================
+    Vertical orientation — Tab styles
+  ============================================= */
+  :where(.Tabs[data-orientation="vertical"]) .Tab {
+    justify-content: flex-start;
+    width: 100%;
+    height: var(--segmented-control-size);
+  }
+
+  :where(.Tabs[data-orientation="vertical"][data-block]) .Tab {
+    flex: none;
+  }
+
+  /* =============================================
+    Shared states
+  ============================================= */
+  .Tab[data-state="on"] {
     color: var(--color-text);
   }
 
-  .SegmentedControlOption[data-disabled] {
+  .Tab[data-state="on"]:focus-visible {
+    outline: 2px solid var(--color-ring);
+  }
+
+  .Tab[data-disabled] {
     cursor: not-allowed;
     opacity: 0.5;
   }
 
-    .SegmentedControlOption[data-disabled]::before {
+    .Tab[data-disabled]::before {
       opacity: 0 !important;
-    }.SegmentedControlThumb {
+    }
+
+  .Tab svg {
+    display: block;
+  }/* =============================================
+  Thumb (animated indicator)
+============================================= */.TabsThumb {
   position: absolute;
-  top: var(--segmented-control-gutter);
-  bottom: var(--segmented-control-gutter);
-  left: 0;
-  border-radius: var(--segmented-control-option-radius);
-  background: var(--segmented-control-thumb-background);
-  box-shadow: var(--segmented-control-thumb-shadow);
   pointer-events: none;
   will-change: transform;
-}/* =============================================
-  Option Content (icon + text + badge layout)
-============================================= */.SegmentedControlOptionContent {
+}
+
+  /* Segmented horizontal: background highlight */
+  :where(.Tabs[data-variant="segmented"][data-orientation="horizontal"]) .TabsThumb {
+    top: var(--segmented-control-gutter);
+    bottom: var(--segmented-control-gutter);
+    left: 0;
+    border-radius: var(--segmented-control-option-radius);
+    background: var(--segmented-control-thumb-background);
+    box-shadow: var(--segmented-control-thumb-shadow);
+  }
+
+  /* Segmented vertical: background highlight */
+  :where(.Tabs[data-variant="segmented"][data-orientation="vertical"]) .TabsThumb {
+    left: var(--segmented-control-gutter);
+    right: var(--segmented-control-gutter);
+    top: 0;
+    border-radius: var(--segmented-control-option-radius);
+    background: var(--segmented-control-thumb-background);
+    box-shadow: var(--segmented-control-thumb-shadow);
+  }
+
+  /* Underline horizontal: thin line at the bottom */
+  :where(.Tabs[data-variant="underline"][data-orientation="horizontal"]) .TabsThumb {
+    bottom: 0;
+    left: 0;
+    height: var(--tabs-underline-indicator-height);
+    border-radius: calc(var(--tabs-underline-indicator-height) / 2) calc(var(--tabs-underline-indicator-height) / 2) 0 0;
+    background: var(--tabs-underline-indicator-color);
+    box-shadow: none;
+  }
+
+  /* Underline vertical: thin line on the left */
+  :where(.Tabs[data-variant="underline"][data-orientation="vertical"]) .TabsThumb {
+    left: 0;
+    top: 0;
+    width: var(--tabs-underline-indicator-height);
+    border-radius: 0 calc(var(--tabs-underline-indicator-height) / 2) calc(var(--tabs-underline-indicator-height) / 2) 0;
+    background: var(--tabs-underline-indicator-color);
+    box-shadow: none;
+  }/* =============================================
+  Tab Content (icon + text + badge layout)
+============================================= */.TabContent {
   position: relative;
   display: flex;
   align-items: center;
@@ -349,17 +489,17 @@
 }
 
   /* Icon auto-sizing (same as Button) */
-  .SegmentedControlOptionContent svg:where(:not([data-no-autosize])) {
+  .TabContent svg:where(:not([data-no-autosize])) {
     width: var(--segmented-control-icon-size);
     height: var(--segmented-control-icon-size);
   }
 
   /* Negative margin for icon when followed by text */
-  .SegmentedControlOptionContent svg:where(:first-child:not(:only-child)) {
+  .TabContent svg:where(:first-child:not(:only-child)) {
     margin-left: var(--segmented-control-icon-offset);
   }/* =============================================
-  Option Badge (CSS-only, no Badge component)
-============================================= */.OptionBadge {
+  Tab Badge (CSS-only, no Badge component)
+============================================= */.TabBadge {
   display: inline-flex;
   align-items: center;
   height: var(--option-badge-size);
@@ -377,37 +517,37 @@
   /* =============================================
     Soft variant (default)
   ============================================= */
-    .OptionBadge[data-variant="soft"]:where([data-color="secondary"]) {
+    .TabBadge[data-variant="soft"]:where([data-color="secondary"]) {
       --option-badge-bg: var(--color-background-secondary-soft-alpha);
       --option-badge-color: var(--color-text-secondary-soft);
     }
 
-    .OptionBadge[data-variant="soft"]:where([data-color="success"]) {
+    .TabBadge[data-variant="soft"]:where([data-color="success"]) {
       --option-badge-bg: var(--color-background-success-soft-alpha);
       --option-badge-color: var(--color-text-success-soft);
     }
 
-    .OptionBadge[data-variant="soft"]:where([data-color="warning"]) {
+    .TabBadge[data-variant="soft"]:where([data-color="warning"]) {
       --option-badge-bg: var(--color-background-warning-soft-alpha);
       --option-badge-color: var(--color-text-warning-soft);
     }
 
-    .OptionBadge[data-variant="soft"]:where([data-color="danger"]) {
+    .TabBadge[data-variant="soft"]:where([data-color="danger"]) {
       --option-badge-bg: var(--color-background-danger-soft-alpha);
       --option-badge-color: var(--color-text-danger-soft);
     }
 
-    .OptionBadge[data-variant="soft"]:where([data-color="info"]) {
+    .TabBadge[data-variant="soft"]:where([data-color="info"]) {
       --option-badge-bg: var(--color-background-info-soft-alpha);
       --option-badge-color: var(--color-text-info-soft);
     }
 
-    .OptionBadge[data-variant="soft"]:where([data-color="discovery"]) {
+    .TabBadge[data-variant="soft"]:where([data-color="discovery"]) {
       --option-badge-bg: var(--color-background-discovery-soft-alpha);
       --option-badge-color: var(--color-text-discovery-soft);
     }
 
-    .OptionBadge[data-variant="soft"]:where([data-color="caution"]) {
+    .TabBadge[data-variant="soft"]:where([data-color="caution"]) {
       --option-badge-bg: var(--color-background-caution-soft-alpha);
       --option-badge-color: var(--color-text-caution-soft);
     }
@@ -415,37 +555,37 @@
   /* =============================================
     Solid variant
   ============================================= */
-    .OptionBadge[data-variant="solid"]:where([data-color="secondary"]) {
+    .TabBadge[data-variant="solid"]:where([data-color="secondary"]) {
       --option-badge-bg: var(--color-background-secondary-solid);
       --option-badge-color: var(--color-text-secondary-solid);
     }
 
-    .OptionBadge[data-variant="solid"]:where([data-color="success"]) {
+    .TabBadge[data-variant="solid"]:where([data-color="success"]) {
       --option-badge-bg: var(--color-background-success-solid);
       --option-badge-color: var(--color-text-success-solid);
     }
 
-    .OptionBadge[data-variant="solid"]:where([data-color="warning"]) {
+    .TabBadge[data-variant="solid"]:where([data-color="warning"]) {
       --option-badge-bg: var(--color-background-warning-solid);
       --option-badge-color: var(--color-text-warning-solid);
     }
 
-    .OptionBadge[data-variant="solid"]:where([data-color="danger"]) {
+    .TabBadge[data-variant="solid"]:where([data-color="danger"]) {
       --option-badge-bg: var(--color-background-danger-solid);
       --option-badge-color: var(--color-text-danger-solid);
     }
 
-    .OptionBadge[data-variant="solid"]:where([data-color="info"]) {
+    .TabBadge[data-variant="solid"]:where([data-color="info"]) {
       --option-badge-bg: var(--color-background-info-solid);
       --option-badge-color: var(--color-text-info-solid);
     }
 
-    .OptionBadge[data-variant="solid"]:where([data-color="discovery"]) {
+    .TabBadge[data-variant="solid"]:where([data-color="discovery"]) {
       --option-badge-bg: var(--color-background-discovery-solid);
       --option-badge-color: var(--color-text-discovery-solid);
     }
 
-    .OptionBadge[data-variant="solid"]:where([data-color="caution"]) {
+    .TabBadge[data-variant="solid"]:where([data-color="caution"]) {
       --option-badge-bg: var(--color-background-caution-solid);
       --option-badge-color: var(--color-text-caution-solid);
     }
@@ -453,42 +593,42 @@
   /* =============================================
     Outline variant
   ============================================= */
-  .OptionBadge[data-variant="outline"] {
+  .TabBadge[data-variant="outline"] {
     background-color: transparent;
     box-shadow: 0 0 0 1px var(--option-badge-border) inset;
   }
 
-    .OptionBadge[data-variant="outline"]:where([data-color="secondary"]) {
+    .TabBadge[data-variant="outline"]:where([data-color="secondary"]) {
       --option-badge-border: var(--color-border-secondary-outline);
       --option-badge-color: var(--color-text-secondary-outline);
     }
 
-    .OptionBadge[data-variant="outline"]:where([data-color="success"]) {
+    .TabBadge[data-variant="outline"]:where([data-color="success"]) {
       --option-badge-border: var(--color-border-success-outline);
       --option-badge-color: var(--color-text-success-outline);
     }
 
-    .OptionBadge[data-variant="outline"]:where([data-color="warning"]) {
+    .TabBadge[data-variant="outline"]:where([data-color="warning"]) {
       --option-badge-border: var(--color-border-warning-outline);
       --option-badge-color: var(--color-text-warning-outline);
     }
 
-    .OptionBadge[data-variant="outline"]:where([data-color="danger"]) {
+    .TabBadge[data-variant="outline"]:where([data-color="danger"]) {
       --option-badge-border: var(--color-border-danger-outline);
       --option-badge-color: var(--color-text-danger-outline);
     }
 
-    .OptionBadge[data-variant="outline"]:where([data-color="info"]) {
+    .TabBadge[data-variant="outline"]:where([data-color="info"]) {
       --option-badge-border: var(--color-border-info-outline);
       --option-badge-color: var(--color-text-info-outline);
     }
 
-    .OptionBadge[data-variant="outline"]:where([data-color="discovery"]) {
+    .TabBadge[data-variant="outline"]:where([data-color="discovery"]) {
       --option-badge-border: var(--color-border-discovery-outline);
       --option-badge-color: var(--color-text-discovery-outline);
     }
 
-    .OptionBadge[data-variant="outline"]:where([data-color="caution"]) {
+    .TabBadge[data-variant="outline"]:where([data-color="caution"]) {
       --option-badge-border: var(--color-border-caution-outline);
       --option-badge-color: var(--color-text-caution-outline);
     }
@@ -496,7 +636,7 @@
   /* =============================================
     Pill
   ============================================= */
-  .OptionBadge[data-pill] {
+  .TabBadge[data-pill] {
     border-radius: var(--radius-full);
     padding: 0 calc(var(--option-badge-gutter) * var(--control-gutter-pill-scaling));
   }

package/dist/es/components/Tabs/index.js

@@ -0,0 +1,2 @@
+export { Tabs } from "./Tabs";
+//# sourceMappingURL=index.js.map

package/dist/es/components/Tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Tabs/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA","sourcesContent":["export { Tabs } from \"./Tabs\"\nexport type {\n  TabsBadgeProp,\n  TabsOrientation,\n  TabsProps,\n  TabsVariant,\n  TabProps,\n  SizeVariant,\n} from \"./Tabs\"\n"]}

package/dist/es/styles/variables-components.css

@@ -216,6 +216,13 @@
     --segmented-control-thumb-shadow: 0 1px 4px -1px rgb(0 0 0 / 20%);
     --segmented-control-option-highlight-gutter: 1px;
 
+    /* =============================================
+      Tabs — Underline variant
+    ============================================= */
+    --tabs-underline-indicator-height: 2px;
+    --tabs-underline-indicator-color: var(--color-background-primary-solid);
+    --tabs-underline-border-color: var(--color-border);
+
     /* =============================================
       SelectControl
     ============================================= */

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/{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.3.0",
+  "version": "0.4.1",
   "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"]}