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

package/dist/esm/Utils/formatDate.js

@@ -0,0 +1,138 @@
+import { DEFAULT_LOCALE } from "./price.js";
+export const DEFAULT_DATE_FALLBACK = "—";
+const DAY_KEY = /^(\d{4})-(\d{2})-(\d{2})$/;
+const EPOCH_DIGITS = /^-?\d+$/;
+const ENGLISH = /^en(?:-|$)/i;
+const RUNTIME_SPACES = /[\u2009\u202f]/g;
+const ONE_DIGIT = /^\d$/;
+const formatters = new Map();
+const build = (locale, options) => {
+    try {
+        return new Intl.DateTimeFormat(locale, options);
+    }
+    catch {
+        try {
+            return new Intl.DateTimeFormat(DEFAULT_LOCALE, options);
+        }
+        catch {
+            return new Intl.DateTimeFormat(DEFAULT_LOCALE, { ...options, timeZone: undefined });
+        }
+    }
+};
+const formatterFor = (locale, options) => {
+    const key = JSON.stringify([locale, options]);
+    let formatter = formatters.get(key);
+    if (!formatter) {
+        const format = build(locale, options);
+        formatter = { format, english: ENGLISH.test(format.resolvedOptions().locale) };
+        formatters.set(key, formatter);
+    }
+    return formatter;
+};
+const utcNoon = ({ year, month, day }) => {
+    const date = new Date(Date.UTC(2000, month, day, 12));
+    date.setUTCFullYear(year);
+    return date;
+};
+const isValidDay = (day) => {
+    const probe = utcNoon(day);
+    return probe.getUTCFullYear() === day.year && probe.getUTCMonth() === day.month && probe.getUTCDate() === day.day;
+};
+const resolve = (value) => {
+    let date;
+    if (value instanceof Date)
+        date = value;
+    else if (typeof value === "number")
+        date = new Date(value);
+    else if (typeof value === "string") {
+        const text = value.trim();
+        if (!text)
+            return null;
+        const key = DAY_KEY.exec(text);
+        if (key) {
+            const day = { year: Number(key[1]), month: Number(key[2]) - 1, day: Number(key[3]) };
+            return isValidDay(day) ? { kind: "day", day } : null;
+        }
+        date = new Date(EPOCH_DIGITS.test(text) ? Number(text) : text);
+    }
+    else
+        return null;
+    return Number.isNaN(date.getTime()) ? null : { kind: "instant", date };
+};
+const ZONE_PARTS = { year: "numeric", month: "numeric", day: "numeric" };
+const dayIn = (date, timeZone) => {
+    if (timeZone === undefined)
+        return { year: date.getFullYear(), month: date.getMonth(), day: date.getDate() };
+    const read = {};
+    for (const part of formatterFor("en-US", { ...ZONE_PARTS, timeZone }).format.formatToParts(date)) {
+        read[part.type] = Number(part.value);
+    }
+    return { year: read.year, month: read.month - 1, day: read.day };
+};
+const toDay = (resolved, timeZone) => resolved.kind === "day" ? resolved.day : dayIn(resolved.date, timeZone);
+const dayOrdinal = ({ year, month, day }) => year * 10000 + month * 100 + day;
+const dateFields = (options) => ({
+    day: "2-digit",
+    month: "short",
+    ...(options.year === "never" ? {} : { year: "numeric" }),
+});
+const join = (parts, english) => parts
+    .map(({ type, value }) => {
+    if (type === "day" && ONE_DIGIT.test(value))
+        return `0${value}`;
+    if (english && type === "month" && value === "Sept")
+        return "Sep";
+    return value;
+})
+    .join("")
+    .replace(RUNTIME_SPACES, " ");
+const dayFormatter = (options) => { var _a; return formatterFor((_a = options.locale) !== null && _a !== void 0 ? _a : DEFAULT_LOCALE, { ...dateFields(options), timeZone: "UTC" }); };
+const formatDay = (day, options) => {
+    const { format, english } = dayFormatter(options);
+    return join(format.formatToParts(utcNoon(day)), english);
+};
+/** "09 Oct 2026" in en-IN; locale order and month names otherwise. Null or invalid input gives `fallback`. */
+export function formatDate(value, options = {}) {
+    var _a;
+    const resolved = resolve(value);
+    if (!resolved)
+        return (_a = options.fallback) !== null && _a !== void 0 ? _a : DEFAULT_DATE_FALLBACK;
+    return formatDay(toDay(resolved, options.timeZone), options);
+}
+/** "09 Oct 2026, 2:05 pm" in en-IN; a bare `YYYY-MM-DD` has no time, so it prints the date alone. */
+export function formatDateTime(value, options = {}) {
+    var _a, _b;
+    const resolved = resolve(value);
+    if (!resolved)
+        return (_a = options.fallback) !== null && _a !== void 0 ? _a : DEFAULT_DATE_FALLBACK;
+    if (resolved.kind === "day")
+        return formatDay(resolved.day, options);
+    const { format, english } = formatterFor((_b = options.locale) !== null && _b !== void 0 ? _b : DEFAULT_LOCALE, {
+        ...dateFields(options),
+        hour: "numeric",
+        minute: "2-digit",
+        ...(options.time ? { hour12: options.time === "12h" } : {}),
+        ...(options.timeZone ? { timeZone: options.timeZone } : {}),
+    });
+    return join(format.formatToParts(resolved.date), english);
+}
+/** "09 – 24 Oct 2026": what both ends share is written once; reversed ends are reordered, one missing end prints the other. */
+export function formatDateRange(start, end, options = {}) {
+    var _a;
+    const first = resolve(start);
+    const second = resolve(end);
+    if (!first || !second) {
+        const only = first !== null && first !== void 0 ? first : second;
+        return only ? formatDay(toDay(only, options.timeZone), options) : ((_a = options.fallback) !== null && _a !== void 0 ? _a : DEFAULT_DATE_FALLBACK);
+    }
+    const a = toDay(first, options.timeZone);
+    const b = toDay(second, options.timeZone);
+    const [from, to] = dayOrdinal(a) <= dayOrdinal(b) ? [a, b] : [b, a];
+    if (dayOrdinal(from) === dayOrdinal(to))
+        return formatDay(from, options);
+    const { format, english } = dayFormatter(options);
+    if (typeof format.formatRangeToParts !== "function") {
+        return `${formatDay(from, options)} – ${formatDay(to, options)}`;
+    }
+    return join(format.formatRangeToParts(utcNoon(from), utcNoon(to)), english);
+}

package/dist/esm/Utils/functions.js

@@ -0,0 +1,9 @@
+/** `deal_stage` / `nextFollowUp` / `close-date` → `Deal Stage` / `Next Follow Up` / `Close Date`. */
+export function toWords(str) {
+    return str
+        .replace(/([a-z0-9])([A-Z])/g, "$1 $2")
+        .split(/[_\-\s]+/)
+        .filter(Boolean)
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+        .join(" ");
+}

package/dist/esm/Utils/humanize.js

@@ -0,0 +1,15 @@
+/** `snake_case` / `kebab-case` → `Snake case` — first letter capitalized, rest untouched. */
+export function humanize(value) {
+    if (!value)
+        return "";
+    const text = value.replace(/[_-]/g, " ");
+    return text.charAt(0).toUpperCase() + text.slice(1);
+}
+export function createEnumLabelResolver(keyMap) {
+    return (value) => {
+        var _a;
+        if (!value)
+            return "";
+        return (_a = keyMap[value]) !== null && _a !== void 0 ? _a : humanize(value);
+    };
+}

package/dist/esm/Utils/lazyWithRetry.js

@@ -0,0 +1,45 @@
+import { lazy } from "react";
+const RELOAD_GUARD_KEY = "pixelize:chunk-reloaded";
+const CHUNK_ERROR_PATTERNS = [
+    "failed to fetch dynamically imported module",
+    "error loading dynamically imported module",
+    "importing a module script failed",
+];
+export function isChunkLoadError(error) {
+    const message = error instanceof Error ? error.message : String(error !== null && error !== void 0 ? error : "");
+    const lower = message.toLowerCase();
+    return CHUNK_ERROR_PATTERNS.some((pattern) => lower.includes(pattern));
+}
+function reloadOnce() {
+    if (window.sessionStorage.getItem(RELOAD_GUARD_KEY))
+        return false;
+    window.sessionStorage.setItem(RELOAD_GUARD_KEY, "1");
+    window.location.reload();
+    return true;
+}
+/** Clears the one-shot reload guard; call once the app has rendered so a later deploy can reload again. */
+export function clearChunkReloadGuard() {
+    window.sessionStorage.removeItem(RELOAD_GUARD_KEY);
+}
+/** Wraps `React.lazy`; on a stale-chunk 404 it reloads once instead of leaving a broken import. */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- mirrors React.lazy's own constraint
+export function lazyWithRetry(factory) {
+    return lazy(async () => {
+        try {
+            return await factory();
+        }
+        catch (error) {
+            if (isChunkLoadError(error) && reloadOnce()) {
+                return await new Promise(() => { });
+            }
+            throw error;
+        }
+    });
+}
+// Vite's vite:preloadError fires before any component renders; lazyWithRetry alone can't see it.
+export function installPreloadErrorReload() {
+    window.addEventListener("vite:preloadError", (event) => {
+        event.preventDefault();
+        reloadOnce();
+    });
+}

package/dist/esm/Utils/mergeRefs.js

@@ -0,0 +1,12 @@
+/** Assign a value to a callback ref or a ref object. */
+export function setRef(ref, value) {
+    if (typeof ref === "function")
+        ref(value);
+    else if (ref && typeof ref === "object")
+        ref.current = value;
+}
+// Combines multiple refs into one callback ref — for cloning an element while preserving a caller's own ref.
+export function mergeRefs(...refs) {
+    return (value) => refs.forEach((r) => setRef(r, value));
+}
+export default mergeRefs;

package/dist/esm/Utils/planBadge.js

@@ -0,0 +1,95 @@
+import { formatPlanElapsed, formatPlanRemaining, } from "./planExpiry.js";
+const UPGRADE_LABEL = "Upgrade your plan";
+const UPGRADE_MOBILE_LABEL = "Upgrade";
+const EXPIRED_MOBILE_LABEL = "Expired";
+const TRIAL_LABEL = "Trial";
+const GENERIC_PLAN_NAME = "Plan";
+const LEGACY_FREE_PLAN_ID = 1;
+const TRIAL_DANGER_DAYS = 3;
+const ACTIVE_WARNING_DAYS = 15;
+const HIDDEN = {
+    visible: false,
+    label: "",
+    mobileLabel: "",
+    subtitle: "",
+    tone: "normal",
+};
+const upgrade = (subtitle, tone = "normal") => ({
+    visible: true,
+    label: UPGRADE_LABEL,
+    mobileLabel: UPGRADE_MOBILE_LABEL,
+    subtitle,
+    tone,
+});
+const normalize = (value) => String(value !== null && value !== void 0 ? value : "")
+    .trim()
+    .toLowerCase();
+function isFreePlan(input, planName) {
+    if (input.isFreePlan !== undefined)
+        return input.isFreePlan;
+    if (normalize(input.planCode) === "free")
+        return true;
+    if (input.planId !== null && input.planId !== undefined) {
+        return Number(input.planId) === LEGACY_FREE_PLAN_ID;
+    }
+    return normalize(planName) === "free";
+}
+/** Whole days from today to the expiry day; null when there is no usable date. */
+function daysUntil(expiryDate, now) {
+    if (expiryDate === null || expiryDate === undefined || expiryDate === "") {
+        return null;
+    }
+    const expiry = expiryDate instanceof Date ? expiryDate : new Date(expiryDate);
+    if (isNaN(expiry.getTime()))
+        return null;
+    const startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
+    return Math.round((startOfDay(expiry).getTime() - startOfDay(now).getTime()) / 86400000);
+}
+// Turns an org's plan state into PlanPill's label, urgency tone and inset-chip text; centralized so every app matches.
+export function resolvePlanBadge(input) {
+    var _a, _b;
+    if (!input.canManageBilling)
+        return HIDDEN;
+    const now = (_a = input.now) !== null && _a !== void 0 ? _a : new Date();
+    const planName = ((_b = input.planName) === null || _b === void 0 ? void 0 : _b.trim()) || "";
+    const daysLeft = daysUntil(input.expiryDate, now);
+    const remaining = formatPlanRemaining(input.expiryDate, now);
+    const elapsed = formatPlanElapsed(input.expiryDate, now);
+    // NOTE: checked before expiry — a lapsed org downgrades to free, and "Free expired" isn't worth shouting about.
+    if (isFreePlan(input, planName))
+        return upgrade("");
+    if (input.isExpired || elapsed !== "") {
+        return {
+            visible: true,
+            label: `${planName || GENERIC_PLAN_NAME} expired`,
+            mobileLabel: EXPIRED_MOBILE_LABEL,
+            subtitle: elapsed,
+            tone: "danger",
+        };
+    }
+    if (input.hasPlan === false)
+        return upgrade("");
+    if (input.isTrial) {
+        return {
+            visible: true,
+            label: TRIAL_LABEL,
+            mobileLabel: TRIAL_LABEL,
+            subtitle: remaining,
+            tone: daysLeft !== null && daysLeft <= TRIAL_DANGER_DAYS
+                ? "danger"
+                : "warning",
+        };
+    }
+    const tone = daysLeft !== null && daysLeft < ACTIVE_WARNING_DAYS ? "warning" : "normal";
+    // An active paid plan names itself — falling through to "Upgrade your plan"
+    // told users with years remaining that they were on nothing.
+    if (!planName)
+        return upgrade(remaining, tone);
+    return {
+        visible: true,
+        label: planName,
+        mobileLabel: planName,
+        subtitle: remaining,
+        tone,
+    };
+}

package/dist/esm/Utils/planExpiry.js

@@ -0,0 +1,84 @@
+const MS_PER_DAY = 24 * 60 * 60 * 1000;
+function toDate(value) {
+    if (value === null || value === undefined || value === "")
+        return null;
+    const date = value instanceof Date ? new Date(value.getTime()) : new Date(value);
+    return isNaN(date.getTime()) ? null : date;
+}
+function startOfDay(date) {
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+function addCalendarMonths(date, months) {
+    const lastDayOfTarget = new Date(date.getFullYear(), date.getMonth() + months + 1, 0).getDate();
+    return new Date(date.getFullYear(), date.getMonth() + months, Math.min(date.getDate(), lastDayOfTarget));
+}
+function daysBetween(from, to) {
+    return Math.round((to.getTime() - from.getTime()) / MS_PER_DAY);
+}
+function unit(count, suffix) {
+    return `${count}${suffix}`;
+}
+// NOTE: anchors on real month boundaries so Jan 31 -> Feb 28 reads as 28 days, not "1 month".
+export function splitMonthsAndDays(from, to) {
+    let months = (to.getFullYear() - from.getFullYear()) * 12 +
+        (to.getMonth() - from.getMonth());
+    if (to.getDate() < from.getDate())
+        months -= 1;
+    if (months < 0)
+        months = 0;
+    return { months, days: daysBetween(addCalendarMonths(from, months), to) };
+}
+// Compact plan time left, e.g. "3mo left" / "18d left". "" when unusable or already lapsed.
+export function formatPlanExpiry(expiryDate, now) {
+    const expiry = toDate(expiryDate);
+    if (!expiry)
+        return "";
+    const expiryDay = startOfDay(expiry);
+    const today = startOfDay(now !== null && now !== void 0 ? now : new Date());
+    const daysLeft = daysBetween(today, expiryDay);
+    if (daysLeft < 0)
+        return "";
+    if (daysLeft === 0)
+        return "Expires today";
+    const { months, days } = splitMonthsAndDays(today, expiryDay);
+    return months > 0 ? `${unit(months, "mo")} left` : `${unit(days, "d")} left`;
+}
+function formatHoursMinutes(ms, suffix) {
+    const totalMinutes = Math.floor(ms / 60000);
+    const hours = Math.floor(totalMinutes / 60);
+    const minutes = totalMinutes % 60;
+    return hours > 0
+        ? `${unit(hours, "h")} ${unit(minutes, "m")} ${suffix}`
+        : `${unit(Math.max(minutes, 1), "m")} ${suffix}`;
+}
+// NOTE: like formatPlanExpiry but to the minute in the final day — for a badge staying on screen.
+export function formatPlanRemaining(expiryDate, now) {
+    const expiry = toDate(expiryDate);
+    if (!expiry)
+        return "";
+    const referenceNow = now !== null && now !== void 0 ? now : new Date();
+    const msLeft = expiry.getTime() - referenceNow.getTime();
+    if (msLeft < 0)
+        return "";
+    if (msLeft < MS_PER_DAY) {
+        return msLeft === 0 ? "Expires today" : formatHoursMinutes(msLeft, "left");
+    }
+    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, e.g. "1h 10m ago" / "2d ago". "" while still live.
+export function formatPlanElapsed(expiryDate, now) {
+    const expiry = toDate(expiryDate);
+    if (!expiry)
+        return "";
+    const referenceNow = now !== null && now !== void 0 ? now : new Date();
+    const msAgo = referenceNow.getTime() - expiry.getTime();
+    if (msAgo <= 0)
+        return "";
+    if (msAgo < MS_PER_DAY)
+        return formatHoursMinutes(msAgo, "ago");
+    const { months, days } = splitMonthsAndDays(startOfDay(expiry), startOfDay(referenceNow));
+    return months > 0
+        ? `${unit(months, "mo")} ago`
+        : `${unit(Math.max(days, 1), "d")} ago`;
+}

package/dist/esm/Utils/price.js

@@ -0,0 +1,32 @@
+export const DEFAULT_CURRENCY = "INR";
+export const DEFAULT_LOCALE = "en-IN";
+const formatters = new Map();
+const formatterFor = (locale, currency, minimum, maximum) => {
+    const key = `${locale}|${currency}|${minimum}|${maximum}`;
+    let formatter = formatters.get(key);
+    if (!formatter) {
+        formatter = new Intl.NumberFormat(locale, { style: "currency", currency, minimumFractionDigits: minimum, maximumFractionDigits: maximum });
+        formatters.set(key, formatter);
+    }
+    return formatter;
+};
+export function formatPrice(value, options = {}) {
+    const { currency = DEFAULT_CURRENCY, locale = DEFAULT_LOCALE, maximumFractionDigits } = options;
+    const whole = Number.isInteger(value);
+    return formatterFor(locale, currency, whole ? 0 : 2, maximumFractionDigits !== null && maximumFractionDigits !== void 0 ? maximumFractionDigits : (whole ? 0 : 2)).format(value);
+}
+export function discountPercent(price, mrp) {
+    if (mrp === undefined || mrp <= price || mrp <= 0)
+        return 0;
+    return Math.round(((mrp - price) / mrp) * 100);
+}
+export function discountAmount(price, mrp) {
+    if (mrp === undefined || mrp <= price)
+        return 0;
+    return mrp - price;
+}
+export function unitPrice(price, quantity, unit, per = 1) {
+    if (!(quantity > 0))
+        return null;
+    return { value: Math.round((price / quantity) * per * 100) / 100, per, unit };
+}

package/dist/esm/Utils/rafThrottle.js

@@ -0,0 +1,20 @@
+// NOTE: coalesces bursts into one call per animation frame — the trailing call's args win.
+export const rafThrottle = (fn) => {
+    let frame = null;
+    let latest;
+    const throttled = (...args) => {
+        latest = args;
+        if (frame !== null)
+            return;
+        frame = requestAnimationFrame(() => {
+            frame = null;
+            fn(...latest);
+        });
+    };
+    throttled.cancel = () => {
+        if (frame !== null)
+            cancelAnimationFrame(frame);
+        frame = null;
+    };
+    return throttled;
+};