tembro 3.1.17 → 4.0.0

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

@@ -1,57 +0,0 @@
-import { actionsShowcaseDemoRegistry } from "@/components/actions/demo"
-import { calendarShowcaseDemoRegistry } from "@/components/calendar/demo"
-import { chartsShowcaseDemoRegistry } from "@/components/charts/demo"
-import { dataTableShowcaseDemoRegistry } from "@/components/data-table/demo"
-import { displayShowcaseDemoRegistry } from "@/components/display/demo"
-import { feedbackShowcaseDemoRegistry } from "@/components/feedback/demo"
-import { filtersShowcaseDemoRegistry } from "@/components/filters/demo"
-import { formShowcaseDemoRegistry } from "@/components/form/demo"
-import { inputsShowcaseDemoRegistry } from "@/components/inputs/demo"
-import { layoutShowcaseDemoRegistry } from "@/components/layout/demo"
-import { navigationShowcaseDemoRegistry } from "@/components/navigation/demo"
-import { overlayShowcaseDemoRegistry } from "@/components/overlay/demo"
-import { patternsShowcaseDemoRegistry } from "@/components/patterns/demo"
-import { uploadShowcaseDemoRegistry } from "@/components/upload/demo"
-import { wizardShowcaseDemoRegistry } from "@/components/wizard/demo"
-import { defaultComponentDemoState, premiumShowcaseDemoRegistry } from "./premium"
-import { registryQualityDemoRegistry } from "./registry-quality"
-import { registrySpecificDemoRegistry } from "./registry-specific"
-import { supplementalShowcaseDemoRegistry } from "./supplemental"
-
-export * from "./types"
-export * from "./premium"
-export * from "./registry-quality"
-export * from "./registry-specific"
-export * from "./fallback"
-export * from "./preview-catalog"
-export * from "./preview-registry"
-export * from "./site-data"
-export * from "./component-api-schema"
-export * from "./search-utils"
-export * from "./package-meta"
-export * from "./supplemental"
-
-export const showcaseDemoRegistry = {
-  ...actionsShowcaseDemoRegistry,
-  ...calendarShowcaseDemoRegistry,
-  ...chartsShowcaseDemoRegistry,
-  ...dataTableShowcaseDemoRegistry,
-  ...displayShowcaseDemoRegistry,
-  ...feedbackShowcaseDemoRegistry,
-  ...filtersShowcaseDemoRegistry,
-  ...formShowcaseDemoRegistry,
-  ...inputsShowcaseDemoRegistry,
-  ...layoutShowcaseDemoRegistry,
-  ...navigationShowcaseDemoRegistry,
-  ...overlayShowcaseDemoRegistry,
-  ...patternsShowcaseDemoRegistry,
-  ...uploadShowcaseDemoRegistry,
-  ...wizardShowcaseDemoRegistry,
-  ...registrySpecificDemoRegistry,
-  ...supplementalShowcaseDemoRegistry,
-  ...registryQualityDemoRegistry,
-  ...premiumShowcaseDemoRegistry,
-}
-
-export { defaultComponentDemoState }
-export const componentDemoRegistry = showcaseDemoRegistry

package/packages/cli/vendor/src/showcase/package-meta.ts

@@ -1,4 +0,0 @@
-export const PACKAGE_LATEST_VERSION = "3.1.17"
-export const PACKAGE_LATEST_RELEASE_DATE = "July 15, 2026"
-export const PACKAGE_DEPENDENCY_RANGE = PACKAGE_LATEST_VERSION
-

package/packages/cli/vendor/src/showcase/premium/action-menu/index.ts

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

package/packages/cli/vendor/src/showcase/premium/action-menu/mock.ts

@@ -1,29 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const actionMenuMock: ComponentDemoMock = {
-  code: `import { ActionMenu } from "tembro"
-
-export function Example() {
-  return (
-    <ActionMenu
-      label="Row actions"
-      actions={[
-        { key: "open", label: "Open" },
-        { key: "duplicate", label: "Duplicate" },
-        { key: "archive", label: "Archive", destructive: true },
-      ]}
-    />
-  )
-}`,
-  highlights: ["Compact row actions", "Async action loading state", "Destructive item styling", "Works well inside tables and cards"],
-  scenarios: [
-    { title: "Table row actions", description: "Collapse inspect, duplicate, and archive operations into one compact surface." },
-    { title: "Card menu", description: "Attach contextual actions to summary cards without visual clutter." },
-    { title: "Dense admin tools", description: "Preserve space while keeping operational actions discoverable." },
-  ],
-  capabilityNotes: [
-    "ActionMenu is strongest when actions are secondary to the main content.",
-    "Use clear verb labels and reserve destructive styling for genuinely destructive operations.",
-    "If every action is primary, a visible button row may be better than a menu.",
-  ],
-}

package/packages/cli/vendor/src/showcase/premium/action-menu/showcase.tsx

@@ -1,71 +0,0 @@
-import * as React from "react"
-import { ArchiveIcon, CopyIcon, ExternalLinkIcon } from "lucide-react"
-
-import { ActionMenu, Badge } 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 ActionMenuShowcase({ mode }: ComponentDemoProps) {
-  const [lastAction, setLastAction] = React.useState("No action selected")
-  const [pinOpen, setPinOpen] = 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">Compact actions</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">ActionMenu should hide secondary actions, not critical path actions</h3>
-            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
-              This surface is ideal for row or card actions that matter, but should not dominate the layout.
-            </p>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="outline" className="rounded-full">Contextual</Badge>
-            <Badge variant="outline" className="rounded-full">Secondary actions</Badge>
-          </div>
-        </div>
-      </section>
-
-      <div className="grid gap-4 xl:grid-cols-2">
-        <section className={panelClass}>
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-sm font-medium aui-text-strong">Invoice #2048</p>
-              <p className="mt-1 text-sm aui-text-muted">Acme Growth payment workflow</p>
-            </div>
-            <ActionMenu
-              label="Invoice actions"
-              closeOnSelect={!pinOpen}
-              actions={[
-                { key: "open", section: "Primary", label: "Open details", description: "Jump into the full invoice route", icon: <ExternalLinkIcon className="size-4" />, shortcut: "↵", onSelect: async () => setLastAction("Opened invoice details") },
-                { key: "duplicate", section: "Primary", label: "Duplicate", description: "Create a new workflow from this one", icon: <CopyIcon className="size-4" />, keepOpen: pinOpen, onSelect: async () => setLastAction("Duplicated invoice workflow") },
-                { key: "archive", section: "Danger zone", label: "Archive", description: "Hide it from active operational queues", icon: <ArchiveIcon className="size-4" />, destructive: true, onSelect: async () => setLastAction("Archived invoice workflow") },
-              ]}
-            />
-          </div>
-        </section>
-        <section className={panelClass}>
-          <p className="text-sm font-medium aui-text-muted">Last action</p>
-          <p className="mt-3 text-base font-medium aui-text-strong">{lastAction}</p>
-          <button
-            type="button"
-            className="mt-4 rounded-full border border-[color:var(--aui-divider)] px-3 py-1.5 text-xs font-medium"
-            onClick={() => setPinOpen((value) => !value)}
-          >
-            {pinOpen ? "Close on select off" : "Close on select on"}
-          </button>
-        </section>
-      </div>
-
-      {mode === "playground" ? (
-        <section className={panelClass}>
-          <p className="text-sm aui-text-muted">ActionMenu table row, card header yoki compact list itemlarda juda foydali.</p>
-        </section>
-      ) : null}
-    </div>
-  )
-}

package/packages/cli/vendor/src/showcase/premium/activity-feed/index.ts

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

package/packages/cli/vendor/src/showcase/premium/activity-feed/mock.ts

@@ -1,28 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const activityFeedMock: ComponentDemoMock = {
-  code: `import { ActivityFeed } from "tembro"
-
-const items = [
-  { id: "i-1", title: "Team invited", description: "New designer joined the workspace.", time: "2 min ago", tone: "info" },
-  { id: "i-2", title: "Deployment succeeded", description: "Staging deployment passed smoke checks.", time: "12 min ago", tone: "success" },
-  { id: "i-3", title: "Payment issue", description: "Invoice sync failed, retry queue enabled.", time: "34 min ago", tone: "warning" },
-]
-
-export function Example() {
-  return <ActivityFeed title="Recent activity" items={items} compact />
-}`,
-  highlights: ["Audit feed for admins", "Time-based event rows", "Status tones", "Compact list mode"],
-  relatedBlockSlugs: ["dashboard-starter", "crm-dashboard", "users-table"],
-  scenarios: [
-    { title: "Operation logs", description: "Show timeline-like events in a side panel near detail content." },
-    { title: "Approval queue", description: "Keep audit trails visible next to table actions." },
-    { title: "System health feeds", description: "Surface important background events without overwhelming layout." },
-  ],
-  capabilityNotes: [
-    "Provide stable `id` values for each item to avoid flicker in updates.",
-    "Use meaningful `time` strings and `tone` to communicate action urgency.",
-    "Use `compact` for narrow sidebars and dense dashboard sections.",
-  ],
-}
-

package/packages/cli/vendor/src/showcase/premium/activity-feed/showcase.tsx

@@ -1,78 +0,0 @@
-import * as React from "react"
-
-import { ActivityFeed, Badge, Button } from "@/index"
-
-import type { ComponentDemoProps } from "../types"
-
-const items = [
-  { id: "i-1", title: "Team invited", description: "New designer joined the workspace.", time: "2 min ago", tone: "info" as const },
-  { id: "i-2", title: "Deployment succeeded", description: "Staging deployment passed smoke checks.", time: "12 min ago", tone: "success" as const },
-  { id: "i-3", title: "Invoice warning", description: "Payment sync delayed in queue, retrying soon.", time: "34 min ago", tone: "warning" as const },
-  { id: "i-4", title: "Critical alert", description: "Webhook failed for production billing endpoint.", time: "1h ago", tone: "danger" as const },
-]
-
-const toneFilters = ["all", "success", "warning", "info", "danger"] as const
-
-type ToneFilter = (typeof toneFilters)[number]
-
-export function ActivityFeedShowcase({ mode }: ComponentDemoProps) {
-  const [compact, setCompact] = React.useState(mode === "playground")
-  const [filter, setFilter] = React.useState<ToneFilter>("all")
-  const [selectedId, setSelectedId] = React.useState<string | null>(null)
-
-  const visibleItems = React.useMemo(() => {
-    if (filter === "all") {
-      return items
-    }
-
-    return items.filter((item) => item.tone === filter)
-  }, [filter])
-
-  return (
-    <div className="space-y-4">
-      <div className="grid gap-2">
-        <div className="aui-text-muted text-sm">Density: {compact ? "Compact" : "Spacious"}</div>
-        <div className="flex flex-wrap gap-2">
-          <button
-            type="button"
-            className="rounded-lg border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)] px-3 py-2 text-sm"
-            onClick={() => setCompact((value) => !value)}
-          >
-            {compact ? "Use spacious" : "Use compact"}
-          </button>
-          {toneFilters.map((entry) => (
-            <button
-              key={entry}
-              type="button"
-              className={`rounded-lg border px-3 py-2 text-sm ${filter === entry ? "aui-surface-strong border-[color:var(--aui-surface-strong)]" : "border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface)]"}`}
-              onClick={() => setFilter(entry)}
-            >
-              {entry}
-            </button>
-          ))}
-        </div>
-      </div>
-
-      <ActivityFeed
-        title="Recent activity"
-        description="System and team events are grouped into one lightweight feed."
-        items={visibleItems.map((item, index) => ({
-          ...item,
-          unread: index === 0,
-          badge: index === 0 ? <Badge variant="secondary">Unread</Badge> : undefined,
-          interactive: true,
-          onSelect: () => setSelectedId(item.id),
-          actions: (
-            <Button size="xs" variant="ghost" onClick={() => setSelectedId(item.id)}>
-              Review
-            </Button>
-          ),
-        }))}
-        compact={compact}
-        empty={<span className="aui-text-muted text-sm">No matching activity for selected tone.</span>}
-      />
-      <div className="aui-text-muted text-sm">Selected item: {selectedId ?? "none"}</div>
-    </div>
-  )
-}
-

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

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

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

@@ -1,27 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const alertMock: ComponentDemoMock = {
-  code: `import { Alert, Button } from "tembro"
-
-export function Example() {
-  return (
-    <Alert
-      tone="warning"
-      title="Review needed"
-      description="Billing rules changed and one approval is pending."
-      action={<Button size="sm">Open review</Button>}
-    />
-  )
-}`,
-  highlights: ["Inline feedback with action slot", "Tone-based severity states", "Works for info, success, warning, and destructive messaging", "Compact enough for forms, settings, and dashboards"],
-  scenarios: [
-    { title: "Pending approval", description: "Warn the user before a release or billing action moves forward." },
-    { title: "Success confirmation", description: "Show a short post-save confirmation without forcing a toast." },
-    { title: "Inline form issue", description: "Attach next-step guidance directly where attention is needed." },
-  ],
-  capabilityNotes: [
-    "Use alerts for actionable inline status, not for decorative emphasis.",
-    "Pair warning and destructive tones with a specific next action.",
-    "Keep the title decisive and the description operational.",
-  ],
-}

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

@@ -1,107 +0,0 @@
-import * as React from "react"
-
-import { Alert, Badge, Button } 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 = ["info", "success", "warning", "destructive"] as const
-
-export function AlertShowcase({ mode }: ComponentDemoProps) {
-  const [toneIndex, setToneIndex] = React.useState(2)
-  const [resolvedCount, setResolvedCount] = React.useState(0)
-  const [visible, setVisible] = React.useState(true)
-
-  const tone = tones[toneIndex] ?? "warning"
-
-  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">Inline feedback</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Alert should guide the next user decision</h3>
-            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
-              Use alert when the page needs a visible, contextual message with a clear action. It should feel operational, not decorative.
-            </p>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="outline" className="rounded-full">Context aware</Badge>
-            <Badge variant="outline" className="rounded-full">Action ready</Badge>
-          </div>
-        </div>
-      </section>
-
-      {visible ? (
-        <Alert
-          tone={tone}
-          dismissible
-          onDismiss={() => setVisible(false)}
-          actionsAlign={tone === "destructive" ? "start" : "end"}
-          title={tone === "success" ? "Workspace synced" : tone === "destructive" ? "Action blocked" : tone === "info" ? "Heads up" : "Review needed"}
-          description={
-            tone === "success"
-              ? "Changes were saved and the team can continue safely."
-              : tone === "destructive"
-                ? "The release cannot continue until billing permissions are restored."
-                : tone === "info"
-                  ? "Usage data refreshed and one metric changed since your last visit."
-                  : "Billing rules changed and one approval is pending before publish."
-          }
-          action={
-            <Button size="sm" variant={tone === "destructive" ? "destructive" : "default"} onClick={() => setResolvedCount((value) => value + 1)}>
-              {tone === "success" ? "Continue" : tone === "destructive" ? "Fix access" : tone === "info" ? "Open details" : "Open review"}
-            </Button>
-          }
-        />
-      ) : (
-        <section className={panelClass}>
-          <p className="text-sm font-medium aui-text-muted">Alert dismissed</p>
-          <Button className="mt-4" size="sm" variant="outline" onClick={() => setVisible(true)}>
-            Restore alert
-          </Button>
-        </section>
-      )}
-
-      <div className="grid gap-4 xl:grid-cols-[0.9fr_1.1fr]">
-        <section className={panelClass}>
-          <p className="text-sm font-medium aui-text-muted">Action count</p>
-          <p className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">{resolvedCount}</p>
-          <p className="mt-2 text-sm leading-6 aui-text-muted">Alert CTA should resolve a real decision, not just dismiss a message.</p>
-        </section>
-        <section className={panelClass}>
-          <p className="text-sm font-medium aui-text-muted">Recommended usage</p>
-          <div className="mt-4 space-y-3 text-sm leading-6 aui-text-muted">
-            <p>Put alert above the affected surface, form, or result area.</p>
-            <p>Prefer one primary action. If the user only needs acknowledgment, use toast instead.</p>
-          </div>
-        </section>
-      </div>
-
-      {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>
-            ))}
-            <Button size="sm" variant="outline" onClick={() => setResolvedCount(0)}>
-              Reset counter
-            </Button>
-            <Button size="sm" variant="outline" onClick={() => setVisible(true)}>
-              Show alert
-            </Button>
-          </div>
-        </section>
-      ) : null}
-    </div>
-  )
-}

package/packages/cli/vendor/src/showcase/premium/alert-dialog/index.ts

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

package/packages/cli/vendor/src/showcase/premium/alert-dialog/mock.ts

@@ -1,34 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const alertDialogMock: ComponentDemoMock = {
-  code: `import * as React from "react"
-import { AlertDialog, Button } from "tembro"
-
-export function Example() {
-  const [open, setOpen] = React.useState(false)
-
-  return (
-    <>
-      <Button variant="destructive" onClick={() => setOpen(true)}>Delete workspace</Button>
-      <AlertDialog
-        open={open}
-        onOpenChange={setOpen}
-        title="Delete workspace?"
-        description="This removes active billing rules and member access."
-        actionLabel="Delete"
-      />
-    </>
-  )
-}`,
-  highlights: ["Destructive confirmation flow", "Async-ready action state", "Strong title + consequence copy", "Built on the same dialog primitives as the rest of the system"],
-  scenarios: [
-    { title: "Delete resource", description: "Require explicit confirmation before destructive irreversible actions." },
-    { title: "Reset configuration", description: "Warn users when policies, tokens, or routes will be cleared." },
-    { title: "High-risk approval", description: "Pause sensitive admin actions until the user confirms consequences." },
-  ],
-  capabilityNotes: [
-    "Use alert-dialog only for genuinely high-risk actions.",
-    "The description should explain consequence, not restate the title.",
-    "If the action is recoverable or low-risk, a regular dialog is often enough.",
-  ],
-}

package/packages/cli/vendor/src/showcase/premium/alert-dialog/showcase.tsx

@@ -1,108 +0,0 @@
-import * as React from "react"
-
-import { AlertDialog, Badge, Button } 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 AlertDialogShowcase({ mode }: ComponentDemoProps) {
-  const [open, setOpen] = React.useState(false)
-  const [loading, setLoading] = React.useState(false)
-  const [lastResult, setLastResult] = React.useState("No action confirmed yet")
-  const [strictMode, setStrictMode] = React.useState(true)
-  const [caseSensitive, setCaseSensitive] = React.useState(true)
-  const [shouldFail, setShouldFail] = 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">Destructive gate</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">AlertDialog should interrupt only when the action has real consequence</h3>
-            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
-              This is not a generic modal. It exists to slow the user down before irreversible, expensive, or risky operations.
-            </p>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="outline" className="rounded-full">High risk</Badge>
-            <Badge variant="outline" className="rounded-full">Explicit confirmation</Badge>
-          </div>
-        </div>
-      </section>
-
-      <section className={panelClass}>
-        <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
-          <div>
-            <p className="text-sm font-medium aui-text-muted">Live destructive flow</p>
-            <p className="mt-2 text-sm leading-6 aui-text-muted">Open the dialog and confirm a risky workspace action.</p>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Button variant={caseSensitive ? "secondary" : "outline"} onClick={() => setCaseSensitive((value) => !value)}>
-              {caseSensitive ? "Case sensitive" : "Case insensitive"}
-            </Button>
-            <Button variant={strictMode ? "secondary" : "outline"} onClick={() => setStrictMode((value) => !value)}>
-              {strictMode ? "Typed confirm on" : "Typed confirm off"}
-            </Button>
-            <Button variant={shouldFail ? "warning" : "outline"} onClick={() => setShouldFail((value) => !value)}>
-              {shouldFail ? "Failure mode on" : "Failure mode off"}
-            </Button>
-            <Button variant="destructive" onClick={() => setOpen(true)}>
-              Delete workspace
-            </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">Last result</p>
-          <p className="mt-3 text-base font-medium aui-text-strong">{lastResult}</p>
-        </section>
-        <section className={panelClass}>
-          <p className="text-sm font-medium aui-text-muted">Design rule</p>
-          <p className="mt-3 text-sm leading-6 aui-text-muted">
-            Keep alert-dialog copy direct: what will happen, what is lost, and what the user should expect next.
-          </p>
-        </section>
-      </div>
-
-      <AlertDialog
-        open={open}
-        onOpenChange={setOpen}
-        loading={loading}
-        title="Delete workspace?"
-        description="This removes active billing rules, API tokens, and member access from the selected workspace."
-        actionLabel="Delete workspace"
-        confirmValue={strictMode ? "DELETE" : undefined}
-        confirmCaseSensitive={caseSensitive}
-        confirmLabel="High-risk confirmation"
-        confirmDescription="Type DELETE to confirm you want to remove this workspace and its active access."
-        severityNote="Deleting a workspace clears active access, billing rules, and route-level secrets for the current team."
-        errorMessage="Workspace could not be deleted right now. Check dependent billing or retry."
-        onAction={async () => {
-          setLoading(true)
-          await new Promise((resolve) => window.setTimeout(resolve, 450))
-          if (shouldFail) {
-            setLoading(false)
-            throw new Error("dependent billing")
-          }
-          setLoading(false)
-          setOpen(false)
-          setLastResult("Workspace deletion confirmed")
-        }}
-        onActionError={() => setLastResult("Workspace deletion failed")}
-      />
-
-      {mode === "playground" ? (
-        <section className={panelClass}>
-          <Button size="sm" variant="outline" onClick={() => setLastResult("No action confirmed yet")}>
-            Reset result
-          </Button>
-        </section>
-      ) : null}
-    </div>
-  )
-}

package/packages/cli/vendor/src/showcase/premium/app-sidebar/index.ts

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

package/packages/cli/vendor/src/showcase/premium/app-sidebar/mock.ts

@@ -1,55 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const appSidebarMock: ComponentDemoMock = {
-  code: `import { Link } from "react-router-dom"
-import { Sidebar } from "tembro"
-
-const items = [
-  { key: "overview", label: "Overview", href: "/overview", active: true, sectionLabel: "Workspace" },
-  {
-    key: "customers",
-    label: "Customers",
-    badge: "12",
-    defaultExpanded: true,
-    items: [
-      { key: "active", label: "Active", href: "/customers/active" },
-      { key: "archived", label: "Archived", href: "/customers/archived" },
-    ],
-  },
-  { key: "billing", label: "Billing", href: "/billing", sectionLabel: "Manage" },
-  { key: "settings", label: "Settings", href: "/settings", disabled: true },
-]
-
-export function Example() {
-  return (
-    <Sidebar
-      items={items}
-      navigationLabel="Workspace navigation"
-      itemSize="md"
-      activeIndicator="bar"
-      showSectionLabels
-      responsive
-      renderLink={({ item: _item, href = "/", ...props }) => (
-        <Link {...props} to={href} />
-      )}
-      header={<div className="px-3 py-2 text-sm font-semibold">Azamat Workspace</div>}
-      footerAccount={{ label: "Azamat Workspace", description: "Starter plan", avatar: "AW" }}
-      secondaryActions={[{ key: "support", label: "Support", href: "/support" }]}
-      onItemSelect={(item) => console.log(item.key)}
-    />
-  )
-}`,
-  highlights: ["Nested and collapsible route groups", "Three density modes", "Bar, pill and minimal active indicators", "Responsive mobile navigation", "Custom link rendering"],
-  scenarios: [
-    { title: "Workspace shell", description: "Use one sidebar contract across dashboards, settings and dense internal tools." },
-    { title: "Router integration", description: "Swap anchors with framework links through renderLink without rewriting item state." },
-    { title: "Collapsed desktop rail", description: "Keep icons visible when space is tight, but preserve labels in expanded mode." },
-  ],
-  capabilityNotes: [
-    "Keep one items array as the source of truth for label, badge, disabled and active route state.",
-    "Use the header slot for workspace identity, not for unrelated page actions.",
-    "Collapsed mode works best when icons stay distinctive and current route is still obvious.",
-    "Use navigationLabel and the mobile labels when the product language is not English.",
-    "Prefer Sidebar for reusable nav chrome; move to AppShell only when the full page frame is also shared.",
-  ],
-}