base-themes 0.1.1 → 0.1.3

package/examples/dashboard/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "base-themes-dashboard-example",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 0.0.0.0 --port 5177",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview --host 0.0.0.0 --port 4177"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.5.0",
+    "base-themes": "file:../..",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.27",
+    "@types/react-dom": "^18.3.7",
+    "@vitejs/plugin-react": "^6.0.1",
+    "typescript": "~6.0.2",
+    "vite": "^8.0.12"
+  }
+}

package/examples/dashboard/src/App.tsx

@@ -0,0 +1,115 @@
+import {
+  Button,
+  DataTableBlock,
+  DashboardShell,
+  Progress,
+  Select,
+  Switch,
+  Tabs,
+  TeamActivityFeed,
+  ThemeShowcaseCard,
+  type ThemeStyle,
+  useTheme,
+} from 'base-themes'
+import registry from 'base-themes/registry.json'
+
+const styleChoices = {
+  enterprise: 'Enterprise',
+  'data-dense': 'Data dense',
+  bento: 'Bento',
+  terminal: 'Terminal',
+  shadcn: 'shadcn',
+}
+
+const pipelineRows = [
+  { label: 'Trial installs', value: 243, delta: '+18%' },
+  { label: 'Doctor checks', value: 41, delta: '+9%' },
+  { label: 'Registry fetches', value: 67, delta: '+24%' },
+]
+
+export function App() {
+  const { style, setStyle, resolved, setTheme } = useTheme()
+
+  return (
+    <main className="dashboard-shell-example">
+      <section className="dashboard-hero">
+        <div>
+          <p className="eyebrow">Product dashboard example</p>
+          <h1>Operate a Base Themes product screen from the npm package.</h1>
+          <p className="hero-copy">
+            This example combines shipped blocks, controls, registry metadata, and theme switching into one app-like surface.
+          </p>
+        </div>
+        <div className="hero-controls" aria-label="Dashboard controls">
+          <Select
+            id="dashboard-style"
+            label="Visual style"
+            value={style}
+            onValueChange={(value) => setStyle(value as ThemeStyle)}
+            items={styleChoices}
+          />
+          <Switch
+            id="dashboard-theme"
+            label="Dark mode"
+            checked={resolved === 'dark'}
+            onCheckedChange={(checked) => setTheme(checked ? 'dark' : 'light')}
+          />
+          <Button type="button">Share report</Button>
+        </div>
+      </section>
+
+      <section className="dashboard-kpis" aria-label="Adoption pipeline">
+        {pipelineRows.map((row) => (
+          <article key={row.label}>
+            <span>{row.label}</span>
+            <strong>{row.value}</strong>
+            <small>{row.delta}</small>
+          </article>
+        ))}
+        <article>
+          <span>Registry surface</span>
+          <strong>{registry.components.length}</strong>
+          <small>{registry.blocks.length} blocks</small>
+        </article>
+      </section>
+
+      <section className="dashboard-grid">
+        <div className="dashboard-primary">
+          <DashboardShell />
+        </div>
+        <div className="dashboard-secondary">
+          <ThemeShowcaseCard />
+        </div>
+      </section>
+
+      <section className="dashboard-grid lower">
+        <div className="dashboard-primary">
+          <DataTableBlock />
+        </div>
+        <aside className="dashboard-side-panel">
+          <Tabs
+            defaultValue="release"
+            panels={[
+              {
+                value: 'release',
+                label: 'Release',
+                title: 'Release readiness',
+                content: 'Registry, package smoke, SEO, and example builds are expected to pass before sharing a release.',
+              },
+              {
+                value: 'signals',
+                label: 'Signals',
+                title: 'Adoption signals',
+                content: 'Stars, forks, external issues, registry access, and install-copy events decide the next roadmap.',
+              },
+            ]}
+          />
+          <div className="readiness-stack">
+            <Progress value={78} showValue aria-label="Release confidence" />
+            <TeamActivityFeed />
+          </div>
+        </aside>
+      </section>
+    </main>
+  )
+}

package/examples/dashboard/src/main.tsx

@@ -0,0 +1,11 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { App } from './App'
+import 'base-themes/styles.css'
+import './styles.css'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/examples/dashboard/src/styles.css

@@ -0,0 +1,129 @@
+:root {
+  color: var(--theme-fg);
+  background: var(--theme-bg);
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+}
+
+.dashboard-shell-example {
+  width: min(1240px, calc(100vw - 32px));
+  margin: 0 auto;
+  padding: 32px 0;
+}
+
+.dashboard-hero,
+.dashboard-kpis article,
+.dashboard-grid > * {
+  border: 1px solid var(--theme-border);
+  background: var(--theme-surface);
+  box-shadow: var(--theme-shadow);
+}
+
+.dashboard-hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
+  gap: 24px;
+  align-items: end;
+  padding: 30px;
+}
+
+.eyebrow {
+  margin: 0 0 8px;
+  color: var(--theme-muted-fg);
+  font-size: 0.78rem;
+  font-weight: 750;
+  text-transform: uppercase;
+}
+
+h1 {
+  max-width: 780px;
+  margin: 0;
+  color: var(--theme-fg);
+  font-size: clamp(2rem, 4vw, 4.25rem);
+  line-height: 1;
+  letter-spacing: 0;
+}
+
+.hero-copy {
+  max-width: 680px;
+  margin: 16px 0 0;
+  color: var(--theme-muted-fg);
+  font-size: 1rem;
+  line-height: 1.6;
+}
+
+.hero-controls {
+  display: grid;
+  gap: 14px;
+}
+
+.dashboard-kpis {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 14px;
+  margin: 14px 0;
+}
+
+.dashboard-kpis article {
+  display: grid;
+  gap: 6px;
+  padding: 18px;
+}
+
+.dashboard-kpis span,
+.dashboard-kpis small {
+  color: var(--theme-muted-fg);
+  font-size: 0.82rem;
+}
+
+.dashboard-kpis strong {
+  color: var(--theme-fg);
+  font-size: 2rem;
+  line-height: 1;
+}
+
+.dashboard-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
+  gap: 14px;
+  margin-top: 14px;
+}
+
+.dashboard-grid.lower {
+  grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.9fr);
+}
+
+.dashboard-primary,
+.dashboard-secondary,
+.dashboard-side-panel {
+  min-width: 0;
+  padding: 18px;
+}
+
+.readiness-stack {
+  display: grid;
+  gap: 16px;
+  margin-top: 18px;
+}
+
+@media (max-width: 920px) {
+  .dashboard-hero,
+  .dashboard-grid,
+  .dashboard-grid.lower,
+  .dashboard-kpis {
+    grid-template-columns: 1fr;
+  }
+
+  .dashboard-shell-example {
+    width: min(100vw - 24px, 720px);
+    padding: 24px 0;
+  }
+}

package/examples/dashboard/src/vite-env.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="vite/client" />
+
+declare module 'base-themes/styles.css'
+declare module '*.css'

package/examples/dashboard/tsconfig.app.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2023",
+    "useDefineForClassFields": true,
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "noUnusedLocals": true,
+    "noUnusedParameters": true
+  },
+  "include": ["src"]
+}

package/examples/dashboard/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/examples/dashboard/tsconfig.node.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "types": ["node"]
+  },
+  "include": ["vite.config.ts"]
+}

package/examples/dashboard/vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+})

package/examples/next/README.md

@@ -0,0 +1,29 @@
+# Base Themes Next.js Example
+
+This example verifies that Base Themes works in a Next.js app with SSR.
+
+## Run
+
+From this directory:
+
+```bash
+npm install
+npm run build
+npm run dev
+```
+
+From the repository root, run the same build gate used by CI:
+
+```bash
+npm run example:next:build
+```
+
+The example imports only public package surfaces:
+
+- `base-themes`
+- `base-themes/styles.css`
+- `base-themes/registry.json`
+
+Theme attributes are set on `<html>` in `app/layout.tsx` so CSS variables are available before the page renders.
+
+Next.js App Router treats files as Server Components by default. Base Themes components use client-side React hooks through Base UI primitives, so component imports live behind the `'use client'` boundary in `app/base-themes-demo.tsx`.

package/examples/next/app/base-themes-demo.tsx

@@ -0,0 +1,70 @@
+'use client'
+
+import { Button, Field, Fieldset, Input, Progress, Select, Switch, Tabs } from 'base-themes'
+import registry from 'base-themes/registry.json'
+
+const densityItems = {
+  compact: 'Compact',
+  comfortable: 'Comfortable',
+  spacious: 'Spacious',
+}
+
+export function BaseThemesDemo() {
+  return (
+    <>
+      <section className="hero-panel">
+        <div>
+          <p className="eyebrow">Next.js App Router install</p>
+          <h1>Base Themes works in a framework app.</h1>
+          <p>
+            This page imports package components, global CSS, and registry metadata with a client component boundary.
+          </p>
+        </div>
+        <div className="stats-grid" aria-label="Registry summary">
+          <article>
+            <span>{registry.components.length}</span>
+            <p>Components</p>
+          </article>
+          <article>
+            <span>{registry.style.variants.length}</span>
+            <p>Styles</p>
+          </article>
+        </div>
+      </section>
+
+      <section className="content-grid">
+        <Fieldset legend="Workspace settings">
+          <Field label="Project" description="Client-rendered controls inside a server-rendered route.">
+            <Input id="project" defaultValue="Design System Migration" />
+          </Field>
+          <Select id="density" label="Density" defaultValue="comfortable" items={densityItems} />
+          <Switch id="summary" label="Send weekly summary" defaultChecked />
+          <Button type="button">Save changes</Button>
+        </Fieldset>
+
+        <div className="panel">
+          <Tabs
+            defaultValue="package"
+            panels={[
+              {
+                value: 'package',
+                label: 'Package',
+                title: 'Public package surface',
+                content: 'Components and CSS are imported from the same paths documented for npm users.',
+              },
+              {
+                value: 'registry',
+                label: 'Registry',
+                title: `Default style: ${registry.style.default}`,
+                content: `Registry homepage: ${registry.homepage}`,
+              },
+            ]}
+          />
+          <div className="progress-row">
+            <Progress value={78} showValue aria-label="Framework readiness" />
+          </div>
+        </div>
+      </section>
+    </>
+  )
+}

package/examples/next/app/layout.tsx

@@ -0,0 +1,16 @@
+import type { Metadata } from 'next'
+import 'base-themes/styles.css'
+import './styles.css'
+
+export const metadata: Metadata = {
+  title: 'Base Themes Next.js Example',
+  description: 'SSR smoke example for Base Themes in Next.js.',
+}
+
+export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <html lang="en" data-theme="light" data-style="enterprise">
+      <body>{children}</body>
+    </html>
+  )
+}

package/examples/next/app/page.tsx

@@ -0,0 +1,9 @@
+import { BaseThemesDemo } from './base-themes-demo'
+
+export default function Page() {
+  return (
+    <main className="page-shell">
+      <BaseThemesDemo />
+    </main>
+  )
+}

package/examples/next/app/styles.css

@@ -0,0 +1,106 @@
+:root {
+  color: var(--theme-fg);
+  background: var(--theme-bg);
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}
+
+.page-shell {
+  width: min(1080px, calc(100vw - 32px));
+  margin: 0 auto;
+  padding: 40px 0;
+}
+
+.hero-panel,
+.content-grid > *,
+.stats-grid article {
+  border: 1px solid var(--theme-border);
+  background: var(--theme-surface);
+  box-shadow: var(--theme-shadow);
+}
+
+.hero-panel {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 280px;
+  gap: 24px;
+  padding: 32px;
+}
+
+.eyebrow {
+  margin: 0 0 8px;
+  color: var(--theme-muted-fg);
+  font-size: 0.78rem;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+h1 {
+  max-width: 720px;
+  margin: 0;
+  font-size: clamp(2rem, 4vw, 4rem);
+  line-height: 1;
+  letter-spacing: 0;
+}
+
+.hero-panel p {
+  max-width: 640px;
+  color: var(--theme-muted-fg);
+  line-height: 1.6;
+}
+
+.stats-grid {
+  display: grid;
+  gap: 12px;
+}
+
+.stats-grid article {
+  padding: 18px;
+}
+
+.stats-grid span {
+  display: block;
+  font-size: 2rem;
+  font-weight: 800;
+}
+
+.stats-grid p {
+  margin: 4px 0 0;
+}
+
+.content-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
+  gap: 16px;
+  margin-top: 16px;
+}
+
+.content-grid > * {
+  padding: 24px;
+}
+
+.panel {
+  min-width: 0;
+}
+
+.progress-row {
+  margin-top: 20px;
+}
+
+@media (max-width: 800px) {
+  .hero-panel,
+  .content-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .page-shell {
+    width: min(100vw - 24px, 680px);
+    padding: 24px 0;
+  }
+}

package/examples/next/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/examples/next/next.config.ts

@@ -0,0 +1,5 @@
+import type { NextConfig } from 'next'
+
+const nextConfig: NextConfig = {}
+
+export default nextConfig