pixelize-design-library 2.4.1-beta.9 → 2.4.2-beta.0

package/dist/esm/Theme/tokens/primitives/radii.js

@@ -0,0 +1,12 @@
+const radii = {
+    none: "0",
+    sm: "0.125rem",
+    base: "0.25rem",
+    md: "0.375rem",
+    lg: "0.5rem",
+    xl: "0.75rem",
+    "2xl": "1rem",
+    "3xl": "1.5rem",
+    full: "9999px",
+};
+export default radii;

package/dist/esm/Theme/tokens/primitives/shadows.js

@@ -0,0 +1,15 @@
+/** Light-mode shadow ramp. Dark mode deepens these — see `builders/buildDarkShadows`. */
+const shadows = {
+    xs: "0 0 0 1px rgba(0, 0, 0, 0.05)",
+    sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+    base: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
+    md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+    lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+    xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+    "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+    outline: "0 0 0 3px rgba(66, 153, 225, 0.6)",
+    inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
+    none: "none",
+    darkLg: "0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.5)",
+};
+export default shadows;

package/dist/esm/Theme/tokens/primitives/sizes.js

@@ -0,0 +1,34 @@
+import space from "./space.js";
+/**
+ * `screenW`/`screenH` use viewport units — a web concept. The mobile port should
+ * map these to `Dimensions.get("window")` rather than consuming them literally.
+ */
+const sizes = {
+    ...space,
+    full: "100%",
+    screenW: "100vw",
+    screenH: "100vh",
+    max: "max-content",
+    min: "min-content",
+    "3xs": "14rem",
+    "2xs": "16rem",
+    xs: "20rem",
+    sm: "24rem",
+    md: "28rem",
+    lg: "32rem",
+    xl: "36rem",
+    "2xl": "42rem",
+    "3xl": "48rem",
+    "4xl": "56rem",
+    "5xl": "64rem",
+    "6xl": "72rem",
+    "7xl": "80rem",
+    "8xl": "90rem",
+    container: {
+        sm: "640px",
+        md: "768px",
+        lg: "1024px",
+        xl: "1280px",
+    },
+};
+export default sizes;

package/dist/esm/Theme/tokens/primitives/space.js

@@ -0,0 +1,33 @@
+const space = {
+    px: "1px",
+    0: "0",
+    1: "0.25rem", // 4px
+    2: "0.5rem", // 8px
+    3: "0.75rem", // 12px
+    4: "1rem", // 16px
+    5: "1.25rem", // 20px
+    6: "1.5rem", // 24px
+    7: "1.75rem", // 28px
+    8: "2rem", // 32px
+    9: "2.25rem", // 36px
+    10: "2.5rem", // 40px
+    12: "3rem", // 48px
+    14: "3.5rem", // 56px
+    16: "4rem", // 64px
+    20: "5rem", // 80px
+    24: "6rem", // 96px
+    28: "7rem", // 112px
+    32: "8rem", // 128px
+    36: "9rem", // 144px
+    40: "10rem", // 160px
+    44: "11rem", // 176px
+    48: "12rem", // 192px
+    52: "13rem", // 208px
+    56: "14rem", // 224px
+    60: "15rem", // 240px
+    64: "16rem", // 256px
+    72: "18rem", // 288px
+    80: "20rem", // 320px
+    96: "24rem", // 384px
+};
+export default space;

package/dist/esm/Theme/tokens/primitives/typography.js

@@ -0,0 +1,40 @@
+/**
+ * Pure typography tokens. Platform-agnostic.
+ *
+ * NOTE: the web build must additionally load the Inter Variable font face
+ * (`Theme/chakra/fonts.web.ts` does the CSS side-effect import). That import is
+ * deliberately NOT here — a CSS import would break the mobile port of this folder.
+ */
+export const fonts = {
+    body: "Inter Variable, sans-serif",
+    heading: "Inter Variable, sans-serif",
+    mono: "Inter Variable, sans-serif",
+};
+export const fontSizes = {
+    xs: "0.75rem",
+    sm: "0.875rem",
+    md: "1rem",
+    lg: "1.125rem",
+    xl: "1.25rem",
+    "2xl": "1.5rem",
+    "3xl": "1.875rem",
+    "4xl": "2.25rem",
+    "5xl": "3rem",
+    "6xl": "3.75rem",
+    "7xl": "4.5rem",
+    "8xl": "6rem",
+    "9xl": "8rem",
+};
+export const fontWeights = {
+    hairline: 100,
+    thin: 200,
+    light: 300,
+    normal: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700,
+    extrabold: 800,
+    black: 900,
+};
+const typography = { fonts, fontSizes, fontWeights };
+export default typography;

package/dist/esm/Theme/tokens/primitives/zIndices.js

@@ -0,0 +1,16 @@
+const zIndices = {
+    hide: -1,
+    auto: "auto",
+    base: 0,
+    docked: 10,
+    dropdown: 1000,
+    sticky: 1100,
+    banner: 1200,
+    overlay: 1300,
+    modal: 1400,
+    popover: 1500,
+    skipLink: 1600,
+    toast: 1700,
+    tooltip: 1800,
+};
+export default zIndices;

package/dist/esm/Theme/tokens/types.js

@@ -0,0 +1,7 @@
+/**
+ * Pure token types — shared by web (Chakra) and mobile design libraries.
+ *
+ * PURITY RULE: nothing under `Theme/tokens/**` may import Chakra, React, or CSS.
+ * This folder is copy-paste portable to the mobile design library as-is.
+ */
+export {};

package/dist/esm/Theme/useCustomTheme.js

@@ -0,0 +1,4 @@
+import { useTheme as useChakraTheme } from "@chakra-ui/react";
+export const useCustomTheme = () => {
+    return useChakraTheme();
+};

package/dist/esm/Utils/accountHandoff.js

@@ -0,0 +1,139 @@
+/**
+ * Cross-app "Account handoff": deep-link from a product app (CRM, Tickets, HRMS)
+ * into the Account app carrying the token, so the user lands signed in. Consuming
+ * apps once copy-pasted this per repo; it lives here so they share one contract.
+ *
+ * Query-param contract (must stay in sync across every caller):
+ * `sourceApp`, `returnUrl`, `orgId`, `api_key` (+ `userId` on the users page).
+ *
+ * The library is pre-bundled, so it must not read `import.meta.env` — that would
+ * bake in the library's own build env. Env-derived values are injected as config.
+ */
+const ALLOWED_RETURN_HOST_PATTERNS = [
+    /^localhost$/,
+    /^127\.0\.0\.1$/,
+    /\.pixelizetech\.com$/i,
+];
+const DEFAULT_ACCOUNT_PORT = "3000";
+export function isAllowedReturnUrl(url) {
+    try {
+        const parsed = new URL(url);
+        if (parsed.protocol !== "https:" && parsed.protocol !== "http:") {
+            return false;
+        }
+        return ALLOWED_RETURN_HOST_PATTERNS.some((pattern) => pattern.test(parsed.hostname));
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * Receiver side (Account). Returns the `returnUrl` param only when it passes the
+ * allowlist, else the caller's `defaultReturnUrl` when that is allowed, else null.
+ * `fallbackOrgId` is accepted for caller symmetry; the app owns any org-derived
+ * fallback via `opts.defaultReturnUrl`.
+ */
+export function resolveReturnUrl(searchParams, fallbackOrgId, opts) {
+    void fallbackOrgId;
+    const returnUrl = searchParams.get("returnUrl");
+    if (returnUrl && isAllowedReturnUrl(returnUrl)) {
+        return returnUrl;
+    }
+    const fallback = opts === null || opts === void 0 ? void 0 : opts.defaultReturnUrl;
+    if (fallback && isAllowedReturnUrl(fallback)) {
+        return fallback;
+    }
+    return null;
+}
+function isLocalDevHost(hostname) {
+    return /^(localhost|127\.0\.0\.1)$/i.test(hostname);
+}
+function currentPagePort() {
+    return (window.location.port ||
+        (window.location.protocol === "https:" ? "443" : "80"));
+}
+export function createAccountHandoff(config) {
+    var _a;
+    /** Account origin for local dev. Never this app's own port — a same-origin URL would keep the user here. */
+    function localAccountBase(hostname) {
+        const pagePort = currentPagePort();
+        let port = String(config.accountLocalPort || DEFAULT_ACCOUNT_PORT).trim() ||
+            DEFAULT_ACCOUNT_PORT;
+        if (port === pagePort || port === config.appLocalPort) {
+            port = DEFAULT_ACCOUNT_PORT;
+        }
+        if (port === pagePort) {
+            port = pagePort === "3000" ? "3001" : DEFAULT_ACCOUNT_PORT;
+        }
+        return `http://${hostname}:${port}`;
+    }
+    function resolveAccountUiBase() {
+        const hostname = window.location.hostname;
+        const configured = String(config.accountUiBase || "")
+            .trim()
+            .replace(/\/$/, "");
+        if (!config.forceRemote && isLocalDevHost(hostname)) {
+            return localAccountBase(hostname);
+        }
+        if (!configured) {
+            return localAccountBase(hostname);
+        }
+        try {
+            if (new URL(configured).origin === window.location.origin) {
+                return localAccountBase(hostname);
+            }
+        }
+        catch {
+            return localAccountBase(hostname);
+        }
+        return configured;
+    }
+    const buildReturnUrl = (_a = config.buildReturnUrl) !== null && _a !== void 0 ? _a : (() => window.location.origin.replace(/\/$/, ""));
+    function buildParams(options) {
+        var _a, _b;
+        const params = new URLSearchParams();
+        params.set("sourceApp", (_a = options.sourceApp) !== null && _a !== void 0 ? _a : config.sourceApp);
+        const returnUrl = (_b = options.returnUrl) !== null && _b !== void 0 ? _b : buildReturnUrl(options.orgId);
+        if (returnUrl && isAllowedReturnUrl(returnUrl)) {
+            params.set("returnUrl", returnUrl);
+        }
+        if (options.orgId) {
+            params.set("orgId", String(options.orgId));
+        }
+        if (options.token) {
+            params.set("api_key", options.token);
+        }
+        return params;
+    }
+    function buildUsersPageUrl(options = {}) {
+        const params = buildParams(options);
+        if (options.userId != null && options.userId !== "") {
+            params.set("userId", String(options.userId));
+        }
+        return `${resolveAccountUiBase()}/users?${params.toString()}`;
+    }
+    function navigateToUsersPage(options = {}) {
+        const url = buildUsersPageUrl(options);
+        if (!/^https?:\/\//i.test(url)) {
+            return;
+        }
+        window.location.assign(url);
+    }
+    function buildOrganizationPageUrl(options = {}) {
+        return `${resolveAccountUiBase()}/organization?${buildParams(options).toString()}`;
+    }
+    function navigateToOrganizationPage(options = {}) {
+        const url = buildOrganizationPageUrl(options);
+        if (!/^https?:\/\//i.test(url)) {
+            return;
+        }
+        window.location.assign(url);
+    }
+    return {
+        resolveAccountUiBase,
+        buildUsersPageUrl,
+        navigateToUsersPage,
+        buildOrganizationPageUrl,
+        navigateToOrganizationPage,
+    };
+}

package/dist/esm/Utils/functions.js

@@ -0,0 +1,7 @@
+export function toWords(str) {
+    return str
+        .toLowerCase()
+        .split('_')
+        .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(' ');
+}

package/dist/esm/Utils/mergeRefs.js

@@ -0,0 +1,16 @@
+/** 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;
+}
+/**
+ * Combine multiple refs into a single callback ref, so a value flows to all of
+ * them. Useful when cloning an element to attach an internal ref while
+ * preserving a ref the caller already set.
+ */
+export function mergeRefs(...refs) {
+    return (value) => refs.forEach((r) => setRef(r, value));
+}
+export default mergeRefs;

package/dist/esm/Utils/planBadge.js

@@ -0,0 +1,105 @@
+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 the label, urgency tone and inset-chip text for
+ * a `PlanPill` — the "Upgrade your plan" badge in an app's top bar.
+ *
+ * Copy and thresholds are centralized here so every app shows the same badge for
+ * the same org.
+ */
+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);
+    // Checked before the expiry branch: a lapsed org is downgraded to free, and
+    // "Free expired" is not a state worth shouting about.
+    if (isFreePlan(input, planName))
+        return upgrade("");
+    if (input.isExpired || elapsed !== "") {
+        // "<plan> expired" as the label with the elapsed time in the inset chip —
+        // folding both behind "Upgrade your plan" made the pill wide enough to
+        // crowd the header.
+        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,109 @@
+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);
+}
+/** 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.
+ */
+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) };
+}
+/**
+ * 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 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`;
+}
+/** Never reports `0m`; the final stretch reads `1m`. */
+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}`;
+}
+/**
+ * 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 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: `"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 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/rafThrottle.js

@@ -0,0 +1,30 @@
+/**
+ * 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 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;
+};