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

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;

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;

package/dist/Components/Timeline/Timeline.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
 import { TimelineProps } from "./TimelineProps";
-declare const Timeline: ({ timelineEvents }: TimelineProps) => React.JSX.Element;
+/** Renders a grouped, alternating two-column desktop / single-rail mobile event feed with inline notes — not a generic list. */
+declare const Timeline: ({ timelineEvents, onEventClick, onAddNote, onEditNote, onDeleteNote, showAddNote, addNoteLoading, editNoteLoading, deletingNoteId, emptyText, }: TimelineProps) => import("react/jsx-runtime").JSX.Element;
 export default Timeline;