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

package/dist/Components/FilterSidebar/OptionsSection.js

@@ -0,0 +1,46 @@
+"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 lucide_react_1 = require("lucide-react");
+const Checkbox_1 = __importDefault(require("../Checkbox/Checkbox"));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const planeStep_1 = require("../../Theme/tokens/builders/planeStep");
+const filterHoverStyle_1 = require("./filterHoverStyle");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const activationKey_1 = require("../Common/activationKey");
+const RATINGS = [4, 3, 2, 1];
+const STARS = [0, 1, 2, 3, 4];
+const OptionsSection = (0, react_1.memo)(({ section, value, searchTerm, isExpanded, maxVisible, onToggle, onValue, onSearch, onToggleExpanded, }) => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const hoverBg = (0, react_1.useMemo)(() => (0, filterHoverStyle_1.getFilterHoverBg)(theme.colors), [theme.colors]);
+    const ratingPick = (0, react_1.useMemo)(() => (0, planeStep_1.bandOn)(theme.colors.primary[50], theme.colors.background[50]), [theme.colors]);
+    const insetFocusRing = (0, react_1.useMemo)(() => ({ outline: "2px solid transparent", boxShadow: (0, focusRing_styles_1.insetFocusRingShadow)(theme.colors) }), [theme.colors]);
+    const options = section.options || [];
+    const selectedIds = Array.isArray(value) ? value : [];
+    const isRadio = section.type === "radio" || section.radio;
+    const visible = (isExpanded ? options : options.slice(0, maxVisible)).filter((opt) => !section.searchable || !searchTerm || opt.label.toLowerCase().includes(searchTerm.toLowerCase()));
+    const renderList = () => {
+        if (visible.length === 0 && searchTerm) {
+            return ((0, jsx_runtime_1.jsx)(react_2.Box, { p: 2, w: "full", textAlign: "center", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: theme.colors.textMuted, children: "No Data Found" }) }));
+        }
+        if (isRadio) {
+            return ((0, jsx_runtime_1.jsx)(react_2.RadioGroup, { w: "full", value: value || "", onChange: (val) => onValue(section.id, val), children: (0, jsx_runtime_1.jsx)(react_2.VStack, { align: "start", spacing: 1, w: "full", children: visible.map((opt) => ((0, jsx_runtime_1.jsx)(react_2.Radio, { value: opt.id, size: "sm", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: theme.colors.text[500], children: opt.label }) }, opt.id))) }) }));
+        }
+        return visible.map((opt) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", w: "full", _hover: { bg: hoverBg, borderRadius: "md" }, p: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { "aria-label": `${section.label}: ${opt.label}`, isChecked: selectedIds.includes(opt.id), onChange: (e) => onToggle(section.id, opt.id, e.target.checked), size: "sm" }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: theme.colors.text[500], cursor: "pointer", onClick: () => onToggle(section.id, opt.id, !selectedIds.includes(opt.id)), children: opt.label })] }), typeof opt.count === "number" && ((0, jsx_runtime_1.jsx)(react_2.Badge, { fontSize: "xs", colorScheme: "gray", borderRadius: "full", px: 2, children: opt.count }))] }, opt.id)));
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [section.id === "rating" ? ((0, jsx_runtime_1.jsx)(react_2.VStack, { align: "start", spacing: 1, w: "full", children: RATINGS.map((r) => {
+                    const isRowSelected = String(value || "") === String(r);
+                    // NOTE: orange[500] is ~2.2:1 on background[50]; walk the scale for 3:1.
+                    const starColor = (0, accentText_1.accentTextOnCanvas)(theme.colors.orange, isRowSelected ? ratingPick : theme.colors.background[50]);
+                    return ((0, jsx_runtime_1.jsx)(react_2.Flex, { as: "button", type: "button", "aria-pressed": isRowSelected, "aria-label": `${section.label}: ${r} stars & up`, align: "center", justify: "space-between", w: "full", p: 1, borderRadius: "md", cursor: "pointer", bg: isRowSelected ? ratingPick : "transparent", border: isRowSelected ? `1px solid ${theme.colors.primary[200]}` : "none", _hover: { bg: hoverBg }, _focusVisible: insetFocusRing, onClick: () => onValue(section.id, String(r)), children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, align: "center", children: [(0, jsx_runtime_1.jsx)(react_2.HStack, { spacing: 1, children: STARS.map((i) => ((0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 16, color: starColor, fill: i < r ? starColor : "none" }) }, `star-${r}-${i}`))) }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: theme.colors.text[500], children: "& Up" })] }) }, `rating-${r}`));
+                }) })) : null, section.searchable && ((0, jsx_runtime_1.jsx)(react_2.Input, { size: "xs", h: "26px", fontSize: "xs", "aria-label": `Search ${section.label}`, placeholder: `Search ${section.label}...`, borderRadius: "md", bg: theme.colors.background[50], border: "1px solid", 
+                // NOTE: boxborder[500] not gray[200]; WCAG 1.4.11 needs 3:1 for a control boundary.
+                borderColor: theme.colors.boxborder[500], _focus: { borderColor: theme.colors.primary[500], ...(0, focusRing_styles_1.fieldFocusVisible)(theme.colors) }, value: searchTerm, onChange: (e) => onSearch(section.id, e.target.value) })), section.id !== "rating" && renderList(), options.length > maxVisible && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", role: "button", tabIndex: 0, fontSize: "sm", fontWeight: 500, color: theme.colors.accentText, cursor: "pointer", _hover: { textDecoration: "underline" }, onClick: () => onToggleExpanded(section.id), onKeyDown: (0, activationKey_1.onActivationKey)(() => onToggleExpanded(section.id)), children: isExpanded ? "Show less" : `+ ${options.length - maxVisible} more` }))] }));
+});
+exports.default = OptionsSection;

package/dist/Components/FilterSidebar/RangeSection.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+export type FilterRange = {
+    min: number;
+    max: number;
+    step?: number;
+    values?: number[];
+    unit?: string;
+};
+type RangeSectionProps = {
+    sectionId: string;
+    label: string;
+    range: FilterRange;
+    value: unknown;
+    onChange: (sectionId: string, next: number[]) => void;
+};
+declare const RangeSection: React.MemoExoticComponent<({ sectionId, label, range, value, onChange }: RangeSectionProps) => import("react/jsx-runtime").JSX.Element>;
+export default RangeSection;

package/dist/Components/FilterSidebar/RangeSection.js

@@ -0,0 +1,80 @@
+"use strict";
+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 lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const planeStep_1 = require("../../Theme/tokens/builders/planeStep");
+const filterHoverStyle_1 = require("./filterHoverStyle");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+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 = (0, useCustomTheme_1.useCustomTheme)();
+    const hoverBg = (0, react_1.useMemo)(() => (0, filterHoverStyle_1.getFilterHoverBg)(theme.colors), [theme.colors]);
+    const pickFill = (0, react_1.useMemo)(() => (0, planeStep_1.bandOn)(theme.colors.primary[50], theme.colors.surfaceRaised), [theme.colors]);
+    const focusRing = (0, react_1.useMemo)(() => (0, focusRing_styles_1.focusVisibleRing)(theme.colors), [theme.colors]);
+    const insetFocusRing = (0, react_1.useMemo)(() => ({ outline: "2px solid transparent", boxShadow: (0, focusRing_styles_1.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 = (0, accentText_1.onFilled)(theme.colors.primary[100], theme.colors.white, theme.colors.black);
+    return ((0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isOpen, onClose: onClose, placement: "bottom-start", closeOnBlur: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsx)(react_2.Box, { ml: "auto", children: (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: theme.colors.text[500], whiteSpace: "nowrap", children: [current, unitSuffix] }) }) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { width: "6rem", p: 0, zIndex: 1600, bg: theme.colors.surfaceRaised, "aria-label": `${label} ${boundName}`, children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 0, children: (0, jsx_runtime_1.jsx)(react_2.VStack, { align: "stretch", spacing: 0, maxH: "12rem", overflowY: "auto", children: values.map((v) => ((0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: theme.colors.text[500], children: [v, unitSuffix] }), current === v ? ((0, jsx_runtime_1.jsx)(react_2.Box, { bg: theme.colors.primary[100], borderRadius: "full", p: 1, display: "flex", alignItems: "center", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 9, color: checkInk }) })) : null] }, `${bound}-${v}`))) }) }) }) })] }));
+};
+const RangeSection = (0, react_1.memo)(({ sectionId, label, range, value, onChange }) => {
+    var _a, _b;
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const [openBound, setOpenBound] = (0, react_1.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 = (0, react_1.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 = (0, planeStep_1.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 ((0, jsx_runtime_1.jsxs)(react_2.Box, { w: "full", px: 3, children: [(0, jsx_runtime_1.jsx)("style", { children: SLIDER_CSS }), (0, jsx_runtime_1.jsxs)(react_2.Box, { w: "full", position: "relative", h: { base: "24px", md: "30px" }, display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: "0", right: "0", height: "6px", bg: trackColor, borderRadius: "full" }), (0, jsx_runtime_1.jsx)(react_2.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) => ((0, jsx_runtime_1.jsx)(react_2.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) => ((0, jsx_runtime_1.jsxs)(react_2.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) => ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: `${p}%`, bottom: "-8px", transform: "translateX(-50%)", w: "1px", h: "8px", bg: theme.colors.boxborder[500] }, `tick-${p}`))), (0, jsx_runtime_1.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 }), (0, jsx_runtime_1.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 })] }), (0, jsx_runtime_1.jsx)(react_2.SimpleGrid, { columns: 2, spacing: 2, pt: 2, w: "full", children: ["min", "max"].map((bound) => ((0, jsx_runtime_1.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))) })] }));
+});
+exports.default = RangeSection;

package/dist/Components/FilterSidebar/SectionHeader.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+type SectionHeaderProps = {
+    label: string;
+    hasValue: boolean;
+};
+export declare const SectionHeader: React.MemoExoticComponent<({ label, hasValue }: SectionHeaderProps) => import("react/jsx-runtime").JSX.Element>;
+type SectionClearProps = {
+    sectionId: string;
+    label: string;
+    onClear: (sectionId: string, control: HTMLElement) => void;
+};
+export declare const SectionClear: React.MemoExoticComponent<({ sectionId, label, onClear }: SectionClearProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/dist/Components/FilterSidebar/SectionHeader.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionClear = exports.SectionHeader = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const activationKey_1 = require("../Common/activationKey");
+const CLEAR_BADGE = {
+    colorScheme: "red",
+    variant: "solid",
+    fontSize: "xs",
+    borderRadius: "full",
+    px: 2,
+};
+exports.SectionHeader = (0, react_1.memo)(({ label, hasValue }) => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "space-between", align: "center", w: "full", py: 1, children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: label, hasArrow: true, placement: "top", fontSize: "xs", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: 700, fontSize: "md", color: theme.colors.text[500], textAlign: "left", isTruncated: true, flex: "1", minW: 0, children: label }) }), hasValue ? ((0, jsx_runtime_1.jsx)(react_2.Badge, { ...CLEAR_BADGE, "aria-hidden": true, visibility: "hidden", _after: { content: '"Clear"' } })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDownIcon, { size: 10 }))] }));
+});
+exports.SectionClear = (0, react_1.memo)(({ sectionId, label, onClear }) => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsx)(react_2.Badge, { ...CLEAR_BADGE, cursor: "pointer", role: "button", tabIndex: 0, "aria-label": `Clear ${label}`, _focusVisible: (0, focusRing_styles_1.focusVisibleRing)(theme.colors), onClick: (e) => onClear(sectionId, e.currentTarget), onKeyDown: (0, activationKey_1.onActivationKey)((e) => onClear(sectionId, e.currentTarget)), children: "Clear" }));
+});

package/dist/Components/FilterSidebar/filterHoverStyle.d.ts

@@ -0,0 +1,3 @@
+import type { PaletteProps } from "../../Theme/tokens/types";
+/** Shared with every selectable list row — never seed from `primary[500]` or `primary.opacity[8]`. */
+export declare const getFilterHoverBg: (colors: PaletteProps) => string;

package/dist/Components/FilterSidebar/filterHoverStyle.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFilterHoverBg = void 0;
+const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
+/** Shared with every selectable list row — never seed from `primary[500]` or `primary.opacity[8]`. */
+const getFilterHoverBg = (colors) => (0, rowStates_1.listRowBackgrounds)(colors).active;
+exports.getFilterHoverBg = getFilterHoverBg;

package/dist/Components/FilterSidebar/useStableCallback.d.ts

@@ -0,0 +1 @@
+export declare const useStableCallback: <A extends unknown[], R>(fn: (...args: A) => R) => ((...args: A) => R);

package/dist/Components/FilterSidebar/useStableCallback.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStableCallback = void 0;
+const react_1 = require("react");
+const useStableCallback = (fn) => {
+    const latest = (0, react_1.useRef)(fn);
+    (0, react_1.useLayoutEffect)(() => {
+        latest.current = fn;
+    });
+    return (0, react_1.useCallback)((...args) => latest.current(...args), []);
+};
+exports.useStableCallback = useStableCallback;

package/dist/Components/Form/FormWrapper.d.ts

@@ -1,7 +1,10 @@
-import React, { ElementType } from "react";
-declare const FormWrapper: ({ icon, text, children, }: {
-    icon?: ElementType;
+import React, { ElementType, ReactElement } from "react";
+type FormWrapperProps = Omit<React.ComponentPropsWithoutRef<"div">, "children"> & {
+    /** A component reference (FiUser) or a rendered element (<FiUser />); an element is sized to 1rem by its wrapper. */
+    icon?: ElementType | ReactElement;
     text?: string;
     children: React.ReactNode;
-}) => React.JSX.Element;
+};
+/** 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. */
+declare const FormWrapper: ({ icon, text, children, ...rest }: FormWrapperProps) => import("react/jsx-runtime").JSX.Element;
 export default FormWrapper;

package/dist/Components/Form/FormWrapper.js

@@ -1,19 +1,13 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = require("@chakra-ui/react");
-var react_2 = __importDefault(require("react"));
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var FormWrapper = function (_a) {
-    var _b, _c, _d, _e;
-    var icon = _a.icon, text = _a.text, children = _a.children;
-    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
-    return (react_2.default.createElement(react_1.Box, null,
-        react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center", gap: 2, mb: 2 },
-            icon && react_2.default.createElement(react_1.Icon, { as: icon, size: "1rem", color: (_b = colors === null || colors === void 0 ? void 0 : colors.header) === null || _b === void 0 ? void 0 : _b[500] }),
-            text && (react_2.default.createElement(react_1.Box, { fontFamily: "open-sans, sans-serif", fontWeight: 600, fontSize: 12, lineHeight: "100%", letterSpacing: "4%", textTransform: "uppercase", color: (_c = colors === null || colors === void 0 ? void 0 : colors.header) === null || _c === void 0 ? void 0 : _c[500] }, text))),
-        react_2.default.createElement(react_1.Box, { borderRadius: "0.25rem", bg: colors === null || colors === void 0 ? void 0 : colors.white, border: "0.075rem solid ".concat((_d = colors === null || colors === void 0 ? void 0 : colors.border) === null || _d === void 0 ? void 0 : _d[500]), boxShadow: "0 0.063rem 0.125rem 0 ".concat((_e = colors === null || colors === void 0 ? void 0 : colors.boxShadow) === null || _e === void 0 ? void 0 : _e.primary), p: "1.5rem" }, children)));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const react_2 = require("react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const isElement = (icon) => (0, react_2.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 } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { ...rest, children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: 2, mb: 2, children: [isElement(icon) ? ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "inline-flex", boxSize: "1rem", color: colors.header[500], sx: { "& > svg": { width: "100%", height: "100%" } }, children: icon })) : (icon && (0, jsx_runtime_1.jsx)(react_1.Icon, { as: icon, boxSize: "1rem", color: colors.header[500] })), text && ((0, jsx_runtime_1.jsx)(react_1.Box, { fontWeight: 600, fontSize: "xs", lineHeight: "1", textTransform: "uppercase", color: colors.header[500], children: text }))] }), (0, jsx_runtime_1.jsx)(react_1.Box, { borderRadius: "xl", bg: colors.background[50], borderWidth: "1px", borderStyle: "solid", borderColor: colors.boxborder[200], p: "1.5rem", children: children })] }));
 };
 exports.default = FormWrapper;

package/dist/Components/FormDrawer/FormDrawer.d.ts

@@ -0,0 +1,3 @@
+import type { FormDrawerProps } from "./FormDrawerProps";
+/** 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, isSubmitDisabled, submitLabel, cancelLabel, secondaryAction, size, labels, "data-testid": testId, }: FormDrawerProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/FormDrawer/FormDrawer.js

@@ -0,0 +1,98 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = FormDrawer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const Drawer_1 = __importStar(require("../Drawer/Drawer"));
+const AlertDialog_1 = __importDefault(require("../AlertDialog/AlertDialog"));
+const Button_1 = __importDefault(require("../Button/Button"));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+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. */
+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 } = (0, useCustomTheme_1.useCustomTheme)();
+    const uid = (0, react_1.useId)();
+    const formId = `${uid}-form`;
+    const titleId = `${uid}-title`;
+    const text = { ...DEFAULT_LABELS, ...labels };
+    const [confirmDiscard, setConfirmDiscard] = (0, react_1.useState)(false);
+    const [attempt, setAttempt] = (0, react_1.useState)(0);
+    const keepEditingRef = (0, react_1.useRef)(null);
+    const summaryRef = (0, react_1.useRef)(null);
+    const focusPending = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        if (!isOpen)
+            setConfirmDiscard(false);
+    }, [isOpen]);
+    (0, react_1.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 ((0, jsx_runtime_1.jsxs)(Drawer_1.default, { isOpen: isOpen, onClose: requestClose, size: size, closeOnEsc: !isSubmitting, closeOnOverlayClick: !isSubmitting, portalChildren: (0, jsx_runtime_1.jsx)(AlertDialog_1.default, { isOpen: confirmDiscard, onClose: () => setConfirmDiscard(false), leastDestructiveRef: keepEditingRef, isCentered: true, tone: "danger", title: text.discardTitle, content: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: colors.text[800], children: text.discardBody }), cancelButtonText: text.keepEditing, confirmButtonText: text.discard, onConfirm: () => {
+                setConfirmDiscard(false);
+                onClose();
+            } }), children: [(0, jsx_runtime_1.jsxs)(Drawer_1.DrawerHeader, { children: [(0, jsx_runtime_1.jsx)(react_2.Heading, { id: titleId, as: "h2", fontSize: "md", fontWeight: 600, color: colors.header[900], children: title }), description ? ((0, jsx_runtime_1.jsx)(react_2.Text, { mt: 0.5, fontSize: "sm", fontWeight: 400, color: colors.textMuted, children: description })) : null] }), (0, jsx_runtime_1.jsx)(Drawer_1.DrawerBody, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "form", id: formId, "aria-labelledby": titleId, onSubmit: submit, noValidate: true, "data-testid": testId, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 5, pt: 2, children: [errors.length ? ((0, jsx_runtime_1.jsxs)(react_2.Alert, { ref: summaryRef, tabIndex: -1, status: "error", variant: "subtle", borderRadius: "md", alignItems: "flex-start", "data-testid": `${testId}-errors`, children: [(0, jsx_runtime_1.jsx)(react_2.AlertIcon, {}), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.AlertTitle, { fontSize: "sm", children: text.fixErrors }), (0, jsx_runtime_1.jsx)(react_2.AlertDescription, { fontSize: "sm", children: (0, jsx_runtime_1.jsx)(react_2.UnorderedList, { mt: 1, children: errors.map((message) => ((0, jsx_runtime_1.jsx)(react_2.ListItem, { children: message }, message))) }) })] })] })) : null, sections.map((section, index) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [index > 0 ? (0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: colors.boxborder[200] }) : null, (0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "section", direction: "column", gap: 4, "aria-label": section.title, children: [section.title ? ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Heading, { as: "h3", fontSize: "sm", fontWeight: 600, color: colors.header[900], children: section.title }), section.description ? ((0, jsx_runtime_1.jsx)(react_2.Text, { mt: 0.5, fontSize: "xs", color: colors.textMuted, children: section.description })) : null] })) : null, section.content] })] }, section.id)))] }) }) }), (0, jsx_runtime_1.jsx)(Drawer_1.DrawerFooter, { children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 2, w: "100%", justify: "flex-end", wrap: "wrap", children: [secondaryAction, (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", colorScheme: "gray", onClick: requestClose, isDisabled: isSubmitting, label: cancelLabel }), (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "solid", colorScheme: "primary", type: "submit", form: formId, isLoading: isSubmitting, isDisabled: isSubmitDisabled, loadingText: submitLabel, label: submitLabel, "data-testid": `${testId}-submit` })] }) })] }));
+}

package/dist/Components/FormDrawer/FormDrawerProps.d.ts

@@ -0,0 +1,60 @@
+import type { ReactNode } from "react";
+/** One block of the form; sections after the first are separated by a divider. */
+export type FormDrawerSection = {
+    /** Stable React key. */
+    id: string;
+    /** Renders an h3 above the content; also names the section region. */
+    title?: string;
+    /** Muted line under `title`; ignored without a title. */
+    description?: string;
+    /** Body of the section, rendered below its title and description. */
+    content: ReactNode;
+};
+/** Every user-facing string FormDrawer owns; pass the ones you localise. */
+export type FormDrawerLabels = {
+    /** Heading of the error summary. Defaults to "Please fix the following before saving". */
+    fixErrors: string;
+    /** Defaults to "Discard changes?". */
+    discardTitle: string;
+    /** Defaults to "You have unsaved changes. If you close now, they will be lost.". */
+    discardBody: string;
+    /** Confirm button of the discard dialog. Defaults to "Discard". */
+    discard: string;
+    /** Cancel button of the discard dialog, focused on open. Defaults to "Keep editing". */
+    keepEditing: string;
+};
+/** Sectioned create/edit form in a Drawer: error summary, sticky footer, and a discard-changes confirm when closing while dirty. */
+export interface FormDrawerProps {
+    /** Controlled open state; the drawer stays closed until this is true. */
+    isOpen: boolean;
+    /** Called once the user has really closed: clean close, or Discard confirmed. Never called while `isSubmitting`. */
+    onClose: () => void;
+    /** Drawer heading; also the accessible name of the dialog and of the form. */
+    title: string;
+    /** Muted line under the title. */
+    description?: string;
+    /** Form blocks rendered top to bottom in array order. */
+    sections: FormDrawerSection[];
+    /** Validation messages shown as a summary above the form; the summary takes focus after a submit that leaves any. */
+    errors?: string[];
+    /** Closing (X, Esc, overlay, Cancel) asks for confirmation while true. */
+    isDirty: boolean;
+    /** Fires on submit (button or Enter in a field); the browser's own validation is off, so validate in the handler. */
+    onSubmit: () => void;
+    /** Spins the submit button, disables Cancel and blocks every close path. Set it synchronously in `onSubmit` so error focus waits for the result. */
+    isSubmitting?: boolean;
+    /** Disables the primary button and swallows Enter and any other form submit, so `onSubmit` never fires; unlike `isSubmitting`, Cancel and every close path stay live. */
+    isSubmitDisabled?: boolean;
+    /** Defaults to "Save". */
+    submitLabel?: string;
+    /** Defaults to "Cancel". */
+    cancelLabel?: string;
+    /** Rendered left of Cancel, e.g. a ghost "Save as draft" Button. */
+    secondaryAction?: ReactNode;
+    /** Drawer width. Defaults to "md". */
+    size?: "sm" | "md" | "lg";
+    /** Overrides for the built-in strings. */
+    labels?: Partial<FormDrawerLabels>;
+    /** Set on the form; the error summary and submit button get `-errors` / `-submit` suffixes. Defaults to "form-drawer". */
+    "data-testid"?: string;
+}

package/dist/Components/FormDrawer/FormDrawerProps.js

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

package/dist/Components/FormField/FormField.d.ts

@@ -0,0 +1,4 @@
+import type { FormFieldProps } from "./FormFieldProps";
+/** Wires a label, required marker, helper and error text to one control through ids and aria attributes. */
+declare const FormField: import("react").ForwardRefExoticComponent<FormFieldProps & import("react").RefAttributes<HTMLDivElement>>;
+export default FormField;

package/dist/Components/FormField/FormField.js

@@ -0,0 +1,58 @@
+"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 ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
+const FormLabel_1 = require("../Common/FormLabel");
+const fieldMessageStyles_1 = require("../Common/fieldMessageStyles");
+const useFieldIds_1 = require("../Common/useFieldIds");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+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" && (0, react_1.isValidElement)(children) && children.type !== react_1.Fragment
+    ? children
+    : undefined;
+/** Wires a label, required marker, helper and error text to one control through ids and aria attributes. */
+const FormField = (0, react_1.forwardRef)(function FormField({ label, id, isRequired = false, error = false, errorMessage, helperText, layout = "vertical", labelWidth = "12rem", children, ...rest }, ref) {
+    var _a;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const element = asWirableElement(children);
+    const own = (_a = element === null || element === void 0 ? void 0 : element.props) !== null && _a !== void 0 ? _a : {};
+    const ids = (0, useFieldIds_1.useFieldIds)(id !== null && id !== void 0 ? id : own.id, { error, errorMessage, helperText });
+    const { showError, showHelper } = (0, fieldMessageStyles_1.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
+        ? (0, react_1.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 ? ((0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { id: ids.errorId, errorMessage: errorMessage })) : showHelper ? ((0, jsx_runtime_1.jsx)(react_2.Box, { id: ids.helperId, ...(0, fieldMessageStyles_1.fieldMessageStyles)(colors), children: helperText })) : null;
+    const isHorizontal = layout === "horizontal";
+    const labelStyles = (0, FormLabel_1.fieldLabelStyles)(colors);
+    return ((0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "label", id: ids.labelId, htmlFor: ids.inputId, ...labelStyles, display: "block", ...(isHorizontal ? { alignSelf: { md: "center" }, mb: { base: labelStyles.mb, md: 0 } } : {}), children: (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "span", display: "inline-flex", alignItems: "center", gap: "0.35rem", children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", children: label }), isRequired && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", "aria-hidden": "true", color: colors.semanticText.error, ml: "0.125rem", children: "*" }))] }) }), isHorizontal ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { minW: 0, children: wired }), message && (0, jsx_runtime_1.jsx)(react_2.Box, { gridColumn: { md: 2 }, children: message })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [wired, message] }))] }));
+});
+exports.default = FormField;

package/dist/Components/FormField/FormFieldProps.d.ts

@@ -0,0 +1,37 @@
+import type { HTMLAttributes, ReactElement, ReactNode } from "react";
+/** The wiring FormField hands its control; spread it onto the focusable element. */
+export interface FormFieldControlProps {
+    /** Id for the control; the label, helper and error ids derive from it. */
+    id: string;
+    /** Points at the field's label element, so composites that a `<label for>` cannot name still get one. */
+    "aria-labelledby": string;
+    /** The error when shown, else the helper text, plus any description the child already had. */
+    "aria-describedby": string | undefined;
+    /** True while `error` is set, else undefined. */
+    "aria-invalid": true | undefined;
+    /** True when the field is required, else undefined. */
+    "aria-required": true | undefined;
+}
+/** Where the label sits relative to the control. */
+export type FormFieldLayout = "vertical" | "horizontal";
+/** Label, required marker, helper text and error message around any one control; other `<div>` attributes land on the root. */
+export interface FormFieldProps extends Omit<HTMLAttributes<HTMLDivElement>, "id" | "children" | "color" | "dangerouslySetInnerHTML"> {
+    /** Label text, shown beside or above the control. */
+    label: string;
+    /** The control's id, which the label and message ids derive from; defaults to the child element's own `id`, else a generated one. */
+    id?: string;
+    /** Adds the asterisk, `aria-required` on the control, and Chakra's `isRequired` for Chakra-based controls (which also sets native `required`). */
+    isRequired?: boolean;
+    /** Marks the control `aria-invalid` and shows `errorMessage` in place of `helperText`. */
+    error?: boolean;
+    /** Shown, and announced, only while `error` is true. */
+    errorMessage?: string;
+    /** Shown under the control whenever no error is showing. */
+    helperText?: string;
+    /** "vertical" (default) stacks label over control; "horizontal" puts the label in a left column from the `md` breakpoint up and stacks below it. */
+    layout?: FormFieldLayout;
+    /** Width of the label column in the horizontal layout; defaults to "12rem". */
+    labelWidth?: string;
+    /** One element, which receives the wiring as props, or a function that places it on the right element of a composite control. */
+    children: ReactElement | ((control: FormFieldControlProps) => ReactNode);
+}

package/dist/Components/FormField/FormFieldProps.js

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

package/dist/Components/Header/Header.d.ts

@@ -1,4 +1,7 @@
 import { FC } from "react";
+import type { ColorScale } from "../../Theme/tokens/types";
 import { HeaderProps } from "./HeaderProps";
+export declare const pickActiveAccent: (primary: ColorScale, canvas: string) => string;
+/** Sticky top bar with logo, page links, hover dropdowns and a collapsible mobile menu; colours default to the sidebar tokens. */
 declare const Header: FC<HeaderProps>;
 export default Header;