@azmr/ui 0.1.0 → 0.3.0

package/dist/theme.js

@@ -0,0 +1,414 @@
+// src/theme/preferences.ts
+var THEME_PREFERENCES = ["light", "dark", "system"];
+var DENSITIES = ["compact", "comfortable", "spacious"];
+var THEME_COOKIE = "azmr-theme";
+var DENSITY_COOKIE = "azmr-density";
+var ONE_YEAR_SECONDS = 60 * 60 * 24 * 365;
+function parseThemePreference(value, fallback = "system") {
+  return typeof value === "string" && THEME_PREFERENCES.includes(value) ? value : fallback;
+}
+function parseDensity(value, fallback = "comfortable") {
+  return typeof value === "string" && DENSITIES.includes(value) ? value : fallback;
+}
+function readCookie(header, name) {
+  if (!header) return void 0;
+  for (const part of header.split(";")) {
+    const trimmed = part.trim();
+    const eq = trimmed.indexOf("=");
+    if (eq === -1 || trimmed.slice(0, eq) !== name) continue;
+    const raw = trimmed.slice(eq + 1);
+    try {
+      return decodeURIComponent(raw);
+    } catch {
+      return raw;
+    }
+  }
+  return void 0;
+}
+var COOKIE_NAME = /^[A-Za-z0-9!#$%&'*+.^_`|~-]+$/;
+var COOKIE_VALUE = /^[\x21\x23-\x2B\x2D-\x3A\x3C-\x5B\x5D-\x7E]*$/;
+function serializeCookie(name, value, options = {}) {
+  if (!COOKIE_NAME.test(name)) throw new Error(`Invalid cookie name: ${JSON.stringify(name)}`);
+  if (!COOKIE_VALUE.test(value)) throw new Error(`Invalid cookie value for "${name}"`);
+  const secure = options.secure ? "; Secure" : "";
+  return `${name}=${value}; Path=/; Max-Age=${ONE_YEAR_SECONDS}; SameSite=Lax${secure}`;
+}
+function buildHtmlAttributes({ theme, density }) {
+  const attributes = {};
+  if (theme === "light" || theme === "dark") attributes["data-theme"] = theme;
+  if (density === "compact" || density === "spacious") attributes["data-density"] = density;
+  return attributes;
+}
+var htmlAttributes = Object.assign(buildHtmlAttributes, {
+  fromCookies(header) {
+    return buildHtmlAttributes({
+      theme: parseThemePreference(readCookie(header, THEME_COOKIE)),
+      density: parseDensity(readCookie(header, DENSITY_COOKIE))
+    });
+  }
+});
+
+// src/theme/create-theme.ts
+var rad = (deg) => deg * Math.PI / 180;
+function toLinearSrgb({ l, c, h }) {
+  const a = c * Math.cos(rad(h));
+  const b = c * Math.sin(rad(h));
+  const l_ = (l + 0.3963377774 * a + 0.2158037573 * b) ** 3;
+  const m_ = (l - 0.1055613458 * a - 0.0638541728 * b) ** 3;
+  const s_ = (l - 0.0894841775 * a - 1.291485548 * b) ** 3;
+  return [
+    4.0767416621 * l_ - 3.3077115913 * m_ + 0.2309699292 * s_,
+    -1.2684380046 * l_ + 2.6097574011 * m_ - 0.3413193965 * s_,
+    -0.0041960863 * l_ - 0.7034186147 * m_ + 1.707614701 * s_
+  ];
+}
+function fromLinearSrgb([r, g, b]) {
+  const l_ = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
+  const m_ = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
+  const s_ = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+  const L = 0.2104542553 * l_ + 0.793617785 * m_ - 0.0040720468 * s_;
+  const A = 1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_;
+  const B = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.808675766 * s_;
+  const c = Math.hypot(A, B);
+  return { l: L, c, h: c < 4e-4 ? 0 : (Math.atan2(B, A) * 180 / Math.PI + 360) % 360 };
+}
+var EPS = 1e-4;
+var inGamut = (color) => toLinearSrgb(color).every((v) => v >= -EPS && v <= 1 + EPS);
+function clampToGamut(color) {
+  let { c } = color;
+  while (c > 0 && !inGamut({ ...color, c })) c = Math.max(0, c - 4e-3);
+  return { ...color, c };
+}
+var luminance = (color) => {
+  const [r, g, b] = toLinearSrgb(color).map((v) => Math.min(1, Math.max(0, v)));
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+};
+function contrast(a, b) {
+  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+  return (hi + 0.05) / (lo + 0.05);
+}
+var round = (n, digits) => Number(n.toFixed(digits));
+var format = ({ l, c, h }) => `oklch(${round(l, 3)} ${round(c, 3)} ${round(h, 1)})`;
+var lightDark = (light, dark) => `light-dark(${format(light)}, ${format(dark)})`;
+function fromHex(hex) {
+  const digits = hex.length === 3 ? [...hex].map((d) => d + d).join("") : hex;
+  const decode2 = (i) => {
+    const v = Number.parseInt(digits.slice(i, i + 2), 16) / 255;
+    return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
+  };
+  const color = fromLinearSrgb([decode2(0), decode2(2), decode2(4)]);
+  return color.c < 4e-3 ? { l: color.l, c: 0, h: 0 } : color;
+}
+function parseColour(input, name) {
+  if (typeof input === "object" && input !== null) {
+    const { l, c, h } = input;
+    if (![l, c, h].every(Number.isFinite) || l < 0 || l > 1 || c < 0 || c > 0.5) {
+      throw new Error(
+        `createTheme: ${name} { l, c, h } must be finite, with 0 <= l <= 1 and 0 <= c <= 0.5`
+      );
+    }
+    return { l, c, h: (h % 360 + 360) % 360 };
+  }
+  const text = String(input).trim();
+  const hex = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.exec(text);
+  if (hex?.[1]) return fromHex(hex[1]);
+  const ok = /^oklch\(\s*(\d*\.?\d+)(%?)\s+(\d*\.?\d+)\s+(\d*\.?\d+)(?:deg)?\s*\)$/i.exec(text);
+  if (ok) {
+    const l = Number(ok[1]) / (ok[2] ? 100 : 1);
+    return parseColour({ l, c: Number(ok[3]), h: Number(ok[4]) }, name);
+  }
+  throw new Error(
+    `createTheme: ${name} must be #rgb, #rrggbb, oklch(L C H) or { l, c, h }; got ${JSON.stringify(text)}`
+    // conventions-ignore: the message names the accepted colour syntax
+  );
+}
+var WHITE = { l: 0.985, c: 0, h: 0 };
+var NEAR_BLACK = { l: 0.145, c: 0, h: 0 };
+var DARK_CARD = { l: 0.205, c: 0, h: 0 };
+var WARNING_FOREGROUND = { l: 0.25, c: 0.04, h: 70 };
+var AA_TEXT = 4.5;
+var AA_SURFACE = 4.55;
+var AA_NON_TEXT = 3.2;
+var STEP = 5e-3;
+var SURFACES = {
+  light: [WHITE],
+  dark: [NEAR_BLACK, DARK_CARD]
+};
+var HOVER_ALPHA = 0.9;
+var SECONDARY_HOVER_ALPHA = 0.8;
+var encode = (v) => v <= 31308e-7 ? 12.92 * v : 1.055 * v ** (1 / 2.4) - 0.055;
+var decode = (v) => v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
+function encodedSrgb(color) {
+  return toLinearSrgb(color).map((v) => encode(Math.min(1, Math.max(0, v))));
+}
+function mixedLuminance(color, surface, alpha) {
+  const top = encodedSrgb(color);
+  const base = encodedSrgb(surface);
+  const [r, g, b] = top.map((v, i) => decode(v * alpha + base[i] * (1 - alpha)));
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+function contrastOfLuminance(a, b) {
+  const [hi, lo] = [a, b].sort((x, y) => y - x);
+  return (hi + 0.05) / (lo + 0.05);
+}
+function holdsOnHover(bg, fg, mode, alpha = HOVER_ALPHA) {
+  if (contrast(bg, fg) < AA_SURFACE) return false;
+  return SURFACES[mode].every(
+    (surface) => contrastOfLuminance(luminance(fg), mixedLuminance(bg, surface, alpha)) >= AA_SURFACE
+  );
+}
+function shiftUntil(color, direction, limit, ok) {
+  for (let shift = 0; shift <= limit + 1e-9; shift += STEP) {
+    const candidate = clampToGamut({
+      ...color,
+      l: Math.min(1, Math.max(0, color.l + direction * shift))
+    });
+    if (ok(candidate)) return candidate;
+  }
+  return void 0;
+}
+function lightPair(brand, alpha = HOVER_ALPHA) {
+  const withWhite = shiftUntil(brand, -1, 0.12, (c) => holdsOnHover(c, WHITE, "light", alpha));
+  if (withWhite) return { bg: withWhite, fg: WHITE };
+  const withBlack = shiftUntil(brand, 1, 0.3, (c) => holdsOnHover(c, NEAR_BLACK, "light", alpha));
+  if (withBlack) return { bg: withBlack, fg: NEAR_BLACK };
+  const forced = shiftUntil(brand, -1, 1, (c) => holdsOnHover(c, WHITE, "light", alpha));
+  return { bg: forced ?? clampToGamut({ ...brand, l: 0.2 }), fg: WHITE };
+}
+function darkPair(brand, alpha = HOVER_ALPHA) {
+  const start = clampToGamut({ ...brand, l: Math.min(0.88, Math.max(0.7, brand.l)) });
+  const bg = shiftUntil(start, 1, 0.3, (c) => holdsOnHover(c, NEAR_BLACK, "dark", alpha)) ?? start;
+  return { bg, fg: NEAR_BLACK };
+}
+function statusPair(brand, mode) {
+  if (mode === "light") {
+    const bg2 = shiftUntil(brand, -1, 1, (c) => holdsOnHover(c, WHITE, "light"));
+    return { bg: bg2 ?? clampToGamut({ ...brand, l: 0.2 }), fg: WHITE };
+  }
+  const start = clampToGamut({ ...brand, l: Math.min(0.88, Math.max(0.7, brand.l)) });
+  const bg = shiftUntil(start, 1, 0.3, (c) => holdsOnHover(c, NEAR_BLACK, "dark"));
+  return { bg: bg ?? start, fg: NEAR_BLACK };
+}
+function warningColours(brand, mode) {
+  const start = clampToGamut({ ...brand, l: Math.min(0.9, Math.max(0.7, brand.l)) });
+  if (mode === "light") {
+    const bg = shiftUntil(start, 1, 0.3, (c) => holdsOnHover(c, WARNING_FOREGROUND, "light")) ?? start;
+    const text = shiftUntil(brand, -1, 1, (c) => contrast(c, WHITE) >= AA_TEXT);
+    return { bg, fg: WARNING_FOREGROUND, text: text ?? clampToGamut({ ...brand, l: 0.2 }) };
+  }
+  const both = shiftUntil(start, 1, 0.3, (c) => holdsOnHover(c, WARNING_FOREGROUND, "dark"));
+  const colour = both ?? start;
+  return { bg: colour, fg: WARNING_FOREGROUND, text: colour };
+}
+function ringFor(brand, mode) {
+  const surfaces = mode === "light" ? [WHITE] : [
+    { l: 0.145, c: 0, h: 0 },
+    { l: 0.205, c: 0, h: 0 }
+  ];
+  const start = clampToGamut({
+    l: mode === "light" ? Math.min(brand.l, 0.6) : Math.max(brand.l, 0.7),
+    c: Math.min(brand.c, 0.18),
+    h: brand.h
+  });
+  const ok = (c) => surfaces.every((s) => contrast(c, s) >= AA_NON_TEXT);
+  return shiftUntil(start, mode === "light" ? -1 : 1, 0.6, ok) ?? start;
+}
+var RADIUS = /^(?:\d+|\d*\.\d+)(?:rem|px)$/;
+var FONT = /^[A-Za-z0-9 ,'"._-]+$/;
+function assertRadius(radius) {
+  if (!RADIUS.test(radius))
+    throw new Error(
+      `createTheme: radius must be a number in rem or px, got ${JSON.stringify(radius)}`
+    );
+  return radius;
+}
+function assertFont(font) {
+  if (font.length > 200 || !FONT.test(font)) {
+    throw new Error(
+      "createTheme: font must be a short font-family list (letters, digits, spaces, commas, quotes)"
+    );
+  }
+  return font;
+}
+function createTheme(options = {}) {
+  const cssVariables = {};
+  if (options.secondary !== void 0) {
+    const brand = parseColour(options.secondary, "secondary");
+    const light = lightPair(brand, SECONDARY_HOVER_ALPHA);
+    const dark = darkPair(brand, SECONDARY_HOVER_ALPHA);
+    cssVariables["--secondary"] = lightDark(light.bg, dark.bg);
+    cssVariables["--secondary-foreground"] = lightDark(light.fg, dark.fg);
+  }
+  for (const name of ["success", "info", "destructive"]) {
+    const input = options[name];
+    if (input === void 0) continue;
+    const brand = parseColour(input, name);
+    const light = statusPair(brand, "light");
+    const dark = statusPair(brand, "dark");
+    cssVariables[`--${name}`] = lightDark(light.bg, dark.bg);
+    cssVariables[`--${name}-foreground`] = lightDark(light.fg, dark.fg);
+  }
+  if (options.warning !== void 0) {
+    const brand = parseColour(options.warning, "warning");
+    const light = warningColours(brand, "light");
+    const dark = warningColours(brand, "dark");
+    cssVariables["--warning"] = lightDark(light.bg, dark.bg);
+    cssVariables["--warning-foreground"] = lightDark(light.fg, dark.fg);
+    cssVariables["--warning-text"] = lightDark(light.text, dark.text);
+  }
+  if (options.primary !== void 0) {
+    const brand = parseColour(options.primary, "primary");
+    const light = lightPair(brand);
+    const dark = darkPair(brand);
+    const ring = lightDark(ringFor(brand, "light"), ringFor(brand, "dark"));
+    cssVariables["--primary"] = lightDark(light.bg, dark.bg);
+    cssVariables["--primary-foreground"] = lightDark(light.fg, dark.fg);
+    cssVariables["--ring"] = ring;
+    cssVariables["--sidebar-primary"] = cssVariables["--primary"];
+    cssVariables["--sidebar-primary-foreground"] = cssVariables["--primary-foreground"];
+    cssVariables["--sidebar-ring"] = ring;
+  }
+  if (options.radius !== void 0) cssVariables["--radius"] = assertRadius(options.radius);
+  if (options.font !== void 0) cssVariables["--font-sans-stack"] = assertFont(options.font);
+  let density;
+  if (options.density !== void 0) {
+    density = parseDensity(options.density, "comfortable");
+    if (density !== options.density)
+      throw new Error(`createTheme: unknown density ${JSON.stringify(options.density)}`);
+  }
+  const entries = Object.entries(cssVariables);
+  const css = entries.length === 0 ? ":root {}" : `:root {
+${entries.map(([k, v]) => `  ${k}: ${v};`).join("\n")}
+}`;
+  return { cssVariables, css, htmlAttributes: htmlAttributes({ density }) };
+}
+
+// src/theme/init-script.ts
+function themeInitScript() {
+  return `(function(){try{var t,d,c=(document.cookie||'').split(';');for(var i=0;i<c.length;i++){var p=c[i].trim();if(p.indexOf('${THEME_COOKIE}=')===0)t=p.slice(${THEME_COOKIE.length + 1});else if(p.indexOf('${DENSITY_COOKIE}=')===0)d=p.slice(${DENSITY_COOKIE.length + 1});}var e=document.documentElement;if(t==='light'||t==='dark')e.setAttribute('data-theme',t);if(d==='compact'||d==='spacious')e.setAttribute('data-density',d);}catch(_){}})();`;
+}
+
+// src/theme/locale.ts
+var DEFAULT_MESSAGES = Object.freeze({
+  close: "Close",
+  cancel: "Cancel",
+  confirm: "Confirm",
+  loading: "Loading",
+  noResults: "No results found",
+  clear: "Clear",
+  search: "Search",
+  previousPage: "Previous page",
+  nextPage: "Next page"
+});
+var DATE_ONLY = /^(\d{4})-(\d{2})-(\d{2})$/;
+var FIELD_OPTIONS = [
+  "weekday",
+  "era",
+  "year",
+  "month",
+  "day",
+  "dayPeriod",
+  "hour",
+  "minute",
+  "second",
+  "fractionalSecondDigits",
+  "timeZoneName"
+];
+function toInstant(value) {
+  if (value === null || value === void 0 || value === "") return void 0;
+  if (typeof value === "string") {
+    const match = DATE_ONLY.exec(value);
+    if (match) {
+      const date2 = new Date(Date.UTC(Number(match[1]), Number(match[2]) - 1, Number(match[3])));
+      return Number.isNaN(date2.getTime()) ? void 0 : { date: date2, calendarDay: true };
+    }
+  }
+  const date = value instanceof Date ? value : new Date(value);
+  return Number.isNaN(date.getTime()) ? void 0 : { date, calendarDay: false };
+}
+function createLocale(options = {}) {
+  const locale = options.locale ?? "en-NZ";
+  const currency = options.currency ?? "NZD";
+  const weekStartsOn = options.weekStartsOn ?? 1;
+  const timeZone = options.timeZone;
+  try {
+    Intl.getCanonicalLocales(locale);
+  } catch {
+    throw new Error(`createLocale: invalid locale ${JSON.stringify(locale)}`);
+  }
+  if (!/^[A-Z]{3}$/.test(currency)) {
+    throw new Error(
+      `createLocale: currency must be an ISO 4217 code like "NZD", got ${JSON.stringify(currency)}`
+    );
+  }
+  if (timeZone !== void 0) {
+    try {
+      new Intl.DateTimeFormat(locale, { timeZone });
+    } catch {
+      throw new Error(`createLocale: unknown time zone ${JSON.stringify(timeZone)}`);
+    }
+  }
+  if (!Number.isInteger(weekStartsOn) || weekStartsOn < 0 || weekStartsOn > 6) {
+    throw new Error(
+      `createLocale: weekStartsOn must be an integer from 0 to 6, got ${weekStartsOn}`
+    );
+  }
+  const numberFormats = /* @__PURE__ */ new Map();
+  const dateFormats = /* @__PURE__ */ new Map();
+  const numberFormat = (opts) => {
+    const key = JSON.stringify(opts);
+    let format2 = numberFormats.get(key);
+    if (!format2) {
+      format2 = new Intl.NumberFormat(locale, opts);
+      numberFormats.set(key, format2);
+    }
+    return format2;
+  };
+  const dateFormat = (opts) => {
+    const key = JSON.stringify(opts);
+    let format2 = dateFormats.get(key);
+    if (!format2) {
+      format2 = new Intl.DateTimeFormat(locale, opts);
+      dateFormats.set(key, format2);
+    }
+    return format2;
+  };
+  const formatDateWith = (defaults) => (value, opts = {}) => {
+    const instant = toInstant(value);
+    if (!instant) return "";
+    const zone = instant.calendarDay ? "UTC" : opts.timeZone ?? timeZone;
+    const customised = FIELD_OPTIONS.some((key) => key in opts) || "dateStyle" in opts || "timeStyle" in opts;
+    return dateFormat({
+      ...customised ? {} : defaults,
+      ...opts,
+      ...zone ? { timeZone: zone } : {}
+    }).format(instant.date);
+  };
+  const isNumber = (value) => typeof value === "number" && Number.isFinite(value);
+  return {
+    locale,
+    currency,
+    weekStartsOn,
+    timeZone,
+    messages: { ...DEFAULT_MESSAGES, ...options.messages },
+    formatNumber: (value, opts = {}) => isNumber(value) ? numberFormat(opts).format(value) : "",
+    formatCurrency: (value, opts = {}) => isNumber(value) ? numberFormat({ style: "currency", currency, ...opts }).format(value) : "",
+    formatDate: formatDateWith({ dateStyle: "medium" }),
+    formatDateTime: formatDateWith({ dateStyle: "medium", timeStyle: "short" })
+  };
+}
+export {
+  DEFAULT_MESSAGES,
+  DENSITIES,
+  DENSITY_COOKIE,
+  THEME_COOKIE,
+  THEME_PREFERENCES,
+  createLocale,
+  createTheme,
+  htmlAttributes,
+  parseDensity,
+  parseThemePreference,
+  readCookie,
+  serializeCookie,
+  themeInitScript
+};

package/dist/toast.d.ts

@@ -0,0 +1,77 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type ToastType = "success" | "error" | "info" | "warning" | "loading";
+interface ToastOptions {
+    /** A second line under the title. */
+    description?: ReactNode;
+    /**
+     * Milliseconds before it dismisses itself. `0` keeps it until dismissed. Defaults to the
+     * `Toaster`'s `duration` (5000), and loading toasts never time out.
+     */
+    duration?: number;
+    /** Showing a toast with an id that is already visible updates that toast instead of stacking another. */
+    id?: string;
+    /**
+     * `high` is announced urgently (`role="alert"`), `low` politely. Errors are `high` by default,
+     * everything else `low`.
+     */
+    priority?: "low" | "high";
+    /** A button in the toast, such as Undo. It runs `onClick` and then dismisses the toast. */
+    action?: {
+        label: ReactNode;
+        onClick?: () => void;
+    };
+    /** Called when the toast is dismissed, by the person or by the timer. */
+    onClose?: () => void;
+}
+interface ToastUpdate extends ToastOptions {
+    title?: ReactNode;
+    type?: ToastType | "default";
+}
+/**
+ * Show a notification from anywhere, including outside React. Mount one `<Toaster />` near the root
+ * first; a toast shown before it is mounted has nowhere to render. Every method returns the toast's id.
+ */
+declare const toast: ((title: ReactNode, options?: ToastOptions) => string) & {
+    success: (title: ReactNode, options?: ToastOptions) => string;
+    error: (title: ReactNode, options?: ToastOptions) => string;
+    info: (title: ReactNode, options?: ToastOptions) => string;
+    warning: (title: ReactNode, options?: ToastOptions) => string;
+    /** Stays until updated or dismissed. Pair it with `toast.update`, or use `toast.promise`. */
+    loading: (title: ReactNode, options?: ToastOptions) => string;
+    /** Show `loading`, then `success` or `error` when the promise settles. Returns the same promise. */
+    promise<Value, Reason = Error>(promise: Promise<Value>, messages: {
+        loading: string;
+        success: string | ((value: Value) => string);
+        error: string | ((error: Reason) => string);
+    }): Promise<Value>;
+    /** Change a toast that is showing: its text, its type or its timer. */
+    update(id: string, changes: ToastUpdate): void;
+    /** Dismiss one toast, or all of them when called without an id. */
+    dismiss(id?: string): void;
+};
+
+type ToasterPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+interface ToasterProps {
+    /** Where the stack sits. Default `bottom-right`. New toasts come in from that edge. */
+    position?: ToasterPosition;
+    /** The most toasts shown at once; older ones wait behind. Default 3. */
+    limit?: number;
+    /** Default milliseconds before a toast dismisses itself. `0` never does. Default 5000. */
+    duration?: number;
+    /** The accessible name of the notifications region. Default "Notifications". */
+    label?: string;
+    className?: string;
+}
+/**
+ * Renders the toasts raised by `toast.*`. Mount it once, near the root of the app.
+ *
+ * Toasts pause their timer while the pointer is over the stack or focus is inside it, the stack
+ * fans out on hover or focus, and each toast can be swiped away toward the edge it came from.
+ * F6 jumps keyboard focus into the stack. The region is a polite live region; errors are announced
+ * urgently.
+ */
+declare function Toaster({ position, limit, duration, label, className, }: ToasterProps): react.JSX.Element;
+
+export { type ToastOptions, type ToastType, type ToastUpdate, Toaster, type ToasterPosition, type ToasterProps, toast };