tembro 3.1.17 → 4.0.0

package/packages/cli/vendor/src/showcase/premium/notification-center/index.ts

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

package/packages/cli/vendor/src/showcase/premium/notification-center/mock.ts

@@ -1,31 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const notificationCenterMock: ComponentDemoMock = {
-  code: `import * as React from "react"
-import { NotificationCenter } from "tembro"
-
-export function Example() {
-  const [items, setItems] = React.useState([
-    { id: "1", title: "Invoice paid", description: "Acme Growth settled invoice #2048.", time: "2m ago", read: false },
-    { id: "2", title: "Deployment ready", description: "Release candidate passed checks.", time: "12m ago", read: true },
-  ])
-
-  return (
-    <NotificationCenter
-      notifications={items}
-      onMarkAllRead={() => setItems((current) => current.map((item) => ({ ...item, read: true })))}
-    />
-  )
-}`,
-  highlights: ["Unread count badge", "Mark all read action", "Popover-based notification list", "Compact header action surface"],
-  scenarios: [
-    { title: "Workspace updates", description: "Show billing, deployment, or access events in one compact center." },
-    { title: "Admin dashboard", description: "Expose unread tasks without forcing a full dedicated route." },
-    { title: "Operational alerts", description: "Let users clear or inspect events directly from the header." },
-  ],
-  capabilityNotes: [
-    "Notification center is best for short, recent events that require optional follow-up.",
-    "Unread count should reflect genuinely actionable items.",
-    "Avoid treating this as a dumping ground for every system message.",
-  ],
-}

package/packages/cli/vendor/src/showcase/premium/notification-center/showcase.tsx

@@ -1,75 +0,0 @@
-import * as React from "react"
-
-import { Badge, NotificationCenter } 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 seedItems = [
-  { id: "1", title: "Invoice paid", description: "Acme Growth settled invoice #2048.", time: "2m ago", read: false, group: "Today" },
-  { id: "2", title: "Deployment ready", description: "Release candidate passed checks and waits for promotion.", time: "12m ago", read: false, group: "Today" },
-  { id: "3", title: "Member invited", description: "Operations workspace access was sent to Dilshod.", time: "1h ago", read: true, group: "Earlier" },
-]
-
-export function NotificationCenterShowcase({ mode }: ComponentDemoProps) {
-  const [items, setItems] = React.useState(seedItems)
-  const unreadCount = items.filter((item) => !item.read).length
-
-  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">Header utility</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">NotificationCenter should summarize recent action without becoming a second inbox</h3>
-            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
-              This control works when unread counts are honest and the list stays short, recent, and directly actionable.
-            </p>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="outline" className="rounded-full">Unread count</Badge>
-            <Badge variant="outline" className="rounded-full">Popover feed</Badge>
-          </div>
-        </div>
-      </section>
-
-      <section className={panelClass}>
-        <div className="flex items-center justify-between">
-          <div>
-            <p className="text-sm font-medium aui-text-muted">Live notification trigger</p>
-            <p className="mt-2 text-sm leading-6 aui-text-muted">Open the bell and inspect unread items.</p>
-          </div>
-          <NotificationCenter
-            notifications={items}
-            onMarkAllRead={() => setItems((current) => current.map((item) => ({ ...item, read: true })))}
-            onClearAll={() => setItems([])}
-            onNotificationClick={(notification) =>
-              setItems((current) => current.map((item) => (item.id === notification.id ? { ...item, read: true } : item)))
-            }
-          />
-        </div>
-      </section>
-
-      <div className="grid gap-4 xl:grid-cols-2">
-        <section className={panelClass}>
-          <p className="text-sm font-medium aui-text-muted">Unread items</p>
-          <p className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">{unreadCount}</p>
-        </section>
-        <section className={panelClass}>
-          <p className="text-sm font-medium aui-text-muted">Usage note</p>
-          <p className="mt-3 text-sm leading-6 aui-text-muted">
-            Put only high-signal events here. If users need filters, threads, or archives, that usually means they need a dedicated notifications route.
-          </p>
-        </section>
-      </div>
-
-      {mode === "playground" ? (
-        <section className={panelClass}>
-          <p className="text-sm aui-text-muted">Bell ichidagi itemga bosilsa read bo‘ladi, `Mark all read` esa hammasini tozalaydi.</p>
-        </section>
-      ) : null}
-    </div>
-  )
-}

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

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

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

@@ -1,29 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const otpInputMock: ComponentDemoMock = {
-  code: `import * as React from "react"
-import { OtpInput } from "tembro"
-
-export function Example() {
-  const [code, setCode] = React.useState("")
-
-  return (
-    <OtpInput
-      value={code}
-      onValueChange={setCode}
-      length={6}
-    />
-  )
-}`,
-  highlights: ["Fixed-length code entry", "Auto-advance focus", "Paste handling", "Good for 2FA and verification flows"],
-  scenarios: [
-    { title: "Login verification", description: "Capture a 2FA code without forcing users through one input character at a time manually." },
-    { title: "Sensitive action confirm", description: "Verify a short access code before dangerous changes." },
-    { title: "Invite acceptance", description: "Handle compact confirmation codes in onboarding flows." },
-  ],
-  capabilityNotes: [
-    "OTP is for short fixed codes, not general PIN builders with complex rules.",
-    "Paste support matters because users often copy codes from mail or authenticator apps.",
-    "Keep the surrounding copy minimal and precise.",
-  ],
-}

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

@@ -1,55 +0,0 @@
-import * as React from "react"
-
-import { Badge, OtpInput } 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 OtpInputShowcase({ mode }: ComponentDemoProps) {
-  const [code, setCode] = React.useState("")
-
-  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">Verification input</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">OtpInput should make fixed-code entry feel automatic</h3>
-            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
-              Users should not wrestle with focus or manual cell management. Paste and auto-advance behavior are the main value here.
-            </p>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="outline" className="rounded-full">Auto advance</Badge>
-            <Badge variant="outline" className="rounded-full">Paste aware</Badge>
-          </div>
-        </div>
-      </section>
-
-      <section className={panelClass}>
-        <OtpInput value={code} onValueChange={setCode} length={6} />
-      </section>
-
-      <div className="grid gap-4 xl:grid-cols-2">
-        <section className={panelClass}>
-          <p className="text-sm font-medium aui-text-muted">Current code</p>
-          <p className="mt-3 text-base font-medium aui-text-strong">{code || "No code entered"}</p>
-        </section>
-        <section className={panelClass}>
-          <p className="text-sm font-medium aui-text-muted">Usage note</p>
-          <p className="mt-3 text-sm leading-6 aui-text-muted">
-            Bir martalik tasdiqlash kodlari uchun ishlating. Odatda 4-6 belgili verification yoki 2FA oqimlarida eng foydali.
-          </p>
-        </section>
-      </div>
-
-      {mode === "playground" ? (
-        <section className={panelClass}>
-          <p className="text-sm aui-text-muted">Clipboarddan 6 xonali kod paste qilib ham tekshirib ko‘ring.</p>
-        </section>
-      ) : null}
-    </div>
-  )
-}

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

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

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

@@ -1,30 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const pageStateMock: ComponentDemoMock = {
-  code: `import { Button, InlineState, 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>}
-      />
-      <InlineState tone="empty" title="No comments" onRetry={() => refetch()} />
-    </>
-  )
-}`,
-  highlights: ["Full-page and compact inline surfaces", "Empty, loading, success, info, and error flows", "Retry and custom action support", "Accessible status and alert roles"],
-  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

@@ -1,94 +0,0 @@
-import * as React from "react"
-
-import { Badge, Button, InlineState, 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 [actionMessage, setActionMessage] = React.useState("No action triggered yet")
-  const [retryCount, setRetryCount] = React.useState(0)
-  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"} onClick={() => setActionMessage(`${tone} action completed`)}>
-              {tone === "empty" ? "Create invoice" : tone === "error" ? "Retry sync" : tone === "success" ? "Open dashboard" : "View progress"}
-            </Button>
-          )
-        }
-        extra={tone === "error" ? <Button variant="ghost" onClick={() => setActionMessage("Logs opened")}>Open logs</Button> : undefined}
-      />
-
-      <section className={panelClass}>
-        <div className="grid gap-4 lg:grid-cols-2">
-          <InlineState
-            tone="error"
-            title="Widget unavailable"
-            description={`Compact retry state. Attempts: ${retryCount}`}
-            retryLabel="Retry widget"
-            onRetry={() => setRetryCount((value) => value + 1)}
-          />
-          <InlineState
-            tone="success"
-            title="Changes published"
-            description="Use the compact surface inside a section without replacing the whole route."
-            action={<Button size="sm" onClick={() => setActionMessage("Published changes opened")}>View changes</Button>}
-          />
-        </div>
-        <p aria-live="polite" className="mt-4 text-sm aui-text-muted">{actionMessage}</p>
-      </section>
-
-      {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/pagination/index.ts

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

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

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

@@ -1,93 +0,0 @@
-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)
-  const [pageSize, setPageSize] = React.useState(20)
-
-  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}
-            totalCount={pageCount * pageSize}
-            pageSize={pageSize}
-            pageSizeOptions={[10, 20, 50]}
-            onPageSizeChange={setPageSize}
-            showSummary
-          />
-        </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>Page size: <span className="font-medium aui-text-strong">{pageSize}</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/popover/data.ts

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

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

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

@@ -1,90 +0,0 @@
-import { Button, Input, 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="grid gap-5 xl:grid-cols-[0.85fr_1.15fr]">
-          <div>
-            <p className="text-lg font-semibold aui-text-strong">Inline settings form</p>
-            <p className="mt-2 max-w-xl text-sm leading-6 aui-text-muted">
-              Short forms fit when they change a local view and can be dismissed without losing page context.
-            </p>
-          </div>
-          <div className="flex justify-start xl:justify-end">
-            <Popover>
-              <PopoverTrigger render={<Button variant="outline" />}>Edit workspace</PopoverTrigger>
-              <PopoverContent align="end" collisionPadding={16}>
-                <PopoverHeader>
-                  <PopoverTitle>Workspace details</PopoverTitle>
-                  <PopoverDescription>Update the label used in local navigation.</PopoverDescription>
-                </PopoverHeader>
-                <div className="grid gap-3">
-                  <Input aria-label="Workspace name" defaultValue="Growth analytics" />
-                  <Input aria-label="Workspace slug" defaultValue="growth" />
-                </div>
-                <div className="flex justify-end gap-2">
-                  <Button type="button" variant="secondary" size="sm">Cancel</Button>
-                  <Button type="button" size="sm">Save</Button>
-                </div>
-              </PopoverContent>
-            </Popover>
-          </div>
-        </div>
-      </section>
-    </div>
-  )
-}

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

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

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

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