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

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

@@ -1,10 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tag = void 0;
+exports.Tag = exports.INTERACTIVE_ACTIVE = exports.INTERACTIVE_HOVER = void 0;
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
-// Resolve a colorScheme key to a numeric swatch from the theme. All supported
-// colorScheme values (brand + global scales) expose a 50-900 scale; fall back to
-// gray so an unknown/missing key can never throw at render time.
+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 borderWidths_1 = require("../../Theme/tokens/primitives/borderWidths");
+const motion_2 = require("../../Theme/chakra/motion");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+exports.INTERACTIVE_HOVER = "&[data-interactive]:hover";
+exports.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",
@@ -15,82 +24,88 @@ const swatch = (theme, colorScheme = "primary") => isScaleKey(colorScheme) ? the
 // is keyed under those parts, so it needs a multi-style config with `parts`.
 exports.Tag = {
     parts: ["container", "label", "closeButton"],
-    baseStyle: {
+    baseStyle: ({ theme }) => ({
         container: {
             borderRadius: "full",
-            fontWeight: 600,
+            fontWeight: 500,
             lineHeight: 1.2,
             display: "inline-flex",
             alignItems: "center",
-            transition: "background 0.15s ease, color 0.15s ease, border-color 0.15s ease",
+            minW: 0,
+            boxSizing: "border-box",
+            transition: (0, motion_1.transitionFor)(["background-color", "color", "border-color", "box-shadow"]),
+            ...(0, motion_2.reducedMotionSx)(),
+            "&[data-interactive]": { cursor: "pointer" },
+            "&[data-disabled]": { opacity: states_1.DISABLED_OPACITY, cursor: "not-allowed", pointerEvents: "none" },
         },
-    },
+        label: {
+            lineHeight: 1.45,
+            minW: 0,
+            borderRadius: "full",
+            overflow: "visible",
+            _focusVisible: (0, focusRing_styles_1.focusVisibleRing)(theme.colors),
+        },
+    }),
     sizes: {
         xs: {
-            container: { fontSize: "0.6875rem", px: 2, py: 0.5, minH: "1.25rem" },
+            container: { fontSize: typography_1.fontSizes["xs-minus"], px: 2, h: "1.25rem" },
         },
         sm: {
-            container: { fontSize: "0.75rem", px: 2.5, py: 1, minH: "1.5rem" },
+            container: { fontSize: typography_1.fontSizes.xs, px: 2.5, h: "1.5rem" },
         },
         md: {
-            container: { fontSize: "0.8125rem", px: 3, py: 1, minH: "1.75rem" },
+            container: { fontSize: typography_1.fontSizes["xs-plus"], px: 3, h: "1.75rem" },
         },
         lg: {
-            container: { fontSize: "0.9375rem", px: 3.5, py: 1.5, minH: "2rem" },
+            container: { fontSize: "0.9375rem", px: 3.5, h: "2rem" },
         },
     },
     variants: {
         solid: ({ theme, colorScheme = "primary" }) => {
+            const palette = theme.colors;
             const c = swatch(theme, colorScheme);
-            const { white, black } = theme.colors;
-            const fill = c[500];
-            const hoverFill = c[600];
-            const activeFill = c[700];
+            const { fill, color, hoverFill, hoverColor, activeFill, activeColor } = (0, filledSurface_1.resolveFilledSurface)(c, palette);
             return {
                 container: {
                     bg: fill,
-                    color: (0, accentText_1.onFilled)(fill, white, black),
-                    _hover: { bg: hoverFill, color: (0, accentText_1.onFilled)(hoverFill, white, black) },
-                    _active: { bg: activeFill, color: (0, accentText_1.onFilled)(activeFill, white, black) },
+                    color,
+                    [exports.INTERACTIVE_HOVER]: { bg: hoverFill, color: hoverColor },
+                    [exports.INTERACTIVE_ACTIVE]: { bg: activeFill, color: activeColor },
                 },
             };
         },
         subtle: ({ theme, colorScheme = "primary" }) => {
             const c = swatch(theme, colorScheme);
-            const bg = c[50];
+            const { bg, fg, border, hoverBg, hoverBorder, activeBg, activeBorder } = (0, tone_1.resolveSoftTone)(theme.colors, c);
             return {
                 container: {
                     bg,
-                    // A fixed [700] fails AA against [50] for some hues (orange 3.89, borderline green
-                    // 4.39) — walk the scale's own rungs against this specific tint instead.
-                    color: (0, accentText_1.accentTextOnCanvas)(c, bg),
-                    border: "0.063rem solid",
-                    borderColor: c[100],
-                    _hover: { bg: c[100] },
-                    _active: { bg: c[200] },
+                    color: fg,
+                    boxShadow: `inset 0 0 0 ${borderWidths_1.BORDER_WIDTHS.hairline} ${border}`,
+                    [exports.INTERACTIVE_HOVER]: { bg: hoverBg, boxShadow: `inset 0 0 0 ${borderWidths_1.BORDER_WIDTHS.hairline} ${hoverBorder}` },
+                    [exports.INTERACTIVE_ACTIVE]: { bg: activeBg, boxShadow: `inset 0 0 0 ${borderWidths_1.BORDER_WIDTHS.hairline} ${activeBorder}` },
                 },
             };
         },
         outline: ({ theme, colorScheme = "primary" }) => {
             const c = swatch(theme, colorScheme);
             const canvas = theme.colors.backgroundColor.main;
+            const ink = (0, accentText_1.accentTextOnCanvas)(c, canvas);
             return {
                 container: {
-                    border: "0.094rem solid",
-                    borderColor: c[500],
-                    // Text sits directly on the page canvas here — a fixed [600] failed AA for several
-                    // hues (orange 2.51, green 2.94, red 4.09); use the canvas-text helper instead.
-                    color: (0, accentText_1.accentTextOnCanvas)(c, canvas),
+                    border: "none",
+                    boxShadow: `inset 0 0 0 ${borderWidths_1.BORDER_WIDTHS.hairline} ${ink}`,
+                    color: ink,
                     bg: "transparent",
-                    _hover: { bg: c[50] },
-                    _active: { bg: c[100] },
+                    [exports.INTERACTIVE_HOVER]: { bg: softTint(c, 16) },
+                    [exports.INTERACTIVE_ACTIVE]: { bg: softTint(c, 24) },
                 },
             };
         },
     },
     defaultProps: {
-        size: "md",
-        variant: "solid",
+        size: "sm",
+        variant: "subtle",
         colorScheme: "primary",
     },
 };

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

@@ -1,13 +1,43 @@
 import { ElementType } from "react";
+import type { BoxProps } from "@chakra-ui/react";
+import type { DataAttributes } from "../Common/dataAttributes";
+import type { Tone } from "../../Theme/tokens/builders/tone";
+/** Category colour, not status — for a status chip use `tone`, which wins when both are set. */
 export type TagColorScheme = "primary" | "secondary" | "tertiary" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink";
+/** Tag size; also scales any icon via ICON_SIZE. Defaults to "sm". */
 export type TagSize = "xs" | "sm" | "md" | "lg";
+/** "solid" for emphasis, "outline" on dense/colored surfaces, "subtle" (default) for everyday chips. */
 export type TagVariant = "solid" | "outline" | "subtle";
-export interface TagProps {
+/** "chip" is the filled/outlined pill; "dot" is a tone dot beside plain text. */
+export type TagDisplay = "chip" | "dot";
+/** Props for the pill-shaped status/filter Tag chip — see Tag.tsx for interactive/icon behavior. */
+export interface TagProps extends DataAttributes {
+    /** Chip text; truncates with an ellipsis when `maxW` is set. */
     label: string;
+    /** No effect without icon — turns it into a remove button and stops the click from bubbling to onTagClick. */
     onIconClick?: () => void;
+    /** Accessible name of the remove button: a string as is, or a function of the label. Defaults to `Remove ${label}`. */
+    removeLabel?: string | ((label: string) => string);
+    /** Makes the label a real button and turns on hover/cursor/focus styles; keyboard (Enter/Space) works natively. */
     onTagClick?: () => void;
+    /** Decorative (aria-hidden) unless onIconClick is also passed — icon alone adds no interactivity. */
     icon?: ElementType;
+    /** A decorative icon before the label; always aria-hidden and never clickable. */
+    leadingIcon?: ElementType;
+    /** Category colour, defaults to "primary"; ignored when `tone` is set. */
     colorScheme?: TagColorScheme;
+    /** Status tone (neutral/info/success/warning/error); overrides colorScheme for state, not category. */
+    tone?: Tone;
+    /** Caps the width; the label truncates with an ellipsis and shows the full text as a title. */
+    maxW?: BoxProps["maxW"];
+    /** Defaults to "sm"; also scales the icons. */
     size?: TagSize;
+    /** Defaults to "subtle"; ignored when `display` is "dot". */
     variant?: TagVariant;
+    /** "dot" renders an 8px tone dot plus plain label for quiet rows; variant and icons are ignored. Default "chip". */
+    display?: TagDisplay;
+    /** Dims the tag and disables its button(s) (native disabled); no effect on a purely static tag. */
+    isDisabled?: boolean;
+    /** Test hook on the root; the remove button gets `${"$"}{testId}-remove`. */
+    "data-testid"?: string;
 }

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

@@ -0,0 +1,3 @@
+import type { Tone } from "../../Theme/tokens/builders/tone";
+import type { PaletteProps } from "../../Theme/tokens/types";
+export declare const dotColor: (colors: PaletteProps, tone: Tone | undefined, colorScheme: string) => string;

package/dist/Components/Tag/tagDot.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dotColor = void 0;
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const tone_1 = require("../../Theme/tokens/builders/tone");
+const paletteScale_1 = require("../../Theme/tokens/builders/paletteScale");
+const paletteFromTheme_1 = require("../../Theme/chakra/paletteFromTheme");
+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) ? (0, paletteScale_1.scaleNamed)(colors, colorScheme) : undefined;
+    if (scale)
+        return scale;
+    (0, paletteFromTheme_1.warnUnknownColorScheme)(colorScheme);
+    return colors.gray;
+};
+const dotColor = (colors, tone, colorScheme) => {
+    const surfaces = [colors.background[50], colors.backgroundColor.main];
+    if (tone === "neutral")
+        return colors.textMuted;
+    const scale = tone
+        ? colors.semantic[tone_1.toneToSemantic[tone]]
+        : themedScale(colors, colorScheme);
+    return surfaces.reduce((ink, surface) => (0, outlineRung_1.liftToContrast)(ink, surface), scale[500]);
+};
+exports.dotColor = dotColor;

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

@@ -0,0 +1,4 @@
+import type { TagInputProps } from "./TagInputProps";
+/** Free-text tag field that commits entries as removable chips; forwards its ref to the text input. */
+declare const TagInput: import("react").ForwardRefExoticComponent<TagInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export default TagInput;

package/dist/Components/TagInput/TagInput.js

@@ -0,0 +1,101 @@
+"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");
+/** Free-text tag field that commits entries as removable chips; forwards its ref to the text input. */
+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, labels, 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 messages = (0, react_1.useMemo)(() => (0, tagEntries_1.resolveTagInputLabels)(labels), [labels]);
+    const commit = (text) => {
+        const result = (0, tagEntries_1.addTags)(value, (0, tagEntries_1.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 || !(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, removeLabel: messages.remove, 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,63 @@
+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;
+    /** Visible label above the field, tied to the input via `for`; also required for the info icon. */
+    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;
+    /** Tooltip text of the info icon; has no effect unless `isInformation` and `label` are set. */
+    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;
+    /** Overrides the field's own messages and announcements; omit a key to keep its English default. */
+    labels?: Partial<{
+        /** Rejection when `maxTags` is reached. */
+        maxTags: (max: number) => string;
+        /** Rejection for a repeated entry. */
+        duplicate: (entry: string) => string;
+        /** Rejection when `validate` returns `false`; a returned string is shown as is. */
+        invalid: (entry: string) => string;
+        /** Live-region announcement after entries are added. */
+        added: (entries: string[]) => string;
+        /** Live-region announcement after a tag is removed. */
+        removed: (entry: string) => string;
+        /** Accessible name of each chip's remove button. */
+        remove: (entry: string) => string;
+    }>;
+    /** 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,21 @@
+import type { TagInputProps, TagValidator } from "./TagInputProps";
+type TagInputLabelOverrides = NonNullable<TagInputProps["labels"]>;
+export type TagInputLabels = Required<TagInputLabelOverrides>;
+export declare const DEFAULT_TAG_INPUT_LABELS: TagInputLabels;
+export declare const resolveTagInputLabels: (labels?: TagInputLabelOverrides) => TagInputLabels;
+export type AddRules = {
+    labels: TagInputLabels;
+    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;
+export {};

package/dist/Components/TagInput/tagEntries.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addTags = exports.splitEntries = exports.hasSeparator = exports.resolveTagInputLabels = exports.DEFAULT_TAG_INPUT_LABELS = void 0;
+exports.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}`,
+};
+const resolveTagInputLabels = (labels) => ({
+    ...exports.DEFAULT_TAG_INPUT_LABELS,
+    ...labels,
+});
+exports.resolveTagInputLabels = resolveTagInputLabels;
+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, 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;
+};
+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,4 @@
+import type { TimePickerProps } from "./TimePickerProps";
+/** Three inline selects (hour, minute, AM/PM or 24-hour) that emit a Date; `ref` is the hour select. */
+declare const TimePicker: import("react").ForwardRefExoticComponent<TimePickerProps & import("react").RefAttributes<HTMLSelectElement>>;
+export default TimePicker;

package/dist/Components/TimePicker/TimePicker.js

@@ -0,0 +1,55 @@
+"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 = "";
+/** Three inline selects (hour, minute, AM/PM or 24-hour) that emit a Date; `ref` is the hour select. */
+const TimePicker = (0, react_1.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 = 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) => {
+        if (event.target.value === EMPTY)
+            return onClear === null || onClear === void 0 ? void 0 : onClear();
+        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) => 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((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 && !onClear ? null : ((0, jsx_runtime_1.jsx)("option", { value: EMPTY, disabled: !current, 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,48 @@
+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;
+    /** Makes "--" pickable once a time is set; choosing it in any select calls this and `onChange` is not fired. */
+    onClear?: () => 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;
+    /** Disables all three selects and dims the field; wins over the deprecated `disabled`. */
+    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;
+    /** Tooltip text of the info icon; shown only with `isInformation` and a `label`. */
+    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;