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

package/dist/esm/Components/FilterSidebar/RangeSection.js

@@ -0,0 +1,78 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { memo, useMemo, useState } from "react";
+import { Box, Flex, Text, VStack, SimpleGrid, Popover, PopoverTrigger, PopoverContent, PopoverBody, Portal } from "@chakra-ui/react";
+import { Check } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { bandOn, cardRule } from "../../Theme/tokens/builders/planeStep.js";
+import { getFilterHoverBg } from "./filterHoverStyle.js";
+import { focusVisibleRing, insetFocusRingShadow } from "../../Theme/chakra/focusRing.styles.js";
+const SLIDER_CSS = `
+  .custom-range-slider::-webkit-slider-thumb {
+    pointer-events: auto;
+    width: 24px;
+    height: 24px;
+    -webkit-appearance: none;
+    cursor: pointer;
+  }
+  .custom-range-slider::-moz-range-thumb {
+    pointer-events: auto;
+    width: 24px;
+    height: 24px;
+    border: none;
+    cursor: pointer;
+  }
+`;
+const NATIVE_INPUT_STYLE = {
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    opacity: 0,
+    appearance: "none",
+    pointerEvents: "none",
+    zIndex: 3,
+    margin: 0,
+};
+const TICKS = [0, 25, 50, 75, 100];
+const BoundPicker = ({ bound, sectionId, label, values, current, unit, isOpen, onOpen, onClose, onPick }) => {
+    const theme = useCustomTheme();
+    const hoverBg = useMemo(() => getFilterHoverBg(theme.colors), [theme.colors]);
+    const pickFill = useMemo(() => bandOn(theme.colors.primary[50], theme.colors.surfaceRaised), [theme.colors]);
+    const focusRing = useMemo(() => focusVisibleRing(theme.colors), [theme.colors]);
+    const insetFocusRing = useMemo(() => ({ outline: "2px solid transparent", boxShadow: insetFocusRingShadow(theme.colors) }), [theme.colors]);
+    const unitSuffix = unit ? ` ${unit}` : "";
+    const boundName = bound === "min" ? "minimum" : "maximum";
+    // NOTE: raw scale ink can miss 3:1 on its own fill; onFilled matches it.
+    const checkInk = onFilled(theme.colors.primary[100], theme.colors.white, theme.colors.black);
+    return (_jsxs(Popover, { isOpen: isOpen, onClose: onClose, placement: "bottom-start", closeOnBlur: true, children: [_jsx(PopoverTrigger, { children: _jsx(Flex, { as: "button", type: "button", "aria-label": `${label} ${boundName}: ${current}${unitSuffix}`, borderWidth: "0", borderRadius: "md", alignItems: "center", px: 3, py: 2, bg: theme.colors.background[50], borderColor: theme.colors.boxborder[500], cursor: "pointer", _focusVisible: focusRing, "data-testid": `range-trigger-${bound}-${sectionId}`, onClick: onOpen, gap: 2, overflow: "hidden", children: _jsx(Box, { ml: "auto", children: _jsxs(Text, { fontSize: "xs", color: theme.colors.text[500], whiteSpace: "nowrap", children: [current, unitSuffix] }) }) }) }), _jsx(Portal, { children: _jsx(PopoverContent, { width: "6rem", p: 0, zIndex: 1600, bg: theme.colors.surfaceRaised, "aria-label": `${label} ${boundName}`, children: _jsx(PopoverBody, { p: 0, children: _jsx(VStack, { align: "stretch", spacing: 0, maxH: "12rem", overflowY: "auto", children: values.map((v) => (_jsxs(Flex, { as: "button", type: "button", "aria-pressed": current === v, px: 2, py: 1, align: "center", justify: "space-between", cursor: "pointer", bg: current === v ? pickFill : theme.colors.surfaceRaised, borderLeftWidth: current === v ? 3 : 0, borderLeftStyle: "solid", borderLeftColor: current === v ? theme.colors.primary[400] : "transparent", _hover: { bg: hoverBg }, _focusVisible: insetFocusRing, "data-testid": `range-option-${bound}-${sectionId}-${v}`, onClick: () => onPick(v), children: [_jsxs(Text, { fontSize: "sm", color: theme.colors.text[500], children: [v, unitSuffix] }), current === v ? (_jsx(Box, { bg: theme.colors.primary[100], borderRadius: "full", p: 1, display: "flex", alignItems: "center", children: _jsx(Check, { size: 9, color: checkInk }) })) : null] }, `${bound}-${v}`))) }) }) }) })] }));
+};
+const RangeSection = memo(({ sectionId, label, range, value, onChange }) => {
+    var _a, _b;
+    const theme = useCustomTheme();
+    const [openBound, setOpenBound] = useState(null);
+    const step = range.step || 1;
+    const rangeArr = Array.isArray(value) ? value : [];
+    const currentMin = (_a = rangeArr[0]) !== null && _a !== void 0 ? _a : range.min;
+    const currentMax = (_b = rangeArr[1]) !== null && _b !== void 0 ? _b : range.max;
+    const values = useMemo(() => range.values || Array.from({ length: Math.floor((range.max - range.min) / step) + 1 }, (_, i) => range.min + i * step), [range.values, range.min, range.max, step]);
+    const unitSuffix = range.unit ? ` ${range.unit}` : "";
+    const minPercent = ((currentMin - range.min) / (range.max - range.min)) * 100;
+    const maxPercent = ((currentMax - range.min) / (range.max - range.min)) * 100;
+    const primaryColor = theme.colors.primary[300];
+    const secondaryColor = theme.colors.primary[600];
+    const trackColor = cardRule(theme.colors);
+    const chipBorder = `1px solid ${trackColor}`;
+    const thumbSize = { base: "16px", md: "20px" };
+    const chipTop = { base: "-18px", md: "-22px" };
+    const pick = (bound, v) => {
+        const other = bound === "min" ? currentMax : currentMin;
+        onChange(sectionId, [Math.min(v, other), Math.max(v, other)]);
+        setOpenBound(null);
+    };
+    return (_jsxs(Box, { w: "full", px: 3, children: [_jsx("style", { children: SLIDER_CSS }), _jsxs(Box, { w: "full", position: "relative", h: { base: "24px", md: "30px" }, display: "flex", alignItems: "center", children: [_jsx(Box, { position: "absolute", left: "0", right: "0", height: "6px", bg: trackColor, borderRadius: "full" }), _jsx(Box, { position: "absolute", height: "6px", style: {
+                            left: `${minPercent}%`,
+                            width: `${maxPercent - minPercent}%`,
+                            background: `linear-gradient(to right, ${primaryColor}, ${secondaryColor})`,
+                        }, borderRadius: "full", boxShadow: `0 0 8px ${theme.colors.primary.opacity[32]}` }), [[minPercent, primaryColor], [maxPercent, secondaryColor]].map(([percent, color], i) => (_jsx(Box, { position: "absolute", style: { left: `${percent}%` }, transform: "translate(-50%, 0)", w: thumbSize, h: thumbSize, borderRadius: "full", bg: theme.colors.background[50], border: "3px solid", borderColor: color, boxShadow: theme.shadows.md, zIndex: 2 }, i))), [[minPercent, currentMin], [maxPercent, currentMax]].map(([percent, current], i) => (_jsxs(Box, { position: "absolute", style: { left: `${percent}%` }, top: chipTop, transform: "translate(-50%, -100%)", px: 2, py: 1, bg: theme.colors.background[50], border: chipBorder, borderRadius: "lg", fontSize: "xs-minus", color: theme.colors.text[500], boxShadow: "sm", zIndex: 3, children: [current, unitSuffix] }, i))), TICKS.map((p) => (_jsx(Box, { position: "absolute", left: `${p}%`, bottom: "-8px", transform: "translateX(-50%)", w: "1px", h: "8px", bg: theme.colors.boxborder[500] }, `tick-${p}`))), _jsx("input", { type: "range", "aria-label": `${label}: minimum`, min: range.min, max: range.max, step: step, value: currentMin, className: "custom-range-slider", onChange: (e) => onChange(sectionId, [Math.min(Number(e.target.value), currentMax - step), currentMax]), style: NATIVE_INPUT_STYLE }), _jsx("input", { type: "range", "aria-label": `${label}: maximum`, min: range.min, max: range.max, step: step, value: currentMax, className: "custom-range-slider", onChange: (e) => onChange(sectionId, [currentMin, Math.max(Number(e.target.value), currentMin + step)]), style: NATIVE_INPUT_STYLE })] }), _jsx(SimpleGrid, { columns: 2, spacing: 2, pt: 2, w: "full", children: ["min", "max"].map((bound) => (_jsx(BoundPicker, { bound: bound, sectionId: sectionId, label: label, values: values, current: bound === "min" ? currentMin : currentMax, unit: range.unit, isOpen: openBound === bound, onOpen: () => setOpenBound(bound), onClose: () => setOpenBound(null), onPick: (v) => pick(bound, v) }, bound))) })] }));
+});
+export default RangeSection;

package/dist/esm/Components/FilterSidebar/SectionHeader.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import { Badge, Flex, Text } from "@chakra-ui/react";
+import { ChevronDownIcon } from "lucide-react";
+import ToolTip from "../ToolTip/ToolTip.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { focusVisibleRing } from "../../Theme/chakra/focusRing.styles.js";
+import { onActivationKey } from "../Common/activationKey.js";
+const CLEAR_BADGE = {
+    colorScheme: "red",
+    variant: "solid",
+    fontSize: "xs",
+    borderRadius: "full",
+    px: 2,
+};
+export const SectionHeader = memo(({ label, hasValue }) => {
+    const theme = useCustomTheme();
+    return (_jsxs(Flex, { justify: "space-between", align: "center", w: "full", py: 1, children: [_jsx(ToolTip, { label: label, hasArrow: true, placement: "top", fontSize: "xs", children: _jsx(Text, { fontWeight: 700, fontSize: "md", color: theme.colors.text[500], textAlign: "left", isTruncated: true, flex: "1", minW: 0, children: label }) }), hasValue ? (_jsx(Badge, { ...CLEAR_BADGE, "aria-hidden": true, visibility: "hidden", _after: { content: '"Clear"' } })) : (_jsx(ChevronDownIcon, { size: 10 }))] }));
+});
+export const SectionClear = memo(({ sectionId, label, onClear }) => {
+    const theme = useCustomTheme();
+    return (_jsx(Badge, { ...CLEAR_BADGE, cursor: "pointer", role: "button", tabIndex: 0, "aria-label": `Clear ${label}`, _focusVisible: focusVisibleRing(theme.colors), onClick: (e) => onClear(sectionId, e.currentTarget), onKeyDown: onActivationKey((e) => onClear(sectionId, e.currentTarget)), children: "Clear" }));
+});

package/dist/esm/Components/FilterSidebar/filterHoverStyle.js

@@ -0,0 +1,3 @@
+import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
+/** Shared with every selectable list row — never seed from `primary[500]` or `primary.opacity[8]`. */
+export const getFilterHoverBg = (colors) => listRowBackgrounds(colors).active;

package/dist/esm/Components/FilterSidebar/useStableCallback.js

@@ -0,0 +1,8 @@
+import { useCallback, useLayoutEffect, useRef } from "react";
+export const useStableCallback = (fn) => {
+    const latest = useRef(fn);
+    useLayoutEffect(() => {
+        latest.current = fn;
+    });
+    return useCallback((...args) => latest.current(...args), []);
+};

package/dist/esm/Components/Form/FormWrapper.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Icon } from "@chakra-ui/react";
+import { isValidElement } from "react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+const isElement = (icon) => isValidElement(icon);
+/** Renders an icon+label header above a bordered card — not an HTML form; no submit/validation, just a section wrapper. id, data-* and aria-* land on the outer wrapper. */
+const FormWrapper = ({ icon, text, children, ...rest }) => {
+    const { colors } = useCustomTheme();
+    return (_jsxs(Box, { ...rest, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, mb: 2, children: [isElement(icon) ? (_jsx(Box, { display: "inline-flex", boxSize: "1rem", color: colors.header[500], sx: { "& > svg": { width: "100%", height: "100%" } }, children: icon })) : (icon && _jsx(Icon, { as: icon, boxSize: "1rem", color: colors.header[500] })), text && (_jsx(Box, { fontWeight: 600, fontSize: "xs", lineHeight: "1", textTransform: "uppercase", color: colors.header[500], children: text }))] }), _jsx(Box, { borderRadius: "xl", bg: colors.background[50], borderWidth: "1px", borderStyle: "solid", borderColor: colors.boxborder[200], p: "1.5rem", children: children })] }));
+};
+export default FormWrapper;

package/dist/esm/Components/FormDrawer/FormDrawer.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useEffect, useId, useRef, useState } from "react";
+import { Alert, AlertDescription, AlertIcon, AlertTitle, Box, Divider, Flex, Heading, ListItem, Text, UnorderedList, } from "@chakra-ui/react";
+import Drawer, { DrawerBody, DrawerFooter, DrawerHeader } from "../Drawer/Drawer.js";
+import AlertDialog from "../AlertDialog/AlertDialog.js";
+import Button from "../Button/Button.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+const DEFAULT_LABELS = {
+    fixErrors: "Please fix the following before saving",
+    discardTitle: "Discard changes?",
+    discardBody: "You have unsaved changes. If you close now, they will be lost.",
+    discard: "Discard",
+    keepEditing: "Keep editing",
+};
+/** Sectioned create/edit form in a Drawer with error summary, sticky footer and discard-changes confirm. */
+export default function FormDrawer({ isOpen, onClose, title, description, sections, errors = [], isDirty, onSubmit, isSubmitting = false, isSubmitDisabled = false, submitLabel = "Save", cancelLabel = "Cancel", secondaryAction, size = "md", labels, "data-testid": testId = "form-drawer", }) {
+    const { colors } = useCustomTheme();
+    const uid = useId();
+    const formId = `${uid}-form`;
+    const titleId = `${uid}-title`;
+    const text = { ...DEFAULT_LABELS, ...labels };
+    const [confirmDiscard, setConfirmDiscard] = useState(false);
+    const [attempt, setAttempt] = useState(0);
+    const keepEditingRef = useRef(null);
+    const summaryRef = useRef(null);
+    const focusPending = useRef(false);
+    useEffect(() => {
+        if (!isOpen)
+            setConfirmDiscard(false);
+    }, [isOpen]);
+    useEffect(() => {
+        var _a;
+        if (!focusPending.current || isSubmitting)
+            return;
+        focusPending.current = false;
+        if (errors.length)
+            (_a = summaryRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [attempt, errors, isSubmitting]);
+    const requestClose = () => {
+        if (isSubmitting)
+            return;
+        if (isDirty)
+            setConfirmDiscard(true);
+        else
+            onClose();
+    };
+    const submit = (event) => {
+        event.preventDefault();
+        if (isSubmitting || isSubmitDisabled)
+            return;
+        focusPending.current = true;
+        setAttempt((n) => n + 1);
+        onSubmit();
+    };
+    return (_jsxs(Drawer, { isOpen: isOpen, onClose: requestClose, size: size, closeOnEsc: !isSubmitting, closeOnOverlayClick: !isSubmitting, portalChildren: _jsx(AlertDialog, { isOpen: confirmDiscard, onClose: () => setConfirmDiscard(false), leastDestructiveRef: keepEditingRef, isCentered: true, tone: "danger", title: text.discardTitle, content: _jsx(Text, { fontSize: "sm", color: colors.text[800], children: text.discardBody }), cancelButtonText: text.keepEditing, confirmButtonText: text.discard, onConfirm: () => {
+                setConfirmDiscard(false);
+                onClose();
+            } }), children: [_jsxs(DrawerHeader, { children: [_jsx(Heading, { id: titleId, as: "h2", fontSize: "md", fontWeight: 600, color: colors.header[900], children: title }), description ? (_jsx(Text, { mt: 0.5, fontSize: "sm", fontWeight: 400, color: colors.textMuted, children: description })) : null] }), _jsx(DrawerBody, { children: _jsx(Box, { as: "form", id: formId, "aria-labelledby": titleId, onSubmit: submit, noValidate: true, "data-testid": testId, children: _jsxs(Flex, { direction: "column", gap: 5, pt: 2, children: [errors.length ? (_jsxs(Alert, { ref: summaryRef, tabIndex: -1, status: "error", variant: "subtle", borderRadius: "md", alignItems: "flex-start", "data-testid": `${testId}-errors`, children: [_jsx(AlertIcon, {}), _jsxs(Box, { children: [_jsx(AlertTitle, { fontSize: "sm", children: text.fixErrors }), _jsx(AlertDescription, { fontSize: "sm", children: _jsx(UnorderedList, { mt: 1, children: errors.map((message) => (_jsx(ListItem, { children: message }, message))) }) })] })] })) : null, sections.map((section, index) => (_jsxs(Fragment, { children: [index > 0 ? _jsx(Divider, { borderColor: colors.boxborder[200] }) : null, _jsxs(Flex, { as: "section", direction: "column", gap: 4, "aria-label": section.title, children: [section.title ? (_jsxs(Box, { children: [_jsx(Heading, { as: "h3", fontSize: "sm", fontWeight: 600, color: colors.header[900], children: section.title }), section.description ? (_jsx(Text, { mt: 0.5, fontSize: "xs", color: colors.textMuted, children: section.description })) : null] })) : null, section.content] })] }, section.id)))] }) }) }), _jsx(DrawerFooter, { children: _jsxs(Flex, { gap: 2, w: "100%", justify: "flex-end", wrap: "wrap", children: [secondaryAction, _jsx(Button, { variant: "ghost", colorScheme: "gray", onClick: requestClose, isDisabled: isSubmitting, label: cancelLabel }), _jsx(Button, { variant: "solid", colorScheme: "primary", type: "submit", form: formId, isLoading: isSubmitting, isDisabled: isSubmitDisabled, loadingText: submitLabel, label: submitLabel, "data-testid": `${testId}-submit` })] }) })] }));
+}

package/dist/esm/Components/FormDrawer/FormDrawerProps.js

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

package/dist/esm/Components/FormField/FormField.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment, cloneElement, forwardRef, isValidElement } from "react";
+import { Box, FormControl } from "@chakra-ui/react";
+import ErrorMessage from "../Common/ErrorMessage.js";
+import { fieldLabelStyles } from "../Common/FormLabel.js";
+import { fieldMessageStyles, fieldMessageVisibility } from "../Common/fieldMessageStyles.js";
+import { useFieldIds } from "../Common/useFieldIds.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+const joinIds = (...ids) => [...new Set(ids.flatMap((value) => { var _a; return (_a = value === null || value === void 0 ? void 0 : value.split(/\s+/)) !== null && _a !== void 0 ? _a : []; }).filter(Boolean))].join(" ") || undefined;
+const asWirableElement = (children) => typeof children !== "function" && isValidElement(children) && children.type !== Fragment
+    ? children
+    : undefined;
+/** Wires a label, required marker, helper and error text to one control through ids and aria attributes. */
+const FormField = forwardRef(function FormField({ label, id, isRequired = false, error = false, errorMessage, helperText, layout = "vertical", labelWidth = "12rem", children, ...rest }, ref) {
+    var _a;
+    const { colors } = useCustomTheme();
+    const element = asWirableElement(children);
+    const own = (_a = element === null || element === void 0 ? void 0 : element.props) !== null && _a !== void 0 ? _a : {};
+    const ids = useFieldIds(id !== null && id !== void 0 ? id : own.id, { error, errorMessage, helperText });
+    const { showError, showHelper } = fieldMessageVisibility({ error, errorMessage, helperText });
+    const describedBy = joinIds(own["aria-describedby"], ids.describedBy);
+    const control = {
+        id: ids.inputId,
+        "aria-labelledby": ids.labelId,
+        "aria-describedby": describedBy,
+        "aria-invalid": ids.controlProps["aria-invalid"],
+        "aria-required": isRequired || undefined,
+    };
+    const isSelfNamed = Boolean(own["aria-label"] || own["aria-labelledby"]);
+    const wired = element
+        ? cloneElement(element, {
+            id: control.id,
+            ...(isSelfNamed ? {} : { "aria-labelledby": control["aria-labelledby"] }),
+            ...(describedBy ? { "aria-describedby": describedBy } : {}),
+            ...(error ? { "aria-invalid": true } : {}),
+            ...(isRequired ? { "aria-required": true } : {}),
+        })
+        : typeof children === "function"
+            ? children(control)
+            : children;
+    const message = showError && errorMessage ? (_jsx(ErrorMessage, { id: ids.errorId, errorMessage: errorMessage })) : showHelper ? (_jsx(Box, { id: ids.helperId, ...fieldMessageStyles(colors), children: helperText })) : null;
+    const isHorizontal = layout === "horizontal";
+    const labelStyles = fieldLabelStyles(colors);
+    return (_jsxs(FormControl, { ...rest, ref: ref, id: ids.inputId, isRequired: isRequired, isInvalid: error, ...(isHorizontal
+            ? {
+                display: "grid",
+                gridTemplateColumns: { base: "minmax(0, 1fr)", md: `${labelWidth} minmax(0, 1fr)` },
+                columnGap: 4,
+                alignItems: "start",
+            }
+            : {}), children: [_jsx(Box, { as: "label", id: ids.labelId, htmlFor: ids.inputId, ...labelStyles, display: "block", ...(isHorizontal ? { alignSelf: { md: "center" }, mb: { base: labelStyles.mb, md: 0 } } : {}), children: _jsxs(Box, { as: "span", display: "inline-flex", alignItems: "center", gap: "0.35rem", children: [_jsx(Box, { as: "span", children: label }), isRequired && (_jsx(Box, { as: "span", "aria-hidden": "true", color: colors.semanticText.error, ml: "0.125rem", children: "*" }))] }) }), isHorizontal ? (_jsxs(_Fragment, { children: [_jsx(Box, { minW: 0, children: wired }), message && _jsx(Box, { gridColumn: { md: 2 }, children: message })] })) : (_jsxs(_Fragment, { children: [wired, message] }))] }));
+});
+export default FormField;

package/dist/esm/Components/FormField/FormFieldProps.js

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

package/dist/esm/Components/Header/Header.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, HStack, IconButton, Spacer, useDisclosure } from "@chakra-ui/react";
+import { HEADER_HEIGHT } from "../../Constants/Sidebar.js";
+import { MenuIcon, X } from "lucide-react";
+import React, { useState } from "react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { contrastRatio, relativeLuminance } from "../../Theme/tokens/builders/color.js";
+import DesktopMenu from "./components/desktopMenu.js";
+import MobileMenu from "./components/mobileMenu.js";
+/** Non-text UI accent (WCAG 1.4.11, >=3:1) — the underline/highlight, not running text. */
+const ACTIVE_ACCENT_TARGET = 3;
+// NOTE: sidebar canvas never inverts but primary can be either mode-shaped — direction is detected from primary's own data, not the canvas.
+export const pickActiveAccent = (primary, canvas) => {
+    const runsDarkToLight = relativeLuminance(primary[50]) < relativeLuminance(primary[900]);
+    const order = runsDarkToLight
+        ? [500, 600, 700, 800, 900]
+        : [500, 400, 300, 200, 100, 50];
+    const found = order.find((rung) => contrastRatio(primary[rung], canvas) >= ACTIVE_ACCENT_TARGET);
+    return primary[found !== null && found !== void 0 ? found : order[order.length - 1]];
+};
+/** Sticky top bar with logo, page links, hover dropdowns and a collapsible mobile menu; colours default to the sidebar tokens. */
+const Header = ({ logo, menuItems, rightSlot, active, colors, boxShadow, onMobileMenuClose }) => {
+    var _a, _b, _c, _d, _e;
+    const { isOpen, onOpen, onClose } = useDisclosure();
+    const [hoveredMenu, setHoveredMenu] = useState(null);
+    const { colors: themeColor } = useCustomTheme();
+    const bg = (_a = colors === null || colors === void 0 ? void 0 : colors.bg) !== null && _a !== void 0 ? _a : themeColor.sidebar.background[500];
+    const color = (_b = colors === null || colors === void 0 ? void 0 : colors.color) !== null && _b !== void 0 ? _b : themeColor.white;
+    const activeBg = (_c = colors === null || colors === void 0 ? void 0 : colors.active) !== null && _c !== void 0 ? _c : themeColor.sidebar.activeIcon;
+    const hoverBg = (_d = colors === null || colors === void 0 ? void 0 : colors.hover) !== null && _d !== void 0 ? _d : themeColor.sidebar.background[400];
+    const hoverText = (_e = colors === null || colors === void 0 ? void 0 : colors.hoverTextColor) !== null && _e !== void 0 ? _e : themeColor.white;
+    const isActive = (href) => href && active === href;
+    const closeMobileMenu = () => {
+        onClose();
+        onMobileMenuClose === null || onMobileMenuClose === void 0 ? void 0 : onMobileMenuClose();
+    };
+    const rightSlotWithApi = React.isValidElement(rightSlot)
+        ? React.cloneElement(rightSlot, { closeMobileMenu })
+        : rightSlot;
+    return (_jsxs(Box, { bg: bg, color: color, px: 4, shadow: "md", boxShadow: boxShadow, zIndex: "sticky", position: "sticky", top: 0, children: [_jsxs(Flex, { minH: HEADER_HEIGHT, align: "center", mx: "auto", justifyContent: "flex-start", children: [_jsxs(HStack, { spacing: 6, align: "center", children: [_jsx(Box, { cursor: "pointer", children: logo }), _jsx(DesktopMenu, { menuItems: menuItems, rightSlot: rightSlotWithApi, setHoveredMenu: setHoveredMenu, isActive: isActive, activeBg: activeBg, hoveredMenu: hoveredMenu, hoverBg: hoverBg, color: color, hoverTextColor: hoverText, surface: bg })] }), _jsx(Spacer, {}), _jsxs(HStack, { spacing: 3, align: "center", children: [_jsx(HStack, { spacing: { base: 2, md: 4 }, children: rightSlotWithApi }), _jsx(IconButton, { variant: "unstyled", icon: _jsx(Box, { display: "flex", alignItems: "center", justifyContent: "center", w: "full", h: "full", children: isOpen ? _jsx(X, { size: 20 }) : _jsx(MenuIcon, { size: 20 }) }), "aria-label": "Toggle Menu", display: { md: "none" }, onClick: isOpen ? closeMobileMenu : onOpen })] })] }), _jsx(MobileMenu, { menuItems: menuItems, isOpen: isOpen, isActive: isActive, hoverBg: hoverBg, activeBg: activeBg, color: color, surface: bg, onClose: closeMobileMenu })] }));
+};
+export default Header;

package/dist/esm/Components/Header/HeaderActions.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "@chakra-ui/react";
+import React from "react";
+import { CirclePlus, SquarePen } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { AA_NORMAL_TEXT } from "../../Theme/tokens/builders/accentText.js";
+import { AA_NON_TEXT, liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
+import Select from "../Select/Select.js";
+import VerticalDivider from "../Divider/Divider.js";
+import { surfaceFocusRing } from "../Common/surfaceFocusRing.js";
+/** Row of optional header controls (select, edit, create) separated by dividers; each renders only when its flag is set. */
+const HeaderActions = ({ select, edit, create, surface, }) => {
+    var _a, _b, _c;
+    const { colors } = useCustomTheme();
+    const canvas = surface !== null && surface !== void 0 ? surface : colors.backgroundColor.main;
+    const ink = liftToContrast(colors.secondary[500], canvas, AA_NORMAL_TEXT);
+    const iconInk = liftToContrast(colors.secondary[500], canvas, AA_NON_TEXT);
+    const focusShadow = surfaceFocusRing(canvas, iconInk);
+    const elements = [];
+    if (select === null || select === void 0 ? void 0 : select.isSelect) {
+        elements.push(_jsx(Box, { width: (_a = select.width) !== null && _a !== void 0 ? _a : "12.5rem", children: _jsx(Select, { options: (_b = select.options) !== null && _b !== void 0 ? _b : [], placeholder: select.selectPlaceholderText, "aria-label": select.ariaLabel || select.selectPlaceholderText || "Select", native: (_c = select.native) !== null && _c !== void 0 ? _c : false, onChange: (option) => { var _a; return (_a = select.onSelectChange) === null || _a === void 0 ? void 0 : _a.call(select, option); }, value: select.value }, "select") }, "select"));
+    }
+    if (edit === null || edit === void 0 ? void 0 : edit.isEditable) {
+        elements.push(_jsxs(Box, { as: "button", type: "button", bg: "transparent", borderRadius: "lg", _focusVisible: { boxShadow: focusShadow, outline: "none" }, display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: "sm", onClick: () => { var _a; return (_a = edit.onEdit) === null || _a === void 0 ? void 0 : _a.call(edit); }, children: [_jsx(SquarePen, { size: 16, color: iconInk }), _jsx(Text, { color: ink, children: edit.label ? edit.label : "Edit Layout" })] }, "edit"));
+    }
+    if (create === null || create === void 0 ? void 0 : create.isCreatable) {
+        elements.push(_jsxs(Box, { as: "button", type: "button", bg: "transparent", borderRadius: "lg", _focusVisible: { boxShadow: focusShadow, outline: "none" }, display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: "sm", onClick: () => { var _a; return (_a = create.onCreate) === null || _a === void 0 ? void 0 : _a.call(create); }, children: [_jsx(CirclePlus, { size: 16, color: iconInk }), _jsxs(Text, { color: ink, children: [" ", create.label ? create.label : "Create New", " "] })] }, "create"));
+    }
+    return (_jsx(Box, { display: "flex", alignItems: "center", gap: "0.625rem", children: elements.map((el, i) => (_jsxs(React.Fragment, { children: [i > 0 && _jsx(VerticalDivider, {}), el] }, i))) }));
+};
+export default HeaderActions;

package/dist/esm/Components/Header/HeaderProps.js

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

package/dist/esm/Components/Header/components/desktopMenu.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, HStack, Stack, Button, Badge, Text, VStack, Collapse, } from "@chakra-ui/react";
+import { ChevronDown } from "lucide-react";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { onFilled } from "../../../Theme/tokens/builders/accentText.js";
+import { resolveSoftTone } from "../../../Theme/tokens/builders/tone.js";
+import { scaleFor } from "../../../Theme/chakra/paletteFromTheme.js";
+/** Desktop nav row of Header: ghost buttons with hover dropdowns for items that have children. */
+const DesktopMenu = ({ menuItems, rightSlot, setHoveredMenu, isActive, activeBg, hoveredMenu, hoverBg, color, hoverTextColor, surface, }) => {
+    const { colors } = useCustomTheme();
+    const badgeTone = (scheme) => resolveSoftTone(colors, scaleFor(colors, scheme !== null && scheme !== void 0 ? scheme : "blue"), surface);
+    return (_jsx(HStack, { spacing: 6, align: "center", display: { base: "none", md: "flex" }, mx: rightSlot ? "auto" : 0, wrap: "wrap", padding: "0.5rem 1.5rem", children: menuItems.map((item) => {
+            var _a, _b;
+            const hasChildren = !!item.children;
+            const isHovered = hoveredMenu === item.label;
+            return (_jsxs(Box, { position: "relative", onMouseEnter: () => hasChildren && setHoveredMenu(item.label), onMouseLeave: () => hasChildren && setHoveredMenu(null), children: [_jsx(Button, { variant: "ghost", onClick: item.onClick, rightIcon: hasChildren ? _jsx(ChevronDown, { size: 14 }) : undefined, 
+                        // `activeBg` is the rail's 3:1 non-text accent; label ink stays on `color`.
+                        borderBottom: `2px solid ${isActive(item.href) ? activeBg : "transparent"}`, borderRadius: 0, _hover: { bg: hoverBg, color: hoverTextColor }, color: color, children: _jsxs(VStack, { spacing: 0, children: [item.badge && (_jsx(Badge, { bg: badgeTone(item.badge.colorScheme).bg, color: badgeTone(item.badge.colorScheme).fg, variant: "subtle", fontSize: "0.65em", borderRadius: "full", boxShadow: "sm", px: 2, py: 0.5, children: (_a = item.badge) === null || _a === void 0 ? void 0 : _a.label })), _jsx(Text, { children: item.label })] }) }), hasChildren && (_jsx(Collapse, { in: isHovered, animateOpacity: true, children: _jsx(Box, { position: "absolute", top: "100%", bg: colors.surfaceRaised, color: colors.text[900], rounded: "xl", shadow: "md", minW: "10rem", zIndex: 10, children: _jsx(Stack, { spacing: 1, p: 2, children: (_b = item.children) === null || _b === void 0 ? void 0 : _b.map((subItem) => {
+                                    var _a;
+                                    return (_jsx(Button, { onClick: subItem.onClick, variant: "ghost", justifyContent: "flex-start", w: "full", bg: isActive(subItem.href) ? activeBg : "transparent", _hover: { bg: hoverBg, color: hoverTextColor }, children: _jsxs(VStack, { spacing: 0, align: "start", children: [subItem.badge && (_jsx(Badge, { bg: badgeTone(subItem.badge.colorScheme).bg, color: badgeTone(subItem.badge.colorScheme).fg, variant: "subtle", fontSize: "0.65em", alignItems: "end", borderRadius: "full", boxShadow: "sm", px: 2, py: 0.5, children: (_a = subItem.badge) === null || _a === void 0 ? void 0 : _a.label })), _jsx(Text
+                                                // NOTE: text[800] is tuned for background[50], not activeBg — onFilled picks a clearing ink instead.
+                                                , { 
+                                                    // NOTE: text[800] is tuned for background[50], not activeBg — onFilled picks a clearing ink instead.
+                                                    color: isActive(subItem.href)
+                                                        ? onFilled(activeBg, colors.white, colors.black)
+                                                        : colors.text[800], _hover: { color: hoverTextColor }, children: subItem.label })] }) }, subItem.label));
+                                }) }) }) }))] }, item.label));
+        }) }));
+};
+export default DesktopMenu;

package/dist/esm/Components/Header/components/mobileMenu.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Stack, Button, Badge, Text, VStack, Collapse, HStack, } from "@chakra-ui/react";
+import React from "react";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { onFilled } from "../../../Theme/tokens/builders/accentText.js";
+import { resolveSoftTone } from "../../../Theme/tokens/builders/tone.js";
+import { scaleFor } from "../../../Theme/chakra/paletteFromTheme.js";
+/** Collapsible mobile nav panel of Header; items with children toggle an inline submenu. */
+const MobileMenu = ({ menuItems, isOpen, isActive, hoverBg, activeBg, color, surface, onClose, }) => {
+    const { colors } = useCustomTheme();
+    const badgeTone = (scheme) => resolveSoftTone(colors, scaleFor(colors, scheme !== null && scheme !== void 0 ? scheme : "blue"), surface);
+    const [openMenuLabel, setOpenMenuLabel] = React.useState(null);
+    React.useEffect(() => {
+        if (!isOpen)
+            setOpenMenuLabel(null);
+    }, [isOpen]);
+    return (_jsx(Collapse, { in: isOpen, animateOpacity: true, children: _jsx(Box, { pb: 4, display: { md: "none" }, children: _jsx(Stack, { spacing: 4, children: menuItems.map((item) => {
+                    var _a;
+                    return item.children ? (_jsxs(Box, { px: 2, children: [_jsx(Button, { onClick: () => setOpenMenuLabel((prev) => (prev === item.label ? null : item.label)), variant: "ghost", w: "full", justifyContent: "flex-start", color: item.children.some((subItem) => isActive(subItem.href))
+                                    ? onFilled(activeBg, colors.white, colors.black)
+                                    : color, bg: item.children.some((subItem) => isActive(subItem.href))
+                                    ? activeBg
+                                    : "transparent", _hover: { bg: hoverBg }, rightIcon: openMenuLabel === item.label ? (_jsx(ChevronDown, { size: 16 })) : (_jsx(ChevronRight, { size: 16 })), px: 2, children: _jsx(HStack, { w: "full", justify: "space-between", align: "center", children: _jsxs(VStack, { spacing: 0, align: "start", children: [item.badge && (_jsx(Badge, { bg: badgeTone(item.badge.colorScheme).bg, color: badgeTone(item.badge.colorScheme).fg, variant: "subtle", fontSize: "0.65em", borderRadius: "full", boxShadow: "sm", px: 2, py: 0.5, children: item.badge.label })), _jsx(Text, { fontWeight: 700, children: item.label })] }) }) }), _jsx(Collapse, { in: openMenuLabel === item.label, animateOpacity: true, children: _jsx(Stack, { pl: 4, mt: 1, spacing: 1, children: item.children.map((subItem) => {
+                                        var _a;
+                                        return (_jsx(Button, { onClick: () => {
+                                                var _a;
+                                                (_a = subItem.onClick) === null || _a === void 0 ? void 0 : _a.call(subItem);
+                                                onClose === null || onClose === void 0 ? void 0 : onClose();
+                                            }, variant: "ghost", w: "full", justifyContent: "flex-start", color: isActive(subItem.href)
+                                                ? onFilled(activeBg, colors.white, colors.black)
+                                                : color, bg: isActive(subItem.href) ? activeBg : "transparent", _hover: { bg: hoverBg }, children: _jsxs(VStack, { spacing: 0, align: "start", children: [subItem.badge && (_jsx(Badge, { bg: badgeTone(subItem.badge.colorScheme).bg, color: badgeTone(subItem.badge.colorScheme).fg, variant: "subtle", fontSize: "0.65em", borderRadius: "full", boxShadow: "sm", px: 2, py: 0.5, children: (_a = subItem.badge) === null || _a === void 0 ? void 0 : _a.label })), _jsxs(HStack, { spacing: 2, align: "center", children: [_jsx(Box, { boxSize: "0.4rem", borderRadius: "full", bg: "currentColor" }), _jsx(Text, { fontSize: "sm", children: subItem.label })] })] }) }, subItem.label));
+                                    }) }) })] }, item.label)) : (_jsx(Button, { onClick: () => { var _a; (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item); onClose === null || onClose === void 0 ? void 0 : onClose(); }, variant: "ghost", w: "full", justifyContent: "flex-start", color: isActive(item.href)
+                            ? onFilled(activeBg, colors.white, colors.black)
+                            : color, bg: isActive(item.href) ? activeBg : "transparent", _hover: { bg: hoverBg }, children: _jsxs(VStack, { spacing: 0, align: "start", children: [item.badge && (_jsx(Badge, { bg: badgeTone(item.badge.colorScheme).bg, color: badgeTone(item.badge.colorScheme).fg, variant: "subtle", fontSize: "0.65em", borderRadius: "full", boxShadow: "sm", px: 2, py: 0.5, children: (_a = item.badge) === null || _a === void 0 ? void 0 : _a.label })), _jsx(Text, { children: item.label })] }) }, item.label));
+                }) }) }) }));
+};
+export default MobileMenu;

package/dist/esm/Components/IconButton/IconButton.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, memo, useEffect, useRef } from "react";
+import { IconButton as ChakraIconButton, } from "@chakra-ui/react";
+// NOTE: Chakra omits a missing aria-label at runtime; only its type insists on one.
+const UnlabelledChakraIconButton = ChakraIconButton;
+export const UNNAMED_ICON_BUTTON_WARNING = "[pixelize-design-library] IconButton: no aria-label or aria-labelledby, so screen readers announce it as an unnamed button.";
+const useUnnamedWarning = (isUnnamed) => {
+    const warned = useRef(false);
+    useEffect(() => {
+        if (process.env.NODE_ENV === "production" || !isUnnamed || warned.current)
+            return;
+        warned.current = true;
+        console.warn(UNNAMED_ICON_BUTTON_WARNING);
+    }, [isUnnamed]);
+};
+const IconButton = forwardRef(function IconButton(props, ref) {
+    var _a, _b;
+    useUnnamedWarning(!((_a = props["aria-label"]) === null || _a === void 0 ? void 0 : _a.trim()) && !((_b = props["aria-labelledby"]) === null || _b === void 0 ? void 0 : _b.trim()));
+    return _jsx(UnlabelledChakraIconButton, { ref: ref, ...props });
+});
+export default memo(IconButton);

package/dist/esm/Components/IconButton/IconButtonProps.js

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

package/dist/esm/Components/Input/PhoneNumberInput.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useCallback, forwardRef, useRef } from "react";
+import { Box, Flex, Icon, Input, Select, InputGroup, InputLeftElement, FormControl, } from "@chakra-ui/react";
+import ErrorMessage from "../Common/ErrorMessage.js";
+import HelperText from "../Common/HelperText.js";
+import { TextLabel } from "../Common/FormLabel.js";
+import { useFieldIds } from "../Common/useFieldIds.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+const getFlagEmoji = (countryCode) => {
+    if (!countryCode)
+        return "";
+    return countryCode
+        .toUpperCase()
+        .replace(/./g, (char) => String.fromCodePoint(127397 + char.charCodeAt(0)));
+};
+const sizeToPt = { xs: 2, sm: -1, md: 2, lg: 4 };
+const sizeToWidth = { xs: "3.5rem", sm: "3.8rem", md: "4rem", lg: "4rem" };
+/** Country-code-aware phone field with a flag/dial-code prefix; `ref` forwards to the number `<input>`. */
+const PhoneNumberInput = forwardRef(function PhoneNumberInput({ size = "sm", value, codeValueReturn = true, country, countries, placeholder = "Enter phone number", onChange, inputId, selectId, error, errorMessage, helperText, label, id, width = "100%", isInformation, informationMessage, isRequired, onBlur, onFocus, isReadOnly, height, autoComplete, showCountrySelect = true, name, minW, maxW, countrySelectAriaLabel = "Country code", ...rest }, ref) {
+    const theme = useCustomTheme();
+    const ids = useFieldIds(inputId !== null && inputId !== void 0 ? inputId : id, { error, errorMessage, helperText });
+    const getCountryTelCode = useCallback((countryCode) => {
+        var _a;
+        if (!countryCode)
+            return undefined;
+        return (_a = countries === null || countries === void 0 ? void 0 : countries.find(({ code }) => countryCode === code)) === null || _a === void 0 ? void 0 : _a.dial_code;
+    }, [countries]);
+    const [number, setNumber] = useState(value);
+    const [selectedCountry, setSelectedCountry] = useState(country);
+    const [countryCode, setCountryCode] = useState(country);
+    const countryCodeRef = useRef(countryCode);
+    countryCodeRef.current = countryCode;
+    const firstValue = useRef(true);
+    useEffect(() => {
+        if (firstValue.current) {
+            firstValue.current = false;
+            return;
+        }
+        if (value === undefined)
+            return;
+        const dial = countryCodeRef.current;
+        const digits = dial && value.startsWith(`${dial} `) ? value.slice(dial.length + 1) : value;
+        setNumber(digits);
+    }, [value]);
+    useEffect(() => {
+        if (country) {
+            const code = getCountryTelCode(country);
+            setSelectedCountry(country);
+            setCountryCode(code);
+        }
+    }, [country, getCountryTelCode]);
+    const handleCountryChange = (e) => {
+        const selected = e.target.value;
+        if (!selected) {
+            setSelectedCountry("");
+            setCountryCode("");
+            setNumber("");
+            onChange("");
+            return;
+        }
+        const code = getCountryTelCode(selected) || "";
+        setSelectedCountry(selected);
+        setCountryCode(code);
+        onChange(codeValueReturn ? `${code} ${number}`.trim() : `${number}`);
+    };
+    const handleNumberChange = (e) => {
+        if (countryCode) {
+            let numValue = e.target.value;
+            numValue = numValue.replace(/[^+\d\s]/g, "");
+            setNumber(numValue);
+            onChange(codeValueReturn ? `${countryCode} ${numValue}`.trim() : `${numValue}`);
+        }
+        else {
+            return;
+        }
+    };
+    return (_jsxs(FormControl, { w: width, minW: minW, maxW: maxW, children: [label && (_jsx(TextLabel, { label: label, id: ids.inputId, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })), _jsxs(InputGroup, { size: size, ...rest, children: [_jsxs(InputLeftElement, { width: showCountrySelect ? "3rem" : "2rem", height: "100%", children: [showCountrySelect && _jsx(_Fragment, { children: _jsxs(Select, { position: "absolute", top: "0", left: "0", height: "100%", id: selectId, "aria-label": countrySelectAriaLabel, width: sizeToWidth[size], opacity: 0, zIndex: 1, value: selectedCountry, onChange: handleCountryChange, size: size, pt: sizeToPt[size], iconColor: theme.colors.gray[500], children: [_jsx("option", { value: "", children: "Select Country" }), countries.map((option) => (_jsx("option", { value: option.code, children: option.country }, option.code)))] }) }), _jsx(Flex, { pl: 2, width: "100%", alignItems: "center", justifyContent: "space-between", children: selectedCountry ? (_jsx(Box, { fontSize: "1.2rem", children: getFlagEmoji(selectedCountry) })) : (_jsx(Icon, { viewBox: "0 0 24 24", boxSize: "1rem", children: _jsx("path", { fill: "currentColor", d: "M6.62,10.79C8.06,13.62 10.38,15.94 13.21,17.38L15.41,15.18C15.79,14.8 16.33,14.67 16.8,14.82C18.17,15.27 19.65,15.5 21,15.5C21.55,15.5 22,15.95 22,16.5V20C22,20.55 21.55,21 21,21C10.61,21 3,13.39 3,3C3,2.45 3.45,2 4,2H7.5C8.05,2 8.5,2.45 8.5,3C8.5,4.35 8.73,5.83 9.18,7.2C9.33,7.67 9.2,8.21 8.82,8.59L6.62,10.79Z" }) })) })] }), _jsx(Input, { type: "tel", pl: showCountrySelect ? "4rem" : "2rem", value: number, id: ids.inputId, "aria-describedby": ids.describedBy, onChange: handleNumberChange, onBlur: onBlur, onFocus: onFocus, isReadOnly: isReadOnly, name: name, size: size, height: height, ref: ref, autoComplete: autoComplete, placeholder: placeholder, disabled: !selectedCountry, isInvalid: error })] }), error && errorMessage && _jsx(ErrorMessage, { errorMessage: errorMessage, id: ids.errorId }), helperText && !error && _jsx(HelperText, { helperText: helperText, id: ids.helperId })] }));
+});
+PhoneNumberInput.displayName = "PhoneNumberInput";
+export default PhoneNumberInput;

package/dist/esm/Components/Input/PhoneNumberInputProps.js

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

package/dist/esm/Components/Input/Switch/InputSwitch.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from "@chakra-ui/react";
+import ToggleSwitch from "../../ToggleSwitch/ToggleSwitch.js";
+/** @deprecated Use `ToggleSwitch` with `label`/`fieldLabel`/`helperText`/`error` — this is a thin wrapper around it. */
+export const InputSwitch = ({ switchText, switchTextPosition = "right", id, isChecked, defaultChecked, label, isInformation, informationMessage, isRequired, size = "md", isDisabled, isReadOnly, isInvalid, helperText, errorMessage, name, value, onChange, onFocus, onBlur, colorScheme, variant, spacing, isFocusable, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, ...layout }) => {
+    void variant;
+    void spacing;
+    void isFocusable;
+    // NOTE: unreachable when a real caller names it; matches the pre-existing accessibility gap.
+    const naming = typeof switchText === "string"
+        ? { label: switchText, fieldLabel: label }
+        : typeof ariaLabel === "string"
+            ? { "aria-label": ariaLabel, fieldLabel: label }
+            : { fieldLabel: label };
+    const handleChange = (_checked, event) => onChange === null || onChange === void 0 ? void 0 : onChange(event);
+    return (_jsx(Box, { ...layout, children: _jsx(ToggleSwitch, { ...naming, id: id, isChecked: isChecked, defaultChecked: defaultChecked, onChange: handleChange, size: size, labelPosition: switchTextPosition === "left" ? "start" : "end", isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage, colorScheme: colorScheme, error: isInvalid, errorMessage: errorMessage, helperText: helperText, name: name, value: value === undefined ? undefined : String(value), onFocus: onFocus, onBlur: onBlur, "aria-describedby": ariaDescribedBy }) }));
+};