pixelize-design-library 2.4.2 → 3.0.0

package/dist/Components/SearchSelect/SearchSelectProps.d.ts

@@ -1,63 +1,126 @@
+/** value's shape must match isMultiple (array vs single object) — a mismatch normalizes to no selection, not an error. */
+/** Prefer `Select` with `native={false}` for new work — not yet a drop-in; see COMPONENT-GOTCHAS.md ("Which select component"). */
 export type SearchSelectProps = {
+    /** Base DOM id of the trigger; listbox and option ids derive from it. Auto-generated when omitted. */
     id?: string;
+    /** Visible label above the field; omit it and set `aria-label` for a labelless field. */
     label?: string;
+    /** Accessible name for a labelless field; falls back to the visible label when both are set. */
+    "aria-label"?: string;
+    /** Filtered against option.label only — a custom `view` node's visible text isn't searchable. */
     options: Options[];
+    /** Canonical change callback; required for selections to stick (fully controlled). Wins over `onSelect`. */
+    onChange?: (options: Options | Options[] | undefined) => void;
+    /** @deprecated Use `onChange` — same payload; renamed to match every other picker. */
     onSelect?: (options: Options | Options[] | undefined) => void;
+    /** Fires 1s after typing stops; local filtering against `options` already runs synchronously regardless. */
     onSearch?: (value: string) => void;
+    /** Shows `loadingText` in place of options when the list is empty, else as a trailing row. */
     isOptionLoading?: boolean;
+    /** Overrides rightIcon — replaces it with a spinner in the trailing slot whenever true. */
     isLoading?: boolean;
+    /** Text of the option-list loading row. Defaults to "Loading...". */
     loadingText?: string;
+    /** Input placeholder, hidden once a value is selected and the menu is closed. Defaults to "Select". */
     placeholder?: string;
+    /** Fully controlled selection; pass back what `onChange` emits or nothing sticks. */
     value?: Options[] | Options;
+    /** Only seeds the initial input text at mount — later prop changes don't resync the input. */
     searchQuery?: string;
+    /** Multi mode: chips, toggling rows, menu stays open; `value`/`onChange` become arrays. */
     isMultiple?: boolean;
+    /** Visual-only — shows the required asterisk on the label; doesn't block selection or submission. */
     isRequired?: boolean;
+    /** Marks the field invalid with the error border and ring; `errorMessage` text shows only while true. */
     error?: boolean;
+    /** Only rendered when `error` is true — setting this alone shows nothing. */
     errorMessage?: string;
+    /** Hidden whenever `error` is true — mutually exclusive with errorMessage. */
     helperText?: string;
+    /** Width of the whole field; the menu matches it. Defaults to "100%". */
     width?: string | number;
+    /** Only sets the insideSelect segment's height, not the main field's — that's driven by `size`. */
     height?: string | number;
+    /** Height on the field control scale (xs 32 · sm 38 · md 40 · lg 48px). Defaults to `sm`. */
     size?: "xs" | "sm" | "md" | "lg";
+    /** Blocks opening, typing, chip removal and clearing; renders the shared disabled field look. */
+    isDisabled?: boolean;
+    /** Tuning for selected-value chips; only applies when `isMultiple` is true. */
     chip?: {
+        /** Chips shown before a "+N" chip; `0` shows only the count. */
         maxChips?: number;
+        /** Truncates each chip label to this many characters, adding an ellipsis. */
         maxText?: number;
+        /** Never called — its presence alone enables each chip's remove (X) icon, which fires `onChange`. */
         onClick?: (options: Options | Options[]) => void;
     };
+    /** Legacy nested form of `isInformation`/`informationMessage`; the flat props win when both are set. */
     information?: {
         isInformation?: boolean;
         informationMessage?: string;
     };
+    /** Wins over `information.isInformation` when both are set; both this and informationMessage must be truthy to show the icon. */
     isInformation?: boolean;
+    /** Tooltip text on the label info icon; needs `isInformation` and a `label` to appear. */
     informationMessage?: string;
+    /** Replaces the trailing toggle chevron with a custom icon; ignored while `isLoading` shows the spinner. */
     rightIcon?: {
+        /** Must be a rendered element (`<Icon />`); anything else fails isValidElement and falls back to the toggle chevron. */
         icon?: React.ReactNode;
+        /** Fires on custom-icon click; the click also bubbles to the field and opens the menu. */
         onClick?: () => void;
     };
+    /** Adds a footer "add new" row below the options; nothing renders unless `enabled` is true. */
     addNew?: {
+        /** Must be explicitly true — icon/text/onClick alone render nothing. */
         enabled: boolean;
+        /** Defaults to a plus icon. */
         icon?: React.ReactNode;
+        /** Defaults to "Add New". */
         text?: string;
+        /** Fires on the footer row click; the menu stays open. */
         onClick?: () => void;
     };
+    /** Shows a clear-all (X) button while anything is selected; emits `[]` or `undefined`. */
     isRemoveAllIcon?: boolean;
+    /** Ignored entirely unless `isMultiple` is also true. */
     isSelectAll?: boolean;
+    /** Infinite-scroll paging: `onScroll` fires near the list end while more rows are expected. */
     pagination?: {
+        /** startIndex is 1-based (current options.length + 1), not a 0-based offset. */
         onScroll?: (startIndex: number, limit: number, query: string) => void;
+        /** Also used to guess whether more pages exist (options.length % limit === 0, refined once a page returns no new rows). Defaults to 10 when omitted. */
         limit?: number;
+        /** Set this synchronously while a page request is in flight, or fast scrolling can re-fire onScroll for the same page. */
         scrollLoading?: boolean;
+        /** Explicit stop signal; overrides the limit-based heuristic when set. */
+        hasMore?: boolean;
+        /** Total row count; when set, hasMore is derived as options.length < totalRecords instead of the limit heuristic. */
+        totalRecords?: number;
     };
+    /** @deprecated Not implemented — the option list never virtualizes; page large datasets with `pagination` instead. */
     virtualization?: boolean;
+    /** Renders a second nested picker inside the field (e.g. a country code) beside the main input. */
     insideSelect?: {
+        /** Fires with the picked nested option; the nested picker is controlled via `insideSelect.value`. */
         onSelect?: (options: Options) => void;
+        /** In isMultiple mode, its `id` is stamped onto every newly selected main option as `insideSelectId`. */
         value?: Options;
+        /** The nested picker's own option list — distinct from the top-level `options`, singular name despite being an array. */
         option?: Options[];
+        /** Nested trigger width; label truncates at 6rem when unset. */
         width?: string;
         /** Shown when no value is selected. Defaults to "Select". */
         placeholder?: string;
     };
 };
+/** One selectable option; view, when set, fully replaces the default label rendering for that option's row. */
+/** Prefer `Select` with `native={false}` for new work — not yet a drop-in; see COMPONENT-GOTCHAS.md ("Which select component"). */
 export type Options = {
+    /** Unique key; selected state and chip removal are matched by it. */
     id: string | number;
+    /** Text shown in the row and chip, and the only text the search box filters on. */
     label: string;
+    /** Custom row content replacing the label text; search still uses `label`. */
     view?: React.ReactNode;
 };

package/dist/Components/SearchSelect/searchSelectNav.d.ts

@@ -0,0 +1,13 @@
+export declare const NO_ROW = -1;
+export declare const SELECT_ALL_ROW = -2;
+export declare const ADD_NEW_ROW = -3;
+export type RowLayout = {
+    optionCount: number;
+    hasSelectAll: boolean;
+    hasAddNew: boolean;
+};
+export declare const navRows: ({ optionCount, hasSelectAll, hasAddNew }: RowLayout) => number[];
+export declare const hasRow: (row: number, { optionCount, hasSelectAll, hasAddNew }: RowLayout) => boolean;
+export declare const stepRow: (layout: RowLayout, current: number, delta: number) => number;
+export declare const firstRow: ({ optionCount, hasSelectAll, hasAddNew }: RowLayout) => number;
+export declare const lastRow: ({ optionCount, hasSelectAll, hasAddNew }: RowLayout) => number;

package/dist/Components/SearchSelect/searchSelectNav.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.lastRow = exports.firstRow = exports.stepRow = exports.hasRow = exports.navRows = exports.ADD_NEW_ROW = exports.SELECT_ALL_ROW = exports.NO_ROW = void 0;
+exports.NO_ROW = -1;
+exports.SELECT_ALL_ROW = -2;
+exports.ADD_NEW_ROW = -3;
+const navRows = ({ optionCount, hasSelectAll, hasAddNew }) => [
+    ...(hasSelectAll ? [exports.SELECT_ALL_ROW] : []),
+    ...Array.from({ length: optionCount }, (_, index) => index),
+    ...(hasAddNew ? [exports.ADD_NEW_ROW] : []),
+];
+exports.navRows = navRows;
+const hasRow = (row, { optionCount, hasSelectAll, hasAddNew }) => (row >= 0 && row < optionCount) || (row === exports.SELECT_ALL_ROW && hasSelectAll) || (row === exports.ADD_NEW_ROW && hasAddNew);
+exports.hasRow = hasRow;
+const stepRow = (layout, current, delta) => {
+    const rows = (0, exports.navRows)(layout);
+    if (!rows.length)
+        return exports.NO_ROW;
+    const at = rows.indexOf(current);
+    if (at < 0)
+        return delta > 0 ? rows[0] : rows[rows.length - 1];
+    return rows[(at + delta + rows.length) % rows.length];
+};
+exports.stepRow = stepRow;
+const firstRow = ({ optionCount, hasSelectAll, hasAddNew }) => {
+    if (hasSelectAll)
+        return exports.SELECT_ALL_ROW;
+    if (optionCount > 0)
+        return 0;
+    return hasAddNew ? exports.ADD_NEW_ROW : exports.NO_ROW;
+};
+exports.firstRow = firstRow;
+const lastRow = ({ optionCount, hasSelectAll, hasAddNew }) => {
+    if (hasAddNew)
+        return exports.ADD_NEW_ROW;
+    if (optionCount > 0)
+        return optionCount - 1;
+    return hasSelectAll ? exports.SELECT_ALL_ROW : exports.NO_ROW;
+};
+exports.lastRow = lastRow;

package/dist/Components/SearchSelect/searchSelectSize.d.ts

@@ -1,7 +1,5 @@
-/**
- * Layout tokens for SearchSelect so `size` matches Chakra input density (xs–lg).
- */
-export type SearchSelectControlSize = "xs" | "sm" | "md" | "lg";
+import { type ControlSize } from "../../Theme/tokens/primitives/controlSizes";
+export type SearchSelectControlSize = ControlSize;
 export type SearchSelectSizeStyles = {
     minH: string;
     /** Horizontal padding of the main field (Chakra spacing scale or rem). */
@@ -21,24 +19,11 @@ export type SearchSelectSizeStyles = {
     addNewIconSize: number;
     /** Offset for the nested select segment (aligns with field padding). */
     insideSelectMarginLeft: string;
-    /** “Select all” / option row text in the dropdown. */
-    dropdownTextFontSize: "xs" | "sm" | "md";
-    /** Min row height for main option list items. */
-    optionRowMinH: string;
-    optionRowPy: number;
     /** Chakra `Checkbox` only supports sm | md | lg. */
     checkboxSize: "sm" | "md" | "lg";
-    /**
-     * Chakra `Input` uses these font tokens per `size` (unstyled still needs explicit fontSize).
-     */
+    /** Chakra `Input` font token per `size` (unstyled still needs explicit fontSize). */
     fieldFontSize: "xs" | "sm" | "md" | "lg";
-    /**
-     * Matches Chakra `Input` field height (`sizes.6`..`12`) so `unstyled` + `height: auto` does
-     * not prevent `size` from affecting the control.
-     */
+    /** Matches Chakra `Input` field height so `unstyled` + `height: auto` doesn't block `size`. */
     fieldHeight: string;
 };
-/**
- * Returns layout and child control tokens for a SearchSelect `size`.
- */
 export declare function getSearchSelectSizeStyles(size: SearchSelectControlSize): SearchSelectSizeStyles;

package/dist/Components/SearchSelect/searchSelectSize.js

@@ -1,95 +1,83 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getSearchSelectSizeStyles = getSearchSelectSizeStyles;
+// Layout tokens for SearchSelect so `size` matches Chakra input density (xs-lg).
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+const innerHeight = (size) => `calc(${controlSizes_1.CONTROL_SIZES[size].height} - 2px)`;
 const SIZE_STYLES = {
     xs: {
-        minH: "1.5rem",
+        minH: controlSizes_1.CONTROL_SIZES.xs.height,
         px: 2,
         pr: "1.75rem",
         gap: "0.25rem",
         fieldFontSize: "xs",
-        fieldHeight: "1.5rem",
+        fieldHeight: innerHeight("xs"),
         chevronSize: 14,
         iconButtonSize: "xs",
         tagSize: "sm",
         spinnerSize: "sm",
-        insideSelectDefaultHeight: "1.5rem",
+        insideSelectDefaultHeight: innerHeight("xs"),
         rightOffset: "0.5rem",
         clearIconSize: 10,
         addNewIconSize: 14,
         insideSelectMarginLeft: "-0.5rem",
-        dropdownTextFontSize: "xs",
-        optionRowMinH: "1.5rem",
-        optionRowPy: 1.5,
         checkboxSize: "sm",
     },
     sm: {
-        minH: "2rem",
+        minH: controlSizes_1.CONTROL_SIZES.sm.height,
         px: 2.5,
         pr: "1.85rem",
         gap: "0.3rem",
         fieldFontSize: "sm",
-        fieldHeight: "2rem",
+        fieldHeight: innerHeight("sm"),
         chevronSize: 16,
         iconButtonSize: "sm",
         tagSize: "sm",
         spinnerSize: "sm",
-        insideSelectDefaultHeight: "2rem",
+        insideSelectDefaultHeight: innerHeight("sm"),
         rightOffset: "0.5rem",
         clearIconSize: 12,
         addNewIconSize: 16,
         insideSelectMarginLeft: "-0.625rem",
-        dropdownTextFontSize: "sm",
-        optionRowMinH: "2rem",
-        optionRowPy: 2,
         checkboxSize: "sm",
     },
     md: {
-        minH: "2.5rem",
+        minH: controlSizes_1.CONTROL_SIZES.md.height,
         px: 3,
         pr: "2rem",
         gap: "0.375rem",
         fieldFontSize: "sm",
-        fieldHeight: "2.5rem",
+        fieldHeight: innerHeight("md"),
         chevronSize: 16,
         iconButtonSize: "sm",
         tagSize: "sm",
         spinnerSize: "sm",
-        insideSelectDefaultHeight: "2.5rem",
+        insideSelectDefaultHeight: innerHeight("md"),
         rightOffset: "0.75rem",
         clearIconSize: 12,
         addNewIconSize: 16,
         insideSelectMarginLeft: "-0.75rem",
-        dropdownTextFontSize: "sm",
-        optionRowMinH: "2.5rem",
-        optionRowPy: 2,
         checkboxSize: "md",
     },
     lg: {
-        minH: "3rem",
+        minH: controlSizes_1.CONTROL_SIZES.lg.height,
         px: 4,
         pr: "2.25rem",
         gap: "0.5rem",
         fieldFontSize: "sm",
-        fieldHeight: "3rem",
+        fieldHeight: innerHeight("lg"),
         chevronSize: 18,
         iconButtonSize: "md",
         tagSize: "md",
         spinnerSize: "md",
-        insideSelectDefaultHeight: "3rem",
+        insideSelectDefaultHeight: innerHeight("lg"),
         rightOffset: "0.75rem",
         clearIconSize: 14,
         addNewIconSize: 18,
         insideSelectMarginLeft: "-0.875rem",
-        dropdownTextFontSize: "md",
-        optionRowMinH: "2.75rem",
-        optionRowPy: 2.5,
         checkboxSize: "lg",
     },
 };
-/**
- * Returns layout and child control tokens for a SearchSelect `size`.
- */
 function getSearchSelectSizeStyles(size) {
     var _a;
     return (_a = SIZE_STYLES[size]) !== null && _a !== void 0 ? _a : SIZE_STYLES.md;

package/dist/Components/SectionRail/SectionRail.d.ts

@@ -0,0 +1,4 @@
+import type { SectionRailProps } from "./SectionRailProps";
+/** Section navigation for a long screen: a vertical rail from `collapseBelow` up, a Select below it; dirty sections are flagged. */
+declare const SectionRail: ({ sections, activeId, onSelect, "aria-label": ariaLabel, dirtyHint, collapseBelow, }: SectionRailProps) => import("react/jsx-runtime").JSX.Element;
+export default SectionRail;

package/dist/Components/SectionRail/SectionRail.js

@@ -0,0 +1,50 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const Select_1 = __importDefault(require("../Select/Select"));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const motion_2 = require("../../Theme/chakra/motion");
+const FALLBACK_BREAKPOINTS = { sm: "30em", md: "48em", lg: "62em" };
+const matchesMinWidth = (query) => typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(query).matches : true;
+const useMinWidth = (minWidth) => {
+    const query = `(min-width: ${minWidth})`;
+    const [matches, setMatches] = (0, react_1.useState)(() => matchesMinWidth(query));
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (typeof window === "undefined" || typeof window.matchMedia !== "function")
+            return undefined;
+        const list = window.matchMedia(query);
+        const update = () => setMatches(list.matches);
+        update();
+        (_a = list.addEventListener) === null || _a === void 0 ? void 0 : _a.call(list, "change", update);
+        return () => { var _a; return (_a = list.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(list, "change", update); };
+    }, [query]);
+    return matches;
+};
+/** Section navigation for a long screen: a vertical rail from `collapseBelow` up, a Select below it; dirty sections are flagged. */
+const SectionRail = ({ sections, activeId, onSelect, "aria-label": ariaLabel, dirtyHint, collapseBelow = "md", }) => {
+    var _a;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const { breakpoints } = (0, react_2.useTheme)();
+    const isRail = useMinWidth((_a = breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints[collapseBelow]) !== null && _a !== void 0 ? _a : FALLBACK_BREAKPOINTS[collapseBelow]);
+    const rows = (0, rowStates_1.listRowBackgrounds)(colors);
+    if (!isRail) {
+        return ((0, jsx_runtime_1.jsx)(Select_1.default, { "aria-label": ariaLabel, width: "100%", value: activeId, options: sections.map((section) => ({
+                id: section.id,
+                label: section.isDirty ? `${section.label} (${dirtyHint})` : section.label,
+            })), onChange: (option) => option && onSelect(String(option.id)) }));
+    }
+    return ((0, jsx_runtime_1.jsx)(react_2.Flex, { as: "nav", "aria-label": ariaLabel, direction: "column", gap: "2px", children: sections.map((section) => {
+            const isActive = section.id === activeId;
+            return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", align: "center", gap: 2, minH: "2rem", px: 3, py: 1.5, borderRadius: "md", fontSize: "sm", fontWeight: isActive ? 600 : 500, textAlign: "left", "aria-current": isActive ? "true" : undefined, bg: isActive ? rows.selected : "transparent", color: isActive ? colors.accentText : colors.text[800], transition: (0, motion_1.transitionFor)(["background-color", "color"]), _hover: { bg: isActive ? rows.selectedActive : rows.active }, _focusVisible: (0, focusRing_styles_1.focusVisibleRing)(colors), sx: (0, motion_2.reducedMotionSx)(), onClick: () => onSelect(section.id), children: [section.icon ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", "aria-hidden": true, display: "inline-flex", flexShrink: 0, children: section.icon })) : null, (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", noOfLines: 1, flex: "1", minW: 0, children: section.label }), section.isDirty ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", "aria-hidden": true, boxSize: "6px", borderRadius: "full", flexShrink: 0, bg: colors.semanticText.warning }), (0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { children: dirtyHint })] })) : null] }, section.id));
+        }) }));
+};
+exports.default = SectionRail;

package/dist/Components/SectionRail/SectionRailProps.d.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from "react";
+/** One entry in a SectionRail. */
+export interface RailSection {
+    /** Unique key, matched against `activeId` and passed to `onSelect`. */
+    id: string;
+    /** Section name. */
+    label: string;
+    /** Decorative leading icon, hidden from assistive tech; the label carries the name. */
+    icon?: ReactNode;
+    /** Shows a dot, and `dirtyHint` to screen readers, on a section holding unsaved edits. */
+    isDirty?: boolean;
+}
+/** Props for the section navigation of a long settings screen: a rail on wide viewports, a Select below `collapseBelow`. */
+export interface SectionRailProps {
+    /** Entries in display order. */
+    sections: RailSection[];
+    /** Id of the current section; marked `aria-current="true"` (and selected in the Select). */
+    activeId: string;
+    /** Called with a section's `id` when it is chosen in the rail or the Select. */
+    onSelect: (id: string) => void;
+    /** Accessible name of the nav and of the collapsed Select. */
+    "aria-label": string;
+    /** Visually hidden text announced after a dirty section's label, e.g. "Unsaved changes". */
+    dirtyHint: string;
+    /** Viewports narrower than this breakpoint render a Select instead of the rail; defaults to "md". */
+    collapseBelow?: "sm" | "md" | "lg";
+}

package/dist/Components/SectionRail/SectionRailProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/SectionRail/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SectionRail } from "./SectionRail";
+export type { RailSection, SectionRailProps } from "./SectionRailProps";

package/dist/Components/SectionRail/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionRail = void 0;
+var SectionRail_1 = require("./SectionRail");
+Object.defineProperty(exports, "SectionRail", { enumerable: true, get: function () { return __importDefault(SectionRail_1).default; } });

package/dist/Components/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,9 @@
+import { type ReactElement, type RefAttributes } from "react";
+import { SegmentedControlProps } from "./SegmentedControlProps";
+type SegmentedControlComponent = {
+    <T extends string = string>(props: SegmentedControlProps<T> & RefAttributes<HTMLDivElement>): ReactElement | null;
+    displayName?: string;
+};
+/** role="radiogroup" of role="radio" buttons with roving tabindex; shares variant with Toggle/TableToggle; `ref` is the radiogroup. */
+declare const SegmentedControl: SegmentedControlComponent;
+export default SegmentedControl;

package/dist/Components/SegmentedControl/SegmentedControl.js

@@ -0,0 +1,124 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const borderWidths_1 = require("../../Theme/tokens/primitives/borderWidths");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const motion_2 = require("../../Theme/chakra/motion");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const Tag_1 = __importDefault(require("../Tag/Tag"));
+const useSlidingPill_1 = require("./useSlidingPill");
+const segmentedInk_1 = require("./segmentedInk");
+const TRACK_PADDING = "0.125rem";
+const UNDERLINE_WIDTH = borderWidths_1.BORDER_WIDTHS.hairline;
+const SLIDE = (0, motion_1.transitionFor)(["transform", "width"], "base");
+const MAX_COUNT = 99;
+const COUNT_TAG_SIZE = { sm: "xs", md: "sm", lg: "md" };
+const formatCount = (count) => (count > MAX_COUNT ? `${MAX_COUNT}+` : `${count}`);
+function SegmentedControlInner({ options, value, onChange, size = "sm", isFullWidth = false, variant = "default", orientation = "horizontal", surface, "aria-label": ariaLabel, }, ref) {
+    var _a;
+    const { colors, radii } = (0, useCustomTheme_1.useCustomTheme)();
+    const control = controlSizes_1.BUTTON_SIZES[size];
+    const isBrandSlide = variant === "brandSlide";
+    const isUnderlineSlide = variant === "underlineSlide";
+    const hasIndicator = isBrandSlide || isUnderlineSlide;
+    const isVertical = orientation === "vertical";
+    // Below "md" a shortLabel (when the option has one) replaces the full label; the full label stays the accessible name.
+    const isCompact = (_a = (0, react_2.useBreakpointValue)({ base: true, md: false }, { ssr: false })) !== null && _a !== void 0 ? _a : false;
+    const brandFill = (0, filledSurface_1.resolveFilledSurface)(colors.primary, colors);
+    const trackSurface = (0, segmentedInk_1.segmentedTrackSurface)(variant, colors, surface);
+    const restInk = (0, segmentedInk_1.segmentedRestInk)(colors, trackSurface);
+    const selectedInk = (0, outlineRung_1.liftToContrast)(colors.accentText, (0, segmentedInk_1.segmentedSelectedSurface)(variant, colors, trackSurface), accentText_1.AA_NORMAL_TEXT);
+    const hoverInk = (0, outlineRung_1.liftToContrast)(colors.text[900], trackSurface, accentText_1.AA_NORMAL_TEXT);
+    const segmentH = `calc(${control.height} - ${isUnderlineSlide ? UNDERLINE_WIDTH : `2 * ${TRACK_PADDING}`})`;
+    // Concentric: an inset child keeping the parent's radius bulges at the corners.
+    const innerRadius = isUnderlineSlide ? "none" : `calc(${radii.lg} - ${TRACK_PADDING})`;
+    // Inset, never a border: a border consumes the content box and the absolute pill stops centring.
+    const plateEdge = isBrandSlide
+        ? `inset 0 0 0 1px ${(0, segmentedInk_1.segmentedPlateEdge)(colors, surface)}`
+        : undefined;
+    // underlineSlide has no track chrome to carry the ring, so there the segment wears Button's own.
+    const noRing = { outline: "2px solid transparent", outlineOffset: "2px" };
+    const segmentFocus = isUnderlineSlide
+        ? (0, focusRing_styles_1.focusVisibleStyles)(colors)
+        : { _focusVisible: noRing, [focusRing_styles_1.FOCUS_VISIBLE_OVER_STATE]: noRing };
+    const ring = (0, focusRing_styles_1.focusRingShadow)(colors);
+    const trackFocusShadow = plateEdge ? `${plateEdge}, ${ring}` : ring;
+    const [showFocus, setShowFocus] = (0, react_1.useState)(false);
+    const selectedIndex = options.findIndex((o) => o.value === value);
+    const enabled = options.reduce((acc, o, i) => (o.isDisabled ? acc : [...acc, i]), []);
+    // WAI-APG: with nothing selected, the first enabled segment owns the tab stop.
+    const tabIndex = selectedIndex >= 0 ? selectedIndex : enabled[0];
+    const { trackRef, itemRefs: refs, pill } = (0, useSlidingPill_1.useSlidingPill)(hasIndicator, selectedIndex, [
+        options,
+        isFullWidth,
+        size,
+        orientation,
+        isCompact,
+    ]);
+    const rootRef = (0, react_2.useMergeRefs)(trackRef, ref);
+    const selectAt = (index) => {
+        var _a;
+        (_a = refs.current[index]) === null || _a === void 0 ? void 0 : _a.focus();
+        onChange(options[index].value);
+    };
+    const handleKeyDown = (event) => {
+        if (enabled.length === 0)
+            return;
+        const step = (delta) => {
+            const position = enabled.indexOf(tabIndex);
+            selectAt(enabled[(position + delta + enabled.length) % enabled.length]);
+        };
+        if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+            event.preventDefault();
+            step(1);
+        }
+        else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+            event.preventDefault();
+            step(-1);
+        }
+        else if (event.key === "Home") {
+            event.preventDefault();
+            selectAt(enabled[0]);
+        }
+        else if (event.key === "End") {
+            event.preventDefault();
+            selectAt(enabled[enabled.length - 1]);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { ref: rootRef, role: "radiogroup", "aria-label": ariaLabel, "aria-orientation": isVertical ? "vertical" : undefined, onKeyDown: handleKeyDown, onFocus: (event) => setShowFocus(event.target.matches(":focus-visible")), onBlur: () => setShowFocus(false), boxShadow: showFocus && !isUnderlineSlide ? trackFocusShadow : plateEdge, position: "relative", display: "inline-flex", flexDirection: isVertical ? "column" : "row", align: isVertical ? "stretch" : "center", gap: isUnderlineSlide ? "0" : TRACK_PADDING, p: isUnderlineSlide ? "0" : TRACK_PADDING, h: isVertical ? "fit-content" : control.height, boxSizing: "border-box", borderRadius: isUnderlineSlide ? "none" : "lg", borderBottom: isUnderlineSlide && !isVertical ? `${UNDERLINE_WIDTH} solid ${colors.boxborder[200]}` : undefined, borderLeft: isUnderlineSlide && isVertical ? `${UNDERLINE_WIDTH} solid ${colors.boxborder[200]}` : undefined, bg: isUnderlineSlide ? "transparent" : trackSurface, w: isFullWidth ? "100%" : "fit-content", minW: "max-content", children: [isBrandSlide && pill && ((0, jsx_runtime_1.jsx)(react_2.Box, { "aria-hidden": "true", position: "absolute", top: isVertical ? 0 : TRACK_PADDING, left: isVertical ? TRACK_PADDING : 0, right: isVertical ? TRACK_PADDING : undefined, h: segmentH, w: isVertical ? undefined : `${pill.width}px`, borderRadius: innerRadius, bg: brandFill.fill, boxShadow: `0 0.125rem 0.5rem ${colors.boxShadow.primary}`, transform: isVertical ? `translateY(${pill.top}px)` : `translateX(${pill.left}px)`, transition: SLIDE, sx: (0, motion_2.reducedMotionSx)() })), isUnderlineSlide && pill && ((0, jsx_runtime_1.jsx)(react_2.Box, { "aria-hidden": "true", position: "absolute", bottom: isVertical ? undefined : `-${UNDERLINE_WIDTH}`, left: isVertical ? `-${UNDERLINE_WIDTH}` : 0, top: isVertical ? 0 : undefined, h: isVertical ? segmentH : "0.125rem", w: isVertical ? "0.125rem" : `${pill.width}px`, borderRadius: "full", bg: colors.primary[500], transform: isVertical ? `translateY(${pill.top}px)` : `translateX(${pill.left}px)`, transition: SLIDE, sx: (0, motion_2.reducedMotionSx)() })), options.map((option, index) => {
+                const isSelected = option.value === value;
+                const showShortLabel = isCompact && !!option.shortLabel;
+                const displayLabel = showShortLabel ? option.shortLabel : option.label;
+                // Swapping to shortLabel must not shrink the accessible name — restate the full label (+ count) explicitly.
+                const compactAriaLabel = showShortLabel
+                    ? `${option.label}${option.count != null ? ` ${formatCount(option.count)}` : ""}`
+                    : undefined;
+                return ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", ref: (node) => {
+                        refs.current[index] = node;
+                    }, role: "radio", "aria-checked": isSelected, "aria-label": compactAriaLabel, disabled: option.isDisabled, tabIndex: index === tabIndex ? 0 : -1, onClick: () => onChange(option.value), position: "relative", zIndex: 1, display: "inline-flex", alignItems: "center", justifyContent: isVertical ? "flex-start" : "center", gap: "0.375rem", flex: isFullWidth ? "1" : undefined, h: segmentH, px: control.paddingX, borderRadius: innerRadius, borderWidth: "1px", borderStyle: "solid", borderColor: hasIndicator
+                        ? "transparent"
+                        : isSelected
+                            ? colors.primary.opacity[32]
+                            : "transparent", bg: hasIndicator ? "transparent" : isSelected ? colors.backgroundColor.light : "transparent", boxShadow: hasIndicator ? "none" : isSelected ? "sm" : "none", color: isBrandSlide
+                        ? isSelected
+                            ? brandFill.color
+                            : restInk
+                        : isSelected
+                            ? selectedInk
+                            : restInk, fontSize: control.fontSize, fontWeight: isSelected ? 600 : 500, whiteSpace: "nowrap", opacity: option.isDisabled ? 0.5 : 1, cursor: option.isDisabled ? "not-allowed" : "pointer", transition: (0, motion_1.transitionFor)(["color"]), _hover: option.isDisabled || isSelected ? undefined : { color: hoverInk }, sx: { ...segmentFocus, ...(0, motion_2.reducedMotionSx)() }, children: [option.icon, displayLabel, option.count != null && ((0, jsx_runtime_1.jsx)(Tag_1.default, { label: formatCount(option.count), size: COUNT_TAG_SIZE[size], variant: "subtle", colorScheme: "gray" }))] }, option.value));
+            })] }));
+}
+/** role="radiogroup" of role="radio" buttons with roving tabindex; shares variant with Toggle/TableToggle; `ref` is the radiogroup. */
+const SegmentedControl = (0, react_1.forwardRef)(SegmentedControlInner);
+SegmentedControl.displayName = "SegmentedControl";
+exports.default = SegmentedControl;

package/dist/Components/SegmentedControl/SegmentedControlProps.d.ts

@@ -0,0 +1,43 @@
+import type { ControlSize } from "../../Theme/tokens/primitives/controlSizes";
+/** Whole-track height on the button control scale (sm 32 · md 40 · lg 48px); defaults to "sm". */
+export type SegmentedControlSize = Exclude<ControlSize, "xs">;
+/** brandSlide = primary view switcher; underlineSlide = dense toolbar; default = plain buttons. */
+export type SegmentedControlVariant = "default" | "brandSlide" | "underlineSlide";
+/** Stacking axis of the track; vertical keeps each segment's own height and lets the track's width follow its widest option. Defaults to "horizontal". */
+export type SegmentedControlOrientation = "horizontal" | "vertical";
+/** One selectable segment; disabled options are skipped by keyboard nav (arrows/Home/End). */
+export type SegmentedControlOption<T extends string = string> = {
+    /** Identity of the option; compared to the top-level `value` to mark it selected and passed to `onChange`. */
+    value: T;
+    /** Visible segment text and its accessible name; `shortLabel` may replace it on narrow screens. */
+    label: string;
+    /** Shown instead of label below the "md" breakpoint, when set; the full label stays the segment's accessible name. */
+    shortLabel?: string;
+    /** Rendered before the label. */
+    icon?: JSX.Element;
+    /** Dims the segment to 50%, blocks clicks and removes it from keyboard navigation. */
+    isDisabled?: boolean;
+    /** Badge after the label, capped at 99+; omit or pass null/undefined to hide it. */
+    count?: number | null;
+};
+/** Props for SegmentedControl; T narrows options/value/onChange to the caller's literal union. */
+export type SegmentedControlProps<T extends string = string> = {
+    /** Two to five mutually exclusive options. Beyond five, use a Select. */
+    options: SegmentedControlOption<T>[];
+    /** Controlled selection; a value matching no option selects nothing. */
+    value: T;
+    /** Fires on click and on arrow/Home/End keys; not called for disabled options. */
+    onChange: (value: T) => void;
+    /** Defaults to "sm". */
+    size?: SegmentedControlSize;
+    /** Stretches the track to its container and splits it evenly between segments. */
+    isFullWidth?: boolean;
+    /** brandSlide = primary view switcher; underlineSlide = dense toolbars/headers. */
+    variant?: SegmentedControlVariant;
+    /** Stacks segments top-to-bottom instead of side-by-side. Defaults to "horizontal"; fully opt-in. */
+    orientation?: SegmentedControlOrientation;
+    /** Background this sits on. Optional: the track is opaque on any backdrop; pass it only to aim the plate's hairline edge at the real backdrop. */
+    surface?: string;
+    /** Required accessible name of the radiogroup, e.g. "View mode". */
+    "aria-label": string;
+};

package/dist/Components/SegmentedControl/SegmentedControlProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/SegmentedControl/segmentedInk.d.ts

@@ -0,0 +1,11 @@
+import type { PaletteProps } from "../../Theme/tokens/types";
+import type { SegmentedControlVariant } from "./SegmentedControlProps";
+/** The surface a segment's label really sits on. */
+export declare const segmentedTrackSurface: (variant: SegmentedControlVariant, colors: PaletteProps, surface?: string) => string;
+/** The surface the selected label sits on: the default variant lifts it onto its own plate. */
+export declare const segmentedSelectedSurface: (variant: SegmentedControlVariant, colors: PaletteProps, trackSurface: string) => string;
+/** Unselected label ink, lifted to AA against the track it is drawn on. */
+export declare const segmentedRestInk: (colors: PaletteProps, trackSurface: string) => string;
+/** The plate can match its backdrop's lightness, so its edge carries the boundary.
+ * Drawn inset by the caller: a real border consumes the content box and decentres the sliding pill. */
+export declare const segmentedPlateEdge: (colors: PaletteProps, surface?: string) => string;