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

package/dist/Components/DatePicker/TimePicker.js

@@ -4,8 +4,14 @@ 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 TimePicker = ({ date, onChange, dateFormat, disabled = false }) => {
+const fieldStyles_1 = require("../Common/fieldStyles");
+/** Hour/Minute/AM-PM select trio, no seconds control — used by datetime pickers and TimeOnlyPicker; the format only toggles 12h vs 24h. */
+const TimePicker = ({ date, onChange, dateFormat, isDisabled, disabled: legacyDisabled }) => {
+    var _a;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const disabled = (_a = isDisabled !== null && isDisabled !== void 0 ? isDisabled : legacyDisabled) !== null && _a !== void 0 ? _a : false;
+    const { h, minH, fontSize } = (0, fieldStyles_1.controlSizeStyles)("sm");
+    const selectSx = { ...(0, fieldStyles_1.fieldControlStyles)(theme.colors), h, minH, fontSize };
     const is12HourFormat = /(hh|h).*a/i.test(dateFormat);
     const deriveDisplayHour = (rawHour) => {
         if (!is12HourFormat)
@@ -54,18 +60,9 @@ const TimePicker = ({ date, onChange, dateFormat, disabled = false }) => {
         updateTime(hour, minute, newMeridiem);
     };
     const displayHour = is12HourFormat ? (hour % 12 === 0 ? 12 : hour % 12) : hour;
-    return ((0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1.5, w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.Select, { value: displayHour, onChange: handleHourChange, flex: "1", minW: 0, size: "sm", isDisabled: disabled, bg: theme.colors.gray[50], borderColor: theme.colors.boxborder[500], _focus: {
-                    borderColor: theme.colors.primary[500],
-                    boxShadow: `0 0 0 0.125rem ${theme.colors.boxShadow.primary}`,
-                }, _hover: { borderColor: theme.colors.primary[500] }, children: Array.from({ length: is12HourFormat ? 12 : 24 }, (_, i) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1.5, w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.Select, { "aria-label": "Hour", value: displayHour, onChange: handleHourChange, flex: "1", minW: 0, size: "sm", isDisabled: disabled, sx: selectSx, children: Array.from({ length: is12HourFormat ? 12 : 24 }, (_, i) => {
                     const value = is12HourFormat ? i + 1 : i;
                     return ((0, jsx_runtime_1.jsx)("option", { value: value, children: value.toString().padStart(2, "0") }, value));
-                }) }), (0, jsx_runtime_1.jsx)(react_2.Select, { value: minute, onChange: handleMinuteChange, flex: "1", minW: 0, size: "sm", isDisabled: disabled, bg: theme.colors.gray[50], borderColor: theme.colors.boxborder[500], _focus: {
-                    borderColor: theme.colors.primary[500],
-                    boxShadow: `0 0 0 0.125rem ${theme.colors.boxShadow.primary}`,
-                }, _hover: { borderColor: theme.colors.primary[500] }, children: Array.from({ length: 60 }, (_, i) => ((0, jsx_runtime_1.jsx)("option", { value: i, children: i.toString().padStart(2, "0") }, i))) }), is12HourFormat && ((0, jsx_runtime_1.jsxs)(react_2.Select, { value: ampm, onChange: handleAmpmChange, flex: "1", minW: 0, size: "sm", isDisabled: disabled, bg: theme.colors.gray[50], borderColor: theme.colors.boxborder[500], _focus: {
-                    borderColor: theme.colors.primary[500],
-                    boxShadow: `0 0 0 0.125rem ${theme.colors.boxShadow.primary}`,
-                }, _hover: { borderColor: theme.colors.primary[500] }, children: [(0, jsx_runtime_1.jsx)("option", { value: "AM", children: "AM" }), (0, jsx_runtime_1.jsx)("option", { value: "PM", children: "PM" })] }))] }));
+                }) }), (0, jsx_runtime_1.jsx)(react_2.Select, { "aria-label": "Minute", value: minute, onChange: handleMinuteChange, flex: "1", minW: 0, size: "sm", isDisabled: disabled, sx: selectSx, children: Array.from({ length: 60 }, (_, i) => ((0, jsx_runtime_1.jsx)("option", { value: i, children: i.toString().padStart(2, "0") }, i))) }), is12HourFormat && ((0, jsx_runtime_1.jsxs)(react_2.Select, { "aria-label": "AM or PM", value: ampm, onChange: handleAmpmChange, flex: "1", minW: 0, size: "sm", isDisabled: disabled, sx: selectSx, children: [(0, jsx_runtime_1.jsx)("option", { value: "AM", children: "AM" }), (0, jsx_runtime_1.jsx)("option", { value: "PM", children: "PM" })] }))] }));
 };
 exports.default = TimePicker;

package/dist/Components/DatePicker/TimePickerInput.d.ts

@@ -3,12 +3,17 @@ interface TimePickerInputProps {
     value: Date | null;
     onChange: (date: Date | null) => void;
     dateFormat: string;
-    disabled?: boolean;
+    isDisabled?: boolean;
     placeholder?: string;
+    id?: string;
+    name?: string;
+    isRequired?: boolean;
+    describedBy?: string;
     onFocus?: () => void;
     onBlur?: () => void;
     error?: boolean;
     size?: "xs" | "sm" | "md" | "lg";
 }
-export declare const TimePickerInput: React.FC<TimePickerInputProps>;
+/** Masked HH:mm digit input, no seconds; `ref` is the `<input>`. */
+export declare const TimePickerInput: React.ForwardRefExoticComponent<TimePickerInputProps & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/Components/DatePicker/TimePickerInput.js

@@ -7,6 +7,7 @@ const react_2 = require("@chakra-ui/react");
 const date_fns_1 = require("date-fns");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
 const textInputIconSize_1 = require("../Input/textInputIconSize");
 const sanitizeDigits = (input) => input.replace(/\D/g, "").slice(0, 4);
 const adjustDigits = (digits, is12Hour) => {
@@ -91,12 +92,14 @@ const caretFromDigitIndex = (digitIndex, digitsLen) => {
     return digitIndex + 1;
 };
 const formatToPlaceholder = (formatStr) => formatStr.replace(/h{1,2}/gi, "HH").replace(/m{1,2}/gi, "mm").replace(/a{1,2}/gi, "AM");
-const TimePickerInput = ({ value, onChange, dateFormat, disabled = false, placeholder, onFocus, onBlur, error, size = "md", }) => {
+/** Masked HH:mm digit input, no seconds; `ref` is the `<input>`. */
+exports.TimePickerInput = (0, react_1.forwardRef)(function TimePickerInput({ value, onChange, dateFormat, isDisabled: disabled = false, placeholder, id, name, isRequired, describedBy, onFocus, onBlur, error, size = controlSizes_1.DEFAULT_CONTROL_SIZE, }, ref) {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    const sizeKey = typeof size === "string" ? size : "md";
+    const sizeKey = typeof size === "string" ? size : controlSizes_1.DEFAULT_CONTROL_SIZE;
     const iconPx = (0, textInputIconSize_1.getTextInputIconSizePx)(sizeKey);
     const iconWrapperSx = (0, textInputIconSize_1.getTextInputIconWrapperSx)(sizeKey);
     const inputRef = (0, react_1.useRef)(null);
+    const mergedRef = (0, react_2.useMergeRefs)(inputRef, ref);
     const [digits, setDigits] = (0, react_1.useState)("");
     const digitsRef = (0, react_1.useRef)("");
     const [, setIsFocused] = (0, react_1.useState)(false);
@@ -403,13 +406,6 @@ const TimePickerInput = ({ value, onChange, dateFormat, disabled = false, placeh
             inputRef.current.value = is12Hour && formatted ? `${formatted} ${ampm}` : formatted;
         }
     }, [digits, ampm, is12Hour]);
-    return ((0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: sizeKey, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, defaultValue: "", onChange: handleInput, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, onClick: handleClick, onPaste: handlePaste, placeholder: placeholderText, isDisabled: disabled, autoComplete: "off", isInvalid: error, size: sizeKey, bg: theme.colors.gray[50], borderColor: error ? theme.colors.semanticText.error : theme.colors.boxborder[500], _focus: {
-                    borderColor: error ? theme.colors.semanticText.error : theme.colors.primary[500],
-                    boxShadow: error
-                        ? `0 0 0 0.125rem ${theme.colors.boxShadow.error}`
-                        : `0 0 0 0.125rem ${theme.colors.boxShadow.primary}`,
-                }, _hover: {
-                    borderColor: error ? theme.colors.semanticText.error : theme.colors.primary[500],
-                } }), (0, jsx_runtime_1.jsx)(react_2.InputRightElement, { pointerEvents: "none", height: "100%", display: "flex", alignItems: "center", children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", sx: iconWrapperSx, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ClockIcon, { size: iconPx, color: theme.colors.textMuted }) }) })] }));
-};
-exports.TimePickerInput = TimePickerInput;
+    return ((0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: sizeKey, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { ref: mergedRef, id: id, name: name, isRequired: isRequired, "aria-describedby": describedBy, defaultValue: "", onChange: handleInput, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, onClick: handleClick, onPaste: handlePaste, placeholder: placeholderText, isDisabled: disabled, autoComplete: "off", isInvalid: error, size: sizeKey }), (0, jsx_runtime_1.jsx)(react_2.InputRightElement, { pointerEvents: "none", height: "100%", display: "flex", alignItems: "center", children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", sx: iconWrapperSx, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ClockIcon, { size: iconPx, color: theme.colors.textMuted }) }) })] }));
+});
+exports.TimePickerInput.displayName = "TimePickerInput";

package/dist/Components/DatePicker/dayStates.d.ts

@@ -0,0 +1,33 @@
+import type { ReactNode } from "react";
+import type { PaletteProps } from "../../Theme/tokens/types";
+export declare const DAY_STATE_KEYS: readonly ["weekly-off", "holiday", "optional-holiday", "excluded", "disabled"];
+export type DayStateKey = (typeof DAY_STATE_KEYS)[number];
+/** Returns zero or more state keys for a day. Unrecognised keys are announced, never styled. */
+export type DayStates = (date: Date) => string[] | undefined;
+/** Custom content rendered inside a day cell, beneath the day number. */
+export type RenderDayContent = (date: Date, states: string[]) => ReactNode;
+/** What a resolved set of states paints. Every field is optional — an absent field changes nothing. */
+export type DayStateVisual = {
+    /** Tint painted across the whole cell. The range band always wins over it. */
+    cellBg?: string;
+    /** Ink for the day number. Never applied to a selected/endpoint day, whose fill owns its ink. */
+    color?: string;
+    /** `border` shorthand for the day circle, replacing the today/tentative ring. */
+    border?: string;
+    /** Fill of the small marker dot under the number. `renderDayContent` replaces it. */
+    markerColor?: string;
+    /** Strikes the day number through — the "counted, but not really" states. */
+    strikethrough?: boolean;
+    /** The one state that also blocks selection. Marking alone never does. */
+    blocksSelection?: boolean;
+};
+export declare const isDayStateKey: (key: string) => key is DayStateKey;
+/** Merges every recognised state in `DAY_STATE_KEYS` order, so precedence never depends on caller order. */
+export declare const resolveDayStateVisual: (states: string[], colors: PaletteProps) => DayStateVisual;
+/** Base class on every day button once `dayStates` is supplied. Consumers may style off it. */
+export declare const DAY_CLASS = "pxl-calendar-day";
+/** `["Onam", "holiday"]` → `"pxl-calendar-day pxl-calendar-day--onam pxl-calendar-day--holiday"`. */
+export declare const dayStateClassName: (states: string[]) => string;
+/** Human phrasing for the accessible name — every key, styled or not, in the caller's own order. */
+export declare const describeDayStates: (states: string[]) => string;
+export declare const dayAccessibleName: (formattedDate: string, states: string[]) => string;

package/dist/Components/DatePicker/dayStates.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dayAccessibleName = exports.describeDayStates = exports.dayStateClassName = exports.DAY_CLASS = exports.resolveDayStateVisual = exports.isDayStateKey = exports.DAY_STATE_KEYS = void 0;
+const planeStep_1 = require("../../Theme/tokens/builders/planeStep");
+// Ascending precedence — when a day carries several keys, a later one's visual overrides an earlier one's.
+exports.DAY_STATE_KEYS = [
+    "weekly-off",
+    "holiday",
+    "optional-holiday",
+    "excluded",
+    "disabled",
+];
+// NOTE: token roles per THEME-CONTRACT.md, not raw rungs — e.g. holiday uses semanticText, never semantic[500].
+const VISUALS = {
+    "weekly-off": (colors) => ({
+        cellBg: (0, planeStep_1.recessOn)(colors.backgroundColor.muted, colors.surfaceRaised),
+        color: colors.textMuted,
+    }),
+    holiday: (colors) => ({
+        color: colors.semanticText.info,
+        markerColor: colors.semanticText.info,
+    }),
+    "optional-holiday": (colors) => ({
+        color: colors.semanticText.warning,
+        markerColor: colors.semanticText.warning,
+        border: `1px dashed ${colors.semanticText.warning}`,
+    }),
+    excluded: (colors) => ({
+        color: colors.textMuted,
+        strikethrough: true,
+    }),
+    disabled: (colors) => ({
+        color: colors.disabled[500],
+        blocksSelection: true,
+    }),
+};
+const isDayStateKey = (key) => exports.DAY_STATE_KEYS.includes(key);
+exports.isDayStateKey = isDayStateKey;
+/** Merges every recognised state in `DAY_STATE_KEYS` order, so precedence never depends on caller order. */
+const resolveDayStateVisual = (states, colors) => {
+    const visual = {};
+    for (const key of exports.DAY_STATE_KEYS) {
+        if (states.includes(key))
+            Object.assign(visual, VISUALS[key](colors));
+    }
+    return visual;
+};
+exports.resolveDayStateVisual = resolveDayStateVisual;
+/** Base class on every day button once `dayStates` is supplied. Consumers may style off it. */
+exports.DAY_CLASS = "pxl-calendar-day";
+const slug = (key) => key
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+/** `["Onam", "holiday"]` → `"pxl-calendar-day pxl-calendar-day--onam pxl-calendar-day--holiday"`. */
+const dayStateClassName = (states) => [
+    exports.DAY_CLASS,
+    ...states
+        .map(slug)
+        .filter(Boolean)
+        .map((key) => `${exports.DAY_CLASS}--${key}`),
+].join(" ");
+exports.dayStateClassName = dayStateClassName;
+/** Human phrasing for the accessible name — every key, styled or not, in the caller's own order. */
+const describeDayStates = (states) => states
+    .map((state) => ((0, exports.isDayStateKey)(state) ? state.replace(/-/g, " ") : state.trim()))
+    .filter(Boolean)
+    .join(", ");
+exports.describeDayStates = describeDayStates;
+// The day's accessible name, date spelled out then states, so marking is heard, not only seen.
+const dayAccessibleName = (formattedDate, states) => {
+    const described = (0, exports.describeDayStates)(states);
+    return described ? `${formattedDate}, ${described}` : formattedDate;
+};
+exports.dayAccessibleName = dayAccessibleName;

package/dist/Components/DatePicker/pickerField.d.ts

@@ -0,0 +1,24 @@
+import type { PaletteProps } from "../../Theme/tokens/types";
+import type { PickerType } from "./DatePickerProps";
+type AliasedPickerProps = {
+    isDisabled?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    placeholderText?: string;
+};
+/** Canonical `isDisabled`/`placeholder` win over their deprecated aliases. */
+export declare const resolvePickerAliases: ({ isDisabled, disabled, placeholder, placeholderText }: AliasedPickerProps) => {
+    isDisabled: boolean;
+    placeholder: string | undefined;
+};
+/** A read-only field that opens a picker still gets the field's hover border. */
+export declare const readOnlyTriggerSx: (colors: PaletteProps) => {
+    _readOnly: {
+        _hover: {
+            borderColor: string;
+        };
+    };
+};
+export declare const formatHasTime: (format: string) => boolean;
+export declare const inferPickerTypeFromFormat: (format: string) => PickerType;
+export {};

package/dist/Components/DatePicker/pickerField.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.inferPickerTypeFromFormat = exports.formatHasTime = exports.readOnlyTriggerSx = exports.resolvePickerAliases = void 0;
+const fieldStyles_1 = require("../Common/fieldStyles");
+/** Canonical `isDisabled`/`placeholder` win over their deprecated aliases. */
+const resolvePickerAliases = ({ isDisabled, disabled, placeholder, placeholderText }) => {
+    var _a;
+    return ({
+        isDisabled: (_a = isDisabled !== null && isDisabled !== void 0 ? isDisabled : disabled) !== null && _a !== void 0 ? _a : false,
+        placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : placeholderText,
+    });
+};
+exports.resolvePickerAliases = resolvePickerAliases;
+/** A read-only field that opens a picker still gets the field's hover border. */
+const readOnlyTriggerSx = (colors) => ({
+    _readOnly: { _hover: { borderColor: (0, fieldStyles_1.fieldHoverBorder)(colors) } },
+});
+exports.readOnlyTriggerSx = readOnlyTriggerSx;
+// NOTE: case matters in date-fns — MM is month, mm is minutes; lowercasing made dd/MM/yyyy a datetime.
+const formatHasTime = (format) => /[Hh]|mm|ss/.test(format);
+exports.formatHasTime = formatHasTime;
+const inferPickerTypeFromFormat = (format) => {
+    const hasTime = (0, exports.formatHasTime)(format);
+    const hasDate = /d/i.test(format) && /M/.test(format) && /y/i.test(format);
+    if (hasTime && hasDate)
+        return "datetime";
+    if (hasTime)
+        return "time";
+    return "date";
+};
+exports.inferPickerTypeFromFormat = inferPickerTypeFromFormat;

package/dist/Components/DatePicker/valueFormat.d.ts

@@ -0,0 +1,4 @@
+import type { PickerType } from "./DatePickerProps";
+export declare const isoFormatFor: (pickerType: PickerType) => string;
+export declare const parseIsoValue: (value: string, pickerType: PickerType) => Date | null;
+export declare const formatIsoValue: (date: Date, pickerType: PickerType) => string;

package/dist/Components/DatePicker/valueFormat.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatIsoValue = exports.parseIsoValue = exports.isoFormatFor = void 0;
+const date_fns_1 = require("date-fns");
+const ISO_FORMATS = {
+    date: "yyyy-MM-dd",
+    time: "HH:mm",
+    datetime: "yyyy-MM-dd'T'HH:mm:ss",
+};
+const isoFormatFor = (pickerType) => ISO_FORMATS[pickerType];
+exports.isoFormatFor = isoFormatFor;
+// Local time, no offset — a malformed/empty string yields null rather than an Invalid Date.
+const parseIsoValue = (value, pickerType) => {
+    if (!value)
+        return null;
+    const parsed = (0, date_fns_1.parse)(value, (0, exports.isoFormatFor)(pickerType), new Date());
+    return (0, date_fns_1.isValid)(parsed) ? parsed : null;
+};
+exports.parseIsoValue = parseIsoValue;
+const formatIsoValue = (date, pickerType) => (0, date_fns_1.format)(date, (0, exports.isoFormatFor)(pickerType));
+exports.formatIsoValue = formatIsoValue;

package/dist/Components/DescriptionList/DescriptionList.d.ts

@@ -0,0 +1,4 @@
+import type { DescriptionListProps } from "./DescriptionListProps";
+/** Label/value read grid: semantic dl/dt/dd, "stacked" (label above) or "inline" (label left, value right). */
+declare const DescriptionList: ({ items, columns, layout, emptyValue, isLoading, loadingRows, ...rest }: DescriptionListProps) => import("react/jsx-runtime").JSX.Element;
+export default DescriptionList;

package/dist/Components/DescriptionList/DescriptionList.js

@@ -0,0 +1,32 @@
+"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 useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const Skeletons_1 = __importDefault(require("../Skeletons/Skeletons"));
+const CopyButton_1 = __importDefault(require("../CopyButton/CopyButton"));
+const DEFAULT_COLUMNS = { base: 1, md: 2 };
+const toTemplateColumns = (columns) => Object.fromEntries(Object.entries(columns).map(([bp, count]) => [bp, `repeat(${count}, minmax(0, 1fr))`]));
+const isMissing = (value) => value === null || value === undefined || value === "";
+/** Label/value read grid: semantic dl/dt/dd, "stacked" (label above) or "inline" (label left, value right). */
+const DescriptionList = ({ items, columns = DEFAULT_COLUMNS, layout = "stacked", emptyValue = "—", isLoading = false, loadingRows = 6, ...rest }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const templateColumns = toTemplateColumns(columns);
+    if (isLoading) {
+        return ((0, jsx_runtime_1.jsx)(react_1.Grid, { ...rest, role: "group", "aria-busy": "true", "aria-label": "Loading", templateColumns: templateColumns, columnGap: 5, rowGap: 4, children: Array.from({ length: loadingRows }, (_, index) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", gap: 1.5, children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 3, width: "40%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 4, width: "75%" })] }, index))) }));
+    }
+    return ((0, jsx_runtime_1.jsx)(react_1.Grid, { ...rest, as: "dl", m: 0, templateColumns: templateColumns, columnGap: 5, rowGap: 4, children: items.map((item, index) => {
+            const displayValue = isMissing(item.value) ? emptyValue : item.value;
+            const canCopy = item.copyable && typeof item.value === "string" && item.value !== "";
+            const copyTooltip = typeof item.label === "string" ? `Copy ${item.label}` : "Copy";
+            const Value = ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "dd", m: 0, align: "center", gap: 1, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", color: colors.text[800], textAlign: layout === "inline" ? "right" : "left", noOfLines: layout === "inline" ? 1 : undefined, overflowWrap: layout === "inline" ? undefined : "anywhere", children: displayValue }), canCopy && (0, jsx_runtime_1.jsx)(CopyButton_1.default, { value: item.value, size: "xs", tooltip: copyTooltip })] }));
+            const itemProps = layout === "inline"
+                ? { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 3 }
+                : {};
+            return ((0, jsx_runtime_1.jsxs)(react_1.Box, { minW: 0, gridColumn: item.span ? `span ${item.span}` : undefined, ...itemProps, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { as: "dt", fontSize: "xs", color: colors.textMuted, mb: layout === "inline" ? 0 : 0.5, children: item.label }), Value] }, index));
+        }) }));
+};
+exports.default = DescriptionList;

package/dist/Components/DescriptionList/DescriptionListProps.d.ts

@@ -0,0 +1,29 @@
+import type { HTMLAttributes, ReactNode } from "react";
+/** One label/value pair rendered as a dt/dd. */
+export interface DescriptionListItem {
+    /** dt content — 13px, textMuted. */
+    label: ReactNode;
+    /** dd content — 14px, text[800]; falls back to `emptyValue` when null, undefined or "". */
+    value: ReactNode;
+    /** How many grid columns this item spans; defaults to 1. */
+    span?: number;
+    /** Adds a copy-to-clipboard icon beside the value; only applies when `value` is a non-empty string. */
+    copyable?: boolean;
+}
+/** Column count per breakpoint, same keys as Chakra's responsive props. */
+export type DescriptionListColumns = Partial<Record<"base" | "sm" | "md" | "lg" | "xl", number>>;
+/** Label/value grid for read views; other HTML attributes land on the `<dl>` (or the loading grid). */
+export interface DescriptionListProps extends Omit<HTMLAttributes<HTMLElement>, "color" | "children" | "dangerouslySetInnerHTML"> {
+    /** The label/value pairs to render, in order. */
+    items: DescriptionListItem[];
+    /** Columns per breakpoint; defaults to `{ base: 1, md: 2 }`. */
+    columns?: DescriptionListColumns;
+    /** "stacked" (label above value) or "inline" (label left, value right); defaults to "stacked". */
+    layout?: "stacked" | "inline";
+    /** Shown in place of a missing value; defaults to "—". */
+    emptyValue?: ReactNode;
+    /** Renders `loadingRows` skeleton pairs instead of `items`. */
+    isLoading?: boolean;
+    /** Skeleton pair count while `isLoading`; defaults to 6. */
+    loadingRows?: number;
+}

package/dist/Components/DescriptionList/DescriptionListProps.js

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

package/dist/Components/DetailSections/DetailSections.d.ts

@@ -0,0 +1,4 @@
+import type { DetailSectionsProps } from "./DetailSectionsProps";
+/** Long-form product information: description, highlights, specifications, care, shipping and returns, and legal-metrology info. */
+declare const DetailSections: ({ description, highlights, specs, care, shipping, legal, sections, layout, defaultOpenIds, specCollapsedCount, labels, "data-testid": testId, }: DetailSectionsProps) => import("react/jsx-runtime").JSX.Element | null;
+export default DetailSections;

package/dist/Components/DetailSections/DetailSections.js

@@ -0,0 +1,113 @@
+"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 Accordion_1 = __importDefault(require("../Accordion/Accordion"));
+const Tabs_1 = __importDefault(require("../Tabs/Tabs"));
+const SpecTable_1 = __importDefault(require("../SpecTable/SpecTable"));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const tonalHover_1 = require("../CheckoutKit/tonalHover");
+const DEFAULT_LABELS = {
+    description: "Description",
+    highlights: "Highlights",
+    specifications: "Specifications",
+    care: "Care",
+    shipping: "Shipping & returns",
+    legal: "Legal & manufacturer info",
+    netQuantity: "Net quantity",
+    manufacturer: "Manufactured / packed by",
+    originCountry: "Country of origin",
+    mrp: "MRP",
+    customerCare: "Customer care",
+    mrpIncludesTaxes: "Maximum retail price, inclusive of all taxes",
+};
+const hasContent = (node) => node !== undefined && node !== null && node !== false && node !== "";
+const legalRows = (legal, text) => {
+    const fields = [legal.netQuantity, legal.manufacturer, legal.originCountry, legal.mrpNote, legal.customerCare];
+    if (!fields.some(Boolean))
+        return [];
+    const rows = [
+        [text.netQuantity, legal.netQuantity],
+        [text.manufacturer, legal.manufacturer],
+        [text.originCountry, legal.originCountry],
+        [text.mrp, legal.mrpNote || text.mrpIncludesTaxes],
+        [text.customerCare, legal.customerCare],
+    ];
+    return rows.flatMap(([label, value]) => (value ? [{ label, value }] : []));
+};
+const BulletList = ({ items, icon }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsx)(react_1.Flex, { as: "ul", direction: "column", gap: 2, m: 0, p: 0, listStyleType: "none", children: items.map((item, i) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "li", align: "flex-start", gap: 2, color: colors.text[800], children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", "aria-hidden": true, display: "inline-flex", flexShrink: 0, mt: "0.1875rem", color: colors.accentText, children: icon === "check" ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 16, strokeWidth: 2.25 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Dot, { size: 16, strokeWidth: 6 }) }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", minW: 0, overflowWrap: "anywhere", children: item })] }, `${item}-${i}`))) }));
+};
+/** Long-form product information: description, highlights, specifications, care, shipping and returns, and legal-metrology info. */
+const DetailSections = ({ description, highlights, specs, care, shipping, legal, sections, layout = "accordion", defaultOpenIds, specCollapsedCount, labels, "data-testid": testId, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const text = { ...DEFAULT_LABELS, ...labels };
+    const body = { fontSize: "sm", lineHeight: 1.7, color: colors.text[800] };
+    const careList = typeof care === "string" ? null : care;
+    const legalSpecs = legal ? legalRows(legal, text) : [];
+    const builtIn = [
+        description ? { id: "description", title: text.description, content: (0, jsx_runtime_1.jsx)(react_1.Text, { ...body, children: description }) } : null,
+        (highlights === null || highlights === void 0 ? void 0 : highlights.length) ? { id: "highlights", title: text.highlights, content: (0, jsx_runtime_1.jsx)(BulletList, { items: highlights, icon: "check" }) } : null,
+        (specs === null || specs === void 0 ? void 0 : specs.length)
+            ? { id: "specs", title: text.specifications, content: (0, jsx_runtime_1.jsx)(SpecTable_1.default, { items: specs, collapsedCount: specCollapsedCount }) }
+            : null,
+        (care === null || care === void 0 ? void 0 : care.length)
+            ? {
+                id: "care",
+                title: text.care,
+                content: careList ? (0, jsx_runtime_1.jsx)(BulletList, { items: careList, icon: "dot" }) : (0, jsx_runtime_1.jsx)(react_1.Text, { ...body, children: care }),
+            }
+            : null,
+        hasContent(shipping) ? { id: "shipping", title: text.shipping, content: (0, jsx_runtime_1.jsx)(react_1.Box, { ...body, children: shipping }) } : null,
+        legalSpecs.length ? { id: "legal", title: text.legal, content: (0, jsx_runtime_1.jsx)(SpecTable_1.default, { items: legalSpecs }) } : null,
+    ];
+    const BUILT_IN_IDS = ["description", "highlights", "specs", "care", "shipping", "legal"];
+    const overrides = new Map((sections !== null && sections !== void 0 ? sections : []).map((s) => [s.id, s]));
+    const merged = [
+        ...builtIn.flatMap((section, i) => {
+            const replacement = overrides.get(BUILT_IN_IDS[i]);
+            const picked = replacement !== null && replacement !== void 0 ? replacement : section;
+            return picked ? [picked] : [];
+        }),
+        ...(sections !== null && sections !== void 0 ? sections : []).filter((s) => !BUILT_IN_IDS.includes(s.id)),
+    ];
+    if (merged.length === 0)
+        return null;
+    if (layout === "tabs") {
+        return ((0, jsx_runtime_1.jsx)(react_1.Box, { "data-testid": testId, children: (0, jsx_runtime_1.jsx)(Tabs_1.default, { variant: "line", "aria-label": "Product details", items: merged.map((s) => ({
+                    id: s.id,
+                    label: s.title,
+                    content: ((0, jsx_runtime_1.jsx)(react_1.Box, { id: `detail-section-${s.id}`, "data-section-id": s.id, pt: 4, children: s.content })),
+                })) }) }));
+    }
+    const openIds = defaultOpenIds !== null && defaultOpenIds !== void 0 ? defaultOpenIds : [merged[0].id];
+    const defaultIndex = merged.flatMap((s, i) => (openIds.includes(s.id) ? [i] : []));
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { "data-testid": testId, children: (0, jsx_runtime_1.jsx)(Accordion_1.default, { allowMultiple: true, defaultIndex: defaultIndex, items: merged.map((s) => ({
+                header: ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", color: colors.header[900], children: s.title })),
+                content: s.content,
+                itemProps: {
+                    id: `detail-section-${s.id}`,
+                    "data-section-id": s.id,
+                    border: "none",
+                    borderRadius: "xl",
+                    bg: colors.background[100],
+                    mb: 2,
+                },
+                buttonProps: {
+                    px: 4,
+                    py: 3.5,
+                    fontSize: "md",
+                    bg: "transparent",
+                    transition: (0, motion_1.transitionFor)(["background-color"]),
+                    _hover: { bg: (0, tonalHover_1.tonalHover)(colors) },
+                },
+                panelProps: { px: 4, pt: 1, pb: 5, color: colors.text[800] },
+            })) }) }));
+};
+exports.default = DetailSections;

package/dist/Components/DetailSections/DetailSectionsProps.d.ts

@@ -0,0 +1,80 @@
+import type { ReactNode } from "react";
+import type { SpecItem } from "../SpecTable/SpecTableProps";
+/** One long-form section. */
+export interface DetailSection {
+    /** Unique key and DOM anchor (`detail-section-<id>`); reusing a built-in id replaces that built-in section. */
+    id: string;
+    /** Heading of the accordion row or tab label. */
+    title: string;
+    /** Body rendered inside the section panel. */
+    content: ReactNode;
+}
+/** Indian legal-metrology disclosures; every field is optional and an empty block is not rendered. */
+export interface LegalInfo {
+    /** e.g. "500 g" or "1 N". */
+    netQuantity?: string;
+    /** Name and address of the manufacturer, packer or importer. */
+    manufacturer?: string;
+    /** Row value for the "Country of origin" line. */
+    originCountry?: string;
+    /** Line printed beside "MRP"; defaults to "Maximum retail price, inclusive of all taxes". */
+    mrpNote?: string;
+    /** Customer care contact. */
+    customerCare?: string;
+}
+/** Every string the sections render; override all of them for another language. */
+export interface DetailSectionsLabels {
+    /** Title of the description section. */
+    description: string;
+    /** Title of the highlights section. */
+    highlights: string;
+    /** Title of the specifications section. */
+    specifications: string;
+    /** Title of the care section. */
+    care: string;
+    /** Title of the shipping and returns section. */
+    shipping: string;
+    /** Title of the legal and manufacturer section. */
+    legal: string;
+    /** Row label for `legal.netQuantity`. */
+    netQuantity: string;
+    /** Row label for `legal.manufacturer`. */
+    manufacturer: string;
+    /** Row label for `legal.originCountry`. */
+    originCountry: string;
+    /** Row label for the price note row (`legal.mrpNote` or `mrpIncludesTaxes`). */
+    mrp: string;
+    /** Row label for `legal.customerCare`. */
+    customerCare: string;
+    /** Default `mrpNote`. */
+    mrpIncludesTaxes: string;
+}
+/** `accordion` stacks collapsible rows (mobile); `tabs` lays the same sections out as a tab list (desktop). */
+export type DetailSectionsLayout = "accordion" | "tabs";
+/** Long-form product information: description, highlights, specifications, care, shipping and returns, and legal-metrology info. */
+export interface DetailSectionsProps {
+    /** Paragraph shown in the description section; the section is omitted when empty. */
+    description?: string;
+    /** Bullet list with check icons in the highlights section; omitted when empty. */
+    highlights?: string[];
+    /** Rows of the specifications table; the section is omitted when empty. */
+    specs?: SpecItem[];
+    /** Care instructions; a list renders as bullets. */
+    care?: string | string[];
+    /** Shipping and returns copy. */
+    shipping?: ReactNode;
+    /** Legal-metrology disclosures; the section is omitted when no field is filled. */
+    legal?: LegalInfo;
+    /** Extra sections appended after the built-in ones, or replacing a built-in one with the same id (`description`, `highlights`, `specs`, `care`, `shipping`, `legal`). */
+    sections?: DetailSection[];
+    /** `accordion` (default) or `tabs`. */
+    layout?: DetailSectionsLayout;
+    /** Section ids open on mount in `accordion` layout; defaults to the first section. */
+    defaultOpenIds?: string[];
+    /** Rows of the specifications table shown before "Show all". */
+    specCollapsedCount?: number;
+    /** Overrides any subset of the rendered strings; unset keys keep their English default. */
+    labels?: Partial<DetailSectionsLabels>;
+    /** Test id placed on the root wrapper. */
+    "data-testid"?: string;
+}

package/dist/Components/DetailSections/DetailSectionsProps.js

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

package/dist/Components/Divider/Divider.d.ts

@@ -1,2 +1,3 @@
-declare const VeritcalDivider: () => import("react/jsx-runtime").JSX.Element;
-export default VeritcalDivider;
+/** Always vertical, fixed size/color, zero props; not interchangeable with Primitives' Divider. */
+declare const VerticalDivider: () => import("react/jsx-runtime").JSX.Element;
+export default VerticalDivider;

package/dist/Components/Divider/Divider.js

@@ -3,8 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const VeritcalDivider = () => {
+/** Always vertical, fixed size/color, zero props; not interchangeable with Primitives' Divider. */
+const VerticalDivider = () => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     return ((0, jsx_runtime_1.jsx)(react_1.Divider, { orientation: "vertical", height: 5, borderWidth: 1.2, borderColor: colors.boxborder[500] }));
 };
-exports.default = VeritcalDivider;
+exports.default = VerticalDivider;

package/dist/Components/Drawer/Drawer.d.ts

@@ -1,12 +1,8 @@
 import React from "react";
-import { DrawerProps } from "./DrawerProps";
-export declare const DrawerHeader: React.FC<{
-    children: React.ReactNode;
-}>;
-export declare const DrawerBody: React.FC<{
-    children: React.ReactNode;
-}>;
-export declare const DrawerFooter: React.FC<{
-    children: React.ReactNode;
-}>;
-export default function Drawer({ isOpen, onClose, placement, size, id, variant, children, }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+import { DrawerProps, DrawerHeaderSlotProps, DrawerBodySlotProps, DrawerFooterSlotProps } from "./DrawerProps";
+export declare const DrawerHeader: React.FC<DrawerHeaderSlotProps>;
+export declare const DrawerBody: React.FC<DrawerBodySlotProps>;
+export declare const DrawerFooter: React.FC<DrawerFooterSlotProps>;
+export declare const UNNAMED_DRAWER_WARNING = "[pixelize-design-library] Drawer: no DrawerHeader, aria-label or aria-labelledby, so screen readers announce it as an unnamed dialog.";
+/** Slide-in dialog; content must sit in DrawerHeader, DrawerBody or DrawerFooter slots. */
+export default function Drawer({ isOpen, onClose, placement, size, id, variant, vaiant, initialFocusRef, finalFocusRef, closeOnOverlayClick, closeOnEsc, contentProps, hideCloseButton, portalChildren, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, }: DrawerProps): import("react/jsx-runtime").JSX.Element;