@alfadocs/ui-kit-debug 0.1.8

package/dist/_chunks/timestamp-BV2lC-wV.js

@@ -0,0 +1,109 @@
+import { jsx as I } from "react/jsx-runtime";
+import { forwardRef as _, useMemo as y, useState as C, useEffect as E } from "react";
+import { c as O } from "./index-D2ZczOXr.js";
+import { useTranslation as j } from "react-i18next";
+const A = O(
+  [
+    "ds:inline-flex ds:items-center ds:self-start",
+    "ds:rounded-[var(--radius-full)]",
+    "type-eyebrow",
+    "ds:whitespace-nowrap",
+    "ds:bg-muted/20 ds:text-[color:var(--muted-foreground)]"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "ds:h-[calc(var(--spacing)*4)] ds:ps-[var(--spacing-xs)] ds:pe-[var(--spacing-xs)] ds:[--type-eyebrow-size:var(--font-size-2xs)]",
+        md: "ds:h-[calc(var(--spacing)*5)] ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:[--type-eyebrow-size:var(--font-size-2xs)]",
+        lg: "ds:h-[calc(var(--spacing)*6)] ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:[--type-eyebrow-size:var(--font-size-xs)]"
+      }
+    },
+    defaultVariants: { size: "sm" }
+  }
+), T = 1e3, p = 60 * T, h = 60 * p, l = 24 * h, R = 7 * l, M = 30 * l, S = 365 * l;
+function U(e) {
+  const t = Math.abs(e);
+  return t < p ? [Math.round(e / T), "second"] : t < h ? [Math.round(e / p), "minute"] : t < l ? [Math.round(e / h), "hour"] : t < R ? [Math.round(e / l), "day"] : t < M ? [Math.round(e / R), "week"] : t < S ? [Math.round(e / M), "month"] : [Math.round(e / S), "year"];
+}
+function k(e, t) {
+  const n = e.getTime() - Date.now(), [s, i] = U(n);
+  return new Intl.RelativeTimeFormat(t, {
+    numeric: "auto",
+    style: "long"
+  }).format(s, i);
+}
+function H(e, t, n) {
+  const s = n ?? {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit"
+  };
+  return new Intl.DateTimeFormat(t, s).format(e);
+}
+function L(e, t, n, s, i) {
+  const [m, u] = C({
+    label: i,
+    isRelative: !1
+  });
+  return E(() => {
+    if (!n) {
+      u(
+        (a) => a.isRelative || a.label !== i ? { label: i, isRelative: !1 } : a
+      );
+      return;
+    }
+    const d = () => {
+      const a = new Date(e), o = s == null || Math.abs(e - Date.now()) < s ? { label: k(a, t), isRelative: !0 } : { label: i, isRelative: !1 };
+      u(
+        (r) => r.label === o.label && r.isRelative === o.isRelative ? r : o
+      );
+    };
+    d();
+    const v = window.setInterval(d, p);
+    return () => window.clearInterval(v);
+  }, [e, t, n, s, i]), m;
+}
+const V = _(
+  ({
+    value: e,
+    format: t = "relative",
+    shape: n = "inline",
+    size: s = "sm",
+    locale: i,
+    absoluteFormat: m,
+    relativeWindow: u,
+    title: d,
+    className: v,
+    ...a
+  }, g) => {
+    const { i18n: o } = j(), r = i ?? o.language ?? "en", c = y(() => e instanceof Date ? e.getTime() : typeof e == "number" ? e : new Date(e).getTime(), [e]), f = !Number.isNaN(c), D = f ? new Date(c).toISOString() : void 0, w = y(
+      () => f ? H(new Date(c), r, m) : "",
+      [c, r, m, f]
+    ), { label: x, isRelative: z } = L(
+      c,
+      r,
+      f && t === "relative",
+      u,
+      w
+    ), b = d ?? (z ? w : void 0), N = [n === "chip" ? A({ size: s }) : null, n === "inline" ? "type-meta" : null, v].filter(Boolean).join(" ");
+    return /* @__PURE__ */ I(
+      "time",
+      {
+        ref: g,
+        dateTime: D,
+        title: b === "" ? void 0 : b,
+        "data-component": "timestamp",
+        className: N || void 0,
+        ...a,
+        children: x
+      }
+    );
+  }
+);
+V.displayName = "Timestamp";
+export {
+  V as T
+};
+//# sourceMappingURL=timestamp-BV2lC-wV.js.map

package/dist/_chunks/timestamp-BV2lC-wV.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timestamp-BV2lC-wV.js","sources":["../../src/components/timestamp/timestamp.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useMemo,\n  useState,\n  type HTMLAttributes,\n} from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\n\n/* ------------------------------------------------------------------ */\n/* CVA — chip shape (mirrors the Tag sm/md/lg compact scale so the    */\n/* visual vocabulary stays consistent across the chip family).         */\n/* ------------------------------------------------------------------ */\n\nconst chipVariants = cva(\n  [\n    'ds:inline-flex ds:items-center ds:self-start',\n    'ds:rounded-[var(--radius-full)]',\n    'type-eyebrow',\n    'ds:whitespace-nowrap',\n    'ds:bg-muted/20 ds:text-[color:var(--muted-foreground)]',\n  ].join(' '),\n  {\n    variants: {\n      size: {\n        sm: 'ds:h-[calc(var(--spacing)*4)] ds:ps-[var(--spacing-xs)] ds:pe-[var(--spacing-xs)] ds:[--type-eyebrow-size:var(--font-size-2xs)]',\n        md: 'ds:h-[calc(var(--spacing)*5)] ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:[--type-eyebrow-size:var(--font-size-2xs)]',\n        lg: 'ds:h-[calc(var(--spacing)*6)] ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:[--type-eyebrow-size:var(--font-size-xs)]',\n      },\n    },\n    defaultVariants: { size: 'sm' },\n  },\n);\n\n/* ------------------------------------------------------------------ */\n/* Relative-time formatter                                             */\n/*                                                                     */\n/* `Intl.RelativeTimeFormat` is part of the locale-data bundle every   */\n/* modern browser ships, no date-fns dependency. Unit selection        */\n/* follows the largest-sensible-unit heuristic (< 1 minute → seconds,  */\n/* < 1 hour → minutes, …, ≥ 1 year → years).                           */\n/* ------------------------------------------------------------------ */\n\nconst SECOND_MS = 1000;\nconst MINUTE_MS = 60 * SECOND_MS;\nconst HOUR_MS = 60 * MINUTE_MS;\nconst DAY_MS = 24 * HOUR_MS;\nconst WEEK_MS = 7 * DAY_MS;\nconst MONTH_MS = 30 * DAY_MS;\nconst YEAR_MS = 365 * DAY_MS;\n\nfunction pickUnit(\n  deltaMs: number,\n): [value: number, unit: Intl.RelativeTimeFormatUnit] {\n  const abs = Math.abs(deltaMs);\n  if (abs < MINUTE_MS) return [Math.round(deltaMs / SECOND_MS), 'second'];\n  if (abs < HOUR_MS) return [Math.round(deltaMs / MINUTE_MS), 'minute'];\n  if (abs < DAY_MS) return [Math.round(deltaMs / HOUR_MS), 'hour'];\n  if (abs < WEEK_MS) return [Math.round(deltaMs / DAY_MS), 'day'];\n  if (abs < MONTH_MS) return [Math.round(deltaMs / WEEK_MS), 'week'];\n  if (abs < YEAR_MS) return [Math.round(deltaMs / MONTH_MS), 'month'];\n  return [Math.round(deltaMs / YEAR_MS), 'year'];\n}\n\nfunction formatRelative(date: Date, locale: string): string {\n  const delta = date.getTime() - Date.now();\n  const [n, unit] = pickUnit(delta);\n  return new Intl.RelativeTimeFormat(locale, {\n    numeric: 'auto',\n    style: 'long',\n  }).format(n, unit);\n}\n\nfunction formatAbsolute(\n  date: Date,\n  locale: string,\n  options?: Intl.DateTimeFormatOptions,\n): string {\n  const opts: Intl.DateTimeFormatOptions = options ?? {\n    year: 'numeric',\n    month: 'short',\n    day: 'numeric',\n    hour: 'numeric',\n    minute: '2-digit',\n  };\n  return new Intl.DateTimeFormat(locale, opts).format(date);\n}\n\n/* ------------------------------------------------------------------ */\n/* Hydration-safe display-label hook                                   */\n/*                                                                     */\n/* Initial render returns the absolute label (SSR-stable) so the       */\n/* server HTML matches the client's first paint. Post-mount, relative  */\n/* mode flips to the relative phrase and re-evaluates every minute so  */\n/* \"just now\" → \"1 minute ago\" without a parent re-render.             */\n/*                                                                     */\n/* `relativeWindow` supports the common \"recent phrase, otherwise full */\n/* date\" pattern: when the input date is older than the window,        */\n/* display the absolute label even though format='relative'. The       */\n/* minute tick re-evaluates the window so a date that starts inside    */\n/* the window automatically flips to absolute once it drifts past.     */\n/* ------------------------------------------------------------------ */\n\nfunction useDisplayLabel(\n  time: number,\n  locale: string,\n  enabled: boolean,\n  relativeWindow: number | undefined,\n  absolute: string,\n): { label: string; isRelative: boolean } {\n  const [state, setState] = useState<{ label: string; isRelative: boolean }>({\n    label: absolute,\n    isRelative: false,\n  });\n\n  useEffect(() => {\n    if (!enabled) {\n      setState((prev) =>\n        prev.isRelative || prev.label !== absolute\n          ? { label: absolute, isRelative: false }\n          : prev,\n      );\n      return;\n    }\n    const compute = () => {\n      const date = new Date(time);\n      const inside =\n        relativeWindow == null ||\n        Math.abs(time - Date.now()) < relativeWindow;\n      const next = inside\n        ? { label: formatRelative(date, locale), isRelative: true }\n        : { label: absolute, isRelative: false };\n      setState((prev) =>\n        prev.label === next.label && prev.isRelative === next.isRelative\n          ? prev\n          : next,\n      );\n    };\n    compute();\n    const intervalId = window.setInterval(compute, MINUTE_MS);\n    return () => window.clearInterval(intervalId);\n  }, [time, locale, enabled, relativeWindow, absolute]);\n\n  return state;\n}\n\n/* ------------------------------------------------------------------ */\n/* Props                                                                */\n/* ------------------------------------------------------------------ */\n\ntype ChipVariantProps = VariantProps<typeof chipVariants>;\n\nexport interface TimestampProps\n  extends Omit<HTMLAttributes<HTMLTimeElement>, 'children' | 'title'>,\n    ChipVariantProps {\n  /** ISO-8601 string, ms-since-epoch number, or a `Date` instance. */\n  value: string | number | Date;\n  /**\n   * `relative` shows \"6 hours ago\" with the absolute label in the `title`\n   * tooltip; `absolute` shows the full locale-formatted date and omits the\n   * tooltip. Default `relative`.\n   */\n  format?: 'relative' | 'absolute';\n  /**\n   * `inline` renders a plain `<time>` with the `.type-meta` role,\n   * `chip` wraps the `<time>` in the Tag-family pill shape, and `bare`\n   * emits the `<time>` element with no built-in typography class so the\n   * consumer's surrounding context (e.g. AG Grid cell font size)\n   * dictates how it reads. Default `inline`.\n   */\n  shape?: 'inline' | 'chip' | 'bare';\n  /**\n   * Override the locale. Falls back to the active `i18n.language`.\n   */\n  locale?: string;\n  /**\n   * Override the `Intl.DateTimeFormat` options used for the absolute\n   * label (and the tooltip when `format='relative'`).\n   */\n  absoluteFormat?: Intl.DateTimeFormatOptions;\n  /**\n   * When `format='relative'`, dates older than this window (in ms) show\n   * the absolute label instead. Supports the common \"recent relative\n   * phrase, otherwise full date\" UX pattern (e.g. \"5 minutes ago\" →\n   * \"20 Apr 2026, 10:30\" once beyond 12 h). Omit for no cutoff.\n   */\n  relativeWindow?: number;\n  /**\n   * Override the tooltip. Default is the absolute label when the visible\n   * label is relative, and no tooltip when the visible label is already\n   * absolute. Pass an empty string to suppress the tooltip entirely.\n   */\n  title?: string;\n  /** Additional classes applied to the `<time>` element. */\n  className?: string;\n}\n\n/* ------------------------------------------------------------------ */\n/* Timestamp                                                            */\n/* ------------------------------------------------------------------ */\n\nexport const Timestamp = forwardRef<HTMLTimeElement, TimestampProps>(\n  (\n    {\n      value,\n      format = 'relative',\n      shape = 'inline',\n      size = 'sm',\n      locale: localeProp,\n      absoluteFormat,\n      relativeWindow,\n      title: titleProp,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { i18n } = useTranslation();\n    const locale = localeProp ?? i18n.language ?? 'en';\n    const time = useMemo(() => {\n      if (value instanceof Date) return value.getTime();\n      if (typeof value === 'number') return value;\n      return new Date(value).getTime();\n    }, [value]);\n    const valid = !Number.isNaN(time);\n    const iso = valid ? new Date(time).toISOString() : undefined;\n\n    const absolute = useMemo(\n      () => (valid ? formatAbsolute(new Date(time), locale, absoluteFormat) : ''),\n      [time, locale, absoluteFormat, valid],\n    );\n    const { label: visibleLabel, isRelative } = useDisplayLabel(\n      time,\n      locale,\n      valid && format === 'relative',\n      relativeWindow,\n      absolute,\n    );\n    const tooltip = titleProp ?? (isRelative ? absolute : undefined);\n\n    const chipClass = shape === 'chip' ? chipVariants({ size }) : null;\n    const inlineClass = shape === 'inline' ? 'type-meta' : null;\n    // shape='bare' → no built-in class; consumer's parent context owns typography.\n    const composedClass = [chipClass, inlineClass, className]\n      .filter(Boolean)\n      .join(' ');\n\n    return (\n      <time\n        ref={ref}\n        dateTime={iso}\n        title={tooltip === '' ? undefined : tooltip}\n        data-component=\"timestamp\"\n        className={composedClass || undefined}\n        {...rest}\n      >\n        {visibleLabel}\n      </time>\n    );\n  },\n);\n\nTimestamp.displayName = 'Timestamp';\n"],"names":["chipVariants","cva","SECOND_MS","MINUTE_MS","HOUR_MS","DAY_MS","WEEK_MS","MONTH_MS","YEAR_MS","pickUnit","deltaMs","abs","formatRelative","date","locale","delta","n","unit","formatAbsolute","options","opts","useDisplayLabel","time","enabled","relativeWindow","absolute","state","setState","useState","useEffect","prev","compute","next","intervalId","Timestamp","forwardRef","value","format","shape","size","localeProp","absoluteFormat","titleProp","className","rest","ref","i18n","useTranslation","useMemo","valid","iso","visibleLabel","isRelative","tooltip","composedClass","jsx"],"mappings":"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"}