tembro 3.1.1 → 3.1.5

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

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

@@ -1,44 +0,0 @@
-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-tabs/index.ts

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

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

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

@@ -1,67 +0,0 @@
-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/password-input/index.ts

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

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

@@ -1,31 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const passwordInputMock: ComponentDemoMock = {
-  code: `import * as React from "react"
-import { Input } from "tembro"
-
-export function Example() {
-  const [value, setValue] = React.useState("")
-
-  return (
-    <Input
-      kind="password"
-      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

@@ -1,74 +0,0 @@
-import * as React from "react"
-
-import { Badge, Input } 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}>
-        <Input
-          kind="password"
-          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

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

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

@@ -1,37 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const phoneInputMock: ComponentDemoMock = {
-  code: `import { useState } from "react"
-import { Input } from "tembro"
-
-export function Example() {
-  const [value, setValue] = useState("+998 90 123 45 67")
-
-  return (
-    <Input
-      kind="phone"
-      value={value}
-      onValueChange={setValue}
-      countryCode="+998"
-      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 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.",
-  ],
-}

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

@@ -1,27 +0,0 @@
-import { useState } from "react"
-
-import { Input } 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">
-      <Input
-        kind="phone"
-        value={value}
-        onValueChange={(maskedValue: string) => 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/property-grid/index.ts

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

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

@@ -1,29 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const propertyGridMock: ComponentDemoMock = {
-  code: `import { PropertyGrid } from "tembro"
-
-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

@@ -1,48 +0,0 @@
-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/quantity-input/index.ts

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

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

@@ -1,49 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const quantityInputMock: ComponentDemoMock = {
-  code: `import { useState } from "react"
-import { Input } from "tembro"
-
-export function Example() {
-  const [quantity, setQuantity] = useState<number | null>(3)
-
-  return (
-    <div className="space-y-3">
-      <Input
-        kind="quantity"
-        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 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

@@ -1,21 +0,0 @@
-import { useState } from "react"
-
-import { Input } from "@/index"
-
-export function QuantityInputShowcase() {
-  const [value, setValue] = useState<number | null>(2)
-
-  return (
-    <div className="space-y-3">
-      <Input
-        kind="quantity"
-        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/result/index.ts

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

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

@@ -1,28 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const resultMock: ComponentDemoMock = {
-  code: `import { Result } from "tembro"
-
-export function Example() {
-  return (
-    <Result
-      status="success"
-      title="Project created"
-      description="Your new workspace is ready and all checks passed."
-      compact
-    />
-  )
-}`,
-  highlights: ["Semantic statuses", "Inline action block", "Compact and full variants", "Reusable result states for non-page flows"],
-  scenarios: [
-    { title: "Create success", description: "Use after successful create/update actions." },
-    { title: "Error outcome", description: "Show clear recovery action and short guidance." },
-    { title: "Not found state", description: "Use for invalid entity pages and missing route scenarios." },
-  ],
-  capabilityNotes: [
-    "Align status text with backend outcomes.",
-    "Pair each state with primary and optional secondary actions.",
-    "Keep `description` short and specific to user intent.",
-  ],
-}
-

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

@@ -1,67 +0,0 @@
-import * as React from "react"
-
-import { Badge, Button, Result } from "@/index"
-
-import type { ComponentDemoProps } from "../types"
-
-const resultStatuses = ["success", "error", "warning", "info", "not-found", "forbidden", "server-error"] as const
-const descriptions = {
-  success: "The requested action completed.",
-  error: "The action failed. Review the message and try again.",
-  warning: "The request completed with warnings. Verify details before proceed.",
-  info: "An additional state is available for neutral communication.",
-  "not-found": "The requested resource could not be found.",
-  forbidden: "You do not have permission to perform this action.",
-  "server-error": "The server returned an unexpected response.",
-}
-
-type ResultStatus = (typeof resultStatuses)[number]
-
-export function ResultShowcase({ mode }: ComponentDemoProps) {
-  const [status, setStatus] = React.useState<ResultStatus>("success")
-  const [compact, setCompact] = React.useState(mode === "playground")
-
-  const title = status === "success" ? "Operation complete" : "Attention required"
-
-  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">Outcome state</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Result should explain what happened next</h3>
-            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
-              Use result for decisive page outcomes: success, failure, missing access, or blocked states. It should never read like a decorative alert.
-            </p>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="outline" className="rounded-full">Success</Badge>
-            <Badge variant="outline" className="rounded-full">Failure</Badge>
-            <Badge variant="outline" className="rounded-full">Blocked access</Badge>
-          </div>
-        </div>
-      </section>
-
-      {mode === "playground" ? (
-        <div className="flex flex-wrap gap-2">
-          <button className="rounded-full border border-[color:var(--aui-divider)] px-4 py-2 text-sm aui-text-muted" onClick={() => setCompact((value) => !value)}>
-            {compact ? "Use roomy mode" : "Use compact mode"}
-          </button>
-          {resultStatuses.map((entry) => (
-            <button key={entry} className={`rounded-full px-4 py-2 text-sm ${status === entry ? "bg-[color:var(--aui-surface-strong)] text-[color:var(--aui-surface-strong-foreground)]" : "border border-[color:var(--aui-divider)] aui-text-muted"}`} onClick={() => setStatus(entry)}>
-              {entry}
-            </button>
-          ))}
-        </div>
-      ) : null}
-
-      <Result
-        status={status}
-        title={title}
-        compact={compact}
-        description={descriptions[status]}
-        actions={<Button size="sm" variant={status === "success" ? "outline" : "default"}>{status === "success" ? "Continue" : "Try again"}</Button>}
-      />
-    </div>
-  )
-}

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

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