tembro 1.0.0

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

@@ -0,0 +1,26 @@
+import { useState } from "react"
+
+import { PhoneInput } from "@/index"
+
+import type { ComponentDemoProps } from "../types"
+
+export function PhoneInputShowcase({ mode }: ComponentDemoProps) {
+  const [value, setValue] = useState("+998 90 123 45 67")
+
+  return (
+    <div className="space-y-4">
+      <PhoneInput
+        value={value}
+        onValueChange={(maskedValue) => setValue(maskedValue)}
+        countryCode="+998"
+        placeholder="+998 90 123 45 67"
+      />
+      <p className="aui-text-strong text-sm">Canonical value: {value || "—"}</p>
+      <p className="aui-text-muted text-sm">Display format is formatted for UX; raw value strategy is app-specific.</p>
+      <p className="aui-text-muted text-sm">Mode: {mode}</p>
+    </div>
+  )
+}
+
+
+

package/packages/cli/vendor/src/showcase/premium/popover/data.ts

@@ -0,0 +1,22 @@
+import type { PopoverDemoItem } from "./types"
+
+export const popoverDemoItems: PopoverDemoItem[] = [
+  {
+    label: "Open help",
+    variant: "outline",
+    title: "Quick tips",
+    description: "Use compact overlays for helper content and short actions.",
+  },
+  {
+    label: "Open actions",
+    variant: "secondary",
+    title: "Workspace actions",
+    description: "Duplicate, archive or transfer ownership from this menu.",
+  },
+  {
+    label: "Open shortcut",
+    variant: "outline",
+    title: "Keyboard tip",
+    description: "Use Cmd/Ctrl+K to open command palette from this page.",
+  },
+]

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

@@ -0,0 +1,4 @@
+export { PopoverShowcase } from "./showcase"
+export { popoverMock } from "./mock"
+export { popoverDemoItems } from "./data"
+export type { PopoverDemoItem } from "./types"

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

@@ -0,0 +1,45 @@
+import type { ComponentDemoMock } from "../types"
+
+export const popoverMock: ComponentDemoMock = {
+  code: `import { Button, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from "tembro"
+
+export function Example() {
+  return (
+    <div className="space-y-3">
+      <Popover>
+        <PopoverTrigger render={<Button variant="outline">Open helper</Button>} />
+        <PopoverContent className="w-72">
+          <PopoverHeader>
+            <PopoverTitle>Keyboard shortcut</PopoverTitle>
+            <PopoverDescription>Press Cmd/Ctrl + K to open quick search.</PopoverDescription>
+          </PopoverHeader>
+        </PopoverContent>
+      </Popover>
+
+      <Popover>
+        <PopoverTrigger render={<Button variant="secondary">Open workspace menu</Button>} />
+        <PopoverContent className="w-64">
+          Duplicate Archive Share
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}`,
+  htmlCode: `<button data-slot="popover-trigger">Open popover</button>`,
+  cliCommand: "npx tembro add popover",
+  highlights: ["Anchored overlay", "Action-specific compact content", "Placement control", "Keyboard-focus hints"],
+  relatedBlockSlugs: ["users-table", "dashboard-starter", "crm-dashboard"],
+  scenarios: [
+    { title: "Inline help", description: "Keep helper text close to the trigger control." },
+    { title: "Context menu", description: "Use popover for compact action sets instead of full modals." },
+    { title: "Detail summary", description: "Show small explanations where space is limited." },
+    { title: "Tooltip-style guidance", description: "Offer focus-safe guidance for complex form controls." },
+  ],
+  capabilityNotes: [
+    "Use popovers for short, contextual content and actions.",
+    "Avoid placing long-form or deeply interactive workflows in popovers.",
+    "Prefer stable side/alignment to prevent layout jank in dense UIs.",
+    "Set focus behavior intentionally when nested controls are present.",
+  ],
+}
+

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

@@ -0,0 +1,74 @@
+import { Button, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from "@/index"
+
+import { popoverDemoItems } from "./data"
+
+const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
+
+export function PopoverShowcase() {
+  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">Popover</p>
+            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Keep it short and contextual</h3>
+            <p className="mt-3 text-sm leading-6 aui-text-muted">Popover should add nearby context, not replace the page or become a hidden modal.</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">Examples</p>
+              <p className="mt-2 text-lg font-semibold aui-text-strong">{popoverDemoItems.length}</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 help</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">Full flows</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className={panelClass}>
+        <div className="grid gap-4 xl:grid-cols-3">
+          {popoverDemoItems.map((item) => (
+            <div key={item.label} className="rounded-[20px] border border-[color:var(--aui-divider)] px-4 py-4">
+              <div>
+                <p className="text-sm font-semibold aui-text-strong">{item.title}</p>
+                <p className="mt-2 text-sm leading-6 aui-text-muted">{item.description}</p>
+              </div>
+              <div className="mt-4">
+                <Popover>
+                  <PopoverTrigger render={<Button variant={item.variant} />}>{item.label}</PopoverTrigger>
+                  <PopoverContent>
+                    <PopoverHeader>
+                      <PopoverTitle>{item.title}</PopoverTitle>
+                      <PopoverDescription>{item.description}</PopoverDescription>
+                    </PopoverHeader>
+                  </PopoverContent>
+                </Popover>
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      <section className={panelClass}>
+        <div className="border-y border-[color:var(--aui-divider)]">
+          {[
+            "Trigger text should already hint that extra context exists.",
+            "If users need multiple actions or long reading, move up to a heavier surface.",
+            "Popover body should stay compact enough to scan in one glance.",
+          ].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>
+    </div>
+  )
+}

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

@@ -0,0 +1,6 @@
+export type PopoverDemoItem = {
+  label: string
+  variant: "outline" | "secondary"
+  title: string
+  description: string
+}

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

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

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

@@ -0,0 +1,30 @@
+import type { ComponentDemoMock } from "../types"
+
+export const progressMock: ComponentDemoMock = {
+  code: `import { Progress, ProgressCard } from "tembro"
+
+export function Example() {
+  return (
+    <div className="space-y-4">
+      <Progress label="Migration status" value={72} showValue />
+      <ProgressCard
+        title="Workspace import"
+        description="Current completion state"
+        value={58}
+        tone="info"
+      />
+    </div>
+  )
+}`,
+  highlights: ["Linear progress with contextual label", "Value formatting", "Tone support for risk and success states", "Card wrapper for dashboard surfaces"],
+  scenarios: [
+    { title: "Import flow", description: "Show users how much data sync or onboarding remains." },
+    { title: "Release readiness", description: "Track operational completion state in dashboards." },
+    { title: "Background jobs", description: "Expose live or indeterminate processing in a compact way." },
+  ],
+  capabilityNotes: [
+    "Progress is strongest when tied to a real milestone or measurable completion state.",
+    "Use indeterminate only when precise completion cannot be known yet.",
+    "Label the meaning of the progress, not just the percent.",
+  ],
+}

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

@@ -0,0 +1,65 @@
+import * as React from "react"
+
+import { Badge, Button, Progress, ProgressCard } 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 ProgressShowcase({ mode }: ComponentDemoProps) {
+  const [value, setValue] = React.useState(58)
+  const [indeterminate, setIndeterminate] = React.useState(false)
+
+  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">Completion signal</p>
+            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Progress should explain movement, not just paint a bar</h3>
+            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
+              A useful progress surface ties completion to a concrete workflow like sync, rollout, approval, or onboarding.
+            </p>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <Badge variant="outline" className="rounded-full">Deterministic</Badge>
+            <Badge variant="outline" className="rounded-full">Indeterminate</Badge>
+          </div>
+        </div>
+      </section>
+
+      <div className="grid gap-4 xl:grid-cols-2">
+        <section className={panelClass}>
+          <Progress
+            label="Workspace import"
+            description="Records indexed and validated"
+            value={value}
+            tone="info"
+            showValue
+            indeterminate={indeterminate}
+          />
+        </section>
+        <ProgressCard
+          title="Release readiness"
+          description="Checks passed before public rollout"
+          value={value}
+          tone={value >= 80 ? "success" : value >= 50 ? "info" : "warning"}
+          footer={<p className="text-xs aui-text-muted">Promote only when all gates are green.</p>}
+        />
+      </div>
+
+      {mode === "playground" ? (
+        <section className={panelClass}>
+          <div className="flex flex-wrap gap-2">
+            <Button size="sm" variant="outline" onClick={() => setValue((current) => Math.max(0, current - 10))}>-10</Button>
+            <Button size="sm" variant="outline" onClick={() => setValue((current) => Math.min(100, current + 10))}>+10</Button>
+            <Button size="sm" variant="outline" onClick={() => setIndeterminate((current) => !current)}>
+              Toggle indeterminate
+            </Button>
+          </div>
+        </section>
+      ) : null}
+    </div>
+  )
+}

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

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

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

@@ -0,0 +1,29 @@
+import type { ComponentDemoMock } from "../types"
+
+export const propertyGridMock: ComponentDemoMock = {
+  code: `import { PropertyGrid } from "@/index"
+
+export function Example() {
+  return (
+    <PropertyGrid
+      columns={3}
+      items={[
+        { key: "owner", label: "Owner", value: "Azamat Jurayev" },
+        { key: "status", label: "Status", value: "Ready for review" },
+        { key: "version", label: "Version", value: "0.3.27" },
+      ]}
+    />
+  )
+}`,
+  cliCommand: "npx tembro add property-grid",
+  highlights: [
+    "Dense key/value metadata layout",
+    "Responsive columns with optional span support",
+    "Useful for entity details, release summaries, and integration metadata",
+  ],
+  scenarios: [
+    { title: "Entity details", description: "Render many small facts without a full description list layout." },
+    { title: "Release summary", description: "Group ownership, version and environment metadata." },
+    { title: "Integration card", description: "Show endpoints, modes and dates in a compact details grid." },
+  ],
+}

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

@@ -0,0 +1,48 @@
+import { Badge, PropertyGrid } from "@/index"
+
+const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
+
+export function PropertyGridShowcase() {
+  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">PropertyGrid packs metadata into a compact surface</h3>
+        <p className="mt-3 max-w-2xl text-sm leading-6 aui-text-muted">
+          Reach for it when the page needs many small facts and a full DescriptionList would feel too linear.
+        </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">Release summary metadata</p>
+            <p className="mt-2 max-w-xl text-sm leading-6 aui-text-muted">
+              The grid layout works well for ownership, dates, environment and deployment facts.
+            </p>
+            <PropertyGrid
+              className="mt-5"
+              columns={3}
+              items={[
+                { key: "owner", label: "Owner", value: "Azamat Jurayev" },
+                { key: "status", label: "Status", value: <Badge variant="secondary">Ready</Badge> },
+                { key: "version", label: "Version", value: "0.3.27" },
+                { key: "environment", label: "Environment", value: "Production" },
+                { key: "updated", label: "Updated", value: "Today, 14:40" },
+                { key: "notes", label: "Notes", value: "Premium demos expanded for core display and utility routes.", span: 2 },
+              ]}
+            />
+          </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>PropertyGrid is best for short values. If the content becomes paragraph-length, a linear details layout will read better.</p>
+              <p>Use `span` sparingly to keep rhythm predictable across breakpoints.</p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}

package/packages/cli/vendor/src/showcase/premium/qr-code/index.ts

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

package/packages/cli/vendor/src/showcase/premium/qr-code/mock.ts

@@ -0,0 +1,20 @@
+import type { ComponentDemoMock } from "../types"
+
+export const qrCodeMock: ComponentDemoMock = {
+  code: `import { QRCode } from "@/index"
+
+export function Example() {
+  return <QRCode value="https://azamat-ui.vercel.app" alt="Azamat UI" />
+}`,
+  cliCommand: "npx tembro add qr-code",
+  highlights: [
+    "Fallback SVG renderer if no image is provided",
+    "Configurable size and module density",
+    "Works with plain strings and long URLs",
+  ],
+  scenarios: [
+    { title: "Marketing", description: "Expose links in campaigns and materials." },
+    { title: "Apps", description: "Generate codes for sharing deep links in dashboards." },
+  ],
+}
+

package/packages/cli/vendor/src/showcase/premium/qr-code/showcase.tsx

@@ -0,0 +1,23 @@
+import * as React from "react"
+
+import { Button, QRCode } from "@/index"
+
+const urls = ["https://azamat-ui.vercel.app", "https://github.com", "mailto:hello@example.com"]
+
+export function QRCodeShowcase() {
+  const [index, setIndex] = React.useState(0)
+  const value = urls[index % urls.length]
+
+  return (
+    <div className="space-y-3">
+      <div className="flex gap-2">
+        <Button size="sm" onClick={() => setIndex((value) => (value + 1) % urls.length)}>
+          Next payload
+        </Button>
+      </div>
+      <QRCode value={value} alt={value} size={176} />
+      <p className="text-xs text-muted-foreground">Payload: {value}</p>
+    </div>
+  )
+}
+

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

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

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

@@ -0,0 +1,48 @@
+import type { ComponentDemoMock } from "../types"
+
+export const quantityInputMock: ComponentDemoMock = {
+  code: `import { useState } from "react"
+import { QuantityInput } from "@/index"
+
+export function Example() {
+  const [quantity, setQuantity] = useState<number | null>(3)
+
+  return (
+    <div className="space-y-3">
+      <QuantityInput
+        value={quantity}
+        onValueChange={(nextValue: number | null) => setQuantity(nextValue)}
+        min={0}
+        max={10}
+        step={1}
+        showControls
+      />
+      <p className="text-sm aui-text-subtle">
+        Items: <strong>{quantity ?? "unset"}</strong>
+      </p>
+      <p className="text-sm aui-text-muted">
+        Controls should stay aligned with adjacent action columns in compact table rows.
+      </p>
+      <p className="text-sm aui-text-muted">
+        Try increment/decrement at bounds to validate guardrails.
+      </p>
+    </div>
+  )
+}`,
+  htmlCode: `<label for="qty">Quantity</label><input id="qty" type="text" inputmode="numeric" />`,
+  cliCommand: "npx tembro add quantity-input",
+  highlights: ["Stepper controls", "min/max boundaries", "controlled usage", "compact row compatibility"],
+  relatedBlockSlugs: ["crm-dashboard", "users-table", "settings-form"],
+  scenarios: [
+    { title: "Line item quantity", description: "Use in carts and order forms with strict bounds." },
+    { title: "Inventory controls", description: "Keep increments aligned with backend-stock constraints." },
+    { title: "Form tables", description: "Compact control rendering works well in inline editable rows." },
+    { title: "Bounded values", description: "Reject edits below zero and above maximum." },
+  ],
+  capabilityNotes: [
+    "Show inline controls for quick adjustments when quantity edits are frequent.",
+    "Set `min`/`max` to protect impossible states in business rules.",
+    "Use controlled flow to persist updates across rows and validation passes.",
+    "Disable controls when quantity is not editable to avoid inconsistent states.",
+  ],
+}

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

@@ -0,0 +1,20 @@
+import { useState } from "react"
+
+import { QuantityInput } from "@/index"
+
+export function QuantityInputShowcase() {
+  const [value, setValue] = useState<number | null>(2)
+
+  return (
+    <div className="space-y-3">
+      <QuantityInput
+        value={value}
+        onValueChange={setValue}
+        min={0}
+        max={12}
+        showControls
+      />
+      <p className="aui-text-subtle text-sm">Quantity: {value ?? "unset"}</p>
+    </div>
+  )
+}

package/packages/cli/vendor/src/showcase/premium/radio-group/index.ts

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

package/packages/cli/vendor/src/showcase/premium/radio-group/mock.ts

@@ -0,0 +1,33 @@
+import type { ComponentDemoMock } from "../types"
+
+export const radioGroupMock: ComponentDemoMock = {
+  code: `import { useState } from "react"
+import { RadioGroup } from "@/index"
+
+const planOptions = [
+  { value: "starter", label: "Starter", description: "Good for single workspace setup." },
+  { value: "growth", label: "Growth", description: "Adds more seats and team workflows." },
+  { value: "enterprise", label: "Enterprise", description: "Advanced controls and support." },
+]
+
+export function Example() {
+  const [value, setValue] = useState("growth")
+
+  return <RadioGroup value={value} onValueChange={setValue} options={planOptions} />
+}`,
+  htmlCode: `<div data-slot="radio-group" role="radiogroup"></div>`,
+  cliCommand: "npx tembro add radio-group",
+  highlights: ["Single choice", "Description rows", "Controlled value", "Plan selection"],
+  relatedBlockSlugs: ["settings-form", "crm-dashboard", "dashboard-starter"],
+  scenarios: [
+    { title: "Plan choice", description: "Use when only one option can stay active." },
+    { title: "Density mode", description: "Useful for settings that must remain mutually exclusive." },
+    { title: "Form clarity", description: "Descriptions reduce ambiguity between similar choices." },
+  ],
+  capabilityNotes: [
+    "Prefer RadioGroup over Select when all choices should remain visible.",
+    "Use descriptions only when options are close enough to need clarification.",
+    "Keep the selected value controlled in settings or pricing flows.",
+    "Switch to Checkbox only when multiple answers can be true at once.",
+  ],
+}

package/packages/cli/vendor/src/showcase/premium/radio-group/showcase.tsx

@@ -0,0 +1,67 @@
+import * as React from "react"
+
+import { Badge, Button, RadioGroup } from "@/index"
+
+const panelClass =
+  "rounded-[22px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-5"
+
+const planOptions = [
+  { value: "starter", label: "Starter", description: "Good for single workspace setup." },
+  { value: "growth", label: "Growth", description: "Adds more seats and team workflows." },
+  { value: "enterprise", label: "Enterprise", description: "Advanced controls and support." },
+] as const
+
+export function RadioGroupShowcase() {
+  const [value, setValue] = React.useState("growth")
+
+  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">Single choice</p>
+            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Radio group should make one active choice obvious</h3>
+            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
+              Keep all options visible when users should compare them before selecting one final answer.
+            </p>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <Badge variant="outline" className="rounded-full">Visible choices</Badge>
+            <Badge variant="outline" className="rounded-full">Single answer</Badge>
+            <Badge variant="outline" className="rounded-full">Controlled</Badge>
+          </div>
+        </div>
+
+        <div className="mt-6 grid gap-4 xl:grid-cols-[1.05fr_0.95fr]">
+          <div className={panelClass}>
+            <p className="text-sm font-medium aui-text-muted">Workspace plan</p>
+            <div className="mt-3">
+              <RadioGroup value={value} onValueChange={setValue} options={planOptions.map((option) => ({ ...option }))} />
+            </div>
+          </div>
+          <div className={panelClass}>
+            <p className="text-sm font-medium aui-text-muted">Selection summary</p>
+            <p className="mt-3 text-lg font-semibold aui-text-strong">{planOptions.find((option) => option.value === value)?.label}</p>
+            <p className="mt-2 text-sm leading-6 aui-text-muted">{planOptions.find((option) => option.value === value)?.description}</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">Current plan: {value}</h4>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            {planOptions.map((option) => (
+              <Button key={option.value} type="button" size="sm" variant={value === option.value ? "default" : "secondary"} onClick={() => setValue(option.value)}>
+                {option.label}
+              </Button>
+            ))}
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}

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

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

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

@@ -0,0 +1,29 @@
+import type { ComponentDemoMock } from "../types"
+
+export const ratingMock: ComponentDemoMock = {
+  code: `import * as React from "react"
+import { Rating } from "tembro"
+
+export function Example() {
+  const [value, setValue] = React.useState(4)
+
+  return (
+    <Rating
+      value={value}
+      onValueChange={setValue}
+      labels={{ rate: (score) => \`Rate \${score}\` }}
+    />
+  )
+}`,
+  highlights: ["Compact score input", "Hover and clear behavior", "Accessible label support", "Good for reviews, QA, and lightweight feedback"],
+  scenarios: [
+    { title: "QA handoff", description: "Capture a quick confidence score before shipping a change." },
+    { title: "Support satisfaction", description: "Collect a lightweight post-resolution rating." },
+    { title: "Internal review", description: "Use a compact score where a full form would slow people down." },
+  ],
+  capabilityNotes: [
+    "Use rating when relative sentiment matters more than exact numeric entry.",
+    "Allow clear when revising feedback is a normal part of the flow.",
+    "Keep the label around the score context outside the stars themselves.",
+  ],
+}