@arbol-ai/ui 0.0.0-stage → 0.1.0

package/dist/theme.css

@@ -0,0 +1,533 @@
+/**
+ * @arbol-ai/ui theme: the design tokens, base styles and Tailwind CSS v4 setup every component reads.
+ *
+ * Import it once, right after Tailwind, in the application's entry stylesheet:
+ *
+ *   @import 'tailwindcss';
+ *   @import '@arbol-ai/ui/theme.css';
+ *
+ * What it brings:
+ * - `@source`: Tailwind scans the library's own files, so the classes its components use are generated.
+ * - tw-animate-css's enter and exit animations, which the components play on React Aria's
+ *   `data-entering` / `data-exiting` states.
+ * - Tokens as CSS variables on `:root`, remapped under `.dark` (dark mode is the `dark` class on an
+ *   ancestor, usually `<html>`) and under `[data-theme='mono']` (the grayscale appearance; `brand`, the
+ *   surgical teal, is the default). Tailwind exposes them as utilities through `@theme inline`:
+ *   `bg-primary`, `text-muted-foreground`, `border-border`, `rounded-field`, `shadow-md`, `bg-gray-a2`…
+ *
+ * Fonts: the families are named, never shipped. Each stack tries the application's own faces first,
+ * then the brand's open faces (Schibsted Grotesk and Martian Mono, SIL Open Font License, which an app
+ * can load from Google Fonts or Fontsource), then the system's. Override `--ui-font-sans`,
+ * `--ui-font-heading` or `--ui-font-mono` to use other faces.
+ */
+@import 'tw-animate-css';
+@source './';
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --ui-font-sans: 'Arbol Sans', 'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif;
+  --ui-font-heading:
+    'Arbol Sans SemiMono', 'Arbol Sans', 'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif;
+  --ui-font-mono: 'Arbol Sans Mono', 'Martian Mono', ui-monospace, monospace;
+}
+
+@theme inline {
+  /* Fonts: the families are named, never shipped (see the header). */
+  --font-sans: var(--ui-font-sans);
+  --font-heading: var(--ui-font-heading);
+  --font-display: var(--ui-font-heading);
+  --font-mono: var(--ui-font-mono);
+  --font-serif: ui-serif, serif;
+
+  /* Elevation — the whole `shadow-*` scale routes through the tokens below
+     (:root / .dark), so depth is theme-aware like every color. Recipe: layered
+     single-digit-opacity stacks; from `md` up, a 1px hairline ring drawn from
+     the gray alpha ramp, which the dark theme re-points to low-alpha white —
+     the edge inverts with the theme for free. Rings stay OFF `xs`/`sm` on
+     purpose: those sit on filled controls (the primary button), where a gray
+     ring reads as a dirty edge. */
+  --shadow-2xs: var(--elevation-2xs);
+  --shadow-xs: var(--elevation-xs);
+  --shadow-sm: var(--elevation-sm);
+  --shadow-md: var(--elevation-md);
+  --shadow-lg: var(--elevation-lg);
+  --shadow-xl: var(--elevation-xl);
+  --shadow-2xl: var(--elevation-2xl);
+
+  /* Colors */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-info: var(--info);
+  --color-destructive-foreground: var(--destructive-foreground);
+
+  /* Status scales */
+  --color-red-3: var(--red-3);
+  --color-red-6: var(--red-6);
+  --color-red-9: var(--red-9);
+  --color-red-10: var(--red-10);
+  --color-red-11: var(--red-11);
+  --color-red-a2: var(--red-a2);
+  --color-red-a3: var(--red-a3);
+  --color-red-a4: var(--red-a4);
+  --color-green-3: var(--green-3);
+  --color-green-6: var(--green-6);
+  --color-green-9: var(--green-9);
+  --color-green-10: var(--green-10);
+  --color-green-11: var(--green-11);
+  --color-green-a2: var(--green-a2);
+  --color-green-a3: var(--green-a3);
+  --color-green-a4: var(--green-a4);
+  --color-amber-3: var(--amber-3);
+  --color-amber-6: var(--amber-6);
+  --color-amber-9: var(--amber-9);
+  --color-amber-10: var(--amber-10);
+  --color-amber-11: var(--amber-11);
+  --color-amber-a2: var(--amber-a2);
+  --color-amber-a3: var(--amber-a3);
+  --color-amber-a4: var(--amber-a4);
+  --color-blue-3: var(--blue-3);
+  --color-blue-6: var(--blue-6);
+  --color-blue-9: var(--blue-9);
+  --color-blue-10: var(--blue-10);
+  --color-blue-11: var(--blue-11);
+  --color-blue-a2: var(--blue-a2);
+  --color-blue-a3: var(--blue-a3);
+  --color-blue-a4: var(--blue-a4);
+
+  /* Gray scale */
+  --color-gray-1: var(--gray-1);
+  --color-gray-2: var(--gray-2);
+  --color-gray-3: var(--gray-3);
+  --color-gray-4: var(--gray-4);
+  --color-gray-5: var(--gray-5);
+  --color-gray-6: var(--gray-6);
+  --color-gray-7: var(--gray-7);
+  --color-gray-8: var(--gray-8);
+  --color-gray-9: var(--gray-9);
+  --color-gray-10: var(--gray-10);
+  --color-gray-11: var(--gray-11);
+  --color-gray-12: var(--gray-12);
+
+  /* Gray alpha */
+  --color-gray-a1: var(--gray-a1);
+  --color-gray-a2: var(--gray-a2);
+  --color-gray-a3: var(--gray-a3);
+  --color-gray-a4: var(--gray-a4);
+  --color-gray-a5: var(--gray-a5);
+  --color-gray-a6: var(--gray-a6);
+  --color-gray-a7: var(--gray-a7);
+  --color-gray-a8: var(--gray-a8);
+  --color-gray-a9: var(--gray-a9);
+  --color-gray-a10: var(--gray-a10);
+
+  /* Brand semantic surfaces — theme-aware (see :root / .dark) */
+  --color-brand-tint: var(--brand-tint);
+  --color-brand-hairline: var(--brand-hairline);
+  --color-brand-accent: var(--brand-accent);
+
+  /* Charts */
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  /* Chart — semantic outcome tokens */
+  --color-chart-positive: var(--chart-positive);
+  --color-chart-negative: var(--chart-negative);
+  --color-chart-caution: var(--chart-caution);
+  --color-chart-neutral: var(--chart-neutral);
+
+  /* Radius */
+  --radius: 0.625rem;
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 14px);
+
+  /* Semantic radius (themeable) */
+  --radius-field: var(--radius-field);
+  --radius-menu: var(--radius-menu);
+  --radius-card: var(--radius-card);
+  --radius-dialog: var(--radius-dialog);
+
+  /* Typography */
+  --text-2xs: 0.6875rem;
+  --text-2xs--line-height: 1rem;
+  --text-3xs: 0.625rem;
+  --text-3xs--line-height: 0.875rem;
+}
+
+:root {
+  --background: #ffffff;
+  --foreground: #1c1d1e;
+
+  /* Elevation (see the @theme mapping). Light: soft layered umbra, hairline
+     ring from the gray alpha ramp on overlay sizes only. */
+  --elevation-2xs: 0 1px 2px rgba(0, 0, 0, 0.04);
+  --elevation-xs: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.03);
+  --elevation-sm:
+    0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 6px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
+  --elevation-md:
+    0 0 0 1px var(--gray-a2), 0 2px 4px rgba(0, 0, 0, 0.05), 0 6px 14px rgba(0, 0, 0, 0.05),
+    0 12px 28px rgba(0, 0, 0, 0.04);
+  --elevation-lg:
+    0 0 0 1px var(--gray-a3), 0 4px 8px rgba(0, 0, 0, 0.05), 0 10px 22px rgba(0, 0, 0, 0.06),
+    0 20px 44px rgba(0, 0, 0, 0.07);
+  --elevation-xl:
+    0 0 0 1px var(--gray-a3), 0 8px 16px rgba(0, 0, 0, 0.06), 0 16px 36px rgba(0, 0, 0, 0.08),
+    0 28px 64px rgba(0, 0, 0, 0.09);
+  --elevation-2xl:
+    0 0 0 1px var(--gray-a3), 0 12px 24px rgba(0, 0, 0, 0.08), 0 24px 56px rgba(0, 0, 0, 0.11),
+    0 40px 96px rgba(0, 0, 0, 0.12);
+
+  /* Gray scale */
+  --gray-1: #ffffff;
+  --gray-2: #f5f5f5;
+  --gray-3: #e6e6e6;
+  --gray-4: #d4d4d4;
+  --gray-5: #a3a3a3;
+  --gray-6: #656a6e;
+  --gray-7: #525252;
+  --gray-8: #4c5154;
+  --gray-9: #343739;
+  --gray-10: #26282a;
+  --gray-11: #1c1d1e;
+  --gray-12: #000000;
+
+  /* Gray alpha */
+  --gray-a1: rgba(0, 0, 0, 0.05);
+  --gray-a2: rgba(0, 0, 0, 0.08);
+  --gray-a3: rgba(0, 0, 0, 0.15);
+  --gray-a4: rgba(0, 0, 0, 0.35);
+  --gray-a5: rgba(0, 0, 0, 0.4);
+  --gray-a6: rgba(0, 0, 0, 0.5);
+  --gray-a7: rgba(0, 0, 0, 0.6);
+  --gray-a8: rgba(0, 0, 0, 0.7);
+  --gray-a9: rgba(0, 0, 0, 0.8);
+  --gray-a10: rgba(0, 0, 0, 0.95);
+
+  /* Status scales (theme-independent) */
+  --red-3: #fee2e2;
+  --red-6: #fca5a5;
+  --red-9: #ef4444;
+  --red-10: #dc2626;
+  --red-11: #b91c1c;
+  --green-3: #dcfce7;
+  --green-6: #86efac;
+  --green-9: #22c55e;
+  --green-10: #16a34a;
+  --green-11: #15803d;
+  --amber-3: #fef3c7;
+  --amber-6: #fcd34d;
+  --amber-9: #f59e0b;
+  --amber-10: #d97706;
+  --amber-11: #b45309;
+  --blue-3: #dbeafe;
+  --blue-6: #93c5fd;
+  --blue-9: #3b82f6;
+  --blue-10: #2563eb;
+  --blue-11: #1d4ed8;
+  --red-a2: rgba(239, 68, 68, 0.08);
+  --red-a3: rgba(239, 68, 68, 0.15);
+  --red-a4: rgba(239, 68, 68, 0.25);
+  --green-a2: rgba(34, 197, 94, 0.08);
+  --green-a3: rgba(34, 197, 94, 0.15);
+  --green-a4: rgba(34, 197, 94, 0.25);
+  --amber-a2: rgba(245, 158, 11, 0.08);
+  --amber-a3: rgba(245, 158, 11, 0.15);
+  --amber-a4: rgba(245, 158, 11, 0.25);
+  --blue-a2: rgba(59, 130, 246, 0.08);
+  --blue-a3: rgba(59, 130, 246, 0.15);
+  --blue-a4: rgba(59, 130, 246, 0.25);
+
+  /* Semantic radius */
+  --radius-field: 0.875rem;
+  --radius-menu: 1.125rem;
+  --radius-card: 1.125rem;
+  --radius-dialog: 1.5rem;
+
+  /* Brand semantic surfaces (light) */
+  --brand-tint: #f2faf8;
+  --brand-hairline: #ddf0ea;
+  --brand-accent: #0b6d61;
+
+  /* Semantic colors */
+  --card: #ffffff;
+  --card-foreground: #1c1d1e;
+  --popover: #ffffff;
+  --popover-foreground: #1c1d1e;
+  --primary: #0d8273;
+  --primary-foreground: #ffffff;
+  --secondary: #e6e6e6;
+  --secondary-foreground: #1c1d1e;
+  --muted: #f5f5f5;
+  --muted-foreground: #656a6e;
+  --accent: var(--gray-a2);
+  --accent-foreground: var(--foreground);
+  /* Solid red that carries white text at WCAG AA (4.8:1) in both modes; red text uses red-11. */
+  --destructive: #dc2626;
+  --destructive-foreground: #ffffff;
+  --success: var(--green-9);
+  --warning: var(--amber-9);
+  --info: var(--blue-9);
+  --border: var(--gray-a3);
+  --input: var(--gray-a3);
+  --ring: #14a08c;
+
+  /* Charts — categorical (brand-aligned) */
+  --chart-1: #14a08c;
+  --chart-2: #3b82f6;
+  --chart-3: #f59e0b;
+  --chart-4: #8b5cf6;
+  --chart-5: #ef4444;
+
+  /* Charts — semantic outcome (derived from status scales) */
+  --chart-positive: var(--green-10);
+  --chart-negative: var(--red-10);
+  --chart-caution: var(--amber-10);
+  --chart-neutral: var(--gray-6);
+}
+
+.dark {
+  --background: #1c1d1e;
+  --foreground: #f5f5f5;
+
+  /* Elevation. Dark: black gains depth while the ring — the same gray alpha
+     vars, now low-alpha white — becomes the edge that separates a floating
+     surface from the surface behind it. */
+  --elevation-2xs: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --elevation-xs: 0 1px 2px rgba(0, 0, 0, 0.32), 0 2px 4px rgba(0, 0, 0, 0.24);
+  --elevation-sm:
+    0 1px 2px rgba(0, 0, 0, 0.34), 0 2px 6px rgba(0, 0, 0, 0.28), 0 4px 12px rgba(0, 0, 0, 0.22);
+  --elevation-md:
+    0 0 0 1px var(--gray-a3), 0 2px 4px rgba(0, 0, 0, 0.34), 0 6px 14px rgba(0, 0, 0, 0.3),
+    0 12px 28px rgba(0, 0, 0, 0.26);
+  --elevation-lg:
+    0 0 0 1px var(--gray-a3), 0 4px 8px rgba(0, 0, 0, 0.36), 0 10px 22px rgba(0, 0, 0, 0.32),
+    0 20px 44px rgba(0, 0, 0, 0.3);
+  --elevation-xl:
+    0 0 0 1px var(--gray-a4), 0 8px 16px rgba(0, 0, 0, 0.38), 0 16px 36px rgba(0, 0, 0, 0.36),
+    0 28px 64px rgba(0, 0, 0, 0.34);
+  --elevation-2xl:
+    0 0 0 1px var(--gray-a4), 0 12px 24px rgba(0, 0, 0, 0.42), 0 24px 56px rgba(0, 0, 0, 0.44),
+    0 40px 96px rgba(0, 0, 0, 0.46);
+
+  /* Gray scale */
+  --gray-1: #1c1d1e;
+  --gray-2: #262829;
+  --gray-3: #343739;
+  --gray-4: #4c5154;
+  --gray-5: #656a6e;
+  --gray-6: #8b9095;
+  --gray-7: #a3a8ad;
+  --gray-8: #c4c8cc;
+  --gray-9: #e6e6e6;
+  --gray-10: #f5f5f5;
+  --gray-11: #fafafa;
+  --gray-12: #ffffff;
+
+  /* Gray alpha */
+  --gray-a1: rgba(255, 255, 255, 0.03);
+  --gray-a2: rgba(255, 255, 255, 0.06);
+  --gray-a3: rgba(255, 255, 255, 0.1);
+  --gray-a4: rgba(255, 255, 255, 0.15);
+  --gray-a5: rgba(255, 255, 255, 0.2);
+  --gray-a6: rgba(255, 255, 255, 0.3);
+  --gray-a7: rgba(255, 255, 255, 0.4);
+  --gray-a8: rgba(255, 255, 255, 0.55);
+  --gray-a9: rgba(255, 255, 255, 0.7);
+  --gray-a10: rgba(255, 255, 255, 0.9);
+
+  /* Status scale overrides (dark) */
+  --red-3: var(--red-a3);
+  --red-6: rgba(239, 68, 68, 0.35);
+  --red-10: #f87171;
+  --red-11: #fca5a5;
+  --green-3: var(--green-a3);
+  --green-6: rgba(34, 197, 94, 0.35);
+  --green-10: #4ade80;
+  --green-11: #86efac;
+  --amber-3: var(--amber-a3);
+  --amber-6: rgba(245, 158, 11, 0.35);
+  --amber-10: #fbbf24;
+  --amber-11: #fcd34d;
+  --blue-3: var(--blue-a3);
+  --blue-6: rgba(59, 130, 246, 0.35);
+  --blue-10: #60a5fa;
+  --blue-11: #93c5fd;
+
+  /* Brand semantic surfaces (dark) */
+  --brand-tint: rgba(76, 189, 167, 0.08);
+  --brand-hairline: rgba(76, 189, 167, 0.2);
+  --brand-accent: #82d5c4;
+
+  /* Semantic colors */
+  --card: #1c1d1e;
+  --card-foreground: #f5f5f5;
+  --popover: #262829;
+  --popover-foreground: #f5f5f5;
+  --primary: #4cbda7;
+  --primary-foreground: #052b26;
+  --secondary: #343739;
+  --secondary-foreground: #f5f5f5;
+  --muted: #262829;
+  --muted-foreground: #8b9095;
+  --accent: var(--gray-a2);
+  --accent-foreground: var(--foreground);
+  --destructive: #dc2626;
+  --destructive-foreground: #ffffff;
+  --success: var(--green-9);
+  --warning: var(--amber-9);
+  --info: var(--blue-9);
+  --border: var(--gray-a3);
+  --input: var(--gray-a3);
+  --ring: rgba(76, 189, 167, 0.5);
+
+  /* Charts — categorical (brand-aligned) */
+  --chart-1: #4cbda7;
+  --chart-2: #60a5fa;
+  --chart-3: #fbbf24;
+  --chart-4: #a78bfa;
+  --chart-5: #f87171;
+
+  color-scheme: dark;
+}
+
+/*
+ * Appearances: `brand` (surgical teal, the default the tokens above already carry) and `mono` (grayscale).
+ * Set `data-theme` on <html>. The selectors include `:root`/`.dark` so they outrank the base blocks.
+ */
+:root[data-theme='brand'] {
+  --primary: #0d8273;
+  --primary-foreground: #ffffff;
+  --ring: #14a08c;
+  --brand-tint: #f2faf8;
+  --brand-hairline: #ddf0ea;
+  --brand-accent: #0b6d61;
+  --chart-1: #14a08c;
+}
+
+.dark[data-theme='brand'] {
+  --primary: #4cbda7;
+  --primary-foreground: #052b26;
+  --ring: rgba(76, 189, 167, 0.5);
+  /* Without these the light tint wins over `.dark`: white rows, invisible text. */
+  --brand-tint: rgba(76, 189, 167, 0.08);
+  --brand-hairline: rgba(76, 189, 167, 0.2);
+  --brand-accent: #82d5c4;
+  --chart-1: #4cbda7;
+}
+
+:root[data-theme='mono'] {
+  --primary: #1c1d1e;
+  --primary-foreground: #ffffff;
+  --ring: rgba(0, 0, 0, 0.35);
+  --brand-tint: var(--gray-a1);
+  --brand-hairline: var(--gray-a3);
+  --brand-accent: var(--gray-11);
+  --chart-1: #52525b;
+}
+
+.dark[data-theme='mono'] {
+  --primary: #f5f5f5;
+  --primary-foreground: #1c1d1e;
+  --ring: rgba(255, 255, 255, 0.3);
+  --brand-accent: var(--gray-11);
+  --chart-1: #a1a1aa;
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground min-h-dvh;
+  }
+  html {
+    text-rendering: optimizelegibility;
+  }
+  input::placeholder,
+  textarea::placeholder {
+    @apply text-muted-foreground;
+  }
+  /* Everything that acts like a button reads like one. React Aria renders
+     options/menu items/tabs as non-button elements, so role selectors carry
+     the same promise there. */
+  button:not(:disabled),
+  [role='button']:not(:disabled),
+  [role='option']:not([aria-disabled='true']),
+  [role='menuitem']:not([aria-disabled='true']),
+  [role='menuitemcheckbox']:not([aria-disabled='true']),
+  [role='menuitemradio']:not([aria-disabled='true']),
+  [role='tab']:not([aria-disabled='true']),
+  [role='radio']:not([aria-disabled='true']),
+  [role='checkbox']:not([aria-disabled='true']) {
+    @apply cursor-pointer;
+  }
+}
+
+@utility scrollable {
+  scrollbar-color: var(--color-gray-a6) transparent;
+  scrollbar-width: thin;
+
+  &::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--color-gray-a6);
+    background-clip: content-box;
+    border: 2px solid transparent;
+    border-radius: 9999px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: var(--color-gray-a8);
+  }
+}
+
+/*
+ * A control smaller than a fingertip keeps its look, but on a touch screen it takes taps across at
+ * least 44 × 44 px (WCAG 2.5.5). The area is drawn from the control, so the control must be positioned
+ * (`relative`); a box larger than 44 px keeps its own size.
+ */
+@utility touch-target {
+  @media (pointer: coarse) {
+    &::after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: max(100%, 2.75rem);
+      height: max(100%, 2.75rem);
+      content: '';
+      translate: -50% -50%;
+    }
+  }
+}

package/package.json

@@ -1,6 +1,120 @@
 {
   "name": "@arbol-ai/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Arbol's React component library: accessible React Aria Components styled with Tailwind CSS v4, localized in Spanish and English, for building dashboards fast.",
+  "keywords": [
+    "accessibility",
+    "components",
+    "dashboard",
+    "design-system",
+    "i18n",
+    "react",
+    "react-aria",
+    "react-aria-components",
+    "tailwindcss",
+    "ui"
+  ],
+  "homepage": "https://github.com/getarbol/project-arbol-ui#readme",
+  "bugs": {
+    "url": "https://github.com/getarbol/project-arbol-ui/issues"
+  },
+  "license": "MIT",
+  "author": "Arbol",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/getarbol/project-arbol-ui.git"
+  },
+  "files": [
+    "dist",
+    "skills",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./theme.css": "./dist/theme.css",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "dev": "vp dev site",
+    "build": "vp pack",
+    "site:build": "vp build site",
+    "typecheck": "tsc -p tsconfig.json && tsc -p tsconfig.node.json",
+    "check": "vp check",
+    "fix": "vp check --fix",
+    "test": "vp test run",
+    "test:coverage": "vp test run --coverage",
+    "verify": "vp run typecheck && vp check && vp pack && vp build site && vp run verify:package",
+    "verify:package": "publint --strict && attw --pack . --profile esm-only --exclude-entrypoints ./theme.css",
+    "prepare": "vp config"
+  },
+  "dependencies": {
+    "@internationalized/date": "^3.12.4",
+    "@phosphor-icons/react": "^2.1.10",
+    "@tanstack/react-table": "^9.3.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.7.0",
+    "tw-animate-css": "^1.4.0"
+  },
+  "devDependencies": {
+    "@arethetypeswrong/cli": "0.18.5",
+    "@tailwindcss/vite": "4.3.5",
+    "@tanstack/react-form": "1.33.5",
+    "@types/node": "26.6.5",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "@vitejs/plugin-react": "6.2.1",
+    "@vitest/browser-playwright": "5.1.0",
+    "@vitest/coverage-istanbul": "5.1.0",
+    "axe-core": "4.14.0",
+    "echarts": "6.1.0",
+    "playwright": "1.65.0",
+    "publint": "0.3.25",
+    "react": "19.3.1",
+    "react-aria": "3.53.1",
+    "react-aria-components": "1.22.1",
+    "react-dom": "19.3.1",
+    "tailwindcss": "4.3.5",
+    "typescript": "7.0.2",
+    "ultracite": "8.1.1",
+    "vite": "npm:@voidzero-dev/vite-plus-core@1.5.0",
+    "vite-plus": "1.5.0",
+    "vitest": "5.1.0",
+    "vitest-browser-react": "2.3.0",
+    "wrangler": "4.158.0"
+  },
+  "peerDependencies": {
+    "@tanstack/react-form": "^1.30.0",
+    "echarts": "^6.0.0",
+    "react": "^19.0.0",
+    "react-aria": "^3.52.0",
+    "react-aria-components": "^1.21.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.1.0"
+  },
+  "peerDependenciesMeta": {
+    "echarts": {
+      "optional": true
+    },
+    "@tanstack/react-form": {
+      "optional": true
+    }
+  },
+  "overrides": {
+    "vite": "npm:@voidzero-dev/vite-plus-core@1.5.0",
+    "vitest": "5.1.0"
+  },
+  "engines": {
+    "node": ">=22.18"
+  },
+  "packageManager": "bun@1.4.4"
+}

package/skills/arbol-ui/references/i18n.md

@@ -0,0 +1,41 @@
+# Text and languages
+
+There are exactly two kinds of text on a screen built with @arbol-ai/ui.
+
+## App copy: always yours
+
+Titles, labels, descriptions, column headers, button labels, empty-state sentences, item names: pass them
+through props and children, already translated by the app's own system (Paraglide's `m.*()`, i18next's
+`t()`, or plain Spanish). The library never defaults app copy.
+
+```tsx
+<PageHeader>
+  <PageTitle>{m.contacts_title()}</PageTitle>
+</PageHeader>
+<SearchField aria-label={m.contacts_search()} placeholder={m.contacts_searchPlaceholder()} />
+```
+
+## Library strings: built in, Spanish and English
+
+What a component says by itself (a close button's name, "Previous page", "1–15 of 120", "No results",
+screen-reader instructions, "Copied") ships in English (`en-US`) and Latin American Spanish (`es-419`), and
+follows `UIProvider locale`: any `es-*` locale reads Spanish, everything else English. Numbers inside them
+are formatted for the locale (`1.234` in `es-CO`).
+
+Replace any of them, in whichever locale is active, with `UIProvider messages`. Values are strings or
+functions of the message's variables, so Paraglide functions plug in directly:
+
+```tsx
+<UIProvider locale={locale} messages={{ 'overlay.close': m.ui_close, 'pagination.range': m.ui_pagination_range }}>
+```
+
+Variables keep the names Arbol's catalogs use: `first`, `last`, `total`, `count`, `page`, `label`,
+`value`. Many components also take a prop for a single instance (`closeLabel`, `clearLabel`).
+
+## Dates, times and numbers
+
+Components format with React Aria and `@internationalized/date` in the provider's locale. Spanish
+conventions differ by region (`es-CO`: 12-hour clock, weeks start on Sunday; `es`: 24-hour, Monday): pick
+the locale tag deliberately, and pass `firstDayOfWeek` / `hourCycle` to the date components when the
+product needs another convention. Pass numbers as numbers and dates as `CalendarDate`/`ZonedDateTime`
+values, never pre-formatted strings, so plural rules and formats stay correct.