tembro 3.1.17 → 4.0.1

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

@@ -1,47 +0,0 @@
-import type * as React from "react"
-
-export type ComponentDemoState = {
-  textValue: string
-  textareaValue: string
-  checked: boolean
-  switchOn: boolean
-  selectValue: string
-  badgeVariant: "default" | "secondary" | "soft" | "destructive" | "outline" | "ghost" | "link"
-  cardCompact: boolean
-  activeTab: "overview" | "activity" | "settings"
-}
-
-export type ComponentDemoMock = {
-  code: string
-  htmlCode?: string
-  cliCommand?: string
-  highlights: string[]
-  relatedBlockSlugs?: string[]
-  scenarios: Array<{
-    title: string
-    description: string
-  }>
-  capabilityNotes?: string[]
-}
-
-export type ComponentDemoProps = {
-  state: ComponentDemoState
-  setState: (patch: Partial<ComponentDemoState>) => void
-  mode: "docs" | "playground" | "components"
-}
-
-export type ComponentDemoBundle = {
-  mock: ComponentDemoMock
-  Showcase: (props: ComponentDemoProps) => React.ReactNode
-}
-
-export const defaultComponentDemoState: ComponentDemoState = {
-  textValue: "Tembro",
-  textareaValue: "Controlled preview content for the selected component.",
-  checked: true,
-  switchOn: true,
-  selectValue: "starter",
-  badgeVariant: "default",
-  cardCompact: false,
-  activeTab: "overview",
-}

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

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

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

@@ -1,24 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const typographyMock: ComponentDemoMock = {
-  code: `import { Blockquote, Heading, Mark, Text } from "tembro"
-
-export function Example() {
-  return (
-    <div className="space-y-2">
-      <Heading level={3}>Product page</Heading>
-      <Text muted>
-        <Mark>Typography</Mark> is part of every polished UI.
-      </Text>
-      <Blockquote>Keep hierarchy tight, readable, and reusable.</Blockquote>
-    </div>
-  )
-}`,
-  cliCommand: "npx tembro add typography",
-  highlights: ["Heading hierarchy", "Muted and default text sizes", "Blockquote and mark patterns for content-heavy pages"],
-  scenarios: [
-    { title: "Docs pages", description: "Use components for stable copy rhythm." },
-    { title: "Blog layouts", description: "Keep large and small text consistent." },
-    { title: "Help center", description: "Support spoilers and highlighted snippets." },
-  ],
-}

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

@@ -1,24 +0,0 @@
-import { Blockquote, Heading, Mark, Spoiler, SpoilerSummary, Text } from "@/components/display/typography"
-
-export function TypographyShowcase() {
-  return (
-    <div className="space-y-4">
-      <Heading level={1}>Typography Surface</Heading>
-      <Text size="lg" muted>
-        This page shows practical text primitives that scale from copy to section copy and long-form notes.
-      </Text>
-      <Heading level={2}>Status</Heading>
-      <Text>
-        You can emphasize words with <Mark>Mark</Mark> while keeping semantic text sizes.
-      </Text>
-      <Blockquote>Readable prose starts from stable hierarchy, not from random utility classes.</Blockquote>
-      <Spoiler>
-        <SpoilerSummary>Expand typography details</SpoilerSummary>
-        <div className="mt-2 space-y-2 text-sm text-muted-foreground">
-          <Text size="sm">Use level + muted controls for rhythm across pages.</Text>
-          <Text>Use blockquotes for citations and customer notes.</Text>
-        </div>
-      </Spoiler>
-    </div>
-  )
-}

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

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

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

@@ -1,32 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const virtualListMock: ComponentDemoMock = {
-  code: `import { VirtualList } from "tembro"
-
-const events = Array.from({ length: 10000 }, (_, index) => ({
-  id: index + 1,
-  title: \`Audit event \${index + 1}\`,
-}))
-
-export function Example() {
-  return (
-    <VirtualList
-      items={events}
-      height={420}
-      estimateSize={56}
-      getItemKey={(event) => event.id}
-      renderItem={(event) => <div>{event.title}</div>}
-    />
-  )
-}`,
-  cliCommand: "npx tembro add virtual-list",
-  highlights: [
-    "Renders only visible DOM nodes",
-    "Dynamic row measurement and overscan",
-    "Stable item keys and accessible set metadata",
-  ],
-  scenarios: [
-    { title: "Audit log", description: "Keep tens of thousands of events responsive in a fixed viewport." },
-    { title: "Search results", description: "Render large result sets without mounting every result card." },
-  ],
-}

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

@@ -1,41 +0,0 @@
-import * as React from "react"
-
-import { Badge, VirtualList } from "@/index"
-
-const events = Array.from({ length: 10_000 }, (_, index) => ({
-  id: index + 1,
-  title: `Audit event ${index + 1}`,
-  actor: ["Azamat", "Madina", "Jasur", "Nodira"][index % 4],
-  tone: index % 7 === 0 ? "Review" : "Completed",
-}))
-
-export function VirtualListShowcase() {
-  const [range, setRange] = React.useState("Calculating visible range…")
-
-  return (
-    <div className="space-y-3">
-      <div className="flex items-center justify-between gap-3 text-sm text-muted-foreground">
-        <span>10,000 records</span>
-        <span>{range}</span>
-      </div>
-      <VirtualList
-        items={events}
-        height={420}
-        estimateSize={58}
-        getItemKey={(event) => event.id}
-        onRangeChange={({ startIndex, endIndex }) => {
-          setRange(`Mounted window: ${startIndex + 1}–${endIndex + 1}`)
-        }}
-        renderItem={(event) => (
-          <div className="flex min-h-14 items-center justify-between gap-3 rounded-lg border bg-card px-4 py-2.5 shadow-sm">
-            <div className="min-w-0">
-              <div className="truncate text-sm font-medium">{event.title}</div>
-              <div className="text-xs text-muted-foreground">Actor: {event.actor}</div>
-            </div>
-            <Badge variant={event.tone === "Review" ? "outline" : "secondary"}>{event.tone}</Badge>
-          </div>
-        )}
-      />
-    </div>
-  )
-}

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

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

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

@@ -1,41 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const wizardMock: ComponentDemoMock = {
-  code: `import * as React from "react"
-import { Wizard } from "tembro"
-
-const steps = [
-  { id: "profile", title: "Profile", description: "Basic account" },
-  { id: "team", title: "Team", description: "Invite members" },
-  { id: "finish", title: "Finish", description: "Review setup" },
-]
-
-export function Example() {
-  const [step, setStep] = React.useState("profile")
-
-  return (
-    <Wizard
-      steps={steps}
-      currentStep={step}
-      onStepChange={setStep}
-      onNext={() => setStep(step === "profile" ? "team" : "finish")}
-      onPrevious={() => setStep(step === "finish" ? "team" : "profile")}
-      onFinish={() => console.log("complete")}
-    >
-      <div>Current step: {step}</div>
-    </Wizard>
-  )
-}`,
-  cliCommand: "npx tembro add wizard",
-  highlights: ["Stepper and footer controls in one workflow", "Controlled current step", "Clickable step navigation", "Custom content slots"],
-  scenarios: [
-    { title: "Onboarding", description: "Guide users through profile, team and confirmation screens." },
-    { title: "Multi-step forms", description: "Keep form sections small while preserving progress context." },
-    { title: "Setup flows", description: "Review final state before enabling the submit action." },
-  ],
-  capabilityNotes: [
-    "Keep currentStep controlled so route or form state can persist.",
-    "Disable future steps when the user must complete validation first.",
-    "Keep the footer action labels specific to the workflow.",
-  ],
-}

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

@@ -1,88 +0,0 @@
-import * as React from "react"
-
-import { Badge, Button, Wizard } from "@/index"
-
-const steps = [
-  { id: "profile", title: "Profile", description: "Basic account" },
-  { id: "team", title: "Team", description: "Invite members" },
-  { id: "finish", title: "Finish", description: "Review setup" },
-]
-
-const contentByStep: Record<string, { title: string; description: string; checks: string[] }> = {
-  profile: {
-    title: "Workspace profile",
-    description: "Collect the public name, default role and workspace context before moving forward.",
-    checks: ["Name added", "Default role selected", "Timezone confirmed"],
-  },
-  team: {
-    title: "Invite the team",
-    description: "Add collaborators and decide who can manage billing, releases and support queues.",
-    checks: ["Owner invited", "Support role ready", "Billing access limited"],
-  },
-  finish: {
-    title: "Review and launch",
-    description: "Confirm the setup summary and finish only when required details are complete.",
-    checks: ["Profile verified", "Team access reviewed", "Launch checklist complete"],
-  },
-}
-
-export function WizardShowcase() {
-  const [currentStep, setCurrentStep] = React.useState("profile")
-  const [finished, setFinished] = React.useState(false)
-  const currentIndex = Math.max(steps.findIndex((step) => step.id === currentStep), 0)
-  const content = contentByStep[currentStep] ?? contentByStep.profile
-
-  return (
-    <div className="rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5 sm:p-6">
-      <div className="mb-5 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-        <div>
-          <p className="text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted">Guided workflow</p>
-          <h3 className="mt-2 text-2xl font-semibold tracking-tight aui-text-strong">Wizard with controlled progress</h3>
-        </div>
-        <Badge variant={finished ? "soft" : "outline"}>{finished ? "Finished" : `Step ${currentIndex + 1} of ${steps.length}`}</Badge>
-      </div>
-
-      <Wizard
-        steps={steps.map((step, index) => ({ ...step, completed: index < currentIndex }))}
-        currentStep={currentStep}
-        onStepChange={(stepId) => {
-          setCurrentStep(stepId)
-          setFinished(false)
-        }}
-        onNext={() => {
-          const next = steps[Math.min(currentIndex + 1, steps.length - 1)]
-          setCurrentStep(next.id)
-          setFinished(false)
-        }}
-        onPrevious={() => {
-          const previous = steps[Math.max(currentIndex - 1, 0)]
-          setCurrentStep(previous.id)
-          setFinished(false)
-        }}
-        onFinish={() => setFinished(true)}
-        finishLabel="Launch"
-      >
-        <section className="rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4">
-          <h4 className="text-lg font-semibold aui-text-strong">{content.title}</h4>
-          <p className="mt-2 text-sm leading-6 aui-text-muted">{content.description}</p>
-          <div className="mt-4 grid gap-2 sm:grid-cols-3">
-            {content.checks.map((check) => (
-              <div key={check} className="rounded-xl border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] px-3 py-2 text-sm aui-text-muted">
-                {check}
-              </div>
-            ))}
-          </div>
-        </section>
-      </Wizard>
-
-      <div className="mt-5 flex flex-wrap gap-2">
-        <Button size="sm" variant="outline" onClick={() => { setCurrentStep("profile"); setFinished(false) }}>
-          Reset flow
-        </Button>
-        <Button size="sm" variant="outline" onClick={() => setCurrentStep("finish")}>
-          Jump to review
-        </Button>
-      </div>
-    </div>
-  )
-}

package/packages/cli/vendor/src/showcase/preview-catalog.tsx

@@ -1,65 +0,0 @@
-export type PreviewSurfaceTone = "dashboard" | "table" | "auth" | "product" | "command" | "calendar" | "upload"
-
-export type PreviewSurfaceRecord = {
-  slug: string
-  title: string
-  command: string
-  code: string
-  tone: PreviewSurfaceTone
-}
-
-export const previewSurfaceCatalog: PreviewSurfaceRecord[] = [
-  {
-    slug: "dashboard-01",
-    title: "Dashboard with sidebar",
-    command: "npx tembro init --template next --defaults\nnpx tembro add sidebar statistic data-table",
-    code: `import { Sidebar } from "tembro"\n\nexport function Dashboard01() {\n  return <Sidebar />\n}`,
-    tone: "dashboard",
-  },
-  {
-    slug: "table-01",
-    title: "Advanced invoice table",
-    command: "npx tembro add data-table",
-    code: `import { DataTable } from "tembro"\n\nexport function Table01() {\n  return <DataTable columns={columns} data={rows} />\n}`,
-    tone: "table",
-  },
-  {
-    slug: "auth-01",
-    title: "Authentication screen",
-    command: "npx tembro add input button",
-    code: `import { Button, Input } from "tembro"\n\nexport function Auth01() {\n  return (\n    <div className="space-y-3">\n      <Input placeholder="Email" type="email" />\n      <Input placeholder="Password" type="password" />\n      <Button>Sign in</Button>\n    </div>\n  )\n}`,
-    tone: "auth",
-  },
-  {
-    slug: "product-01",
-    title: "Commerce product detail",
-    command: "npx tembro add badge button",
-    code: `import { Badge, Button } from "tembro"\n\nexport function Product01() {\n  return (\n    <div className="space-y-2">\n      <Badge>Featured</Badge>\n      <div>Starter kit bundle</div>\n      <Button>Buy now</Button>\n    </div>\n  )\n}`,
-    tone: "product",
-  },
-  {
-    slug: "command-01",
-    title: "Command palette",
-    command: "npx tembro add command-palette",
-    code: `import { CommandPalette } from "tembro"\n\nexport function Command01() {\n  return <CommandPalette />\n}`,
-    tone: "command",
-  },
-  {
-    slug: "calendar-01",
-    title: "Calendar and date picker",
-    command: "npx tembro add calendar date-picker",
-    code: `import { Calendar } from "tembro"\n\nexport function Calendar01() {\n  return <Calendar />\n}`,
-    tone: "calendar",
-  },
-  {
-    slug: "upload-01",
-    title: "Upload workspace",
-    command: "npx tembro add file-upload image-upload",
-    code: `import { FileUpload } from "tembro"\n\nexport function Upload01() {\n  return <FileUpload />\n}`,
-    tone: "upload",
-  },
-]
-
-export function getPreviewSurface(slug: string) {
-  return previewSurfaceCatalog.find((item) => item.slug === slug) ?? null
-}

package/packages/cli/vendor/src/showcase/preview-compositions.tsx

@@ -1,37 +0,0 @@
-import * as React from "react"
-
-import { InfoCard } from "@/components/display/info-card"
-import { FileUpload } from "@/components/upload/file-upload"
-
-type PreviewStatCardProps = {
-  title?: React.ReactNode
-  value?: React.ReactNode
-  description?: React.ReactNode
-  trend?: { value: React.ReactNode; tone?: string }
-  helperText?: React.ReactNode
-  icon?: React.ReactNode
-}
-
-export function PreviewStatCard({ title, value, description, trend, helperText, icon }: PreviewStatCardProps) {
-  return <InfoCard eyebrow={title} title={value} description={description} icon={icon} status={trend?.value} content={helperText} density="compact" />
-}
-
-type PreviewPropertyItem = { key: string; label: React.ReactNode; value: React.ReactNode; description?: React.ReactNode }
-
-export function PreviewPropertyGrid({ items }: { items: PreviewPropertyItem[]; columns?: 1 | 2 | 3 | 4; bordered?: boolean }) {
-  return (
-    <dl className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
-      {items.map((item) => (
-        <div key={item.key} className="min-w-0 border p-3">
-          <dt className="text-xs text-muted-foreground">{item.label}</dt>
-          <dd className="mt-1 break-words text-sm font-medium">{item.value}</dd>
-          {item.description ? <p className="mt-1 text-xs text-muted-foreground">{item.description}</p> : null}
-        </div>
-      ))}
-    </dl>
-  )
-}
-
-export function PreviewFileDropzone({ label, description, accept }: { label?: React.ReactNode; description?: React.ReactNode; accept?: string }) {
-  return <FileUpload files={[]} onFilesChange={() => undefined} accept={accept} dropzoneLabel={label} dropzoneDescription={description} showFileList={false} />
-}