tembro 3.1.17 → 4.0.0

package/packages/cli/vendor/src/showcase/premium/data-table/types.ts

@@ -1,25 +0,0 @@
-export type DataTableDemoRow = {
-  invoice: string
-  order: string
-  customer: string
-  owner: string
-  channel: string
-  status: "Paid" | "Review" | "Draft" | "Overdue"
-  stock: number
-  items: number
-  amount: string
-  amountValue: number
-  trend: "up" | "down" | "steady"
-  updatedAt: string
-}
-
-export type DataTableDemoToolbarAction = {
-  label: string
-  variant: "default" | "outline"
-}
-
-export type DataTableDemoPreset = {
-  value: "all" | "finance" | "at-risk"
-  label: string
-  description: string
-}

package/packages/cli/vendor/src/showcase/premium/date-picker/index.ts

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

package/packages/cli/vendor/src/showcase/premium/date-picker/mock.ts

@@ -1,36 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const datePickerMock: ComponentDemoMock = {
-  code: `import { useState } from "react"
-import { DatePicker } from "tembro"
-
-export function Example() {
-  const [value, setValue] = useState("2026-06-19")
-
-  return (
-    <DatePicker
-      value={value}
-      onValueChange={setValue}
-      min="2026-06-01"
-      max="2026-12-31"
-      disabledDates={["2026-06-21"]}
-    />
-  )
-}`,
-  htmlCode: '<label for="date-picker">Date</label><input id="date-picker" type="text" value="2026-06-19" />',
-  cliCommand: "npx tembro add date-picker",
-  highlights: ["Popover selection", "Range guard rails", "disabledDates support", "Min and max windows"],
-  relatedBlockSlugs: ["crm-dashboard", "users-table", "settings-form"],
-  scenarios: [
-    { title: "Booking date", description: "Select a single day from constrained calendar options." },
-    { title: "Campaign date", description: "Pick start date for campaign planning." },
-    { title: "Holiday exclusions", description: "Block specific dates by disabledDates list." },
-    { title: "Read-only windows", description: "Disable picker when record is locked." },
-  ],
-  capabilityNotes: [
-    "Use a locale- and timezone-aware normalization layer in the app, not inside UI callback." ,
-    "Keep disabledDates in the same format as your data source." ,
-    "Persist as canonical string while rendering localized view." ,
-    "Validate with server side checks for closed periods and blackout dates." ,
-  ],
-}

package/packages/cli/vendor/src/showcase/premium/date-picker/showcase.tsx

@@ -1,24 +0,0 @@
-import { useState } from "react"
-
-import { DatePicker } from "@/index"
-
-import type { ComponentDemoProps } from "../types"
-
-export function DatePickerShowcase({ mode }: ComponentDemoProps) {
-  const [value, setValue] = useState("2026-06-19")
-
-  return (
-    <div className="space-y-4">
-      <DatePicker
-        value={value}
-        onValueChange={setValue}
-        min="2026-06-01"
-        max="2026-12-31"
-        disabledDates={["2026-06-21"]}
-      />
-      <p className="aui-text-subtle text-sm">Selected: {value || "—"}</p>
-      <p className="aui-text-muted text-sm">Mode: {mode}</p>
-    </div>
-  )
-}
-

package/packages/cli/vendor/src/showcase/premium/date-range-picker/index.ts

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

package/packages/cli/vendor/src/showcase/premium/date-range-picker/mock.ts

@@ -1,36 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const dateRangePickerMock: ComponentDemoMock = {
-  code: `import { useState } from "react"
-import { DateRangePicker } from "tembro"
-
-export function Example() {
-  const [value, setValue] = useState({ from: "2026-06-01", to: "2026-06-07" })
-
-  return (
-    <DateRangePicker
-      value={value}
-      onValueChange={(nextValue) => setValue({ from: nextValue.from ?? "", to: nextValue.to ?? "" })}
-      min="2026-06-01"
-      max="2026-12-31"
-      disabledDates={["2026-06-21", "2026-06-22"]}
-    />
-  )
-}`,
-  htmlCode: '<label for="date-range-picker">Date range</label><input id="date-range-picker" type="text" value="2026-06-01 to 2026-06-07" />',
-  cliCommand: "npx tembro add date-range-picker",
-  highlights: ["Range popover behavior", "disabledDates support", "from/to object format", "min/max constraints"],
-  relatedBlockSlugs: ["crm-dashboard", "users-table", "pricing-section"],
-  scenarios: [
-    { title: "Reporting window", description: "Select a period for period-based reports." },
-    { title: "Campaign sprint", description: "Keep campaign launch and end dates linked as a single value." },
-    { title: "Blocked windows", description: "Exclude blackout dates with disabledDates list." },
-    { title: "Read-only mode", description: "Disable pickers for locked records and history editing." },
-  ],
-  capabilityNotes: [
-    "Validate that `from` is before `to` before submit." ,
-    "Use partial range guards and avoid fetching until both bounds are selected." ,
-    "Normalize to server timezone to avoid midnight and boundary drift." ,
-    "Store disabled periods in one source and share with all date controls." ,
-  ],
-}

package/packages/cli/vendor/src/showcase/premium/date-range-picker/showcase.tsx

@@ -1,31 +0,0 @@
-import { useState } from "react"
-
-import { DateRangePicker } from "@/index"
-
-import type { ComponentDemoProps } from "../types"
-
-export function DateRangePickerShowcase({ mode }: ComponentDemoProps) {
-  const [value, setValue] = useState({ from: "2026-06-01", to: "2026-06-07" })
-
-  return (
-    <div className="space-y-4">
-      <DateRangePicker
-        value={value}
-        onValueChange={(nextValue: { from?: string | null; to?: string | null }) => setValue({ from: nextValue.from ?? "", to: nextValue.to ?? "" })}
-        min="2026-06-01"
-        max="2026-12-31"
-        disabledDates={["2026-06-21", "2026-06-22"]}
-        closeOnPresetSelect
-        presets={[
-          { label: "This week", value: { from: "2026-06-01", to: "2026-06-07" } },
-          { label: "Next 14 days", value: { from: "2026-06-08", to: "2026-06-20" } },
-          { label: "Q3", value: { from: "2026-07-01", to: "2026-09-30" } },
-        ]}
-        labels={{ placeholder: "Choose reporting range", apply: "Apply range", clear: "Clear", start: "Start", end: "End" }}
-      />
-      <p className="aui-text-subtle text-sm">Range: {value.from} → {value.to}</p>
-      <p className="aui-text-muted text-sm">Mode: {mode}</p>
-    </div>
-  )
-}
-

package/packages/cli/vendor/src/showcase/premium/description-list/index.ts

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

package/packages/cli/vendor/src/showcase/premium/description-list/mock.ts

@@ -1,29 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const descriptionListMock: ComponentDemoMock = {
-  code: `import { DescriptionList } from "tembro"
-
-export function Example() {
-  return (
-    <DescriptionList
-      title="Invoice details"
-      items={[
-        { key: "customer", label: "Customer", value: "Acme Growth" },
-        { key: "status", label: "Status", value: "Paid" },
-        { key: "total", label: "Total", value: "$4,280" },
-      ]}
-    />
-  )
-}`,
-  highlights: ["Structured key-value layout", "Grid column control", "Header actions and descriptions", "Good for entity, invoice, and profile details"],
-  scenarios: [
-    { title: "Invoice facts", description: "Display billing metadata in a scannable form." },
-    { title: "Workspace profile", description: "Group account settings and ownership information clearly." },
-    { title: "Customer summary", description: "Expose key details without writing a custom grid every time." },
-  ],
-  capabilityNotes: [
-    "Description lists work best for static or slow-changing factual data.",
-    "Use them when labels matter as much as values.",
-    "Avoid forcing long narrative content into this format.",
-  ],
-}

package/packages/cli/vendor/src/showcase/premium/description-list/showcase.tsx

@@ -1,49 +0,0 @@
-import { Badge, Button, DescriptionList } 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 DescriptionListShowcase({ mode }: ComponentDemoProps) {
-  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">Facts surface</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">DescriptionList should turn raw metadata into readable facts</h3>
-            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
-              This surface is strongest when the user needs to inspect concrete fields quickly, not interpret a dense freeform card.
-            </p>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="outline" className="rounded-full">Structured</Badge>
-            <Badge variant="outline" className="rounded-full">Operational metadata</Badge>
-          </div>
-        </div>
-      </section>
-
-      <DescriptionList
-        title="Invoice details"
-        description="Stable operational metadata for support and billing teams."
-        columns={2}
-        actions={<Button size="sm" variant="outline">Edit</Button>}
-        items={[
-          { key: "customer", label: "Customer", value: "Acme Growth" },
-          { key: "status", label: "Status", value: "Paid" },
-          { key: "owner", label: "Owner", value: "A. Jurayev" },
-          { key: "amount", label: "Total", value: "$4,280" },
-          { key: "method", label: "Payment method", value: "Corporate card" },
-          { key: "notes", label: "Notes", value: "Requires monthly reconciliation with finance.", span: 2 },
-        ]}
-      />
-
-      {mode === "playground" ? (
-        <section className={panelClass}>
-          <p className="text-sm aui-text-muted">Bu component invoice, profile, workspace yoki customer detail kabi factual sahifalarda foydali.</p>
-        </section>
-      ) : null}
-    </div>
-  )
-}

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

@@ -1,28 +0,0 @@
-import type { DialogDemoItem } from "./types"
-
-export const dialogDemoItems: DialogDemoItem[] = [
-  {
-    label: "Open dialog",
-    triggerVariant: "default",
-    title: "Publish update",
-    description: "Confirm the release notes and push this component update live.",
-    confirmLabel: "Publish",
-    confirmVariant: "default",
-  },
-  {
-    label: "Delete item",
-    triggerVariant: "destructive",
-    title: "Delete resource",
-    description: "This action cannot be undone once the resource is removed.",
-    confirmLabel: "Delete permanently",
-    confirmVariant: "destructive",
-  },
-  {
-    label: "Start form",
-    triggerVariant: "default",
-    title: "Create workspace",
-    description: "Open a focused form when you need explicit name and visibility fields.",
-    confirmLabel: "Create",
-    confirmVariant: "default",
-  },
-]

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

@@ -1,4 +0,0 @@
-export { DialogShowcase } from "./showcase"
-export { dialogMock } from "./mock"
-export { dialogDemoItems } from "./data"
-export type { DialogDemoItem } from "./types"

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

@@ -1,54 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const dialogMock: ComponentDemoMock = {
-  code: `import * as React from "react"
-import { Button, Dialog, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "tembro"
-
-export function Example() {
-  const [open, setOpen] = React.useState(false)
-
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger render={<Button>Publish</Button>} />
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Publish update</DialogTitle>
-          <DialogDescription>
-            Confirm that these notes are final before moving to production.
-          </DialogDescription>
-        </DialogHeader>
-        <DialogBody>
-          <p className="text-sm text-muted-foreground">
-            The body scrolls independently when content is long, while the footer stays usable.
-          </p>
-        </DialogBody>
-        <DialogFooter>
-          <Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
-          <Button>Publish</Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  )
-}`,
-  htmlCode: `<button data-slot="dialog-trigger">Open dialog</button>`,
-  cliCommand: "npx tembro add dialog",
-  highlights: [
-    "Controlled open state",
-    "Title and description requirement",
-    "Destructive confirm flow",
-    "Close + confirm action pattern",
-  ],
-  relatedBlockSlugs: ["auth-sign-in", "settings-form", "crm-dashboard"],
-  scenarios: [
-    { title: "Controlled modal", description: "Use open/onOpenChange when external logic must gate workflow." },
-    { title: "Publish confirmation", description: "Protect irreversible actions with explicit confirm/cancel controls." },
-    { title: "Destructive confirm", description: "Use tone and labeling that communicates permanence." },
-    { title: "Form dialog", description: "Render focused forms and validation inside a constrained modal shell." },
-  ],
-  capabilityNotes: [
-    "Use Dialog for focused single-purpose user tasks; avoid replacing entire workflow in an overlay.",
-    "Title and description should clearly explain context and impact.",
-    "Controlled props are important when submitting calls backend APIs or opening from global state.",
-    "For destructive actions, prefer explicit wording and secondary cancel path.",
-  ],
-}

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

@@ -1,115 +0,0 @@
-import { Badge, Button, Dialog, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/index"
-
-import { dialogDemoItems } from "./data"
-
-const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
-
-export function DialogShowcase() {
-  return (
-    <div className="space-y-0">
-      <section className="pb-6">
-        <div className="max-w-xl">
-          <p className="text-xs font-semibold uppercase tracking-[0.26em] aui-text-muted">Overlay</p>
-          <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Dialogs should justify focus</h3>
-          <p className="mt-3 text-sm leading-6 aui-text-muted">Use them for short, high-risk, or confirm-first actions. Keep the trigger, title, description, and footer actions explicit.</p>
-        </div>
-      </section>
-
-      <section className={panelClass}>
-        <div className="grid gap-4 xl:grid-cols-3">
-          {dialogDemoItems.map((item) => (
-            <div key={item.label} className="rounded-[20px] border border-[color:var(--aui-divider)] px-4 py-4">
-              <div className="flex items-start justify-between gap-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>
-                <Badge variant={item.confirmVariant === "destructive" ? "destructive" : "outline"}>{item.confirmLabel}</Badge>
-              </div>
-              <div className="mt-4">
-                <Dialog>
-                  <DialogTrigger render={<Button variant={item.triggerVariant} />}>{item.label}</DialogTrigger>
-                  <DialogContent>
-                    <DialogHeader>
-                      <DialogTitle>{item.title}</DialogTitle>
-                      <DialogDescription>{item.description}</DialogDescription>
-                    </DialogHeader>
-                    <DialogBody>
-                      <div className="rounded-[16px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] px-4 py-3 text-sm leading-6 aui-text-muted">
-                        This body area scrolls independently when content becomes long. Footer actions stay visible and aligned.
-                      </div>
-                    </DialogBody>
-                    <DialogFooter showCloseButton>
-                      <Button variant={item.confirmVariant}>{item.confirmLabel}</Button>
-                    </DialogFooter>
-                  </DialogContent>
-                </Dialog>
-              </div>
-            </div>
-          ))}
-        </div>
-      </section>
-
-      <section className={panelClass}>
-        <div className="grid gap-4 xl:grid-cols-2">
-          <Dialog>
-            <DialogTrigger render={<Button variant="outline" />}>Open form dialog</DialogTrigger>
-            <DialogContent size="lg">
-              <DialogHeader>
-                <DialogTitle>Create staff member</DialogTitle>
-                <DialogDescription>Use focused form dialogs for short admin tasks with stable footer actions.</DialogDescription>
-              </DialogHeader>
-              <DialogBody>
-                <div className="grid gap-4 sm:grid-cols-2">
-                  {["Full name", "Phone", "Role", "Status", "Branch", "Temporary password"].map((label) => (
-                    <label key={label} className="grid gap-2 text-sm font-medium aui-text-strong">
-                      {label}
-                      <input className="h-10 rounded-xl border border-[color:var(--aui-input-border)] bg-[color:var(--aui-input-bg)] px-3 text-sm outline-none focus-visible:border-[color:var(--aui-ring)]" placeholder={label} />
-                    </label>
-                  ))}
-                </div>
-              </DialogBody>
-              <DialogFooter>
-                <Button variant="outline">Cancel</Button>
-                <Button>Create staff</Button>
-              </DialogFooter>
-            </DialogContent>
-          </Dialog>
-
-          <Dialog>
-            <DialogTrigger render={<Button variant="destructive" />}>Open destructive dialog</DialogTrigger>
-            <DialogContent size="sm">
-              <DialogHeader>
-                <DialogTitle>Deactivate restaurant</DialogTitle>
-                <DialogDescription>This action pauses public ordering and hides active shifts from the restaurant.</DialogDescription>
-              </DialogHeader>
-              <DialogBody>
-                <div className="rounded-[16px] border border-red-200 bg-red-50 px-4 py-3 text-sm leading-6 text-red-700">
-                  Operators can reactivate it later, but active customer sessions will be interrupted.
-                </div>
-              </DialogBody>
-              <DialogFooter>
-                <Button variant="outline">Keep active</Button>
-                <Button variant="destructive">Deactivate</Button>
-              </DialogFooter>
-            </DialogContent>
-          </Dialog>
-        </div>
-      </section>
-
-      <section className={panelClass}>
-        <div className="grid gap-3">
-          {[
-            "Keep the page understandable before the overlay opens.",
-            "Use outcome-specific action labels inside the dialog footer.",
-            "Do not move long multi-step workflows into a small modal by default.",
-          ].map((note) => (
-            <div key={note} className="rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3 text-sm leading-6 aui-text-muted">
-              {note}
-            </div>
-          ))}
-        </div>
-      </section>
-    </div>
-  )
-}

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

@@ -1,8 +0,0 @@
-export type DialogDemoItem = {
-  label: string
-  triggerVariant: "default" | "destructive"
-  title: string
-  description: string
-  confirmLabel: string
-  confirmVariant: "default" | "destructive"
-}

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

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

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

@@ -1,26 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const dividerMock: ComponentDemoMock = {
-  code: `import { Divider } from "tembro"
-
-export function Example() {
-  return (
-    <div className="space-y-6">
-      <Divider label="Sections" />
-      <Divider orientation="horizontal" dashed label="Dashed" />
-      <Divider dashed orientation="vertical" />
-    </div>
-  )
-}`,
-  cliCommand: "npx tembro add divider",
-  highlights: [
-    "Horizontal divider as labeled group boundary",
-    "Vertical divider for compact dense layouts",
-    "Dashed style for low-emphasis sections",
-  ],
-  scenarios: [
-    { title: "Settings page", description: "Separate header and settings controls." },
-    { title: "Data list", description: "Use a subtle split before action groups." },
-    { title: "Card interior", description: "Distinguish primary/secondary areas without extra wrappers." },
-  ],
-}

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

@@ -1,38 +0,0 @@
-import { Divider } from "@/index"
-
-export function DividerShowcase() {
-  const examples = [
-    { label: "No label", props: { label: undefined as string | undefined } },
-    { label: "Team access", props: {} as Record<string, string> },
-    { label: "Dashed section", props: { dashed: true } },
-    { label: "Start label", props: { labelPosition: "start" as const } },
-    { label: "End label", props: { labelPosition: "end" as const } },
-  ]
-
-  return (
-    <div className="space-y-6 rounded-xl border border-border bg-card p-5">
-      <div className="space-y-2">
-        <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">Divider modes</p>
-        <p className="text-sm text-muted-foreground">Use labels and orientation to keep content hierarchy readable without extra layout noise.</p>
-      </div>
-
-      <div className="space-y-5">
-        {examples.map((entry, index) => (
-          <div key={entry.label + index} className="rounded-lg border border-border/80 px-4 py-3">
-            <div className="text-xs text-muted-foreground">{entry.label}</div>
-            <Divider orientation="horizontal" label={index === 0 ? undefined : entry.label} {...entry.props} />
-            <div className="text-sm text-foreground">Row before section</div>
-          </div>
-        ))}
-      </div>
-
-      <div className="flex h-28 items-center justify-between gap-4 rounded-lg border border-border/80 bg-background p-4">
-        <div className="text-sm text-foreground">A</div>
-        <Divider orientation="vertical" />
-        <div className="text-sm text-foreground">B</div>
-        <Divider orientation="vertical" dashed />
-        <div className="text-sm text-foreground">C</div>
-      </div>
-    </div>
-  )
-}

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

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

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

@@ -1,36 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const drawerMock: ComponentDemoMock = {
-  code: `import * as React from "react"
-import { Button, Drawer, DrawerCloseButton } from "tembro"
-
-export function Example() {
-  const [open, setOpen] = React.useState(false)
-
-  return (
-    <>
-      <Button onClick={() => setOpen(true)}>Open drawer</Button>
-      <Drawer
-        open={open}
-        onOpenChange={setOpen}
-        title="Workspace details"
-        description="Quick side-panel context"
-        footer={<DrawerCloseButton>Close</DrawerCloseButton>}
-      >
-        Drawer content
-      </Drawer>
-    </>
-  )
-}`,
-  highlights: ["Contextual side panel", "Multiple side placements", "Scrollable body area", "Footer action support"],
-  scenarios: [
-    { title: "Inspect record", description: "Open customer, invoice, or task details without losing the current page." },
-    { title: "Quick edit", description: "Handle light edits or metadata checks in a side surface." },
-    { title: "Context panel", description: "Keep supporting information available next to a dense dashboard." },
-  ],
-  capabilityNotes: [
-    "Use drawer when the user should keep page context while inspecting or editing something secondary.",
-    "Right-side drawers fit admin inspection flows well.",
-    "If the content becomes a full task, it may deserve its own route instead.",
-  ],
-}

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

@@ -1,67 +0,0 @@
-import * as React from "react"
-
-import { Badge, Button, Drawer, DrawerCloseButton } 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 DrawerShowcase({ mode }: ComponentDemoProps) {
-  const [open, setOpen] = 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">Context panel</p>
-            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">Drawer should extend context, not replace routing without reason</h3>
-            <p className="mt-3 max-w-lg text-sm leading-6 aui-text-muted">
-              This surface is for inspection and short tasks when the user should keep their place in the current dashboard or table.
-            </p>
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Badge variant="outline" className="rounded-full">Context preserving</Badge>
-            <Badge variant="outline" className="rounded-full">Secondary task</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 drawer</p>
-            <p className="mt-2 text-sm leading-6 aui-text-muted">Open the drawer to inspect workspace details without leaving the current surface.</p>
-          </div>
-          <Button onClick={() => setOpen(true)}>Open drawer</Button>
-        </div>
-      </section>
-
-      <Drawer
-        open={open}
-        onOpenChange={setOpen}
-        title="Workspace details"
-        description="Context panel for billing, members, and operational notes."
-        footer={<DrawerCloseButton>Close panel</DrawerCloseButton>}
-      >
-        <div className="space-y-4">
-          <div className="rounded-2xl border border-[color:var(--aui-divider)] p-4">
-            <p className="text-sm font-medium aui-text-strong">Billing owner</p>
-            <p className="mt-2 text-sm aui-text-muted">Azamat Jurayev</p>
-          </div>
-          <div className="rounded-2xl border border-[color:var(--aui-divider)] p-4">
-            <p className="text-sm font-medium aui-text-strong">Current note</p>
-            <p className="mt-2 text-sm aui-text-muted">This workspace is waiting for compliance verification before release.</p>
-          </div>
-        </div>
-      </Drawer>
-
-      {mode === "playground" ? (
-        <section className={panelClass}>
-          <p className="text-sm aui-text-muted">Drawer route o‘rnini bosmasligi kerak. U ko‘proq side inspection yoki qisqa edit uchun yaxshi.</p>
-        </section>
-      ) : null}
-    </div>
-  )
-}

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

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