@saasflare/ui 1.0.0

package/fonts/index.ts

@@ -0,0 +1,56 @@
+// @reviewed 2026-04-19
+/**
+ * @fileoverview Public type surface for typography presets.
+ * @module packages/ui/fonts
+ * @package ui
+ *
+ * Presets are loaded via subpath imports so each consumer only bundles
+ * the fonts of the preset they actually use:
+ *
+ *   import { fontVariables } from "@saasflare/ui/fonts/editorial"
+ *   <SaasflareShell className={fontVariables}>
+ *
+ * Available subpaths (declared in package.json `exports`):
+ *   @saasflare/ui/fonts/default      Inter + Inter + JetBrains Mono
+ *   @saasflare/ui/fonts/editorial    Inter + Fraunces + JetBrains Mono
+ *   @saasflare/ui/fonts/geometric    Geist + Geist + Geist Mono
+ *   @saasflare/ui/fonts/rounded      Nunito + Nunito + JetBrains Mono
+ *   @saasflare/ui/fonts/distinctive  Inter + Bricolage Grotesque + JetBrains Mono
+ *   @saasflare/ui/fonts/neutral      Roboto + Roboto + Roboto Mono
+ *
+ * Internal file structure (`presets/*.ts`) is not part of the public API
+ * and may change between versions; only the subpaths above are stable.
+ *
+ * Required app setup: add `transpilePackages: ["@saasflare/ui"]` to
+ * `next.config.{js,ts}` so the Next.js compiler can process the
+ * `next/font/google` calls in the package source.
+ */
+
+/** All available font preset ids. Use as `import "@saasflare/ui/fonts/<id>"`. */
+export type FontPreset =
+    | "default"
+    | "editorial"
+    | "geometric"
+    | "rounded"
+    | "distinctive"
+    | "neutral"
+
+/**
+ * Shape of every preset module's default export contract.
+ * Each `@saasflare/ui/fonts/<preset>` module exports these names:
+ *
+ *   - `fontBody`       → next/font loader instance (carries `.variable` className)
+ *   - `fontHeading`    → next/font loader instance
+ *   - `fontMono`       → next/font loader instance
+ *   - `fontVariables`  → joined className string for `<SaasflareShell className={…}>`
+ *
+ * The loader instance type is intentionally `unknown` here — `next/font`
+ * generates a unique anonymous type per call, and we don't want this
+ * package to take a hard dependency on `next/font`'s internal types.
+ */
+export interface FontPresetModule {
+    fontBody: { variable: string }
+    fontHeading: { variable: string }
+    fontMono: { variable: string }
+    fontVariables: string
+}

package/fonts/presets/default.ts

@@ -0,0 +1,37 @@
+// @reviewed 2026-04-19
+/**
+ * @fileoverview Default typography preset — Inter + JetBrains Mono.
+ * @module packages/ui/fonts/presets/default
+ * @package ui
+ *
+ * SaaS-neutral, the safest pick. Inter is system-ui-adjacent, dense,
+ * excellent across sizes. JetBrains Mono pairs cleanly without competing.
+ *
+ * Use for: dashboards, admin panels, generic SaaS UI.
+ *
+ * Public import path (do not rely on this internal location):
+ *   import { fontVariables } from "@saasflare/ui/fonts/default"
+ */
+import { Inter, JetBrains_Mono } from "next/font/google"
+
+export const fontBody = Inter({
+    subsets: ["latin"],
+    variable: "--font-body",
+})
+
+export const fontHeading = Inter({
+    subsets: ["latin"],
+    variable: "--font-heading",
+})
+
+export const fontMono = JetBrains_Mono({
+    subsets: ["latin"],
+    variable: "--font-mono",
+})
+
+/** Joined className string — pass to <SaasflareShell className={...}>. */
+export const fontVariables = [
+    fontBody.variable,
+    fontHeading.variable,
+    fontMono.variable,
+].join(" ")

package/fonts/presets/distinctive.ts

@@ -0,0 +1,43 @@
+// @reviewed 2026-04-19
+/**
+ * @fileoverview Distinctive typography preset — Inter body + Bricolage Grotesque heading + JetBrains Mono.
+ * @module packages/ui/fonts/presets/distinctive
+ * @package ui
+ *
+ * Modern, with attitude. Bricolage Grotesque is a contemporary display
+ * sans with strong character — confident headings that still pair with
+ * Inter's quiet body text. Less serious than Editorial, more brand-forward
+ * than Default.
+ *
+ * `display: "swap"` on the heading: Bricolage's silhouette is distinct
+ * enough that the optional fallback would feel like a different brand.
+ *
+ * Use for: products that want a recognizable type voice without going
+ * full editorial — startups, design tools, brand-led marketing sites.
+ *
+ * Public import path:
+ *   import { fontVariables } from "@saasflare/ui/fonts/distinctive"
+ */
+import { Inter, Bricolage_Grotesque, JetBrains_Mono } from "next/font/google"
+
+export const fontBody = Inter({
+    subsets: ["latin"],
+    variable: "--font-body",
+})
+
+export const fontHeading = Bricolage_Grotesque({
+    subsets: ["latin"],
+    variable: "--font-heading",
+    display: "swap",
+})
+
+export const fontMono = JetBrains_Mono({
+    subsets: ["latin"],
+    variable: "--font-mono",
+})
+
+export const fontVariables = [
+    fontBody.variable,
+    fontHeading.variable,
+    fontMono.variable,
+].join(" ")

package/fonts/presets/editorial.ts

@@ -0,0 +1,44 @@
+// @reviewed 2026-04-19
+/**
+ * @fileoverview Editorial typography preset — Inter body + Fraunces heading + JetBrains Mono.
+ * @module packages/ui/fonts/presets/editorial
+ * @package ui
+ *
+ * Content-heavy products with strong editorial voice. Fraunces is a
+ * high-contrast contemporary serif with personality; Inter keeps body
+ * text quiet and readable. The serif/sans split signals "this is content,
+ * not chrome."
+ *
+ * `display: "swap"` on the heading: Fraunces diverges enough from system-ui
+ * that the optional fallback would feel bare during load.
+ *
+ * Use for: blogs, documentation sites, knowledge bases, magazine-style
+ * marketing pages.
+ *
+ * Public import path:
+ *   import { fontVariables } from "@saasflare/ui/fonts/editorial"
+ */
+import { Inter, Fraunces, JetBrains_Mono } from "next/font/google"
+
+export const fontBody = Inter({
+    subsets: ["latin"],
+    variable: "--font-body",
+})
+
+export const fontHeading = Fraunces({
+    subsets: ["latin"],
+    variable: "--font-heading",
+    display: "swap",
+    axes: ["opsz"],
+})
+
+export const fontMono = JetBrains_Mono({
+    subsets: ["latin"],
+    variable: "--font-mono",
+})
+
+export const fontVariables = [
+    fontBody.variable,
+    fontHeading.variable,
+    fontMono.variable,
+].join(" ")

package/fonts/presets/geometric.ts

@@ -0,0 +1,37 @@
+// @reviewed 2026-04-19
+/**
+ * @fileoverview Geometric typography preset — Geist + Geist Mono.
+ * @module packages/ui/fonts/presets/geometric
+ * @package ui
+ *
+ * Technical-minimal aesthetic. Geist is tighter and more architectural
+ * than Inter; the matched mono keeps visual language uniform across copy
+ * and code blocks. Vercel-style minimalism.
+ *
+ * Use for: developer tools, API products, infrastructure dashboards.
+ *
+ * Public import path:
+ *   import { fontVariables } from "@saasflare/ui/fonts/geometric"
+ */
+import { Geist, Geist_Mono } from "next/font/google"
+
+export const fontBody = Geist({
+    subsets: ["latin"],
+    variable: "--font-body",
+})
+
+export const fontHeading = Geist({
+    subsets: ["latin"],
+    variable: "--font-heading",
+})
+
+export const fontMono = Geist_Mono({
+    subsets: ["latin"],
+    variable: "--font-mono",
+})
+
+export const fontVariables = [
+    fontBody.variable,
+    fontHeading.variable,
+    fontMono.variable,
+].join(" ")

package/fonts/presets/neutral.ts

@@ -0,0 +1,41 @@
+// @reviewed 2026-04-19
+/**
+ * @fileoverview Neutral typography preset — Roboto + Roboto Mono.
+ * @module packages/ui/fonts/presets/neutral
+ * @package ui
+ *
+ * Material-Design-aligned, maximally familiar. Roboto is the most-seen
+ * web font on earth — users won't notice it, which is exactly the point.
+ * Use when typography should disappear so other brand elements (color,
+ * imagery, layout) carry the identity.
+ *
+ * Use for: enterprise tools, internal dashboards, products with strong
+ * non-typographic brand systems, Android-adjacent companion web apps.
+ *
+ * Public import path:
+ *   import { fontVariables } from "@saasflare/ui/fonts/neutral"
+ */
+import { Roboto, Roboto_Mono } from "next/font/google"
+
+export const fontBody = Roboto({
+    subsets: ["latin"],
+    variable: "--font-body",
+    weight: ["400", "500", "700"],
+})
+
+export const fontHeading = Roboto({
+    subsets: ["latin"],
+    variable: "--font-heading",
+    weight: ["500", "700"],
+})
+
+export const fontMono = Roboto_Mono({
+    subsets: ["latin"],
+    variable: "--font-mono",
+})
+
+export const fontVariables = [
+    fontBody.variable,
+    fontHeading.variable,
+    fontMono.variable,
+].join(" ")

package/fonts/presets/rounded.ts

@@ -0,0 +1,38 @@
+// @reviewed 2026-04-19
+/**
+ * @fileoverview Rounded typography preset — Nunito + JetBrains Mono.
+ * @module packages/ui/fonts/presets/rounded
+ * @package ui
+ *
+ * Consumer-friendly, warm. Nunito's rounded terminals soften the entire
+ * UI without sacrificing legibility. JetBrains Mono keeps code blocks
+ * feeling like code so the warmth stays scoped to prose.
+ *
+ * Use for: education, kids/family apps, wellness, any product that wants
+ * warmth over precision.
+ *
+ * Public import path:
+ *   import { fontVariables } from "@saasflare/ui/fonts/rounded"
+ */
+import { Nunito, JetBrains_Mono } from "next/font/google"
+
+export const fontBody = Nunito({
+    subsets: ["latin"],
+    variable: "--font-body",
+})
+
+export const fontHeading = Nunito({
+    subsets: ["latin"],
+    variable: "--font-heading",
+})
+
+export const fontMono = JetBrains_Mono({
+    subsets: ["latin"],
+    variable: "--font-mono",
+})
+
+export const fontVariables = [
+    fontBody.variable,
+    fontHeading.variable,
+    fontMono.variable,
+].join(" ")

package/package.json

@@ -0,0 +1,90 @@
+{
+  "name": "@saasflare/ui",
+  "version": "1.0.0",
+  "private": false,
+  "license": "MIT",
+  "description": "Saasflare UI Components Library – Standalone components built on Radix UI + Tailwind CSS",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/saasflare/saasflare-ui.git",
+    "directory": "packages/ui"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org",
+    "provenance": true
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./styles": "./styles/globals.css",
+    "./globals.css": "./styles/globals.css",
+    "./theme.css": "./styles/theme.css",
+    "./fonts": "./fonts/index.ts",
+    "./fonts/default": "./fonts/presets/default.ts",
+    "./fonts/editorial": "./fonts/presets/editorial.ts",
+    "./fonts/geometric": "./fonts/presets/geometric.ts",
+    "./fonts/rounded": "./fonts/presets/rounded.ts",
+    "./fonts/distinctive": "./fonts/presets/distinctive.ts",
+    "./fonts/neutral": "./fonts/presets/neutral.ts",
+    "./fonts/*": null
+  },
+  "files": [
+    "dist",
+    "styles",
+    "fonts"
+  ],
+  "dependencies": {
+    "radix-ui": "^1.4.3",
+    "@base-ui/react": "^1.2.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^0.577.0",
+    "nprogress": "^0.2.0",
+    "tailwind-merge": "^3.5.0",
+    "tw-animate-css": "^1.4.0"
+  },
+  "peerDependencies": {
+    "next": "16.2.3",
+    "next-themes": "^0.4.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.0.0",
+    "framer-motion": "^12.0.0",
+    "recharts": "^3.0.0",
+    "react-hook-form": "^7.0.0",
+    "@hookform/resolvers": "^5.0.0",
+    "zod": "^4.0.0",
+    "sonner": "^2.0.0",
+    "vaul": "^1.0.0",
+    "react-day-picker": "^9.0.0",
+    "date-fns": "^4.0.0",
+    "embla-carousel-react": "^8.0.0",
+    "react-resizable-panels": "^4.0.0"
+  },
+  "devDependencies": {
+    "@types/nprogress": "^0.2.3",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "next": "16.2.3",
+    "next-themes": "^0.4.6",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint .",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/styles/globals.css

@@ -0,0 +1,12 @@
+/**
+ * @fileoverview Saasflare UI — single-file entry point.
+ * @module packages/ui/styles/globals
+ * @package ui
+ * @reviewed 2026-04-19
+ *
+ * Apps should import exactly this file:
+ *   @import "@saasflare/ui/globals.css";
+ *
+ * theme.css transitively pulls in motion.css, surfaces.css, and themes.css.
+ */
+@import "./theme.css";

package/styles/motion.css

@@ -0,0 +1,53 @@
+/**
+ * @fileoverview Motion tokens + animation kill-switch.
+ * @module packages/ui/styles/motion
+ * @package ui
+ * @reviewed 2026-04-19
+ *
+ * Duration and easing tokens consumed by components and utility classes.
+ * The [data-animated="false"] attribute — set by SaasflareProvider on <html> —
+ * acts as a global kill-switch that collapses every animation and transition,
+ * including those in third-party libraries that don't read our tokens.
+ *
+ * Reduced-motion media query is an additional safety net for users with an
+ * OS-level preference, regardless of the provider's `animated` prop.
+ */
+
+:root {
+    --duration-fast: 150ms;
+    --duration-normal: 220ms;
+    --duration-slow: 320ms;
+    --duration-overlay: 400ms;
+
+    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+    --ease-in: cubic-bezier(0.4, 0, 1, 1);
+    --ease-out: cubic-bezier(0, 0, 0.2, 1);
+    --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
+    --ease-exit: cubic-bezier(0.3, 0, 1, 1);
+}
+
+[data-animated="false"],
+[data-animated="false"] *,
+[data-animated="false"] *::before,
+[data-animated="false"] *::after {
+    animation-duration: 0ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0ms !important;
+    scroll-behavior: auto !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    :root {
+        --duration-fast: 0ms;
+        --duration-normal: 0ms;
+        --duration-slow: 0ms;
+        --duration-overlay: 0ms;
+    }
+
+    *, *::before, *::after {
+        animation-duration: 0ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0ms !important;
+        scroll-behavior: auto !important;
+    }
+}

package/styles/palettes.css

@@ -0,0 +1,147 @@
+/**
+ * @fileoverview 16 preset brand palettes — activate via [data-palette="id"] on <html>.
+ * @module packages/ui/styles/palettes
+ * @package ui
+ * @reviewed 2026-04-19
+ *
+ * Each preset overrides only the rebrand surface:
+ *   --primary-h / --primary-c / --primary-l   (brand axis)
+ *   --neutral-h / --neutral-c                 (neutral axis, only when palette wants neutral greys)
+ *
+ * All downstream semantic tokens (secondary, muted, border, card, chart-*, …)
+ * are derived in theme.css from these axes. Adding a preset costs one line.
+ *
+ * Selectors are scoped with `:root` prefix (e.g. `:root[data-palette="ocean"]`)
+ * to guarantee specificity (0,2,0) — this beats the `:root` baseline (0,1,0)
+ * and the `.dark` class (0,1,0) regardless of @import source order.
+ *
+ * Ink & Stone are achromatic palettes (primary-c: 0). Chart palettes are
+ * overridden so dashboards stay legible with 5 distinct hues.
+ */
+
+/* ─── Saasflare (house brand) ───────────────────── */
+:root[data-palette="saasflare"]      { --primary-h: 259.1; --primary-c: 0.214; --primary-l: 0.623; }
+:root[data-palette="saasflare"].dark { --primary-l: 0.72; }
+
+/* ─── Ocean ─────────────────────────────────────── */
+:root[data-palette="ocean"]      { --primary-h: 230; --primary-c: 0.18; --primary-l: 0.60; }
+:root[data-palette="ocean"].dark { --primary-l: 0.70; }
+
+/* ─── Ink (neutral) ─────────────────────────────── */
+:root[data-palette="ink"] {
+    --primary-h: 0;
+    --primary-c: 0;
+    --primary-l: 0.45;
+    --neutral-h: 0;
+    --neutral-c: 0;
+}
+:root[data-palette="ink"].dark { --primary-l: 0.75; }
+
+/* ─── Achromatic (near-black / near-white) ──────── */
+/* Achromatic palettes invert primary lightness across modes, so the default
+ * white --primary-foreground would collide with a near-white --primary in
+ * dark mode. Pin the foreground per-mode to keep button contrast readable. */
+:root[data-palette="achromatic"] {
+    --primary-h: 0;
+    --primary-c: 0;
+    --primary-l: 0.15;                       /* ≈ #171717, near-black */
+    --neutral-h: 0;
+    --neutral-c: 0;
+    --primary-foreground: oklch(1 0 0);      /* white on near-black */
+}
+:root[data-palette="achromatic"].dark {
+    --primary-l: 0.95;                       /* ≈ #f2f2f2, near-white */
+    --primary-foreground: oklch(0.15 0 0);   /* near-black on near-white */
+}
+
+/* ─── Black (pure) ──────────────────────────────── */
+:root[data-palette="black"] {
+    --primary-h: 0;
+    --primary-c: 0;
+    --primary-l: 0;                          /* #000 */
+    --neutral-h: 0;
+    --neutral-c: 0;
+    --primary-foreground: oklch(1 0 0);      /* white on black */
+}
+:root[data-palette="black"].dark {
+    --primary-l: 1;                          /* #fff */
+    --primary-foreground: oklch(0 0 0);      /* black on white */
+}
+
+/* ─── Aurora ────────────────────────────────────── */
+:root[data-palette="aurora"]      { --primary-h: 195; --primary-c: 0.19; --primary-l: 0.65; }
+:root[data-palette="aurora"].dark { --primary-l: 0.75; }
+
+/* ─── Indigo ────────────────────────────────────── */
+:root[data-palette="indigo"]      { --primary-h: 265; --primary-c: 0.20; --primary-l: 0.60; }
+:root[data-palette="indigo"].dark { --primary-l: 0.70; }
+
+/* ─── Emerald ───────────────────────────────────── */
+:root[data-palette="emerald"]      { --primary-h: 155; --primary-c: 0.17; --primary-l: 0.55; }
+:root[data-palette="emerald"].dark { --primary-l: 0.68; }
+
+/* ─── Violet ────────────────────────────────────── */
+:root[data-palette="violet"]      { --primary-h: 290; --primary-c: 0.20; --primary-l: 0.60; }
+:root[data-palette="violet"].dark { --primary-l: 0.70; }
+
+/* ─── Coral ─────────────────────────────────────── */
+:root[data-palette="coral"]      { --primary-h: 20; --primary-c: 0.19; --primary-l: 0.65; }
+:root[data-palette="coral"].dark { --primary-l: 0.72; }
+
+/* ─── Stone (neutral) ───────────────────────────── */
+:root[data-palette="stone"] {
+    --primary-h: 0;
+    --primary-c: 0;
+    --primary-l: 0.55;
+    --neutral-h: 0;
+    --neutral-c: 0;
+}
+:root[data-palette="stone"].dark { --primary-l: 0.78; }
+
+/* ─── Jade ──────────────────────────────────────── */
+:root[data-palette="jade"]      { --primary-h: 165; --primary-c: 0.16; --primary-l: 0.58; }
+:root[data-palette="jade"].dark { --primary-l: 0.70; }
+
+/* ─── Cobalt ────────────────────────────────────── */
+:root[data-palette="cobalt"]      { --primary-h: 240; --primary-c: 0.20; --primary-l: 0.60; }
+:root[data-palette="cobalt"].dark { --primary-l: 0.70; }
+
+/* ─── Amber ─────────────────────────────────────── */
+:root[data-palette="amber"]      { --primary-h: 50; --primary-c: 0.17; --primary-l: 0.65; }
+:root[data-palette="amber"].dark { --primary-l: 0.72; }
+
+/* ─── Fuchsia ───────────────────────────────────── */
+:root[data-palette="fuchsia"]      { --primary-h: 340; --primary-c: 0.21; --primary-l: 0.62; }
+:root[data-palette="fuchsia"].dark { --primary-l: 0.72; }
+
+/* ─── Honey ─────────────────────────────────────── */
+:root[data-palette="honey"]      { --primary-h: 70; --primary-c: 0.16; --primary-l: 0.68; }
+:root[data-palette="honey"].dark { --primary-l: 0.76; }
+
+/* ─── Teal ──────────────────────────────────────── */
+:root[data-palette="teal"]      { --primary-h: 185; --primary-c: 0.15; --primary-l: 0.60; }
+:root[data-palette="teal"].dark { --primary-l: 0.70; }
+
+/* ─── Iris ──────────────────────────────────────── */
+:root[data-palette="iris"]      { --primary-h: 255; --primary-c: 0.16; --primary-l: 0.60; }
+:root[data-palette="iris"].dark { --primary-l: 0.70; }
+
+/* ─── Ruby ──────────────────────────────────────── */
+:root[data-palette="ruby"]      { --primary-h: 10; --primary-c: 0.21; --primary-l: 0.58; }
+:root[data-palette="ruby"].dark { --primary-l: 0.68; }
+
+/* ============================================
+ * Chart palette overrides for achromatic palettes
+ *
+ * With --primary-c: 0, the derived chart colors collapse to grayscale.
+ * Give Ink and Stone a fixed distinguishable 5-hue palette.
+ * ============================================ */
+:root[data-palette="ink"],
+:root[data-palette="stone"],
+:root[data-palette="black"] {
+    --chart-1: oklch(0.60 0.18 230);  /* blue */
+    --chart-2: oklch(0.65 0.17  55);  /* orange */
+    --chart-3: oklch(0.60 0.15 155);  /* green */
+    --chart-4: oklch(0.58 0.20  25);  /* red */
+    --chart-5: oklch(0.60 0.18 290);  /* violet */
+}

package/styles/surfaces.css

@@ -0,0 +1,51 @@
+/**
+ * @fileoverview Surface system — flat / glass as semantic overlay.
+ * @module packages/ui/styles/surfaces
+ * @package ui
+ * @reviewed 2026-04-19
+ *
+ * Components bind to four surface tokens:
+ *   --surface-bg         background color or gradient
+ *   --surface-border     border color
+ *   --surface-backdrop   backdrop-filter value (blur/saturate) or "none"
+ *   --surface-shadow     box-shadow value
+ *
+ * Switching [data-style="…"] on <html> swaps the tokens without touching
+ * any component. Extend by adding a new selector block:
+ *
+ *   [data-style="neumorphic"] { --surface-bg: …; … }
+ *
+ * and registering the id in the StyleVariant union (types.ts).
+ */
+
+:root {
+    --surface-bg: var(--card);
+    --surface-border: var(--border);
+    --surface-backdrop: none;
+    --surface-shadow: 0 1px 2px oklch(0 0 0 / 0.05);
+}
+
+[data-style="flat"] {
+    --surface-bg: var(--card);
+    --surface-border: var(--border);
+    --surface-backdrop: none;
+    --surface-shadow: 0 1px 2px oklch(0 0 0 / 0.05);
+}
+
+[data-style="glass"] {
+    --surface-bg: oklch(0.99 0.005 var(--neutral-h) / 0.6);
+    --surface-border: oklch(1 0 0 / 0.2);
+    --surface-backdrop: blur(12px) saturate(140%);
+    --surface-shadow:
+        0 8px 32px oklch(0 0 0 / 0.08),
+        inset 0 1px 0 oklch(1 0 0 / 0.4);
+}
+
+[data-style="glass"].dark,
+.dark [data-style="glass"] {
+    --surface-bg: oklch(0.2 0.015 var(--neutral-h) / 0.5);
+    --surface-border: oklch(1 0 0 / 0.1);
+    --surface-shadow:
+        0 8px 32px oklch(0 0 0 / 0.4),
+        inset 0 1px 0 oklch(1 0 0 / 0.08);
+}