@santi020k/lumen 3.0.1 → 4.1.0

package/templates/astro/advanced-fields/src/lumen/advanced-fields.astro

@@ -0,0 +1,35 @@
+---
+import {
+  Autocomplete,
+  ColorPicker,
+  DatePicker,
+  DateRangePicker,
+  NumberField,
+  SearchField,
+  TagGroup,
+  TimeField
+} from '@santi020k/lumen-astro'
+---
+
+<form class="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" value="3" />
+  <TimeField aria-label="Start time" value="09:30" />
+  <DateRangePicker>
+    <DatePicker aria-label="Start date" />
+    <DatePicker aria-label="End date" />
+  </DateRangePicker>
+  <ColorPicker aria-label="Brand color" value="#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/astro/ai-docs/llms.txt

@@ -0,0 +1,3 @@
+# Lumen UI
+
+Use @santi020k/lumen-astro for Astro apps, import @santi020k/lumen-astro/styles.css once, and mount UIPrimitives once in the root layout for interactive primitives. Do not place UIPrimitives next to every component instance.

package/templates/astro/analytics-dashboard/src/lumen/analytics-dashboard.astro

@@ -0,0 +1,110 @@
+---
+import './lumen-template.css'
+
+import {
+  Badge,
+  BarChart,
+  Button,
+  Card,
+  LineChart,
+  Sidebar,
+  Sparkline,
+  Stat,
+  Table
+} from '@santi020k/lumen-astro'
+
+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%' }
+]
+
+const revenue = [{
+  data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
+    .map((x, index) => ({ x, y: [118, 126, 132, 148, 162, 184][index] ?? 0 })),
+  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
+---
+
+<div class="lumen-template lumen-template__shell">
+  <Sidebar class="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 class="lumen-template__main" id="overview">
+    <header class="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 class="lumen-template__metrics" aria-label="Key metrics">
+      {metrics.map(metric => (
+        <Card class="lumen-template__metric">
+          <Stat label={metric.label} value={metric.value} />
+          <Badge variant="success">{metric.change}</Badge>
+          <Sparkline label={`${metric.label} trend`} values={metric.values} />
+        </Card>
+      ))}
+    </section>
+    <section class="lumen-template__grid" id="acquisition">
+      <LineChart area heading="Revenue trajectory" series={revenue} />
+      <BarChart heading="Channel performance" series={channels} />
+    </section>
+    <Card class="lumen-template__panel" id="accounts">
+      <div class="lumen-template__section-header">
+        <div>
+          <h2>Accounts to watch</h2>
+          <p>Recent health changes.</p>
+        </div>
+        <Button variant="ghost">View all</Button>
+      </div>
+      <Table class="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/astro/auth-onboarding/src/lumen/auth-onboarding.astro

@@ -0,0 +1,107 @@
+---
+import './lumen-template.css'
+
+import {
+  Alert,
+  Button,
+  Card,
+  Checkbox,
+  Field,
+  Grid,
+  Input,
+  Label,
+  Progress,
+  Stepper
+} from '@santi020k/lumen-astro'
+---
+
+<main class="lumen-template lumen-template__form-shell">
+  <Card class="lumen-template__form">
+    <Stepper currentStep={1} steps={['Account', 'Workspace', 'Preferences', 'Invite']} />
+    <header>
+      <p class="lumen-template__muted">Step 2 of 4</p>
+      <h1>Create your workspace</h1>
+      <p class="lumen-template__muted">We’ll prepare the right starting point.</p>
+    </header>
+    <form class="lumen-template__form">
+      <Field class="lumen-template__field">
+        <Label for="workspace-name">Workspace name</Label>
+        <Input id="workspace-name" name="workspace" placeholder="Northstar Labs" required />
+      </Field>
+      <Field class="lumen-template__field">
+        <Label for="work-email">Work email</Label>
+        <Input aria-invalid="true" id="work-email" name="email" type="email" value="maya@example" required />
+        <Alert role="alert" variant="destructive">Enter a complete email address.</Alert>
+      </Field>
+      <fieldset class="lumen-template__choices">
+        <legend>What are you setting up?</legend>
+        <label class="lumen-template__choice">
+          <input checked name="intent" type="radio" value="team" />
+          {' '}
+          A team workspace
+        </label>
+        <label class="lumen-template__choice">
+          <input name="intent" type="radio" value="personal" />
+          {' '}
+          A personal workspace
+        </label>
+      </fieldset>
+      <label>
+        <Checkbox checked name="updates" value="updates" />
+        {' '}
+        Send occasional onboarding tips
+      </label>
+      <div>
+        <div class="lumen-template__section-header">
+          <span>Setup progress</span>
+          <strong>50%</strong>
+        </div>
+        <Progress aria-label="Setup is 50% complete" value={50} />
+      </div>
+      <div class="lumen-template__actions">
+        <Button variant="ghost">Back</Button>
+        <Button type="submit">Continue</Button>
+      </div>
+    </form>
+  </Card>
+  <section class="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 class="lumen-login-examples__grid" minItemWidth="18rem">
+      <Card class="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 for="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 class="lumen-login-examples__card">
+        <h3>Check your inbox</h3>
+        <p>If this address can sign in, a code will arrive shortly.</p>
+        <Field>
+          <Label for="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 class="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/astro/command-center/src/lumen/command-center.astro

@@ -0,0 +1,34 @@
+---
+import { Command, Input, Typography } from '@santi020k/lumen-astro'
+---
+
+<section data-product-block="command" 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 type="search" aria-label="Search workspace commands" placeholder="Search commands…" />
+    <button data-ui-command-item data-workspace-command="search" type="button">Search project documentation</button>
+    <button data-ui-command-item data-workspace-command="create" type="button">Create a task draft</button>
+    <button data-ui-command-item data-workspace-command="review" type="button">Review pending proposals</button>
+  </Command><p role="status" data-block-status>Choose a command.</p>
+</section>
+
+<script>
+  import { mountProductBlocks } from './product-blocks'
+
+  let cleanup: (() => void) | undefined
+
+  const mount = () => {
+ cleanup?.()
+
+ cleanup = mountProductBlocks(document)
+}
+
+  mount()
+
+  document.addEventListener('astro:page-load', mount)
+
+  document.addEventListener('astro:before-swap', () => {
+ cleanup?.()
+
+ cleanup = undefined
+})
+</script>

package/templates/astro/commerce-dashboard/src/lumen/commerce-dashboard.astro

@@ -0,0 +1,108 @@
+---
+import './lumen-template.css'
+
+import {
+  Badge,
+  BarChart,
+  Button,
+  Card,
+  PieChart,
+  Progress,
+  Sidebar,
+  Stat,
+  Table
+} from '@santi020k/lumen-astro'
+
+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' } as const
+---
+
+<div class="lumen-template lumen-template__shell">
+  <Sidebar class="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 class="lumen-template__main" id="overview">
+    <header class="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 class="lumen-template__metrics" aria-label="Commerce metrics">
+      <Card class="lumen-template__metric">
+        <Stat label="Gross sales" value="$92,840" />
+        <Badge variant="success">+18.6%</Badge>
+      </Card>
+      <Card class="lumen-template__metric">
+        <Stat label="Orders" value="1,284" />
+        <Badge variant="success">+7.4%</Badge>
+      </Card>
+      <Card class="lumen-template__metric">
+        <Stat label="Average order" value="$72.31" />
+        <Badge variant="success">+$6.20</Badge>
+      </Card>
+      <Card class="lumen-template__metric">
+        <Stat label="Return rate" value="2.1%" />
+        <Badge variant="success">-0.4%</Badge>
+      </Card>
+    </section>
+    <section class="lumen-template__grid">
+      <BarChart heading="Sales this week" series={sales} />
+      <PieChart centerLabel="orders" centerValue="1,284" heading="Order sources" series={sources} />
+    </section>
+    <section class="lumen-template__grid" id="inventory">
+      <Card class="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 class="lumen-template__panel">
+        <h2>Inventory signals</h2>
+        <ul class="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 class="lumen-template__panel" id="orders">
+      <div class="lumen-template__section-header">
+        <h2>Recent orders</h2>
+        <Button variant="ghost">View all</Button>
+      </div>
+      <Table class="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/astro/content-flow-actions/src/lumen/content-flow-actions.astro

@@ -0,0 +1,10 @@
+---
+import { Button, Stack } from '@santi020k/lumen-astro'
+---
+
+<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/astro/content-flow-header/src/lumen/content-flow-header.astro

@@ -0,0 +1,14 @@
+---
+import { Button, Stack, Typography } from '@santi020k/lumen-astro'
+---
+
+<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/astro/content-flow-list/src/lumen/content-flow-list.astro

@@ -0,0 +1,13 @@
+---
+import { Badge, Card, CardContent, CardHeader, CardTitle, Stack } from '@santi020k/lumen-astro'
+---
+
+<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>

package/templates/astro/content-flow-settings/src/lumen/content-flow-settings.astro

@@ -0,0 +1,17 @@
+---
+import { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Field, Input, Label, Stack } from '@santi020k/lumen-astro'
+---
+
+<Card as="section" aria-labelledby="notification-heading">
+  <CardHeader>
+    <CardTitle as="h2" id="notification-heading">Notifications</CardTitle>
+    <CardDescription>Choose where your team receives updates.</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <Stack gap="group">
+      <Field><Label for="team-name">Team name</Label><Input id="team-name" name="team" autocomplete="organization" /></Field>
+      <Field><Label for="team-email">Team email</Label><Input id="team-email" name="email" type="email" autocomplete="email" /></Field>
+    </Stack>
+  </CardContent>
+  <CardFooter><Button>Save preferences</Button><Button variant="secondary">Discard changes</Button></CardFooter>
+</Card>

package/templates/astro/data-collections/src/lumen/data-collections.astro

@@ -0,0 +1,52 @@
+---
+import {
+  Command,
+  DataTable,
+  Pagination,
+  Tree,
+  TreeGrid,
+  VirtualList
+} from '@santi020k/lumen-astro'
+---
+
+<section class="lumen-recipe lumen-recipe--data-collections">
+  <Command>
+    <input type="search" placeholder="Filter records" />
+    <button data-ui-command-item type="button">Open docs</button>
+  </Command>
+  <DataTable>
+    <table>
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Status</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Docs</td>
+          <td>Ready</td>
+        </tr>
+      </tbody>
+    </table>
+  </DataTable>
+  <Tree aria-label="Files">
+    <div role="treeitem" aria-expanded="true">src</div>
+    <div role="treeitem">index.ts</div>
+  </Tree>
+  <TreeGrid aria-label="Project status">
+    <div role="row">
+      <span role="gridcell">Docs</span>
+      <span role="gridcell">Ready</span>
+    </div>
+  </TreeGrid>
+  <VirtualList data-ui-item-size="44" style="--ui-list-height: 12rem">
+    <div>Row 1</div>
+    <div>Row 2</div>
+    <div>Row 3</div>
+  </VirtualList>
+  <Pagination>
+    <a href="?page=1">Previous</a>
+    <a href="?page=2">Next</a>
+  </Pagination>
+</section>

package/templates/astro/feature-preview/src/lumen/feature-preview.astro

@@ -0,0 +1,32 @@
+---
+import { Button, Card, MotionGroup, Stack, Typography, VisualEffect } from '@santi020k/lumen-astro'
+---
+
+<section data-product-block="feature" aria-label="Feature preview">
+  <Typography><h2>From idea to delivery</h2></Typography>
+  <Stack direction="horizontal" gap="related" role="group" aria-label="Preview a workflow stage"><Button data-feature="plan" aria-pressed="true">Plan</Button><Button data-feature="review" aria-pressed="false">Review</Button><Button data-feature="ship" aria-pressed="false">Ship</Button></Stack>
+  <MotionGroup><Card data-ui-motion-key="plan" data-feature-panel="plan"><VisualEffect variant="mesh"><Typography><h3>Plan</h3><p>Bring the next three tasks into focus.</p></Typography></VisualEffect></Card><Card hidden data-ui-motion-key="review" data-feature-panel="review"><VisualEffect variant="mesh"><Typography><h3>Review</h3><p>Compare a proposal before deciding.</p></Typography></VisualEffect></Card><Card hidden data-ui-motion-key="ship" data-feature-panel="ship"><VisualEffect variant="mesh"><Typography><h3>Ship</h3><p>Check the release evidence before publishing.</p></Typography></VisualEffect></Card></MotionGroup>
+  <p role="status" data-block-status>Previewing plan.</p>
+</section>
+
+<script>
+  import { mountProductBlocks } from './product-blocks'
+
+  let cleanup: (() => void) | undefined
+
+  const mount = () => {
+ cleanup?.()
+
+ cleanup = mountProductBlocks(document)
+}
+
+  mount()
+
+  document.addEventListener('astro:page-load', mount)
+
+  document.addEventListener('astro:before-swap', () => {
+ cleanup?.()
+
+ cleanup = undefined
+})
+</script>

package/templates/astro/guided-onboarding/src/lumen/guided-onboarding.astro

@@ -0,0 +1,35 @@
+---
+import { Button, Card, Form, Input, Label, Stack, Typography } from '@santi020k/lumen-astro'
+---
+
+<section data-product-block="onboarding" aria-label="Workspace setup">
+  <Card><Stack gap="group"><Typography><h2>Prepare your workspace</h2><p>This draft stays local until your application handles completion.</p></Typography>
+  <Form enhance={false} method="post"><Stack gap="group">
+    <section data-onboarding-step="0"><Typography><h3 tabindex="-1">Workspace</h3></Typography><Label>Workspace name<Input name="workspace" data-workspace-name required maxlength="80" /></Label></section>
+    <section data-onboarding-step="1" hidden><Typography><h3 tabindex="-1">Review your draft</h3><p>Workspace: <span data-workspace-review></span></p></Typography></section>
+    <section data-onboarding-step="2" hidden><Typography><h3 tabindex="-1">Ready</h3><p>Workspace draft completed.</p></Typography><Button data-onboarding-edit type="button">Edit draft</Button></section>
+    <Stack direction="horizontal" gap="related"><Button data-onboarding-back type="button" hidden variant="secondary">Back</Button><Button data-onboarding-next disabled type="submit">Continue</Button></Stack>
+  </Stack></Form><p role="status" data-block-status>Step 1 of 3.</p></Stack></Card>
+</section>
+
+<script>
+  import { mountProductBlocks } from './product-blocks'
+
+  let cleanup: (() => void) | undefined
+
+  const mount = () => {
+ cleanup?.()
+
+ cleanup = mountProductBlocks(document)
+}
+
+  mount()
+
+  document.addEventListener('astro:page-load', mount)
+
+  document.addEventListener('astro:before-swap', () => {
+ cleanup?.()
+
+ cleanup = undefined
+})
+</script>

package/templates/astro/interactive-pricing/src/lumen/interactive-pricing.astro

@@ -0,0 +1,32 @@
+---
+import { Button, Card, Grid, Stack, Typography, VisualEffect } from '@santi020k/lumen-astro'
+---
+
+<section data-product-block="pricing" aria-label="Example pricing">
+  <Typography><h2>A plan for your next project</h2><p>Illustrative prices. Connect selections to your own checkout.</p></Typography>
+  <Stack direction="horizontal" gap="related" role="group" aria-label="Billing period"><Button data-billing="monthly" aria-pressed="true">Monthly</Button><Button data-billing="annual" aria-pressed="false">Annual</Button></Stack>
+  <Grid columns="auto"><Card><VisualEffect variant="border"><Typography><h3>Starter</h3><p data-monthly="10" data-annual="96">$10 / month</p></Typography><Button data-plan="starter">Choose starter</Button></VisualEffect></Card><Card><VisualEffect variant="mesh"><Typography><h3>Team</h3><p data-monthly="24" data-annual="240">$24 / month</p></Typography><Button data-plan="team">Choose team</Button></VisualEffect></Card></Grid>
+  <p role="status" data-block-status>Select a plan to compare billing.</p>
+</section>
+
+<script>
+  import { mountProductBlocks } from './product-blocks'
+
+  let cleanup: (() => void) | undefined
+
+  const mount = () => {
+ cleanup?.()
+
+ cleanup = mountProductBlocks(document)
+}
+
+  mount()
+
+  document.addEventListener('astro:page-load', mount)
+
+  document.addEventListener('astro:before-swap', () => {
+ cleanup?.()
+
+ cleanup = undefined
+})
+</script>