tembro 1.0.0

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

@@ -0,0 +1,21 @@
+import type { ComponentDemoMock } from "../types"
+
+export const tabsMock: ComponentDemoMock = {
+  code: `import { useState } from "react"\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from "tembro"\n\nexport function Example() {\n  const [value, setValue] = useState("overview")\n\n  return (\n    <Tabs value={value} onValueChange={setValue} defaultValue="overview">\n      <TabsList>\n        <TabsTrigger value="overview">Overview</TabsTrigger>\n        <TabsTrigger value="activity">Activity</TabsTrigger>\n        <TabsTrigger value="settings">Settings</TabsTrigger>\n      </TabsList>\n      <TabsContent value="overview">Overview panel with KPIs.</TabsContent>\n      <TabsContent value="activity">Activity timeline and history.</TabsContent>\n      <TabsContent value="settings">Settings controls and workspace preferences.</TabsContent>\n    </Tabs>\n  )\n}\n\n// Use Tabs for local content sections.\n// For route transitions, prefer router-based tabs to persist deep links.`,
+  cliCommand: "npx tembro add tabs",
+  highlights: ["Segmented navigation", "Panel switching", "Controlled value", "Settings sections", "Keyboard interaction"],
+  relatedBlockSlugs: ["dashboard-starter", "crm-dashboard", "settings-form"],
+  scenarios: [
+    { title: "Sectioned detail page", description: "Swap content panels without navigating away." },
+    { title: "Settings layout", description: "Split preferences into clear topical groups." },
+    { title: "Reporting pages", description: "Use tabs for overview, activity and settings views." },
+    { title: "Template detail route", description: "Keep multiple previews in one route with explicit sections." },
+  ],
+  capabilityNotes: [
+    "Supports segmented triggers and controlled content panels.",
+    "Fits settings, reporting and detail-page information architecture.",
+    "Show default selected state and content swaps clearly.",
+    "Use with local content sections; use route tabs when deep-linking is required.",
+  ],
+}
+

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

@@ -0,0 +1,82 @@
+import { Button, Tabs, TabsContent, TabsList, TabsTrigger } from "@/index"
+
+import type { ComponentDemoProps } from "../types"
+
+import { tabsDemoPanels } from "./data"
+
+const panelClass =
+  "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5"
+
+export function TabsShowcase({ state, setState }: ComponentDemoProps) {
+  const activePanel = tabsDemoPanels.find((panel) => panel.value === state.activeTab)
+
+  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">
+        <p className="text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted">View switching</p>
+        <h3 className="aui-text-strong mt-3 text-2xl font-semibold tracking-tight">Tabs should read like page sections</h3>
+        <p className="aui-text-muted mt-3 max-w-2xl text-sm leading-6">Overview, activity and settings stay separated without turning the screen into a navigation maze.</p>
+      </section>
+
+      <section className="grid gap-3 md:grid-cols-3">
+        <div className={panelClass}>
+          <p className="text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted">Current tab</p>
+          <p className="mt-3 text-lg font-semibold aui-text-strong">{activePanel?.label}</p>
+          <p className="mt-2 text-sm leading-6 aui-text-muted">The selected view should feel like a real section change, not a tiny state toggle.</p>
+        </div>
+        <div className={panelClass}>
+          <p className="text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted">Sections</p>
+          <p className="mt-3 text-lg font-semibold aui-text-strong">{tabsDemoPanels.length} surfaces</p>
+          <p className="mt-2 text-sm leading-6 aui-text-muted">Use a small number of high-signal tabs so the layout stays readable.</p>
+        </div>
+        <div className={panelClass}>
+          <p className="text-xs font-semibold uppercase tracking-[0.24em] aui-text-muted">Pattern</p>
+          <p className="mt-3 text-lg font-semibold aui-text-strong">Page sections</p>
+          <p className="mt-2 text-sm leading-6 aui-text-muted">Tabs work best when each panel owns a distinct slice of the workflow.</p>
+        </div>
+      </section>
+
+      <div className={panelClass}>
+        <Tabs value={state.activeTab} onValueChange={(value: string) => setState({ activeTab: value as ComponentDemoProps["state"]["activeTab"] })}>
+          <TabsList>
+            {tabsDemoPanels.map((panel) => (
+              <TabsTrigger key={panel.value} value={panel.value}>{panel.label}</TabsTrigger>
+            ))}
+          </TabsList>
+          {tabsDemoPanels.map((panel) => (
+            <TabsContent key={panel.value} value={panel.value} className="aui-text-muted mt-4 border-t border-[color:var(--aui-divider)] pt-4 text-sm leading-6">
+              {panel.content}
+            </TabsContent>
+          ))}
+        </Tabs>
+      </div>
+
+      <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 tab: {activePanel?.label}
+            </h4>
+            <p className="mt-2 text-sm leading-6 aui-text-muted">
+              Change tabs above or jump directly to a common product section.
+            </p>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            {tabsDemoPanels.map((panel) => (
+              <Button
+                key={panel.value}
+                type="button"
+                size="sm"
+                variant={state.activeTab === panel.value ? "default" : "secondary"}
+                onClick={() => setState({ activeTab: panel.value })}
+              >
+                {panel.label}
+              </Button>
+            ))}
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}

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

@@ -0,0 +1,5 @@
+export type TabsDemoPanel = {
+  value: "overview" | "activity" | "settings"
+  label: string
+  content: string
+}

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

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

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

@@ -0,0 +1,28 @@
+import type { ComponentDemoMock } from "../types"
+
+export const tagMock: ComponentDemoMock = {
+  code: `import { Tag } from "@/index"
+
+export function Example() {
+  return (
+    <div className="flex flex-wrap gap-2">
+      <Tag tone="success">Online</Tag>
+      <Tag tone="warning">Review</Tag>
+      <Tag tone="danger" removable>
+        Remove me
+      </Tag>
+    </div>
+  )
+}`,
+  cliCommand: "npx tembro add tag",
+  highlights: [
+    "Semantic tones for state and status information",
+    "Selectable and removable tags",
+    "Works in compact metadata strips",
+  ],
+  scenarios: [
+    { title: "Statuses", description: "Represent task lifecycle with tone variants." },
+    { title: "Filters", description: "Display and clear active filters quickly." },
+    { title: "Topics", description: "Render labels without overloading metadata cards." },
+  ],
+}

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

@@ -0,0 +1,37 @@
+import * as React from "react"
+
+import { Button, Tag } from "@/index"
+
+export function TagShowcase() {
+  const all = [
+    { key: "team", label: "Team", tone: "info" as const },
+    { key: "ready", label: "Ready", tone: "success" as const },
+    { key: "warn", label: "Warn", tone: "warning" as const },
+    { key: "block", label: "Blocked", tone: "danger" as const },
+  ]
+  const [items, setItems] = React.useState(all)
+
+  const remove = (key: string) => setItems((current) => current.filter((item) => item.key !== key))
+  const reset = () => setItems(all)
+
+  return (
+    <div className="space-y-4">
+      <div className="rounded-lg border border-border bg-card p-4">
+        <div className="mb-4 flex items-center justify-between gap-3">
+          <p className="text-sm font-medium text-foreground">Filter tags</p>
+          <Button size="sm" variant="outline" onClick={reset}>
+            Reset
+          </Button>
+        </div>
+        <div className="flex flex-wrap gap-2">
+          {items.map((item) => (
+            <Tag key={item.key} tone={item.tone} removable onRemove={() => remove(item.key)}>
+              {item.label}
+            </Tag>
+          ))}
+          {items.length === 0 ? <span className="text-sm text-muted-foreground">No filters</span> : null}
+        </div>
+      </div>
+    </div>
+  )
+}

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

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

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

@@ -0,0 +1,29 @@
+import type { ComponentDemoMock } from "../types"
+
+export const tagInputMock: ComponentDemoMock = {
+  code: `import * as React from "react"
+import { TagInput } from "tembro"
+
+export function Example() {
+  const [tags, setTags] = React.useState(["billing", "priority"])
+
+  return (
+    <TagInput
+      value={tags}
+      onValueChange={setTags}
+      maxTags={5}
+    />
+  )
+}`,
+  highlights: ["Add/remove tag chips", "Max tag support", "Backspace remove behavior", "Good for labels, filters, and categorization"],
+  scenarios: [
+    { title: "Record labels", description: "Attach operational tags to invoices, tickets, or users." },
+    { title: "Saved filters", description: "Represent multi-value filter state in a compact input." },
+    { title: "Skill lists", description: "Collect short multi-entry labels without building a custom repeater." },
+  ],
+  capabilityNotes: [
+    "TagInput is for short normalized labels, not long rich text tokens.",
+    "Backspace remove is important when the field is keyboard-heavy.",
+    "Use `maxTags` when the domain has a sensible cap.",
+  ],
+}

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

@@ -0,0 +1,55 @@
+import * as React from "react"
+
+import { Badge, TagInput } from "@/index"
+
+import type { ComponentDemoProps } from "../types"
+
+const panelClass =
+  "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5"
+
+export function TagInputShowcase({ mode }: ComponentDemoProps) {
+  const [tags, setTags] = React.useState(["billing", "priority"])
+
+  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">Token input</p>
+            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">TagInput should make multi-label entry feel lightweight</h3>
+            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
+              Good tag UX means adding, removing, and reviewing short labels without dragging the user into a full form builder.
+            </p>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <Badge variant="outline" className="rounded-full">Multi value</Badge>
+            <Badge variant="outline" className="rounded-full">Keyboard friendly</Badge>
+          </div>
+        </div>
+      </section>
+
+      <section className={panelClass}>
+        <TagInput value={tags} onValueChange={setTags} maxTags={5} />
+      </section>
+
+      <div className="grid gap-4 xl:grid-cols-2">
+        <section className={panelClass}>
+          <p className="text-sm font-medium aui-text-muted">Current tags</p>
+          <p className="mt-3 text-base font-medium aui-text-strong">{tags.join(", ") || "No tags"}</p>
+        </section>
+        <section className={panelClass}>
+          <p className="text-sm font-medium aui-text-muted">Usage note</p>
+          <p className="mt-3 text-sm leading-6 aui-text-muted">
+            Bu component label, quick filter va qisqa metadata tokenlari uchun kuchli. Uzun structured input uchun emas.
+          </p>
+        </section>
+      </div>
+
+      {mode === "playground" ? (
+        <section className={panelClass}>
+          <p className="text-sm aui-text-muted">`Enter` yoki `,` bilan tag qo‘shing. Input bo‘sh bo‘lsa `Backspace` oxirgi tagni o‘chiradi.</p>
+        </section>
+      ) : null}
+    </div>
+  )
+}

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

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

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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,55 @@
+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/textarea/data.ts

@@ -0,0 +1,7 @@
+import type { TextareaDemoField } from "./types"
+
+export const textareaDemoFields: TextareaDemoField[] = [
+  { title: "Primary note", placeholder: "Write a detailed note...", minHeight: "min-h-28", rows: 6 },
+  { title: "Internal changelog draft", defaultValue: "Internal changelog draft...", minHeight: "min-h-20", rows: 4 },
+  { title: "Locked review comment", defaultValue: "Locked review comment", readOnly: true, minHeight: "min-h-20", rows: 3 },
+]

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

@@ -0,0 +1,4 @@
+export { TextareaShowcase } from "./showcase"
+export { textareaMock } from "./mock"
+export { textareaDemoFields } from "./data"
+export type { TextareaDemoField } from "./types"

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

@@ -0,0 +1,42 @@
+import type { ComponentDemoMock } from "../types"
+
+export const textareaMock: ComponentDemoMock = {
+  code: `import { FormEvent, useState } from "react"
+import { Textarea } from "@/index"
+
+export function Example() {
+  const [note, setNote] = useState("")
+  const [error, setError] = useState(false)
+
+  function submit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    setError(note.trim().length < 10)
+  }
+
+  return (
+    <form onSubmit={submit} className="space-y-3">
+      <Textarea rows={6} value={note} onChange={(event) => setNote(event.target.value)} placeholder="Write your message..." />
+      <Textarea rows={4} defaultValue="Internal changelog draft..." />
+      <Textarea readOnly value="Locked review comment" rows={3} />
+      <button type="submit">Submit</button>
+      {error ? <p className="text-sm text-red-600">Please enter at least 10 characters.</p> : null}
+    </form>
+  )
+}`,
+  htmlCode: `<textarea data-slot="textarea" placeholder="Write your message..." rows="6"></textarea>`,
+  cliCommand: "npx tembro add textarea",
+  highlights: ["Long-form notes", "Multiline forms", "Rows/height control", "Validation-friendly error context"],
+  relatedBlockSlugs: ["settings-form", "auth-sign-in", "pricing-section"],
+  scenarios: [
+    { title: "Support notes", description: "Capture longer messages with 6+ rows without layout shift." },
+    { title: "Release notes", description: "Use multiline fields for changelog and update summaries." },
+    { title: "Review comments", description: "Keep readOnly previews for policy or audit style workflows." },
+    { title: "Internal description editor", description: "Combine rows with validation text and section headers." },
+  ],
+  capabilityNotes: [
+    "Designed for multi-line content with enough vertical rhythm for long text.",
+    "Supports controlled/uncontrolled usage with rows customization.",
+    "Should demonstrate empty, filled and read-only states in form contexts.",
+    "Pairs well with form shells and richer editorial patterns.",
+  ],
+}

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

@@ -0,0 +1,107 @@
+import type { ChangeEvent } from "react"
+
+import { Badge, Button, Textarea } from "@/index"
+
+import type { ComponentDemoProps } from "../types"
+
+import { textareaDemoFields } from "./data"
+
+const panelClass =
+  "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5"
+
+export function TextareaShowcase({ state, setState }: ComponentDemoProps) {
+  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">Long-form entry</p>
+            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Textarea should feel calm and readable</h3>
+            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
+              Use it for notes, summaries, and message bodies. The preview should focus on readability, resize behavior, and passive states instead of raw field duplication.
+            </p>
+          </div>
+
+          <div className="flex flex-wrap gap-2">
+            <Badge variant="outline" className="rounded-full">Editable</Badge>
+            <Badge variant="outline" className="rounded-full">Read-only</Badge>
+            <Badge variant="outline" className="rounded-full">Resizable</Badge>
+          </div>
+        </div>
+
+        <div className="mt-6 grid gap-4 xl:grid-cols-[1.12fr_0.88fr]">
+          <div className={panelClass}>
+            <p className="text-sm font-medium aui-text-muted">Internal note</p>
+            <div className="mt-3">
+              <Textarea
+                value={state.textareaValue}
+                onChange={(event: ChangeEvent<HTMLTextAreaElement>) => setState({ textareaValue: event.target.value })}
+                rows={textareaDemoFields[0].rows}
+                className={`${textareaDemoFields[0].minHeight} resize-y`}
+                placeholder={textareaDemoFields[0].placeholder}
+              />
+            </div>
+          </div>
+
+          <div className={panelClass}>
+            <p className="text-sm font-medium aui-text-muted">Current length</p>
+            <p className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">{state.textareaValue.length} chars</p>
+            <p className="mt-2 text-sm leading-6 aui-text-muted">
+              Long text surfaces should stay readable before they become decorative. Keep line-height, contrast, and padding stable as content grows.
+            </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">
+              Draft length: {state.textareaValue.length} characters
+            </h4>
+            <p className="mt-2 text-sm leading-6 aui-text-muted">
+              Fill or clear the note to verify controlled textarea behavior and visual density.
+            </p>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <Button type="button" size="sm" onClick={() => setState({ textareaValue: "Customer prefers weekly status updates and a shorter approval cycle." })}>
+              Fill sample
+            </Button>
+            <Button type="button" size="sm" variant="secondary" onClick={() => setState({ textareaValue: "" })}>
+              Clear
+            </Button>
+          </div>
+        </div>
+      </section>
+
+      <div className="grid gap-4 xl:grid-cols-2">
+        <section className={panelClass}>
+          <p className="text-sm font-medium aui-text-muted">Pre-filled draft</p>
+          <div className="mt-3">
+            <Textarea
+              defaultValue={textareaDemoFields[1].defaultValue}
+              rows={textareaDemoFields[1].rows}
+              className={`${textareaDemoFields[1].minHeight} resize-none`}
+            />
+          </div>
+        </section>
+
+        <section className={panelClass}>
+          <p className="text-sm font-medium aui-text-muted">Read-only copy</p>
+          <div className="mt-3 space-y-3">
+            <Textarea
+              value={textareaDemoFields[2].defaultValue}
+              readOnly={textareaDemoFields[2].readOnly}
+              rows={textareaDemoFields[2].rows}
+              className={`${textareaDemoFields[2].minHeight} resize-none opacity-70`}
+            />
+            <p className="text-sm leading-6 aui-text-muted">
+              Read-only textareas should still be easy to scan and copy without looking like disabled, broken, or low-priority content.
+            </p>
+          </div>
+        </section>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,9 @@
+export type TextareaDemoField = {
+  title: string
+  defaultValue?: string
+  placeholder?: string
+  disabled?: boolean
+  readOnly?: boolean
+  rows?: number
+  minHeight: string
+}

package/packages/cli/vendor/src/showcase/premium/time-picker/index.ts

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

package/packages/cli/vendor/src/showcase/premium/time-picker/mock.ts

@@ -0,0 +1,22 @@
+import type { ComponentDemoMock } from "../types"
+
+export const timePickerMock: ComponentDemoMock = {
+  code: `import { DateTimePicker, TimePicker, TimeRangePicker } from "@/index"
+
+export function Example() {
+  return (
+    <div className="space-y-2">
+      <TimePicker label="Start" value="08:30" />
+      <DateTimePicker label="Planned at" value="2026-07-07T08:30" />
+      <TimeRangePicker from="09:00" to="17:00" />
+    </div>
+  )
+}`,
+  cliCommand: "npx tembro add time-picker",
+  highlights: ["Time, datetime, and range pickers in one family", "Native input controls with consistent style"],
+  scenarios: [
+    { title: "Planning UI", description: "Define working hours and event time." },
+    { title: "Appointment form", description: "Capture precise temporal inputs for calendars and logs." },
+  ],
+}
+

package/packages/cli/vendor/src/showcase/premium/time-picker/showcase.tsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { DateTimePicker, TimePicker, TimeRangePicker } from "@/index"
+
+export function TimePickerShowcase() {
+  const [time, setTime] = React.useState("09:30")
+  const [dateTime, setDateTime] = React.useState("2026-07-07T09:30")
+  const [from, setFrom] = React.useState("08:00")
+  const [to, setTo] = React.useState("18:00")
+
+  return (
+    <div className="grid gap-4">
+      <div className="grid gap-2">
+        <TimePicker label="Start time" value={time} onChange={(event) => setTime(event.target.value)} />
+        <DateTimePicker label="Event datetime" value={dateTime} onChange={(event) => setDateTime(event.target.value)} />
+      </div>
+      <div className="space-y-2">
+        <TimeRangePicker from={from} to={to} onFromChange={setFrom} onToChange={setTo} />
+        <p className="text-sm text-muted-foreground">Range: {from} → {to}</p>
+      </div>
+      <p className="text-sm text-muted-foreground">Time: {time}, Datetime: {dateTime}</p>
+    </div>
+  )
+}
+

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

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

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

@@ -0,0 +1,28 @@
+import type { ComponentDemoMock } from "../types"
+
+export const timelineMock: ComponentDemoMock = {
+  code: `import { Timeline } from "tembro"
+
+export function Example() {
+  return (
+    <Timeline
+      items={[
+        { key: "1", title: "Workspace created", time: "09:12", tone: "success" },
+        { key: "2", title: "Billing approved", time: "09:30", tone: "info" },
+        { key: "3", title: "Deployment scheduled", time: "10:00", tone: "warning" },
+      ]}
+    />
+  )
+}`,
+  highlights: ["Vertical and horizontal modes", "Tone-aware event dots", "Time, description, and action support", "Good for workflow history and release tracking"],
+  scenarios: [
+    { title: "Approval history", description: "Explain what happened, in which order, and who needs to act next." },
+    { title: "Deployment events", description: "Track release milestones and pending steps clearly." },
+    { title: "Support resolution", description: "Show a readable event stream instead of scattered comments." },
+  ],
+  capabilityNotes: [
+    "Timelines work best when the sequence matters to the user decision.",
+    "Use tone to communicate event state, not decoration.",
+    "Horizontal mode is better for short, high-level milestone sets.",
+  ],
+}