base-themes 0.1.1 → 0.1.3

package/examples/vite/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "base-themes-vite-example",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 0.0.0.0 --port 5176",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview --host 0.0.0.0 --port 4176"
+  },
+  "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/vite/src/App.tsx

@@ -0,0 +1,101 @@
+import { useMemo } from 'react'
+import {
+  Button,
+  Field,
+  Fieldset,
+  Input,
+  Progress,
+  Select,
+  Switch,
+  Tabs,
+  type ThemeStyle,
+  useTheme,
+} from 'base-themes'
+import registry from 'base-themes/registry.json'
+
+const densityOptions = {
+  compact: 'Compact',
+  comfortable: 'Comfortable',
+  spacious: 'Spacious',
+}
+
+export function App() {
+  const { style, setStyle, resolved, setTheme } = useTheme()
+  const componentCount = useMemo(() => registry.components.length, [])
+  const blockCount = useMemo(() => registry.blocks.length, [])
+
+  return (
+    <main className="example-shell">
+      <section className="hero-panel">
+        <div>
+          <p className="eyebrow">Fresh Vite install</p>
+          <h1>Base Themes works from the public package surface.</h1>
+          <p className="hero-copy">
+            This app imports components, CSS, theme state, and registry metadata from the same package a user installs from npm.
+          </p>
+        </div>
+        <div className="hero-actions">
+          <Button onClick={() => setTheme(resolved === 'dark' ? 'light' : 'dark')}>
+            Toggle {resolved === 'dark' ? 'light' : 'dark'}
+          </Button>
+          <Select
+            id="style"
+            label="Visual style"
+            value={style}
+            onValueChange={(value) => setStyle(value as ThemeStyle)}
+            items={Object.fromEntries(registry.style.variants.map((variant) => [variant, variant]))}
+          />
+        </div>
+      </section>
+
+      <section className="metrics-grid" aria-label="Package metadata">
+        <article>
+          <span>{componentCount}</span>
+          <p>Registry components</p>
+        </article>
+        <article>
+          <span>{registry.style.variants.length}</span>
+          <p>Theme styles</p>
+        </article>
+        <article>
+          <span>{blockCount}</span>
+          <p>Starter blocks</p>
+        </article>
+      </section>
+
+      <section className="workspace-grid">
+        <Fieldset legend="Settings form">
+          <Field label="Workspace name" description="Uses Base Themes Field and Input wrappers.">
+            <Input id="workspace-name" defaultValue="Product Operations" />
+          </Field>
+          <Select id="density" label="Density" defaultValue="comfortable" items={densityOptions} />
+          <Switch label="Weekly summary" defaultChecked />
+          <Button type="button">Save settings</Button>
+        </Fieldset>
+
+        <div className="status-panel">
+          <Tabs
+            defaultValue="overview"
+            panels={[
+              {
+                value: 'overview',
+                label: 'Overview',
+                title: 'Package surface',
+                content: 'Public imports are resolving correctly, including components, theme CSS, and registry JSON.',
+              },
+              {
+                value: 'registry',
+                label: 'Registry',
+                title: `Default style: ${registry.style.default}`,
+                content: `First component in registry: ${registry.components[0]?.title ?? 'none'}.`,
+              },
+            ]}
+          />
+          <div className="tab-content">
+            <Progress value={72} showValue aria-label="Adoption readiness" />
+          </div>
+        </div>
+      </section>
+    </main>
+  )
+}

package/examples/vite/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/vite/src/styles.css

@@ -0,0 +1,125 @@
+: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;
+}
+
+.example-shell {
+  width: min(1120px, calc(100vw - 32px));
+  margin: 0 auto;
+  padding: 40px 0;
+}
+
+.hero-panel,
+.workspace-grid > *,
+.metrics-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) minmax(280px, 360px);
+  gap: 24px;
+  align-items: end;
+  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-copy {
+  max-width: 680px;
+  margin: 16px 0 0;
+  color: var(--theme-muted-fg);
+  font-size: 1rem;
+  line-height: 1.6;
+}
+
+.hero-actions {
+  display: grid;
+  gap: 14px;
+}
+
+.metrics-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
+  margin: 16px 0;
+}
+
+.metrics-grid article {
+  padding: 20px;
+}
+
+.metrics-grid span {
+  display: block;
+  font-size: 2rem;
+  font-weight: 800;
+}
+
+.metrics-grid p {
+  margin: 6px 0 0;
+  color: var(--theme-muted-fg);
+}
+
+.workspace-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
+  gap: 16px;
+}
+
+.workspace-grid > * {
+  padding: 24px;
+}
+
+.status-panel {
+  min-width: 0;
+}
+
+.tab-content {
+  display: grid;
+  gap: 16px;
+  padding-top: 12px;
+}
+
+.tab-content p {
+  margin: 0;
+  color: var(--theme-muted-fg);
+}
+
+@media (max-width: 800px) {
+  .hero-panel,
+  .workspace-grid,
+  .metrics-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .example-shell {
+    width: min(100vw - 24px, 680px);
+    padding: 24px 0;
+  }
+}

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

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

package/examples/vite/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/vite/tsconfig.json

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

package/examples/vite/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/vite/vite.config.ts

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