tembro 3.1.1 → 3.1.6

package/packages/cli/vendor/src/showcase/premium/hover-card/showcase.tsx

@@ -1,59 +0,0 @@
-import * as React from "react"
-
-import { Avatar, Button, HoverCard } from "@/index"
-
-const sides = ["bottom", "right", "top", "left"] as const
-const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
-
-export function HoverCardShowcase() {
-  const [side, setSide] = React.useState<(typeof sides)[number]>("bottom")
-
-  return (
-    <div className="space-y-0">
-      <section className="pb-6">
-        <div className="flex flex-col gap-6 xl:flex-row xl:items-end xl:justify-between">
-          <div className="max-w-xl">
-            <p className="text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted">Hover card</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Richer than tooltip, lighter than popover</h3>
-            <p className="mt-3 text-sm leading-6 aui-text-muted">Use hover card when one entity preview needs a bit more room but still should feel lightweight.</p>
-          </div>
-
-          <div className="grid gap-3 sm:grid-cols-3 xl:min-w-[360px] xl:max-w-[420px]">
-            <div className="rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3">
-              <p className="text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted">Side</p>
-              <p className="mt-2 text-lg font-semibold aui-text-strong capitalize">{side}</p>
-            </div>
-            <div className="rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3">
-              <p className="text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted">Use for</p>
-              <p className="mt-2 text-lg font-semibold aui-text-strong">Entity preview</p>
-            </div>
-            <div className="rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3">
-              <p className="text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted">Avoid for</p>
-              <p className="mt-2 text-lg font-semibold aui-text-strong">Heavy actions</p>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <section className={panelClass}>
-        <div className="flex min-h-52 items-center justify-center rounded-[22px] border border-[color:var(--aui-divider)] p-5">
-          <HoverCard
-            side={side}
-            trigger={<button type="button" className="rounded-full border border-[color:var(--aui-divider)] p-1"><Avatar fallback="AJ" /></button>}
-            content={<div className="space-y-1"><p className="font-medium">Azamat Jurayev</p><p className="text-sm text-muted-foreground">Design system owner</p><p className="text-xs text-muted-foreground">Keeps public components and package releases in sync.</p></div>}
-          />
-        </div>
-      </section>
-
-      <section className={panelClass}>
-        <div className="flex flex-wrap gap-2">
-          {sides.map((entry) => (
-            <Button key={entry} type="button" size="sm" variant={side === entry ? "default" : "secondary"} onClick={() => setSide(entry)}>
-              {entry}
-            </Button>
-          ))}
-        </div>
-      </section>
-    </div>
-  )
-}

package/packages/cli/vendor/src/showcase/premium/masked-input/index.ts

@@ -1,2 +0,0 @@
-export { MaskedInputShowcase } from "./showcase"
-export { maskedInputMock } from "./mock"

package/packages/cli/vendor/src/showcase/premium/masked-input/mock.ts

@@ -1,42 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const maskedInputMock: ComponentDemoMock = {
-  code: `import { useState } from "react"
-import { Input } from "tembro"
-
-export function Example() {
-  const [value, setValue] = useState("AA-123")
-
-  return (
-    <Input
-      kind="masked"
-      value={value}
-      onValueChange={(nextValue) => setValue(nextValue)}
-      mask={(raw: string) => raw.toUpperCase().slice(0, 6).replace(/(.{3})(?=.)/, "$1-")}
-      placeholder="AA-123"
-    />
-  )
-}
-`,
-  htmlCode: '<label for="masked">Referral code</label><input id="masked" type="text" value="AA-123" placeholder="AA-123" />',
-  cliCommand: "npx tembro add input",
-  highlights: [
-    "Mask callback runs on each edit",
-    "Uppercase and slicing are explicit formatting assumptions",
-    "Raw value assumptions should be mirrored in validation and submit payloads",
-    "Use a deterministic placeholder that matches the mask contract",
-  ],
-  relatedBlockSlugs: ["settings-form", "crm-dashboard", "auth-sign-in"],
-  scenarios: [
-    { title: "Referral codes", description: "Use fixed pattern for short identifiers while typing." },
-    { title: "License keys", description: "Apply grouping with a strict uppercase format and controlled length." },
-    { title: "Display normalization", description: "Normalize display while preserving form-level expectations." },
-    { title: "Validation gate", description: "Reject submission when value shape does not match mask contract." },
-  ],
-  capabilityNotes: [
-    "Document whether callback receives raw text or already masked text.",
-    "If you need raw payload, sanitize before submit and keep canonical storage layer separate.",
-    "Use one mask function source for both form and API submission paths.",
-    "Treat partially typed values as invalid until user completion conditions are met.",
-  ],
-}

package/packages/cli/vendor/src/showcase/premium/masked-input/showcase.tsx

@@ -1,25 +0,0 @@
-import { useState } from "react"
-
-import { Input } from "@/index"
-
-import type { ComponentDemoProps } from "../types"
-
-export function MaskedInputShowcase({ mode }: ComponentDemoProps) {
-  const [value, setValue] = useState("AA-123")
-
-  return (
-    <div className="space-y-4">
-      <Input
-        kind="masked"
-        value={value}
-        onValueChange={(nextValue: string) => setValue(nextValue)}
-        mask={(raw: string) => raw.toUpperCase().slice(0, 6).replace(/(.{3})(?=.)/, "$1-")}
-        placeholder="AA-123"
-      />
-      <p className="aui-text-subtle text-sm">Display value: {value || "—"}</p>
-      <p className="aui-text-muted text-sm">Task focus: fixed-format field where raw/display value assumptions should be documented.</p>
-      <p className="aui-text-muted text-sm">Mode: {mode}</p>
-    </div>
-  )
-}
-

package/packages/cli/vendor/src/showcase/premium/metric-grid/index.ts

@@ -1,2 +0,0 @@
-export { MetricGridShowcase } from "./showcase"
-export { metricGridMock } from "./mock"

package/packages/cli/vendor/src/showcase/premium/metric-grid/mock.ts

@@ -1,28 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const metricGridMock: ComponentDemoMock = {
-  code: `import { MetricGrid } from "tembro"
-
-const items = [
-  { key: "users", label: "Users", value: "2,410", description: "Last 30 days" },
-  { key: "revenue", label: "Revenue", value: "$132k", description: "Compared with last month" },
-  { key: "errors", label: "Errors", value: "3", description: "Attention required" },
-]
-
-export function Example() {
-  return <MetricGrid items={items} columns={3} />
-}`,
-  highlights: ["Dashboard-ready KPI tiles", "Tone-based urgency states", "Compact mode", "Composable label and trend"],
-  relatedBlockSlugs: ["dashboard-starter", "crm-dashboard", "users-table"],
-  scenarios: [
-    { title: "Overview dashboards", description: "Show high-level metrics above charts and tables." },
-    { title: "Loading states", description: "Replace values with placeholders while fetching real data." },
-    { title: "Empty states", description: "Render no metrics with layout preserved and user messaging outside." },
-  ],
-  capabilityNotes: [
-    "Use meaningful `description` for quick interpretation and trend context.",
-    "Keep the number of columns tied to viewport width and readability.",
-    "Use `compact` for dense cards in dense dashboard toolbars.",
-  ],
-}
-

package/packages/cli/vendor/src/showcase/premium/metric-grid/showcase.tsx

@@ -1,70 +0,0 @@
-import * as React from "react"
-
-import { BarChart, Button, ChartFrame, ChartLegend, DonutChart, MetricGrid } from "@/index"
-
-import type { ComponentDemoProps } from "../types"
-
-const items = [
-  { key: "users", label: "Users", value: "2,410", description: "Last 30 days", tone: "success" as const, trend: "+12%" },
-  { key: "revenue", label: "Revenue", value: "$132k", description: "Compared with last month", tone: "info" as const, trend: "+8.4%" },
-  { key: "errors", label: "Errors", value: "3", description: "Immediate follow up", tone: "danger" as const },
-  { key: "churn", label: "Churn", value: "1.8%", description: "Within target", tone: "warning" as const },
-]
-
-const columns = [2, 3, 4] as const
-
-export function MetricGridShowcase({ mode }: ComponentDemoProps) {
-  const [compact, setCompact] = React.useState(false)
-  const [columnCount, setColumnCount] = React.useState<(2 | 3 | 4)>(3)
-
-  return (
-    <div className="space-y-4">
-      {mode === "playground" ? (
-        <div className="flex flex-wrap gap-2">
-          <Button size="sm" variant={compact ? "outline" : "default"} onClick={() => setCompact((value) => !value)}>
-            {compact ? "Use spacious" : "Use compact"}
-          </Button>
-          {columns.map((size) => (
-            <Button key={size} size="sm" variant={columnCount === size ? "default" : "outline"} onClick={() => setColumnCount(size)}>
-              {size} cols
-            </Button>
-          ))}
-        </div>
-      ) : null}
-
-      <MetricGrid items={items} columns={columnCount} compact={compact} />
-      <div className="grid gap-4 xl:grid-cols-2">
-        <ChartFrame title="Category performance" description="Bar chart shares the same token palette.">
-          <BarChart
-            data={[
-              { label: "CRM", value: 42 },
-              { label: "Finance", value: 31 },
-              { label: "Auth", value: -8 },
-              { label: "Forms", value: 26 },
-            ]}
-          />
-        </ChartFrame>
-        <ChartFrame title="Traffic split" description="Donut, legend and KPI blocks stay visually aligned.">
-          <div className="grid justify-items-center gap-4">
-            <DonutChart
-              centerValue="68%"
-              centerLabel="Usage"
-              data={[
-                { label: "Dashboard", value: 42 },
-                { label: "Forms", value: 18 },
-                { label: "Reports", value: 8 },
-              ]}
-            />
-            <ChartLegend
-              data={[
-                { label: "Dashboard", value: 42 },
-                { label: "Forms", value: 18 },
-                { label: "Reports", value: 8 },
-              ]}
-            />
-          </div>
-        </ChartFrame>
-      </div>
-    </div>
-  )
-}

package/packages/cli/vendor/src/showcase/premium/modal-shell/index.ts

@@ -1,3 +0,0 @@
-export { ModalShellShowcase } from "./showcase"
-export { modalShellMock } from "./mock"
-

package/packages/cli/vendor/src/showcase/premium/modal-shell/mock.ts

@@ -1,55 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const modalShellMock: ComponentDemoMock = {
-  code: `import { useState } from "react"
-import { Badge, Button, Input, ModalShell } from "tembro"
-
-export function Example() {
-  const [open, setOpen] = useState(false)
-
-  return (
-    <div>
-      <Button onClick={() => setOpen(true)}>Create workspace</Button>
-      <ModalShell
-        open={open}
-        onOpenChange={setOpen}
-        title="Create workspace"
-        description="Collect a name and visibility before generating a share token."
-        size="md"
-        footer={
-          <div className="flex justify-end gap-2">
-            <Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
-            <Button onClick={() => setOpen(false)}>Create</Button>
-          </div>
-        }
-      >
-        <label className="space-y-2 text-sm aui-text-subtle">
-          <span>Workspace name</span>
-          <Input defaultValue="Marketing portal" />
-        </label>
-      </ModalShell>
-    </div>
-  )
-}`,
-  htmlCode: `<button data-slot="modal-shell-trigger">Open modal</button>`,
-  cliCommand: "npx tembro add modal-shell",
-  highlights: [
-    "Controlled modal shell",
-    "Reusable form shell layout",
-    "Footer actions and close handling",
-    "Stable when used for short workflows",
-  ],
-  relatedBlockSlugs: ["settings-form", "users-table", "crm-dashboard"],
-  scenarios: [
-    { title: "Workspace creator", description: "Use modal shell for focused create/edit forms." },
-    { title: "Info-only overlay", description: "Render readonly summaries without mutating data." },
-    { title: "Decision panel", description: "Keep action buttons consistently placed in the footer slot." },
-    { title: "Size control", description: "Use `size` to avoid accidental cramped content in compact overlays." },
-  ],
-  capabilityNotes: [
-    "ModalShell is a wrapper for focused interactions that should remain small and explicit.",
-    "Prefer controlled open state from parent so route transitions and API calls stay predictable.",
-    "Use footer slot for confirm/cancel; avoid embedding form submission in untracked triggers.",
-    "Close button behavior should always be deterministic for accessibility and keyboard flows.",
-  ],
-}

package/packages/cli/vendor/src/showcase/premium/modal-shell/showcase.tsx

@@ -1,93 +0,0 @@
-import * as React from "react"
-
-import { Badge, Button, Input, ModalShell } from "@/index"
-
-import type { ComponentDemoProps } from "../types"
-
-const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
-
-export function ModalShellShowcase({ mode }: ComponentDemoProps) {
-  const [open, setOpen] = React.useState(false)
-  const [infoOpen, setInfoOpen] = React.useState(false)
-
-  return (
-    <div className="space-y-0">
-      <section className="pb-6">
-        <div className="flex flex-col gap-6 xl:flex-row xl:items-end xl:justify-between">
-          <div className="max-w-xl">
-            <p className="text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted">Modal shell</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Frame the modal, not the business logic</h3>
-            <p className="mt-3 text-sm leading-6 aui-text-muted">Use `ModalShell` when the route owns data and actions but needs one reusable modal frame.</p>
-          </div>
-
-          <div className="grid gap-3 sm:grid-cols-3 xl:min-w-[360px] xl:max-w-[420px]">
-            <div className="rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3">
-              <p className="text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted">Modes</p>
-              <p className="mt-2 text-lg font-semibold aui-text-strong">2</p>
-            </div>
-            <div className="rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3">
-              <p className="text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted">Use for</p>
-              <p className="mt-2 text-lg font-semibold aui-text-strong">Short forms</p>
-            </div>
-            <div className="rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3">
-              <p className="text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted">Route</p>
-              <p className="mt-2 text-lg font-semibold aui-text-strong">{mode === "playground" ? "Interactive" : "Docs"}</p>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <section className={panelClass}>
-        <div className="flex flex-wrap gap-3">
-          <Button onClick={() => setOpen(true)}>Create workspace</Button>
-          <Button variant="outline" onClick={() => setInfoOpen(true)}>Open info modal</Button>
-          <Badge variant="outline">Controlled shell</Badge>
-        </div>
-      </section>
-
-      <section className={panelClass}>
-        <div className="border-y border-[color:var(--aui-divider)]">
-          {[
-            "Keep mutations and side effects outside the shell component.",
-            "Use small, single-purpose content inside the modal body.",
-            "If the screen owns multiple steps, use a bigger route pattern instead.",
-          ].map((item) => (
-            <div key={item} className="border-b border-[color:var(--aui-divider)] py-3 text-sm leading-6 aui-text-muted last:border-b-0">
-              {item}
-            </div>
-          ))}
-        </div>
-      </section>
-
-      <ModalShell
-        open={open}
-        onOpenChange={setOpen}
-        title="Create workspace"
-        description="Keep this action scoped, controlled, and recoverable."
-        size="md"
-        footer={
-          <div className="flex w-full justify-end gap-2">
-            <Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
-            <Button onClick={() => setOpen(false)}>Create</Button>
-          </div>
-        }
-      >
-        <label className="space-y-2 text-sm aui-text-strong">
-          <span>Workspace name</span>
-          <Input defaultValue="Acme workspace" />
-        </label>
-      </ModalShell>
-
-      <ModalShell
-        open={infoOpen}
-        onOpenChange={setInfoOpen}
-        title="Read-only details"
-        description="Good for status, policy notes, and compact confirmation text."
-        size="sm"
-        footer={<Button className="w-full" onClick={() => setInfoOpen(false)}>Done</Button>}
-      >
-        <p className="text-sm aui-text-muted">Use a shell modal for small, single-purpose interactions with clear scope.</p>
-      </ModalShell>
-    </div>
-  )
-}

package/packages/cli/vendor/src/showcase/premium/money-input/index.ts

@@ -1,2 +0,0 @@
-export { MoneyInputShowcase } from "./showcase"
-export { moneyInputMock } from "./mock"

package/packages/cli/vendor/src/showcase/premium/money-input/mock.ts

@@ -1,48 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const moneyInputMock: ComponentDemoMock = {
-  code: `import { useState } from "react"
-import { Input } from "tembro"
-
-export function Example() {
-  const [value, setValue] = useState<number | null>(2990.5)
-  const [raw, setRaw] = useState("$2,990.50")
-
-  return (
-    <div className="space-y-3">
-      <Input
-        kind="money"
-        value={value}
-        onValueChange={(nextValue, rawValue) => {
-          setValue(nextValue)
-          setRaw(rawValue)
-        }}
-        prefix="$"
-        inputMode="decimal"
-        step={0.5}
-      />
-      <p className="text-sm aui-text-subtle">
-        Numeric value: <strong>{value === null ? "invalid" : value}</strong>
-      </p>
-      <p className="text-sm aui-text-muted">Raw input: {raw}</p>
-      <p className="text-sm aui-text-muted">Use inputMode to match expected currency input source.</p>
-    </div>
-  )
-}`,
-  htmlCode: '<label for="money">Budget</label><div>$<input id="money" inputmode="decimal" type="text" /></div>',
-  cliCommand: "npx tembro add input",
-  highlights: ["Currency prefix/suffix", "Numeric payload", "Invalid text handling", "Custom keyboard mode"],
-  relatedBlockSlugs: ["settings-form", "users-table", "crm-dashboard"],
-  scenarios: [
-    { title: "Pricing", description: "Capture billing amounts with stable parsing and formatting behavior." },
-    { title: "Raw display vs parsed value", description: "Keep display string separate from numeric payload." },
-    { title: "Invalid input", description: "Handle temporary invalid values while editing before form submit." },
-    { title: "Negative guard", description: "Prevent or allow negatives based on financial rules." },
-  ],
-  capabilityNotes: [
-    "Use `onValueChange` for canonical numeric value and raw typed value.",
-    "Pair `MoneyInput` with schema validation to reject negative or extreme values.",
-    "Use prefix/suffix that matches locale and accounting conventions.",
-    "In multi-currency systems, normalize and convert right after parsing.",
-  ],
-}

package/packages/cli/vendor/src/showcase/premium/money-input/showcase.tsx

@@ -1,21 +0,0 @@
-import { useState } from "react"
-
-import { Input } from "@/index"
-
-export function MoneyInputShowcase() {
-  const [value, setValue] = useState<number | null>(125.75)
-
-  return (
-    <div className="space-y-3">
-      <Input
-        kind="money"
-        value={value}
-        onValueChange={(nextValue: number | null) => setValue(nextValue)}
-        prefix="$"
-      />
-      <p className="aui-text-subtle text-sm">
-        Parsed amount: {value === null ? "invalid" : `$${value.toFixed(2)}`}
-      </p>
-    </div>
-  )
-}

package/packages/cli/vendor/src/showcase/premium/number-input/index.ts

@@ -1,2 +0,0 @@
-export { NumberInputShowcase } from "./showcase"
-export { numberInputMock } from "./mock"

package/packages/cli/vendor/src/showcase/premium/number-input/mock.ts

@@ -1,52 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const numberInputMock: ComponentDemoMock = {
-  code: `import { useState } from "react"
-import { Input } from "tembro"
-
-export function Example() {
-  const [value, setValue] = useState<number | null>(14)
-  const [raw, setRaw] = useState("14")
-
-  return (
-    <div className="space-y-3">
-      <Input
-        kind="number"
-        value={value}
-        onNumberChange={(nextValue) => {
-          setValue(nextValue)
-          setRaw(String(nextValue ?? ""))
-        }}
-        onChange={(event) => setRaw(event.target.value)}
-        min={0}
-        max={100}
-        step={5}
-        allowEmpty
-      />
-      <p className="text-sm aui-text-subtle">
-        Parsed numeric: <strong>{value === null ? "unset" : value}</strong>
-      </p>
-      <p className="text-sm aui-text-muted">Raw text: {raw}</p>
-      <p className="text-sm aui-text-muted">
-        Try entering invalid chars to see how parse and clamp rules apply.
-      </p>
-    </div>
-  )
-}`,
-  htmlCode: `<label for="example-number">Amount</label><input id="example-number" inputmode="decimal" type="text" />`,
-  cliCommand: "npx tembro add input",
-  highlights: ["Numeric parsing", "Min/max constraints", "Decimal steps", "allowEmpty fallback"],
-  relatedBlockSlugs: ["settings-form", "users-table", "crm-dashboard"],
-  scenarios: [
-    { title: "Budget field", description: "Keep values inside business bounds while editing quickly." },
-    { title: "Invalid input", description: "Use parser path to avoid NaN leaks into form data." },
-    { title: "Stepper steps", description: "Use step values that match your business precision." },
-    { title: "Uncontrolled mode", description: "Use defaultValue and HTML value when rapid typing is enough." },
-  ],
-  capabilityNotes: [
-    "The component supports controlled numeric state and keeps string display behavior under user editing.",
-    "Use `min`/`max` with `clamp` semantics when downstream systems expect bounded values.",
-    "`allowEmpty` helps avoid forced 0 when field is cleared temporarily.",
-    "Prefer controlled usage in forms that need instant validation and submit-time serialization.",
-  ],
-}

package/packages/cli/vendor/src/showcase/premium/number-input/showcase.tsx

@@ -1,14 +0,0 @@
-import { useState } from "react"
-
-import { Input } from "@/index"
-
-export function NumberInputShowcase() {
-  const [value, setValue] = useState<number | null>(12)
-
-  return (
-    <div className="space-y-3">
-      <Input kind="number" value={value} onNumberChange={setValue} min={0} max={30} step={1} />
-      <p className="aui-text-subtle text-sm">Current value: {value ?? "unset"}</p>
-    </div>
-  )
-}

package/packages/cli/vendor/src/showcase/premium/page-container/index.ts

@@ -1,2 +0,0 @@
-export { PageContainerShowcase } from "./showcase"
-export { pageContainerMock } from "./mock"

package/packages/cli/vendor/src/showcase/premium/page-container/mock.ts

@@ -1,25 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const pageContainerMock: ComponentDemoMock = {
-  code: `import { PageContainer } from "tembro"
-
-export function Example() {
-  return (
-    <PageContainer size="lg">
-      <div className="rounded-md border p-4">Page content stays constrained here.</div>
-    </PageContainer>
-  )
-}`,
-  highlights: ["Consistent max-width wrapper", "Size presets", "Useful for dashboard and content pages", "Simple integration with layout components"],
-  scenarios: [
-    { title: "Global page shell", description: "Use as the default wrapper inside AppShell main slot." },
-    { title: "Long-form content", description: "Use smaller sizes for forms and full width for tables." },
-    { title: "Readable spacing", description: "Pair with responsive spacing utilities from surrounding layouts." },
-  ],
-  capabilityNotes: [
-    "Prefer `lg` or `xl` for heavy forms and tables.",
-    "Use `full` when content needs entire width, such as charts.",
-    "Wrap page-level cards in a single PageContainer to keep rhythm uniform.",
-  ],
-}
-

package/packages/cli/vendor/src/showcase/premium/page-container/showcase.tsx

@@ -1,50 +0,0 @@
-import * as React from "react"
-
-import { Badge, PageContainer } from "@/index"
-
-import type { ComponentDemoProps } from "../types"
-
-type PageSize = "default" | "sm" | "md" | "lg" | "xl" | "full"
-
-const sizes: PageSize[] = ["default", "sm", "md", "lg", "xl", "full"]
-
-const containerClassName = "rounded-xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4"
-
-export function PageContainerShowcase({ mode }: ComponentDemoProps) {
-  const [size, setSize] = React.useState<PageSize>("lg")
-
-  return (
-    <div className="space-y-5">
-      <section className="rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6">
-        <div className="flex flex-col gap-6 xl:flex-row xl:items-start xl:justify-between">
-          <div className="max-w-xl">
-            <p className="text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted">Content width</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Page container should stabilize layout width</h3>
-            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
-              This wrapper is not decorative. It keeps headings, forms, tables, and body copy aligned so every route does not invent its own max-width.
-            </p>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="outline" className="rounded-full">Width scale</Badge>
-            <Badge variant="outline" className="rounded-full">Content rhythm</Badge>
-          </div>
-        </div>
-      </section>
-
-      {mode === "playground" ? (
-        <div className="flex flex-wrap gap-2">
-          {sizes.map((entry) => (
-            <button key={entry} className={`rounded-full px-4 py-2 text-sm ${size === entry ? "bg-[color:var(--aui-surface-strong)] text-[color:var(--aui-surface-strong-foreground)]" : "border border-[color:var(--aui-divider)] aui-text-muted"}`} onClick={() => setSize(entry)}>
-              {entry}
-            </button>
-          ))}
-        </div>
-      ) : null}
-
-      <PageContainer size={size} className={containerClassName}>
-        <p className="aui-text-muted text-sm">Active size: <span className="font-medium aui-text-strong">{size}</span></p>
-        <p className="aui-text-muted mt-2 text-sm">Use this wrapper to keep internal sections aligned across pages and avoid route-by-route width drift.</p>
-      </PageContainer>
-    </div>
-  )
-}

package/packages/cli/vendor/src/showcase/premium/page-header/index.ts

@@ -1,2 +0,0 @@
-export { PageHeaderShowcase } from "./showcase"
-export { pageHeaderMock } from "./mock"