pixelize-design-library 2.4.2-beta.43 → 2.4.2-beta.44

package/dist/Components/SegmentedControl/SegmentedControl.js

@@ -1,43 +1,53 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = SegmentedControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_2 = require("@chakra-ui/react");
+const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
-const SIZES = {
-    sm: { h: "1.625rem", px: "0.625rem", fontSize: "0.75rem" },
-    md: { h: "2rem", px: "0.875rem", fontSize: "0.8125rem" },
-};
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+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 color_1 = require("../../Theme/tokens/builders/color");
+const Tag_1 = __importDefault(require("../Tag/Tag"));
+const useSlidingPill_1 = require("./useSlidingPill");
+const TRACK_PADDING = "0.125rem";
+const UNDERLINE_WIDTH = "0.0625rem";
+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}`);
 /** Renders role="radiogroup" of role="radio" buttons with roving tabindex, not a native form radio group; shares variant with Toggle/TableToggle (see MODULE.md). */
-function SegmentedControl({ options, value, onChange, size = "md", isFullWidth = false, variant = "default", "aria-label": ariaLabel, }) {
+function SegmentedControl({ options, value, onChange, size = "sm", isFullWidth = false, variant = "default", "aria-label": ariaLabel, }) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    const dims = SIZES[size];
-    const refs = (0, react_1.useRef)([]);
-    const trackRef = (0, react_1.useRef)(null);
+    const control = controlSizes_1.CONTROL_SIZES[size];
     const isBrandSlide = variant === "brandSlide";
     const isUnderlineSlide = variant === "underlineSlide";
     const hasIndicator = isBrandSlide || isUnderlineSlide;
     const brandFill = (0, filledSurface_1.resolveFilledSurface)(colors.primary, colors);
-    const [pill, setPill] = (0, react_1.useState)(null);
+    // brandSlide's track is a translucent tint — composite it before measuring contrast.
+    const trackSurface = isUnderlineSlide
+        ? colors.backgroundColor.main
+        : isBrandSlide
+            ? (0, color_1.compositeOver)(colors.primary.opacity[8], colors.backgroundColor.main)
+            : colors.background[600];
+    const restInk = (0, outlineRung_1.liftToContrast)(colors.text[600], trackSurface, accentText_1.AA_NORMAL_TEXT);
+    const segmentH = `calc(${control.height} - ${isUnderlineSlide ? UNDERLINE_WIDTH : `2 * ${TRACK_PADDING}`})`;
     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];
-    (0, react_1.useLayoutEffect)(() => {
-        if (!hasIndicator)
-            return;
-        const track = trackRef.current;
-        const node = refs.current[selectedIndex];
-        if (!track || !node) {
-            setPill(null);
-            return;
-        }
-        const trackRect = track.getBoundingClientRect();
-        const nodeRect = node.getBoundingClientRect();
-        setPill({ left: nodeRect.left - trackRect.left, width: nodeRect.width });
-    }, [hasIndicator, selectedIndex, options, isFullWidth, size]);
+    const { trackRef, itemRefs: refs, pill } = (0, useSlidingPill_1.useSlidingPill)(hasIndicator, selectedIndex, [
+        options,
+        isFullWidth,
+        size,
+    ]);
     const selectAt = (index) => {
         var _a;
         (_a = refs.current[index]) === null || _a === void 0 ? void 0 : _a.focus();
@@ -67,23 +77,20 @@ function SegmentedControl({ options, value, onChange, size = "md", isFullWidth =
             selectAt(enabled[enabled.length - 1]);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { ref: trackRef, role: "radiogroup", "aria-label": ariaLabel, onKeyDown: handleKeyDown, position: "relative", display: "inline-flex", align: "center", gap: isUnderlineSlide ? "0" : "0.125rem", p: isUnderlineSlide ? "0" : "0.125rem", borderRadius: isUnderlineSlide ? "none" : "md", borderBottom: isUnderlineSlide ? `0.0625rem solid ${colors.boxborder[200]}` : undefined, bg: isBrandSlide ? colors.primary.opacity[8] : isUnderlineSlide ? "transparent" : colors.background[600], w: isFullWidth ? "100%" : "fit-content", children: [isBrandSlide && pill && ((0, jsx_runtime_1.jsx)(react_2.Box, { "aria-hidden": "true", position: "absolute", top: "0.125rem", left: 0, h: dims.h, w: `${pill.width}px`, borderRadius: "base", bg: brandFill.fill, boxShadow: `0 0.125rem 0.5rem ${colors.boxShadow.primary}`, transform: `translateX(${pill.left}px)`, transition: "transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.24s cubic-bezier(0.2, 0.8, 0.2, 1)" })), isUnderlineSlide && pill && ((0, jsx_runtime_1.jsx)(react_2.Box, { "aria-hidden": "true", position: "absolute", bottom: "-0.0625rem", left: 0, h: "0.125rem", w: `${pill.width}px`, borderRadius: "full", bg: colors.primary[500], transform: `translateX(${pill.left}px)`, transition: "transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.24s cubic-bezier(0.2, 0.8, 0.2, 1)" })), options.map((option, index) => {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { ref: trackRef, role: "radiogroup", "aria-label": ariaLabel, onKeyDown: handleKeyDown, position: "relative", display: "inline-flex", align: "center", gap: isUnderlineSlide ? "0" : TRACK_PADDING, p: isUnderlineSlide ? "0" : TRACK_PADDING, h: control.height, boxSizing: "border-box", borderRadius: isUnderlineSlide ? "none" : "lg", borderBottom: isUnderlineSlide ? `${UNDERLINE_WIDTH} solid ${colors.boxborder[200]}` : undefined, bg: isBrandSlide ? colors.primary.opacity[8] : isUnderlineSlide ? "transparent" : colors.background[600], w: isFullWidth ? "100%" : "fit-content", children: [isBrandSlide && pill && ((0, jsx_runtime_1.jsx)(react_1.Box, { "aria-hidden": "true", position: "absolute", top: TRACK_PADDING, left: 0, h: segmentH, w: `${pill.width}px`, borderRadius: "lg", bg: brandFill.fill, boxShadow: `0 0.125rem 0.5rem ${colors.boxShadow.primary}`, transform: `translateX(${pill.left}px)`, transition: SLIDE, sx: (0, motion_2.reducedMotionSx)() })), isUnderlineSlide && pill && ((0, jsx_runtime_1.jsx)(react_1.Box, { "aria-hidden": "true", position: "absolute", bottom: "-0.0625rem", left: 0, h: "0.125rem", w: `${pill.width}px`, borderRadius: "full", bg: colors.primary[500], transform: `translateX(${pill.left}px)`, transition: SLIDE, sx: (0, motion_2.reducedMotionSx)() })), options.map((option, index) => {
                 const isSelected = option.value === value;
-                return ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", ref: (node) => {
+                return ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", ref: (node) => {
                         refs.current[index] = node;
-                    }, role: "radio", "aria-checked": isSelected, disabled: option.isDisabled, tabIndex: index === tabIndex ? 0 : -1, onClick: () => onChange(option.value), position: "relative", zIndex: 1, display: "inline-flex", alignItems: "center", justifyContent: "center", gap: "0.375rem", flex: isFullWidth ? "1" : undefined, h: dims.h, px: dims.px, borderRadius: isUnderlineSlide ? "none" : "base", borderWidth: "1px", borderStyle: "solid", borderColor: hasIndicator
+                    }, role: "radio", "aria-checked": isSelected, disabled: option.isDisabled, tabIndex: index === tabIndex ? 0 : -1, onClick: () => onChange(option.value), position: "relative", zIndex: 1, display: "inline-flex", alignItems: "center", justifyContent: "center", gap: "0.375rem", flex: isFullWidth ? "1" : undefined, h: segmentH, px: control.paddingX, borderRadius: isUnderlineSlide ? "none" : "lg", 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
-                            : colors.text[600]
+                            : restInk
                         : isSelected
                             ? colors.accentText
-                            : colors.text[600], fontSize: dims.fontSize, fontWeight: isSelected ? 600 : 500, whiteSpace: "nowrap", opacity: option.isDisabled ? 0.5 : 1, cursor: option.isDisabled ? "not-allowed" : "pointer", transition: "color 0.2s ease", _hover: option.isDisabled || isSelected ? undefined : { color: colors.text[900] }, _focusVisible: {
-                        outline: "none",
-                        boxShadow: `0 0 0 2px ${colors.primary[300]}`,
-                    }, children: [option.icon, option.label] }, option.value));
+                            : 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: colors.text[900] }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, children: [option.icon, option.label, 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));
             })] }));
 }

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

@@ -1,21 +1,29 @@
-/** Only two sizes; controls track height and font size — defaults to "md". */
-export type SegmentedControlSize = "sm" | "md";
+import type { ControlSize } from "../../Theme/tokens/primitives/controlSizes";
+/** Whole-track height on the shared 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";
 /** One selectable segment; disabled options are skipped by keyboard nav (arrows/Home/End). */
 export type SegmentedControlOption<T extends string = string> = {
     value: T;
     label: string;
+    /** Rendered before the label. */
     icon?: JSX.Element;
     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;

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

@@ -0,0 +1,11 @@
+import { type DependencyList } from "react";
+export type SlidingPillRect = {
+    left: number;
+    width: 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,25 @@
+"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, width: nodeRect.width });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [enabled, selectedIndex, ...extraDeps]);
+    return { trackRef, itemRefs, pill };
+}

package/dist/Components/Select/Select.d.ts

@@ -1,2 +1,5 @@
-import { chakraSelectProps } from "./SelectProps";
-export default function Select({ placeholder, size, variant, icon, onChange, onBlur, onFocus, errorBorderColor, isDisabled, isReadOnly, isRequired, value, colorScheme, label, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, error, errorMessage, helperText, options, height, formControlStyle, isInformation, informationMessage, selectStyle, }: chakraSelectProps): import("react/jsx-runtime").JSX.Element;
+import React from "react";
+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

@@ -3,30 +3,71 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = Select;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const react_2 = require("@chakra-ui/react");
-const textInputIconSize_1 = require("../Input/textInputIconSize");
-const FormLabel_1 = require("../Common/FormLabel");
-const ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
-const HelperText_1 = __importDefault(require("../Common/HelperText"));
-function Select({ placeholder = "Select Option", size = "md", variant = "outline", icon, onChange, onBlur, onFocus, errorBorderColor, isDisabled, isReadOnly, isRequired = false, value = "", colorScheme, label, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, error, errorMessage, helperText, options = [], height, formControlStyle, isInformation = false, informationMessage, selectStyle, }) {
-    const sizeKey = typeof size === "string" ? size : "md";
-    const iconSizePx = (0, textInputIconSize_1.getTextInputIconSizePx)(sizeKey);
-    const generatedId = (0, react_1.useId)();
-    const selectId = id !== null && id !== void 0 ? id : (label ? generatedId : undefined);
-    const getOptionsList = (0, react_1.useCallback)(() => {
-        if (!options.length)
-            return (0, jsx_runtime_1.jsx)("option", { value: "", children: "No Options" });
-        return options.map((option) => ((0, jsx_runtime_1.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);
+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",
+    "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 ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { isInvalid: error, style: formControlStyle, size: size, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: selectId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsx)(react_2.Select, { id: selectId, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, 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 && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage }), helperText && !error && (0, jsx_runtime_1.jsx)(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

@@ -2,22 +2,19 @@
 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 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: ({ 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: {
                 color: (0, placeholderInk_1.placeholderInk)(theme.colors),
@@ -31,78 +28,12 @@ exports.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: {
-            field: {
-                h: "2.75rem",
-                fontSize: "0.9375rem",
-                px: "1rem",
-                py: "0.5rem",
-            },
-        },
-    },
+    sizes: Object.fromEntries(controlSizes_1.CONTROL_SIZE_NAMES.map((size) => [size, sizeField(size)])),
     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];
-            return {
-                field: {
-                    bg: theme.colors.background[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}`,
-                        },
-                    },
-                },
-            };
-        },
+        outline: ({ theme }) => ({ field: (0, fieldStyles_1.fieldControlStyles)(theme.colors) }),
     },
     defaultProps: {
         variant: "outline",
-        size: "md",
+        size: "sm",
     },
 };

package/dist/Components/Select/SelectNative.d.ts

@@ -0,0 +1,63 @@
+import React from "react";
+import { OptionProp } from "./SelectProps";
+/** Native `<select>` renderer — today's `Select`, unchanged, plus optgroup/disabled from `option.group`/`isDisabled`. */
+declare const SelectNative: React.ForwardRefExoticComponent<{
+    options: OptionProp[];
+    native?: boolean;
+    id?: string;
+    name?: string;
+    label?: string;
+    placeholder?: string;
+    size?: import("../../Theme/tokens/primitives/controlSizes").ControlSize;
+    width?: string | number;
+    height?: string | number;
+    error?: boolean;
+    errorMessage?: string;
+    helperText?: string;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    isRequired?: boolean;
+    isInformation?: boolean;
+    informationMessage?: string;
+    formControlStyle?: React.CSSProperties;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "data-testid"?: string;
+    variant?: import("@chakra-ui/react").SelectProps["variant"];
+    colorScheme?: import("@chakra-ui/react").SelectProps["colorScheme"];
+    icon?: import("@chakra-ui/react").SelectProps["icon"];
+    bg?: import("@chakra-ui/react").SelectProps["bg"];
+    borderColor?: import("@chakra-ui/react").SelectProps["borderColor"];
+    color?: import("@chakra-ui/react").SelectProps["color"];
+    errorBorderColor?: import("@chakra-ui/react").SelectProps["errorBorderColor"];
+    selectStyle?: React.CSSProperties;
+    onBlur?: (event?: React.FocusEvent<HTMLElement>) => void;
+    onFocus?: (event?: React.FocusEvent<HTMLElement>) => void;
+    isSearchable?: boolean;
+    searchValue?: string;
+    defaultSearchValue?: string;
+    onSearchChange?: (query: string) => void;
+    searchDebounceMs?: number;
+    isClearable?: boolean;
+    onClear?: () => void;
+    isLoading?: boolean;
+    loadingText?: string;
+    noOptionsMessage?: React.ReactNode;
+    onLoadMore?: () => void;
+    renderOption?: (option: OptionProp, state: {
+        isSelected: boolean;
+        isActive: boolean;
+    }) => React.ReactNode;
+    renderValue?: (selected: OptionProp[]) => React.ReactNode;
+    onCreate?: (label: string) => void;
+    createLabel?: (query: string) => React.ReactNode;
+    maxMenuHeight?: string;
+    defaultOpen?: boolean;
+    virtualizeAfter?: number;
+} & {
+    isMulti?: false;
+    value?: string | number;
+    defaultValue?: string | number;
+    onChange: (selectedOption: OptionProp | undefined) => void;
+} & React.RefAttributes<HTMLSelectElement>>;
+export default SelectNative;

package/dist/Components/Select/SelectNative.js

@@ -0,0 +1,49 @@
+"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 controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+const FormLabel_1 = require("../Common/FormLabel");
+const FieldMessage_1 = __importDefault(require("../Common/FieldMessage"));
+const useFieldIds_1 = require("../Common/useFieldIds");
+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 = (0, react_1.forwardRef)(function SelectNative({ placeholder = "Select Option", size = controlSizes_1.DEFAULT_CONTROL_SIZE, variant = "outline", icon, onChange, onBlur, onFocus, errorBorderColor, isDisabled, isReadOnly, isRequired = false, value = "", 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 = (0, useFieldIds_1.useFieldIds)(id, { error, errorMessage, helperText });
+    const getOptionsList = (0, react_1.useCallback)(() => {
+        if (!options.length) {
+            return (0, jsx_runtime_1.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) => ((0, jsx_runtime_1.jsx)("option", { value: option.id, disabled: option.isDisabled, children: option.label }, option.id)));
+            if (!segment.group)
+                return rows;
+            return ((0, jsx_runtime_1.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)
+            onChange(selectedOption);
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { isInvalid: error, style: formControlStyle, width: width, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsx)(react_2.Select, { ref: ref, ...ids.controlProps, name: name, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, placeholder: placeholder, size: size, variant: variant, icon: icon, iconSize: `${controlSizes_1.CONTROL_SIZES[size].iconSize}px`, isInvalid: error, isRequired: isRequired, 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() }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+});
+exports.default = SelectNative;

package/dist/Components/Select/SelectPopup.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { SelectFieldProps } from "./SelectProps";
+/** The unified `Select`'s popup mode (`native={false}`) — absorbs SelectV2's behaviour, plus clear/create/groups/virtualization. */
+declare const SelectPopup: React.ForwardRefExoticComponent<SelectFieldProps & React.RefAttributes<HTMLDivElement>>;
+export default SelectPopup;