tembro 3.1.16 → 4.0.0

package/packages/cli/vendor/src/showcase/premium/form-wrapper/showcase.tsx

@@ -1,119 +0,0 @@
-import { useForm, useWatch } from "react-hook-form"
-
-import { Badge, Button, FormInput, FormSelect, FormSwitch, FormTextarea } from "@/index"
-
-import type { ComponentDemoProps } from "../types"
-
-type DemoValues = {
-  name: string
-  ownerPhone: string
-  budget: number | null
-  notes: string
-  active: boolean
-  query: string
-  password: string
-  dueDate: string
-  period: {
-    from: string
-    to: string
-  }
-  periodFrom: string
-  periodTo: string
-  status: string
-  ownerId: string
-}
-
-const statusOptions = [
-  { label: "Draft", value: "draft" },
-  { label: "Review", value: "review" },
-  { label: "Live", value: "live" },
-] as const
-
-const workspaceOptions = [
-  { value: "workspace-alpha", label: "Workspace Alpha", description: "Core design system route" },
-  { value: "workspace-beta", label: "Workspace Beta", description: "CRM rollout workspace" },
-  { value: "workspace-gamma", label: "Workspace Gamma", description: "Billing and pricing flows" },
-] as const
-
-function loadWorkspaceOptions(search: string) {
-  const normalized = search.trim().toLowerCase()
-  return Promise.resolve(
-    workspaceOptions
-      .filter((option) => !normalized || option.label.toLowerCase().includes(normalized))
-      .map((option) => ({ ...option }))
-  )
-}
-
-function loadSelectedWorkspace(value: string) {
-  const option = workspaceOptions.find((entry) => entry.value === value)
-  return Promise.resolve(option ? { ...option } : null)
-}
-
-export function FormWrapperShowcase({ mode }: ComponentDemoProps) {
-  const form = useForm<DemoValues>({
-    defaultValues: {
-      name: "Tembro",
-      ownerPhone: "+998 90 123 45 67",
-      budget: 120,
-      notes: "RHF wrapper coverage for control, name, and validation.",
-      active: true,
-      query: "billing",
-      password: "",
-      dueDate: "2026-07-18",
-      period: {
-        from: "2026-07-01",
-        to: "2026-07-14",
-      },
-      periodFrom: "2026-07-01",
-      periodTo: "2026-07-14",
-      status: "review",
-      ownerId: "workspace-alpha",
-    },
-  })
-
-  const activeValue = useWatch({ control: form.control, name: "active" })
-  const slug = typeof window === "undefined" ? undefined : window.location.pathname.split("/").filter(Boolean).at(-1)
-
-  if (slug === "form-select" || slug === "form-async-select") {
-    return (
-      <div className="grid gap-4 xl:grid-cols-2">
-        <FormSelect control={form.control} name="status" label="Release status" options={[...statusOptions]} />
-        <FormSelect
-          control={form.control}
-          name="ownerId"
-          kind="async"
-          label="Linked workspace"
-          defaultOptions={workspaceOptions.map((option) => ({ ...option }))}
-          loadOptions={loadWorkspaceOptions}
-          loadSelectedOption={loadSelectedWorkspace}
-        />
-      </div>
-    )
-  }
-
-  return (
-    <form className="space-y-5">
-      <div className="grid gap-4 xl:grid-cols-2">
-        <FormInput
-          control={form.control}
-          name="name"
-          label="Workspace name"
-          description="Shared shell keeps required marker, helper text and error spacing aligned."
-          required
-        />
-
-        <FormInput control={form.control} name="ownerPhone" kind="phone" label="Owner phone" />
-        <FormInput control={form.control} name="budget" kind="number" label="Budget" min={0} max={999999} />
-        <FormTextarea control={form.control} name="notes" label="Notes" rows={3} />
-      </div>
-
-      <FormSwitch control={form.control} name="active" label="Active" />
-
-      <div className="flex flex-wrap gap-3">
-        <Button type="button">Save</Button>
-        <Button type="button" variant="outline" onClick={() => form.reset()}>Reset</Button>
-        <Badge variant="outline">{mode === "playground" ? "Interactive" : activeValue ? "Active" : "Paused"}</Badge>
-      </div>
-    </form>
-  )
-}

package/packages/cli/vendor/src/showcase/premium/image-cropper/index.ts

@@ -1,2 +0,0 @@
-export * from "./mock"
-export * from "./showcase"

package/packages/cli/vendor/src/showcase/premium/image-cropper/mock.ts

@@ -1,15 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const imageCropperMock: ComponentDemoMock = {
-  code: `import { ImageCropper } from "tembro"
-
-export function Example() {
-  return <ImageCropper src="/profile-photo.jpg" aspect={1} cropShape="round" />
-}`,
-  cliCommand: "npx tembro add image-cropper",
-  highlights: ["Drag, zoom, rotation, and pixel crop coordinates", "Canvas helper exports the selected area as a Blob"],
-  scenarios: [
-    { title: "Avatar editor", description: "Crop profile media into a consistent square or circle." },
-    { title: "Asset manager", description: "Prepare upload dimensions before saving media." },
-  ],
-}

package/packages/cli/vendor/src/showcase/premium/image-cropper/showcase.tsx

@@ -1,14 +0,0 @@
-import * as React from "react"
-import { ImageCropper } from "@/index"
-
-const demoImage = "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1200&q=80"
-
-export function ImageCropperShowcase() {
-  const [cropSummary, setCropSummary] = React.useState("Move or zoom the image")
-  return (
-    <div className="grid gap-3">
-      <ImageCropper src={demoImage} aspect={16 / 9} onCropComplete={(_, pixels) => setCropSummary(`${Math.round(pixels.width)} × ${Math.round(pixels.height)} px`)} />
-      <p className="text-xs text-muted-foreground">Crop: {cropSummary}</p>
-    </div>
-  )
-}

package/packages/cli/vendor/src/showcase/premium/image-upload/index.ts

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

package/packages/cli/vendor/src/showcase/premium/image-upload/mock.ts

@@ -1,36 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const imageUploadMock: ComponentDemoMock = {
-  code: `import { useState } from "react"
-import { ImageUpload } from "tembro"
-
-export function Example() {
-  const [files, setFiles] = useState<File[]>([])
-
-  return (
-    <ImageUpload
-      files={files}
-      onFilesChange={setFiles}
-      maxFiles={3}
-      helperText="Upload hero illustrations or block thumbnails."
-    />
-  )
-}`,
-  cliCommand: "npx tembro add image-upload",
-  highlights: [
-    "Image preview support",
-    "Reusable remove action behavior",
-    "Controlled file array API",
-    "Preview-first upload route",
-  ],
-  scenarios: [
-    { title: "Template thumbnails", description: "Preview uploaded images before attaching them to a template." },
-    { title: "Marketing assets", description: "Use for screenshots, gallery items and hero illustrations." },
-    { title: "Media field", description: "Keep image upload inside a controlled route or form." },
-  ],
-  capabilityNotes: [
-    "Use ImageUpload when visual confirmation is more important than a generic file list.",
-    "Preview and remove behavior come from the same reusable component surface.",
-    "Keep image routes consistent across docs, templates and CMS-like forms.",
-  ],
-}

package/packages/cli/vendor/src/showcase/premium/image-upload/showcase.tsx

@@ -1,48 +0,0 @@
-import * as React from "react"
-
-import { Badge, ImageUpload } from "@/index"
-
-export function ImageUploadShowcase() {
-  const [files, setFiles] = React.useState<File[]>([])
-
-  return (
-    <div className="space-y-4">
-      <div className="rounded-[20px] border border-[color:var(--aui-divider)] bg-[color:var(--aui-page-bg-alt)] p-4">
-        <div className="flex flex-wrap gap-2">
-          <Badge variant="outline">Preview</Badge>
-          <Badge variant="outline">Image-first</Badge>
-          <Badge variant="outline">Removable</Badge>
-        </div>
-        <p className="mt-3 text-sm font-medium aui-text-strong">ImageUpload is the preview-friendly media variant</p>
-        <p className="mt-2 text-sm leading-6 aui-text-muted">
-          Use it for thumbnails, gallery assets, hero illustrations and template screenshots where visual confirmation matters immediately.
-        </p>
-      </div>
-
-      <ImageUpload
-        files={files}
-        onFilesChange={setFiles}
-        maxFiles={3}
-        minImageWidth={1200}
-        minImageHeight={800}
-        aspectRatio={1.5}
-        helperText="Upload hero illustrations or block thumbnails."
-      />
-
-      <div className="grid gap-3 md:grid-cols-3">
-        <div className="rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm">
-          <p className="font-medium aui-text-strong">Attached images</p>
-          <p className="mt-2 aui-text-muted">{files.length}</p>
-        </div>
-        <div className="rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm">
-          <p className="font-medium aui-text-strong">Interaction model</p>
-          <p className="mt-2 aui-text-muted">Preview, remove, and ratio validation live inside the same reusable media surface.</p>
-        </div>
-        <div className="rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm">
-          <p className="font-medium aui-text-strong">Use case</p>
-          <p className="mt-2 aui-text-muted">Marketing blocks, screenshots, previews and content thumbnails.</p>
-        </div>
-      </div>
-    </div>
-  )
-}

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

@@ -1,180 +0,0 @@
-import type { ComponentDemoBundle } from "./types"
-
-import { alertMock, AlertShowcase } from "./alert"
-import { AlertDialogShowcase, alertDialogMock } from "./alert-dialog"
-import { activityFeedMock, ActivityFeedShowcase } from "./activity-feed"
-import { ActionMenuShowcase, actionMenuMock } from "./action-menu"
-import { appSidebarMock, AppSidebarShowcase } from "./app-sidebar"
-import { asyncSelectMock, AsyncSelectShowcase } from "./async-select"
-import { asyncMultiSelectMock, AsyncMultiSelectShowcase } from "./async-multi-select"
-import { avatarMock, AvatarShowcase } from "./avatar"
-import { carouselMock, CarouselShowcase } from "./carousel"
-import { colorPickerMock, ColorPickerShowcase } from "./color-picker"
-import { jsonInputMock, JsonInputShowcase } from "./json-input"
-import { badgeMock, BadgeShowcase } from "./badge"
-import { dividerMock, DividerShowcase } from "./divider"
-import { breadcrumbsMock, BreadcrumbsShowcase } from "./breadcrumbs"
-import { buttonMock, ButtonShowcase } from "./button"
-import { ButtonGroupShowcase, buttonGroupMock } from "./button-group"
-import { calendarMock, CalendarShowcase } from "./calendar"
-import { calendarSchedulerMock, CalendarSchedulerShowcase } from "./calendar-scheduler"
-import { cardMock, CardShowcase } from "./card"
-import { checkboxMock, CheckboxShowcase } from "./checkbox"
-import { codeBlockMock, CodeBlockShowcase } from "./code-block"
-import { dualListPickerMock, DualListPickerShowcase } from "./dual-list-picker"
-import { collapseMock, CollapseShowcase } from "./collapse"
-import { commandPaletteMock, CommandPaletteShowcase } from "./command-palette"
-import { ConfirmDialogShowcase, confirmDialogMock } from "./confirm-dialog"
-import { copyButtonMock, CopyButtonShowcase } from "./copy-button"
-import { dataStateMock, DataStateShowcase } from "./data-state"
-import { dataTableMock, DataTableShowcase } from "./data-table"
-import { DatePickerShowcase, datePickerMock } from "./date-picker"
-import { DateRangePickerShowcase, dateRangePickerMock } from "./date-range-picker"
-import { DescriptionListShowcase, descriptionListMock } from "./description-list"
-import { dialogMock, DialogShowcase } from "./dialog"
-import { dropdownMenuMock, DropdownMenuShowcase } from "./dropdown-menu"
-import { DrawerShowcase, drawerMock } from "./drawer"
-import { FormWrapperShowcase, formRHFWrapperMock, formSelectMock } from "./form-wrapper"
-import { kanbanBoardMock, KanbanBoardShowcase } from "./kanban-board"
-import { infoCardMock, InfoCardShowcase } from "./info-card"
-import { imageCropperMock, ImageCropperShowcase } from "./image-cropper"
-import { inputMock, InputShowcase } from "./input"
-import { kbdMock, KbdShowcase } from "./kbd"
-import { listMock, ListShowcase } from "./list"
-import { loadingStateMock, LoadingStateShowcase } from "./loading-state"
-import { timePickerMock, TimePickerShowcase } from "./time-picker"
-import { resizablePanelMock, ResizablePanelShowcase } from "./resizable-panel"
-import { NotificationCenterShowcase, notificationCenterMock } from "./notification-center"
-import { OtpInputShowcase, otpInputMock } from "./otp-input"
-import { sectionMock, SectionShowcase } from "./section"
-import { pageStateMock, PageStateShowcase } from "./page-state"
-import { paginationMock, PaginationShowcase } from "./pagination"
-import { popoverMock, PopoverShowcase } from "./popover"
-import { ProgressShowcase, progressMock } from "./progress"
-import { qrCodeMock, QRCodeShowcase } from "./qr-code"
-import { radioGroupMock, RadioGroupShowcase } from "./radio-group"
-import { rightClickMenuMock, RightClickMenuShowcase } from "./right-click-menu"
-import { richTextEditorMock, RichTextEditorShowcase } from "./rich-text-editor"
-import { scrollBoxMock, ScrollBoxShowcase } from "./scroll-box"
-import { savedFilterSelectMock, SavedFilterSelectShowcase } from "./saved-filter-select"
-import { sortableListMock, SortableListShowcase } from "./sortable-list"
-import { signaturePadMock, SignaturePadShowcase } from "./signature-pad"
-import { segmentedControlMock, SegmentedControlShowcase } from "./segmented-control"
-import { selectMock, SelectShowcase } from "./select"
-import { sliderMock, SliderShowcase } from "./slider"
-import { skeletonMock, SkeletonShowcase } from "./skeleton"
-import { spinnerMock, SpinnerShowcase } from "./spinner"
-import { statisticMock, StatisticShowcase } from "./statistic"
-import { switchMock, SwitchShowcase } from "./switch"
-import { TagInputShowcase, tagInputMock } from "./tag-input"
-import { tableMock, TableShowcase } from "./table"
-import { tabsMock, TabsShowcase } from "./tabs"
-import { textareaMock, TextareaShowcase } from "./textarea"
-import { TimelineShowcase, timelineMock } from "./timeline"
-import { tagMock, TagShowcase } from "./tag"
-import { typographyMock, TypographyShowcase } from "./typography"
-import { treeViewMock, TreeViewShowcase } from "./tree-view"
-import { toastMock, ToastShowcase } from "./toast"
-import { tooltipMock, TooltipShowcase } from "./tooltip"
-import { fileUploadMock, FileUploadShowcase } from "./file-upload"
-import { imageUploadMock, ImageUploadShowcase } from "./image-upload"
-import { ratingMock, RatingShowcase } from "./rating"
-import { virtualListMock, VirtualListShowcase } from "./virtual-list"
-import { wizardMock, WizardShowcase } from "./wizard"
-
-export { defaultComponentDemoState } from "./types"
-export type { ComponentDemoBundle, ComponentDemoMock, ComponentDemoProps, ComponentDemoState } from "./types"
-
-export const premiumShowcaseDemoRegistry: Record<string, ComponentDemoBundle> = {
-  alert: { mock: alertMock, Showcase: AlertShowcase },
-  "alert-dialog": { mock: alertDialogMock, Showcase: AlertDialogShowcase },
-  "action-menu": { mock: actionMenuMock, Showcase: ActionMenuShowcase },
-  button: { mock: buttonMock, Showcase: ButtonShowcase },
-  "button-group": { mock: buttonGroupMock, Showcase: ButtonGroupShowcase },
-  calendar: { mock: calendarMock, Showcase: CalendarShowcase },
-  "calendar-scheduler": { mock: calendarSchedulerMock, Showcase: CalendarSchedulerShowcase },
-  "command-palette": { mock: commandPaletteMock, Showcase: CommandPaletteShowcase },
-  "carousel": { mock: carouselMock, Showcase: CarouselShowcase },
-  "color-picker": { mock: colorPickerMock, Showcase: ColorPickerShowcase },
-  "code-block": { mock: codeBlockMock, Showcase: CodeBlockShowcase },
-  "dual-list-picker": { mock: dualListPickerMock, Showcase: DualListPickerShowcase },
-  divider: { mock: dividerMock, Showcase: DividerShowcase },
-  input: { mock: inputMock, Showcase: InputShowcase },
-  "number-input": { mock: inputMock, Showcase: InputShowcase },
-  textarea: { mock: textareaMock, Showcase: TextareaShowcase },
-  select: { mock: selectMock, Showcase: SelectShowcase },
-  "radio-group": { mock: radioGroupMock, Showcase: RadioGroupShowcase },
-  "async-select": { mock: asyncSelectMock, Showcase: AsyncSelectShowcase },
-  "async-multi-select": { mock: asyncMultiSelectMock, Showcase: AsyncMultiSelectShowcase },
-  avatar: { mock: avatarMock, Showcase: AvatarShowcase },
-  "date-picker": { mock: datePickerMock, Showcase: DatePickerShowcase },
-  "date-range-picker": { mock: dateRangePickerMock, Showcase: DateRangePickerShowcase },
-  "description-list": { mock: descriptionListMock, Showcase: DescriptionListShowcase },
-  drawer: { mock: drawerMock, Showcase: DrawerShowcase },
-  "json-input": { mock: jsonInputMock, Showcase: JsonInputShowcase },
-  kanban: { mock: kanbanBoardMock, Showcase: KanbanBoardShowcase },
-  "otp-input": { mock: otpInputMock, Showcase: OtpInputShowcase },
-  "qr-code": { mock: qrCodeMock, Showcase: QRCodeShowcase },
-  rating: { mock: ratingMock, Showcase: RatingShowcase },
-  "signature-pad": { mock: signaturePadMock, Showcase: SignaturePadShowcase },
-  slider: { mock: sliderMock, Showcase: SliderShowcase },
-  "time-picker": { mock: timePickerMock, Showcase: TimePickerShowcase },
-  "tag-input": { mock: tagInputMock, Showcase: TagInputShowcase },
-  "dropdown-menu": { mock: dropdownMenuMock, Showcase: DropdownMenuShowcase },
-  "confirm-dialog": { mock: confirmDialogMock, Showcase: ConfirmDialogShowcase },
-  checkbox: { mock: checkboxMock, Showcase: CheckboxShowcase },
-  "copy-button": { mock: copyButtonMock, Showcase: CopyButtonShowcase },
-  switch: { mock: switchMock, Showcase: SwitchShowcase },
-  badge: { mock: badgeMock, Showcase: BadgeShowcase },
-  card: { mock: cardMock, Showcase: CardShowcase },
-  tabs: { mock: tabsMock, Showcase: TabsShowcase },
-  collapse: { mock: collapseMock, Showcase: CollapseShowcase },
-  kbd: { mock: kbdMock, Showcase: KbdShowcase },
-  dialog: { mock: dialogMock, Showcase: DialogShowcase },
-  popover: { mock: popoverMock, Showcase: PopoverShowcase },
-  tooltip: { mock: tooltipMock, Showcase: TooltipShowcase },
-  "right-click-menu": { mock: rightClickMenuMock, Showcase: RightClickMenuShowcase },
-  "rich-text-editor": { mock: richTextEditorMock, Showcase: RichTextEditorShowcase },
-  "data-table": { mock: dataTableMock, Showcase: DataTableShowcase },
-  "saved-filter-select": { mock: savedFilterSelectMock, Showcase: SavedFilterSelectShowcase },
-  "sortable-list": { mock: sortableListMock, Showcase: SortableListShowcase },
-  "form-field": { mock: formRHFWrapperMock, Showcase: FormWrapperShowcase },
-  "form-field-shell": { mock: formRHFWrapperMock, Showcase: FormWrapperShowcase },
-  "form-input": { mock: formRHFWrapperMock, Showcase: FormWrapperShowcase },
-  "form-select": { mock: formSelectMock, Showcase: FormWrapperShowcase },
-  "form-textarea": { mock: formRHFWrapperMock, Showcase: FormWrapperShowcase },
-  "form-switch": { mock: formRHFWrapperMock, Showcase: FormWrapperShowcase },
-  "form-date-range-input": { mock: formRHFWrapperMock, Showcase: FormWrapperShowcase },
-  "form-date-picker": { mock: formRHFWrapperMock, Showcase: FormWrapperShowcase },
-  "form-date-range-picker": { mock: formRHFWrapperMock, Showcase: FormWrapperShowcase },
-  "segmented-control": { mock: segmentedControlMock, Showcase: SegmentedControlShowcase },
-  skeleton: { mock: skeletonMock, Showcase: SkeletonShowcase },
-  spinner: { mock: spinnerMock, Showcase: SpinnerShowcase },
-  table: { mock: tableMock, Showcase: TableShowcase },
-  sidebar: { mock: appSidebarMock, Showcase: AppSidebarShowcase },
-  breadcrumbs: { mock: breadcrumbsMock, Showcase: BreadcrumbsShowcase },
-  "page-state": { mock: pageStateMock, Showcase: PageStateShowcase },
-  pagination: { mock: paginationMock, Showcase: PaginationShowcase },
-  "notification-center": { mock: notificationCenterMock, Showcase: NotificationCenterShowcase },
-  "info-card": { mock: infoCardMock, Showcase: InfoCardShowcase },
-  "image-cropper": { mock: imageCropperMock, Showcase: ImageCropperShowcase },
-  list: { mock: listMock, Showcase: ListShowcase },
-  "activity-feed": { mock: activityFeedMock, Showcase: ActivityFeedShowcase },
-  "loading-state": { mock: loadingStateMock, Showcase: LoadingStateShowcase },
-  "data-state": { mock: dataStateMock, Showcase: DataStateShowcase },
-  progress: { mock: progressMock, Showcase: ProgressShowcase },
-  "progress-circle": { mock: progressMock, Showcase: ProgressShowcase },
-  "resizable-panel": { mock: resizablePanelMock, Showcase: ResizablePanelShowcase },
-  section: { mock: sectionMock, Showcase: SectionShowcase },
-  statistic: { mock: statisticMock, Showcase: StatisticShowcase },
-  tag: { mock: tagMock, Showcase: TagShowcase },
-  typography: { mock: typographyMock, Showcase: TypographyShowcase },
-  "tree-view": { mock: treeViewMock, Showcase: TreeViewShowcase },
-  "file-upload": { mock: fileUploadMock, Showcase: FileUploadShowcase },
-  "image-upload": { mock: imageUploadMock, Showcase: ImageUploadShowcase },
-  "scroll-box": { mock: scrollBoxMock, Showcase: ScrollBoxShowcase },
-  timeline: { mock: timelineMock, Showcase: TimelineShowcase },
-  toast: { mock: toastMock, Showcase: ToastShowcase },
-  "virtual-list": { mock: virtualListMock, Showcase: VirtualListShowcase },
-  wizard: { mock: wizardMock, Showcase: WizardShowcase },
-}

package/packages/cli/vendor/src/showcase/premium/info-card/index.ts

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

package/packages/cli/vendor/src/showcase/premium/info-card/mock.ts

@@ -1,30 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const infoCardMock: ComponentDemoMock = {
-  code: `import { InfoCard } from "tembro"
-
-export function Example() {
-  return (
-    <InfoCard
-      title="Team"
-      description="Active workspace members and billing snapshot."
-      eyebrow="KPI context"
-      compact
-    >
-      Keep status, metadata and helper actions in one reusable card.
-    </InfoCard>
-  )
-}`,
-  highlights: ["Compact and standard card modes", "Supports header, body and footer slots", "Good for metadata blocks", "Reusable on dashboard and forms"],
-  scenarios: [
-    { title: "Context blocks", description: "Display metadata near complex forms or tables." },
-    { title: "Action cards", description: "Add CTA area and media when quick guidance is needed." },
-    { title: "Dashboard cards", description: "Compose many cards for module summaries." },
-  ],
-  capabilityNotes: [
-    "Use `eyebrow` for micro-headings and quick context.",
-    "Use `media` to place avatars or charts next to text.",
-    "Switch to `compact` in dense lists; keep default for detailed descriptions.",
-  ],
-}
-

package/packages/cli/vendor/src/showcase/premium/info-card/showcase.tsx

@@ -1,67 +0,0 @@
-import * as React from "react"
-import { Button, InfoCard } from "@/index"
-
-import type { ComponentDemoProps } from "../types"
-
-const cardMeta = {
-  title: "Workspace",
-  description: "Use one card per logical entity and keep content scannable.",
-  actions: (
-    <div className="flex gap-2">
-      <Button size="sm" variant="outline">Export</Button>
-      <Button size="sm">Open</Button>
-    </div>
-  ),
-}
-
-export function InfoCardShowcase({ mode }: ComponentDemoProps) {
-  const [compact, setCompact] = React.useState(mode === "playground")
-  const [orientation, setOrientation] = React.useState<"vertical" | "horizontal">("vertical")
-  const [selected, setSelected] = React.useState(true)
-
-  return (
-    <div className="space-y-4">
-      {mode === "playground" ? (
-        <div className="flex flex-wrap gap-2">
-          <Button size="sm" variant={compact ? "default" : "outline"} onClick={() => setCompact((value) => !value)}>
-            {compact ? "Use spacious" : "Use compact"}
-          </Button>
-          <Button size="sm" variant={orientation === "vertical" ? "default" : "outline"} onClick={() => setOrientation("vertical")}>
-            Vertical
-          </Button>
-          <Button size="sm" variant={orientation === "horizontal" ? "default" : "outline"} onClick={() => setOrientation("horizontal")}>
-            Horizontal
-          </Button>
-          <Button size="sm" variant={selected ? "default" : "outline"} onClick={() => setSelected((value) => !value)}>
-            {selected ? "Selected" : "Default"}
-          </Button>
-        </div>
-      ) : null}
-      <InfoCard
-        eyebrow="Summary"
-        title={cardMeta.title}
-        description={cardMeta.description}
-        actions={cardMeta.actions}
-        compact={compact}
-        orientation={orientation}
-        selected={selected}
-      >
-        <p className="aui-text-muted mt-2 text-sm">Keep micro metadata and status chips in one card surface.</p>
-      </InfoCard>
-      <div className="grid gap-3 md:grid-cols-3">
-        <div className="rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm">
-          <p className="font-medium aui-text-strong">Header + actions</p>
-          <p className="mt-2 aui-text-muted">Action area stays isolated from the parent card click/select state.</p>
-        </div>
-        <div className="rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm">
-          <p className="font-medium aui-text-strong">Density</p>
-          <p className="mt-2 aui-text-muted">Compact and regular modes cover dashboard tiles and detail summaries.</p>
-        </div>
-        <div className="rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm">
-          <p className="font-medium aui-text-strong">Orientation</p>
-          <p className="mt-2 aui-text-muted">Vertical and horizontal layouts reuse the same surface API.</p>
-        </div>
-      </div>
-    </div>
-  )
-}

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

@@ -1,9 +0,0 @@
-import type { InputDemoField } from "./types"
-
-export const inputDemoFields: InputDemoField[] = [
-  { kind: "search", label: "Search components", placeholder: "Search components..." },
-  { kind: "email", label: "Team email", defaultValue: "team@azamatui.dev" },
-  { kind: "disabled", label: "Disabled state", defaultValue: "Read-only unavailable" },
-  { kind: "readOnly", label: "Readonly preview", defaultValue: "Readonly state" },
-  { kind: "toolbar", label: "Filter by owner", placeholder: "Type owner name..." },
-]

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

@@ -1,4 +0,0 @@
-export { InputShowcase } from "./showcase"
-export { inputMock } from "./mock"
-export { inputDemoFields } from "./data"
-export type { InputDemoField } from "./types"

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

@@ -1,29 +0,0 @@
-import type { ComponentDemoMock } from "../types"
-
-export const inputMock: ComponentDemoMock = {
-  code: `import { useState } from "react"\nimport { Input } from "tembro"\n\nexport function Example() {\n  const [query, setQuery] = useState("buttons")\n  const [budget, setBudget] = useState<number | null>(1200)\n\n  return (\n    <div className="grid gap-4">\n      <Input\n        kind="search"\n        value={query}\n        onValueChange={setQuery}\n        placeholder="Search components"\n        clearOnEscape\n      />\n      <Input kind="password" autoComplete="current-password" />\n      <Input kind="money" value={budget} onValueChange={setBudget} prefix="$" suffix="USD" />\n      <Input kind="phone" defaultValue="+998 90 123 45 67" />\n      <Input kind="date" defaultValue="2026-07-13" />\n      <Input kind="quantity" defaultValue={3} min={1} max={12} />\n    </div>\n  )\n}\n`,
-  htmlCode: `<label for="example">Search components</label>\n<input id="example" data-slot="input" type="text" placeholder="Search components..." />`,
-  cliCommand: "npx tembro add input",
-  highlights: [
-    "Controlled and uncontrolled value flows",
-    "Label + control association with htmlFor",
-    "Validation-ready required states",
-    "Disabled and readOnly form states",
-    "Built-in clear action and trailing metadata",
-    "Password, numeric, money, phone, date and quantity kinds through one import",
-  ],
-  relatedBlockSlugs: ["users-table", "settings-form", "crm-dashboard"],
-  scenarios: [
-    { title: "Search", description: "Use compact inputs inside headers and filter bars." },
-    { title: "Email capture", description: "Pair Input with label and validation for accessible form entry." },
-    { title: "Read-only preview", description: "Use readOnly for audit logs or prefilled settings values." },
-    { title: "Disabled editing", description: "Prevent changes during lock states and permission restrictions." },
-  ],
-  capabilityNotes: [
-    "Supports controlled text entry with placeholder, disabled state, and direct text callbacks.",
-    "Works with label-first forms, validation messages, clearable behavior, and trailing actions.",
-    "Use type attributes to narrow input modes: search, email, password, url, etc.",
-    "Can be used in compact toolbar, modal, and full-width form layouts.",
-  ],
-}
-