pixelize-design-library 2.4.2-beta.5 → 2.4.2-beta.50

package/dist/Utils/planExpiry.d.ts

@@ -1,34 +1,8 @@
 export type PlanExpiryInput = string | number | Date | null | undefined;
-/**
- * Calendar months + leftover days between two dates.
- * Anchoring on a real month boundary keeps "1 month" honest across 28/30/31-day
- * months, so Jan 31 → Feb 28 reads as 28 days rather than a whole month.
- */
 export declare function splitMonthsAndDays(from: Date, to: Date): {
     months: number;
     days: number;
 };
-/**
- * Time left on a plan, compactly: `"3mo left"` once a whole month remains,
- * `"18d left"` below that. Intended for `UpgradeButton`'s `subtitle`, so it
- * stays one short line. Returns `""` when there is no usable date or the plan
- * has already lapsed — an expired plan is a different message, which the
- * consuming app owns.
- */
 export declare function formatPlanExpiry(expiryDate: PlanExpiryInput, now?: Date): string;
-/**
- * Time left on a plan, to the minute in the final day: `"3mo left"`, `"18d left"`,
- * then `"23h 45m left"` down to `"1m left"`. `""` once lapsed.
- *
- * Differs from `formatPlanExpiry` only in that last day: a calendar-day count
- * reads as "Expires today" for the whole day, which goes stale next to a live
- * countdown. Prefer this for a badge that sits on screen; `formatPlanExpiry`
- * stays the cheaper day-granular option.
- */
 export declare function formatPlanRemaining(expiryDate: PlanExpiryInput, now?: Date): string;
-/**
- * How long ago a plan lapsed: `"1h 10m ago"` under a day, `"2d ago"` / `"1mo ago"`
- * beyond it. `""` while the plan is still live — so a badge can say how stale a
- * lapse is rather than a bare "expired".
- */
 export declare function formatPlanElapsed(expiryDate: PlanExpiryInput, now?: Date): string;

package/dist/Utils/planExpiry.js

@@ -21,16 +21,10 @@ function addCalendarMonths(date, months) {
 function daysBetween(from, to) {
     return Math.round((to.getTime() - from.getTime()) / MS_PER_DAY);
 }
-/** Compact units (`2mo`, `5d`) — this reads inside a badge subtitle, where
- * "2 months 5 days left" wraps. */
 function unit(count, suffix) {
     return `${count}${suffix}`;
 }
-/**
- * Calendar months + leftover days between two dates.
- * Anchoring on a real month boundary keeps "1 month" honest across 28/30/31-day
- * months, so Jan 31 → Feb 28 reads as 28 days rather than a whole month.
- */
+// NOTE: anchors on real month boundaries so Jan 31 -> Feb 28 reads as 28 days, not "1 month".
 function splitMonthsAndDays(from, to) {
     let months = (to.getFullYear() - from.getFullYear()) * 12 +
         (to.getMonth() - from.getMonth());
@@ -40,13 +34,7 @@ function splitMonthsAndDays(from, to) {
         months = 0;
     return { months, days: daysBetween(addCalendarMonths(from, months), to) };
 }
-/**
- * Time left on a plan, compactly: `"3mo left"` once a whole month remains,
- * `"18d left"` below that. Intended for `UpgradeButton`'s `subtitle`, so it
- * stays one short line. Returns `""` when there is no usable date or the plan
- * has already lapsed — an expired plan is a different message, which the
- * consuming app owns.
- */
+// Compact plan time left, e.g. "3mo left" / "18d left". "" when unusable or already lapsed.
 function formatPlanExpiry(expiryDate, now) {
     const expiry = toDate(expiryDate);
     if (!expiry)
@@ -61,7 +49,6 @@ function formatPlanExpiry(expiryDate, now) {
     const { months, days } = splitMonthsAndDays(today, expiryDay);
     return months > 0 ? `${unit(months, "mo")} left` : `${unit(days, "d")} left`;
 }
-/** Never reports `0m`; the final stretch reads `1m`. */
 function formatHoursMinutes(ms, suffix) {
     const totalMinutes = Math.floor(ms / 60000);
     const hours = Math.floor(totalMinutes / 60);
@@ -70,15 +57,7 @@ function formatHoursMinutes(ms, suffix) {
         ? `${unit(hours, "h")} ${unit(minutes, "m")} ${suffix}`
         : `${unit(Math.max(minutes, 1), "m")} ${suffix}`;
 }
-/**
- * Time left on a plan, to the minute in the final day: `"3mo left"`, `"18d left"`,
- * then `"23h 45m left"` down to `"1m left"`. `""` once lapsed.
- *
- * Differs from `formatPlanExpiry` only in that last day: a calendar-day count
- * reads as "Expires today" for the whole day, which goes stale next to a live
- * countdown. Prefer this for a badge that sits on screen; `formatPlanExpiry`
- * stays the cheaper day-granular option.
- */
+// NOTE: like formatPlanExpiry but to the minute in the final day — for a badge staying on screen.
 function formatPlanRemaining(expiryDate, now) {
     const expiry = toDate(expiryDate);
     if (!expiry)
@@ -93,11 +72,7 @@ function formatPlanRemaining(expiryDate, now) {
     const { months, days } = splitMonthsAndDays(startOfDay(referenceNow), startOfDay(expiry));
     return months > 0 ? `${unit(months, "mo")} left` : `${unit(days, "d")} left`;
 }
-/**
- * How long ago a plan lapsed: `"1h 10m ago"` under a day, `"2d ago"` / `"1mo ago"`
- * beyond it. `""` while the plan is still live — so a badge can say how stale a
- * lapse is rather than a bare "expired".
- */
+// How long ago a plan lapsed, e.g. "1h 10m ago" / "2d ago". "" while still live.
 function formatPlanElapsed(expiryDate, now) {
     const expiry = toDate(expiryDate);
     if (!expiry)

package/dist/Utils/rafThrottle.d.ts

@@ -1,14 +1,3 @@
-/**
- * Coalesces bursts of calls into one per animation frame.
- *
- * Every use in this library is a listener that reads layout (`getBoundingClientRect`) and then
- * writes position state. Unthrottled, a capture-phase `scroll` listener runs once per scrollable
- * ancestor per scroll event — on a low-end device that is a forced reflow several times per frame,
- * which is what makes menus judder while the page moves. One frame is also the fastest rate the
- * screen can show a change, so nothing is lost by dropping the rest.
- *
- * The trailing call wins: the last arguments before the frame fires are the current ones.
- */
 export declare const rafThrottle: <A extends unknown[]>(fn: (...args: A) => void) => ((...args: A) => void) & {
     cancel: () => void;
 };

package/dist/Utils/rafThrottle.js

@@ -1,17 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.rafThrottle = void 0;
-/**
- * Coalesces bursts of calls into one per animation frame.
- *
- * Every use in this library is a listener that reads layout (`getBoundingClientRect`) and then
- * writes position state. Unthrottled, a capture-phase `scroll` listener runs once per scrollable
- * ancestor per scroll event — on a low-end device that is a forced reflow several times per frame,
- * which is what makes menus judder while the page moves. One frame is also the fastest rate the
- * screen can show a change, so nothing is lost by dropping the rest.
- *
- * The trailing call wins: the last arguments before the frame fires are the current ones.
- */
+// NOTE: coalesces bursts into one call per animation frame — the trailing call's args win.
 const rafThrottle = (fn) => {
     let frame = null;
     let latest;

package/dist/Utils/table.d.ts

@@ -1,10 +1,7 @@
+import { useDebouncedCallback } from "../Hooks/useDebounce";
 import React from "react";
 import { DataObject, TableHeaderProps } from "../Components/Table/TableProps";
 import type { CustomThemeProps } from "../Theme/themeProps";
-/**
- * Type-aware, null-safe comparison. Detects numbers and dates; otherwise falls
- * back to a numeric-aware locale string compare. Empty/null values sort last.
- */
 export declare function compareValues(aRaw: unknown, bRaw: unknown, direction: "asc" | "desc" | "none"): number;
 export declare function SortMultiColumnData(data: DataObject[], sortConfig: {
     column: string | number;
@@ -16,6 +13,9 @@ export type TablePaletteColor = {
     text: string;
     onSolid?: string;
 };
+export type SemanticStatusTone = "info" | "warning" | "success" | "error" | "neutral";
+/** Theme-aware status palette per value — soft fill + semantic ink from `resolveStatusTone`. */
+export declare function buildSemanticStatusPalette(toneByValue: Record<string, SemanticStatusTone>, theme: CustomThemeProps): Record<string, TablePaletteColor>;
 /** Deterministic, theme-aware color palette for groups + status pills. */
 export declare function buildTablePalette(theme: CustomThemeProps): TablePaletteColor[];
 /** Pick a deterministic palette color for a value, with optional consumer override hex. */
@@ -25,22 +25,12 @@ export type TableGroup = {
     label: string;
     rows: DataObject[];
 };
-/**
- * Partition rows by a column, preserving first-seen group order. The group key is
- * a normalized string so object/array values (e.g. a `user` field that is an object
- * or an array of users) group together by their readable text instead of by object
- * identity.
- */
 export declare function groupRows(data: DataObject[], groupBy: string | number): TableGroup[];
 export declare const calculateLeftOffset: (columns: number[], index: number) => number;
-/**
- * When a column has no `node`, raw cell values are rendered; plain objects
- * (e.g. relation/user fields) must not be passed as React children.
- */
 export declare function normalizeTableCellValue(value: unknown): React.ReactNode;
 export declare const searchAndSortData: (data: DataObject[], searchValues: Record<string, string>) => DataObject[];
 export declare function debounce<T extends (...args: never[]) => void>(func: T, delay: number): (...args: Parameters<T>) => void;
-export declare function useDebounce<T extends (...args: never[]) => void>(callback: T, delay: number): (...args: Parameters<T>) => void;
+export declare const useDebounce: typeof useDebouncedCallback;
 export declare const pageSizeCalculation: (records: number) => number[];
 type TableCellCalculationProps = {
     isFrozen?: boolean;
@@ -60,12 +50,5 @@ export declare const TableCellCalculation: ({ isFrozen, columnWidths, headerInde
     cellTextColor: string | undefined;
     rowTextColor: string | undefined;
 };
-/**
- * Filters array of objects by checking all property values against the search query.
- *
- * @param data - Array of objects
- * @param query - Search string
- * @returns Filtered data
- */
 export declare function globalSearchFilter<T extends Record<string, unknown>>(data: T[], query: string): T[];
 export {};

package/dist/Utils/table.js

@@ -1,62 +1,33 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TableCellCalculation = exports.pageSizeCalculation = exports.searchAndSortData = exports.calculateLeftOffset = void 0;
+exports.TableCellCalculation = exports.pageSizeCalculation = exports.useDebounce = exports.searchAndSortData = exports.calculateLeftOffset = void 0;
 exports.compareValues = compareValues;
 exports.SortMultiColumnData = SortMultiColumnData;
+exports.buildSemanticStatusPalette = buildSemanticStatusPalette;
 exports.buildTablePalette = buildTablePalette;
 exports.pickTableColor = pickTableColor;
 exports.groupRows = groupRows;
 exports.normalizeTableCellValue = normalizeTableCellValue;
 exports.debounce = debounce;
-exports.useDebounce = useDebounce;
 exports.globalSearchFilter = globalSearchFilter;
-const react_1 = __importStar(require("react"));
+const useDebounce_1 = require("../Hooks/useDebounce");
+const react_1 = __importDefault(require("react"));
 const accentText_1 = require("../Theme/tokens/builders/accentText");
+const color_1 = require("../Theme/tokens/builders/color");
+const outlineRung_1 = require("../Theme/tokens/builders/outlineRung");
+const filledSurface_1 = require("../Theme/tokens/builders/filledSurface");
 const statusTone_1 = require("../Theme/tokens/builders/statusTone");
-// Built once, not per comparison: sorting 10k rows runs this ~130k times, and constructing a
-// collator is orders of magnitude dearer than using one.
+const tone_1 = require("../Theme/tokens/builders/tone");
+// NOTE: built once — sorting 10k rows runs this ~130k times and a Collator is costly to construct.
 const COLLATOR = new Intl.Collator(undefined, {
     numeric: true,
     sensitivity: "base",
 });
 const HAS_DIGIT = /\d/;
-/**
- * Type-aware, null-safe comparison. Detects numbers and dates; otherwise falls
- * back to a numeric-aware locale string compare. Empty/null values sort last.
- */
+// Type-aware, null-safe comparison: numbers and dates detected, else numeric-aware locale compare.
 function compareValues(aRaw, bRaw, direction) {
     if (direction === "none")
         return 0;
@@ -75,8 +46,7 @@ function compareValues(aRaw, bRaw, direction) {
     const bn = Number(b);
     if (!Number.isNaN(an) && !Number.isNaN(bn))
         return (an - bn) * dir;
-    // No digit means no date, so this skips two Date.parse calls per comparison on the common
-    // text columns (names, emails, statuses) without changing which strings parse as dates.
+    // NOTE: skips Date.parse on text columns with no digits — cheap and safe, since no digit means no date.
     if (HAS_DIGIT.test(a) && HAS_DIGIT.test(b)) {
         const ad = Date.parse(a);
         const bd = Date.parse(b);
@@ -98,11 +68,47 @@ function SortMultiColumnData(data, sortConfig) {
         return 0;
     });
 }
+/** Theme-aware status palette per value — soft fill + semantic ink from `resolveStatusTone`. */
+function buildSemanticStatusPalette(toneByValue, theme) {
+    const c = theme.colors;
+    const scales = {
+        info: c.semantic.info,
+        warning: c.semantic.warning,
+        success: c.semantic.success,
+        error: c.semantic.error,
+        neutral: c.gray,
+    };
+    return Object.fromEntries(Object.entries(toneByValue).map(([value, key]) => {
+        const scale = scales[key];
+        const tone = (0, tone_1.resolveSoftTone)(c, scale);
+        const solidRung = (0, filledSurface_1.solidFillRung)(scale, c.white);
+        const solid = scale[solidRung];
+        return [
+            value,
+            {
+                solid,
+                soft: tone.bg,
+                text: tone.fg,
+                onSolid: (0, filledSurface_1.labelOnFill)(solid, c.white, c.black),
+            },
+        ];
+    }));
+}
 const withAlpha = (hex, aa) => /^#([0-9a-fA-F]{6})$/.test(hex) ? `${hex}${aa}` : hex;
+/** Consumer `statusColors` values are fill seeds — derive bleed + pill ink from them. */
+const resolveStatusOverride = (fill, white, black, surface) => {
+    const soft = withAlpha(fill, "22");
+    const solid = (0, statusTone_1.resolveAvatarFill)(fill);
+    return {
+        solid,
+        soft,
+        text: (0, outlineRung_1.liftToContrast)(fill, (0, color_1.compositeOver)(soft, surface), accentText_1.AA_NORMAL_TEXT),
+        onSolid: (0, accentText_1.onFilled)(solid, white, black),
+    };
+};
 /** Deterministic, theme-aware color palette for groups + status pills. */
 function buildTablePalette(theme) {
     const c = theme.colors;
-    const mode = (0, accentText_1.isDarkCanvas)(c.backgroundColor.main) ? "dark" : "light";
     const scales = [
         c.primary,
         c.semantic.success,
@@ -116,12 +122,14 @@ function buildTablePalette(theme) {
         c.purple,
     ];
     return scales.map((scale) => {
-        const tone = (0, statusTone_1.resolveStatusTone)(scale, mode);
+        const tone = (0, tone_1.resolveSoftTone)(c, scale);
+        const solidRung = (0, filledSurface_1.solidFillRung)(scale, c.white);
+        const solid = scale[solidRung];
         return {
-            solid: scale[500],
+            solid,
             soft: tone.bg,
             text: tone.fg,
-            onSolid: (0, accentText_1.onFilled)(scale[500], c.white, c.black),
+            onSolid: (0, filledSurface_1.labelOnFill)(solid, c.white, c.black),
         };
     });
 }
@@ -134,22 +142,19 @@ const hashKey = (value) => {
 };
 /** Pick a deterministic palette color for a value, with optional consumer override hex. */
 function pickTableColor(value, palette, override, theme) {
+    var _a;
     const white = theme ? theme.colors.white : accentText_1.DEFAULT_WHITE;
     const black = theme ? theme.colors.black : accentText_1.DEFAULT_BLACK;
     if (override) {
-        return { solid: override, soft: withAlpha(override, "22"), text: override, onSolid: (0, accentText_1.onFilled)(override, white, black) };
+        const surface = (_a = theme === null || theme === void 0 ? void 0 : theme.colors.background[50]) !== null && _a !== void 0 ? _a : accentText_1.DEFAULT_WHITE;
+        return resolveStatusOverride(override, white, black, surface);
     }
     if (!palette.length) {
         throw new Error("pickTableColor: empty palette — build it with buildTablePalette(theme).");
     }
     return palette[hashKey(value) % palette.length];
 }
-/**
- * Partition rows by a column, preserving first-seen group order. The group key is
- * a normalized string so object/array values (e.g. a `user` field that is an object
- * or an array of users) group together by their readable text instead of by object
- * identity.
- */
+// Partitions rows by a column, preserving first-seen group order; groups by readable text, not object identity.
 function groupRows(data, groupBy) {
     const order = [];
     const map = new Map();
@@ -205,11 +210,7 @@ const objectToText = (o) => {
         return String(o.value);
     return "";
 };
-/**
- * Readable string for any cell value. Handles primitives, React elements, entity
- * objects (e.g. `user`: `{ name }` / `{ first_name, last_name }`), and arrays of
- * any of those (e.g. a multi-user field) by joining their texts.
- */
+// Readable string for any cell value: primitives, React elements, entity objects, or arrays of those.
 const getStringValue = (value) => {
     if (value === null || value === undefined)
         return "";
@@ -227,10 +228,7 @@ const getStringValue = (value) => {
     }
     return "";
 };
-/**
- * When a column has no `node`, raw cell values are rendered; plain objects
- * (e.g. relation/user fields) must not be passed as React children.
- */
+// When a column has no `node`, plain objects (relation/user fields) can't be passed as React children.
 function normalizeTableCellValue(value) {
     if (value === null || value === undefined)
         return "";
@@ -242,7 +240,6 @@ function normalizeTableCellValue(value) {
     if (react_1.default.isValidElement(value)) {
         return value;
     }
-    // Objects (relation/user) and arrays (multi-user / multi-select) → readable text.
     return getStringValue(value);
 }
 const searchAndSortData = (data, searchValues) => {
@@ -282,22 +279,7 @@ function debounce(func, delay) {
         }, delay);
     };
 }
-function useDebounce(callback, delay) {
-    const callbackRef = (0, react_1.useRef)(callback);
-    const timerRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        callbackRef.current = callback;
-    }, [callback]);
-    const debouncedFn = (0, react_1.useCallback)((...args) => {
-        if (timerRef.current) {
-            clearTimeout(timerRef.current);
-        }
-        timerRef.current = setTimeout(() => {
-            callbackRef.current(...args);
-        }, delay);
-    }, [delay]);
-    return debouncedFn;
-}
+exports.useDebounce = useDebounce_1.useDebouncedCallback;
 const pageSizeCalculation = (records) => {
     const pageSize = [5, 10];
     if (records > 100) {
@@ -339,13 +321,7 @@ const TableCellCalculation = ({ isFrozen, columnWidths, headerIndex, isCheckbox,
     return { leftOffset, cellBgColor, rowBgColor, cellTextColor, rowTextColor };
 };
 exports.TableCellCalculation = TableCellCalculation;
-/**
- * Filters array of objects by checking all property values against the search query.
- *
- * @param data - Array of objects
- * @param query - Search string
- * @returns Filtered data
- */
+// Filters an array of objects by checking all property values against the search query.
 function globalSearchFilter(data, query) {
     if (!query.trim())
         return data;

package/dist/Utils/validation.d.ts

@@ -0,0 +1,13 @@
+export declare const EMAIL_REGEX: RegExp;
+export type ValidationCode = "email_required" | "email_invalid" | "password_required" | "password_min" | "required" | "positive_number" | "file_type" | "file_too_large" | "video_type" | "youtube_required" | "youtube_invalid";
+export declare const defaultValidationMessages: Record<ValidationCode, string>;
+export declare function validateEmail(value: string): ValidationCode | undefined;
+export declare function validatePassword(value: string, minLength?: number): ValidationCode | undefined;
+export declare function validateRequired(value: string): ValidationCode | undefined;
+export declare function validatePositiveNumber(value: string): ValidationCode | undefined;
+export declare function validateFileType(file: File, allowed?: Set<string>): ValidationCode | undefined;
+export declare function validateFileSize(file: File, maxMB: number): ValidationCode | undefined;
+export declare function validateFile(file: File, maxMB: number, allowed?: Set<string>): ValidationCode | undefined;
+export declare function validateVideoFileType(file: File, allowed?: Set<string>): ValidationCode | undefined;
+export declare function validateVideoFile(file: File, maxMB: number, allowed?: Set<string>): ValidationCode | undefined;
+export declare function validateYoutubeUrl(value: string): ValidationCode | undefined;

package/dist/Utils/validation.js

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultValidationMessages = exports.EMAIL_REGEX = void 0;
+exports.validateEmail = validateEmail;
+exports.validatePassword = validatePassword;
+exports.validateRequired = validateRequired;
+exports.validatePositiveNumber = validatePositiveNumber;
+exports.validateFileType = validateFileType;
+exports.validateFileSize = validateFileSize;
+exports.validateFile = validateFile;
+exports.validateVideoFileType = validateVideoFileType;
+exports.validateVideoFile = validateVideoFile;
+exports.validateYoutubeUrl = validateYoutubeUrl;
+exports.EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+exports.defaultValidationMessages = {
+    email_required: "Email is required",
+    email_invalid: "Enter a valid email address",
+    password_required: "Password is required",
+    password_min: "Password must be at least {min} characters",
+    required: "{label} is required",
+    positive_number: "{label} must be a positive number",
+    file_type: "Unsupported file type",
+    file_too_large: "File must be smaller than {max}MB",
+    video_type: "Unsupported video type",
+    youtube_required: "YouTube URL is required",
+    youtube_invalid: "Enter a valid YouTube URL",
+};
+function validateEmail(value) {
+    if (!value.trim())
+        return "email_required";
+    if (!exports.EMAIL_REGEX.test(value.trim()))
+        return "email_invalid";
+    return undefined;
+}
+function validatePassword(value, minLength = 6) {
+    if (!value)
+        return "password_required";
+    if (value.length < minLength)
+        return "password_min";
+    return undefined;
+}
+function validateRequired(value) {
+    if (!value.trim())
+        return "required";
+    return undefined;
+}
+function validatePositiveNumber(value) {
+    if (!value.trim())
+        return "required";
+    const n = Number(value);
+    if (Number.isNaN(n) || n <= 0)
+        return "positive_number";
+    return undefined;
+}
+const DEFAULT_FILE_TYPES = new Set(["application/pdf", "image/jpeg", "image/png", "image/jpg"]);
+function validateFileType(file, allowed = DEFAULT_FILE_TYPES) {
+    return allowed.has(file.type) ? undefined : "file_type";
+}
+function validateFileSize(file, maxMB) {
+    return file.size > maxMB * 1024 * 1024 ? "file_too_large" : undefined;
+}
+function validateFile(file, maxMB, allowed) {
+    var _a;
+    return (_a = validateFileType(file, allowed)) !== null && _a !== void 0 ? _a : validateFileSize(file, maxMB);
+}
+const DEFAULT_VIDEO_TYPES = new Set(["video/mp4", "video/quicktime"]);
+function validateVideoFileType(file, allowed = DEFAULT_VIDEO_TYPES) {
+    return allowed.has(file.type) ? undefined : "video_type";
+}
+function validateVideoFile(file, maxMB, allowed) {
+    var _a;
+    return (_a = validateVideoFileType(file, allowed)) !== null && _a !== void 0 ? _a : validateFileSize(file, maxMB);
+}
+const YOUTUBE_HOSTS = new Set(["youtube.com", "www.youtube.com", "m.youtube.com", "youtu.be"]);
+function validateYoutubeUrl(value) {
+    if (!value.trim())
+        return "youtube_required";
+    let url;
+    try {
+        url = new URL(value.trim());
+    }
+    catch {
+        return "youtube_invalid";
+    }
+    return YOUTUBE_HOSTS.has(url.hostname.toLowerCase()) ? undefined : "youtube_invalid";
+}

package/dist/esm/Components/Accordion/Accordion.js

@@ -4,7 +4,10 @@ import { Accordion as ChakraAccordian, AccordionItem, AccordionButton, Accordion
 import { ChevronDown } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
-import { getAccordionHoverColors } from "./accordionColors.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { accordionFocusRing, getAccordionHoverColors } from "./accordionColors.js";
+/** Chakra Accordion wrapper for header/content pairs; FilterSidebar composes this directly for its collapsible filter sections. */
 const Accordion = ({ allowMultiple, allowToggle, index, onChange, reduceMotion, items, ...rest }) => {
     const { colors } = useCustomTheme();
     const isDark = isDarkCanvas(colors.backgroundColor.main);
@@ -12,20 +15,18 @@ const Accordion = ({ allowMultiple, allowToggle, index, onChange, reduceMotion,
     const headingColor = colors.text[800];
     const bodyColor = colors.text[600];
     const { expandedBg, softHover } = useMemo(() => getAccordionHoverColors(colors, isDark), [colors, isDark]);
+    const focusRing = useMemo(() => accordionFocusRing(colors), [colors]);
     return (_jsx(ChakraAccordian, { allowMultiple: allowMultiple, allowToggle: allowToggle, index: index, onChange: onChange, reduceMotion: reduceMotion, ...rest, children: items.map((item, idx) => {
             var _a;
-            return (_jsx(AccordionItem, { border: `0.063rem solid ${border}`, borderRadius: "xl", bg: colors.background[50], mb: 3, overflow: "hidden", transition: "border-color 0.15s ease, box-shadow 0.15s ease", _last: { mb: 0 }, _hover: { borderColor: colors.boxborder[200] }, ...item.itemProps, sx: (_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.itemStyle, children: ({ isExpanded }) => {
+            return (_jsx(AccordionItem, { border: "1px solid", borderColor: border, borderRadius: "xl", bg: colors.background[50], boxShadow: "none", mb: 3, overflow: "hidden", _last: { mb: 0 }, ...item.itemProps, sx: (_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.itemStyle, children: ({ isExpanded }) => {
                     var _a, _b, _c;
-                    return (_jsxs(_Fragment, { children: [_jsx("h2", { children: _jsxs(AccordionButton, { px: 4, py: 3, gap: 3, fontSize: "0.875rem", fontWeight: 600, color: headingColor, bg: isExpanded ? expandedBg : "transparent", transition: "background 0.15s ease", _hover: { bg: isExpanded ? expandedBg : softHover }, _focusVisible: {
-                                        boxShadow: "none",
-                                        outline: `0.125rem solid ${colors.primary[300]}`,
-                                        outlineOffset: "-0.125rem",
-                                    }, ...item.buttonProps, sx: {
+                    return (_jsxs(_Fragment, { children: [_jsx("h2", { children: _jsxs(AccordionButton, { px: 4, py: 3, gap: 3, fontSize: "0.875rem", fontWeight: 600, color: headingColor, bg: isExpanded ? expandedBg : "transparent", transition: transitionFor(["background-color"]), _hover: { bg: isExpanded ? expandedBg : softHover }, _focusVisible: focusRing, ...item.buttonProps, sx: {
+                                        ...reducedMotionSx(),
                                         ...(_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.buttonStyle,
                                         "&:hover": {
                                             ...(_b = item.customStyles) === null || _b === void 0 ? void 0 : _b.hoverbuttonStyle,
                                         },
-                                    }, children: [_jsx(Box, { as: "span", flex: "1", textAlign: "left", children: item.header }), _jsx(Flex, { align: "center", justify: "center", boxSize: "1.5rem", flexShrink: 0, borderRadius: "md", color: isExpanded ? colors.accentText : colors.textMuted, bg: isExpanded ? colors.primary.opacity[16] : "transparent", transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)", transition: "transform 0.2s ease, color 0.2s ease, background 0.2s ease", children: _jsx(ChevronDown, { size: 16 }) })] }) }), _jsx(AccordionPanel, { px: 4, pt: 1, pb: 4, fontSize: "0.875rem", lineHeight: "1.5", color: bodyColor, ...item.panelProps, sx: (_c = item.customStyles) === null || _c === void 0 ? void 0 : _c.panelStyle, children: item.content })] }));
+                                    }, children: [_jsx(Box, { as: "span", flex: "1", textAlign: "left", children: item.header }), _jsx(Flex, { align: "center", justify: "center", boxSize: "1.5rem", flexShrink: 0, borderRadius: "lg", color: isExpanded ? colors.accentText : colors.textMuted, bg: isExpanded ? colors.primary.opacity[16] : "transparent", transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)", transition: transitionFor(["transform", "color", "background-color"], "base"), sx: reducedMotionSx(), children: _jsx(ChevronDown, { size: 16 }) })] }) }), _jsx(AccordionPanel, { px: 4, pt: 1, pb: 4, fontSize: "0.875rem", lineHeight: "1.5", color: bodyColor, ...item.panelProps, sx: (_c = item.customStyles) === null || _c === void 0 ? void 0 : _c.panelStyle, children: item.content })] }));
                 } }, idx));
         }) }));
 };

package/dist/esm/Components/Accordion/accordionColors.js

@@ -1,18 +1,10 @@
 import { compositeOver } from "../../Theme/tokens/builders/color.js";
 import { liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
-/**
- * Same perceptibility floor the SideBar ladder uses — a state a user cannot see is not a state.
- * Light mode `softHover` measured 1.042-1.105 across all 9 brands (invisible) while dark sat at
- * 1.58-1.85; `expandedBg` (`primary.opacity[8]`, an 8%-alpha tint) is the same bug class — an
- * 8% tint composited over a near-white canvas is itself near-white. Both are resolved against
- * the rest surface so light and dark actually agree on "you can see this".
- */
+import { FOCUS_HALO_WIDTH, FOCUS_RING_WIDTH } from "../../Theme/chakra/focusRing.styles.js";
+// NOTE: light softHover measured 1.04-1.11 (invisible) unresolved — both modes now resolve against the rest surface.
 const MIN_HOVER_STEP = 1.15;
 export const getAccordionHoverColors = (colors, isDark) => {
     if (isDark) {
-        // primary.opacity[8] composited over the dark canvas collapses to ~1.07:1 (near-black on
-        // near-black) — gray[200] is an opaque rung that stays visibly above canvas (~1.6:1) without
-        // being as loud as the gray[300] hover fill FilterSidebar/Table already use.
         return {
             expandedBg: colors.gray[200],
             softHover: colors.gray[200],
@@ -25,3 +17,10 @@ export const getAccordionHoverColors = (colors, isDark) => {
         softHover: liftToContrast(colors.table.hover[100], rest, MIN_HOVER_STEP),
     };
 };
+/** The Button's two-tone `focusRing`, drawn inset because the item clips overflow. */
+export const accordionFocusRing = (colors) => ({
+    outline: "2px solid transparent",
+    outlineOffset: "-2px",
+    boxShadow: `inset 0 0 0 ${FOCUS_RING_WIDTH - FOCUS_HALO_WIDTH}px ${colors.focusRing.ring}, ` +
+        `inset 0 0 0 ${FOCUS_RING_WIDTH}px ${colors.focusRing.halo}`,
+});

package/dist/esm/Components/AlertDialog/AlertDialog.js

@@ -1,8 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AlertDialog as ChakraAlertDialog, AlertDialogBody, AlertDialogCloseButton, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, Button, } from "@chakra-ui/react";
-import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-const AlertDialog = ({ isOpen, onClose, leastDestructiveRef, content, title, confirmButtonText = "Yes", cancelButtonText = "No", isConfirmLoading, onConfirm, ContentStyle, headerStyle, bodyStyle, footerStyle, closeButtonStyle, button1Style, button2Style, isCentered, key, }) => {
-    const { colors } = useCustomTheme();
-    return (_jsxs(ChakraAlertDialog, { motionPreset: "slideInBottom", leastDestructiveRef: leastDestructiveRef, onClose: onClose, isOpen: isOpen, isCentered: isCentered, children: [_jsx(AlertDialogOverlay, {}), _jsxs(AlertDialogContent, { bg: colors.background[50], sx: ContentStyle, children: [_jsx(AlertDialogHeader, { sx: headerStyle, children: title }), _jsx(AlertDialogCloseButton, { sx: closeButtonStyle }), _jsx(AlertDialogBody, { sx: bodyStyle, children: content }), _jsxs(AlertDialogFooter, { sx: footerStyle, children: [_jsx(Button, { ref: leastDestructiveRef, onClick: onClose, variant: "outline", colorScheme: "red", size: "sm", sx: button1Style, children: cancelButtonText }), _jsx(Button, { colorScheme: "primary", onClick: onConfirm, isLoading: isConfirmLoading, ml: 3, size: "sm", sx: button2Style, children: confirmButtonText })] })] })] }, key));
-};
+import { AlertDialog as ChakraAlertDialog, AlertDialogBody, AlertDialogCloseButton, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, } from "@chakra-ui/react";
+import Button from "../Button/Button.js";
+/** Renders a fixed Cancel/Confirm AlertDialog from title+content props — not a substitute for Modal when you need custom footer buttons or slots. */
+const AlertDialog = ({ isOpen, onClose, leastDestructiveRef, closeOnOverlayClick, closeOnEsc, content, title, confirmButtonText = "Confirm", cancelButtonText = "Cancel", isConfirmLoading, onConfirm, tone = "default", ContentStyle, headerStyle, bodyStyle, footerStyle, closeButtonStyle, button1Style, button2Style, isCentered, }) => (_jsxs(ChakraAlertDialog, { motionPreset: "slideInBottom", leastDestructiveRef: leastDestructiveRef, onClose: onClose, isOpen: isOpen, isCentered: isCentered, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, children: [_jsx(AlertDialogOverlay, {}), _jsxs(AlertDialogContent, { sx: ContentStyle, children: [_jsx(AlertDialogHeader, { sx: headerStyle, children: title }), _jsx(AlertDialogCloseButton, { sx: closeButtonStyle }), _jsx(AlertDialogBody, { sx: bodyStyle, children: content }), _jsxs(AlertDialogFooter, { sx: footerStyle, children: [_jsx(Button, { ref: leastDestructiveRef, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm", sx: button1Style, label: cancelButtonText }), _jsx(Button, { colorScheme: tone === "danger" ? "red" : "primary", onClick: onConfirm, isLoading: isConfirmLoading, size: "sm", sx: button2Style, label: confirmButtonText })] })] })] }));
 export default AlertDialog;