tembro 3.1.17 → 4.0.0

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

@@ -1,206 +0,0 @@
-import * as React from "react"
-import type { ChangeEvent } from "react"
-
-import { MailIcon } from "lucide-react"
-
-import { Button, Input } from "@/index"
-
-import type { ComponentDemoProps } from "../types"
-
-import { inputDemoFields } from "./data"
-
-const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
-
-export function InputShowcase({ state, setState }: ComponentDemoProps) {
-  const searchField = inputDemoFields[0]
-  const hasValue = state.textValue.trim().length > 0
-  const [activeMode, setActiveMode] = React.useState<"search" | "profile">("search")
-  const activeLabel = activeMode === "search" ? searchField.label : "Profile contact"
-  const activePlaceholder = activeMode === "search" ? searchField.placeholder : "owner@azamatui.dev"
-  const activeType = activeMode === "search" ? "text" : "email"
-  const [moneyValue, setMoneyValue] = React.useState<number | null>(1250)
-  const [quantityValue, setQuantityValue] = React.useState<number | null>(3)
-  const [phoneValue, setPhoneValue] = React.useState("+998 90 123 45 67")
-  const [dateValue, setDateValue] = React.useState("2026-07-13")
-  const [clearableValue, setClearableValue] = React.useState("Tembro")
-
-  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">Text entry</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">One field should define the rhythm</h3>
-            <p className="mt-3 text-sm leading-6 aui-text-muted">Show the real input first, then verify disabled and read-only states around it.</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">Mode</p>
-              <p className="mt-2 text-lg font-semibold capitalize aui-text-strong">{activeMode}</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">Value</p>
-              <p className="mt-2 truncate text-lg font-semibold aui-text-strong">{hasValue ? state.textValue : "Empty"}</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">State</p>
-              <p className="mt-2 text-lg font-semibold aui-text-strong">{hasValue ? "Filled" : "Ready"}</p>
-            </div>
-          </div>
-        </div>
-
-        <div className="mt-6 flex flex-wrap gap-2">
-          <Button size="sm" variant={activeMode === "search" ? "default" : "outline"} onClick={() => setActiveMode("search")}>
-            Search field
-          </Button>
-          <Button size="sm" variant={activeMode === "profile" ? "default" : "outline"} onClick={() => setActiveMode("profile")}>
-            Email field
-          </Button>
-        </div>
-      </section>
-
-      <section className={panelClass}>
-        <div className="grid gap-6 xl:grid-cols-[minmax(0,0.92fr)_minmax(0,1.08fr)]">
-          <div className="space-y-4">
-            <div>
-              <p className="text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted">Primary field</p>
-              <h4 className="mt-2 text-xl font-semibold tracking-tight aui-text-strong">
-                {activeMode === "search" ? "Search-driven input" : "Profile contact field"}
-              </h4>
-            </div>
-
-            <div className="rounded-[20px] border border-[color:var(--aui-divider)] p-4">
-              <p className="text-sm font-medium aui-text-muted">{activeLabel}</p>
-              <div className="mt-3">
-                <Input
-                  aria-label={activeLabel}
-                  value={state.textValue}
-                  onChange={(event: ChangeEvent<HTMLInputElement>) => setState({ textValue: event.target.value })}
-                  placeholder={activePlaceholder}
-                  type={activeType}
-                  kind={activeMode === "search" ? "search" : "text"}
-                  className="w-full"
-                />
-              </div>
-            </div>
-
-            <div className="grid gap-3 sm:grid-cols-2">
-              <div className="rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3">
-                <p className="text-xs aui-text-muted">Email sample</p>
-                <div className="mt-2">
-                  <Input defaultValue={inputDemoFields[1].defaultValue} type="email" aria-label={inputDemoFields[1].label} />
-                </div>
-              </div>
-              <div className="rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3">
-                <p className="text-xs aui-text-muted">Disabled sample</p>
-                <div className="mt-2">
-                  <Input value={inputDemoFields[2].defaultValue} disabled aria-label={inputDemoFields[2].label} />
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div className="space-y-4">
-            <div className="flex items-center gap-3">
-              <MailIcon className="size-4 aui-text-muted" />
-              <div>
-                <p className="text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted">Read only</p>
-                <p className="mt-1 text-sm aui-text-muted">{inputDemoFields[3].label}</p>
-              </div>
-            </div>
-
-            <Input defaultValue={inputDemoFields[3].defaultValue} readOnly aria-label={inputDemoFields[3].label} />
-
-            <div className="border-y border-[color:var(--aui-divider)]">
-              {[
-                "Default field should stay legible before any decorators or wrappers are added.",
-                "Disabled state should look intentionally inactive without losing structure.",
-                "Read-only fields must remain easy to scan and copy.",
-                "Avoid extra shells when the real input already provides the right chrome.",
-              ].map((note) => (
-                <div key={note} className="border-b border-[color:var(--aui-divider)] py-3 text-sm leading-6 aui-text-muted last:border-b-0">
-                  {note}
-                </div>
-              ))}
-            </div>
-
-            <div className="flex flex-wrap gap-2">
-              <Button type="button" size="sm" onClick={() => setState({ textValue: "Dashboard" })}>
-                Fill sample
-              </Button>
-              <Button type="button" size="sm" variant="outline" onClick={() => setState({ textValue: "finance@azamat.dev" })}>
-                Email sample
-              </Button>
-              <Button type="button" size="sm" variant="secondary" onClick={() => setState({ textValue: "" })}>
-                Clear
-              </Button>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <section className={panelClass} data-slot="input-kind-showcase">
-        <div className="max-w-2xl">
-          <p className="text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted">Unified kind API</p>
-          <h4 className="mt-2 text-xl font-semibold tracking-tight aui-text-strong">One import, every production input</h4>
-          <p className="mt-2 text-sm leading-6 aui-text-muted">
-            Change only the <code>kind</code> prop. Validation, disabled state, value callbacks and keyboard behavior stay in the same public component.
-          </p>
-        </div>
-
-        <div className="mt-6 grid gap-x-6 gap-y-5 md:grid-cols-2 xl:grid-cols-3">
-          <label className="grid gap-2 text-sm font-medium aui-text-strong">
-            Password
-            <Input kind="password" defaultValue="tembro-2026" autoComplete="current-password" />
-            <span className="text-xs font-normal aui-text-muted">Built-in visibility toggle and caps-lock feedback.</span>
-          </label>
-
-          <label className="grid gap-2 text-sm font-medium aui-text-strong">
-            Numeric threshold
-            <Input kind="number" defaultValue={24} min={0} max={100} step={1} />
-            <span className="text-xs font-normal aui-text-muted">Native limits with normalized numeric callbacks.</span>
-          </label>
-
-          <label className="grid gap-2 text-sm font-medium aui-text-strong">
-            Budget
-            <Input kind="money" value={moneyValue} onValueChange={setMoneyValue} prefix="$" suffix="USD" />
-            <span className="text-xs font-normal aui-text-muted">Current value: {moneyValue ?? "empty"}</span>
-          </label>
-
-          <label className="grid gap-2 text-sm font-medium aui-text-strong">
-            Phone
-            <Input kind="phone" value={phoneValue} onValueChange={setPhoneValue} />
-            <span className="text-xs font-normal aui-text-muted">Normalized value: {phoneValue || "empty"}</span>
-          </label>
-
-          <label className="grid gap-2 text-sm font-medium aui-text-strong">
-            Release date
-            <Input kind="date" value={dateValue} onValueChange={setDateValue} />
-            <span className="text-xs font-normal aui-text-muted">ISO value: {dateValue || "empty"}</span>
-          </label>
-
-          <label className="grid gap-2 text-sm font-medium aui-text-strong">
-            Seats
-            <Input kind="quantity" value={quantityValue} onValueChange={setQuantityValue} min={1} max={12} />
-            <span className="text-xs font-normal aui-text-muted">Use the buttons or type a value directly.</span>
-          </label>
-        </div>
-
-        <div className="mt-6 border-t border-[color:var(--aui-divider)] pt-5">
-          <label className="grid max-w-xl gap-2 text-sm font-medium aui-text-strong">
-            Clearable project name
-            <Input
-              kind="clearable"
-              value={clearableValue}
-              onValueChange={setClearableValue}
-              placeholder="Enter a project name"
-              clearOnEscape
-            />
-            <span className="text-xs font-normal aui-text-muted">Use the clear control or press Escape while the field is focused.</span>
-          </label>
-        </div>
-      </section>
-    </div>
-  )
-}

package/packages/cli/vendor/src/showcase/premium/input/types.ts

@@ -1,6 +0,0 @@
-export type InputDemoField = {
-  kind: "search" | "email" | "disabled" | "readOnly" | "toolbar"
-  label: string
-  placeholder?: string
-  defaultValue?: string
-}

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

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

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

@@ -1,20 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const jsonInputMock: ComponentDemoMock = {
-  code: `import { JsonInput } from "tembro"
-
-export function Example() {
-  return <JsonInput value='{"name":"tembro"}' />
-}`,
-  cliCommand: "npx tembro add json-input",
-  highlights: [
-    "Validates JSON on edit",
-    "Returns parsed payload and validity in callback",
-    "Great for admin panels accepting structured config",
-  ],
-  scenarios: [
-    { title: "Webhooks", description: "Validate headers/payload examples before save." },
-    { title: "Feature flags", description: "Let power users edit nested JSON settings." },
-  ],
-}
-

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

@@ -1,28 +0,0 @@
-import * as React from "react"
-
-import { JsonInput } from "@/index"
-
-export function JsonInputShowcase() {
-  const [value, setValue] = React.useState(`{
-  "name": "Tembro",
-  "version": 1
-}`)
-
-  const [isValid, setIsValid] = React.useState(true)
-
-  return (
-    <div className="space-y-3">
-      <JsonInput
-        value={value}
-        onValueChange={(_, __, valid) => {
-          setIsValid(valid)
-        }}
-        onChange={(event) => setValue(event.target.value)}
-      />
-      <p className={`text-sm ${isValid ? "text-emerald-600" : "text-destructive"}`}>
-        {isValid ? "JSON is valid" : "JSON is invalid"}
-      </p>
-    </div>
-  )
-}
-

package/packages/cli/vendor/src/showcase/premium/kanban-board/index.ts

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

package/packages/cli/vendor/src/showcase/premium/kanban-board/mock.ts

@@ -1,43 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const kanbanBoardMock: ComponentDemoMock = {
-  code: `import * as React from "react"
-import { KanbanBoard } from "tembro"
-
-const initialColumns = [
-  {
-    key: "todo",
-    title: "To Do",
-    cards: [
-      { key: "a", title: "Prototype", description: "Build initial modal flow." },
-      { key: "b", title: "Audit", description: "Review token contrast." },
-    ],
-  },
-  {
-    key: "progress",
-    title: "In progress",
-    cards: [{ key: "c", title: "Implement", description: "Add demo variants." }],
-  },
-]
-
-export function Example() {
-  const [columns, setColumns] = React.useState(initialColumns)
-
-  return (
-    <KanbanBoard
-      columns={columns}
-      onColumnsChange={setColumns}
-    />
-  )
-}`,
-  cliCommand: "npx tembro add kanban",
-  highlights: [
-    "Cross-column pointer, touch and keyboard movement",
-    "Controlled and uncontrolled board state",
-    "Empty-lane drops, cancel handling and drag overlays",
-  ],
-  scenarios: [
-    { title: "Task board", description: "Keep tasks in grouped lanes with minimal state." },
-    { title: "Issue triage", description: "Move and reorder issues across real workflow states." },
-  ],
-}

package/packages/cli/vendor/src/showcase/premium/kanban-board/showcase.tsx

@@ -1,61 +0,0 @@
-import * as React from "react"
-
-import { Button, KanbanBoard } from "@/index"
-import type { KanbanColumn } from "@/components/display/kanban"
-
-const baseColumns = [
-  {
-    key: "todo",
-    title: "To do",
-    description: "Incoming tasks",
-    cards: [
-      { key: "a", title: "Audit inputs", description: "Collect edge cases", meta: "high" },
-      { key: "b", title: "Review docs", description: "Ensure API completeness", meta: "medium" },
-    ],
-  },
-  {
-    key: "done",
-    title: "Done",
-    description: "Completed work",
-    cards: [],
-  },
-  {
-    key: "inProgress",
-    title: "In progress",
-    description: "Current sprint",
-    cards: [{ key: "c", title: "Add demos", description: "Finish missing routes", meta: "urgent" }],
-  },
-]
-
-export function KanbanBoardShowcase() {
-  const [columns, setColumns] = React.useState<KanbanColumn[]>(baseColumns)
-  const [selected, setSelected] = React.useState<string | undefined>(undefined)
-
-  return (
-    <div className="space-y-4">
-      <div className="flex gap-2">
-        <Button size="sm" onClick={() => setColumns((current) => [...current, { key: `new-${Date.now()}`, title: "New", cards: [] }])}>
-          Add lane
-        </Button>
-      </div>
-      <KanbanBoard
-        columns={columns}
-        onColumnsChange={setColumns}
-        onCardClick={(card) => setSelected(String(card.key))}
-        renderCard={(card, _column, { handle }) => (
-          <div
-            className="rounded-lg border bg-card p-3"
-          >
-            <div className="flex items-start justify-between gap-2">
-              <div className="font-medium text-sm">{card.title}</div>
-              {handle}
-            </div>
-            <div className="mt-1 text-xs text-muted-foreground">{card.description}</div>
-            {card.meta && <div className="mt-2 text-xs text-foreground/80">{card.meta}</div>}
-          </div>
-        )}
-      />
-      {selected && <div className="rounded-md border border-dashed p-3 text-sm text-muted-foreground">Selected card: {selected}</div>}
-    </div>
-  )
-}

package/packages/cli/vendor/src/showcase/premium/kbd/index.ts

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

package/packages/cli/vendor/src/showcase/premium/kbd/mock.ts

@@ -1,29 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const kbdMock: ComponentDemoMock = {
-  code: `import { Kbd } from "tembro"
-
-export function Example() {
-  return (
-    <div className="flex items-center gap-2 text-sm">
-      Press <Kbd>Ctrl</Kbd> + <Kbd>K</Kbd> to open command search.
-    </div>
-  )
-}`,
-  htmlCode: `<kbd data-slot="kbd">Ctrl</kbd>`,
-  cliCommand: "npx tembro add kbd",
-  highlights: ["Shortcut tokens", "Size variants", "Inline hints", "Command palette labels"],
-  relatedBlockSlugs: ["dashboard-starter", "crm-dashboard", "settings-form"],
-  scenarios: [
-    { title: "Command palette", description: "Show shortcuts inline without turning them into bulky badges." },
-    { title: "Toolbar hints", description: "Useful in dense product actions where key combos speed up frequent tasks." },
-    { title: "Inline docs", description: "Clarify keyboard-driven paths near the action itself." },
-  ],
-  capabilityNotes: [
-    "Use Kbd for short shortcut tokens only.",
-    "Keep key labels consistent with platform guidance when possible.",
-    "Avoid using Kbd as a general-purpose badge replacement.",
-    "Inline command hints should stay secondary to the main action label.",
-  ],
-}
-

package/packages/cli/vendor/src/showcase/premium/kbd/showcase.tsx

@@ -1,61 +0,0 @@
-import * as React from "react"
-
-import { Badge, Button, Kbd } from "@/index"
-
-const panelClass =
-  "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5"
-
-const variants = ["default", "outline", "ghost"] as const
-
-export function KbdShowcase() {
-  const [variant, setVariant] = React.useState<(typeof variants)[number]>("default")
-
-  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">Keyboard hints</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Kbd should make shortcuts readable at a glance</h3>
-            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
-              Keep shortcut tokens compact and subordinate to the action they describe.
-            </p>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="outline" className="rounded-full">Inline token</Badge>
-            <Badge variant="outline" className="rounded-full">Variants</Badge>
-            <Badge variant="outline" className="rounded-full">Command hint</Badge>
-          </div>
-        </div>
-
-        <div className="mt-6 grid gap-4 xl:grid-cols-[1fr_1fr]">
-          <div className={`${panelClass} space-y-4`}>
-            <p className="text-sm font-medium aui-text-muted">Command pattern</p>
-            <p className="aui-text-strong text-sm">Press <Kbd variant={variant}>Ctrl</Kbd> + <Kbd variant={variant}>K</Kbd> to open global search.</p>
-            <p className="aui-text-strong text-sm">Press <Kbd variant={variant}>G</Kbd> then <Kbd variant={variant}>C</Kbd> to jump to components.</p>
-          </div>
-          <div className={panelClass}>
-            <p className="text-sm font-medium aui-text-muted">Current variant</p>
-            <p className="mt-3 text-lg font-semibold aui-text-strong">{variant}</p>
-          </div>
-        </div>
-      </section>
-
-      <section className={panelClass}>
-        <div className="flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between">
-          <div>
-            <p className="text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted">Live state</p>
-            <h4 className="mt-2 text-lg font-semibold aui-text-strong">Active variant: {variant}</h4>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            {variants.map((entry) => (
-              <Button key={entry} type="button" size="sm" variant={variant === entry ? "default" : "secondary"} onClick={() => setVariant(entry)}>
-                {entry}
-              </Button>
-            ))}
-          </div>
-        </div>
-      </section>
-    </div>
-  )
-}

package/packages/cli/vendor/src/showcase/premium/list/index.ts

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

package/packages/cli/vendor/src/showcase/premium/list/mock.ts

@@ -1,32 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const listMock: ComponentDemoMock = {
-  code: `import { Avatar, Badge, List } from "tembro"
-
-export function Example() {
-  return (
-    <List
-      items={[
-        {
-          key: "invoice",
-          title: "Invoice review",
-          description: "Pending finance approval",
-          avatar: <Avatar name="Finance" size="sm" />,
-          extra: <Badge variant="outline">Pending</Badge>,
-        },
-      ]}
-    />
-  )
-}`,
-  cliCommand: "npx tembro add list",
-  highlights: [
-    "Compact title/description rows with optional avatar and extra slot",
-    "Clickable row pattern without building a table",
-    "Useful for inboxes, activity queues, and settings menus",
-  ],
-  scenarios: [
-    { title: "Queue", description: "Show work items in a compact operational stack." },
-    { title: "Settings list", description: "Present navigable options without a heavy sidebar." },
-    { title: "Recent activity", description: "Render quick summaries with status and person context." },
-  ],
-}

package/packages/cli/vendor/src/showcase/premium/list/showcase.tsx

@@ -1,62 +0,0 @@
-import { Avatar, Badge, List } from "@/index"
-
-const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
-
-const rows = [
-  {
-    key: "invoice",
-    title: "Invoice #4821 review",
-    description: "Finance approval is still waiting on updated tax evidence.",
-    avatar: <Avatar name="Finance Team" size="sm" shape="rounded" />,
-    extra: <Badge variant="outline">Pending</Badge>,
-  },
-  {
-    key: "deploy",
-    title: "Release publish window",
-    description: "Documentation and component demo checks passed for the next deploy.",
-    avatar: <Avatar name="Release Ops" size="sm" />,
-    extra: <Badge variant="secondary">Ready</Badge>,
-  },
-  {
-    key: "design",
-    title: "Design audit feedback",
-    description: "Spacing and token inconsistencies were reduced across the public catalog.",
-    avatar: <Avatar name="Design" size="sm" />,
-    extra: <Badge variant="outline">3 notes</Badge>,
-  },
-]
-
-export function ListShowcase() {
-  return (
-    <div className="space-y-0">
-      <section className="pb-6">
-        <p className="text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted">Installed display primitive</p>
-        <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">List is for compact operational rows</h3>
-        <p className="mt-3 max-w-2xl text-sm leading-6 aui-text-muted">
-          Use it when a full table would be too heavy, but a simple stack of cards would waste space.
-        </p>
-      </section>
-
-      <section className={panelClass}>
-        <div className="grid gap-6 xl:grid-cols-[1fr_360px]">
-          <div>
-            <p className="text-lg font-semibold aui-text-strong">Operational queue</p>
-            <p className="mt-2 max-w-xl text-sm leading-6 aui-text-muted">
-              The exported List keeps title, context and status aligned without forcing table columns.
-            </p>
-            <List className="mt-5" items={rows} />
-          </div>
-
-          <div className="rounded-xl border border-[color:var(--aui-divider)] p-4">
-            <p className="text-sm font-semibold aui-text-strong">Guidance</p>
-            <div className="mt-3 space-y-3 text-sm leading-6 aui-text-muted">
-              <p>Use List when content is read top-to-bottom and each row can tolerate flexible height.</p>
-              <p>If sorting, bulk actions, or stable columns become important, move up to DataTable.</p>
-              <p>The `extra` slot should stay compact so the title remains the strongest visual anchor.</p>
-            </div>
-          </div>
-        </div>
-      </section>
-    </div>
-  )
-}

package/packages/cli/vendor/src/showcase/premium/loading-state/index.ts

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

package/packages/cli/vendor/src/showcase/premium/loading-state/mock.ts

@@ -1,21 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const loadingStateMock: ComponentDemoMock = {
-  code: `import { LoadingState } from "tembro"
-
-export function Example() {
-  return <LoadingState label="Loading metrics" description="Preparing dashboard widgets and chart data." />
-}`,
-  highlights: ["Simple loading copy", "Section-level placeholder", "Can be combined with skeletons", "Suitable for overlay and inline usage"],
-  scenarios: [
-    { title: "Data fetch", description: "Show while loading table or card-level content." },
-    { title: "Background sync", description: "Display while async actions are in progress." },
-    { title: "Upload wait", description: "Use between step transitions in wizards." },
-  ],
-  capabilityNotes: [
-    "Keep descriptions specific to what users are waiting for.",
-    "Use one source of truth for loading copy across sections.",
-    "Prefer replacing entire section with loading state over mixing partial stale data.",
-  ],
-}
-

package/packages/cli/vendor/src/showcase/premium/loading-state/showcase.tsx

@@ -1,54 +0,0 @@
-import * as React from "react"
-
-import { Badge, Button, LoadingState } from "@/index"
-
-import type { ComponentDemoProps } from "../types"
-
-const labels: string[] = ["Loading metrics", "Loading table", "Loading details", "Loading export"]
-const descriptions = [
-  "Preparing dashboard widgets and chart data.",
-  "Fetching list rows with filters applied.",
-  "Waiting for content details from the API.",
-  "Generating a local export file.",
-]
-
-export function LoadingStateShowcase({ mode }: ComponentDemoProps) {
-  const [index, setIndex] = React.useState(0)
-  const [showSecondary, setShowSecondary] = React.useState(mode === "playground")
-
-  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">Pending work</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Loading state should explain what is happening</h3>
-            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
-              The label and description should tell the user which part of the page is waiting and why. Generic loading with no context is weak documentation.
-            </p>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="outline" className="rounded-full">Scoped loading</Badge>
-            <Badge variant="outline" className="rounded-full">Clear label</Badge>
-          </div>
-        </div>
-      </section>
-
-      {mode === "playground" ? (
-        <div className="flex flex-wrap gap-2">
-          <Button size="sm" variant="outline" onClick={() => setShowSecondary((value) => !value)}>
-            {showSecondary ? "Hide secondary" : "Show secondary"}
-          </Button>
-          {labels.map((entry, idx) => (
-            <Button key={entry} size="sm" variant={index === idx ? "default" : "outline"} onClick={() => setIndex(idx)}>
-              {entry}
-            </Button>
-          ))}
-        </div>
-      ) : null}
-
-      <LoadingState label={labels[index]} description={descriptions[index]} />
-      {showSecondary ? <LoadingState variant="progress" progress={68} label={`${labels[index]} (progress)`} description="This is a second loading area inside the same page." /> : null}
-    </div>
-  )
-}