pixelize-design-library 3.0.1-beta.1 → 3.1.0

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

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

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from "@chakra-ui/react";
+import { useEffect, useRef, useState } from "react";
+import ToolTip from "../ToolTip/ToolTip.js";
+const SelectTruncatedLabel = ({ label, maxWidth = "6rem", fontSize = "sm", }) => {
+    const textRef = useRef(null);
+    const [isOverflowing, setIsOverflowing] = useState(false);
+    useEffect(() => {
+        const el = textRef.current;
+        if (el) {
+            setIsOverflowing(el.scrollWidth > el.clientWidth);
+        }
+    }, [label, maxWidth]);
+    const textElement = (_jsx(Text, { ref: textRef, maxW: maxWidth, isTruncated: true, whiteSpace: "nowrap", fontWeight: 500, fontSize: fontSize, letterSpacing: "0.044rem", children: label }));
+    return isOverflowing ? _jsx(ToolTip, { label: label, placement: "top", children: textElement }) : textElement;
+};
+export default SelectTruncatedLabel;

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

@@ -0,0 +1,81 @@
+// 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: CONTROL_SIZES.xs.height,
+        px: 2,
+        pr: "1.75rem",
+        gap: "0.25rem",
+        fieldFontSize: "xs",
+        fieldHeight: innerHeight("xs"),
+        chevronSize: 14,
+        iconButtonSize: "xs",
+        tagSize: "sm",
+        spinnerSize: "sm",
+        insideSelectDefaultHeight: innerHeight("xs"),
+        rightOffset: "0.5rem",
+        clearIconSize: 10,
+        addNewIconSize: 14,
+        insideSelectMarginLeft: "-0.5rem",
+        checkboxSize: "sm",
+    },
+    sm: {
+        minH: CONTROL_SIZES.sm.height,
+        px: 2.5,
+        pr: "1.85rem",
+        gap: "0.3rem",
+        fieldFontSize: "sm",
+        fieldHeight: innerHeight("sm"),
+        chevronSize: 16,
+        iconButtonSize: "sm",
+        tagSize: "sm",
+        spinnerSize: "sm",
+        insideSelectDefaultHeight: innerHeight("sm"),
+        rightOffset: "0.5rem",
+        clearIconSize: 12,
+        addNewIconSize: 16,
+        insideSelectMarginLeft: "-0.625rem",
+        checkboxSize: "sm",
+    },
+    md: {
+        minH: CONTROL_SIZES.md.height,
+        px: 3,
+        pr: "2rem",
+        gap: "0.375rem",
+        fieldFontSize: "sm",
+        fieldHeight: innerHeight("md"),
+        chevronSize: 16,
+        iconButtonSize: "sm",
+        tagSize: "sm",
+        spinnerSize: "sm",
+        insideSelectDefaultHeight: innerHeight("md"),
+        rightOffset: "0.75rem",
+        clearIconSize: 12,
+        addNewIconSize: 16,
+        insideSelectMarginLeft: "-0.75rem",
+        checkboxSize: "md",
+    },
+    lg: {
+        minH: CONTROL_SIZES.lg.height,
+        px: 4,
+        pr: "2.25rem",
+        gap: "0.5rem",
+        fieldFontSize: "sm",
+        fieldHeight: innerHeight("lg"),
+        chevronSize: 18,
+        iconButtonSize: "md",
+        tagSize: "md",
+        spinnerSize: "md",
+        insideSelectDefaultHeight: innerHeight("lg"),
+        rightOffset: "0.75rem",
+        clearIconSize: 14,
+        addNewIconSize: 18,
+        insideSelectMarginLeft: "-0.875rem",
+        checkboxSize: "lg",
+    },
+};
+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,32 @@
+import { AA_NON_TEXT, liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
+import { AA_NORMAL_TEXT, isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { relativeLuminance } from "../../Theme/tokens/builders/color.js";
+const TRACK_STEPS = [600, 500, 400, 300, 200, 100];
+// NOTE: light tracks never outweigh the outline; Zinc's full ramp makes [600] mid-grey.
+export const segmentedTrackStep = (colors) => {
+    if (isDarkCanvas(colors.backgroundColor.main))
+        return 600;
+    const outline = relativeLuminance(colors.boxborder[500]);
+    for (const step of TRACK_STEPS) {
+        if (relativeLuminance(colors.background[step]) >= outline)
+            return step;
+    }
+    return 50;
+};
+/** 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[segmentedTrackStep(colors)];
+};
+/** 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

@@ -0,0 +1,74 @@
+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.");
+        }
+        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

@@ -0,0 +1,61 @@
+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: {
+            // NOTE: Chakra's own --select-bg dark swap never matches here; this keeps native options dark-aware.
+            "--select-bg": theme.colors.background[50],
+            minWidth: "0",
+            width: "100%",
+            maxWidth: "100%",
+            _placeholder: {
+                color: placeholderInk(theme.colors),
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+            },
+        },
+        icon: {
+            width: "1.25rem",
+            height: "1.25rem",
+        },
+    }),
+    sizes: Object.fromEntries(CONTROL_SIZE_NAMES.map((size) => [size, sizeField(size)])),
+    variants: {
+        outline: ({ theme }) => ({ field: fieldControlStyles(theme.colors) }),
+        filled: ({ theme }) => ({
+            field: {
+                borderRadius: FIELD_RADIUS,
+                _focusVisible: { borderColor: theme.colors.primary[500], ...fieldFocusVisible(theme.colors) },
+            },
+        }),
+        flushed: ({ theme }) => {
+            const { colors } = theme;
+            return {
+                field: {
+                    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: "sm",
+    },
+};

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

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useRef, useState } from "react";
+import { Select as ChakraSelect, FormControl } from "@chakra-ui/react";
+import { CONTROL_SIZES, DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes.js";
+import { TextLabel } from "../Common/FormLabel.js";
+import FieldMessage from "../Common/FieldMessage.js";
+import { useFieldIds } from "../Common/useFieldIds.js";
+const optionGroups = (options) => {
+    const segments = [];
+    options.forEach((option) => {
+        const last = segments[segments.length - 1];
+        if (last && last.group === option.group) {
+            last.options.push(option);
+        }
+        else {
+            segments.push({ group: option.group, options: [option] });
+        }
+    });
+    return segments;
+};
+/** Native `<select>` renderer — today's `Select`, unchanged, plus optgroup/disabled from `option.group`/`isDisabled`. */
+const SelectNative = forwardRef(function SelectNative({ placeholder = "Select Option", size = DEFAULT_CONTROL_SIZE, variant = "outline", icon, onChange, onBlur, onFocus, errorBorderColor, isDisabled, isReadOnly, isRequired = false, value, defaultValue, colorScheme, label, id, name, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, error = false, errorMessage, helperText, options = [], width, height, formControlStyle, isInformation = false, informationMessage, selectStyle, noOptionsMessage, }, ref) {
+    const ids = useFieldIds(id, { error, errorMessage, helperText });
+    const [internalValue, setInternalValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : "");
+    const wasControlledRef = useRef(false);
+    if (value !== undefined)
+        wasControlledRef.current = true;
+    const shownValue = value !== null && value !== void 0 ? value : (wasControlledRef.current ? "" : internalValue);
+    const getOptionsList = useCallback(() => {
+        if (!options.length) {
+            return _jsx("option", { value: "", children: String(noOptionsMessage !== null && noOptionsMessage !== void 0 ? noOptionsMessage : "No Options") });
+        }
+        return optionGroups(options).map((segment, index) => {
+            const rows = segment.options.map((option) => (_jsx("option", { value: option.id, disabled: option.isDisabled, children: option.label }, option.id)));
+            if (!segment.group)
+                return rows;
+            return (_jsx("optgroup", { label: segment.group, children: rows }, `${segment.group}-${index}`));
+        });
+    }, [options, noOptionsMessage]);
+    const handleOnChange = (event) => {
+        if (isReadOnly)
+            return;
+        const selectedOption = options.find((option) => option.id.toString() === event.target.value.toString());
+        if (!selectedOption)
+            return;
+        setInternalValue(selectedOption.id);
+        onChange(selectedOption);
+    };
+    return (_jsxs(FormControl, { isInvalid: error, style: formControlStyle, width: width, children: [label && (_jsx(TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsx(ChakraSelect, { ref: ref, ...ids.controlProps, name: name, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, placeholder: placeholder, size: size, variant: variant, icon: icon, iconSize: `${CONTROL_SIZES[size].iconSize}px`, isInvalid: error, isRequired: isRequired, value: shownValue, 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() }), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+});
+export default SelectNative;