@photon-ai/pho-ui 0.7.1 → 1.0.0

package/src/styles/theme.css

@@ -10,7 +10,9 @@
  * `[data-mode="dark"]` = dark). No duplicated dark-mode override block.
  *
  * Values are extracted from photon.codes (Framer "Landing V1" color styles +
- * published CSS) — the single source of truth. The system is monochrome:
+ * published CSS) — the single source of truth — and authored in oklch (the
+ * exact sRGB equivalents of the site's hex values, so palette math and
+ * contrast repairs stay perceptual). The system is monochrome:
  * black/white surfaces with an alpha-based text hierarchy. "Brand" is the
  * high-contrast action color (black in light, white in dark — the site's
  * button fill), not a hue. Functional reds/greens and the categorical accent
@@ -27,6 +29,10 @@
     "PolySans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
     Arial, sans-serif;
   --font-display: var(--font-sans);
+  /* PolySans stylistic set 2 — the alternate display glyphs photon.codes
+     enables on headings. `font-display` = family + ss02; pair it with the
+     text-display-* sizes on titles. */
+  --font-display--font-feature-settings: "ss02";
   /* Serif accent — the site's italicized editorial voice. */
   --font-serif: "Instrument Serif", ui-serif, Georgia, serif;
   --font-mono:
@@ -36,30 +42,31 @@
   /* ================ Accent set (photon.codes palette) ================ */
   /* The site's categorical colors — code syntax highlighting, charts,
      avatars. Not for interactive states. */
-  --color-pho-yellow: #c3bb26;
-  --color-pho-blue: #365eb3;
-  --color-pho-sky: #3f88b6;
-  --color-pho-indigo: #6985e4;
-  --color-pho-purple: #bf6eff;
-  --color-pho-green: #36b35b;
-  --color-pho-orange: #e78016;
-  --color-pho-amber: #ffab2a;
-  --color-pho-navy: #1d2650;
+  --color-pho-yellow: oklch(0.775 0.156 106.2);
+  --color-pho-blue: oklch(0.499 0.142 263.2);
+  --color-pho-sky: oklch(0.6 0.101 239.2);
+  --color-pho-indigo: oklch(0.639 0.146 269.6);
+  --color-pho-purple: oklch(0.69 0.213 307.5);
+  --color-pho-green: oklch(0.679 0.167 149.2);
+  --color-pho-orange: oklch(0.7 0.162 57.8);
+  --color-pho-amber: oklch(0.804 0.162 71.4);
+  --color-pho-navy: oklch(0.285 0.077 271.6);
 
   /* ================== Functional anchors (site-exact) ================== */
-  --color-pho-red: #ff2244; /* site Button error state */
+  --color-pho-red: oklch(0.642 0.245 21.5); /* site Button error state */
 
   /* =========================== Type scale =========================== */
-  /* CLOSED scale — the reset removes Tailwind's default sizes (text-base,
-     text-2xl, …) so only these steps generate utilities. Body: 12/14/16/18/20.
-     Display: 24/32/40/48/60, the heading steps measured on photon.codes.
+  /* CLOSED scale — the reset removes Tailwind's default sizes (text-2xl, …)
+     so only these steps generate utilities. Body: xs/base/md/lg/xl =
+     12/14/16/18/20 (Pho `text-base` is 14px, not Tailwind's 16px default).
+     Display: xs/sm/base/md/lg/xl/2xl = 18/20/24/32/40/48/60.
      NOTE: the reset wipes the whole --text-* prefix; every --text-color-pho-*
      token is declared AFTER this point in the file, so it survives. */
   --text-*: initial;
   --text-xs: 0.75rem;
   --text-xs--line-height: 1.125rem;
-  --text-sm: 0.875rem;
-  --text-sm--line-height: 1.25rem;
+  --text-base: 0.875rem;
+  --text-base--line-height: 1.25rem;
   --text-md: 1rem;
   --text-md--line-height: 1.5rem;
   --text-lg: 1.125rem;
@@ -67,222 +74,251 @@
   --text-xl: 1.25rem;
   --text-xl--line-height: 1.875rem;
 
-  /* Display sizes — site headings run tight (lh 1.05–1.3) with -0.02em
-     tracking, -0.04em at hero sizes. */
-  --text-display-xs: 1.5rem;
-  --text-display-xs--line-height: 1.95rem;
+  /* Display sizes — headings run tight (lh 1.05–1.3) with -0.02em tracking,
+     -0.04em at hero sizes. Use for titles; body copy stays on text-*. */
+  --text-display-xs: 1.125rem;
+  --text-display-xs--line-height: 1.4625rem;
   --text-display-xs--letter-spacing: -0.02em;
-  --text-display-sm: 2rem;
-  --text-display-sm--line-height: 2.4rem;
+  --text-display-sm: 1.25rem;
+  --text-display-sm--line-height: 1.625rem;
   --text-display-sm--letter-spacing: -0.02em;
-  --text-display-md: 2.5rem;
-  --text-display-md--line-height: 2.75rem;
+  --text-display-base: 1.5rem;
+  --text-display-base--line-height: 1.95rem;
+  --text-display-base--letter-spacing: -0.02em;
+  --text-display-md: 2rem;
+  --text-display-md--line-height: 2.4rem;
   --text-display-md--letter-spacing: -0.02em;
-  --text-display-lg: 3rem;
-  --text-display-lg--line-height: 3.15rem;
+  --text-display-lg: 2.5rem;
+  --text-display-lg--line-height: 2.75rem;
   --text-display-lg--letter-spacing: -0.02em;
-  --text-display-xl: 3.75rem;
-  --text-display-xl--line-height: 3.9375rem;
-  --text-display-xl--letter-spacing: -0.04em;
+  --text-display-xl: 3rem;
+  --text-display-xl--line-height: 3.15rem;
+  --text-display-xl--letter-spacing: -0.02em;
+  --text-display-2xl: 3.75rem;
+  --text-display-2xl--line-height: 3.9375rem;
+  --text-display-2xl--letter-spacing: -0.04em;
 
   /* ========================== Font weights ========================== */
-  /* CLOSED set — Pho ships four weights; nothing else generates a utility:
+  /* CLOSED set — three stops only; nothing else generates a utility:
      font-light (300) display/marketing lines · font-normal (400) body ·
-     font-medium (500) UI controls · font-semibold (600) headings. */
+     font-medium (550) UI controls, headings, and hero slogans (unified
+     former 500 + 600). font-semibold is gone — use font-medium. */
   --font-weight-*: initial;
   --font-weight-light: 300;
   --font-weight-normal: 400;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
+  --font-weight-medium: 550;
 
   /* ============================= Radius ============================= */
-  --radius-xs: 0.125rem;
-  --radius-sm: 0.25rem;
-  --radius-md: 0.375rem;
-  --radius-lg: 0.5rem;
-  --radius-xl: 0.75rem;
-  --radius-2xl: 1rem;
-  --radius-3xl: 1.5rem;
+  /* CLOSED set — three stops + Tailwind's rounded-full for pills:
+     sm (6px) small controls · base (12px) default controls/cards/popovers
+     · lg (16px) dialogs. */
+  --radius-*: initial;
+  --radius-sm: 0.375rem;
+  --radius-base: 0.75rem;
+  --radius-lg: 1rem;
 
   /* ============================= Shadows ============================= */
   /* Floating layers only (menus, popovers, dialogs). Cards and buttons are
      flat on photon.codes — hairline borders carry the separation. */
-  --shadow-pho-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-pho-xs: 0 1px 2px oklch(0 0 0 / 0.05);
   --shadow-pho-sm:
-    0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+    0 1px 3px oklch(0 0 0 / 0.1), 0 1px 2px -1px oklch(0 0 0 / 0.1);
   --shadow-pho-md:
-    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
+    0 4px 6px -1px oklch(0 0 0 / 0.1), 0 2px 4px -2px oklch(0 0 0 / 0.06);
   --shadow-pho-lg:
-    0 12px 16px -4px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
+    0 12px 16px -4px oklch(0 0 0 / 0.08), 0 4px 6px -2px oklch(0 0 0 / 0.03);
   --shadow-pho-xl:
-    0 20px 24px -4px rgba(0, 0, 0, 0.08), 0 8px 8px -4px rgba(0, 0, 0, 0.03);
+    0 20px 24px -4px oklch(0 0 0 / 0.08), 0 8px 8px -4px oklch(0 0 0 / 0.03);
 
   /* =================== Semantic: text (text-pho-*) =================== */
-  /* The site's "Font/*" styles: pure black/white stepped by alpha. */
-  --text-color-pho-primary: light-dark(#000, #fff);
+  /* Pure black/white stepped by alpha. One ink ladder for copy AND icons —
+     no separate text-fg-pho-* ramp. */
+  --text-color-pho-primary: light-dark(oklch(0 0 0), oklch(1 0 0));
+  /* Default UI chrome — menu items at rest, short labels, icons, nav, kbd.
+     75% holds at control size; hover pair +20 → 95%. */
   --text-color-pho-secondary: light-dark(
-    rgba(0, 0, 0, 0.75),
-    rgba(255, 255, 255, 0.75)
+    oklch(0 0 0 / 0.75),
+    oklch(1 0 0 / 0.75)
   );
   --text-color-pho-secondary-hover: light-dark(
-    rgba(0, 0, 0, 0.85),
-    rgba(255, 255, 255, 0.85)
+    oklch(0 0 0 / 0.95),
+    oklch(1 0 0 / 0.95)
   );
-  --text-color-pho-tertiary: light-dark(
-    rgba(0, 0, 0, 0.5),
-    rgba(255, 255, 255, 0.5)
+  /* Supporting prose — Dialog/Field descriptions, empty states, captions.
+     55% composites to #737373 on white (4.7:1, last AA step). Not "muted":
+     it is real copy, just softer than UI chrome. */
+  --text-color-pho-description: light-dark(
+    oklch(0 0 0 / 0.55),
+    oklch(1 0 0 / 0.55)
   );
-  --text-color-pho-tertiary-hover: light-dark(
-    rgba(0, 0, 0, 0.65),
-    rgba(255, 255, 255, 0.65)
-  );
-  --text-color-pho-quaternary: light-dark(
-    rgba(0, 0, 0, 0.4),
-    rgba(255, 255, 255, 0.4)
+  --text-color-pho-description-hover: light-dark(
+    oklch(0 0 0 / 0.75),
+    oklch(1 0 0 / 0.75)
   );
   --text-color-pho-placeholder: light-dark(
-    rgba(0, 0, 0, 0.4),
-    rgba(255, 255, 255, 0.4)
+    oklch(0 0 0 / 0.4),
+    oklch(1 0 0 / 0.4)
   );
   --text-color-pho-disabled: light-dark(
-    rgba(0, 0, 0, 0.25),
-    rgba(255, 255, 255, 0.25)
+    oklch(0 0 0 / 0.25),
+    oklch(1 0 0 / 0.25)
   );
-  --text-color-pho-white: #fff;
+  --text-color-pho-white: oklch(1 0 0);
   /* Content sitting on bg-pho-brand-solid (button labels, check marks…). */
-  --text-color-pho-on-brand: light-dark(#fff, #000);
+  --text-color-pho-on-brand: light-dark(oklch(1 0 0), oklch(0 0 0));
   /* Content sitting on bg-pho-inverse. */
-  --text-color-pho-inverse: light-dark(#fff, #101010);
-  --text-color-pho-brand: light-dark(#000, #fff);
-  --text-color-pho-brand-hover: light-dark(#000, #fff);
-  --text-color-pho-error: light-dark(#d61f3d, #ff5c75);
-  --text-color-pho-error-hover: light-dark(#b81a34, #ff8095);
-  --text-color-pho-success: light-dark(#2a8a46, #4cc571);
-  --text-color-pho-warning: light-dark(#a86a00, #ffab2a);
-
-  /* ============ Semantic: foreground/icons (text-fg-pho-*) ============ */
-  --text-color-fg-pho-primary: light-dark(#000, #fff);
-  --text-color-fg-pho-secondary: light-dark(
-    rgba(0, 0, 0, 0.75),
-    rgba(255, 255, 255, 0.75)
+  --text-color-pho-inverse: light-dark(oklch(1 0 0), oklch(0.173 0 0));
+  --text-color-pho-brand: light-dark(oklch(0 0 0), oklch(1 0 0));
+  --text-color-pho-brand-hover: light-dark(oklch(0 0 0), oklch(1 0 0));
+  --text-color-pho-error: light-dark(
+    oklch(0.565 0.212 20.2),
+    oklch(0.696 0.198 14.9)
   );
-  --text-color-fg-pho-quaternary: light-dark(
-    rgba(0, 0, 0, 0.3),
-    rgba(255, 255, 255, 0.3)
+  --text-color-pho-error-hover: light-dark(
+    oklch(0.505 0.189 20),
+    oklch(0.749 0.155 11.2)
   );
-  --text-color-fg-pho-quaternary-hover: light-dark(
-    rgba(0, 0, 0, 0.45),
-    rgba(255, 255, 255, 0.45)
+  /* Success/warning light values are darkened from the site's #2a8a46/#a86a00
+     (L −0.012/−0.006, C and H untouched) — the originals sat at 4.35:1/4.44:1
+     on white, under the 4.5:1 AA floor for body-size state text. */
+  --text-color-pho-success: light-dark(
+    oklch(0.549 0.136 149.3),
+    oklch(0.735 0.162 150.5)
+  );
+  --text-color-pho-warning: light-dark(
+    oklch(0.572 0.125 69.8),
+    oklch(0.804 0.162 71.4)
   );
-  --text-color-fg-pho-brand: light-dark(#000, #fff);
-  --text-color-fg-pho-error: light-dark(#e01e3d, #ff5c75);
 
   /* =============== Semantic: background (bg-pho-*) =============== */
   /* App/page canvas — the dashboard's backdrop (app.photon.codes sign-in).
      Near-white neutral gray, warmer than the old #f5f5f7 (which had a faint
      blue cast) and one step off the #fff card surface. */
-  --background-color-pho-page: light-dark(#fafafa, #000);
+  --background-color-pho-page: light-dark(oklch(0.985 0 0), oklch(0 0 0));
   /* Main surface: cards, inputs, panels — the site's "BG/Card". */
-  --background-color-pho-primary: light-dark(#fff, #101010);
-  --background-color-pho-primary-hover: light-dark(#f5f5f7, #1a1a1a);
-  --background-color-pho-secondary: light-dark(#f5f5f7, #0b0b0b);
-  --background-color-pho-secondary-hover: light-dark(#eee, #161616);
-  --background-color-pho-tertiary: light-dark(#eee, #202020);
-  --background-color-pho-quaternary: light-dark(#e2e2e4, #2e2e2e);
+  --background-color-pho-primary: light-dark(oklch(1 0 0), oklch(0.173 0 0));
+  --background-color-pho-primary-hover: light-dark(
+    oklch(0.971 0.003 286.4),
+    oklch(0.218 0 0)
+  );
+  /* The single subtle surface — panels, tracks, chips, avatar fallbacks,
+     pressed toolbar buttons. Sits one step off the card in both modes
+     (raised in dark: 0.244 > 0.173). Transient highlight is NOT a gray step:
+     the menu-family highlight is bg-pho-ghost-hover. */
+  --background-color-pho-secondary: light-dark(
+    oklch(0.949 0 0),
+    oklch(0.244 0 0)
+  );
   /* Inverted chip surface — the site's "msgbbl" (dark chip in light mode,
      light chip in dark mode). Pair with text-pho-inverse. */
-  --background-color-pho-inverse: light-dark(#202020, #eee);
+  --background-color-pho-inverse: light-dark(
+    oklch(0.244 0 0),
+    oklch(0.949 0 0)
+  );
   --background-color-pho-disabled: light-dark(
-    rgba(0, 0, 0, 0.05),
-    rgba(255, 255, 255, 0.05)
+    oklch(0 0 0 / 0.05),
+    oklch(1 0 0 / 0.05)
   );
   /* High-contrast action fill — the site's button. Pair with
      text-pho-on-brand, never text-white. */
-  --background-color-pho-brand-solid: light-dark(#000, #fff);
+  --background-color-pho-brand-solid: light-dark(oklch(0 0 0), oklch(1 0 0));
   --background-color-pho-brand-solid-hover: light-dark(
-    rgba(16, 16, 16, 0.85),
-    #eee
+    oklch(0.173 0 0 / 0.85),
+    oklch(0.949 0 0)
   );
   --background-color-pho-brand-secondary: light-dark(
-    rgba(0, 0, 0, 0.05),
-    rgba(255, 255, 255, 0.05)
+    oklch(0 0 0 / 0.05),
+    oklch(1 0 0 / 0.05)
+  );
+  /* Knob/dot sitting on brand-solid (radio indicator, check marks…). */
+  --background-color-pho-on-brand: light-dark(oklch(1 0 0), oklch(0 0 0));
+  --background-color-pho-error-solid: oklch(0.642 0.245 21.5);
+  --background-color-pho-error-solid-hover: light-dark(
+    oklch(0.583 0.221 20.9),
+    oklch(0.671 0.219 17.7)
+  );
+  /* Functional "on" fill — Switch checked track. Same green in both modes
+     (from --color-pho-green); pair with a white thumb, never brand-solid
+     (which flips to white in dark and reads as a photographic negative). */
+  --background-color-pho-success-solid: oklch(0.679 0.167 149.2);
+  --background-color-pho-success-solid-hover: light-dark(
+    oklch(0.619 0.152 149.3),
+    oklch(0.72 0.162 149.5)
   );
-  /* Knob/dot sitting on brand-solid (switch thumb, radio indicator). */
-  --background-color-pho-on-brand: light-dark(#fff, #000);
-  --background-color-pho-error-solid: #ff2244;
-  --background-color-pho-error-solid-hover: light-dark(#e01e3d, #ff4761);
   --background-color-pho-error-primary: light-dark(
-    rgba(255, 34, 68, 0.08),
-    rgba(255, 34, 68, 0.15)
+    oklch(0.642 0.245 21.5 / 0.08),
+    oklch(0.642 0.245 21.5 / 0.15)
   );
   /* Quiet hover wash for ghost surfaces — the site's "Font/5%". */
   --background-color-pho-ghost-hover: light-dark(
-    rgba(0, 0, 0, 0.05),
-    rgba(255, 255, 255, 0.05)
+    oklch(0 0 0 / 0.05),
+    oklch(1 0 0 / 0.05)
   );
   /* Modal/scrim backdrop. */
   --background-color-pho-overlay: light-dark(
-    rgba(0, 0, 0, 0.5),
-    rgba(0, 0, 0, 0.6)
+    oklch(0 0 0 / 0.5),
+    oklch(0 0 0 / 0.6)
   );
 
   /* ================ Semantic: border (border-pho-*) ================ */
   /* Strong edge — inputs, interactive outlines. */
   --border-color-pho-primary: light-dark(
-    rgba(0, 0, 0, 0.15),
-    rgba(255, 255, 255, 0.15)
+    oklch(0 0 0 / 0.15),
+    oklch(1 0 0 / 0.15)
   );
   /* Hairline card stroke — the site's "BG/Card Stroke". */
-  --border-color-pho-secondary: light-dark(#eee, #202020);
+  --border-color-pho-secondary: light-dark(oklch(0.949 0 0), oklch(0.244 0 0));
   --border-color-pho-tertiary: light-dark(
-    rgba(0, 0, 0, 0.05),
-    rgba(255, 255, 255, 0.05)
+    oklch(0 0 0 / 0.05),
+    oklch(1 0 0 / 0.05)
   );
   /* Selected/focus edge — monochrome at 40%, matching ring/outline-pho-brand. */
-  --border-color-pho-brand: light-dark(
-    rgba(0, 0, 0, 0.4),
-    rgba(255, 255, 255, 0.4)
-  );
+  --border-color-pho-brand: light-dark(oklch(0 0 0 / 0.4), oklch(1 0 0 / 0.4));
   /* Hairline edge for elements ON a brand-solid fill (EffectButton pill). */
   --border-color-pho-on-brand: light-dark(
-    rgba(255, 255, 255, 0.15),
-    rgba(0, 0, 0, 0.08)
+    oklch(1 0 0 / 0.15),
+    oklch(0 0 0 / 0.08)
   );
-  --border-color-pho-error: #ff2244;
+  --border-color-pho-error: oklch(0.642 0.245 21.5);
   --border-color-pho-error-subtle: light-dark(
-    rgba(255, 34, 68, 0.3),
-    rgba(255, 34, 68, 0.4)
+    oklch(0.642 0.245 21.5 / 0.3),
+    oklch(0.642 0.245 21.5 / 0.4)
   );
   /* Hairline interactive edge shared by hover/selected surfaces. */
   --border-color-pho-interactive: light-dark(
-    rgba(0, 0, 0, 0.1),
-    rgba(255, 255, 255, 0.1)
+    oklch(0 0 0 / 0.1),
+    oklch(1 0 0 / 0.1)
   );
 
   /* ================== Semantic: ring (ring-pho-*) ================== */
   --ring-color-pho-primary: light-dark(
-    rgba(0, 0, 0, 0.15),
-    rgba(255, 255, 255, 0.15)
-  );
-  --ring-color-pho-secondary: light-dark(#eee, #202020);
-  --ring-color-pho-brand: light-dark(
-    rgba(0, 0, 0, 0.4),
-    rgba(255, 255, 255, 0.4)
+    oklch(0 0 0 / 0.15),
+    oklch(1 0 0 / 0.15)
   );
-  --ring-color-pho-error: #ff2244;
+  --ring-color-pho-secondary: light-dark(oklch(0.949 0 0), oklch(0.244 0 0));
+  --ring-color-pho-brand: light-dark(oklch(0 0 0 / 0.4), oklch(1 0 0 / 0.4));
+  --ring-color-pho-error: oklch(0.642 0.245 21.5);
   --ring-color-pho-error-subtle: light-dark(
-    rgba(255, 34, 68, 0.3),
-    rgba(255, 34, 68, 0.4)
+    oklch(0.642 0.245 21.5 / 0.3),
+    oklch(0.642 0.245 21.5 / 0.4)
   );
   --ring-color-pho-interactive: light-dark(
-    rgba(0, 0, 0, 0.1),
-    rgba(255, 255, 255, 0.1)
+    oklch(0 0 0 / 0.1),
+    oklch(1 0 0 / 0.1)
   );
 
   /* ============== Semantic: outline (focus rings) ============== */
-  --outline-color-pho-brand: light-dark(
-    rgba(0, 0, 0, 0.4),
-    rgba(255, 255, 255, 0.4)
-  );
-  --outline-color-pho-error: #ff2244;
+  --outline-color-pho-brand: light-dark(oklch(0 0 0 / 0.4), oklch(1 0 0 / 0.4));
+  --outline-color-pho-error: oklch(0.642 0.245 21.5);
+
+  /* ==================== Animation: Spinner ==================== */
+  /* Slightly faster than Tailwind's 1s `animate-spin` — a quicker spinner
+     reads as faster loading. Linear: constant motion has no easing. */
+  --animate-pho-spinner: pho-spinner-rotate 800ms linear infinite;
+
+  @keyframes pho-spinner-rotate {
+    to {
+      transform: rotate(360deg);
+    }
+  }
 }

package/dist/chunks/avatar-Bb4RZQIa.js

@@ -1,53 +0,0 @@
-"use client";
-import { t } from "./cn-7uGUzCOM.js";
-import { t as l } from "./resolve-variant-CcD8iG5l.js";
-import "react";
-import { jsx as i } from "react/jsx-runtime";
-import { Avatar as r } from "@base-ui/react/avatar";
-var n = {
-  xs: {
-    classes: "size-6 text-[0.625rem]",
-    description: "Extra small — inline chips and rails"
-  },
-  sm: {
-    classes: "size-8 text-xs",
-    description: "Small — dense lists"
-  },
-  md: {
-    classes: "size-10 text-sm",
-    description: "Medium — the default"
-  },
-  lg: {
-    classes: "size-12 text-md",
-    description: "Large — profile headers"
-  }
-};
-function o({ className: e, size: s = "md", ...a }) {
-  return /* @__PURE__ */ i(r.Root, {
-    className: t("squircle bg-pho-tertiary text-pho-secondary relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full align-middle font-medium select-none", l(n, s), e),
-    ...a
-  });
-}
-function c({ className: e, ...s }) {
-  return /* @__PURE__ */ i(r.Image, {
-    className: t("size-full object-cover", e),
-    ...s
-  });
-}
-function m({ className: e, ...s }) {
-  return /* @__PURE__ */ i(r.Fallback, {
-    className: t("flex size-full items-center justify-center", e),
-    ...s
-  });
-}
-var v = {
-  Root: o,
-  Image: c,
-  Fallback: m
-};
-export {
-  v as n,
-  n as t
-};
-
-//# sourceMappingURL=avatar-Bb4RZQIa.js.map

package/dist/chunks/avatar-Bb4RZQIa.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"avatar-Bb4RZQIa.js","names":[],"sources":["../../src/components/avatar/avatar.tsx"],"sourcesContent":["import { type ComponentProps, type ElementType } from \"react\";\nimport { Avatar as BaseAvatar } from \"@base-ui/react/avatar\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant, type VariantMap } from \"../../utils/resolve-variant\";\n\n/** Override Base UI's `string | (state) => string` className with plain string. */\ntype StyledProps<T extends ElementType> = Omit<\n  ComponentProps<T>,\n  \"className\"\n> & {\n  className?: string;\n};\n\n/** Size axis — four sizes, no `xl` (Geist-reductive). `md` is default. */\nexport const AVATAR_SIZES = {\n  xs: {\n    classes: \"size-6 text-[0.625rem]\",\n    description: \"Extra small — inline chips and rails\",\n  },\n  sm: { classes: \"size-8 text-xs\", description: \"Small — dense lists\" },\n  md: { classes: \"size-10 text-sm\", description: \"Medium — the default\" },\n  lg: { classes: \"size-12 text-md\", description: \"Large — profile headers\" },\n} satisfies VariantMap;\n\nexport type AvatarSize = keyof typeof AVATAR_SIZES;\n\ninterface RootProps extends StyledProps<typeof BaseAvatar.Root> {\n  /** Size variant. @default \"md\" */\n  size?: AvatarSize;\n}\n\nfunction Root({ className, size = \"md\", ...props }: RootProps) {\n  return (\n    <BaseAvatar.Root\n      className={cn(\n        \"squircle bg-pho-tertiary text-pho-secondary relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full align-middle font-medium select-none\",\n        resolveVariant(AVATAR_SIZES, size),\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction Image({ className, ...props }: StyledProps<typeof BaseAvatar.Image>) {\n  return (\n    <BaseAvatar.Image\n      className={cn(\"size-full object-cover\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Fallback({\n  className,\n  ...props\n}: StyledProps<typeof BaseAvatar.Fallback>) {\n  return (\n    <BaseAvatar.Fallback\n      className={cn(\"flex size-full items-center justify-center\", className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Avatar built on Base UI `Avatar`. Compose `Avatar.Image` with an\n * `Avatar.Fallback` (initials or icon) that shows while the image loads or if\n * it fails. Set `size` on `Avatar.Root`.\n */\nexport const Avatar = { Root, Image, Fallback };\n"],"mappings":";;;;;;AAcA,IAAa,IAAe;AAAA,EAC1B,IAAI;AAAA,IACF,SAAS;AAAA,IACT,aAAa;AAAA,EACf;AAAA,EACA,IAAI;AAAA,IAAE,SAAS;AAAA,IAAkB,aAAa;AAAA,EAAsB;AAAA,EACpE,IAAI;AAAA,IAAE,SAAS;AAAA,IAAmB,aAAa;AAAA,EAAuB;AAAA,EACtE,IAAI;AAAA,IAAE,SAAS;AAAA,IAAmB,aAAa;AAAA,EAA0B;AAC3E;AASA,SAAS,EAAK,EAAE,WAAA,GAAW,MAAA,IAAO,MAAM,GAAG,EAAA,GAAoB;AAC7D,SACE,gBAAA,EAAC,EAAW,MAAZ;AAAA,IACE,WAAW,EACT,2KACA,EAAe,GAAc,CAAI,GACjC,CACF;AAAA,IACA,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAM,EAAE,WAAA,GAAW,GAAG,EAAA,GAA+C;AAC5E,SACE,gBAAA,EAAC,EAAW,OAAZ;AAAA,IACE,WAAW,EAAG,0BAA0B,CAAS;AAAA,IACjD,GAAI;AAAA,EACL,CAAA;AAEL;AAEA,SAAS,EAAS,EAChB,WAAA,GACA,GAAG,EAAA,GACuC;AAC1C,SACE,gBAAA,EAAC,EAAW,UAAZ;AAAA,IACE,WAAW,EAAG,8CAA8C,CAAS;AAAA,IACrE,GAAI;AAAA,EACL,CAAA;AAEL;AAOA,IAAa,IAAS;AAAA,EAAE,MAAA;AAAA,EAAM,OAAA;AAAA,EAAO,UAAA;AAAS"}