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

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,15 @@
+import type { PaletteProps } from "../../Theme/tokens/types";
+import type { SegmentedControlVariant } from "./SegmentedControlProps";
+declare const TRACK_STEPS: readonly [600, 500, 400, 300, 200, 100];
+type TrackStep = (typeof TRACK_STEPS)[number] | 50;
+export declare const segmentedTrackStep: (colors: PaletteProps) => TrackStep;
+/** 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;
+export {};

package/dist/Components/SegmentedControl/segmentedInk.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.segmentedPlateEdge = exports.segmentedRestInk = exports.segmentedSelectedSurface = exports.segmentedTrackSurface = exports.segmentedTrackStep = void 0;
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const color_1 = require("../../Theme/tokens/builders/color");
+const TRACK_STEPS = [600, 500, 400, 300, 200, 100];
+// NOTE: light tracks never outweigh the outline; Zinc's full ramp makes [600] mid-grey.
+const segmentedTrackStep = (colors) => {
+    if ((0, accentText_1.isDarkCanvas)(colors.backgroundColor.main))
+        return 600;
+    const outline = (0, color_1.relativeLuminance)(colors.boxborder[500]);
+    for (const step of TRACK_STEPS) {
+        if ((0, color_1.relativeLuminance)(colors.background[step]) >= outline)
+            return step;
+    }
+    return 50;
+};
+exports.segmentedTrackStep = segmentedTrackStep;
+/** The surface a segment's label really sits on. */
+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[(0, exports.segmentedTrackStep)(colors)];
+};
+exports.segmentedTrackSurface = segmentedTrackSurface;
+/** The surface the selected label sits on: the default variant lifts it onto its own plate. */
+const segmentedSelectedSurface = (variant, colors, trackSurface) => (variant === "default" ? colors.backgroundColor.light : trackSurface);
+exports.segmentedSelectedSurface = segmentedSelectedSurface;
+/** Unselected label ink, lifted to AA against the track it is drawn on. */
+const segmentedRestInk = (colors, trackSurface) => (0, outlineRung_1.liftToContrast)(colors.text[600], trackSurface, accentText_1.AA_NORMAL_TEXT);
+exports.segmentedRestInk = segmentedRestInk;
+/** 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. */
+const segmentedPlateEdge = (colors, surface) => (0, outlineRung_1.liftToContrast)(colors.boxborder[500], surface !== null && surface !== void 0 ? surface : colors.backgroundColor.main, outlineRung_1.AA_NON_TEXT);
+exports.segmentedPlateEdge = segmentedPlateEdge;

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

@@ -0,0 +1,13 @@
+import { type DependencyList } from "react";
+export type SlidingPillRect = {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+} | null;
+/** Measures the selected item's DOM rect for a sliding pill/underline; shared by SegmentedControl and TableToggle. */
+export declare function useSlidingPill(enabled: boolean, selectedIndex: number, extraDeps: DependencyList): {
+    trackRef: import("react").MutableRefObject<HTMLDivElement | null>;
+    itemRefs: import("react").MutableRefObject<(HTMLButtonElement | null)[]>;
+    pill: SlidingPillRect;
+};

package/dist/Components/SegmentedControl/useSlidingPill.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSlidingPill = useSlidingPill;
+const react_1 = require("react");
+/** Measures the selected item's DOM rect for a sliding pill/underline; shared by SegmentedControl and TableToggle. */
+function useSlidingPill(enabled, selectedIndex, extraDeps) {
+    const trackRef = (0, react_1.useRef)(null);
+    const itemRefs = (0, react_1.useRef)([]);
+    const [pill, setPill] = (0, react_1.useState)(null);
+    (0, react_1.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/Components/Select/Select.d.ts

@@ -1,3 +1,5 @@
 import React from "react";
-import { chakraSelectProps } from "./SelectProps";
-export default function Select({ placeholder, size, variant, icon, onChange, onBlur, onFocus, errorBorderColor, isDisabled, isReadOnly, isRequired, value, colorScheme, label, error, errorMessage, helperText, options, height, formControlStyle, isInformation, informationMessage, selectStyle, }: chakraSelectProps): React.JSX.Element;
+import type { SelectFieldProps } from "./SelectProps";
+/** The library's one picker: a native `<select>` by default, or a themed popup via `native={false}`. */
+declare const Select: React.ForwardRefExoticComponent<SelectFieldProps & React.RefAttributes<HTMLDivElement | HTMLSelectElement>>;
+export default Select;

package/dist/Components/Select/Select.js

@@ -1,78 +1,79 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = Select;
-var react_1 = __importStar(require("react"));
-var react_2 = require("@chakra-ui/react");
-var textInputIconSize_1 = require("../Input/textInputIconSize");
-var FormLabel_1 = require("../Common/FormLabel");
-var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
-var HelperText_1 = __importDefault(require("../Common/HelperText"));
-function Select(_a) {
-    var _b = _a.placeholder, placeholder = _b === void 0 ? "Select Option" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.variant, variant = _d === void 0 ? "outline" : _d, icon = _a.icon, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, errorBorderColor = _a.errorBorderColor, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, _f = _a.value, value = _f === void 0 ? "" : _f, colorScheme = _a.colorScheme, label = _a.label, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, _g = _a.options, options = _g === void 0 ? [] : _g, height = _a.height, formControlStyle = _a.formControlStyle, _h = _a.isInformation, isInformation = _h === void 0 ? false : _h, informationMessage = _a.informationMessage, selectStyle = _a.selectStyle;
-    var sizeKey = typeof size === "string" ? size : "md";
-    var iconSizePx = (0, textInputIconSize_1.getTextInputIconSizePx)(sizeKey);
-    var getOptionsList = (0, react_1.useCallback)(function () {
-        if (!options.length)
-            return react_1.default.createElement("option", { value: "" }, "No Options");
-        return options.map(function (option) { return (react_1.default.createElement("option", { key: option.id, value: option.id }, option.label)); });
-    }, [options]);
-    var handleOnChange = function (event) {
-        var selectedValue = event.target.value;
-        var selectedOption = options.find(function (option) { return option.id.toString() === selectedValue.toString(); });
-        if (selectedOption && onChange) {
-            onChange(selectedOption);
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const SelectNative_1 = __importDefault(require("./SelectNative"));
+const SelectPopup_1 = __importDefault(require("./SelectPopup"));
+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 = (0, react_1.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 (react_1.default.createElement(react_2.FormControl, { isInvalid: error, style: formControlStyle, size: size },
-        label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })),
-        react_1.default.createElement(react_2.Select, __assign({ placeholder: placeholder, size: size, variant: variant, icon: icon, iconSize: "".concat(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 } : {})), getOptionsList()),
-        error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
-        helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
-}
+        if (isNative)
+            warnInertNativeProps(props);
+        else
+            warnInertPopupProps(props);
+    }
+    if (isNative) {
+        // Safe: isMulti is verified false above, so `props` structurally matches SelectSingleProps.
+        return (0, jsx_runtime_1.jsx)(SelectNative_1.default, { ref: ref, ...props });
+    }
+    return (0, jsx_runtime_1.jsx)(SelectPopup_1.default, { ref: ref, ...props });
+});
+exports.default = Select;

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

@@ -1,18 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Select = void 0;
+const placeholderInk_1 = require("../../Theme/tokens/builders/placeholderInk");
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const fieldStyles_1 = require("../Common/fieldStyles");
+const sizeField = (size) => {
+    const { h, minH, fontSize, px } = (0, fieldStyles_1.controlSizeStyles)(size);
+    return { field: { h, minH, fontSize, ps: px, pe: "2rem", py: 0 } };
+};
 exports.Select = {
-    baseStyle: {
+    baseStyle: ({ theme }) => ({
         field: {
-            fontWeight: 500,
-            fontSize: "0.875rem",
-            letterSpacing: "0.044rem",
-            borderRadius: "0.25rem",
-            minWidth: "0", // allow shrinking inside flex
-            width: "100%", // full container width
+            // 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: {
-                fontStyle: "italic",
+                color: (0, placeholderInk_1.placeholderInk)(theme.colors),
                 whiteSpace: "nowrap",
                 overflow: "hidden",
                 textOverflow: "ellipsis",
@@ -22,77 +28,37 @@ exports.Select = {
             width: "1.25rem",
             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(controlSizes_1.CONTROL_SIZE_NAMES.map((size) => [size, sizeField(size)])),
+    variants: {
+        outline: ({ theme }) => ({ field: (0, fieldStyles_1.fieldControlStyles)(theme.colors) }),
+        filled: ({ theme }) => ({
             field: {
-                h: "2.75rem",
-                fontSize: "0.9375rem",
-                px: "1rem",
-                py: "0.5rem",
+                borderRadius: fieldStyles_1.FIELD_RADIUS,
+                _focusVisible: { borderColor: theme.colors.primary[500], ...(0, focusRing_styles_1.fieldFocusVisible)(theme.colors) },
             },
-        },
-    },
-    variants: {
-        outline: function (props) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-            var theme = props.theme;
-            var errorColor = (_c = (_b = (_a = theme.colors.semantic) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b[500]) !== null && _c !== void 0 ? _c : "red.500";
-            var borderColor = (_e = (_d = theme.colors.boxborder) === null || _d === void 0 ? void 0 : _d[500]) !== null && _e !== void 0 ? _e : "gray.300";
-            var shadowPrimary = (_g = (_f = theme.colors.boxShadow) === null || _f === void 0 ? void 0 : _f.primary) !== null && _g !== void 0 ? _g : "blue.100";
-            var shadowError = (_j = (_h = theme.colors.boxShadow) === null || _h === void 0 ? void 0 : _h.error) !== null && _j !== void 0 ? _j : "red.100";
-            var primary = (_l = (_k = theme.colors.primary) === null || _k === void 0 ? void 0 : _k[500]) !== null && _l !== void 0 ? _l : "blue.500";
+        }),
+        flushed: ({ theme }) => {
+            const { colors } = theme;
             return {
                 field: {
-                    bg: (_o = (_m = theme.colors.gray) === null || _m === void 0 ? void 0 : _m[50]) !== null && _o !== void 0 ? _o : "gray.50",
-                    border: "0.063rem solid",
-                    borderColor: borderColor,
-                    _hover: {
-                        borderColor: primary,
-                        boxShadow: "0 0 0 0.125rem ".concat(shadowPrimary),
-                    },
-                    _focus: {
-                        borderColor: primary,
-                        boxShadow: "0 0 0 0.125rem ".concat(shadowPrimary),
-                    },
-                    _disabled: {
-                        opacity: 0.4,
-                        cursor: "not-allowed",
-                    },
-                    _invalid: {
-                        borderColor: errorColor,
-                        boxShadow: "0 0 0 0.125rem ".concat(shadowError),
-                        _hover: {
-                            borderColor: errorColor,
-                            boxShadow: "0 0 0 0.125rem ".concat(shadowError),
-                        },
-                        _focus: {
-                            borderColor: errorColor,
-                            boxShadow: "0 0 0 0.125rem ".concat(shadowError),
-                        },
+                    borderColor: colors.boxborder[500],
+                    _hover: { borderColor: (0, fieldStyles_1.fieldHoverBorder)(colors) },
+                    _focusVisible: {
+                        borderColor: colors.primary[500],
+                        borderBottomWidth: "2px",
+                        ...(0, focusRing_styles_1.fieldFocusVisible)(colors),
                     },
+                    _invalid: { borderColor: colors.semanticText.error, borderBottomWidth: "2px", boxShadow: "none" },
                 },
             };
         },
+        unstyled: ({ theme }) => ({
+            field: { borderRadius: fieldStyles_1.FIELD_RADIUS, _focusVisible: (0, focusRing_styles_1.focusVisibleRing)(theme.colors) },
+        }),
     },
     defaultProps: {
         variant: "outline",
-        size: "md",
+        size: "sm",
     },
 };