@usetheo/ui 0.35.3 → 0.36.0

package/dist/styles-v3-legacy.css

@@ -0,0 +1,88 @@
+@import "./fonts.css";
+@import "./tokens.css";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  * {
+    border-color: hsl(var(--border));
+  }
+
+  html {
+    font-family: var(--font-body);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+  }
+
+  body {
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+    /* OpenType ligatures globally — Geist's "liga" feature is structural
+     * and gives the Vercel-tight glyph combinations. */
+    font-feature-settings: "liga" 1, "ss01" 1;
+  }
+
+  /* Display headings inherit theme display font (Geist by default).
+   * Per-size tracking is set in tailwind.config.ts; this is the safety net. */
+  h1,
+  h2,
+  h3,
+  h4 {
+    font-family: var(--font-display);
+    font-weight: 600;
+  }
+
+  /* Code surfaces: use the mono token + tabular numerals so columns of
+   * numbers line up in tables/logs/metrics. */
+  code,
+  pre,
+  kbd,
+  samp {
+    font-family: var(--font-mono);
+    font-feature-settings: "tnum" 1, "liga" 1;
+  }
+
+  /* Focus ring — violet (signature) */
+  :focus-visible {
+    outline: 2px solid hsl(var(--ring));
+    outline-offset: 2px;
+  }
+
+  /* Selection — soft violet */
+  ::selection {
+    background-color: hsl(var(--primary) / 0.25);
+    color: hsl(var(--foreground));
+  }
+
+  /* Native scrollbar fallback (Violet Forge).
+   * Used for native browser scroll on elements that don't wrap in <ScrollArea>.
+   * Components that DO use <ScrollArea> hide the native scrollbar via Radix.
+   */
+  *::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  *::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  *::-webkit-scrollbar-thumb {
+    background-color: hsl(var(--primary) / 0.25);
+    border: 2px solid transparent;
+    background-clip: content-box;
+    border-radius: 9999px;
+    transition: background-color var(--duration-fast) var(--ease-out-soft);
+  }
+  *::-webkit-scrollbar-thumb:hover {
+    background-color: hsl(var(--primary) / 0.5);
+  }
+  *::-webkit-scrollbar-thumb:active {
+    background-color: hsl(var(--primary) / 0.75);
+  }
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: hsl(var(--primary) / 0.3) transparent;
+  }
+}

package/dist/styles.css

@@ -0,0 +1,137 @@
+/* Theo UI — Tailwind v4 prebuilt entry stylesheet.
+ *
+ * What ships at `@theokit/ui/styles.css` since RFC 0008 follow-up
+ * (`0.5.1-next.0`). Consumer imports this once and the framework's
+ * Tailwind v4 build picks up:
+ *   - `@import "tailwindcss"` — Tailwind v4 core (preflight + utilities)
+ *   - `@import "./fonts.css"` — self-hosted Geist + Geist Mono @font-face
+ *   - `@import "./tokens.css"` — runtime `--*` vars (theme cascade target)
+ *   - `@import "./tokens-v4.css"` — `@theme { --color-*, --text-*, … }`
+ *     namespace Tailwind v4 reads to emit utilities
+ *   - `@layer base` — `border-color`, body font, focus ring, scrollbar
+ *     styling that depend on the runtime vars
+ *
+ * v3-only consumers (Tailwind 3.x + the shadcn registry preset) should
+ * load `@theokit/ui/styles-v3-legacy.css` instead — that file is the
+ * unchanged `@tailwind base; @tailwind components; @tailwind utilities`
+ * variant. See RFC 0008 follow-up.
+ */
+
+@import "tailwindcss";
+@import "./fonts.css";
+@import "./tokens.css";
+@import "./tokens-v4.css";
+
+@layer base {
+  * {
+    border-color: hsl(var(--border));
+  }
+
+  /* Tailwind v4 preflight regression compensation —
+   * v4 intentionally dropped the `button { cursor: pointer }` rule
+   * (https://tailwindcss.com/docs/upgrade-guide#default-button-cursor)
+   * so every native <button> renders with the default arrow cursor.
+   *
+   * Library authors are expected to opt in explicitly per button. The
+   * Violet Forge `<Button>` primitive does so (see its CVA). For the
+   * dozens of native <button> elements composites render directly,
+   * we restore the v3 behavior here — scoped to *interactive* buttons:
+   *
+   *   - `:not(:disabled)` skips the HTML `disabled` attribute path
+   *     (browser already shows `cursor: default` for disabled, but the
+   *     rule below stays explicit for clarity).
+   *   - `:not([aria-disabled="true"])` skips the ARIA-disabled path
+   *     (where the button stays focusable but acts as no-op).
+   *
+   * This is an EXPLICIT opt-in by the library author for consumers who
+   * imported `@theokit/ui/styles.css` — it does NOT alter Tailwind's
+   * global preflight, only this stylesheet's @layer base.
+   */
+  button:not(:disabled):not([aria-disabled="true"]),
+  [role="button"]:not([aria-disabled="true"]) {
+    cursor: pointer;
+  }
+
+  html {
+    font-family: var(--font-body);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+  }
+
+  body {
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+    /* OpenType ligatures globally — Geist's "liga" feature is structural
+     * and gives the Vercel-tight glyph combinations. */
+    font-feature-settings: "liga" 1, "ss01" 1;
+  }
+
+  /* Display headings inherit theme display font (Geist by default).
+   * Per-size tracking is set in tokens-v4.css; this is the safety net. */
+  h1,
+  h2,
+  h3,
+  h4 {
+    font-family: var(--font-display);
+    font-weight: 600;
+  }
+
+  /* Code surfaces: use the mono token + tabular numerals so columns of
+   * numbers line up in tables/logs/metrics. */
+  code,
+  pre,
+  kbd,
+  samp {
+    font-family: var(--font-mono);
+    font-feature-settings: "tnum" 1, "liga" 1;
+  }
+
+  /* Focus ring — violet (signature) */
+  :focus-visible {
+    outline: 2px solid hsl(var(--ring));
+    outline-offset: 2px;
+  }
+
+  /* Selection — soft violet */
+  ::selection {
+    background-color: hsl(var(--primary) / 0.25);
+    color: hsl(var(--foreground));
+  }
+
+  /* Native scrollbar fallback (Violet Forge).
+   * Used for native browser scroll on elements that don't wrap in <ScrollArea>.
+   * Components that DO use <ScrollArea> hide the native scrollbar via Radix.
+   */
+  *::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  *::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  *::-webkit-scrollbar-thumb {
+    background-color: hsl(var(--primary) / 0.25);
+    border: 2px solid transparent;
+    background-clip: content-box;
+    border-radius: 9999px;
+    transition: background-color var(--duration-fast) var(--ease-out-soft);
+  }
+  *::-webkit-scrollbar-thumb:hover {
+    background-color: hsl(var(--primary) / 0.5);
+  }
+  *::-webkit-scrollbar-thumb:active {
+    background-color: hsl(var(--primary) / 0.75);
+  }
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: hsl(var(--primary) / 0.3) transparent;
+  }
+}
+
+/* RFC 0008 follow-up #2 — pre-compiled utility rules. The bytes here
+ * are emitted at build time by `scripts/build-precompiled-css.ts` so
+ * consumers do not depend on Tailwind v4 `@source` scanning the
+ * library's node_modules tree (which breaks under pnpm symlinks).
+ */
+@import "./components.css";

package/dist/tokens-v4.css

@@ -0,0 +1,223 @@
+/* Theo UI — Tailwind v4 theme aliases.
+ *
+ * Companion to `tokens.css`. The base file declares the v3-style runtime
+ * variables (`--primary`, `--background`, …) that `<ThemeProvider>` and
+ * `[data-theme]` cascades mutate at runtime. This file declares the
+ * Tailwind v4 `@theme` namespace (`--color-primary`, `--color-background`,
+ * …) by aliasing back to those runtime vars via `hsl(var(--*))`.
+ *
+ * Why two layers:
+ *   - `<ThemeProvider>` (and the 10 built-in themes) sets `--primary`
+ *     etc. at runtime — that's the theme switch surface.
+ *   - Tailwind v4 resolves color utilities exclusively through
+ *     `--color-*` tokens declared in `@theme`. Without these aliases
+ *     `bg-primary`, `text-muted-foreground`, `border-border`, etc. emit
+ *     a className with no matching CSS rule.
+ *
+ * The indirection (`--color-primary: var(--primary)`) preserves the
+ * runtime theme cascade — browsers resolve `var(--color-primary)` →
+ * `var(--primary)` → current `[data-theme]` value at paint time.
+ *
+ * See RFC 0008 follow-up.
+ */
+
+/* `@theme inline` (Tailwind v4 keyword) preserves the var() reference at
+ * runtime instead of inlining the value at build time. Without `inline`,
+ * `--color-primary: var(--primary)` would resolve to whatever `--primary`
+ * was when Tailwind compiled the CSS — breaking the theme cascade.
+ * See https://tailwindcss.com/docs/theme#using-your-theme-variables-in-arbitrary-values
+ */
+@theme inline {
+  /* Color tokens ------------------------------------------------------ */
+  --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-deep: var(--primary-deep);
+  --color-primary-glow: var(--primary-glow);
+  --color-primary-foreground: var(--primary-foreground);
+
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+
+  --color-accent: var(--accent);
+  --color-accent-deep: var(--accent-deep);
+  --color-accent-foreground: var(--accent-foreground);
+
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+
+  /* Status group (D4) ------------------------------------------------- */
+  --color-status-online: var(--status-online);
+  --color-status-online-foreground: var(--status-online-foreground);
+  --color-status-offline: var(--status-offline);
+  --color-status-offline-foreground: var(--status-offline-foreground);
+  --color-status-degraded: var(--status-degraded);
+  --color-status-degraded-foreground: var(--status-degraded-foreground);
+  --color-status-info: var(--status-info);
+  --color-status-info-foreground: var(--status-info-foreground);
+
+  /* Fonts ------------------------------------------------------------- */
+  --font-display: var(--font-display);
+  --font-sans: var(--font-body);
+  --font-mono: var(--font-mono);
+
+  /* Violet Forge typescale -------------------------------------------- *
+   * Compound text utilities: each `--text-{name}` declares the size,
+   * with companion `--*--line-height`, `--*--letter-spacing`, and
+   * `--*--font-weight` properties Tailwind v4 picks up automatically.
+   */
+  --text-display-2xl: 64px;
+  --text-display-2xl--line-height: 1;
+  --text-display-2xl--letter-spacing: -0.0464em;
+  --text-display-2xl--font-weight: 600;
+
+  --text-display-xl: 48px;
+  --text-display-xl--line-height: 1.05;
+  --text-display-xl--letter-spacing: -0.05em;
+  --text-display-xl--font-weight: 600;
+
+  --text-display-lg: 40px;
+  --text-display-lg--line-height: 1.1;
+  --text-display-lg--letter-spacing: -0.05em;
+  --text-display-lg--font-weight: 600;
+
+  --text-display-md: 32px;
+  --text-display-md--line-height: 1.2;
+  --text-display-md--letter-spacing: -0.04em;
+  --text-display-md--font-weight: 600;
+
+  --text-headline: 28px;
+  --text-headline--line-height: 1.25;
+  --text-headline--letter-spacing: -0.035em;
+  --text-headline--font-weight: 600;
+
+  --text-title-lg: 24px;
+  --text-title-lg--line-height: 1.33;
+  --text-title-lg--letter-spacing: -0.04em;
+  --text-title-lg--font-weight: 600;
+
+  --text-title-md: 20px;
+  --text-title-md--line-height: 1.4;
+  --text-title-md--letter-spacing: -0.03em;
+  --text-title-md--font-weight: 600;
+
+  --text-body-lg: 18px;
+  --text-body-lg--line-height: 1.56;
+  --text-body-lg--letter-spacing: -0.01em;
+  --text-body-lg--font-weight: 400;
+
+  --text-body-md: 14px;
+  --text-body-md--line-height: 1.43;
+  --text-body-md--letter-spacing: 0;
+  --text-body-md--font-weight: 400;
+
+  --text-body-sm: 13px;
+  --text-body-sm--line-height: 1.46;
+  --text-body-sm--font-weight: 400;
+
+  --text-label: 14px;
+  --text-label--line-height: 1.43;
+  --text-label--font-weight: 500;
+
+  --text-label-caps: 12px;
+  --text-label-caps--line-height: 1.33;
+  --text-label-caps--letter-spacing: 0.04em;
+  --text-label-caps--font-weight: 500;
+
+  --text-code-md: 14px;
+  --text-code-md--line-height: 1.5;
+  --text-code-md--font-weight: 400;
+
+  --text-code-sm: 13px;
+  --text-code-sm--line-height: 1.54;
+  --text-code-sm--font-weight: 500;
+
+  /* Radii — Tailwind v4 reads the value directly (no var indirection). */
+  --radius-none: 0px;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 10px;
+  --radius-xl: 14px;
+  --radius-2xl: 20px;
+  --radius-full: 9999px;
+
+  /* Shadows — alias to tokens.css computed values (which already use
+     * `hsl(var(--foreground) / …)` so theme-switch keeps them in step). */
+  --shadow-sm: var(--shadow-sm);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-glow: var(--shadow-glow);
+  --shadow-glow-strong: var(--shadow-glow-strong);
+
+  /* Motion ------------------------------------------------------------ */
+  --ease-out-soft: var(--ease-out-soft);
+  --ease-snap: var(--ease-snap);
+
+  /* Container queries (T5.5) — Tailwind v4 native @container support.
+     * Sizes drive `@<size>:<utility>` variants for container-relative responsive
+     * design (components that adapt to their parent's width, not the viewport).
+     * Default sizes mirror Tailwind v4 defaults; declared explicitly so the
+     * preset ships consistent values.
+     */
+  --container-3xs: 16rem;
+  --container-2xs: 18rem;
+  --container-xs: 20rem;
+  --container-sm: 24rem;
+  --container-md: 28rem;
+  --container-lg: 32rem;
+  --container-xl: 36rem;
+  --container-2xl: 42rem;
+  --container-3xl: 48rem;
+  --container-4xl: 56rem;
+  --container-5xl: 64rem;
+  --container-6xl: 72rem;
+  --container-7xl: 80rem;
+
+  /* Animations — declare so `animate-fade-in-up` and `animate-pulse-glow`
+     * resolve. Keyframes are declared below (outside @theme — Tailwind v4
+     * picks them up via the @keyframes namespace).
+     */
+  --animate-fade-in-up: fade-in-up var(--duration-base) var(--ease-out-soft) both;
+  --animate-pulse-glow: pulse-glow 1.5s var(--ease-in-out) infinite;
+}
+
+@keyframes fade-in-up {
+  0% {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes pulse-glow {
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 color-mix(in oklch, var(--primary) 50%, transparent);
+  }
+  50% {
+    box-shadow: 0 0 0 8px transparent;
+  }
+}