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

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;

package/dist/Components/Timeline/Timeline.js

@@ -9,8 +9,11 @@ const lucide_react_1 = require("lucide-react");
 const react_2 = __importDefault(require("react"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const planeStep_1 = require("../../Theme/tokens/builders/planeStep");
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
+const borderWidths_1 = require("../../Theme/tokens/primitives/borderWidths");
+const typography_1 = require("../../Theme/tokens/primitives/typography");
 const motion_2 = require("../../Theme/chakra/motion");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const functions_1 = require("../../Utils/functions");
@@ -155,12 +158,14 @@ const NoteItem = react_2.default.memo(function NoteItem({ note, event, index, co
     var _a, _b;
     const isEditing = activeEditNoteId === note.log_note_id;
     const isDeleting = deletingNoteId != null && deletingNoteId === note.log_note_id;
+    const noteChip = (0, planeStep_1.bandOn)(colors.primary[50], colors.gray[50]);
+    const noteChipInk = (0, accentText_1.accentTextOnCanvas)(colors.primary, noteChip);
     if (isEditing) {
         return ((0, jsx_runtime_1.jsx)(react_1.Box, { children: (0, jsx_runtime_1.jsx)(NoteTextArea_1.default, { isEditable: true, value: (_a = note.note) !== null && _a !== void 0 ? _a : "", title: (_b = note.title) !== null && _b !== void 0 ? _b : "", saveButtonLoading: editNoteLoading, handleSubmit: (n, t, f) => onEditNote === null || onEditNote === void 0 ? void 0 : onEditNote(note.log_note_id, n, t, f, event, index), handleCancel: () => setActiveEditNoteId(null) }) }));
     }
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", zIndex: 1, bg: colors.gray[50], border: `0.063rem solid ${colors.boxborder[200]}`, borderRadius: "lg", px: 2.5, py: 2, opacity: isDeleting ? 0.6 : 1, _hover: { ".timeline-note-actions": { opacity: 1 } }, _focusWithin: { ".timeline-note-actions": { opacity: 1 } }, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 1.5, mb: note.note ? 1 : 0, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: (0, accentText_1.accentTextOnCanvas)(colors.primary, colors.gray[50]), display: "inline-flex", children: (0, jsx_runtime_1.jsx)(lucide_react_1.StickyNote, { size: 12 }) }), note.title && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.6875rem", fontWeight: 700, color: colors.text[800], noOfLines: 1, children: note.title })), (onEditNote || onDeleteNote) && ((0, jsx_runtime_1.jsx)(react_1.Flex, { className: "timeline-note-actions", align: "center", gap: 0.5, ml: "auto", flexShrink: 0, opacity: isDeleting ? 1 : 0, transition: REVEAL_TRANSITION, sx: (0, motion_2.reducedMotionSx)(), children: isDeleting ? ((0, jsx_runtime_1.jsx)(react_1.Spinner, { size: "xs", color: colors.textMuted })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [onEditNote && ((0, jsx_runtime_1.jsx)(react_1.Tooltip, { label: "Edit", placement: "top", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", "aria-label": "Edit note", sx: (0, focusRing_styles_1.focusVisibleStyles)(colors), display: "inline-flex", alignItems: "center", justifyContent: "center", p: 1, borderRadius: "md", color: colors.textMuted, bg: "transparent", cursor: "pointer", _hover: {
-                                            bg: colors.primary[50],
-                                            color: (0, accentText_1.accentTextOnCanvas)(colors.primary, colors.primary[50]),
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", zIndex: 1, bg: colors.gray[50], border: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${colors.boxborder[200]}`, borderRadius: "lg", px: 2.5, py: 2, opacity: isDeleting ? 0.6 : 1, _hover: { ".timeline-note-actions": { opacity: 1 } }, _focusWithin: { ".timeline-note-actions": { opacity: 1 } }, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 1.5, mb: note.note ? 1 : 0, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: (0, accentText_1.accentTextOnCanvas)(colors.primary, colors.gray[50]), display: "inline-flex", children: (0, jsx_runtime_1.jsx)(lucide_react_1.StickyNote, { size: 12 }) }), note.title && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: typography_1.fontSizes["xs-minus"], fontWeight: 700, color: colors.text[800], noOfLines: 1, children: note.title })), (onEditNote || onDeleteNote) && ((0, jsx_runtime_1.jsx)(react_1.Flex, { className: "timeline-note-actions", align: "center", gap: 0.5, ml: "auto", flexShrink: 0, opacity: isDeleting ? 1 : 0, transition: REVEAL_TRANSITION, sx: (0, motion_2.reducedMotionSx)(), children: isDeleting ? ((0, jsx_runtime_1.jsx)(react_1.Spinner, { size: "xs", color: colors.textMuted })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [onEditNote && ((0, jsx_runtime_1.jsx)(react_1.Tooltip, { label: "Edit", placement: "top", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", "aria-label": "Edit note", sx: (0, focusRing_styles_1.focusVisibleStyles)(colors), display: "inline-flex", alignItems: "center", justifyContent: "center", p: 1, borderRadius: "md", color: colors.textMuted, bg: "transparent", cursor: "pointer", _hover: {
+                                            bg: noteChip,
+                                            color: noteChipInk,
                                         }, onClick: (e) => {
                                             e.stopPropagation();
                                             setActiveEditNoteId(note.log_note_id);
@@ -170,7 +175,7 @@ const NoteItem = react_2.default.memo(function NoteItem({ note, event, index, co
                                         }, onClick: (e) => {
                                             e.stopPropagation();
                                             onDeleteNote === null || onDeleteNote === void 0 ? void 0 : onDeleteNote(note.log_note_id, event, index);
-                                        }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 12 }) }) }))] })) }))] }), note.note && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.6875rem", color: colors.text[700], whiteSpace: "pre-wrap", children: note.note })), note.attachments && note.attachments.length > 0 && ((0, jsx_runtime_1.jsx)(react_1.Flex, { wrap: "wrap", gap: 1.5, mt: 1.5, children: note.attachments.map((att, attIndex) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "a", href: att.url, target: "_blank", rel: "noopener noreferrer", onClick: (e) => e.stopPropagation(), align: "center", gap: 1, px: 1.5, py: 0.5, borderRadius: "full", bg: colors.primary[50], color: (0, accentText_1.accentTextOnCanvas)(colors.primary, colors.primary[50]), fontSize: MIN_TEXT, maxW: "100%", _hover: { bg: colors.primary[100] }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Paperclip, { size: 10 }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", noOfLines: 1, maxW: "9rem", children: att.name || "attachment" })] }, attIndex))) })), (note.created_by || note.created_at) && ((0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: MIN_TEXT, color: colors.textMuted, mt: 1, children: [note.created_by ? formatName(note.created_by) : "", note.created_by && note.created_at ? " · " : "", note.created_at ? formatTimestamp(note.created_at, "time") : ""] }))] }));
+                                        }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 12 }) }) }))] })) }))] }), note.note && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: typography_1.fontSizes["xs-minus"], color: colors.text[700], whiteSpace: "pre-wrap", children: note.note })), note.attachments && note.attachments.length > 0 && ((0, jsx_runtime_1.jsx)(react_1.Flex, { wrap: "wrap", gap: 1.5, mt: 1.5, children: note.attachments.map((att, attIndex) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "a", href: att.url, target: "_blank", rel: "noopener noreferrer", onClick: (e) => e.stopPropagation(), align: "center", gap: 1, px: 1.5, py: 0.5, borderRadius: "full", bg: noteChip, color: noteChipInk, fontSize: MIN_TEXT, maxW: "100%", _hover: { bg: colors.primary[100] }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Paperclip, { size: 10 }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", noOfLines: 1, maxW: "9rem", children: att.name || "attachment" })] }, attIndex))) })), (note.created_by || note.created_at) && ((0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: MIN_TEXT, color: colors.textMuted, mt: 1, children: [note.created_by ? formatName(note.created_by) : "", note.created_by && note.created_at ? " · " : "", note.created_at ? formatTimestamp(note.created_at, "time") : ""] }))] }));
 });
 // The colored event card (shared by both the desktop "tree" and mobile rail).
 // `accent` decides which edge carries the colored bar (pointing toward the spine).
@@ -180,7 +185,8 @@ const EventCard = react_2.default.memo(function EventCard({ event, index, accent
     const changes = (0, react_3.useMemo)(() => parseChanges(event.changes), [event.changes]);
     const clickable = typeof onEventClick === "function";
     const actor = formatName(event.action_by);
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { _hover: { ".timeline-add-note": { opacity: 1 } }, _focusWithin: { ".timeline-add-note": { opacity: 1 } }, children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", zIndex: 1, bg: colors.background[50], border: `0.063rem solid ${colors.boxborder[200]}`, borderInlineStartWidth: accent === "left" ? "0.1875rem" : undefined, borderInlineEndWidth: accent === "right" ? "0.1875rem" : undefined, borderInlineStartColor: accent === "left" ? scale[400] : undefined, borderInlineEndColor: accent === "right" ? scale[400] : undefined, borderRadius: "xl", px: 3.5, py: 2.5, ...(clickable && {
+    const addNoteHover = (0, planeStep_1.bandOn)(colors.primary[50], colors.background[50]);
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { _hover: { ".timeline-add-note": { opacity: 1 } }, _focusWithin: { ".timeline-add-note": { opacity: 1 } }, children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", zIndex: 1, bg: colors.background[50], border: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${colors.boxborder[200]}`, borderInlineStartWidth: accent === "left" ? "0.1875rem" : undefined, borderInlineEndWidth: accent === "right" ? "0.1875rem" : undefined, borderInlineStartColor: accent === "left" ? scale[400] : undefined, borderInlineEndColor: accent === "right" ? scale[400] : undefined, borderRadius: "xl", px: 3.5, py: 2.5, ...(clickable && {
                     transition: CARD_TRANSITION,
                     _hover: {
                         borderColor: scale[300],
@@ -188,12 +194,15 @@ const EventCard = react_2.default.memo(function EventCard({ event, index, accent
                         transform: "translateY(-0.063rem)",
                     },
                     sx: (0, motion_2.reducedMotionSx)({ transform: "none" }),
-                }), children: [clickable && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", "aria-label": `View details${event.action_from ? ` for ${event.action_from}` : ""}`, onClick: () => onEventClick(event, index), position: "absolute", inset: 0, w: "100%", h: "100%", p: 0, m: 0, bg: "transparent", border: "none", borderRadius: "inherit", cursor: "pointer", zIndex: 0, sx: (0, focusRing_styles_1.focusVisibleStyles)(colors) })), (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", justify: "space-between", gap: 2, flexWrap: "wrap", children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.8125rem", fontWeight: 600, color: colors.text[800], noOfLines: 1, children: event.action_from }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", fontSize: "0.6875rem", fontWeight: 600, lineHeight: "1", textTransform: "capitalize", color: (0, accentText_1.accentTextOnCanvas)(scale, scale[50]), bg: scale[50], border: `0.063rem solid ${scale[200]}`, borderRadius: "full", px: 2, py: 1, children: event.title })] }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.6875rem", color: colors.textMuted, whiteSpace: "nowrap", children: formatTimestamp(event.created_at, "time") })] }), event.description != null && ((0, jsx_runtime_1.jsx)(react_1.Box, { mt: 1.5, fontSize: "0.75rem", color: colors.text[700], children: event.description })), changes.length > 0 && ((0, jsx_runtime_1.jsx)(react_1.Flex, { direction: "column", gap: 1, mt: 2, children: changes.map((c, i) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 1.5, fontSize: "0.6875rem", lineHeight: "1.4", flexWrap: "wrap", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: 600, color: colors.text[700], children: (0, functions_1.toWords)(c.field) }), c.from !== null && c.from !== undefined && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: (0, accentText_1.accentTextOnCanvas)(colors.gray, colors.gray[50]), bg: colors.gray[50], borderRadius: "full", px: 1.5, textDecoration: "line-through", maxW: "10rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: String(c.from) }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: colors.textMuted, display: "inline-flex", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowRight, { size: 11 }) })] })), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: (0, accentText_1.accentTextOnCanvas)(colors.semantic.success, colors.semantic.success[50]), bg: colors.semantic.success[50], borderRadius: "full", px: 1.5, maxW: "12rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: String(c.to) })] }, `${c.field}-${i}`))) })), (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", justify: "space-between", gap: 2, mt: 2, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Tooltip, { label: actor, placement: "top", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: "1.5rem", minW: "1.5rem", borderRadius: "full", bg: colors.primary.opacity[16], color: (0, accentText_1.accentTextOnCanvas)(colors.primary, colors.background[50]), fontSize: MIN_TEXT, fontWeight: 700, children: initials(actor) }) }), (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "0.6875rem", color: colors.textMuted, children: ["by", " ", (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: colors.text[700], fontWeight: 500, children: actor })] })] }), showAddNote && ((0, jsx_runtime_1.jsx)(react_1.Box, { className: "timeline-add-note", as: "button", type: "button", onClick: (e) => {
+                }), children: [clickable && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", "aria-label": `View details${event.action_from ? ` for ${event.action_from}` : ""}`, onClick: () => onEventClick(event, index), position: "absolute", inset: 0, w: "100%", h: "100%", p: 0, m: 0, bg: "transparent", border: "none", borderRadius: "inherit", cursor: "pointer", zIndex: 0, sx: (0, focusRing_styles_1.focusVisibleStyles)(colors) })), (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", justify: "space-between", gap: 2, flexWrap: "wrap", children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: typography_1.fontSizes["xs-plus"], fontWeight: 600, color: colors.text[800], noOfLines: 1, children: event.action_from }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", fontSize: typography_1.fontSizes["xs-minus"], fontWeight: 600, lineHeight: "1", textTransform: "capitalize", color: (0, accentText_1.accentTextOnCanvas)(scale, scale[50]), bg: scale[50], border: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${scale[200]}`, borderRadius: "full", px: 2, py: 1, children: event.title })] }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: typography_1.fontSizes["xs-minus"], color: colors.textMuted, whiteSpace: "nowrap", children: formatTimestamp(event.created_at, "time") })] }), event.description != null && ((0, jsx_runtime_1.jsx)(react_1.Box, { mt: 1.5, fontSize: typography_1.fontSizes.xs, color: colors.text[700], children: event.description })), changes.length > 0 && ((0, jsx_runtime_1.jsx)(react_1.Flex, { direction: "column", gap: 1, mt: 2, children: changes.map((c, i) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 1.5, fontSize: typography_1.fontSizes["xs-minus"], lineHeight: "1.4", flexWrap: "wrap", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: 600, color: colors.text[700], children: (0, functions_1.toWords)(c.field) }), c.from !== null && c.from !== undefined && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: (0, accentText_1.accentTextOnCanvas)(colors.gray, colors.gray[50]), bg: colors.gray[50], borderRadius: "full", px: 1.5, textDecoration: "line-through", maxW: "10rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: String(c.from) }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: colors.textMuted, display: "inline-flex", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowRight, { size: 11 }) })] })), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: (0, accentText_1.accentTextOnCanvas)(colors.semantic.success, colors.semantic.success[50]), bg: colors.semantic.success[50], borderRadius: "full", px: 1.5, maxW: "12rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: String(c.to) })] }, `${c.field}-${i}`))) })), (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", justify: "space-between", gap: 2, mt: 2, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Tooltip, { label: actor, placement: "top", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: "1.5rem", minW: "1.5rem", borderRadius: "full", bg: colors.primary.opacity[16], color: (0, accentText_1.accentTextOnCanvas)(colors.primary, colors.background[50]), fontSize: MIN_TEXT, fontWeight: 700, children: initials(actor) }) }), (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: typography_1.fontSizes["xs-minus"], color: colors.textMuted, children: ["by", " ", (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: colors.text[700], fontWeight: 500, children: actor })] })] }), showAddNote && ((0, jsx_runtime_1.jsx)(react_1.Box, { className: "timeline-add-note", as: "button", type: "button", onClick: (e) => {
                                     e.stopPropagation();
                                     setActiveNoteEventIndex(isActiveNote ? null : index);
-                                }, position: "relative", zIndex: 1, opacity: isActiveNote ? 1 : 0, transition: REVEAL_TRANSITION, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, px: 2, py: 1, borderRadius: "md", fontSize: "0.75rem", fontWeight: 600, color: (0, accentText_1.accentTextOnCanvas)(colors.primary, colors.background[50]), bg: "transparent", cursor: "pointer", _hover: {
-                                    bg: colors.primary[50],
-                                }, children: isActiveNote ? "Hide note" : "Add note" }))] }), event.notes && event.notes.length > 0 && ((0, jsx_runtime_1.jsx)(react_1.Flex, { direction: "column", gap: 2, mt: 2, pt: 2, borderTop: `0.063rem solid ${colors.boxborder[200]}`, children: event.notes.map((note, noteIndex) => {
+                                }, position: "relative", zIndex: 1, opacity: isActiveNote ? 1 : 0, transition: REVEAL_TRANSITION, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, px: 2, py: 1, borderRadius: "md", fontSize: typography_1.fontSizes.xs, fontWeight: 600, color: (0, accentText_1.accentTextOnCanvas)(colors.primary, colors.background[50]), bg: "transparent", cursor: "pointer", _hover: {
+                                    bg: addNoteHover,
+                                    color: addNoteHover === colors.primary[50]
+                                        ? undefined
+                                        : (0, accentText_1.accentTextOnCanvas)(colors.primary, addNoteHover),
+                                }, children: isActiveNote ? "Hide note" : "Add note" }))] }), event.notes && event.notes.length > 0 && ((0, jsx_runtime_1.jsx)(react_1.Flex, { direction: "column", gap: 2, mt: 2, pt: 2, borderTop: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${colors.boxborder[200]}`, children: event.notes.map((note, noteIndex) => {
                             var _a;
                             return ((0, jsx_runtime_1.jsx)(NoteItem, { note: note, event: event, index: index, colors: colors, activeEditNoteId: activeEditNoteId, setActiveEditNoteId: setActiveEditNoteId, editNoteLoading: editNoteLoading, deletingNoteId: deletingNoteId, onEditNote: onEditNote, onDeleteNote: onDeleteNote }, (_a = note.log_note_id) !== null && _a !== void 0 ? _a : noteIndex));
                         }) }))] }), isActiveNote && ((0, jsx_runtime_1.jsx)(react_1.Box, { mt: 2, children: (0, jsx_runtime_1.jsx)(NoteTextArea_1.default, { saveButtonLoading: addNoteLoading, handleSubmit: (note, title, files) => {
@@ -228,13 +237,13 @@ const Timeline = ({ timelineEvents, onEventClick, onAddNote, onEditNote, onDelet
     }, [editNoteLoading]);
     const groupedEvents = (0, react_3.useMemo)(() => groupEventsByDate(timelineEvents !== null && timelineEvents !== void 0 ? timelineEvents : []), [timelineEvents]);
     if (!timelineEvents || timelineEvents.length === 0) {
-        return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", align: "center", justify: "center", py: 12, gap: 2, color: colors.textMuted, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { boxSize: "2.75rem", borderRadius: "full", bg: colors.gray[100], display: "flex", alignItems: "center", justifyContent: "center", color: (0, accentText_1.accentTextOnCanvas)(colors.gray, colors.gray[100]), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Volleyball, { size: 20 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.875rem", fontWeight: 500, children: emptyText })] }));
+        return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", align: "center", justify: "center", py: 12, gap: 2, color: colors.textMuted, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { boxSize: "2.75rem", borderRadius: "full", bg: colors.gray[100], display: "flex", alignItems: "center", justifyContent: "center", color: (0, accentText_1.accentTextOnCanvas)(colors.gray, colors.gray[100]), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Volleyball, { size: 20 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: typography_1.fontSizes.sm, fontWeight: 500, children: emptyText })] }));
     }
     // -------------------------------------------------------------------------
     // Mobile: single left rail (alternating doesn't read well on narrow widths)
     // -------------------------------------------------------------------------
     if (isMobile) {
-        return ((0, jsx_runtime_1.jsx)(react_1.Box, { position: "relative", maxW: "100%", px: 2, py: 2, children: Object.keys(groupedEvents).map((date) => ((0, jsx_runtime_1.jsxs)(react_1.Box, { mb: 2, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 3, mb: 4, mt: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.75rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.02em", color: (0, accentText_1.accentTextOnCanvas)(colors.gray, colors.gray[50]), bg: colors.gray[50], border: `0.063rem solid ${colors.boxborder[200]}`, borderRadius: "full", px: 3, py: 1, whiteSpace: "nowrap", children: date }), (0, jsx_runtime_1.jsx)(react_1.Box, { flex: "1", h: "0.063rem", bg: colors.boxborder[200] })] }), (0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", left: NODE_RADIUS, top: "0.5rem", bottom: "0.5rem", w: "0.1875rem", borderRadius: "full", bg: (0, outlineRung_1.liftToContrast)(colors.gray[300], colors.backgroundColor.main, outlineRung_1.AA_NON_TEXT), transform: "translateX(-50%)" }), groupedEvents[date].map(({ event, globalIndex }, index) => {
+        return ((0, jsx_runtime_1.jsx)(react_1.Box, { position: "relative", maxW: "100%", px: 2, py: 2, children: Object.keys(groupedEvents).map((date) => ((0, jsx_runtime_1.jsxs)(react_1.Box, { mb: 2, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 3, mb: 4, mt: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: typography_1.fontSizes.xs, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.02em", color: (0, accentText_1.accentTextOnCanvas)(colors.gray, colors.gray[50]), bg: colors.gray[50], border: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${colors.boxborder[200]}`, borderRadius: "full", px: 3, py: 1, whiteSpace: "nowrap", children: date }), (0, jsx_runtime_1.jsx)(react_1.Box, { flex: "1", h: "0.063rem", bg: colors.boxborder[200] })] }), (0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", left: NODE_RADIUS, top: "0.5rem", bottom: "0.5rem", w: "0.1875rem", borderRadius: "full", bg: (0, outlineRung_1.liftToContrast)(colors.gray[300], colors.backgroundColor.main, outlineRung_1.AA_NON_TEXT), transform: "translateX(-50%)" }), groupedEvents[date].map(({ event, globalIndex }, index) => {
                                 var _a;
                                 const scale = getEventScale(colors, event.title);
                                 return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "flex-start", gap: 3, mb: index === groupedEvents[date].length - 1 ? 0 : 3, sx: OFFSCREEN_SKIP, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: NODE, minW: NODE, borderRadius: "full", bg: scale[50], color: (0, accentText_1.accentTextOnCanvas)(scale, scale[50]), border: `0.125rem solid ${colors.background[50]}`, boxShadow: `0 0 0 0.063rem ${scale[200]}`, zIndex: 1, children: getIcon(event, 14) }), (0, jsx_runtime_1.jsx)(react_1.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(EventCard, { event: event, index: globalIndex, accent: "left", colors: colors, isActiveNote: activeNoteEventIndex === globalIndex, setActiveNoteEventIndex: setActiveNoteEventIndex, activeEditNoteId: activeEditNoteId, setActiveEditNoteId: setActiveEditNoteId, showAddNote: showAddNote, addNoteLoading: addNoteLoading, editNoteLoading: editNoteLoading, deletingNoteId: deletingNoteId, onEventClick: onEventClick, onAddNote: onAddNote, onEditNote: onEditNote, onDeleteNote: onDeleteNote }) })] }, `${(_a = event.logs_id) !== null && _a !== void 0 ? _a : date}-${index}`));
@@ -243,7 +252,7 @@ const Timeline = ({ timelineEvents, onEventClick, onAddNote, onEditNote, onDelet
     // -------------------------------------------------------------------------
     // Desktop: center spine with cards alternating left / right (the "tree")
     // -------------------------------------------------------------------------
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", maxW: "60rem", mx: "auto", px: 4, py: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", left: "50%", top: "0.5rem", bottom: "0.5rem", w: "0.015rem", borderRadius: "full", bg: (0, outlineRung_1.liftToContrast)(colors.gray[300], colors.backgroundColor.main, outlineRung_1.AA_NON_TEXT), transform: "translateX(-50%)" }), Object.keys(groupedEvents).map((date) => ((0, jsx_runtime_1.jsxs)(react_1.Box, { mb: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { justify: "center", mb: 5, mt: 3, position: "relative", zIndex: 2, children: (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.75rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.02em", color: colors.textMuted, bg: colors.background[50], border: `0.063rem solid ${colors.boxborder[200]}`, boxShadow: "xs", borderRadius: "full", px: 4, py: 1.5, whiteSpace: "nowrap", children: date }) }), groupedEvents[date].map(({ event, globalIndex }, index) => {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", maxW: "60rem", mx: "auto", px: 4, py: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", left: "50%", top: "0.5rem", bottom: "0.5rem", w: "0.015rem", borderRadius: "full", bg: (0, outlineRung_1.liftToContrast)(colors.gray[300], colors.backgroundColor.main, outlineRung_1.AA_NON_TEXT), transform: "translateX(-50%)" }), Object.keys(groupedEvents).map((date) => ((0, jsx_runtime_1.jsxs)(react_1.Box, { mb: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { justify: "center", mb: 5, mt: 3, position: "relative", zIndex: 2, children: (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: typography_1.fontSizes.xs, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.02em", color: colors.textMuted, bg: colors.background[50], border: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${colors.boxborder[200]}`, boxShadow: "xs", borderRadius: "full", px: 4, py: 1.5, whiteSpace: "nowrap", children: date }) }), groupedEvents[date].map(({ event, globalIndex }, index) => {
                         var _a;
                         const isLeft = index % 2 === 0;
                         const scale = getEventScale(colors, event.title);

package/dist/Components/Toaster/Toaster.js

@@ -17,6 +17,7 @@ const motion_1 = require("../../Theme/chakra/motion");
 const motion_2 = require("../../Theme/tokens/primitives/motion");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const tone_1 = require("../../Theme/tokens/builders/tone");
+const color_1 = require("../../Theme/tokens/builders/color");
 const ToasterContext = (0, react_1.createContext)(undefined);
 const shrink = (0, react_3.keyframes) `
   from { transform: scaleX(1); }
@@ -24,11 +25,13 @@ const shrink = (0, react_3.keyframes) `
 `;
 // One-shot ring pulse on the status icon — a subtle "just happened" beat.
 const iconPulse = (0, react_3.keyframes) `
-  0%   { box-shadow: 0 0 0 0 var(--toast-pulse-color); }
-  70%  { box-shadow: 0 0 0 0.5rem transparent; }
-  100% { box-shadow: 0 0 0 0 transparent; }
+  0%   { transform: scale(1); opacity: 1; }
+  70%  { transform: scale(1.5); opacity: 0; }
+  100% { transform: scale(1.5); opacity: 0; }
 `;
 const MotionBox = (0, framer_motion_1.motion)(react_2.Box);
+const TOAST_ENTER = (0, motion_2.motionTransition)("enter", "out");
+const TOAST_EXIT = (0, motion_2.motionTransition)("exit", "in");
 // Presentational toast card — owns hover state so auto-dismiss pauses while the pointer is over it.
 function ToastCard({ onClose, title, description, actions, isClosable, duration, meta, colors: c, isUrgent, }) {
     const [paused, setPaused] = (0, react_1.useState)(false);
@@ -40,14 +43,23 @@ function ToastCard({ onClose, title, description, actions, isClosable, duration,
         , { 
             // The single live-region root: an explicit aria-live here, on the card's own
             // root, keeps errors from being announced a second time by a duplicate wrapper.
-            role: isUrgent ? "alert" : undefined, "aria-live": isUrgent ? "assertive" : undefined, initial: { opacity: 0, x: 24 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: 24 }, transition: { duration: 0.24, ease: [0.22, 1, 0.36, 1] }, onHoverStart: () => setPaused(true), onHoverEnd: () => setPaused(false), position: "relative", bg: c.surfaceRaised, border: `0.0625rem solid ${c.boxborder[200]}`, boxShadow: "md", borderRadius: "xl", overflow: "hidden", minW: "22.5rem", maxW: "26rem", willChange: "transform, opacity", sx: {
+            role: isUrgent ? "alert" : undefined, "aria-live": isUrgent ? "assertive" : undefined, initial: { opacity: 0, x: 24 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: 24, transition: TOAST_EXIT }, transition: TOAST_ENTER, onHoverStart: () => setPaused(true), onHoverEnd: () => setPaused(false), position: "relative", bg: c.surfaceRaised, border: `0.0625rem solid ${c.boxborder[200]}`, boxShadow: "md", borderRadius: "xl", overflow: "hidden", minW: "22.5rem", maxW: "26rem", sx: {
+                isolation: "isolate",
                 transition: (0, motion_2.transitionFor)(["box-shadow"]),
                 _hover: { boxShadow: "lg" },
                 ...(0, motion_1.reducedMotionSx)(),
-            }, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { p: 3.5, gap: 3, align: actions ? "flex-start" : "center", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "2rem", minW: "2rem", borderRadius: "full", bg: tone.bg, color: tone.fg, sx: {
-                                ["--toast-pulse-color"]: tone.border,
-                                animation: `${iconPulse} 900ms ease-out 1`,
-                                ...(0, motion_1.reducedMotionSx)(),
+            }, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { p: 3.5, gap: 3, align: actions ? "flex-start" : "center", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "2rem", minW: "2rem", borderRadius: "full", position: "relative", bg: (0, color_1.compositeOver)(tone.bg, c.surfaceRaised), color: tone.fg, sx: {
+                                "&::after": {
+                                    content: '""',
+                                    position: "absolute",
+                                    inset: 0,
+                                    borderRadius: "full",
+                                    bg: tone.border,
+                                    zIndex: -1,
+                                    opacity: 0,
+                                    animation: `${iconPulse} 900ms ease-out 1`,
+                                    ...(0, motion_1.reducedMotionSx)(),
+                                },
                             }, children: meta.icon }), (0, jsx_runtime_1.jsxs)(react_2.VisuallyHidden, { children: [meta.label, ":"] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [title && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: 600, fontSize: "0.875rem", lineHeight: "1.3", color: c.text[800], children: title })), description && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "0.8125rem", lineHeight: "1.45", color: c.textMuted, mt: title ? "0.125rem" : 0, children: description })), actions && ((0, jsx_runtime_1.jsx)(react_2.Flex, { gap: 2, mt: 2.5, align: "center", wrap: "wrap", children: actions(onClose) }))] }), isClosable && ((0, jsx_runtime_1.jsx)(react_2.CloseButton, { onClick: onClose, size: "sm", color: c.textMuted, borderRadius: "md", alignSelf: "flex-start", _hover: {
                                 bg: c.gray[100],
                                 color: c.text[700],

package/dist/Components/Toggle/TableToggle.js

@@ -12,9 +12,13 @@ const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 const useSlidingPill_1 = require("../SegmentedControl/useSlidingPill");
 const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+const borderWidths_1 = require("../../Theme/tokens/primitives/borderWidths");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
 const MODES = ["grid", "list"];
 const TRACK_HEIGHT = controlSizes_1.BUTTON_SIZES.sm.height;
 const SEGMENT_HEIGHT = `calc(${TRACK_HEIGHT} - 0.25rem)`;
+const INK_TRANSITION = (0, motion_1.transitionFor)(["color"], "base");
+const PILL_TRANSITION = (0, motion_1.transitionFor)(["transform", "width"], "base", "out");
 /** Two icon-only IconButtons (Grid/List), aria-pressed marks the active one; shares variant with SegmentedControl (see MODULE.md). */
 const TableToggle = ({ value, onChange, variant = "default" }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
@@ -34,7 +38,7 @@ const TableToggle = ({ value, onChange, variant = "default" }) => {
             bg: isBrandSlide ? colors.primary.opacity[8] : isUnderlineSlide ? "transparent" : colors.background[600],
             p: isUnderlineSlide ? "0" : "0.125rem",
             borderRadius: isUnderlineSlide ? "none" : "lg",
-            borderBottom: isUnderlineSlide ? `0.0625rem solid ${colors.boxborder[200]}` : undefined,
+            borderBottom: isUnderlineSlide ? `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${colors.boxborder[200]}` : undefined,
             height: TRACK_HEIGHT,
             gap: isUnderlineSlide ? "0" : "0.125rem",
             width: "6.3rem",
@@ -75,12 +79,12 @@ const TableToggle = ({ value, onChange, variant = "default" }) => {
                         ? colors.accentText
                         : hoverInk,
             },
-            transition: "color 0.2s ease-in-out",
+            transition: INK_TRANSITION,
         }),
     };
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { ref: trackRef, ...styles.container, children: [isBrandSlide && pill && ((0, jsx_runtime_1.jsx)(react_1.Box, { "aria-hidden": "true", position: "absolute", top: "0.125rem", left: 0, h: SEGMENT_HEIGHT, w: `${pill.width}px`, borderRadius: "lg", bg: brandFill.fill, boxShadow: `0 0.125rem 0.5rem ${colors.boxShadow.primary}`, transform: `translateX(${pill.left}px)`, transition: "transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.24s cubic-bezier(0.2, 0.8, 0.2, 1)" })), isUnderlineSlide && pill && ((0, jsx_runtime_1.jsx)(react_1.Box, { "aria-hidden": "true", position: "absolute", bottom: "-0.0625rem", left: 0, h: "0.125rem", w: `${pill.width}px`, borderRadius: "full", bg: colors.primary[500], transform: `translateX(${pill.left}px)`, transition: "transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.24s cubic-bezier(0.2, 0.8, 0.2, 1)" })), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Grid View", placement: "top", fontSize: 12, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.IconButton, { ref: (node) => {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { ref: trackRef, ...styles.container, children: [isBrandSlide && pill && ((0, jsx_runtime_1.jsx)(react_1.Box, { "aria-hidden": "true", position: "absolute", top: "0.125rem", left: 0, h: SEGMENT_HEIGHT, w: `${pill.width}px`, borderRadius: "lg", bg: brandFill.fill, boxShadow: `0 0.125rem 0.5rem ${colors.boxShadow.primary}`, transform: `translateX(${pill.left}px)`, transition: PILL_TRANSITION })), isUnderlineSlide && pill && ((0, jsx_runtime_1.jsx)(react_1.Box, { "aria-hidden": "true", position: "absolute", bottom: `-${borderWidths_1.BORDER_WIDTHS.hairline}`, left: 0, h: "0.125rem", w: `${pill.width}px`, borderRadius: "full", bg: colors.primary[500], transform: `translateX(${pill.left}px)`, transition: PILL_TRANSITION })), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Grid View", placement: "top", fontSize: "xs", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.IconButton, { ref: (node) => {
                         refs.current[0] = node;
-                    }, "aria-label": "Grid View", "aria-pressed": value === "grid", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Table2, { size: "1.25rem" }), variant: "ghost", onClick: () => onChange("grid"), ...styles.button("grid") }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "List View", placement: "top", fontSize: 12, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.IconButton, { ref: (node) => {
+                    }, "aria-label": "Grid View", "aria-pressed": value === "grid", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Table2, { size: "1.25rem" }), variant: "ghost", onClick: () => onChange("grid"), ...styles.button("grid") }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "List View", placement: "top", fontSize: "xs", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.IconButton, { ref: (node) => {
                         refs.current[1] = node;
                     }, "aria-label": "List View", "aria-pressed": value === "list", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Columns3, { size: "1.25rem" }), variant: "ghost", onClick: () => onChange("list"), ...styles.button("list") }) })] }));
 };

package/dist/Components/ToggleSwitch/ToggleSwitch.d.ts

@@ -1,3 +1,4 @@
 import { ToggleSwitchProps } from "./ToggleSwitchProps";
-/** The library's on/off switch: a native checkbox with role="switch", label, helper and error row. */
-export default function ToggleSwitch({ isChecked, defaultChecked, onChange, isDisabled, isReadOnly, size, colorScheme, id, label, fieldLabel, isInformation, informationMessage, labelPosition, helperText, error, errorMessage, isRequired, name, value, onFocus, onBlur, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, m, mt, mb, ml, mr, mx, my, }: ToggleSwitchProps): import("react/jsx-runtime").JSX.Element;
+/** On/off switch: a native checkbox with role="switch", label, helper and error row; `ref` is that `<input>`. */
+declare const ToggleSwitch: import("react").ForwardRefExoticComponent<ToggleSwitchProps & import("react").RefAttributes<HTMLInputElement>>;
+export default ToggleSwitch;

package/dist/Components/ToggleSwitch/ToggleSwitch.js

@@ -3,7 +3,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = ToggleSwitch;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
@@ -27,8 +26,8 @@ const toggleOnEnter = (event) => {
     event.preventDefault();
     event.currentTarget.click();
 };
-/** The library's on/off switch: a native checkbox with role="switch", label, helper and error row. */
-function ToggleSwitch({ isChecked, defaultChecked = false, onChange, isDisabled = false, isReadOnly = false, size = "md", colorScheme = "primary", id, label, fieldLabel, isInformation, informationMessage, labelPosition = "end", helperText, error = false, errorMessage, isRequired = false, name, value, onFocus, onBlur, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, m, mt, mb, ml, mr, mx, my, }) {
+/** On/off switch: a native checkbox with role="switch", label, helper and error row; `ref` is that `<input>`. */
+const ToggleSwitch = (0, react_1.forwardRef)(function ToggleSwitch({ isChecked, defaultChecked = false, onChange, isDisabled = false, isReadOnly = false, size = "md", colorScheme = "primary", id, label, fieldLabel, isInformation, informationMessage, labelPosition = "end", helperText, error = false, errorMessage, isRequired = false, name, value, onFocus, onBlur, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, m, mt, mb, ml, mr, mx, my, }, ref) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const dims = SIZES[size];
     const ids = (0, useFieldIds_1.useFieldIds)(id, { error, errorMessage, helperText });
@@ -46,8 +45,10 @@ function ToggleSwitch({ isChecked, defaultChecked = false, onChange, isDisabled
             setInternalChecked(next);
         onChange === null || onChange === void 0 ? void 0 : onChange(next, event);
     };
-    const track = ((0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "inline-flex", flexShrink: 0, w: dims.w, h: dims.h, sx: { "input:focus-visible + span": (0, focusRing_styles_1.focusVisibleRing)(colors) }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "input", type: "checkbox", role: "switch", ...ids.controlProps, "aria-describedby": describedBy, "aria-checked": checked, "aria-readonly": isReadOnly ? true : undefined, "aria-label": ariaLabel, name: name, value: value, checked: checked, disabled: isDisabled, onChange: handleChange, onKeyDown: toggleOnEnter, onFocus: onFocus, onBlur: onBlur, position: "absolute", inset: 0, w: "100%", h: "100%", m: 0, opacity: 0, zIndex: 1, cursor: isDisabled || isReadOnly ? "not-allowed" : "pointer" }), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", "aria-hidden": "true", position: "relative", display: "inline-flex", alignItems: "center", w: "100%", h: "100%", borderRadius: "full", borderWidth: "1px", borderStyle: "solid", borderColor: error ? colors.semanticText.error : checked ? filled.fill : colors.boxborder[500], bg: checked ? filled.fill : offTrack, transition: motion, sx: (0, motion_1.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", position: "absolute", left: "0.125rem", w: dims.knob, h: dims.knob, borderRadius: "full", bg: checked ? filled.color : colors.white, boxShadow: "sm", transition: (0, motion_2.transitionFor)(["transform"], "base"), transform: checked ? `translateX(${dims.travel})` : "translateX(0)", sx: (0, motion_1.reducedMotionSx)() }) })] }));
+    const track = ((0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "inline-flex", flexShrink: 0, w: dims.w, h: dims.h, sx: { "input:focus-visible + span": (0, focusRing_styles_1.focusVisibleRing)(colors) }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { ref: ref, as: "input", type: "checkbox", role: "switch", ...ids.controlProps, "aria-describedby": describedBy, "aria-checked": checked, "aria-readonly": isReadOnly ? true : undefined, "aria-label": ariaLabel, name: name, value: value, checked: checked, disabled: isDisabled, onChange: handleChange, onKeyDown: toggleOnEnter, onFocus: onFocus, onBlur: onBlur, position: "absolute", inset: 0, w: "100%", h: "100%", m: 0, opacity: 0, zIndex: 1, cursor: isDisabled || isReadOnly ? "not-allowed" : "pointer" }), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", "aria-hidden": "true", position: "relative", display: "inline-flex", alignItems: "center", w: "100%", h: "100%", borderRadius: "full", borderWidth: "1px", borderStyle: "solid", borderColor: error ? colors.semanticText.error : checked ? filled.fill : colors.boxborder[500], bg: checked ? filled.fill : offTrack, transition: motion, sx: (0, motion_1.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", position: "absolute", left: "0.125rem", w: dims.knob, h: dims.knob, borderRadius: "full", bg: checked ? filled.color : colors.white, boxShadow: "sm", transition: (0, motion_2.transitionFor)(["transform"], "base"), transform: checked ? `translateX(${dims.travel})` : "translateX(0)", sx: (0, motion_1.reducedMotionSx)() }) })] }));
     const labelNode = label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: ids.inputId, isRequired: isRequired && !fieldLabel, inline: true }));
     const fieldLabelNode = fieldLabel && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: fieldLabel, id: ids.inputId, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired }));
     return ((0, jsx_runtime_1.jsxs)(react_2.Box, { display: "inline-flex", flexDirection: "column", opacity: isDisabled ? 0.5 : 1, m: m, mt: mt, mb: mb, ml: ml, mr: mr, mx: mx, my: my, children: [fieldLabelNode, (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, children: [labelPosition === "start" && labelNode, track, labelPosition === "end" && labelNode] }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
-}
+});
+ToggleSwitch.displayName = "ToggleSwitch";
+exports.default = ToggleSwitch;