pixelize-design-library 2.4.2-beta.9 → 3.0.0

package/dist/esm/Components/SearchSelect/searchSelectNav.js

@@ -0,0 +1,32 @@
+export const NO_ROW = -1;
+export const SELECT_ALL_ROW = -2;
+export const ADD_NEW_ROW = -3;
+export const navRows = ({ optionCount, hasSelectAll, hasAddNew }) => [
+    ...(hasSelectAll ? [SELECT_ALL_ROW] : []),
+    ...Array.from({ length: optionCount }, (_, index) => index),
+    ...(hasAddNew ? [ADD_NEW_ROW] : []),
+];
+export const hasRow = (row, { optionCount, hasSelectAll, hasAddNew }) => (row >= 0 && row < optionCount) || (row === SELECT_ALL_ROW && hasSelectAll) || (row === ADD_NEW_ROW && hasAddNew);
+export const stepRow = (layout, current, delta) => {
+    const rows = navRows(layout);
+    if (!rows.length)
+        return 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];
+};
+export const firstRow = ({ optionCount, hasSelectAll, hasAddNew }) => {
+    if (hasSelectAll)
+        return SELECT_ALL_ROW;
+    if (optionCount > 0)
+        return 0;
+    return hasAddNew ? ADD_NEW_ROW : NO_ROW;
+};
+export const lastRow = ({ optionCount, hasSelectAll, hasAddNew }) => {
+    if (hasAddNew)
+        return ADD_NEW_ROW;
+    if (optionCount > 0)
+        return optionCount - 1;
+    return hasSelectAll ? SELECT_ALL_ROW : NO_ROW;
+};

package/dist/esm/Components/SearchSelect/searchSelectSize.js

@@ -1,92 +1,80 @@
+// Layout tokens for SearchSelect so `size` matches Chakra input density (xs-lg).
+import { CONTROL_SIZES } from "../../Theme/tokens/primitives/controlSizes.js";
+const innerHeight = (size) => `calc(${CONTROL_SIZES[size].height} - 2px)`;
 const SIZE_STYLES = {
     xs: {
-        minH: "1.5rem",
+        minH: 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: 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: 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: 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`.
- */
 export function getSearchSelectSizeStyles(size) {
     var _a;
     return (_a = SIZE_STYLES[size]) !== null && _a !== void 0 ? _a : SIZE_STYLES.md;

package/dist/esm/Components/SectionRail/SectionRail.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Box, Flex, Text, VisuallyHidden, useTheme } from "@chakra-ui/react";
+import Select from "../Select/Select.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { focusVisibleRing } from "../../Theme/chakra/focusRing.styles.js";
+import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+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] = useState(() => matchesMinWidth(query));
+    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 } = useCustomTheme();
+    const { breakpoints } = useTheme();
+    const isRail = useMinWidth((_a = breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints[collapseBelow]) !== null && _a !== void 0 ? _a : FALLBACK_BREAKPOINTS[collapseBelow]);
+    const rows = listRowBackgrounds(colors);
+    if (!isRail) {
+        return (_jsx(Select, { "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 (_jsx(Flex, { as: "nav", "aria-label": ariaLabel, direction: "column", gap: "2px", children: sections.map((section) => {
+            const isActive = section.id === activeId;
+            return (_jsxs(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: transitionFor(["background-color", "color"]), _hover: { bg: isActive ? rows.selectedActive : rows.active }, _focusVisible: focusVisibleRing(colors), sx: reducedMotionSx(), onClick: () => onSelect(section.id), children: [section.icon ? (_jsx(Box, { as: "span", "aria-hidden": true, display: "inline-flex", flexShrink: 0, children: section.icon })) : null, _jsx(Text, { as: "span", noOfLines: 1, flex: "1", minW: 0, children: section.label }), section.isDirty ? (_jsxs(_Fragment, { children: [_jsx(Box, { as: "span", "aria-hidden": true, boxSize: "6px", borderRadius: "full", flexShrink: 0, bg: colors.semanticText.warning }), _jsx(VisuallyHidden, { children: dirtyHint })] })) : null] }, section.id));
+        }) }));
+};
+export default SectionRail;

package/dist/esm/Components/SectionRail/SectionRailProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/SectionRail/index.js

@@ -0,0 +1 @@
+export { default as SectionRail } from "./SectionRail.js";

package/dist/esm/Components/SegmentedControl/SegmentedControl.js

@@ -0,0 +1,119 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from "react";
+import { Box, Flex, useBreakpointValue, useMergeRefs } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
+import { BUTTON_SIZES } from "../../Theme/tokens/primitives/controlSizes.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
+import { FOCUS_VISIBLE_OVER_STATE, focusRingShadow, focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { AA_NORMAL_TEXT } from "../../Theme/tokens/builders/accentText.js";
+import { liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
+import Tag from "../Tag/Tag.js";
+import { useSlidingPill } from "./useSlidingPill.js";
+import { segmentedPlateEdge, segmentedRestInk, segmentedSelectedSurface, segmentedTrackSurface, } from "./segmentedInk.js";
+const TRACK_PADDING = "0.125rem";
+const UNDERLINE_WIDTH = BORDER_WIDTHS.hairline;
+const SLIDE = 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 } = useCustomTheme();
+    const control = 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 = useBreakpointValue({ base: true, md: false }, { ssr: false })) !== null && _a !== void 0 ? _a : false;
+    const brandFill = resolveFilledSurface(colors.primary, colors);
+    const trackSurface = segmentedTrackSurface(variant, colors, surface);
+    const restInk = segmentedRestInk(colors, trackSurface);
+    const selectedInk = liftToContrast(colors.accentText, segmentedSelectedSurface(variant, colors, trackSurface), AA_NORMAL_TEXT);
+    const hoverInk = liftToContrast(colors.text[900], trackSurface, 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 ${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
+        ? focusVisibleStyles(colors)
+        : { _focusVisible: noRing, [FOCUS_VISIBLE_OVER_STATE]: noRing };
+    const ring = focusRingShadow(colors);
+    const trackFocusShadow = plateEdge ? `${plateEdge}, ${ring}` : ring;
+    const [showFocus, setShowFocus] = 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 } = useSlidingPill(hasIndicator, selectedIndex, [
+        options,
+        isFullWidth,
+        size,
+        orientation,
+        isCompact,
+    ]);
+    const rootRef = 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 (_jsxs(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 && (_jsx(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: reducedMotionSx() })), isUnderlineSlide && pill && (_jsx(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: 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 (_jsxs(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: transitionFor(["color"]), _hover: option.isDisabled || isSelected ? undefined : { color: hoverInk }, sx: { ...segmentFocus, ...reducedMotionSx() }, children: [option.icon, displayLabel, option.count != null && (_jsx(Tag, { 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 = forwardRef(SegmentedControlInner);
+SegmentedControl.displayName = "SegmentedControl";
+export default SegmentedControl;

package/dist/esm/Components/SegmentedControl/SegmentedControlProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/SegmentedControl/segmentedInk.js

@@ -0,0 +1,19 @@
+import { AA_NON_TEXT, liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
+import { AA_NORMAL_TEXT } from "../../Theme/tokens/builders/accentText.js";
+/** The surface a segment's label really sits on. */
+export const segmentedTrackSurface = (variant, colors, surface) => {
+    if (variant === "underlineSlide")
+        return surface !== null && surface !== void 0 ? surface : colors.backgroundColor.main;
+    // brandSlide paints an opaque plate on every backdrop: a tint composites into an unknown
+    // parent, so its ink was derived from a canvas the control was not actually on.
+    if (variant === "brandSlide")
+        return colors.surfaceRaised;
+    return colors.background[600];
+};
+/** The surface the selected label sits on: the default variant lifts it onto its own plate. */
+export const segmentedSelectedSurface = (variant, colors, trackSurface) => (variant === "default" ? colors.backgroundColor.light : trackSurface);
+/** Unselected label ink, lifted to AA against the track it is drawn on. */
+export const segmentedRestInk = (colors, trackSurface) => liftToContrast(colors.text[600], trackSurface, AA_NORMAL_TEXT);
+/** 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 const segmentedPlateEdge = (colors, surface) => liftToContrast(colors.boxborder[500], surface !== null && surface !== void 0 ? surface : colors.backgroundColor.main, AA_NON_TEXT);

package/dist/esm/Components/SegmentedControl/useSlidingPill.js

@@ -0,0 +1,27 @@
+import { useLayoutEffect, useRef, useState } from "react";
+/** Measures the selected item's DOM rect for a sliding pill/underline; shared by SegmentedControl and TableToggle. */
+export function useSlidingPill(enabled, selectedIndex, extraDeps) {
+    const trackRef = useRef(null);
+    const itemRefs = useRef([]);
+    const [pill, setPill] = useState(null);
+    useLayoutEffect(() => {
+        if (!enabled)
+            return;
+        const track = trackRef.current;
+        const node = itemRefs.current[selectedIndex];
+        if (!track || !node) {
+            setPill(null);
+            return;
+        }
+        const trackRect = track.getBoundingClientRect();
+        const nodeRect = node.getBoundingClientRect();
+        setPill({
+            left: nodeRect.left - trackRect.left,
+            top: nodeRect.top - trackRect.top,
+            width: nodeRect.width,
+            height: nodeRect.height,
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [enabled, selectedIndex, ...extraDeps]);
+    return { trackRef, itemRefs, pill };
+}

package/dist/esm/Components/Select/Select.js

@@ -1,24 +1,74 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback } from "react";
-import { Select as ChakraSelect, FormControl } from "@chakra-ui/react";
-import { getTextInputIconSizePx } from "../Input/textInputIconSize.js";
-import { TextLabel } from "../Common/FormLabel.js";
-import ErrorMessage from "../Common/ErrorMessage.js";
-import HelperText from "../Common/HelperText.js";
-export default function Select({ placeholder = "Select Option", size = "md", variant = "outline", icon, onChange, onBlur, onFocus, errorBorderColor, isDisabled, isReadOnly, isRequired = false, value = "", colorScheme, label, error, errorMessage, helperText, options = [], height, formControlStyle, isInformation = false, informationMessage, selectStyle, }) {
-    const sizeKey = typeof size === "string" ? size : "md";
-    const iconSizePx = getTextInputIconSizePx(sizeKey);
-    const getOptionsList = useCallback(() => {
-        if (!options.length)
-            return _jsx("option", { value: "", children: "No Options" });
-        return options.map((option) => (_jsx("option", { value: option.id, children: option.label }, option.id)));
-    }, [options]);
-    const handleOnChange = (event) => {
-        const selectedValue = event.target.value;
-        const selectedOption = options.find((option) => option.id.toString() === selectedValue.toString());
-        if (selectedOption && onChange) {
-            onChange(selectedOption);
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import SelectNative from "./SelectNative.js";
+import SelectPopup from "./SelectPopup.js";
+const NATIVE_INERT_PROPS = [
+    "isSearchable",
+    "searchValue",
+    "defaultSearchValue",
+    "onSearchChange",
+    "searchDebounceMs",
+    "isClearable",
+    "onClear",
+    "isLoading",
+    "loadingText",
+    "isFieldLoading",
+    "rightIcon",
+    "searchFields",
+    "filterOption",
+    "createWhen",
+    "footerAction",
+    "onLoadMore",
+    "renderOption",
+    "renderValue",
+    "onCreate",
+    "createLabel",
+    "maxMenuHeight",
+    "defaultOpen",
+    "virtualizeAfter",
+];
+const warnInertNativeProps = (props) => {
+    const passed = NATIVE_INERT_PROPS.filter((key) => props[key] !== undefined);
+    if (!passed.length)
+        return;
+    console.warn(`Select: ${passed.join(", ")} ${passed.length > 1 ? "are" : "is"} inert while native is true (the default) — pass native={false} to use them.`);
+};
+const POPUP_INERT_NATIVE_PROPS = [
+    "height",
+    "variant",
+    "colorScheme",
+    "icon",
+    "bg",
+    "borderColor",
+    "color",
+    "errorBorderColor",
+    "selectStyle",
+];
+const warnInertPopupProps = (props) => {
+    const passed = POPUP_INERT_NATIVE_PROPS.filter((key) => props[key] !== undefined);
+    if (!passed.length)
+        return;
+    console.warn(`Select: ${passed.join(", ")} ${passed.length > 1 ? "are" : "is"} inert while native is false — pass native={true} (or omit native) to use them.`);
+};
+/** The library's one picker: a native `<select>` by default, or a themed popup via `native={false}`. */
+const Select = forwardRef(function Select(props, ref) {
+    var _a;
+    const isMulti = props.isMulti === true;
+    const requestedNative = (_a = props.native) !== null && _a !== void 0 ? _a : true;
+    const isNative = isMulti ? false : requestedNative;
+    if (process.env.NODE_ENV !== "production") {
+        if (isMulti && requestedNative) {
+            console.warn("Select: isMulti requires native={false}; rendering the popup regardless of the native prop.");
         }
-    };
-    return (_jsxs(FormControl, { isInvalid: error, style: formControlStyle, size: size, children: [label && (_jsx(TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsx(ChakraSelect, { placeholder: placeholder, size: size, variant: variant, icon: icon, iconSize: `${iconSizePx}px`, isInvalid: error, value: value, onChange: handleOnChange, onBlur: onBlur, onFocus: onFocus, isDisabled: isDisabled, isReadOnly: isReadOnly, colorScheme: colorScheme, errorBorderColor: errorBorderColor, style: selectStyle, ...(height != null && height !== "" ? { minH: height, h: height } : {}), children: getOptionsList() }), error && _jsx(ErrorMessage, { errorMessage: errorMessage }), helperText && !error && _jsx(HelperText, { helperText: helperText })] }));
-}
+        if (isNative)
+            warnInertNativeProps(props);
+        else
+            warnInertPopupProps(props);
+    }
+    if (isNative) {
+        // Safe: isMulti is verified false above, so `props` structurally matches SelectSingleProps.
+        return _jsx(SelectNative, { ref: ref, ...props });
+    }
+    return _jsx(SelectPopup, { ref: ref, ...props });
+});
+export default Select;

package/dist/esm/Components/Select/Select.styles.js

@@ -1,23 +1,20 @@
 import { placeholderInk } from "../../Theme/tokens/builders/placeholderInk.js";
+import { CONTROL_SIZE_NAMES } from "../../Theme/tokens/primitives/controlSizes.js";
+import { fieldFocusVisible, focusVisibleRing } from "../../Theme/chakra/focusRing.styles.js";
+import { FIELD_RADIUS, controlSizeStyles, fieldControlStyles, fieldHoverBorder } from "../Common/fieldStyles.js";
+const sizeField = (size) => {
+    const { h, minH, fontSize, px } = controlSizeStyles(size);
+    return { field: { h, minH, fontSize, ps: px, pe: "2rem", py: 0 } };
+};
 export const Select = {
     baseStyle: ({ theme }) => ({
         field: {
-            // Chakra's stock Select sets `--select-bg: colors.white` and swaps it to gray.700 behind
-            // `.chakra-ui-dark`/`[data-theme="dark"]` — selectors that NEVER match here, because dark
-            // mode swaps the palette instead of flipping Chakra's colour mode. The variable therefore
-            // stayed `#fff`, painting the native `<option>` list white-on-white in dark. `background[50]`
-            // is the canvas-following equivalent: byte-identical `#ffffff` in light, dark in dark.
+            // NOTE: Chakra's own --select-bg dark swap never matches here; this keeps native options dark-aware.
             "--select-bg": theme.colors.background[50],
-            fontWeight: 500,
-            fontSize: "0.875rem",
-            letterSpacing: "0.044rem",
-            borderRadius: "lg",
-            transition: "border-color 0.2s, box-shadow 0.2s",
-            minWidth: "0", // allow shrinking inside flex
-            width: "100%", // full container width
+            minWidth: "0",
+            width: "100%",
             maxWidth: "100%",
             _placeholder: {
-                fontStyle: "italic",
                 color: placeholderInk(theme.colors),
                 whiteSpace: "nowrap",
                 overflow: "hidden",
@@ -29,78 +26,36 @@ export const Select = {
             height: "1.25rem",
         },
     }),
-    sizes: {
-        sm: {
-            field: {
-                h: "2.125rem",
-                fontSize: "0.8125rem",
-                px: "0.5rem",
-                py: "0.5rem",
-            },
-        },
-        md: {
-            field: {
-                h: "2.375rem",
-                fontSize: "0.875rem",
-                px: "0.75rem",
-                py: "0.5rem",
-            },
-        },
-        lg: {
+    sizes: Object.fromEntries(CONTROL_SIZE_NAMES.map((size) => [size, sizeField(size)])),
+    variants: {
+        outline: ({ theme }) => ({ field: fieldControlStyles(theme.colors) }),
+        filled: ({ theme }) => ({
             field: {
-                h: "2.75rem",
-                fontSize: "0.9375rem",
-                px: "1rem",
-                py: "0.5rem",
+                borderRadius: FIELD_RADIUS,
+                _focusVisible: { borderColor: theme.colors.primary[500], ...fieldFocusVisible(theme.colors) },
             },
-        },
-    },
-    variants: {
-        outline: (props) => {
-            const { theme } = props;
-            const errorColor = theme.colors.semanticText.error;
-            // [800], not [500]/[700]: WCAG 1.4.11 needs >=3.0 for a control boundary, measured
-            // against the parent surface — up to `muted` (lightest). [700] fails there (2.41-2.72);
-            // [800] clears all named surfaces with margin (3.44-3.90).
-            const borderColor = theme.colors.boxborder[500];
-            const shadowPrimary = theme.colors.boxShadow.primary;
-            const shadowError = theme.colors.boxShadow.error;
-            const primary = theme.colors.primary[500];
+        }),
+        flushed: ({ theme }) => {
+            const { colors } = theme;
             return {
                 field: {
-                    bg: theme.colors.gray[50],
-                    border: "0.063rem solid",
-                    borderColor,
-                    _hover: {
-                        borderColor: primary,
-                        boxShadow: `0 0 0 0.125rem ${shadowPrimary}`,
-                    },
-                    _focus: {
-                        borderColor: primary,
-                        boxShadow: `0 0 0 0.125rem ${shadowPrimary}`,
-                    },
-                    _disabled: {
-                        opacity: 0.4,
-                        cursor: "not-allowed",
-                    },
-                    _invalid: {
-                        borderColor: errorColor,
-                        boxShadow: `0 0 0 0.125rem ${shadowError}`,
-                        _hover: {
-                            borderColor: errorColor,
-                            boxShadow: `0 0 0 0.125rem ${shadowError}`,
-                        },
-                        _focus: {
-                            borderColor: errorColor,
-                            boxShadow: `0 0 0 0.125rem ${shadowError}`,
-                        },
+                    borderColor: colors.boxborder[500],
+                    _hover: { borderColor: fieldHoverBorder(colors) },
+                    _focusVisible: {
+                        borderColor: colors.primary[500],
+                        borderBottomWidth: "2px",
+                        ...fieldFocusVisible(colors),
                     },
+                    _invalid: { borderColor: colors.semanticText.error, borderBottomWidth: "2px", boxShadow: "none" },
                 },
             };
         },
+        unstyled: ({ theme }) => ({
+            field: { borderRadius: FIELD_RADIUS, _focusVisible: focusVisibleRing(theme.colors) },
+        }),
     },
     defaultProps: {
         variant: "outline",
-        size: "md",
+        size: "sm",
     },
 };