@santi020k/lumen 3.0.0 → 4.0.0

package/templates/elements/section-header/src/lumen/section-header.html

@@ -0,0 +1,21 @@
+<script type="module">
+  import { defineLumenElements } from '@santi020k/lumen-elements/define'
+  defineLumenElements(['Badge', 'Button', 'Stack', 'Typography'])
+</script>
+
+<section aria-labelledby="section-heading">
+  <header aria-labelledby="section-heading">
+    <lumen-stack direction="horizontal" align="start" justify="between" gap="group" wrap>
+      <lumen-stack gap="related" style="flex: 1 1 20rem; min-width: 0; overflow-wrap: anywhere">
+        <lumen-stack direction="horizontal" align="center" gap="related" wrap>
+          <lumen-typography><h2 id="section-heading">Recent activity</h2></lumen-typography>
+          <lumen-badge variant="secondary">0 records</lumen-badge>
+        </lumen-stack>
+        <lumen-typography><p>Changes made during the selected period.</p></lumen-typography>
+      </lumen-stack>
+      <lumen-stack direction="horizontal" align="center" gap="related" wrap role="group" aria-label="Section actions">
+        <lumen-button type="button">View all activity</lumen-button>
+      </lumen-stack>
+    </lumen-stack>
+  </header>
+</section>

package/templates/elements/theme-builder/src/lumen/theme-builder.html

@@ -0,0 +1,59 @@
+<script type="module">
+  import { defineLumenElements } from '@santi020k/lumen-elements/define'
+
+  defineLumenElements()
+</script>
+
+<script type="module">
+  const root = document.querySelector('[data-lumen-theme-builder-recipe]')
+  const hueInput = root?.querySelector('[data-ui-theme-brand-hue]')
+  const preview = root?.querySelector('#lumen-theme-preview')
+  const output = root?.querySelector('[data-ui-theme-output]')
+  const exportButton = root?.querySelector('[data-ui-theme-export]')
+  const tokenNames = ['canvas', 'surface', 'surface-muted', 'surface-strong', 'line', 'ink', 'ink-soft', 'ink-muted', 'brand', 'brand-solid', 'brand-soft', 'accent', 'success', 'warning', 'danger']
+  const createTheme = hue => ({
+    accent: `${(hue + 150) % 360} 70% 40%`,
+    brand: `${hue} 85% 53%`,
+    'brand-soft': `${hue} 90% 96%`,
+    'brand-solid': `${hue} 85% 45%`,
+    canvas: `${hue} 20% 99%`,
+    danger: '0 84% 60%',
+    ink: `${hue} 40% 11%`,
+    'ink-muted': `${hue} 10% 48%`,
+    'ink-soft': `${hue} 14% 32%`,
+    line: `${hue} 14% 86%`,
+    success: '142 71% 36%',
+    surface: `${hue} 20% 100%`,
+    'surface-muted': `${hue} 16% 96%`,
+    'surface-strong': `${hue} 14% 91%`,
+    warning: '38 92% 50%'
+  })
+  const update = () => {
+    const hue = Number(hueInput?.value ?? 264)
+    const tokens = createTheme(Number.isFinite(hue) ? hue : 264)
+
+    for (const [token, value] of Object.entries(tokens)) {
+      preview?.style.setProperty(`--${token}`, value)
+    }
+
+    if (output) {
+      output.value = `:root {\n${tokenNames.map(token => `  --${token}: ${tokens[token]};`).join('\n')}\n}`
+    }
+  }
+
+  hueInput?.addEventListener('input', update)
+  exportButton?.addEventListener('click', () => navigator.clipboard?.writeText(output?.value ?? ''))
+  update()
+</script>
+
+<lumen-theme-builder class="lumen-recipe lumen-recipe--theme-builder" data-lumen-theme-builder-recipe>
+  <header><h2>Brand theme</h2><lumen-button data-ui-theme-export type="button">Copy CSS</lumen-button></header>
+  <lumen-card id="lumen-theme-preview" style="display: flex; gap: 0.5rem;">
+    <span data-ui-swatch style="--ui-swatch:hsl(var(--brand))"></span>
+    <span data-ui-swatch style="--ui-swatch:hsl(var(--accent))"></span>
+  </lumen-card>
+  <lumen-card>
+    <input class="ui-input" aria-label="Brand hue" data-ui-theme-brand-hue max="359" min="0" type="range" value="264" />
+  </lumen-card>
+  <textarea data-ui-theme-output aria-label="Theme CSS"></textarea>
+</lumen-theme-builder>

package/templates/react/advanced-fields/src/lumen/advanced-fields.tsx

@@ -0,0 +1,37 @@
+import {
+  Autocomplete,
+  ColorPicker,
+  DatePicker,
+  DateRangePicker,
+  NumberField,
+  SearchField,
+  TagGroup,
+  TimeField
+} from '@santi020k/lumen-react'
+
+export const AdvancedFieldsRecipe = () => (
+  <form className="lumen-recipe lumen-recipe--advanced-fields">
+    <SearchField name="q" placeholder="Search records" />
+    <Autocomplete list="assignees" placeholder="Assign to..." />
+    <datalist id="assignees">
+      <option value="Design" />
+      <option value="Engineering" />
+      <option value="Operations" />
+    </datalist>
+    <NumberField aria-label="Seats" min="1" defaultValue="3" />
+    <TimeField aria-label="Start time" defaultValue="09:30" />
+    <DateRangePicker>
+      <DatePicker aria-label="Start date" />
+      <DatePicker aria-label="End date" />
+    </DateRangePicker>
+    <ColorPicker aria-label="Brand color" defaultValue="#2563eb" />
+    <TagGroup aria-label="Selected filters">
+      <span data-ui-tag role="listitem">
+        Active
+        <button data-ui-tag-remove type="button">
+          Remove
+        </button>
+      </span>
+    </TagGroup>
+  </form>
+)

package/templates/react/analytics-dashboard/src/lumen/analytics-dashboard.tsx

@@ -0,0 +1,143 @@
+import './lumen-template.css'
+
+import {
+  Badge,
+  BarChart,
+  Button,
+  Card,
+  LineChart,
+  Sidebar,
+  Sparkline,
+  Stat,
+  Table
+} from '@santi020k/lumen-react'
+
+const revenue = [
+  {
+    data: [
+      { x: 'Jan', y: 118 },
+      { x: 'Feb', y: 126 },
+      { x: 'Mar', y: 132 },
+      { x: 'Apr', y: 148 },
+      { x: 'May', y: 162 },
+      { x: 'Jun', y: 184 }
+    ],
+    id: 'revenue',
+    label: 'Revenue',
+    tone: 'brand' as const
+  }
+]
+
+const channels = [
+  {
+    data: [
+      { x: 'Organic', y: 4820 },
+      { x: 'Referral', y: 3180 },
+      { x: 'Paid', y: 2640 }
+    ],
+    id: 'visitors',
+    label: 'Visitors',
+    tone: 'brand' as const
+  }
+]
+
+const metrics = [
+  {
+    change: '+12.4%',
+    label: 'Monthly revenue',
+    values: [31, 33, 38, 41, 46, 52],
+    value: '$184,320'
+  },
+  {
+    change: '+8.2%',
+    label: 'Active accounts',
+    values: [40, 42, 45, 49, 53, 57],
+    value: '12,480'
+  },
+  {
+    change: '-1.6%',
+    label: 'Customer churn',
+    values: [26, 25, 24, 23, 20, 18],
+    value: '2.8%'
+  },
+  {
+    change: '+3.1%',
+    label: 'Net retention',
+    values: [44, 45, 47, 49, 50, 54],
+    value: '116%'
+  }
+]
+
+export const AnalyticsDashboardTemplate = () => (
+  <div className="lumen-template lumen-template__shell">
+    <Sidebar className="lumen-template__sidebar">
+      <strong>Pulse Analytics</strong>
+      <nav aria-label="Analytics">
+        <a aria-current="page" href="#overview">
+          Overview
+        </a>
+        <a href="#acquisition">Acquisition</a>
+        <a href="#accounts">Accounts</a>
+      </nav>
+    </Sidebar>
+    <main className="lumen-template__main" id="overview">
+      <header className="lumen-template__header">
+        <div>
+          <Badge variant="outline">Jun 1–30</Badge>
+          <h1>Growth overview</h1>
+          <p>Revenue, retention, and account health.</p>
+        </div>
+        <Button>Export report</Button>
+      </header>
+      <section className="lumen-template__metrics" aria-label="Key metrics">
+        {metrics.map(metric => (
+          <Card className="lumen-template__metric" key={metric.label}>
+            <Stat label={metric.label} value={metric.value} />
+            <Badge variant="success">{metric.change}</Badge>
+            <Sparkline label={`${metric.label} trend`} values={metric.values} />
+          </Card>
+        ))}
+      </section>
+      <section className="lumen-template__grid" id="acquisition">
+        <LineChart area heading="Revenue trajectory" series={revenue} />
+        <BarChart heading="Channel performance" series={channels} />
+      </section>
+      <Card className="lumen-template__panel" id="accounts">
+        <div className="lumen-template__section-header">
+          <h2>Accounts to watch</h2>
+          <Button variant="ghost">View all</Button>
+        </div>
+        <Table className="lumen-template__table">
+          <table>
+            <thead>
+              <tr>
+                <th>Account</th>
+                <th>Plan</th>
+                <th>Status</th>
+                <th>Value</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>Northstar Labs</td>
+                <td>Enterprise</td>
+                <td>
+                  <Badge variant="success">Active</Badge>
+                </td>
+                <td>$18,400</td>
+              </tr>
+              <tr>
+                <td>Arc & Field</td>
+                <td>Enterprise</td>
+                <td>
+                  <Badge variant="destructive">At risk</Badge>
+                </td>
+                <td>$14,780</td>
+              </tr>
+            </tbody>
+          </table>
+        </Table>
+      </Card>
+    </main>
+  </div>
+)

package/templates/react/auth-onboarding/src/lumen/auth-onboarding.tsx

@@ -0,0 +1,129 @@
+import './lumen-template.css'
+
+import {
+  Alert,
+  Button,
+  Card,
+  Checkbox,
+  Field,
+  Grid,
+  Input,
+  Label,
+  Progress,
+  Stepper
+} from '@santi020k/lumen-react'
+
+export const AuthOnboardingTemplate = () => (
+  <main className="lumen-template lumen-template__form-shell">
+    <Card className="lumen-template__form">
+      <Stepper
+        currentStep={1}
+        steps={['Account', 'Workspace', 'Preferences', 'Invite']}
+      />
+      <header>
+        <p className="lumen-template__muted">Step 2 of 4</p>
+        <h1>Create your workspace</h1>
+        <p className="lumen-template__muted">
+          We’ll prepare the right starting point.
+        </p>
+      </header>
+      <form className="lumen-template__form">
+        <Field className="lumen-template__field">
+          <Label htmlFor="workspace-name">Workspace name</Label>
+          <Input
+            id="workspace-name"
+            name="workspace"
+            placeholder="Northstar Labs"
+            required
+          />
+        </Field>
+        <Field className="lumen-template__field">
+          <Label htmlFor="work-email">Work email</Label>
+          <Input
+            aria-invalid="true"
+            id="work-email"
+            name="email"
+            type="email"
+            defaultValue="maya@example"
+            required
+          />
+          <Alert role="alert" variant="destructive">
+            Enter a complete email address.
+          </Alert>
+        </Field>
+        <fieldset className="lumen-template__choices">
+          <legend>What are you setting up?</legend>
+          <label className="lumen-template__choice">
+            <input defaultChecked name="intent" type="radio" value="team" />
+            {' '}
+            A
+            team workspace
+          </label>
+          <label className="lumen-template__choice">
+            <input name="intent" type="radio" value="personal" />
+            {' '}
+            A personal
+            workspace
+          </label>
+        </fieldset>
+        <label>
+          <Checkbox defaultChecked name="updates" value="updates" />
+          {' '}
+          Send
+          occasional onboarding tips
+        </label>
+        <div>
+          <div className="lumen-template__section-header">
+            <span>Setup progress</span>
+            <strong>50%</strong>
+          </div>
+          <Progress aria-label="Setup is 50% complete" value={50} />
+        </div>
+        <div className="lumen-template__actions">
+          <Button variant="ghost">Back</Button>
+          <Button type="submit">Continue</Button>
+        </div>
+      </form>
+    </Card>
+    <section className="lumen-login-examples" aria-labelledby="login-examples-title">
+      <header>
+        <p>Returning members</p>
+        <h2 id="login-examples-title">A familiar way back in.</h2>
+        <p>Email codes and passkeys, composed with Lumen. These visual examples do not send codes or sign you in.</p>
+      </header>
+      <Grid className="lumen-login-examples__grid" minItemWidth="18rem">
+        <Card className="lumen-login-examples__card">
+          <h3>Welcome back</h3>
+          <p>Use a saved passkey or receive a code by email.</p>
+          <Button disabled type="button">Sign in with a passkey</Button>
+          <Field>
+            <Label htmlFor="login-email">Email address</Label>
+            <Input autoComplete="email" id="login-email" name="login-email" readOnly type="email" value="member@example.com" />
+          </Field>
+          <Button disabled type="button">Send sign-in code</Button>
+          <p>No password to remember.</p>
+        </Card>
+        <Card className="lumen-login-examples__card">
+          <h3>Check your inbox</h3>
+          <p>If this address can sign in, a code will arrive shortly.</p>
+          <Field>
+            <Label htmlFor="login-code">Email code</Label>
+            <Input aria-describedby="login-code-hint" autoComplete="one-time-code" id="login-code" inputMode="numeric" name="login-code" placeholder="Enter your code" readOnly />
+            <p id="login-code-hint">Paste the complete code from your email.</p>
+          </Field>
+          <Button disabled type="button">Verify and continue</Button>
+          <Button disabled type="button" variant="outline">Resend code</Button>
+          <p>Entered the wrong address? Return to email sign-in.</p>
+        </Card>
+        <Card className="lumen-login-examples__card">
+          <h3>Try another way</h3>
+          <Alert variant="destructive">Passkey sign-in was canceled. You can try again or request a code by email.</Alert>
+          <p>You can still use email when your passkey is unavailable.</p>
+          <Button disabled type="button">Try passkey again</Button>
+          <Button disabled type="button" variant="outline">Use an email code</Button>
+          <p>Your existing account and workspace stay the same.</p>
+        </Card>
+      </Grid>
+    </section>
+  </main>
+)

package/templates/react/command-center/src/lumen/command-center.tsx

@@ -0,0 +1,85 @@
+'use client'
+
+import { useRef, useState } from 'react'
+
+import { Command, Input, Typography } from '@santi020k/lumen-react'
+
+export type WorkspaceCommand = 'search' | 'create' | 'review'
+
+const commands: readonly { id: WorkspaceCommand, label: string }[] = [
+  { id: 'search', label: 'Search project documentation' },
+  { id: 'create', label: 'Create a task draft' },
+  { id: 'review', label: 'Review pending proposals' }
+]
+
+export const CommandCenterRecipe = ({ onCommand }: { onCommand?: (command: WorkspaceCommand) => void }) => {
+  const [selected, setSelected] = useState('')
+  const [query, setQuery] = useState('')
+  const inputRef = useRef<HTMLInputElement>(null)
+  const itemsRef = useRef<(HTMLButtonElement | null)[]>([])
+  const matches = commands.filter(command => command.label.toLowerCase().includes(query.trim().toLowerCase()))
+
+  return (
+    <section aria-label="Workspace commands">
+      <Typography>
+        <h2>What would you like to do?</h2>
+        <p>Search with the keyboard, then choose a command.</p>
+      </Typography>
+      <Command>
+        <Input
+          ref={inputRef}
+          type="search"
+          aria-label="Search workspace commands"
+          placeholder="Search commands…"
+          value={query}
+          onChange={event => {
+            setQuery(event.currentTarget.value)
+          }}
+          onKeyDown={event => {
+            if (event.key === 'ArrowDown' && matches.length > 0) {
+              event.preventDefault()
+
+              itemsRef.current[0]?.focus()
+            }
+          }}
+        />
+        {matches.map((command, index) => (
+          <button
+            key={command.id}
+            ref={element => {
+              itemsRef.current[index] = element
+            }}
+            data-ui-command-item
+            type="button"
+            onKeyDown={event => {
+              if (event.key === 'Escape') {
+                event.preventDefault()
+
+                inputRef.current?.focus()
+              } else if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
+                event.preventDefault()
+
+                let next = (index + (event.key === 'ArrowDown' ? 1 : -1) + matches.length) % matches.length
+
+                if (event.key === 'Home') next = 0
+
+                if (event.key === 'End') next = matches.length - 1
+
+                itemsRef.current[next]?.focus()
+              }
+            }}
+            onClick={() => {
+              setSelected(command.label)
+
+              onCommand?.(command.id)
+            }}
+          >
+            {command.label}
+          </button>
+        ))}
+        {matches.length === 0 && <Typography><p role="status">No matching commands. Try another search.</p></Typography>}
+      </Command>
+      <p role="status">{selected ? `Selected: ${selected}` : 'Choose a command.'}</p>
+    </section>
+  )
+}

package/templates/react/commerce-dashboard/src/lumen/commerce-dashboard.tsx

@@ -0,0 +1,148 @@
+import './lumen-template.css'
+
+import {
+  Badge,
+  BarChart,
+  Button,
+  Card,
+  PieChart,
+  Progress,
+  Sidebar,
+  Stat,
+  Table
+} from '@santi020k/lumen-react'
+
+const sales = [
+  {
+    data: [
+      { x: 'Mon', y: 11200 },
+      { x: 'Tue', y: 13800 },
+      { x: 'Wed', y: 12600 },
+      { x: 'Thu', y: 15400 },
+      { x: 'Fri', y: 16800 }
+    ],
+    id: 'sales',
+    label: 'Sales',
+    tone: 'brand' as const
+  }
+]
+
+const sources = {
+  data: [
+    { x: 'Online', y: 812 },
+    { x: 'Marketplace', y: 286 },
+    { x: 'POS', y: 186 }
+  ],
+  id: 'orders',
+  label: 'Orders'
+}
+
+export const CommerceDashboardTemplate = () => (
+  <div className="lumen-template lumen-template__shell">
+    <Sidebar className="lumen-template__sidebar">
+      <strong>Mercury Commerce</strong>
+      <nav aria-label="Commerce">
+        <a aria-current="page" href="#overview">
+          Overview
+        </a>
+        <a href="#orders">Orders</a>
+        <a href="#inventory">Inventory</a>
+      </nav>
+    </Sidebar>
+    <main className="lumen-template__main" id="overview">
+      <header className="lumen-template__header">
+        <div>
+          <Badge variant="outline">Store overview</Badge>
+          <h1>Commerce command center</h1>
+          <p>Sales, fulfillment, and inventory risk.</p>
+        </div>
+        <Button>Add product</Button>
+      </header>
+      <section
+        className="lumen-template__metrics"
+        aria-label="Commerce metrics"
+      >
+        <Card className="lumen-template__metric">
+          <Stat label="Gross sales" value="$92,840" />
+          <Badge variant="success">+18.6%</Badge>
+        </Card>
+        <Card className="lumen-template__metric">
+          <Stat label="Orders" value="1,284" />
+          <Badge variant="success">+7.4%</Badge>
+        </Card>
+        <Card className="lumen-template__metric">
+          <Stat label="Average order" value="$72.31" />
+          <Badge variant="success">+$6.20</Badge>
+        </Card>
+        <Card className="lumen-template__metric">
+          <Stat label="Return rate" value="2.1%" />
+          <Badge variant="success">-0.4%</Badge>
+        </Card>
+      </section>
+      <section className="lumen-template__grid">
+        <BarChart heading="Sales this week" series={sales} />
+        <PieChart
+          centerLabel="orders"
+          centerValue="1,284"
+          heading="Order sources"
+          series={sources}
+        />
+      </section>
+      <section className="lumen-template__grid" id="inventory">
+        <Card className="lumen-template__panel">
+          <h2>Fulfillment</h2>
+          <Stat label="Orders ready" value="42" />
+          <Progress
+            aria-label="42 of 58 orders fulfilled"
+            max={58}
+            value={42}
+          />
+        </Card>
+        <Card className="lumen-template__panel">
+          <h2>Inventory signals</h2>
+          <ul className="lumen-template__list">
+            <li>3 products below safety stock</li>
+            <li>8 transfers arriving this week</li>
+            <li>94% inventory accuracy</li>
+          </ul>
+        </Card>
+      </section>
+      <Card className="lumen-template__panel" id="orders">
+        <div className="lumen-template__section-header">
+          <h2>Recent orders</h2>
+          <Button variant="ghost">View all</Button>
+        </div>
+        <Table className="lumen-template__table">
+          <table>
+            <thead>
+              <tr>
+                <th>Order</th>
+                <th>Customer</th>
+                <th>Status</th>
+                <th>Total</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>#10482</td>
+                <td>Nora Singh</td>
+                <td>
+                  <Badge variant="success">Completed</Badge>
+                </td>
+                <td>$148.00</td>
+              </tr>
+              <tr>
+                <td>#10481</td>
+                <td>Theo Martin</td>
+                <td>
+                  <Badge variant="warning">Pending</Badge>
+                </td>
+                <td>$84.50</td>
+              </tr>
+            </tbody>
+          </table>
+        </Table>
+      </Card>
+    </main>
+  </div>
+)

package/templates/react/content-flow-actions/src/lumen/content-flow-actions.tsx

@@ -0,0 +1,11 @@
+import { Button, Stack } from '@santi020k/lumen-react'
+
+export const ContentFlowActionsRecipe = () => (
+  <Stack role="group" aria-label="Changes" gap="related">
+    <p role="status">You have unsaved changes.</p>
+    <Stack direction="horizontal" gap="related" wrap>
+      <Button>Save changes</Button>
+      <Button variant="secondary">Discard changes</Button>
+    </Stack>
+  </Stack>
+)

package/templates/react/content-flow-header/src/lumen/content-flow-header.tsx

@@ -0,0 +1,14 @@
+import { Button, Stack, Typography } from '@santi020k/lumen-react'
+
+export const ContentFlowHeaderRecipe = () => (
+  <Stack as="section" gap="group" aria-labelledby="workspace-heading">
+    <Typography>
+      <h1 id="workspace-heading">Workspace settings</h1>
+      <p>Manage your team’s access and notification preferences.</p>
+    </Typography>
+    <Stack direction="horizontal" gap="related" wrap>
+      <Button>Invite a teammate</Button>
+      <Button variant="secondary">View activity</Button>
+    </Stack>
+  </Stack>
+)

package/templates/react/content-flow-list/src/lumen/content-flow-list.tsx

@@ -0,0 +1,19 @@
+import { Badge, Card, CardContent, CardHeader, CardTitle, Stack } from '@santi020k/lumen-react'
+
+export const ContentFlowListRecipe = () => (
+  <Card as="section" aria-labelledby="members-heading">
+    <CardHeader><CardTitle as="h2" id="members-heading">Team members</CardTitle></CardHeader>
+    <CardContent>
+      <Stack role="list" gap="group">
+        <Stack role="listitem" direction="horizontal" align="center" justify="between" gap="related" wrap>
+          <span>Alex Morgan — Workspace owner</span>
+          <Badge>Active</Badge>
+        </Stack>
+        <Stack role="listitem" direction="horizontal" align="center" justify="between" gap="related" wrap>
+          <span>Jamie Lee — Design and operations</span>
+          <Badge variant="secondary">Invited</Badge>
+        </Stack>
+      </Stack>
+    </CardContent>
+  </Card>
+)