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

package/dist/Components/QuantityStepper/QuantityStepperProps.d.ts

@@ -0,0 +1,33 @@
+/** sm 32px, md 40px, lg 48px high, matching the button scale; the hit area is padded to 44px. */
+export type QuantityStepperSize = "sm" | "md" | "lg";
+/** soft is a tonal fill; outline is a 1px control border on any surface. */
+export type QuantityStepperVariant = "soft" | "outline";
+/** Compact − qty + control. Display only: the number is never typed, which keeps it fast on mobile. */
+export interface QuantityStepperProps {
+    /** Controlled quantity; pair with `onValueChange`. */
+    value?: number;
+    /** Starting quantity when uncontrolled; defaults to `min`. */
+    defaultValue?: number;
+    /** Fires with the new clamped quantity after a plus or minus press; not fired when a limit blocks the change. */
+    onValueChange?: (value: number) => void;
+    /** Lowest value; defaults to 1. At the floor the minus button is aria-disabled. */
+    min?: number;
+    /** Highest value; omit for no ceiling. At the ceiling the plus button is aria-disabled. */
+    max?: number;
+    /** Amount added or removed per press; defaults to 1. */
+    step?: number;
+    /** Control height; defaults to `md`. */
+    size?: QuantityStepperSize;
+    /** Surface style; defaults to `soft`. */
+    variant?: QuantityStepperVariant;
+    /** At `min` the minus becomes a trash button that calls onRemove, for cart lines. */
+    removable?: boolean;
+    /** Fires when the trash button is pressed at `min`; only reachable with `removable`. */
+    onRemove?: () => void;
+    /** Dims the stepper and disables both buttons. */
+    disabled?: boolean;
+    /** Product name, so the group reads "Quantity of Slim-Fit Denim Jacket". */
+    itemLabel?: string;
+    /** Set on the group; the buttons get `<id>-dec` and `<id>-inc`. */
+    "data-testid"?: string;
+}

package/dist/Components/QuantityStepper/QuantityStepperProps.js

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

package/dist/Components/QueryState/ErrorState.d.ts

@@ -0,0 +1,4 @@
+import type { ErrorStateProps } from "./QueryStateProps";
+/** Error panel built on EmptyState's error tone, announced to screen readers. */
+declare const ErrorState: ({ title, description, icon, onRetry, retryLabel, isRetrying, action, size, minH, }: ErrorStateProps) => import("react/jsx-runtime").JSX.Element;
+export default ErrorState;

package/dist/Components/QueryState/ErrorState.js

@@ -0,0 +1,16 @@
+"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("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
+const Button_1 = __importDefault(require("../Button/Button"));
+/** Error panel built on EmptyState's error tone, announced to screen readers. */
+const ErrorState = ({ title = "Couldn't load this", description = "Something went wrong on our side. Nothing was lost — try again in a moment.", icon = lucide_react_1.AlertTriangle, onRetry, retryLabel = "Retry", isRetrying = false, action, size = "md", minH, }) => {
+    const actions = onRetry || action ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [onRetry && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "sm", variant: "outline", colorScheme: "gray", label: retryLabel, leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.RotateCw, { size: 16 }), isLoading: isRetrying, loadingText: retryLabel, onClick: onRetry })), action] })) : undefined;
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { role: "alert", w: "100%", children: (0, jsx_runtime_1.jsx)(EmptyState_1.default, { colorScheme: "error", icon: icon, title: title, description: description, size: size, minH: minH, action: actions }) }));
+};
+exports.default = ErrorState;

package/dist/Components/QueryState/QueryStateBoundary.d.ts

@@ -0,0 +1,4 @@
+import type { QueryStateBoundaryProps } from "./QueryStateProps";
+/** Renders one of loading / forbidden / error / empty / children for a content region; agnostic of the fetching library. */
+declare const QueryStateBoundary: ({ isLoading, isForbidden, forbidden, hasData, error, isEmpty, isFiltered, filteredEmpty, loadingFallback, emptyFallback, empty, errorTitle, errorDescription, onRetry, isRetrying, minH, children, }: QueryStateBoundaryProps) => import("react/jsx-runtime").JSX.Element;
+export default QueryStateBoundary;

package/dist/Components/QueryState/QueryStateBoundary.js

@@ -0,0 +1,35 @@
+"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("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
+const FilteredEmptyState_1 = __importDefault(require("../EmptyState/FilteredEmptyState"));
+const Skeletons_1 = __importDefault(require("../Skeletons/Skeletons"));
+const ErrorState_1 = __importDefault(require("./ErrorState"));
+const DefaultLoading = () => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { role: "status", direction: "column", gap: 4, w: "100%", py: 2, children: [(0, jsx_runtime_1.jsx)(react_1.VisuallyHidden, { children: "Loading" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 4, width: "40%" }), Array.from({ length: 4 }, (_, i) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", gap: 2, children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 2.5, width: "100%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 2.5, width: "70%" })] }, i)))] }));
+const hasError = (error) => error !== undefined && error !== null && error !== false;
+/** Renders one of loading / forbidden / error / empty / children for a content region; agnostic of the fetching library. */
+const QueryStateBoundary = ({ isLoading = false, isForbidden = false, forbidden, hasData = false, error, isEmpty = false, isFiltered = false, filteredEmpty, loadingFallback, emptyFallback, empty, errorTitle, errorDescription, onRetry, isRetrying, minH = "24rem", children, }) => {
+    var _a, _b, _c;
+    if (isLoading && !hasData)
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: loadingFallback !== null && loadingFallback !== void 0 ? loadingFallback : (0, jsx_runtime_1.jsx)(DefaultLoading, {}) });
+    const forbiddenNow = typeof isForbidden === "function" ? hasError(error) && isForbidden(error) : isForbidden;
+    if (forbiddenNow) {
+        return ((0, jsx_runtime_1.jsx)(react_1.Box, { role: "status", w: "100%", children: (0, jsx_runtime_1.jsx)(EmptyState_1.default, { colorScheme: "gray", icon: (_a = forbidden === null || forbidden === void 0 ? void 0 : forbidden.icon) !== null && _a !== void 0 ? _a : lucide_react_1.Lock, title: (_b = forbidden === null || forbidden === void 0 ? void 0 : forbidden.title) !== null && _b !== void 0 ? _b : "You don't have access", description: (_c = forbidden === null || forbidden === void 0 ? void 0 : forbidden.description) !== null && _c !== void 0 ? _c : "Ask an administrator to give you access to view this.", action: forbidden === null || forbidden === void 0 ? void 0 : forbidden.action, minH: minH }) }));
+    }
+    if (hasError(error)) {
+        const description = typeof errorDescription === "function" ? errorDescription(error) : errorDescription;
+        return ((0, jsx_runtime_1.jsx)(ErrorState_1.default, { title: errorTitle, description: description, onRetry: onRetry, isRetrying: isRetrying, minH: minH }));
+    }
+    if (isEmpty && isFiltered) {
+        return ((0, jsx_runtime_1.jsx)(FilteredEmptyState_1.default, { minH: (filteredEmpty === null || filteredEmpty === void 0 ? void 0 : filteredEmpty.scale) === "card" ? undefined : minH, ...filteredEmpty }));
+    }
+    if (isEmpty)
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: emptyFallback !== null && emptyFallback !== void 0 ? emptyFallback : (0, jsx_runtime_1.jsx)(EmptyState_1.default, { minH: minH, ...empty }) });
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: typeof children === "function" ? children() : children });
+};
+exports.default = QueryStateBoundary;

package/dist/Components/QueryState/QueryStateProps.d.ts

@@ -0,0 +1,71 @@
+import type { ElementType, ReactNode } from "react";
+import type { EmptyStateProps, FilteredEmptyStateProps } from "../EmptyState/EmptyStateProps";
+/** Failed-load panel (`role="alert"`); `onRetry` adds an outline Retry button, `action` adds more. */
+export interface ErrorStateProps {
+    /** Defaults to "Couldn't load this". */
+    title?: string;
+    /** Defaults to a generic "something went wrong, try again" line. */
+    description?: string;
+    /** Icon component in the error-tinted badge; defaults to AlertTriangle. */
+    icon?: ElementType;
+    /** Renders an outline Retry button; omit it and no retry button appears. */
+    onRetry?: () => void;
+    /** Retry button text; defaults to "Retry". */
+    retryLabel?: string;
+    /** Puts the Retry button in its loading state; no effect without `onRetry`. */
+    isRetrying?: boolean;
+    /** Extra node(s) rendered after the Retry button. */
+    action?: ReactNode;
+    /** Passed to EmptyState; defaults to "md". */
+    size?: EmptyStateProps["size"];
+    /** Minimum height of the panel, passed to EmptyState. */
+    minH?: EmptyStateProps["minH"];
+}
+/** Copy for the no-access panel; each field falls back to a generic default. */
+export interface QueryStateForbiddenProps {
+    /** Defaults to "You don't have access". */
+    title?: string;
+    /** Defaults to a line asking the reader to request access. */
+    description?: string;
+    /** Defaults to a lock icon. */
+    icon?: ElementType;
+    /** Node(s) under the description, e.g. a "Request access" button. */
+    action?: ReactNode;
+}
+/** Picks loading → forbidden → error → empty → children; `children` may be a function so data is read only when ready. */
+export interface QueryStateBoundaryProps {
+    /** Checked first — wins over forbidden, error and empty — unless `hasData` is true. */
+    isLoading?: boolean;
+    /** Shown after loading, before error (e.g. HTTP 403); a function is only called when `error` is set. */
+    isForbidden?: boolean | ((error: unknown) => boolean);
+    /** Copy and action for the no-access panel (`role="status"`, never error-tinted). */
+    forbidden?: QueryStateForbiddenProps;
+    /** True keeps children on screen during a refetch instead of the loading state. Default false. */
+    hasData?: boolean;
+    /** Anything except undefined, null or false shows the error state — so 0 and "" count. */
+    error?: unknown;
+    /** Checked only after loading and error are ruled out. */
+    isEmpty?: boolean;
+    /** With `isEmpty`, shows FilteredEmptyState instead of `empty`/`emptyFallback`: the list is empty because of the filters, not first-run. */
+    isFiltered?: boolean;
+    /** Props for the FilteredEmptyState shown when `isEmpty` and `isFiltered`; `scale="card"` drops the boundary's `minH`. */
+    filteredEmpty?: FilteredEmptyStateProps;
+    /** Replaces the default skeleton rows. */
+    loadingFallback?: ReactNode;
+    /** Replaces the default EmptyState entirely; `empty` is then ignored. */
+    emptyFallback?: ReactNode;
+    /** Props for the default EmptyState; ignored when `emptyFallback` is set. */
+    empty?: EmptyStateProps;
+    /** Overrides ErrorState's default title. */
+    errorTitle?: string;
+    /** Static text, or a function of the error to derive it; ErrorState's default when omitted. */
+    errorDescription?: string | ((error: unknown) => string);
+    /** Adds a Retry button to the error state. */
+    onRetry?: () => void;
+    /** Shows the Retry button spinner; no effect without `onRetry`. */
+    isRetrying?: boolean;
+    /** Min height of the error and empty states, not loading; defaults to "24rem". */
+    minH?: EmptyStateProps["minH"];
+    /** Content for the ready state; pass a function to read data only when it exists. */
+    children: ReactNode | (() => ReactNode);
+}

package/dist/Components/QueryState/QueryStateProps.js

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

package/dist/Components/RadioButton/RadioButton.d.ts

@@ -1,5 +1,13 @@
-import React from "react";
-import { ChakraRadioProps, ChakraRadioGroupProps } from "./RadioButtonProps";
-declare const RadioButton: ({ label, colorScheme, isChecked, onChange, isDisabled, size, value, defaultChecked, labelFontSize, labelClampLines, showLabelTooltip, labelTooltip, }: ChakraRadioProps) => React.JSX.Element;
-declare const RadioButtonGroup: ({ options, onChange, value, defaultValue, isDisabled, size, colorScheme, spacing, direction, align, labelFontSize, labelClampLines, showLabelTooltip, }: ChakraRadioGroupProps) => React.JSX.Element;
+import { ChakraRadioGroupProps } from "./RadioButtonProps";
+/** One themed radio; `ref` is its native `<input type="radio">`. */
+declare const RadioButton: import("react").ForwardRefExoticComponent<Omit<import("@chakra-ui/react").RadioProps, "content" | "children"> & {
+    label: string;
+    description?: string;
+    content?: import("react").ReactNode;
+    labelFontSize?: string;
+    labelClampLines?: number;
+    showLabelTooltip?: boolean;
+    labelTooltip?: string;
+} & import("react").RefAttributes<HTMLInputElement>>;
+declare const RadioButtonGroup: ({ options, children, onChange, value, defaultValue, isDisabled, size, colorScheme, spacing, direction, align, labelFontSize, labelClampLines, showLabelTooltip, label, "aria-label": ariaLabel, name, id, error, errorMessage, helperText, isRequired, }: ChakraRadioGroupProps) => import("react/jsx-runtime").JSX.Element;
 export { RadioButton, RadioButtonGroup };

package/dist/Components/RadioButton/RadioButton.js

@@ -4,33 +4,49 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RadioButtonGroup = exports.RadioButton = void 0;
-var react_1 = __importDefault(require("react"));
-var react_2 = require("@chakra-ui/react");
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var FormLabel_1 = require("../Common/FormLabel");
-var RadioButton = function (_a) {
-    var label = _a.label, colorScheme = _a.colorScheme, isChecked = _a.isChecked, onChange = _a.onChange, isDisabled = _a.isDisabled, size = _a.size, value = _a.value, defaultChecked = _a.defaultChecked, _b = _a.labelFontSize, labelFontSize = _b === void 0 ? "0.75rem" : _b, _c = _a.labelClampLines, labelClampLines = _c === void 0 ? 2 : _c, _d = _a.showLabelTooltip, showLabelTooltip = _d === void 0 ? (label || "").length > 18 : _d, _e = _a.labelTooltip, labelTooltip = _e === void 0 ? label : _e;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    return (react_1.default.createElement(react_2.Radio, { colorScheme: colorScheme, isChecked: isChecked, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: theme.colors.gray[500], borderWidth: "1.6px", _hover: {
-            borderColor: theme.colors.primary[500],
-            backgroundColor: theme.colors.background[100],
+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 FormLabel_1 = require("../Common/FormLabel");
+const FieldMessage_1 = __importDefault(require("../Common/FieldMessage"));
+const useFieldIds_1 = require("../Common/useFieldIds");
+const fieldStyles_1 = require("../Common/fieldStyles");
+const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const paletteFromTheme_1 = require("../../Theme/chakra/paletteFromTheme");
+/** One themed radio; `ref` is its native `<input type="radio">`. */
+const RadioButton = (0, react_1.forwardRef)(function RadioButton({ label, description, content, colorScheme, isChecked, onChange, isDisabled, size, value, defaultChecked, labelFontSize = "0.875rem", labelClampLines = 2, showLabelTooltip = (label || "").length > 18, labelTooltip = label, ...rest }, ref) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const palette = colorScheme ? (0, paletteFromTheme_1.scaleFor)(colors, colorScheme, colors.primary) : colors.primary;
+    const filled = (0, filledSurface_1.resolveFilledSurface)(palette, colors);
+    return ((0, jsx_runtime_1.jsx)(react_2.Radio, { ...rest, ref: ref, colorScheme: colorScheme, isChecked: isChecked, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: (0, fieldStyles_1.fieldHoverBorder)(colors), borderWidth: "1px", _hover: {
+            borderColor: filled.fill,
+            backgroundColor: colors.background[100],
+        }, _focusVisible: (0, focusRing_styles_1.focusVisibleRing)(colors), _invalid: { borderColor: colors.semanticText.error }, _disabled: {
+            bg: colors.background[100],
+            borderColor: colors.boxborder[500],
+            opacity: 1,
+            cursor: "not-allowed",
         }, sx: {
             "&[data-checked]": {
-                backgroundColor: theme.colors.primary[500],
-                borderColor: theme.colors.primary[500]
+                backgroundColor: filled.fill,
+                borderColor: filled.fill,
             },
             "&[data-checked]:hover": {
-                backgroundColor: theme.colors.primary[500],
-                borderColor: theme.colors.primary[500],
-                boxShadow: "0 0 0 2px ".concat(theme.colors.primary[200]),
+                backgroundColor: filled.hoverFill,
+                borderColor: filled.hoverFill,
             },
-        } },
-        react_1.default.createElement(FormLabel_1.TextLabel, { label: label, fontSize: labelFontSize, showTooltip: showLabelTooltip, tooltipLabel: labelTooltip, clampLines: labelClampLines })));
-};
+            "&[data-checked][data-disabled]": {
+                backgroundColor: colors.background[100],
+                borderColor: colors.boxborder[500],
+            },
+        }, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, fontSize: labelFontSize, showTooltip: showLabelTooltip, tooltipLabel: labelTooltip, clampLines: labelClampLines, inline: true }), description && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "block", fontSize: "xs", color: colors.textMuted, mt: "0.125rem", children: description })), content] }) }));
+});
 exports.RadioButton = RadioButton;
-var RadioButtonGroup = function (_a) {
-    var options = _a.options, onChange = _a.onChange, value = _a.value, defaultValue = _a.defaultValue, isDisabled = _a.isDisabled, size = _a.size, colorScheme = _a.colorScheme, spacing = _a.spacing, _b = _a.direction, direction = _b === void 0 ? "row" : _b, _c = _a.align, align = _c === void 0 ? "" : _c, labelFontSize = _a.labelFontSize, labelClampLines = _a.labelClampLines, showLabelTooltip = _a.showLabelTooltip;
-    return (react_1.default.createElement(react_2.RadioGroup, { onChange: onChange, value: value, defaultValue: defaultValue },
-        react_1.default.createElement(react_2.Stack, { direction: direction, spacing: spacing || "2", align: align, gap: direction === "row" ? "1.25rem" : "0.1rem" }, options.map(function (option) { return (react_1.default.createElement(RadioButton, { key: option.id, label: option.label, value: option.id, isDisabled: isDisabled, size: size, colorScheme: colorScheme, labelFontSize: labelFontSize, labelClampLines: labelClampLines, showLabelTooltip: typeof showLabelTooltip === 'function' ? showLabelTooltip(option) : showLabelTooltip })); }))));
+RadioButton.displayName = "RadioButton";
+const RadioButtonGroup = ({ options, children, onChange, value, defaultValue, isDisabled, size, colorScheme, spacing, direction = "row", align = "", labelFontSize, labelClampLines, showLabelTooltip, label, "aria-label": ariaLabel, name, id, error, errorMessage, helperText, isRequired = false, }) => {
+    const ids = (0, useFieldIds_1.useFieldIds)(id, { error, errorMessage, helperText });
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [label && ((0, jsx_runtime_1.jsx)(react_2.Box, { id: ids.labelId, children: (0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, isRequired: isRequired }) })), (0, jsx_runtime_1.jsx)(react_2.RadioGroup, { onChange: onChange, value: value, defaultValue: defaultValue, name: name, id: ids.inputId, "aria-labelledby": label ? ids.labelId : undefined, "aria-label": label ? undefined : ariaLabel, "aria-describedby": ids.describedBy, "aria-invalid": error || undefined, "aria-required": isRequired || undefined, children: (0, jsx_runtime_1.jsx)(react_2.Stack, { direction: direction, spacing: spacing || "2", align: align, gap: direction === "row" ? "1.25rem" : "0.1rem", children: children !== null && children !== void 0 ? children : options === null || options === void 0 ? void 0 : options.map((option) => ((0, jsx_runtime_1.jsx)(RadioButton, { label: option.label, description: option.description, content: typeof option.content === "function" ? option.content(option) : option.content, value: option.id, isDisabled: isDisabled, isInvalid: error, size: size, colorScheme: colorScheme, labelFontSize: labelFontSize, labelClampLines: labelClampLines, showLabelTooltip: typeof showLabelTooltip === 'function' ? showLabelTooltip(option) : showLabelTooltip }, option.id))) }) }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 };
 exports.RadioButtonGroup = RadioButtonGroup;

package/dist/Components/RadioButton/RadioButtonProps.d.ts

@@ -1,21 +1,67 @@
+import { ReactNode } from 'react';
 import { RadioProps, RadioGroupProps } from '@chakra-ui/react';
-export type ChakraRadioProps = Pick<RadioProps, "size" | "colorScheme" | "isChecked" | "onChange" | "isDisabled" | "value" | "defaultChecked"> & {
+/** A single radio; every other Chakra `Radio` prop (`name`, `id`, `aria-*`, `data-*`, `isInvalid`) is spread onto it. Joins a RadioButtonGroup (or a hand-built `ChakraRadioGroup`) via Chakra's own context — this package no longer exports Chakra's `RadioGroup`. */
+export type ChakraRadioProps = Omit<RadioProps, "children" | "content"> & {
     label: string;
+    /** Muted second line under the label, for a description without a custom `content` node. */
+    description?: string;
+    /** Escape hatch for arbitrary content under the label/description — a card layout, a badge, any node. */
+    content?: ReactNode;
+    /** Defaults to "0.875rem" (14px). */
     labelFontSize?: string;
+    /** Clamps the label with an ellipsis; defaults to 2 lines. */
     labelClampLines?: number;
+    /** Defaults to true when `label` is longer than 18 characters. */
     showLabelTooltip?: boolean;
+    /** Tooltip text; defaults to `label`. */
     labelTooltip?: string;
 };
-export type ChakraRadioGroupProps = Pick<RadioGroupProps, "size" | "colorScheme" | "isDisabled" | "defaultValue" | "value"> & {
-    options: {
+/** One `options` entry; `content` may be a static node or a function of the option, for state that depends on the option itself. */
+export type RadioOption = {
+    label: string;
+    id: string;
+    /** Muted second line under the label. */
+    description?: string;
+    /** Rich per-option content — a card layout, an icon, a badge — rendered under label/description. */
+    content?: ReactNode | ((option: {
         label: string;
         id: string;
-    }[];
+        description?: string;
+    }) => ReactNode);
+};
+/** Unlike ChakraRadioProps, showLabelTooltip may be a per-option predicate `(item) => boolean`, evaluated once per rendered option. */
+export type ChakraRadioGroupProps = Pick<RadioGroupProps, "size" | "colorScheme" | "isDisabled" | "defaultValue" | "value"> & {
+    /** Each option's `id` is its radio value and React key. Optional when `children` is given instead. */
+    options?: RadioOption[];
+    /** Fully custom radios instead of `options`, for layouts an option list can't express; wins when both are given. */
+    children?: ReactNode;
+    /** Fires with the selected option's `id`. */
     onChange?: (value: string) => void;
+    /** Visible group label; names the `role="radiogroup"` via aria-labelledby. Without it, pass `aria-label`. */
+    label?: string;
+    /** Accessible name when there is no visible `label`. */
+    "aria-label"?: string;
+    /** Native `name` shared by every radio, so the group submits with a form. */
+    name?: string;
+    /** Base id for the group's label and message ids; generated when omitted. */
+    id?: string;
+    /** Marks every radio invalid and shows `errorMessage` in place of `helperText`. */
+    error?: boolean;
+    /** Shown under the group while `error` is true. */
+    errorMessage?: string;
+    /** Shown under the group when there is no error; linked via aria-describedby. */
+    helperText?: string;
+    /** Draws the label asterisk and sets `aria-required` on the group. */
+    isRequired?: boolean;
+    /** Stack spacing between radios; defaults to "2". */
     spacing?: string;
+    /** Defaults to "row". */
     direction?: "row" | "column";
+    /** Cross-axis alignment of the stack; "" (default) leaves it unset. */
     align?: "start" | "center" | "end" | "";
+    /** Forwarded to every radio; defaults to "0.875rem". */
     labelFontSize?: string;
+    /** Forwarded to every radio; defaults to 2 lines. */
     labelClampLines?: number;
     showLabelTooltip?: boolean | ((item: {
         label: string;

package/dist/Components/RangeSlider/RangeSlider.d.ts

@@ -0,0 +1,4 @@
+import type { RangeSliderRangeProps, RangeSliderSingleProps } from "./RangeSliderProps";
+declare function RangeSlider(props: RangeSliderSingleProps): JSX.Element;
+declare function RangeSlider(props: RangeSliderRangeProps): JSX.Element;
+export default RangeSlider;

package/dist/Components/RangeSlider/RangeSlider.js

@@ -0,0 +1,136 @@
+"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 focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
+const rangeSliderColors_1 = require("./rangeSliderColors");
+const rangeSliderSize_1 = require("./rangeSliderSize");
+const rangeSliderMath_1 = require("./rangeSliderMath");
+const BIG_STEP_MULTIPLIER = 10;
+const isRangeValue = (value) => Array.isArray(value);
+function RangeSlider(rawProps) {
+    var _a;
+    const { min, max, value, defaultValue, onChange, onChangeEnd, onChangeStart, step = 1, minDistance = 0, isDisabled = false, scale = "linear", formatValue = String, size = "sm", label = "Range", minThumbLabel = "Minimum", maxThumbLabel = "Maximum", "aria-label": ariaLabel, showValueLabels = true, showTooltip = true, marks, testId, } = rawProps;
+    (0, rangeSliderMath_1.assertRangeBounds)(min, max, scale);
+    const isRange = isRangeValue((_a = value !== null && value !== void 0 ? value : defaultValue) !== null && _a !== void 0 ? _a : [min, max]);
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const { track, fill, thumbBg, thumbBorder } = (0, rangeSliderColors_1.resolveRangeSliderColors)(colors);
+    const { trackHeight, thumbSize } = (0, rangeSliderSize_1.rangeSliderSize)(size);
+    const focusRing = (0, focusRing_styles_1.focusVisibleStyles)(colors);
+    const reactId = (0, react_1.useId)();
+    const trackRef = (0, react_1.useRef)(null);
+    const [internalValue, setInternalValue] = (0, react_1.useState)(defaultValue !== null && defaultValue !== void 0 ? defaultValue : (isRange ? [min, max] : min));
+    const [dragging, setDragging] = (0, react_1.useState)(null);
+    const [dragValue, setDragValue] = (0, react_1.useState)(null);
+    const isControlled = value !== undefined;
+    const committedValue = isControlled ? value : internalValue;
+    const liveValue = dragValue !== null && dragValue !== void 0 ? dragValue : committedValue;
+    const [currentMin, currentMax] = isRangeValue(liveValue) ? liveValue : [min, liveValue];
+    const currentSingle = isRangeValue(liveValue) ? liveValue[0] : liveValue;
+    const commit = (0, react_1.useCallback)((next, isFinal) => {
+        if (!isControlled)
+            setInternalValue(next);
+        onChange === null || onChange === void 0 ? void 0 : onChange(next);
+        if (isFinal)
+            onChangeEnd === null || onChangeEnd === void 0 ? void 0 : onChangeEnd(next);
+    }, [isControlled, onChange, onChangeEnd]);
+    const positionFromClientX = (0, react_1.useCallback)((clientX) => {
+        const trackEl = trackRef.current;
+        if (!trackEl)
+            return 0;
+        const { left, width } = trackEl.getBoundingClientRect();
+        const ratio = width === 0 ? 0 : (clientX - left) / width;
+        return Math.min(100, Math.max(0, ratio * 100));
+    }, []);
+    const startDrag = (thumb) => (e) => {
+        if (isDisabled)
+            return;
+        e.currentTarget.setPointerCapture(e.pointerId);
+        setDragging(thumb);
+        setDragValue(isRange ? [currentMin, currentMax] : currentSingle);
+        onChangeStart === null || onChangeStart === void 0 ? void 0 : onChangeStart();
+    };
+    const handleMove = (thumb) => (e) => {
+        if (isDisabled || dragging !== thumb)
+            return;
+        const desired = (0, rangeSliderMath_1.positionToValue)(positionFromClientX(e.clientX), min, max, scale);
+        const next = isRange
+            ? thumb === "min"
+                ? [(0, rangeSliderMath_1.resolveMinThumbValue)(desired, min, max, step, currentMax, minDistance), currentMax]
+                : [currentMin, (0, rangeSliderMath_1.resolveMaxThumbValue)(desired, min, max, step, currentMin, minDistance)]
+            : (0, rangeSliderMath_1.snapToStep)(desired, min, max, step);
+        setDragValue(next);
+        commit(next, false);
+    };
+    const endDrag = () => {
+        if (!dragging)
+            return;
+        setDragging(null);
+        const final = dragValue !== null && dragValue !== void 0 ? dragValue : committedValue;
+        setDragValue(null);
+        commit(final, true);
+    };
+    const nudgeRange = (thumb, e) => {
+        if (e.key === "Home" || e.key === "End") {
+            e.preventDefault();
+            const next = thumb === "min"
+                ? e.key === "Home"
+                    ? [min, currentMax]
+                    : [(0, rangeSliderMath_1.resolveMinThumbValue)(currentMax - minDistance, min, max, step, currentMax, minDistance), currentMax]
+                : e.key === "End"
+                    ? [currentMin, max]
+                    : [currentMin, (0, rangeSliderMath_1.resolveMaxThumbValue)(currentMin + minDistance, min, max, step, currentMin, minDistance)];
+            commit(next, true);
+            return;
+        }
+        const delta = (0, rangeSliderMath_1.nudgeDelta)(e.key, step, step * BIG_STEP_MULTIPLIER, e.shiftKey);
+        if (delta === null)
+            return;
+        e.preventDefault();
+        const next = thumb === "min"
+            ? [(0, rangeSliderMath_1.resolveMinThumbValue)(currentMin + delta, min, max, step, currentMax, minDistance), currentMax]
+            : [currentMin, (0, rangeSliderMath_1.resolveMaxThumbValue)(currentMax + delta, min, max, step, currentMin, minDistance)];
+        commit(next, true);
+    };
+    const nudgeSingle = (e) => {
+        if (e.key === "Home" || e.key === "End") {
+            e.preventDefault();
+            commit(e.key === "Home" ? min : max, true);
+            return;
+        }
+        const delta = (0, rangeSliderMath_1.nudgeDelta)(e.key, step, step * BIG_STEP_MULTIPLIER, e.shiftKey);
+        if (delta === null)
+            return;
+        e.preventDefault();
+        commit((0, rangeSliderMath_1.snapToStep)(currentSingle + delta, min, max, step), true);
+    };
+    const nudge = (thumb) => (e) => {
+        if (isDisabled)
+            return;
+        if (isRange)
+            nudgeRange(thumb, e);
+        else
+            nudgeSingle(e);
+    };
+    const minPos = (0, rangeSliderMath_1.valueToPosition)(isRange ? currentMin : min, min, max, scale);
+    const maxPos = (0, rangeSliderMath_1.valueToPosition)(isRange ? currentMax : currentSingle, min, max, scale);
+    const cursor = isDisabled ? "not-allowed" : "grab";
+    const opacity = isDisabled ? 0.5 : 1;
+    const resolvedMarks = Array.isArray(marks)
+        ? marks
+        : marks === true
+            ? (0, rangeSliderMath_1.stepMarks)(min, max, step).map((v) => ({ value: v }))
+            : [];
+    const singleThumbLabel = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : "Value";
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { "data-testid": testId, opacity: opacity, children: [label ? ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", fontWeight: 600, color: colors.textMuted, mb: 2, children: label })) : null, showValueLabels ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: isRange ? "space-between" : "flex-end", mb: 1, children: [isRange ? ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", fontWeight: 600, color: colors.accentText, children: formatValue(currentMin) })) : null, (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", fontWeight: 600, color: colors.accentText, children: formatValue(isRange ? currentMax : currentSingle) })] })) : null, (0, jsx_runtime_1.jsx)(react_2.Box, { position: "relative", pt: 5, pb: resolvedMarks.length ? 6 : 1, px: 1, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { ref: trackRef, position: "relative", h: trackHeight, borderRadius: "full", bg: track, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: 0, h: trackHeight, borderRadius: "full", bg: fill, style: { left: `${minPos}%`, width: `${Math.max(maxPos - minPos, 0)}%` } }), resolvedMarks.map((mark) => {
+                            const markPos = (0, rangeSliderMath_1.valueToPosition)(mark.value, min, max, scale);
+                            return ((0, jsx_runtime_1.jsx)(react_2.Box, { "data-mark-value": mark.value, position: "absolute", top: "50%", left: `${markPos}%`, transform: "translate(-50%, -50%)", boxSize: "4px", borderRadius: "full", bg: colors.gray[400], children: mark.label ? ((0, jsx_runtime_1.jsx)(react_2.Text, { position: "absolute", top: "12px", left: "50%", transform: "translateX(-50%)", fontSize: "xs-minus", color: colors.textMuted, whiteSpace: "nowrap", children: mark.label })) : null }, mark.value));
+                        }), isRange ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: formatValue(currentMin), placement: "top", isOpen: showTooltip && dragging === "min", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.Box, { role: "slider", tabIndex: isDisabled ? -1 : 0, "aria-disabled": isDisabled || undefined, "aria-orientation": "horizontal", "aria-label": minThumbLabel, "aria-valuemin": min, "aria-valuemax": currentMax, "aria-valuenow": currentMin, "aria-valuetext": formatValue(currentMin), position: "absolute", top: "50%", style: { left: `${minPos}%` }, transform: "translate(-50%, -50%)", boxSize: thumbSize, borderRadius: "full", borderWidth: "2px", borderColor: thumbBorder, bg: thumbBg, cursor: cursor, sx: { touchAction: "none", ...focusRing }, onPointerDown: startDrag("min"), onPointerMove: handleMove("min"), onPointerUp: endDrag, onPointerCancel: endDrag, onKeyDown: nudge("min"), "data-testid": testId ? `${testId}-thumb-min` : undefined, id: `${reactId}-min` }) })) : null, (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: formatValue(isRange ? currentMax : currentSingle), placement: "top", isOpen: showTooltip && dragging === (isRange ? "max" : "min"), hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.Box, { role: "slider", tabIndex: isDisabled ? -1 : 0, "aria-disabled": isDisabled || undefined, "aria-orientation": "horizontal", "aria-label": isRange ? maxThumbLabel : singleThumbLabel, "aria-valuemin": isRange ? currentMin : min, "aria-valuemax": max, "aria-valuenow": isRange ? currentMax : currentSingle, "aria-valuetext": formatValue(isRange ? currentMax : currentSingle), position: "absolute", top: "50%", style: { left: `${maxPos}%` }, transform: "translate(-50%, -50%)", boxSize: thumbSize, borderRadius: "full", borderWidth: "2px", borderColor: thumbBorder, bg: thumbBg, cursor: cursor, sx: { touchAction: "none", ...focusRing }, onPointerDown: startDrag(isRange ? "max" : "min"), onPointerMove: handleMove(isRange ? "max" : "min"), onPointerUp: endDrag, onPointerCancel: endDrag, onKeyDown: nudge(isRange ? "max" : "min"), "data-testid": testId ? (isRange ? `${testId}-thumb-max` : `${testId}-thumb`) : undefined, id: `${reactId}-${isRange ? "max" : "single"}` }) })] }) })] }));
+}
+exports.default = RangeSlider;

package/dist/Components/RangeSlider/RangeSliderProps.d.ts

@@ -0,0 +1,74 @@
+import type { ReactNode } from "react";
+import type { ControlSize } from "../../Theme/tokens/primitives/controlSizes";
+import type { SliderScale } from "./rangeSliderMath";
+export type { SliderScale };
+/** A single tick drawn along the track. */
+export type RangeSliderMark = {
+    /** Value this tick sits at; positions along min–max the same way a thumb value does. */
+    value: number;
+    /** Content shown under the tick. Omit for an unlabelled tick mark. */
+    label?: ReactNode;
+};
+/** Props shared by both the single-thumb and dual-thumb shapes. */
+interface RangeSliderSharedProps {
+    /** Lower bound of the range. Required — there is no implicit floor. */
+    min: number;
+    /** Upper bound of the range. Required and must be greater than min. */
+    max: number;
+    /** Value increment for drag, keyboard and snapping. Defaults to 1. */
+    step?: number;
+    /** Disables pointer and keyboard interaction. */
+    isDisabled?: boolean;
+    /** "linear" spaces values evenly; "log" spaces by ratio for a range spanning orders of magnitude. Requires min > 0. Defaults to "linear". */
+    scale?: SliderScale;
+    /** Formats a raw value for display — value labels, tooltip and aria-valuetext. Defaults to String. */
+    formatValue?: (value: number) => string;
+    /** Track thickness and thumb size, keyed by ControlSize name — its own values, not the field or button scale. Defaults to "sm". */
+    size?: ControlSize;
+    /** Heading shown above the track. Pass "" to render none. Defaults to "Range". */
+    label?: string;
+    /** Shows the formatted current value(s) above the track. Defaults to true. */
+    showValueLabels?: boolean;
+    /** Shows a floating tooltip with the live value while a thumb is being dragged. Defaults to true. */
+    showTooltip?: boolean;
+    /** Tick marks along the track: an explicit list, or true to draw one at every step. */
+    marks?: RangeSliderMark[] | boolean;
+    /** Prefix for data-testid on the track and thumb(s). */
+    testId?: string;
+    /** Fires once when a drag begins (not on a keyboard change) — pairs with onChangeEnd to tell drag and keyboard commits apart. */
+    onChangeStart?: () => void;
+}
+/** Single-thumb shape: a plain number value, the drop-in replacement for a Chakra Slider. */
+export interface RangeSliderSingleProps extends RangeSliderSharedProps {
+    /** Controlled value. Omit and use defaultValue for uncontrolled use. */
+    value?: number;
+    /** Initial value when uncontrolled. Defaults to min. */
+    defaultValue?: number;
+    /** Fires on every change — during a drag and on each keypress. */
+    onChange?: (value: number) => void;
+    /** Fires once when an interaction commits (pointer release, or immediately on a keypress). */
+    onChangeEnd?: (value: number) => void;
+    /** Accessible name for the thumb. Defaults to label, or "Value". */
+    "aria-label"?: string;
+    /** Minimum allowed gap between thumbs — meaningless with one thumb, so it isn't accepted here. */
+    minDistance?: never;
+}
+/** Dual-thumb shape: a [min, max] tuple value — the generic range slider this component started as. */
+export interface RangeSliderRangeProps extends RangeSliderSharedProps {
+    /** Controlled [min, max] value. Omit and use defaultValue for uncontrolled use. */
+    value?: [number, number];
+    /** Initial [min, max] value when uncontrolled. Defaults to [min, max]. */
+    defaultValue?: [number, number];
+    /** Fires on every change — during a drag and on each keypress. */
+    onChange?: (value: [number, number]) => void;
+    /** Fires once when an interaction commits (pointer release, or immediately on a keypress). */
+    onChangeEnd?: (value: [number, number]) => void;
+    /** Minimum allowed gap between the two thumbs, in value units. Defaults to 0. */
+    minDistance?: number;
+    /** Accessible name for the lower thumb. Defaults to "Minimum". */
+    minThumbLabel?: string;
+    /** Accessible name for the upper thumb. Defaults to "Maximum". */
+    maxThumbLabel?: string;
+}
+/** Discriminated by the shape of value/defaultValue — pass a number for one thumb, a [number, number] tuple for two. */
+export type RangeSliderProps = RangeSliderSingleProps | RangeSliderRangeProps;

package/dist/Components/RangeSlider/RangeSliderProps.js

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

package/dist/Components/RangeSlider/rangeSliderColors.d.ts

@@ -0,0 +1,9 @@
+import type { PaletteProps } from "../../Theme/tokens/types";
+export type RangeSliderColors = {
+    track: string;
+    fill: string;
+    thumbBg: string;
+    thumbBorder: string;
+};
+/** Fill and thumb border both lift to 3:1 against the neutral track — same recipe as ProgressBar's fill. */
+export declare const resolveRangeSliderColors: (colors: PaletteProps) => RangeSliderColors;

package/dist/Components/RangeSlider/rangeSliderColors.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveRangeSliderColors = void 0;
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+/** Fill and thumb border both lift to 3:1 against the neutral track — same recipe as ProgressBar's fill. */
+const resolveRangeSliderColors = (colors) => {
+    const track = colors.gray[100];
+    const fill = (0, outlineRung_1.liftToContrast)(colors.primary[500], track);
+    return { track, fill, thumbBg: colors.background[50], thumbBorder: fill };
+};
+exports.resolveRangeSliderColors = resolveRangeSliderColors;