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

package/dist/esm/Components/Tag/Tag.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Box, Flex, Icon, Tag as ChakraTag, TagLabel, TagLeftIcon, TagRightIcon, Text } from "@chakra-ui/react";
+import { toneToColorScheme } from "../../Theme/tokens/builders/tone.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { DISABLED_OPACITY } from "../../Theme/tokens/primitives/states.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { dotColor } from "./tagDot.js";
+// NOTE: the label's pill radius would slice descenders, so clipping lives on a square child.
+const LabelText = ({ children, title }) => (_jsx(Box, { as: "span", title: title, display: "block", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", borderRadius: 0, px: "0.05em", mx: "-0.05em", children: children }));
+const ICON_SIZE = {
+    xs: "0.75rem",
+    sm: "0.875rem",
+    md: "1em",
+    lg: "1.1em",
+};
+const DOT_FONT_SIZE = {
+    xs: "xs",
+    sm: "xs-plus",
+    md: "sm",
+    lg: "0.9375rem",
+};
+const defaultRemoveLabel = (label) => `Remove ${label}`;
+/** Pill-shaped status/filter chip (Chakra Tag), not the raw Badge primitive; `ref` is the root element. */
+const Tag = forwardRef(function Tag({ label, colorScheme = "primary", tone, variant = "subtle", display = "chip", size = "sm", maxW, icon, leadingIcon, onTagClick, onIconClick, removeLabel = defaultRemoveLabel, isDisabled, "data-testid": testId, ...dataAttributes }, ref) {
+    const { colors } = useCustomTheme();
+    const isInteractive = !!onTagClick;
+    if (display === "dot") {
+        return (_jsxs(Flex, { ref: ref, as: isInteractive ? "button" : "span", ...(isInteractive ? { type: "button", disabled: isDisabled || undefined } : {}), display: "inline-flex", alignItems: "center", gap: 2, maxW: maxW, minW: 0, borderRadius: "sm", bg: "transparent", fontSize: DOT_FONT_SIZE[size], fontWeight: 500, color: colors.text[700], cursor: isInteractive ? "pointer" : undefined, opacity: isDisabled ? DISABLED_OPACITY : undefined, onClick: isInteractive && !isDisabled ? onTagClick : undefined, ...dataAttributes, "data-testid": testId, "data-display": "dot", "data-disabled": isDisabled || undefined, sx: isInteractive ? focusVisibleStyles(colors) : undefined, children: [_jsx(Box, { as: "span", "aria-hidden": true, boxSize: "0.5rem", flexShrink: 0, borderRadius: "full", bg: dotColor(colors, tone, colorScheme) }), _jsx(Text, { as: "span", noOfLines: 1, title: maxW ? label : undefined, children: label })] }));
+    }
+    return (_jsxs(ChakraTag, { ref: ref, size: size, variant: variant, colorScheme: tone ? toneToColorScheme[tone] : colorScheme, borderRadius: "full", maxW: maxW, ...dataAttributes, "data-testid": testId, "data-interactive": isInteractive || undefined, "data-disabled": isDisabled || undefined, "aria-disabled": isDisabled || undefined, children: [leadingIcon && _jsx(TagLeftIcon, { as: leadingIcon, boxSize: ICON_SIZE[size], "aria-hidden": true }), isInteractive ? (_jsx(TagLabel, { as: "button", type: "button", noOfLines: undefined, disabled: isDisabled || undefined, cursor: "pointer", onClick: isDisabled ? undefined : onTagClick, children: _jsx(LabelText, { title: maxW ? label : undefined, children: label }) })) : (_jsx(TagLabel, { noOfLines: undefined, children: _jsx(LabelText, { title: maxW ? label : undefined, children: label }) })), icon &&
+                (onIconClick ? (_jsx(Box, { as: "button", type: "button", "aria-label": typeof removeLabel === "function" ? removeLabel(label) : removeLabel, "data-testid": testId ? `${testId}-remove` : undefined, disabled: isDisabled || undefined, onClick: (e) => {
+                        e.stopPropagation();
+                        if (!isDisabled)
+                            onIconClick();
+                    }, display: "inline-flex", alignItems: "center", flexShrink: 0, ml: "0.25rem", borderRadius: "full", transition: transitionFor(["opacity"]), _hover: { opacity: 0.8 }, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, children: _jsx(Icon, { as: icon, boxSize: ICON_SIZE[size] }) })) : (_jsx(TagRightIcon, { as: icon, boxSize: ICON_SIZE[size], "aria-hidden": true })))] }));
+});
+Tag.displayName = "Tag";
+export default Tag;

package/dist/esm/Components/Tag/Tag.styles.js

@@ -0,0 +1,108 @@
+import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
+import { resolveSoftTone } from "../../Theme/tokens/builders/tone.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { DISABLED_OPACITY } from "../../Theme/tokens/primitives/states.js";
+import { fontSizes } from "../../Theme/tokens/primitives/typography.js";
+import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { focusVisibleRing } from "../../Theme/chakra/focusRing.styles.js";
+export const INTERACTIVE_HOVER = "&[data-interactive]:hover";
+export const INTERACTIVE_ACTIVE = "&[data-interactive]:active";
+const softTint = (scale, step) => "opacity" in scale ? scale.opacity[step] : scale[50];
+// NOTE: falls back to gray so an unknown/missing colorScheme key can never throw at render time.
+const SCALE_KEYS = [
+    "primary", "secondary", "tertiary", "gray", "red", "orange", "yellow",
+    "green", "teal", "blue", "cyan", "purple", "pink",
+];
+const isScaleKey = (key) => SCALE_KEYS.includes(key);
+const swatch = (theme, colorScheme = "primary") => isScaleKey(colorScheme) ? theme.colors[colorScheme] : theme.colors.gray;
+// Chakra Tag is a multipart component (container / label / closeButton); styling
+// is keyed under those parts, so it needs a multi-style config with `parts`.
+export const Tag = {
+    parts: ["container", "label", "closeButton"],
+    baseStyle: ({ theme }) => ({
+        container: {
+            borderRadius: "full",
+            fontWeight: 500,
+            lineHeight: 1.2,
+            display: "inline-flex",
+            alignItems: "center",
+            minW: 0,
+            boxSizing: "border-box",
+            transition: transitionFor(["background-color", "color", "border-color", "box-shadow"]),
+            ...reducedMotionSx(),
+            "&[data-interactive]": { cursor: "pointer" },
+            "&[data-disabled]": { opacity: DISABLED_OPACITY, cursor: "not-allowed", pointerEvents: "none" },
+        },
+        label: {
+            lineHeight: 1.45,
+            minW: 0,
+            borderRadius: "full",
+            overflow: "visible",
+            _focusVisible: focusVisibleRing(theme.colors),
+        },
+    }),
+    sizes: {
+        xs: {
+            container: { fontSize: fontSizes["xs-minus"], px: 2, h: "1.25rem" },
+        },
+        sm: {
+            container: { fontSize: fontSizes.xs, px: 2.5, h: "1.5rem" },
+        },
+        md: {
+            container: { fontSize: fontSizes["xs-plus"], px: 3, h: "1.75rem" },
+        },
+        lg: {
+            container: { fontSize: "0.9375rem", px: 3.5, h: "2rem" },
+        },
+    },
+    variants: {
+        solid: ({ theme, colorScheme = "primary" }) => {
+            const palette = theme.colors;
+            const c = swatch(theme, colorScheme);
+            const { fill, color, hoverFill, hoverColor, activeFill, activeColor } = resolveFilledSurface(c, palette);
+            return {
+                container: {
+                    bg: fill,
+                    color,
+                    [INTERACTIVE_HOVER]: { bg: hoverFill, color: hoverColor },
+                    [INTERACTIVE_ACTIVE]: { bg: activeFill, color: activeColor },
+                },
+            };
+        },
+        subtle: ({ theme, colorScheme = "primary" }) => {
+            const c = swatch(theme, colorScheme);
+            const { bg, fg, border, hoverBg, hoverBorder, activeBg, activeBorder } = resolveSoftTone(theme.colors, c);
+            return {
+                container: {
+                    bg,
+                    color: fg,
+                    boxShadow: `inset 0 0 0 ${BORDER_WIDTHS.hairline} ${border}`,
+                    [INTERACTIVE_HOVER]: { bg: hoverBg, boxShadow: `inset 0 0 0 ${BORDER_WIDTHS.hairline} ${hoverBorder}` },
+                    [INTERACTIVE_ACTIVE]: { bg: activeBg, boxShadow: `inset 0 0 0 ${BORDER_WIDTHS.hairline} ${activeBorder}` },
+                },
+            };
+        },
+        outline: ({ theme, colorScheme = "primary" }) => {
+            const c = swatch(theme, colorScheme);
+            const canvas = theme.colors.backgroundColor.main;
+            const ink = accentTextOnCanvas(c, canvas);
+            return {
+                container: {
+                    border: "none",
+                    boxShadow: `inset 0 0 0 ${BORDER_WIDTHS.hairline} ${ink}`,
+                    color: ink,
+                    bg: "transparent",
+                    [INTERACTIVE_HOVER]: { bg: softTint(c, 16) },
+                    [INTERACTIVE_ACTIVE]: { bg: softTint(c, 24) },
+                },
+            };
+        },
+    },
+    defaultProps: {
+        size: "sm",
+        variant: "subtle",
+        colorScheme: "primary",
+    },
+};

package/dist/esm/Components/Tag/TagProps.js

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

package/dist/esm/Components/Tag/tagDot.js

@@ -0,0 +1,24 @@
+import { liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
+import { toneToSemantic } from "../../Theme/tokens/builders/tone.js";
+import { scaleNamed } from "../../Theme/tokens/builders/paletteScale.js";
+import { warnUnknownColorScheme } from "../../Theme/chakra/paletteFromTheme.js";
+const SCALE_KEYS = [
+    "primary", "secondary", "tertiary", "gray", "red", "orange", "yellow",
+    "green", "teal", "blue", "cyan", "purple", "pink",
+];
+const themedScale = (colors, colorScheme) => {
+    const scale = SCALE_KEYS.includes(colorScheme) ? scaleNamed(colors, colorScheme) : undefined;
+    if (scale)
+        return scale;
+    warnUnknownColorScheme(colorScheme);
+    return colors.gray;
+};
+export const dotColor = (colors, tone, colorScheme) => {
+    const surfaces = [colors.background[50], colors.backgroundColor.main];
+    if (tone === "neutral")
+        return colors.textMuted;
+    const scale = tone
+        ? colors.semantic[toneToSemantic[tone]]
+        : themedScale(colors, colorScheme);
+    return surfaces.reduce((ink, surface) => liftToContrast(ink, surface), scale[500]);
+};

package/dist/esm/Components/TagInput/TagInput.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo, useRef, useState } from "react";
+import { Box, Flex, Input, VisuallyHidden, useMergeRefs } from "@chakra-ui/react";
+import { X } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes.js";
+import { placeholderInk } from "../../Theme/tokens/builders/placeholderInk.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { fieldFocusRing, fieldHoverBorder, getFieldStateStyles } from "../Common/fieldStyles.js";
+import { TextLabel } from "../Common/FormLabel.js";
+import FieldMessage from "../Common/FieldMessage.js";
+import { useFieldIds } from "../Common/useFieldIds.js";
+import { getSearchSelectSizeStyles } from "../SearchSelect/searchSelectSize.js";
+import Tag from "../Tag/Tag.js";
+import { addTags, hasSeparator, resolveTagInputLabels, splitEntries } from "./tagEntries.js";
+/** Free-text tag field that commits entries as removable chips; forwards its ref to the text input. */
+const TagInput = forwardRef(function TagInput({ value, onChange, validate, maxTags, allowDuplicates = false, addOnBlur = false, id, name, label, "aria-label": ariaLabel, placeholder, isRequired = false, isInformation, informationMessage, isDisabled = false, isReadOnly = false, error, errorMessage, helperText, size = DEFAULT_CONTROL_SIZE, labels, width = "100%", }, ref) {
+    const theme = useCustomTheme();
+    const s = getSearchSelectSizeStyles(size);
+    const inputRef = useRef(null);
+    const mergedRef = useMergeRefs(inputRef, ref);
+    const [draft, setDraft] = useState("");
+    const [rejection, setRejection] = useState(null);
+    const [announcement, setAnnouncement] = useState("");
+    const isInvalid = Boolean(error || rejection);
+    const shownError = rejection !== null && rejection !== void 0 ? rejection : errorMessage;
+    const ids = useFieldIds(id, { error: isInvalid, errorMessage: shownError, helperText });
+    const locked = isDisabled || isReadOnly;
+    const messages = useMemo(() => resolveTagInputLabels(labels), [labels]);
+    const commit = (text) => {
+        const result = addTags(value, splitEntries(text), { validate, maxTags, allowDuplicates, labels: messages });
+        if (result.added.length) {
+            onChange(result.tags);
+            setAnnouncement(messages.added(result.added));
+        }
+        setRejection(result.message);
+        setDraft(result.rejected.join(", "));
+    };
+    const removeAt = (index) => {
+        const removed = value[index];
+        onChange(value.filter((_, i) => i !== index));
+        setAnnouncement(messages.removed(removed));
+        setRejection(null);
+    };
+    const onKeyDown = (event) => {
+        if (locked)
+            return;
+        if (event.key === "Enter" || event.key === ",") {
+            if (event.key === "Enter" && !draft.trim())
+                return;
+            event.preventDefault();
+            commit(draft);
+        }
+        else if (event.key === "Backspace" && draft === "" && value.length > 0) {
+            removeAt(value.length - 1);
+        }
+    };
+    const onPaste = (event) => {
+        const pasted = event.clipboardData.getData("text");
+        if (locked || !hasSeparator(pasted))
+            return;
+        event.preventDefault();
+        const { selectionStart, selectionEnd } = event.currentTarget;
+        commit(`${draft.slice(0, selectionStart !== null && selectionStart !== void 0 ? selectionStart : draft.length)}${pasted}${draft.slice(selectionEnd !== null && selectionEnd !== void 0 ? selectionEnd : draft.length)}`);
+    };
+    const onInput = (event) => {
+        setDraft(event.target.value);
+        setRejection(null);
+    };
+    const onBlur = () => {
+        if (addOnBlur && !locked && draft.trim())
+            commit(draft);
+    };
+    const focusFromBox = (event) => {
+        var _a;
+        if (event.target !== event.currentTarget || isDisabled)
+            return;
+        event.preventDefault();
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    return (_jsxs(Box, { width: width, children: [label && (_jsx(TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsxs(Flex, { wrap: "wrap", gap: s.gap, align: "center", px: s.px, minH: s.minH, onMouseDown: focusFromBox, sx: {
+                    ...getFieldStateStyles(theme, { error: isInvalid, disabled: isDisabled }),
+                    ...reducedMotionSx(),
+                }, _hover: isDisabled || isInvalid ? undefined : { borderColor: fieldHoverBorder(theme.colors) }, _focusWithin: {
+                    borderColor: isInvalid ? theme.colors.semanticText.error : theme.colors.primary[500],
+                    boxShadow: fieldFocusRing(theme),
+                }, children: [value.map((tag, index) => (_jsx(Tag, { size: s.tagSize, colorScheme: "primary", label: tag, removeLabel: messages.remove, isDisabled: isDisabled, icon: locked ? undefined : X, onIconClick: locked
+                            ? undefined
+                            : () => {
+                                var _a;
+                                removeAt(index);
+                                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                            } }, `${index}:${tag}`))), _jsx(Input, { ref: mergedRef, type: "text", value: draft, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, isInvalid: isInvalid, ...ids.controlProps, "aria-label": label ? undefined : ariaLabel, size: size, variant: "unstyled", h: s.fieldHeight, minH: s.fieldHeight, fontSize: s.fieldFontSize, fontWeight: 400, color: theme.colors.text[900], flex: "1", minW: 0, _placeholder: { color: placeholderInk(theme.colors), opacity: 1 }, style: { backgroundColor: "transparent" }, onChange: onInput, onKeyDown: onKeyDown, onPaste: onPaste, onBlur: onBlur, placeholder: value.length === 0 ? placeholder : "" })] }), name && value.map((tag, index) => _jsx("input", { type: "hidden", name: name, value: tag }, `${index}:${tag}`)), _jsx(VisuallyHidden, { role: "status", "aria-live": "polite", position: "fixed", top: 0, left: 0, children: announcement }), _jsx(FieldMessage, { error: isInvalid, errorMessage: shownError, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+});
+TagInput.displayName = "TagInput";
+export default TagInput;

package/dist/esm/Components/TagInput/TagInputProps.js

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

package/dist/esm/Components/TagInput/tagEntries.js

@@ -0,0 +1,51 @@
+export const DEFAULT_TAG_INPUT_LABELS = {
+    maxTags: (max) => `You can add up to ${max} ${max === 1 ? "tag" : "tags"}.`,
+    duplicate: (entry) => `"${entry}" is already added.`,
+    invalid: (entry) => `"${entry}" is not valid.`,
+    added: (entries) => `Added ${entries.join(", ")}`,
+    removed: (entry) => `Removed ${entry}`,
+    remove: (entry) => `Remove ${entry}`,
+};
+export const resolveTagInputLabels = (labels) => ({
+    ...DEFAULT_TAG_INPUT_LABELS,
+    ...labels,
+});
+const SEPARATORS = /[,\r\n]/;
+export const hasSeparator = (text) => SEPARATORS.test(text);
+export const splitEntries = (text) => text
+    .split(SEPARATORS)
+    .map((entry) => entry.trim())
+    .filter(Boolean);
+const fold = (tag) => tag.toLocaleLowerCase();
+const rejection = (entry, tags, seen, rules) => {
+    const { validate, maxTags, allowDuplicates = false, labels } = rules;
+    if (maxTags !== undefined && tags.length >= maxTags)
+        return labels.maxTags(maxTags);
+    if (!allowDuplicates && seen.has(fold(entry)))
+        return labels.duplicate(entry);
+    const verdict = validate === null || validate === void 0 ? void 0 : validate(entry, tags);
+    if (verdict === false)
+        return labels.invalid(entry);
+    if (typeof verdict === "string" && verdict)
+        return verdict;
+    return null;
+};
+export const addTags = (current, entries, rules) => {
+    const tags = [...current];
+    const seen = new Set(tags.map(fold));
+    const added = [];
+    const rejected = [];
+    let message = null;
+    for (const entry of entries) {
+        const reason = rejection(entry, tags, seen, rules);
+        if (reason) {
+            rejected.push(entry);
+            message = message !== null && message !== void 0 ? message : reason;
+            continue;
+        }
+        tags.push(entry);
+        seen.add(fold(entry));
+        added.push(entry);
+    }
+    return { tags, added, rejected, message };
+};

package/dist/esm/Components/TimePicker/TimePicker.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
+import { Box, FormControl, HStack, Select } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes.js";
+import { TextLabel } from "../Common/FormLabel.js";
+import FieldMessage from "../Common/FieldMessage.js";
+import { useFieldIds } from "../Common/useFieldIds.js";
+import { fieldControlStyles } from "../Common/fieldStyles.js";
+import { HOURS_12, HOURS_24, atTime, displayHour, isTwelveHour, meridiemOf, minuteOptions, pad2, toHour24, } from "./timeParts.js";
+const EMPTY = "";
+/** Three inline selects (hour, minute, AM/PM or 24-hour) that emit a Date; `ref` is the hour select. */
+const TimePicker = forwardRef(function TimePicker({ value, date, onChange, onClear, use24Hour, dateFormat, minuteStep, baseDate, isDisabled, disabled: legacyDisabled, id, name, label, "aria-label": ariaLabel, isRequired = false, isInformation, informationMessage, error, errorMessage, helperText, size = DEFAULT_CONTROL_SIZE, width = "100%", }, ref) {
+    var _a;
+    const theme = useCustomTheme();
+    const ids = useFieldIds(id, { error, errorMessage, helperText });
+    const current = value !== undefined ? value : date !== null && date !== void 0 ? date : null;
+    const twelveHour = isTwelveHour(use24Hour, dateFormat);
+    const minutes = useMemo(() => minuteOptions(minuteStep, current ? current.getMinutes() : null), [minuteStep, current]);
+    const disabled = (_a = isDisabled !== null && isDisabled !== void 0 ? isDisabled : legacyDisabled) !== null && _a !== void 0 ? _a : false;
+    const selectSx = useMemo(() => fieldControlStyles(theme.colors), [theme.colors]);
+    const hour24 = current ? current.getHours() : null;
+    const commit = (nextHour24, nextMinute) => { var _a; return onChange(atTime((_a = current !== null && current !== void 0 ? current : baseDate) !== null && _a !== void 0 ? _a : new Date(), nextHour24, nextMinute)); };
+    const onHour = (event) => {
+        if (event.target.value === EMPTY)
+            return onClear === null || onClear === void 0 ? void 0 : onClear();
+        const picked = Number(event.target.value);
+        const next = twelveHour ? toHour24(picked, hour24 === null ? "AM" : meridiemOf(hour24)) : picked;
+        commit(next, current ? current.getMinutes() : 0);
+    };
+    const onMinute = (event) => event.target.value === EMPTY ? onClear === null || onClear === void 0 ? void 0 : onClear() : commit(hour24 !== null && hour24 !== void 0 ? hour24 : 0, Number(event.target.value));
+    const onMeridiem = (event) => {
+        if (event.target.value === EMPTY)
+            return onClear === null || onClear === void 0 ? void 0 : onClear();
+        const meridiem = event.target.value === "PM" ? "PM" : "AM";
+        commit(toHour24(hour24 === null ? 12 : displayHour(hour24, true), meridiem), current ? current.getMinutes() : 0);
+    };
+    const shared = {
+        flex: "1",
+        minW: 0,
+        size,
+        isDisabled: disabled,
+        sx: selectSx,
+        "aria-describedby": ids.describedBy,
+    };
+    const placeholder = current && !onClear ? null : (_jsx("option", { value: EMPTY, disabled: !current, children: "--" }));
+    return (_jsxs(FormControl, { isDisabled: disabled, isInvalid: error, isRequired: isRequired, width: width, "aria-labelledby": label ? ids.labelId : undefined, "aria-label": label ? undefined : ariaLabel, children: [label && (_jsx(Box, { id: ids.labelId, children: _jsx(TextLabel, { label: label, id: `${ids.inputId}-hour`, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage }) })), _jsxs(HStack, { spacing: 1.5, w: "100%", children: [_jsxs(Select, { ...shared, ref: ref, id: `${ids.inputId}-hour`, "aria-label": "Hour", value: hour24 === null ? EMPTY : displayHour(hour24, twelveHour), onChange: onHour, children: [placeholder, (twelveHour ? HOURS_12 : HOURS_24).map((hour) => (_jsx("option", { value: hour, children: pad2(hour) }, hour)))] }), _jsxs(Select, { ...shared, id: `${ids.inputId}-minute`, "aria-label": "Minute", value: current ? current.getMinutes() : EMPTY, onChange: onMinute, children: [placeholder, minutes.map((minute) => (_jsx("option", { value: minute, children: pad2(minute) }, minute)))] }), twelveHour && (_jsxs(Select, { ...shared, id: `${ids.inputId}-meridiem`, "aria-label": "AM or PM", value: hour24 === null ? EMPTY : meridiemOf(hour24), onChange: onMeridiem, children: [placeholder, _jsx("option", { value: "AM", children: "AM" }), _jsx("option", { value: "PM", children: "PM" })] }))] }), name && _jsx("input", { type: "hidden", name: name, value: current ? `${pad2(current.getHours())}:${pad2(current.getMinutes())}` : EMPTY }), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+});
+TimePicker.displayName = "TimePicker";
+export default TimePicker;

package/dist/esm/Components/TimePicker/TimePickerProps.js

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

package/dist/esm/Components/TimePicker/timeParts.js

@@ -0,0 +1,26 @@
+export const HOURS_12 = Array.from({ length: 12 }, (_, i) => i + 1);
+export const HOURS_24 = Array.from({ length: 24 }, (_, i) => i);
+const TWELVE_HOUR_FORMAT = /h.*a/i;
+export const pad2 = (value) => String(value).padStart(2, "0");
+export const isTwelveHour = (use24Hour, dateFormat) => {
+    if (use24Hour !== undefined)
+        return !use24Hour;
+    if (dateFormat !== undefined)
+        return TWELVE_HOUR_FORMAT.test(dateFormat);
+    return true;
+};
+export const minuteOptions = (step, current) => {
+    const size = Math.min(60, Math.max(1, Math.floor(step !== null && step !== void 0 ? step : 1) || 1));
+    const minutes = [];
+    for (let minute = 0; minute < 60; minute += size)
+        minutes.push(minute);
+    if (current !== null && !minutes.includes(current)) {
+        minutes.push(current);
+        minutes.sort((a, b) => a - b);
+    }
+    return minutes;
+};
+export const displayHour = (hour24, twelveHour) => twelveHour ? hour24 % 12 || 12 : hour24;
+export const meridiemOf = (hour24) => (hour24 >= 12 ? "PM" : "AM");
+export const toHour24 = (hour12, meridiem) => (hour12 % 12) + (meridiem === "PM" ? 12 : 0);
+export const atTime = (day, hour24, minute) => new Date(day.getFullYear(), day.getMonth(), day.getDate(), hour24, minute, 0, 0);