tembro 1.0.0

package/packages/cli/vendor/src/showcase/premium/page-container/mock.ts

@@ -0,0 +1,25 @@
+import type { ComponentDemoMock } from "../types"
+
+export const pageContainerMock: ComponentDemoMock = {
+  code: `import { PageContainer } from "tembro"
+
+export function Example() {
+  return (
+    <PageContainer size="lg">
+      <div className="rounded-md border p-4">Page content stays constrained here.</div>
+    </PageContainer>
+  )
+}`,
+  highlights: ["Consistent max-width wrapper", "Size presets", "Useful for dashboard and content pages", "Simple integration with layout components"],
+  scenarios: [
+    { title: "Global page shell", description: "Use as the default wrapper inside AppShell main slot." },
+    { title: "Long-form content", description: "Use smaller sizes for forms and full width for tables." },
+    { title: "Readable spacing", description: "Pair with responsive spacing utilities from surrounding layouts." },
+  ],
+  capabilityNotes: [
+    "Prefer `lg` or `xl` for heavy forms and tables.",
+    "Use `full` when content needs entire width, such as charts.",
+    "Wrap page-level cards in a single PageContainer to keep rhythm uniform.",
+  ],
+}
+

package/packages/cli/vendor/src/showcase/premium/page-container/showcase.tsx

@@ -0,0 +1,50 @@
+import * as React from "react"
+
+import { Badge, PageContainer } from "@/index"
+
+import type { ComponentDemoProps } from "../types"
+
+type PageSize = "default" | "sm" | "md" | "lg" | "xl" | "full"
+
+const sizes: PageSize[] = ["default", "sm", "md", "lg", "xl", "full"]
+
+const containerClassName = "rounded-xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] p-4"
+
+export function PageContainerShowcase({ mode }: ComponentDemoProps) {
+  const [size, setSize] = React.useState<PageSize>("lg")
+
+  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">Content width</p>
+            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Page container should stabilize layout width</h3>
+            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
+              This wrapper is not decorative. It keeps headings, forms, tables, and body copy aligned so every route does not invent its own max-width.
+            </p>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <Badge variant="outline" className="rounded-full">Width scale</Badge>
+            <Badge variant="outline" className="rounded-full">Content rhythm</Badge>
+          </div>
+        </div>
+      </section>
+
+      {mode === "playground" ? (
+        <div className="flex flex-wrap gap-2">
+          {sizes.map((entry) => (
+            <button key={entry} className={`rounded-full px-4 py-2 text-sm ${size === entry ? "bg-[color:var(--aui-surface-strong)] text-[color:var(--aui-surface-strong-foreground)]" : "border border-[color:var(--aui-divider)] aui-text-muted"}`} onClick={() => setSize(entry)}>
+              {entry}
+            </button>
+          ))}
+        </div>
+      ) : null}
+
+      <PageContainer size={size} className={containerClassName}>
+        <p className="aui-text-muted text-sm">Active size: <span className="font-medium aui-text-strong">{size}</span></p>
+        <p className="aui-text-muted mt-2 text-sm">Use this wrapper to keep internal sections aligned across pages and avoid route-by-route width drift.</p>
+      </PageContainer>
+    </div>
+  )
+}

package/packages/cli/vendor/src/showcase/premium/page-header/index.ts

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

package/packages/cli/vendor/src/showcase/premium/page-header/mock.ts

@@ -0,0 +1,31 @@
+import type { ComponentDemoMock } from "../types"
+
+export const pageHeaderMock: ComponentDemoMock = {
+  code: `import { Breadcrumbs, PageHeader } from "tembro"
+
+export function Example() {
+  return (
+    <PageHeader
+      eyebrow="Overview"
+      title="Project settings"
+      description="Use PageHeader to group title, description and actions at the top of a screen."
+      breadcrumbs={<Breadcrumbs items={[{ key: "home", label: "Home", href: "/" }, { key: "settings", label: "Settings", current: true }]} />}
+      actions={<button>Save</button>}
+      sticky
+    />
+  )
+}`,
+  highlights: ["Top-of-page composition", "Optional breadcrumbs region", "Action and meta regions", "Sticky page heading mode"],
+  relatedBlockSlugs: ["dashboard-starter", "crm-dashboard", "users-table"],
+  scenarios: [
+    { title: "Admin pages", description: "Keep title, description and action buttons together before body content." },
+    { title: "List views", description: "Pair breadcrumbs with actions to indicate current scope." },
+    { title: "Sticky header", description: "Enable sticky mode for long content pages where users need persistent context." },
+  ],
+  capabilityNotes: [
+    "Use `eyebrow` for a compact pre-heading that communicates area or environment.",
+    "Place route breadcrumbs in one place and avoid duplicating path state elsewhere.",
+    "Use `meta` for small KPI chips, tags or helper context." ,
+  ],
+}
+

package/packages/cli/vendor/src/showcase/premium/page-header/showcase.tsx

@@ -0,0 +1,44 @@
+import * as React from "react"
+
+import { Badge, Breadcrumbs, Button } from "@/index"
+import { PageHeader } from "@/components/layout/page-header"
+
+import type { ComponentDemoProps } from "../types"
+
+const baseBreadcrumbs = [
+  { key: "home", label: "Home", href: "/" },
+  { key: "products", label: "Products", href: "/products" },
+  { key: "active", label: "Workspace", current: true },
+]
+
+export function PageHeaderShowcase({ mode }: ComponentDemoProps) {
+  const [sticky, setSticky] = React.useState(mode === "playground")
+
+  return (
+    <div className="space-y-5">
+      <div className="rounded-[24px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg)] p-4 sm:p-5">
+        <PageHeader
+          eyebrow="Workspace"
+          title="Team settings"
+          description="Configure profile, billing and preferences from this page-level surface."
+          breadcrumbs={<Breadcrumbs items={baseBreadcrumbs} />}
+          actions={<Button size="sm">Save</Button>}
+          meta={
+            <div className="flex flex-wrap items-center gap-2">
+              <Badge variant="outline" className="rounded-full">Breadcrumbs</Badge>
+              <Badge variant="outline" className="rounded-full">Action</Badge>
+              <Badge variant="outline" className="rounded-full">Sticky option</Badge>
+            </div>
+          }
+          sticky={sticky}
+        />
+      </div>
+
+      {mode === "playground" ? (
+        <button className="rounded-full border border-[color:var(--aui-divider)] px-4 py-2 text-sm aui-text-muted" onClick={() => setSticky((value) => !value)}>
+          {sticky ? "Disable sticky" : "Enable sticky"}
+        </button>
+      ) : null}
+    </div>
+  )
+}

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

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

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

@@ -0,0 +1,27 @@
+import type { ComponentDemoMock } from "../types"
+
+export const pageStateMock: ComponentDemoMock = {
+  code: `import { Button, PageState } from "tembro"
+
+export function Example() {
+  return (
+    <PageState
+      tone="error"
+      title="Connection failed"
+      description="We could not sync workspace usage. Retry after restoring the API token."
+      action={<Button variant="outline">Retry sync</Button>}
+    />
+  )
+}`,
+  highlights: ["Full-page status surface", "Built for empty, loading, success, info, and error flows", "Single decisive CTA", "Works as route-level fallback or section state"],
+  scenarios: [
+    { title: "No data yet", description: "Guide the first useful action when a route has no content." },
+    { title: "Load failed", description: "Keep retry and explanation visible without dropping the user into confusion." },
+    { title: "Completed workflow", description: "Confirm a decisive outcome after setup or publish flows." },
+  ],
+  capabilityNotes: [
+    "Use page-state for route-level outcomes, not inline warnings.",
+    "Keep one primary next step visible.",
+    "Choose tone by outcome, not by brand color preference.",
+  ],
+}

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

@@ -0,0 +1,72 @@
+import * as React from "react"
+
+import { Badge, Button, PageState } 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"
+
+const tones = ["empty", "loading", "error", "success", "info"] as const
+
+export function PageStateShowcase({ mode }: ComponentDemoProps) {
+  const [toneIndex, setToneIndex] = React.useState(2)
+  const tone = tones[toneIndex] ?? "error"
+
+  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">Route feedback</p>
+            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">PageState should explain the route outcome immediately</h3>
+            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
+              When the page is empty, blocked, loading, or complete, the user should understand what happened and what to do next in one glance.
+            </p>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <Badge variant="outline" className="rounded-full">Route-level</Badge>
+            <Badge variant="outline" className="rounded-full">Outcome first</Badge>
+          </div>
+        </div>
+      </section>
+
+      <PageState
+        tone={tone}
+        title={
+          tone === "empty" ? "No invoices found"
+            : tone === "loading" ? "Preparing workspace"
+              : tone === "error" ? "Connection failed"
+                : tone === "success" ? "Workspace connected"
+                  : "Sync started"
+        }
+        description={
+          tone === "empty" ? "Create the first invoice to unlock exports, reminders, and payment tracking."
+            : tone === "loading" ? "We are syncing permissions and bringing the latest workspace data into this route."
+              : tone === "error" ? "We could not sync workspace usage. Retry after restoring the API token."
+                : tone === "success" ? "The workspace is ready and the team can continue with the next operational step."
+                  : "Background sync is running. You can keep working while updates are processed."
+        }
+        action={
+          tone === "loading" ? undefined : (
+            <Button variant={tone === "error" ? "outline" : "default"}>
+              {tone === "empty" ? "Create invoice" : tone === "error" ? "Retry sync" : tone === "success" ? "Open dashboard" : "View progress"}
+            </Button>
+          )
+        }
+      />
+
+      {mode === "playground" ? (
+        <section className={panelClass}>
+          <div className="flex flex-wrap gap-2">
+            {tones.map((value, index) => (
+              <Button key={value} size="sm" variant={toneIndex === index ? "default" : "outline"} onClick={() => setToneIndex(index)}>
+                {value}
+              </Button>
+            ))}
+          </div>
+        </section>
+      ) : null}
+    </div>
+  )
+}

package/packages/cli/vendor/src/showcase/premium/page-tabs/index.ts

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

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

@@ -0,0 +1,33 @@
+import type { ComponentDemoMock } from "../types"
+
+export const pageTabsMock: ComponentDemoMock = {
+  code: `import * as React from "react"
+import { PageTabs } from "tembro"
+
+export function Example() {
+  const [tab, setTab] = React.useState("overview")
+
+  return (
+    <PageTabs
+      value={tab}
+      onValueChange={(next) => setTab(next)}
+      items={[
+        { value: "overview", label: "Overview" },
+        { value: "billing", label: "Billing", badge: 2 },
+        { value: "activity", label: "Activity" },
+      ]}
+    />
+  )
+}`,
+  highlights: ["Underline, pills, and cards variants", "Route-sized section switching", "Optional tab badges", "Good semantic fit for page-level navigation"],
+  scenarios: [
+    { title: "Workspace sections", description: "Switch between overview, billing, and activity at the route surface level." },
+    { title: "Settings pages", description: "Organize major groups without building separate side navigation." },
+    { title: "Detail hubs", description: "Keep related top-level sections visible across a broad content surface." },
+  ],
+  capabilityNotes: [
+    "Use page-tabs for route-sized or section-sized navigation, not tiny inline toggles.",
+    "Choose pills/cards only when the visual context supports a stronger container.",
+    "If the options are just view toggles, button-group may be more appropriate.",
+  ],
+}

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

@@ -0,0 +1,67 @@
+import * as React from "react"
+
+import { Badge, PageTabs } 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 PageTabsShowcase({ mode }: ComponentDemoProps) {
+  const [tab, setTab] = React.useState<"overview" | "billing" | "activity">("overview")
+  const [variant, setVariant] = React.useState<"underline" | "pills" | "cards">("underline")
+
+  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">Page navigation</p>
+            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">PageTabs should structure major sections, not minor control state</h3>
+            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
+              This surface is for broad route or detail-page navigation where the user needs clear top-level section switching.
+            </p>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <Badge variant="outline" className="rounded-full">Route scale</Badge>
+            <Badge variant="outline" className="rounded-full">Badge support</Badge>
+          </div>
+        </div>
+      </section>
+
+      <section className={panelClass}>
+        <PageTabs
+          value={tab}
+          variant={variant}
+          onValueChange={(nextValue) => setTab(nextValue as typeof tab)}
+          items={[
+            { value: "overview", label: "Overview" },
+            { value: "billing", label: "Billing", badge: 2 },
+            { value: "activity", label: "Activity" },
+          ]}
+        />
+      </section>
+
+      <div className="grid gap-4 xl:grid-cols-2">
+        <section className={panelClass}>
+          <p className="text-sm font-medium aui-text-muted">Active tab</p>
+          <p className="mt-3 text-base font-medium aui-text-strong">{tab}</p>
+        </section>
+        <section className={panelClass}>
+          <p className="text-sm font-medium aui-text-muted">Variant</p>
+          <p className="mt-3 text-base font-medium aui-text-strong">{variant}</p>
+        </section>
+      </div>
+
+      {mode === "playground" ? (
+        <section className={panelClass}>
+          <div className="flex flex-wrap gap-2">
+            <button type="button" className="rounded-full border border-[color:var(--aui-divider)] px-3 py-2 text-sm" onClick={() => setVariant("underline")}>Underline</button>
+            <button type="button" className="rounded-full border border-[color:var(--aui-divider)] px-3 py-2 text-sm" onClick={() => setVariant("pills")}>Pills</button>
+            <button type="button" className="rounded-full border border-[color:var(--aui-divider)] px-3 py-2 text-sm" onClick={() => setVariant("cards")}>Cards</button>
+          </div>
+        </section>
+      ) : null}
+    </div>
+  )
+}

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

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

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

@@ -0,0 +1,30 @@
+import type { ComponentDemoMock } from "../types"
+
+export const paginationMock: ComponentDemoMock = {
+  code: `import * as React from "react"
+import { Pagination } from "tembro"
+
+export function Example() {
+  const [page, setPage] = React.useState(6)
+
+  return (
+    <Pagination
+      page={page}
+      pageCount={18}
+      onPageChange={setPage}
+      showEdges
+    />
+  )
+}`,
+  highlights: ["Controlled page state", "First/last edge actions", "Ellipsis generation for large datasets", "Compact navigation for tables and audit logs"],
+  scenarios: [
+    { title: "Orders table", description: "Switch through long operational tables without losing search and filters." },
+    { title: "Audit trail", description: "Keep log browsing compact while preserving direct jumps to early and late pages." },
+    { title: "Review queue", description: "Let teams move page-by-page through pending approvals." },
+  ],
+  capabilityNotes: [
+    "Keep pagination controlled so URL params or table state remain the source of truth.",
+    "Use `showEdges` when the dataset spans many pages.",
+    "Pair with visible total count so users know how far they are in the list.",
+  ],
+}

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

@@ -0,0 +1,81 @@
+import * as React from "react"
+
+import { Badge, Pagination } 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 PaginationShowcase({ mode }: ComponentDemoProps) {
+  const [page, setPage] = React.useState(6)
+  const [pageCount, setPageCount] = React.useState(18)
+  const [showEdges, setShowEdges] = React.useState(true)
+
+  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">Navigation control</p>
+            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Pagination should preserve context while moving through data</h3>
+            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
+              Good pagination feels quiet: the active page is obvious, edge jumps are available, and large datasets collapse into readable ellipsis states.
+            </p>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <Badge variant="outline" className="rounded-full">Controlled</Badge>
+            <Badge variant="outline" className="rounded-full">Large lists</Badge>
+          </div>
+        </div>
+      </section>
+
+      <section className={panelClass}>
+        <div className="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
+          <div>
+            <p className="text-sm font-medium aui-text-muted">Review queue pages</p>
+            <p className="mt-2 text-sm leading-6 aui-text-muted">Showing page <span className="font-medium aui-text-strong">{page}</span> of <span className="font-medium aui-text-strong">{pageCount}</span>.</p>
+          </div>
+          <Pagination page={page} pageCount={pageCount} onPageChange={setPage} showEdges={showEdges} />
+        </div>
+      </section>
+
+      <div className="grid gap-4 xl:grid-cols-2">
+        <section className={panelClass}>
+          <p className="text-sm font-medium aui-text-muted">Why this matters</p>
+          <div className="mt-4 space-y-3 text-sm leading-6 aui-text-muted">
+            <p>Tables, audit trails, and inboxes all need stable navigation that does not compete with the data itself.</p>
+            <p>Ellipsis should reduce noise, not hide where the user currently is.</p>
+          </div>
+        </section>
+        <section className={panelClass}>
+          <p className="text-sm font-medium aui-text-muted">Current demo state</p>
+          <div className="mt-4 space-y-2 text-sm leading-6 aui-text-muted">
+            <p>Page: <span className="font-medium aui-text-strong">{page}</span></p>
+            <p>Total pages: <span className="font-medium aui-text-strong">{pageCount}</span></p>
+            <p>Edges: <span className="font-medium aui-text-strong">{showEdges ? "visible" : "hidden"}</span></p>
+          </div>
+        </section>
+      </div>
+
+      {mode === "playground" ? (
+        <section className={panelClass}>
+          <div className="flex flex-wrap gap-2">
+            <button type="button" className="rounded-full border border-[color:var(--aui-divider)] px-3 py-2 text-sm" onClick={() => setPage(Math.max(1, page - 1))}>
+              Previous page
+            </button>
+            <button type="button" className="rounded-full border border-[color:var(--aui-divider)] px-3 py-2 text-sm" onClick={() => setPage(Math.min(pageCount, page + 1))}>
+              Next page
+            </button>
+            <button type="button" className="rounded-full border border-[color:var(--aui-divider)] px-3 py-2 text-sm" onClick={() => setShowEdges((value) => !value)}>
+              Toggle edges
+            </button>
+            <button type="button" className="rounded-full border border-[color:var(--aui-divider)] px-3 py-2 text-sm" onClick={() => setPageCount((value) => (value === 18 ? 8 : 18))}>
+              Toggle page count
+            </button>
+          </div>
+        </section>
+      ) : null}
+    </div>
+  )
+}

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

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

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

@@ -0,0 +1,30 @@
+import type { ComponentDemoMock } from "../types"
+
+export const passwordInputMock: ComponentDemoMock = {
+  code: `import * as React from "react"
+import { PasswordInput } from "tembro"
+
+export function Example() {
+  const [value, setValue] = React.useState("")
+
+  return (
+    <PasswordInput
+      value={value}
+      onValueChange={setValue}
+      placeholder="Enter workspace password"
+      showCapsLockWarning
+    />
+  )
+}`,
+  highlights: ["Visibility toggle", "Caps Lock warning support", "Controlled or uncontrolled visibility", "Secure field wrapper without extra composition boilerplate"],
+  scenarios: [
+    { title: "Login form", description: "Expose visibility toggle in auth screens without building a custom wrapper." },
+    { title: "Sensitive confirmation", description: "Require current password before destructive account actions." },
+    { title: "Internal admin area", description: "Use in restricted operational tools with direct validation feedback." },
+  ],
+  capabilityNotes: [
+    "Use password input where visibility toggle genuinely reduces user errors.",
+    "Keep password actions close to the field, not in a separate row.",
+    "Caps Lock warning is helpful for desktop-heavy admin flows.",
+  ],
+}

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

@@ -0,0 +1,73 @@
+import * as React from "react"
+
+import { Badge, PasswordInput } 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 PasswordInputShowcase({ mode }: ComponentDemoProps) {
+  const [password, setPassword] = React.useState("")
+  const [visible, setVisible] = React.useState(false)
+
+  const strength =
+    password.length >= 12 ? "Strong"
+      : password.length >= 8 ? "Good"
+        : password.length >= 1 ? "Weak"
+          : "Empty"
+
+  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">Sensitive field</p>
+            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">PasswordInput should reduce mistakes in high-friction moments</h3>
+            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
+              The control should keep visibility, warnings, and state feedback inside one clean field instead of pushing users into extra UI.
+            </p>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <Badge variant="outline" className="rounded-full">Visibility toggle</Badge>
+            <Badge variant="outline" className="rounded-full">Caps Lock aware</Badge>
+          </div>
+        </div>
+      </section>
+
+      <section className={panelClass}>
+        <PasswordInput
+          value={password}
+          onValueChange={setPassword}
+          visible={visible}
+          onVisibleChange={setVisible}
+          placeholder="Enter workspace password"
+          showCapsLockWarning
+        />
+      </section>
+
+      <div className="grid gap-4 xl:grid-cols-2">
+        <section className={panelClass}>
+          <p className="text-sm font-medium aui-text-muted">Field state</p>
+          <div className="mt-4 space-y-2 text-sm leading-6 aui-text-muted">
+            <p>Length: <span className="font-medium aui-text-strong">{password.length}</span></p>
+            <p>Visibility: <span className="font-medium aui-text-strong">{visible ? "visible" : "hidden"}</span></p>
+            <p>Strength: <span className="font-medium aui-text-strong">{strength}</span></p>
+          </div>
+        </section>
+        <section className={panelClass}>
+          <p className="text-sm font-medium aui-text-muted">Usage note</p>
+          <p className="mt-4 text-sm leading-6 aui-text-muted">
+            Password fields should be operational and quiet. The user should not need a second component just to show, hide, or understand entry state.
+          </p>
+        </section>
+      </div>
+
+      {mode === "playground" ? (
+        <section className={panelClass}>
+          <p className="text-sm aui-text-muted">Desktopda Caps Lock yoqib ko‘rsangiz warning ham shu field ichida ko‘rinadi.</p>
+        </section>
+      ) : null}
+    </div>
+  )
+}

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

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

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

@@ -0,0 +1,36 @@
+import type { ComponentDemoMock } from "../types"
+
+export const phoneInputMock: ComponentDemoMock = {
+  code: `import { useState } from "react"
+import { PhoneInput } from "@/index"
+
+export function Example() {
+  const [value, setValue] = useState("+998 90 123 45 67")
+
+  return (
+    <PhoneInput
+      value={value}
+      onValueChange={setValue}
+      defaultCountry="UZ"
+      placeholder="+998 90 123 45 67"
+    />
+  )
+}
+`,
+  htmlCode: '<label for="phone">Phone</label><input id="phone" type="tel" inputmode="tel" placeholder="+998 90 123 45 67" />',
+  cliCommand: "npx tembro add phone-input",
+  highlights: ["Phone formatting assumptions", "Locale/defaultCountry behavior", "Controlled value contract", "Raw vs displayed phone forms"],
+  relatedBlockSlugs: ["users-table", "settings-form", "pricing-section"],
+  scenarios: [
+    { title: "Profile contact", description: "Capture customer phone with predictable display behavior." },
+    { title: "Checkout phone", description: "Format validation before creating verification records." },
+    { title: "Country switch", description: "Change defaultCountry and keep callback contract stable." },
+    { title: "Backend integration", description: "Persist normalized phone payload while rendering localized format." },
+  ],
+  capabilityNotes: [
+    "Write down whether your backend expects E.164 or local phone format.",
+    "Avoid mixing formatted display and raw storage in schema validation.",
+    "For country-aware inputs, keep default country explicit in docs and migration notes.",
+    "Use one validator shared by form and API integration layers.",
+  ],
+}