tembro 2.0.2 → 2.0.4

package/packages/cli/vendor/src/showcase/premium/skeleton-form/mock.ts

@@ -1,20 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const skeletonFormMock: ComponentDemoMock = {
-  code: `import { SkeletonForm } from "@/index"
-
-export function Example() {
-  return <SkeletonForm fields={3} showTitle columns={2} />
-}`,
-  cliCommand: "npx tembro add skeleton-form",
-  highlights: [
-    "Form-first loading states that preserve field rhythm",
-    "Supports one- or two-column layouts",
-    "Optional title and action skeleton areas",
-  ],
-  scenarios: [
-    { title: "Settings", description: "Keep form layout stable while waiting for data." },
-    { title: "Create form", description: "Match final structure without exposing layout jitter." },
-  ],
-}
-

package/packages/cli/vendor/src/showcase/premium/skeleton-form/showcase.tsx

@@ -1,34 +0,0 @@
-import * as React from "react"
-
-import { Button, SkeletonForm } from "@/index"
-
-export function SkeletonFormShowcase() {
-  const [fields, setFields] = React.useState(4)
-  const [columns, setColumns] = React.useState<1 | 2>(1)
-  const [showActions, setShowActions] = React.useState(true)
-
-  return (
-    <div className="space-y-3">
-      <div className="flex flex-wrap gap-2">
-        <Button size="sm" variant={fields === 3 ? "default" : "outline"} onClick={() => setFields(3)}>
-          3 fields
-        </Button>
-        <Button size="sm" variant={fields === 4 ? "default" : "outline"} onClick={() => setFields(4)}>
-          4 fields
-        </Button>
-        <Button size="sm" variant={columns === 1 ? "default" : "outline"} onClick={() => setColumns(1)}>
-          1 column
-        </Button>
-        <Button size="sm" variant={columns === 2 ? "default" : "outline"} onClick={() => setColumns(2)}>
-          2 columns
-        </Button>
-        <Button size="sm" variant={showActions ? "default" : "outline"} onClick={() => setShowActions((value) => !value)}>
-          {showActions ? "Actions" : "No actions"}
-        </Button>
-      </div>
-
-      <SkeletonForm fields={fields} columns={columns} showActions={showActions} />
-    </div>
-  )
-}
-

package/packages/cli/vendor/src/showcase/premium/skeleton-table/index.ts

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

package/packages/cli/vendor/src/showcase/premium/skeleton-table/mock.ts

@@ -1,20 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const skeletonTableMock: ComponentDemoMock = {
-  code: `import { SkeletonTable } from "@/index"
-
-export function Example() {
-  return <SkeletonTable rows={4} columns={4} showHeader showToolbar />
-}`,
-  cliCommand: "npx tembro add skeleton-table",
-  highlights: [
-    "Compact placeholder for async table loading",
-    "Supports header and action bar variants",
-    "Good fit during first-load and refetch states",
-  ],
-  scenarios: [
-    { title: "Data pages", description: "Replace with table body after fetch completes." },
-    { title: "Search results", description: "Keep layout stable while filters run." },
-  ],
-}
-

package/packages/cli/vendor/src/showcase/premium/skeleton-table/showcase.tsx

@@ -1,37 +0,0 @@
-import * as React from "react"
-
-import { Button, SkeletonTable } from "@/index"
-
-export function SkeletonTableShowcase() {
-  const [showToolbar, setShowToolbar] = React.useState(true)
-  const [columns, setColumns] = React.useState(4)
-  const [rows, setRows] = React.useState(4)
-
-  return (
-    <div className="space-y-3">
-      <div className="flex flex-wrap gap-2">
-        <Button size="sm" variant={showToolbar ? "default" : "outline"} onClick={() => setShowToolbar((value) => !value)}>
-          Toolbar
-        </Button>
-        <Button size="sm" onClick={() => setColumns(3)} variant="outline">
-          3 cols
-        </Button>
-        <Button size="sm" onClick={() => setColumns(4)} variant="outline">
-          4 cols
-        </Button>
-        <Button size="sm" onClick={() => setColumns(5)} variant="outline">
-          5 cols
-        </Button>
-        <Button size="sm" onClick={() => setRows(3)} variant="outline">
-          3 rows
-        </Button>
-        <Button size="sm" onClick={() => setRows(6)} variant="outline">
-          6 rows
-        </Button>
-      </div>
-
-      <SkeletonTable rows={rows} columns={columns} showHeader showToolbar={showToolbar} />
-    </div>
-  )
-}
-

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

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

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

@@ -1,25 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const stackMock: ComponentDemoMock = {
-  code: `import { Button, Stack } from "@/index"
-
-export function Example() {
-  return (
-    <Stack gap="lg" splitAfter={<Button size="sm">Secondary</Button>}>
-      <div className="text-sm">Primary action</div>
-      <div className="text-sm">Status line</div>
-    </Stack>
-  )
-}`,
-  cliCommand: "npx tembro add stack",
-  highlights: [
-    "Flexible vertical layout helper",
-    "Split insert points without extra wrappers",
-    "Consistent spacing with simple gap presets",
-  ],
-  scenarios: [
-    { title: "Form stack", description: "Stable form section spacing." },
-    { title: "Card body", description: "Build readable content groups quickly." },
-    { title: "Settings page", description: "Keep labels and controls in order." },
-  ],
-}

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

@@ -1,22 +0,0 @@
-import { Button, Divider, Stack } from "@/index"
-
-export function StackShowcase() {
-  return (
-    <div className="space-y-4">
-      <Stack gap="sm">
-        <p className="text-sm text-muted-foreground">Small gap stack keeps controls close.</p>
-        <Button size="sm">Primary</Button>
-        <Button size="sm" variant="outline">
-          Secondary
-        </Button>
-      </Stack>
-
-      <Divider />
-
-      <Stack gap="xl" splitAfter={<p className="text-sm text-muted-foreground">Action barrier</p>}>
-        <p className="text-sm">Large gap for grouped blocks.</p>
-        <p className="text-sm">SplitAfter inserts a stable divider point without nested wrappers.</p>
-      </Stack>
-    </div>
-  )
-}

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

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

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

@@ -1,27 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const tagListMock: ComponentDemoMock = {
-  code: `import * as React from "react"
-import { TagList } from "@/index"
-
-export function Example() {
-  const [items, setItems] = React.useState([
-    { key: "react", label: "React" },
-    { key: "typescript", label: "TypeScript" },
-    { key: "design-system", label: "Design system" },
-  ])
-
-  return <TagList items={items} removable onRemove={(item) => setItems((list) => list.filter((entry) => entry.key !== item.key))} />
-}`,
-  cliCommand: "npx tembro add tag-list",
-  highlights: [
-    "Compact badge-based collection of labels",
-    "Optional remove actions for editable taxonomies",
-    "Useful for skills, filters, product areas, and metadata chips",
-  ],
-  scenarios: [
-    { title: "Skill chips", description: "Show categorized labels without building a full tag input field." },
-    { title: "Selected filters", description: "Summarize active states at the top of a page." },
-    { title: "Editable metadata", description: "Allow small remove actions on existing labels." },
-  ],
-}

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

@@ -1,55 +0,0 @@
-import * as React from "react"
-
-import { TagList } from "@/index"
-
-const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
-
-const initialItems = [
-  { key: "react", label: "React" },
-  { key: "typescript", label: "TypeScript" },
-  { key: "dashboard", label: "Dashboard" },
-  { key: "design-system", label: "Design system" },
-  { key: "release", label: "Release" },
-]
-
-export function TagListShowcase() {
-  const [items, setItems] = React.useState(initialItems)
-
-  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">TagList shows existing labels, not text entry</h3>
-        <p className="mt-3 max-w-2xl text-sm leading-6 aui-text-muted">
-          Use TagList to display or lightly edit known labels. If the user must type new values, move to TagInput instead.
-        </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">Editable metadata chips</p>
-            <p className="mt-2 max-w-xl text-sm leading-6 aui-text-muted">
-              Remove actions should stay small and secondary so the tags remain readable as content first.
-            </p>
-            <div className="mt-5 rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4">
-              <TagList
-                items={items}
-                removable
-                onRemove={(item) => setItems((current) => current.filter((entry) => entry.key !== item.key))}
-              />
-            </div>
-          </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>TagList is display-first. It should not impersonate a full input when creation is not available.</p>
-              <p>Use `max` when pages need a condensed summary and overflow should collapse into a count chip.</p>
-            </div>
-          </div>
-        </div>
-      </section>
-    </div>
-  )
-}

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

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

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

@@ -1,26 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const watermarkMock: ComponentDemoMock = {
-  code: `import { Watermark } from "@/index"
-
-export function Example() {
-  return (
-    <Watermark text="PRIVATE BETA">
-      <div className="grid h-28 place-items-center rounded-xl border bg-card">
-        Document surface
-      </div>
-    </Watermark>
-  )
-}`,
-  cliCommand: "npx tembro add watermark",
-  highlights: [
-    "Optional watermark for document and export previews",
-    "Works on any container content",
-    "Configurable watermark text and overlay style",
-  ],
-  scenarios: [
-    { title: "Confidential docs", description: "Show usage watermark without blocking interaction." },
-    { title: "Design previews", description: "Brand mark on generated screenshots." },
-    { title: "Shared exports", description: "Visual indicator for internal staging artifacts." },
-  ],
-}

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

@@ -1,26 +0,0 @@
-import * as React from "react"
-
-import { Button, Watermark } from "@/index"
-
-const labels = ["tembro", "STAGING", "DRAFT", "PRIVATE BETA"]
-
-export function WatermarkShowcase() {
-  const [label, setLabel] = React.useState(labels[0])
-
-  return (
-    <div className="space-y-4">
-      <div className="flex flex-wrap gap-2">
-        {labels.map((item) => (
-          <Button key={item} size="sm" variant={label === item ? "default" : "outline"} onClick={() => setLabel(item)}>
-            {item}
-          </Button>
-        ))}
-      </div>
-      <Watermark text={label}>
-        <div className="grid h-36 place-items-center rounded-xl border bg-card p-5 text-sm text-muted-foreground">
-          This content keeps full interaction while visually marking environment.
-        </div>
-      </Watermark>
-    </div>
-  )
-}