@vamos-ui/react 0.3.0 → 0.4.0

package/dist/components/placeholder-art.d.ts

@@ -0,0 +1,51 @@
+import * as React from "react";
+export type PlaceholderArtPattern = "grid" | "dots" | "lines" | "rings" | "glow";
+export declare const PLACEHOLDER_ART_PATTERNS: PlaceholderArtPattern[];
+/** FNV-1a 32-bit — stable across server and client, so SSR and hydration agree. */
+export declare function hashSeed(seed: string): number;
+export interface PlaceholderArtRecipe {
+    pattern: PlaceholderArtPattern;
+    /** Chart palette slot (1–6) used as the tint. */
+    hue: number;
+    /** Second slot for the glow. */
+    hue2: number;
+    /** Line angle in degrees (lines). */
+    angle: number;
+    /** Pattern cell in px. */
+    cell: number;
+    /** Focal point in % (rings, glow, highlight). */
+    x: number;
+    y: number;
+}
+/** The same seed always gives the same recipe. `pattern` overrides the seeded choice. */
+export declare function placeholderArtRecipe(seed: string, pattern?: PlaceholderArtPattern | "auto"): PlaceholderArtRecipe;
+/** CSS background for a recipe. Token colours only, mixed per theme by the browser. */
+export declare function placeholderArtStyle(recipe: PlaceholderArtRecipe, strength?: "subtle" | "bold"): React.CSSProperties;
+export interface PlaceholderArtProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Any stable string (a slug, a name, a record id). Same seed → same art, on server and client. */
+    seed?: string;
+    /** Force a pattern. Default `"auto"` (picked from the seed). */
+    pattern?: PlaceholderArtPattern | "auto";
+    /** Centre icon. Default: an image glyph. `false` hides it. */
+    icon?: React.ReactNode | false;
+    /**
+     * What the missing image would show. Set → `role="img"` with this as its name; empty → decorative
+     * (`aria-hidden`).
+     */
+    label?: string;
+    /** Print the label (or a custom node) in the bottom corner, e.g. "Photo · Harbour terrace". */
+    caption?: boolean | React.ReactNode;
+    /** `bold` doubles the tint — for large hero areas on plain pages. Default `subtle`. */
+    strength?: "subtle" | "bold";
+}
+/**
+ * A tasteful, deterministic stand-in for a missing image: a token-tinted pattern (grid, dots, lines,
+ * rings or glow) chosen from a seed, an optional glyph and caption. No assets, no network, no
+ * dependencies; follows theme and accent. Fills its parent — give the parent a size, or use it inside
+ * `AspectRatio` / `Image`.
+ *
+ * ```tsx
+ * <AspectRatio ratio="4/3"><PlaceholderArt seed="harbour-terrace" label="Harbour terrace at dusk" /></AspectRatio>
+ * ```
+ */
+export declare const PlaceholderArt: React.ForwardRefExoticComponent<PlaceholderArtProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/placeholder-art.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Image as ImageIcon } from "lucide-react";
+import { cn } from "../lib/cn.js";
+export const PLACEHOLDER_ART_PATTERNS = ["grid", "dots", "lines", "rings", "glow"];
+/** FNV-1a 32-bit — stable across server and client, so SSR and hydration agree. */
+export function hashSeed(seed) {
+    let h = 0x811c9dc5;
+    for (let i = 0; i < seed.length; i++) {
+        h ^= seed.charCodeAt(i);
+        h = Math.imul(h, 0x01000193);
+    }
+    return h >>> 0;
+}
+/** The same seed always gives the same recipe. `pattern` overrides the seeded choice. */
+export function placeholderArtRecipe(seed, pattern) {
+    const h = hashSeed(seed || "vamos");
+    const pick = (shift, n) => (h >>> shift) % n;
+    const hue = pick(0, 6) + 1;
+    return {
+        pattern: pattern && pattern !== "auto" ? pattern : PLACEHOLDER_ART_PATTERNS[pick(3, PLACEHOLDER_ART_PATTERNS.length)],
+        hue,
+        hue2: ((hue + pick(6, 4)) % 6) + 1,
+        angle: [30, 45, 60, 120, 135, 150][pick(9, 6)],
+        cell: [14, 18, 22, 26][pick(12, 4)],
+        x: 15 + pick(14, 70),
+        y: 10 + pick(21, 60),
+    };
+}
+/** CSS background for a recipe. Token colours only, mixed per theme by the browser. */
+export function placeholderArtStyle(recipe, strength = "subtle") {
+    const { pattern, hue, hue2, angle, cell, x, y } = recipe;
+    const tint = `var(--chart-${hue})`;
+    const k = strength === "bold" ? 1.6 : 1;
+    const ink = `color-mix(in oklab, ${tint} ${Math.round(30 * k)}%, transparent)`;
+    const base = `color-mix(in oklab, ${tint} ${Math.round(9 * k)}%, var(--surface-2))`;
+    const highlight = `radial-gradient(120% 90% at ${x}% ${y}%, color-mix(in oklab, ${tint} ${Math.round(16 * k)}%, transparent), transparent 65%)`;
+    let layers;
+    let sizes;
+    switch (pattern) {
+        case "grid":
+            layers = [highlight, `linear-gradient(${ink} 1px, transparent 1px)`, `linear-gradient(90deg, ${ink} 1px, transparent 1px)`];
+            sizes = ["100% 100%", `${cell}px ${cell}px`, `${cell}px ${cell}px`];
+            break;
+        case "dots":
+            layers = [highlight, `radial-gradient(circle, ${ink} 1.1px, transparent 1.6px)`];
+            sizes = ["100% 100%", `${cell}px ${cell}px`];
+            break;
+        case "lines":
+            layers = [highlight, `repeating-linear-gradient(${angle}deg, ${ink} 0 1px, transparent 1px ${Math.round(cell / 2)}px)`];
+            sizes = ["100% 100%", "100% 100%"];
+            break;
+        case "rings":
+            layers = [highlight, `repeating-radial-gradient(circle at ${x}% ${y}%, transparent 0 ${cell - 1}px, ${ink} ${cell - 1}px ${cell}px)`];
+            sizes = ["100% 100%", "100% 100%"];
+            break;
+        case "glow":
+        default:
+            layers = [
+                `radial-gradient(70% 80% at ${x}% ${y}%, color-mix(in oklab, ${tint} ${Math.round(34 * k)}%, transparent), transparent 70%)`,
+                `radial-gradient(60% 70% at ${100 - x}% ${100 - y}%, color-mix(in oklab, var(--chart-${hue2}) ${Math.round(26 * k)}%, transparent), transparent 70%)`,
+            ];
+            sizes = ["100% 100%", "100% 100%"];
+    }
+    return { backgroundColor: base, backgroundImage: layers.join(", "), backgroundSize: sizes.join(", "), backgroundPosition: "center" };
+}
+/**
+ * A tasteful, deterministic stand-in for a missing image: a token-tinted pattern (grid, dots, lines,
+ * rings or glow) chosen from a seed, an optional glyph and caption. No assets, no network, no
+ * dependencies; follows theme and accent. Fills its parent — give the parent a size, or use it inside
+ * `AspectRatio` / `Image`.
+ *
+ * ```tsx
+ * <AspectRatio ratio="4/3"><PlaceholderArt seed="harbour-terrace" label="Harbour terrace at dusk" /></AspectRatio>
+ * ```
+ */
+export const PlaceholderArt = React.forwardRef(function PlaceholderArt({ seed, pattern = "auto", icon, label, caption, strength = "subtle", className, style, ...props }, ref) {
+    const recipe = placeholderArtRecipe(seed ?? label ?? "", pattern);
+    const a11y = label ? { role: "img", "aria-label": label } : { "aria-hidden": true };
+    const captionNode = caption === true ? label : caption || null;
+    return (_jsxs("div", { ref: ref, "data-slot": "placeholder-art", "data-pattern": recipe.pattern, ...a11y, className: cn("relative flex size-full min-h-16 items-center justify-center overflow-hidden text-fg-subtle", className), style: { ...placeholderArtStyle(recipe, strength), ...style }, ...props, children: [icon !== false ? (_jsx("span", { "aria-hidden": true, "data-slot": "placeholder-art-icon", className: "inline-flex size-10 items-center justify-center rounded-full border border-line bg-[color-mix(in_oklab,var(--surface)_72%,transparent)] [&_svg]:size-[18px]", children: icon ?? _jsx(ImageIcon, { strokeWidth: 1.5 }) })) : null, captionNode ? (_jsx("span", { "aria-hidden": true, "data-slot": "placeholder-art-caption", className: "absolute start-3 bottom-2.5 max-w-[calc(100%-1.5rem)] truncate font-mono text-[10.5px] tracking-[0.06em] text-fg-muted uppercase", children: captionNode })) : null] }));
+});

package/dist/index.d.ts

@@ -5,6 +5,7 @@ export * from "./components/address-field.js";
 export * from "./components/alert-dialog.js";
 export * from "./components/alert.js";
 export * from "./components/app-shell.js";
+export * from "./components/aspect-ratio.js";
 export * from "./components/attachment-list.js";
 export * from "./components/audit-log.js";
 export * from "./components/avatar.js";
@@ -17,6 +18,7 @@ export * from "./components/calendar.js";
 export * from "./components/card.js";
 export * from "./components/carousel.js";
 export * from "./components/checkbox.js";
+export * from "./components/collapsible.js";
 export * from "./components/color-picker.js";
 export * from "./components/combobox.js";
 export * from "./components/command.js";
@@ -43,6 +45,7 @@ export * from "./components/input.js";
 export * from "./components/item.js";
 export * from "./components/kbd.js";
 export * from "./components/list-layout.js";
+export * from "./components/menubar.js";
 export * from "./components/native-select.js";
 export * from "./components/navigation-menu.js";
 export * from "./components/notification-center.js";
@@ -50,6 +53,7 @@ export * from "./components/page-header.js";
 export * from "./components/pagination.js";
 export * from "./components/phone-input.js";
 export * from "./components/pin-map.js";
+export * from "./components/placeholder-art.js";
 export * from "./components/popover.js";
 export * from "./components/progress.js";
 export * from "./components/qr-code.js";

package/dist/index.js

@@ -6,6 +6,7 @@ export * from "./components/address-field.js";
 export * from "./components/alert-dialog.js";
 export * from "./components/alert.js";
 export * from "./components/app-shell.js";
+export * from "./components/aspect-ratio.js";
 export * from "./components/attachment-list.js";
 export * from "./components/audit-log.js";
 export * from "./components/avatar.js";
@@ -18,6 +19,7 @@ export * from "./components/calendar.js";
 export * from "./components/card.js";
 export * from "./components/carousel.js";
 export * from "./components/checkbox.js";
+export * from "./components/collapsible.js";
 export * from "./components/color-picker.js";
 export * from "./components/combobox.js";
 export * from "./components/command.js";
@@ -44,6 +46,7 @@ export * from "./components/input.js";
 export * from "./components/item.js";
 export * from "./components/kbd.js";
 export * from "./components/list-layout.js";
+export * from "./components/menubar.js";
 export * from "./components/native-select.js";
 export * from "./components/navigation-menu.js";
 export * from "./components/notification-center.js";
@@ -51,6 +54,7 @@ export * from "./components/page-header.js";
 export * from "./components/pagination.js";
 export * from "./components/phone-input.js";
 export * from "./components/pin-map.js";
+export * from "./components/placeholder-art.js";
 export * from "./components/popover.js";
 export * from "./components/progress.js";
 export * from "./components/qr-code.js";

package/dist/lib/value-format.js

@@ -25,7 +25,7 @@ export function formatValue(f, value, spec = "number", extra) {
         case "compact":
             return f.compact(n, opts);
         case "compact-currency":
-            return f.currency(n, currency ?? f.currencyCode, { notation: "compact", maximumFractionDigits: 1, ...opts });
+            return f.currency(n, currency ?? f.currencyCode, { notation: "compact", minimumFractionDigits: 0, maximumFractionDigits: 1, ...opts });
         case "percent":
             return f.percent(n, opts);
         case "duration":