pixelize-design-library 2.4.2-beta.61 → 2.4.2-beta.62

package/dist/Components/Tabs/components/Tab.js

@@ -9,13 +9,14 @@ const react_2 = require("@chakra-ui/react");
 const TabsContext_1 = require("../TabsContext");
 const useTabAppearance_1 = require("../useTabAppearance");
 const CountBadge_1 = __importDefault(require("./CountBadge"));
-const Tab = ({ value, children, icon, count, isDisabled }) => {
+/** One role="tab" button inside a TabList; `ref` is that `<button>`. */
+const Tab = (0, react_1.forwardRef)(function Tab({ value, children, icon, count, isDisabled }, ref) {
     var _a;
     const ctx = (0, TabsContext_1.useTabsContext)();
-    const ref = (0, react_1.useRef)(null);
     const isSelected = ctx.selectedId === value;
     const isFocusTarget = ((_a = ctx.focusedId) !== null && _a !== void 0 ? _a : ctx.selectedId) === value;
     const { colors, canvas, scale, style, iconSize, iconSx, boxProps } = (0, useTabAppearance_1.useTabAppearance)(isSelected, isDisabled);
     return ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", ref: ref, role: "tab", id: (0, TabsContext_1.tabId)(ctx.baseId, value), "aria-selected": isSelected, "aria-disabled": isDisabled || undefined, "aria-controls": ctx.hasPanels ? (0, TabsContext_1.panelId)(ctx.baseId, value) : undefined, "data-value": value, tabIndex: isDisabled ? -1 : isFocusTarget ? 0 : -1, disabled: isDisabled, onClick: () => !isDisabled && ctx.select(value), onFocus: () => ctx.focusTab(value), ...boxProps, children: [icon ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", "aria-hidden": true, boxSize: `${iconSize}px`, sx: iconSx, children: icon })) : null, (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", children: children }), count !== undefined ? ((0, jsx_runtime_1.jsx)(CountBadge_1.default, { count: count, colors: colors, scale: scale, surface: ctx.variant === "solid" && isSelected ? style.bg : canvas, size: ctx.size })) : null] }));
-};
+});
+Tab.displayName = "Tab";
 exports.default = Tab;

package/dist/Components/Tabs/components/TabList.js

@@ -8,19 +8,34 @@ const scrollbar_1 = require("../../../Theme/tokens/builders/scrollbar");
 const TabsContext_1 = require("../TabsContext");
 const ENABLED_TAB_SELECTOR = '[role="tab"]:not([aria-disabled="true"])';
 const findByValue = (container, value) => Array.from(container.querySelectorAll("[data-value]")).find((node) => node.dataset.value === value);
+const overshoot = (start, end, boxStart, boxEnd) => start < boxStart ? start - boxStart : Math.max(0, end - boxEnd);
+const revealWithinList = (list, tab) => {
+    const box = list.getBoundingClientRect();
+    const rect = tab.getBoundingClientRect();
+    list.scrollLeft += overshoot(rect.left, rect.right, box.left, box.right);
+    list.scrollTop += overshoot(rect.top, rect.bottom, box.top, box.bottom);
+};
 const TabList = ({ children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const ctx = (0, TabsContext_1.useTabsContext)();
     const ref = (0, react_1.useRef)(null);
     const isVertical = ctx.orientation === "vertical";
     const isLine = ctx.variant === "line";
+    const revealed = (0, react_1.useRef)(false);
     (0, react_1.useEffect)(() => {
         var _a, _b;
         const activeId = (_a = ctx.focusedId) !== null && _a !== void 0 ? _a : ctx.selectedId;
         if (!activeId || !ref.current)
             return;
         const el = findByValue(ref.current, activeId);
-        (_b = el === null || el === void 0 ? void 0 : el.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(el, { block: "nearest", inline: "nearest" });
+        if (!el)
+            return;
+        if (!revealed.current) {
+            revealed.current = true;
+            revealWithinList(ref.current, el);
+            return;
+        }
+        (_b = el.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(el, { block: "nearest", inline: "nearest" });
     }, [ctx.focusedId, ctx.selectedId]);
     const focusAndMaybeSelect = (el) => {
         el.focus();

package/dist/Components/Tag/Tag.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import { TagProps } from "./TagProps";
-/** Renders a pill-shaped status/filter chip (Chakra Tag) — not interchangeable with the raw Badge primitive's static marker. */
-declare const Tag: React.FC<TagProps>;
+/** Pill-shaped status/filter chip (Chakra Tag), not the raw Badge primitive; `ref` is the root element. */
+declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLElement>>;
 export default Tag;

package/dist/Components/Tag/Tag.js

@@ -1,15 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("@chakra-ui/react");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
 const tone_1 = require("../../Theme/tokens/builders/tone");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
+const states_1 = require("../../Theme/tokens/primitives/states");
 const motion_2 = require("../../Theme/chakra/motion");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const tagDot_1 = require("./tagDot");
 // NOTE: the label's pill radius would slice descenders, so clipping lives on a square child.
-const LabelText = ({ children, title }) => ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", title: title, display: "block", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", borderRadius: 0, px: "0.05em", mx: "-0.05em", children: children }));
+const LabelText = ({ children, title }) => ((0, jsx_runtime_1.jsx)(react_2.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",
@@ -17,23 +19,24 @@ const ICON_SIZE = {
     lg: "1.1em",
 };
 const DOT_FONT_SIZE = {
-    xs: "0.75rem",
-    sm: "0.8125rem",
-    md: "0.875rem",
+    xs: "xs",
+    sm: "xs-plus",
+    md: "sm",
     lg: "0.9375rem",
 };
-/** Renders a pill-shaped status/filter chip (Chakra Tag) — not interchangeable with the raw Badge primitive's static marker. */
-const Tag = ({ label, colorScheme = "primary", tone, variant = "subtle", display = "chip", size = "sm", maxW, icon, leadingIcon, onTagClick, onIconClick, isDisabled, "data-testid": testId, }) => {
+/** Pill-shaped status/filter chip (Chakra Tag), not the raw Badge primitive; `ref` is the root element. */
+const Tag = (0, react_1.forwardRef)(function Tag({ label, colorScheme = "primary", tone, variant = "subtle", display = "chip", size = "sm", maxW, icon, leadingIcon, onTagClick, onIconClick, isDisabled, "data-testid": testId, }, ref) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const isInteractive = !!onTagClick;
     if (display === "dot") {
-        return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { 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 ? 0.5 : undefined, onClick: isInteractive && !isDisabled ? onTagClick : undefined, "data-testid": testId, "data-display": "dot", "data-disabled": isDisabled || undefined, sx: isInteractive ? (0, focusRing_styles_1.focusVisibleStyles)(colors) : undefined, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", "aria-hidden": true, boxSize: "0.5rem", flexShrink: 0, borderRadius: "full", bg: (0, tagDot_1.dotColor)(colors, tone, colorScheme) }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", noOfLines: 1, title: maxW ? label : undefined, children: label })] }));
+        return ((0, jsx_runtime_1.jsxs)(react_2.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 ? states_1.DISABLED_OPACITY : undefined, onClick: isInteractive && !isDisabled ? onTagClick : undefined, "data-testid": testId, "data-display": "dot", "data-disabled": isDisabled || undefined, sx: isInteractive ? (0, focusRing_styles_1.focusVisibleStyles)(colors) : undefined, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", "aria-hidden": true, boxSize: "0.5rem", flexShrink: 0, borderRadius: "full", bg: (0, tagDot_1.dotColor)(colors, tone, colorScheme) }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", noOfLines: 1, title: maxW ? label : undefined, children: label })] }));
     }
-    return ((0, jsx_runtime_1.jsxs)(react_1.Tag, { size: size, variant: variant, colorScheme: tone ? tone_1.toneToColorScheme[tone] : colorScheme, borderRadius: "full", maxW: maxW, "data-testid": testId, "data-interactive": isInteractive || undefined, "data-disabled": isDisabled || undefined, "aria-disabled": isDisabled || undefined, children: [leadingIcon && (0, jsx_runtime_1.jsx)(react_1.TagLeftIcon, { as: leadingIcon, boxSize: ICON_SIZE[size], "aria-hidden": true }), isInteractive ? ((0, jsx_runtime_1.jsx)(react_1.TagLabel, { as: "button", type: "button", noOfLines: undefined, disabled: isDisabled || undefined, cursor: "pointer", onClick: isDisabled ? undefined : onTagClick, children: (0, jsx_runtime_1.jsx)(LabelText, { title: maxW ? label : undefined, children: label }) })) : ((0, jsx_runtime_1.jsx)(react_1.TagLabel, { noOfLines: undefined, children: (0, jsx_runtime_1.jsx)(LabelText, { title: maxW ? label : undefined, children: label }) })), icon &&
-                (onIconClick ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", "aria-label": `Remove ${label}`, "data-testid": testId ? `${testId}-remove` : undefined, disabled: isDisabled || undefined, onClick: (e) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Tag, { ref: ref, size: size, variant: variant, colorScheme: tone ? tone_1.toneToColorScheme[tone] : colorScheme, borderRadius: "full", maxW: maxW, "data-testid": testId, "data-interactive": isInteractive || undefined, "data-disabled": isDisabled || undefined, "aria-disabled": isDisabled || undefined, children: [leadingIcon && (0, jsx_runtime_1.jsx)(react_2.TagLeftIcon, { as: leadingIcon, boxSize: ICON_SIZE[size], "aria-hidden": true }), isInteractive ? ((0, jsx_runtime_1.jsx)(react_2.TagLabel, { as: "button", type: "button", noOfLines: undefined, disabled: isDisabled || undefined, cursor: "pointer", onClick: isDisabled ? undefined : onTagClick, children: (0, jsx_runtime_1.jsx)(LabelText, { title: maxW ? label : undefined, children: label }) })) : ((0, jsx_runtime_1.jsx)(react_2.TagLabel, { noOfLines: undefined, children: (0, jsx_runtime_1.jsx)(LabelText, { title: maxW ? label : undefined, children: label }) })), icon &&
+                (onIconClick ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-label": `Remove ${label}`, "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: (0, motion_1.transitionFor)(["opacity"]), _hover: { opacity: 0.8 }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, children: (0, jsx_runtime_1.jsx)(react_1.Icon, { as: icon, boxSize: ICON_SIZE[size] }) })) : ((0, jsx_runtime_1.jsx)(react_1.TagRightIcon, { as: icon, boxSize: ICON_SIZE[size], "aria-hidden": true })))] }));
-};
+                    }, display: "inline-flex", alignItems: "center", flexShrink: 0, ml: "0.25rem", borderRadius: "full", transition: (0, motion_1.transitionFor)(["opacity"]), _hover: { opacity: 0.8 }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, children: (0, jsx_runtime_1.jsx)(react_2.Icon, { as: icon, boxSize: ICON_SIZE[size] }) })) : ((0, jsx_runtime_1.jsx)(react_2.TagRightIcon, { as: icon, boxSize: ICON_SIZE[size], "aria-hidden": true })))] }));
+});
+Tag.displayName = "Tag";
 exports.default = Tag;

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

@@ -5,6 +5,8 @@ const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
 const tone_1 = require("../../Theme/tokens/builders/tone");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
+const states_1 = require("../../Theme/tokens/primitives/states");
+const typography_1 = require("../../Theme/tokens/primitives/typography");
 const motion_2 = require("../../Theme/chakra/motion");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 exports.INTERACTIVE_HOVER = "&[data-interactive]:hover";
@@ -33,7 +35,7 @@ exports.Tag = {
             transition: (0, motion_1.transitionFor)(["background-color", "color", "border-color", "box-shadow"]),
             ...(0, motion_2.reducedMotionSx)(),
             "&[data-interactive]": { cursor: "pointer" },
-            "&[data-disabled]": { opacity: 0.5, cursor: "not-allowed", pointerEvents: "none" },
+            "&[data-disabled]": { opacity: states_1.DISABLED_OPACITY, cursor: "not-allowed", pointerEvents: "none" },
         },
         label: {
             lineHeight: 1.45,
@@ -45,13 +47,13 @@ exports.Tag = {
     }),
     sizes: {
         xs: {
-            container: { fontSize: "0.6875rem", px: 2, h: "1.25rem" },
+            container: { fontSize: typography_1.fontSizes["xs-minus"], px: 2, h: "1.25rem" },
         },
         sm: {
-            container: { fontSize: "0.75rem", px: 2.5, h: "1.5rem" },
+            container: { fontSize: typography_1.fontSizes.xs, px: 2.5, h: "1.5rem" },
         },
         md: {
-            container: { fontSize: "0.8125rem", px: 3, h: "1.75rem" },
+            container: { fontSize: typography_1.fontSizes["xs-plus"], px: 3, h: "1.75rem" },
         },
         lg: {
             container: { fontSize: "0.9375rem", px: 3.5, h: "2rem" },

package/dist/Components/TagInput/TagInput.d.ts

@@ -0,0 +1,3 @@
+import type { TagInputProps } from "./TagInputProps";
+declare const TagInput: import("react").ForwardRefExoticComponent<TagInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export default TagInput;

package/dist/Components/TagInput/TagInput.js

@@ -0,0 +1,99 @@
+"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 useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+const placeholderInk_1 = require("../../Theme/tokens/builders/placeholderInk");
+const motion_1 = require("../../Theme/chakra/motion");
+const fieldStyles_1 = require("../Common/fieldStyles");
+const FormLabel_1 = require("../Common/FormLabel");
+const FieldMessage_1 = __importDefault(require("../Common/FieldMessage"));
+const useFieldIds_1 = require("../Common/useFieldIds");
+const searchSelectSize_1 = require("../SearchSelect/searchSelectSize");
+const Tag_1 = __importDefault(require("../Tag/Tag"));
+const tagEntries_1 = require("./tagEntries");
+const TagInput = (0, react_1.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 = controlSizes_1.DEFAULT_CONTROL_SIZE, width = "100%", }, ref) {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const s = (0, searchSelectSize_1.getSearchSelectSizeStyles)(size);
+    const inputRef = (0, react_1.useRef)(null);
+    const mergedRef = (0, react_2.useMergeRefs)(inputRef, ref);
+    const [draft, setDraft] = (0, react_1.useState)("");
+    const [rejection, setRejection] = (0, react_1.useState)(null);
+    const [announcement, setAnnouncement] = (0, react_1.useState)("");
+    const isInvalid = Boolean(error || rejection);
+    const shownError = rejection !== null && rejection !== void 0 ? rejection : errorMessage;
+    const ids = (0, useFieldIds_1.useFieldIds)(id, { error: isInvalid, errorMessage: shownError, helperText });
+    const locked = isDisabled || isReadOnly;
+    const commit = (text) => {
+        const result = (0, tagEntries_1.addTags)(value, (0, tagEntries_1.splitEntries)(text), { validate, maxTags, allowDuplicates });
+        if (result.added.length) {
+            onChange(result.tags);
+            setAnnouncement(`Added ${result.added.join(", ")}`);
+        }
+        setRejection(result.message);
+        setDraft(result.rejected.join(", "));
+    };
+    const removeAt = (index) => {
+        const removed = value[index];
+        onChange(value.filter((_, i) => i !== index));
+        setAnnouncement(`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 || !(0, tagEntries_1.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 ((0, jsx_runtime_1.jsxs)(react_2.Box, { width: width, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsxs)(react_2.Flex, { wrap: "wrap", gap: s.gap, align: "center", px: s.px, minH: s.minH, onMouseDown: focusFromBox, sx: {
+                    ...(0, fieldStyles_1.getFieldStateStyles)(theme, { error: isInvalid, disabled: isDisabled }),
+                    ...(0, motion_1.reducedMotionSx)(),
+                }, _hover: isDisabled || isInvalid ? undefined : { borderColor: (0, fieldStyles_1.fieldHoverBorder)(theme.colors) }, _focusWithin: {
+                    borderColor: isInvalid ? theme.colors.semanticText.error : theme.colors.primary[500],
+                    boxShadow: (0, fieldStyles_1.fieldFocusRing)(theme),
+                }, children: [value.map((tag, index) => ((0, jsx_runtime_1.jsx)(Tag_1.default, { size: s.tagSize, colorScheme: "primary", label: tag, isDisabled: isDisabled, icon: locked ? undefined : lucide_react_1.X, onIconClick: locked
+                            ? undefined
+                            : () => {
+                                var _a;
+                                removeAt(index);
+                                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                            } }, `${index}:${tag}`))), (0, jsx_runtime_1.jsx)(react_2.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: (0, placeholderInk_1.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) => (0, jsx_runtime_1.jsx)("input", { type: "hidden", name: name, value: tag }, `${index}:${tag}`)), (0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { role: "status", "aria-live": "polite", position: "fixed", top: 0, left: 0, children: announcement }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: isInvalid, errorMessage: shownError, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+});
+TagInput.displayName = "TagInput";
+exports.default = TagInput;

package/dist/Components/TagInput/TagInputProps.d.ts

@@ -0,0 +1,46 @@
+import type { ControlSize } from "../../Theme/tokens/primitives/controlSizes";
+/** `false` or a non-empty string rejects `tag` (the string is shown as the message); `true` or `undefined` accepts. */
+export type TagValidator = (tag: string, tags: readonly string[]) => boolean | string | undefined;
+/** Free-text chips: Enter or comma adds, Backspace on an empty input removes the last; `ref` is the text `<input>`. */
+export type TagInputProps = {
+    /** The committed tags, in order. Controlled: the field never edits it itself. */
+    value: string[];
+    /** Called with the next list after an add or a remove. */
+    onChange: (tags: string[]) => void;
+    /** Runs on each trimmed entry before it is added; a rejected entry stays in the input with its message. */
+    validate?: TagValidator;
+    /** Cap on tags; adding past it is rejected with a message. */
+    maxTags?: number;
+    /** Allows the same tag twice. Defaults to false, compared case-insensitively. */
+    allowDuplicates?: boolean;
+    /** Also commits the typed text when focus leaves the input. Defaults to false. */
+    addOnBlur?: boolean;
+    /** DOM id of the text input; the label's `for` and the message ids derive from it. Generated when omitted. */
+    id?: string;
+    /** Submits each tag as its own hidden input with this name; the half-typed text is never submitted. */
+    name?: string;
+    label?: string;
+    /** Names the input when there is no visible `label`. */
+    "aria-label"?: string;
+    /** Shown only while there are no tags. */
+    placeholder?: string;
+    /** Label asterisk plus native `required` on the input. */
+    isRequired?: boolean;
+    /** Shows an info icon beside the label; needs both `label` and `informationMessage`. */
+    isInformation?: boolean;
+    informationMessage?: string;
+    /** Dims the chips, disables the input and drops the remove buttons. */
+    isDisabled?: boolean;
+    /** Keeps the input focusable but drops typing and the remove buttons. */
+    isReadOnly?: boolean;
+    /** Error border and `aria-invalid`; swaps `helperText` for `errorMessage`. A rejected entry sets this too. */
+    error?: boolean;
+    /** Shown while `error` is true; a rejected entry's own message wins until the input changes. */
+    errorMessage?: string;
+    /** Shown under the field when there is no error; linked via `aria-describedby`. */
+    helperText?: string;
+    /** Field height on the control scale: xs 32, sm 38, md 40, lg 48px; grows a row at a time. Defaults to `sm`. */
+    size?: ControlSize;
+    /** Width of the whole field; defaults to "100%". */
+    width?: string | number;
+};

package/dist/Components/TagInput/TagInputProps.js

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

package/dist/Components/TagInput/tagEntries.d.ts

@@ -0,0 +1,15 @@
+import type { TagValidator } from "./TagInputProps";
+export type AddRules = {
+    validate?: TagValidator;
+    maxTags?: number;
+    allowDuplicates?: boolean;
+};
+export type AddResult = {
+    tags: string[];
+    added: string[];
+    rejected: string[];
+    message: string | null;
+};
+export declare const hasSeparator: (text: string) => boolean;
+export declare const splitEntries: (text: string) => string[];
+export declare const addTags: (current: readonly string[], entries: readonly string[], rules: AddRules) => AddResult;

package/dist/Components/TagInput/tagEntries.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addTags = exports.splitEntries = exports.hasSeparator = void 0;
+const SEPARATORS = /[,\r\n]/;
+const hasSeparator = (text) => SEPARATORS.test(text);
+exports.hasSeparator = hasSeparator;
+const splitEntries = (text) => text
+    .split(SEPARATORS)
+    .map((entry) => entry.trim())
+    .filter(Boolean);
+exports.splitEntries = splitEntries;
+const fold = (tag) => tag.toLocaleLowerCase();
+const rejection = (entry, tags, seen, rules) => {
+    const { validate, maxTags, allowDuplicates = false } = rules;
+    if (maxTags !== undefined && tags.length >= maxTags)
+        return `You can add up to ${maxTags} ${maxTags === 1 ? "tag" : "tags"}.`;
+    if (!allowDuplicates && seen.has(fold(entry)))
+        return `"${entry}" is already added.`;
+    const verdict = validate === null || validate === void 0 ? void 0 : validate(entry, tags);
+    if (verdict === false)
+        return `"${entry}" is not valid.`;
+    if (typeof verdict === "string" && verdict)
+        return verdict;
+    return null;
+};
+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 };
+};
+exports.addTags = addTags;

package/dist/Components/TimePicker/TimePicker.d.ts

@@ -0,0 +1,3 @@
+import type { TimePickerProps } from "./TimePickerProps";
+declare const TimePicker: import("react").ForwardRefExoticComponent<TimePickerProps & import("react").RefAttributes<HTMLSelectElement>>;
+export default TimePicker;

package/dist/Components/TimePicker/TimePicker.js

@@ -0,0 +1,50 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+const FormLabel_1 = require("../Common/FormLabel");
+const FieldMessage_1 = __importDefault(require("../Common/FieldMessage"));
+const useFieldIds_1 = require("../Common/useFieldIds");
+const fieldStyles_1 = require("../Common/fieldStyles");
+const timeParts_1 = require("./timeParts");
+const EMPTY = "";
+const TimePicker = (0, react_1.forwardRef)(function TimePicker({ value, date, onChange, use24Hour, dateFormat, minuteStep, baseDate, isDisabled, disabled: legacyDisabled, id, name, label, "aria-label": ariaLabel, isRequired = false, isInformation, informationMessage, error, errorMessage, helperText, size = controlSizes_1.DEFAULT_CONTROL_SIZE, width = "100%", }, ref) {
+    var _a;
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const ids = (0, useFieldIds_1.useFieldIds)(id, { error, errorMessage, helperText });
+    const current = value !== undefined ? value : date !== null && date !== void 0 ? date : null;
+    const twelveHour = (0, timeParts_1.isTwelveHour)(use24Hour, dateFormat);
+    const minutes = (0, react_1.useMemo)(() => (0, timeParts_1.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 = (0, react_1.useMemo)(() => (0, fieldStyles_1.fieldControlStyles)(theme.colors), [theme.colors]);
+    const hour24 = current ? current.getHours() : null;
+    const commit = (nextHour24, nextMinute) => { var _a; return onChange((0, timeParts_1.atTime)((_a = current !== null && current !== void 0 ? current : baseDate) !== null && _a !== void 0 ? _a : new Date(), nextHour24, nextMinute)); };
+    const onHour = (event) => {
+        const picked = Number(event.target.value);
+        const next = twelveHour ? (0, timeParts_1.toHour24)(picked, hour24 === null ? "AM" : (0, timeParts_1.meridiemOf)(hour24)) : picked;
+        commit(next, current ? current.getMinutes() : 0);
+    };
+    const onMinute = (event) => commit(hour24 !== null && hour24 !== void 0 ? hour24 : 0, Number(event.target.value));
+    const onMeridiem = (event) => {
+        const meridiem = event.target.value === "PM" ? "PM" : "AM";
+        commit((0, timeParts_1.toHour24)(hour24 === null ? 12 : (0, timeParts_1.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 ? null : ((0, jsx_runtime_1.jsx)("option", { value: EMPTY, disabled: true, children: "--" }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { isDisabled: disabled, isInvalid: error, isRequired: isRequired, width: width, "aria-labelledby": label ? ids.labelId : undefined, "aria-label": label ? undefined : ariaLabel, children: [label && ((0, jsx_runtime_1.jsx)(react_2.Box, { id: ids.labelId, children: (0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: `${ids.inputId}-hour`, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage }) })), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1.5, w: "100%", children: [(0, jsx_runtime_1.jsxs)(react_2.Select, { ...shared, ref: ref, id: `${ids.inputId}-hour`, "aria-label": "Hour", value: hour24 === null ? EMPTY : (0, timeParts_1.displayHour)(hour24, twelveHour), onChange: onHour, children: [placeholder, (twelveHour ? timeParts_1.HOURS_12 : timeParts_1.HOURS_24).map((hour) => ((0, jsx_runtime_1.jsx)("option", { value: hour, children: (0, timeParts_1.pad2)(hour) }, hour)))] }), (0, jsx_runtime_1.jsxs)(react_2.Select, { ...shared, id: `${ids.inputId}-minute`, "aria-label": "Minute", value: current ? current.getMinutes() : EMPTY, onChange: onMinute, children: [placeholder, minutes.map((minute) => ((0, jsx_runtime_1.jsx)("option", { value: minute, children: (0, timeParts_1.pad2)(minute) }, minute)))] }), twelveHour && ((0, jsx_runtime_1.jsxs)(react_2.Select, { ...shared, id: `${ids.inputId}-meridiem`, "aria-label": "AM or PM", value: hour24 === null ? EMPTY : (0, timeParts_1.meridiemOf)(hour24), onChange: onMeridiem, children: [placeholder, (0, jsx_runtime_1.jsx)("option", { value: "AM", children: "AM" }), (0, jsx_runtime_1.jsx)("option", { value: "PM", children: "PM" })] }))] }), name && (0, jsx_runtime_1.jsx)("input", { type: "hidden", name: name, value: current ? `${(0, timeParts_1.pad2)(current.getHours())}:${(0, timeParts_1.pad2)(current.getMinutes())}` : EMPTY }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+});
+TimePicker.displayName = "TimePicker";
+exports.default = TimePicker;

package/dist/Components/TimePicker/TimePickerProps.d.ts

@@ -0,0 +1,44 @@
+import type { ControlSize } from "../../Theme/tokens/primitives/controlSizes";
+/** Inline hour, minute and AM/PM selects with the field label and message row; `ref` is the hour `<select>`. */
+export type TimePickerProps = {
+    /** Controlled time; `null` or omitted shows "--" in every select until one is picked. */
+    value?: Date | null;
+    /** @deprecated Use `value`; kept so the old DatePicker `TimePickerProps` shape still fits. `value` wins. */
+    date?: Date;
+    /** Fires with a Date on the day of `value` (else `baseDate`, else today) at the picked time, seconds zeroed. */
+    onChange: (date: Date) => void;
+    /** 24-hour selects instead of 12-hour plus AM/PM. Defaults to false. */
+    use24Hour?: boolean;
+    /** @deprecated Use `use24Hour`; only read to pick 12h (`h` then `a`, e.g. `hh:mm a`) or 24h. `use24Hour` wins. */
+    dateFormat?: string;
+    /** Minutes offered, floored and clamped to 1-60; a `value` off the step is still listed. Defaults to 1. */
+    minuteStep?: number;
+    /** Day a picked time lands on while `value` is empty; defaults to today. */
+    baseDate?: Date;
+    isDisabled?: boolean;
+    /** @deprecated Use `isDisabled`; `isDisabled` wins when both are set. */
+    disabled?: boolean;
+    /** Base id: the selects get `<id>-hour`, `<id>-minute`, `<id>-meridiem`; generated when omitted. */
+    id?: string;
+    /** Submits the time as `HH:mm` (24-hour) through a hidden input, or "" while empty. */
+    name?: string;
+    /** Visible label; names the group, and clicking it focuses the hour select. */
+    label?: string;
+    /** Names the group when there is no visible `label`. */
+    "aria-label"?: string;
+    /** Label asterisk plus native `required` on every select. */
+    isRequired?: boolean;
+    /** Shows an info icon beside the label; needs both `label` and `informationMessage`. */
+    isInformation?: boolean;
+    informationMessage?: string;
+    /** Error border and `aria-invalid` on every select; swaps `helperText` for `errorMessage`. */
+    error?: boolean;
+    /** Shown while `error` is true. */
+    errorMessage?: string;
+    /** Shown under the selects when there is no error; linked via `aria-describedby`. */
+    helperText?: string;
+    /** Control-scale height of each select: xs 32, sm 38, md 40, lg 48px. Defaults to `sm`, as in DatePicker. */
+    size?: ControlSize;
+    /** Width of the whole field; defaults to "100%". */
+    width?: string | number;
+};

package/dist/Components/TimePicker/TimePickerProps.js

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

package/dist/Components/TimePicker/timeParts.d.ts

@@ -0,0 +1,10 @@
+export type Meridiem = "AM" | "PM";
+export declare const HOURS_12: readonly number[];
+export declare const HOURS_24: readonly number[];
+export declare const pad2: (value: number) => string;
+export declare const isTwelveHour: (use24Hour: boolean | undefined, dateFormat: string | undefined) => boolean;
+export declare const minuteOptions: (step: number | undefined, current: number | null) => number[];
+export declare const displayHour: (hour24: number, twelveHour: boolean) => number;
+export declare const meridiemOf: (hour24: number) => Meridiem;
+export declare const toHour24: (hour12: number, meridiem: Meridiem) => number;
+export declare const atTime: (day: Date, hour24: number, minute: number) => Date;

package/dist/Components/TimePicker/timeParts.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.atTime = exports.toHour24 = exports.meridiemOf = exports.displayHour = exports.minuteOptions = exports.isTwelveHour = exports.pad2 = exports.HOURS_24 = exports.HOURS_12 = void 0;
+exports.HOURS_12 = Array.from({ length: 12 }, (_, i) => i + 1);
+exports.HOURS_24 = Array.from({ length: 24 }, (_, i) => i);
+const TWELVE_HOUR_FORMAT = /h.*a/i;
+const pad2 = (value) => String(value).padStart(2, "0");
+exports.pad2 = pad2;
+const isTwelveHour = (use24Hour, dateFormat) => {
+    if (use24Hour !== undefined)
+        return !use24Hour;
+    if (dateFormat !== undefined)
+        return TWELVE_HOUR_FORMAT.test(dateFormat);
+    return true;
+};
+exports.isTwelveHour = isTwelveHour;
+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;
+};
+exports.minuteOptions = minuteOptions;
+const displayHour = (hour24, twelveHour) => twelveHour ? hour24 % 12 || 12 : hour24;
+exports.displayHour = displayHour;
+const meridiemOf = (hour24) => (hour24 >= 12 ? "PM" : "AM");
+exports.meridiemOf = meridiemOf;
+const toHour24 = (hour12, meridiem) => (hour12 % 12) + (meridiem === "PM" ? 12 : 0);
+exports.toHour24 = toHour24;
+const atTime = (day, hour24, minute) => new Date(day.getFullYear(), day.getMonth(), day.getDate(), hour24, minute, 0, 0);
+exports.atTime = atTime;