tembro 1.0.0

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

@@ -0,0 +1,278 @@
+import * as React from "react"
+
+import type { ComponentDemoBundle } from "./types"
+
+import { alertMock, AlertShowcase } from "./alert"
+import { AlertDialogShowcase, alertDialogMock } from "./alert-dialog"
+import { accordionMock, AccordionShowcase } from "./accordion"
+import { affixMock, AffixShowcase } from "./affix"
+import { activityFeedMock, ActivityFeedShowcase } from "./activity-feed"
+import { ActionMenuShowcase, actionMenuMock } from "./action-menu"
+import { appShellMock, AppShellShowcase } from "./app-shell"
+import { appSidebarMock, AppSidebarShowcase } from "./app-sidebar"
+import { asyncMultiSelectMock, AsyncMultiSelectShowcase } from "./async-multi-select"
+import { asyncSelectMock, AsyncSelectShowcase } from "./async-select"
+import { aspectRatioMock, AspectRatioShowcase } from "./aspect-ratio"
+import { cascaderMock, CascaderShowcase } from "./cascader"
+import { avatarMock, AvatarShowcase } from "./avatar"
+import { carouselMock, CarouselShowcase } from "./carousel"
+import { floatButtonMock, FloatButtonShowcase } from "./float-button"
+import { jsonInputMock, JsonInputShowcase } from "./json-input"
+import { mentionInputMock, MentionInputShowcase } from "./mention-input"
+import { qrCodeMock, QRCodeShowcase } from "./qr-code"
+import { menubarMock, MenubarShowcase } from "./menubar"
+import { navigationMenuMock, NavigationMenuShowcase } from "./navigation-menu"
+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 { ClearableInputShowcase, clearableInputMock } from "./clearable-input"
+import { collapseMock, CollapseShowcase } from "./collapse"
+import { comboboxMock, ComboboxShowcase } from "./combobox"
+import { commandBarMock, CommandBarShowcase } from "./command-bar"
+import { ConfirmDialogShowcase, confirmDialogMock } from "./confirm-dialog"
+import { commandPaletteMock, CommandPaletteShowcase } from "./command-palette"
+import { copyButtonMock, CopyButtonShowcase } from "./copy-button"
+import { copyFieldMock, CopyFieldShowcase } from "./copy-field"
+import { dataStateMock, DataStateShowcase } from "./data-state"
+import { dataTableMock, DataTableShowcase } from "./data-table"
+import {
+  DataTablePartShowcase,
+  dataTableActionsColumnMock,
+  dataTablePaginationMock,
+  dataTableRowActionsMock,
+  dataTableSavedFiltersMock,
+  dataTableSelectColumnMock,
+  dataTableToolbarMock,
+} from "./data-table-parts"
+import { dateInputMock, DateInputShowcase } from "./date-input"
+import { DatePickerShowcase, datePickerMock } from "./date-picker"
+import { DateRangeInputShowcase, dateRangeInputMock } from "./date-range-input"
+import { DateRangePickerShowcase, dateRangePickerMock } from "./date-range-picker"
+import { DescriptionListShowcase, descriptionListMock } from "./description-list"
+import { descriptionsMock, DescriptionsShowcase } from "./descriptions"
+import { dialogMock, DialogShowcase } from "./dialog"
+import { dropdownMenuMock, DropdownMenuShowcase } from "./dropdown-menu"
+import { DrawerShowcase, drawerMock } from "./drawer"
+import { emptyStateMock, EmptyStateShowcase } from "./empty-state"
+import { FormBuilderShowcase, formBuilderMock } from "./form-builder"
+import { FormWrapperShowcase, formAsyncSelectMock, formRHFWrapperMock, formSelectMock } from "./form-wrapper"
+import { hoverCardMock, HoverCardShowcase } from "./hover-card"
+import { kanbanBoardMock, KanbanBoardShowcase } from "./kanban-board"
+import { infoCardMock, InfoCardShowcase } from "./info-card"
+import { inputMock, InputShowcase } from "./input"
+import { keyboardShortcutMock, KeyboardShortcutShowcase } from "./keyboard-shortcut"
+import { kbdMock, KbdShowcase } from "./kbd"
+import { listMock, ListShowcase } from "./list"
+import { loadingStateMock, LoadingStateShowcase } from "./loading-state"
+import { richTextEditorMock, RichTextEditorShowcase } from "./rich-text-editor"
+import { timePickerMock, TimePickerShowcase } from "./time-picker"
+import { tourMock, TourShowcase } from "./tour"
+import { stickyFooterBarMock, StickyFooterBarShowcase } from "./sticky-footer-bar"
+import { maskedInputMock, MaskedInputShowcase } from "./masked-input"
+import { metricGridMock, MetricGridShowcase } from "./metric-grid"
+import { modalShellMock, ModalShellShowcase } from "./modal-shell"
+import { resizablePanelMock, ResizablePanelShowcase } from "./resizable-panel"
+import { moneyInputMock, MoneyInputShowcase } from "./money-input"
+import { NotificationCenterShowcase, notificationCenterMock } from "./notification-center"
+import { numberInputMock, NumberInputShowcase } from "./number-input"
+import { OtpInputShowcase, otpInputMock } from "./otp-input"
+import { pageContainerMock, PageContainerShowcase } from "./page-container"
+import { pageHeaderMock, PageHeaderShowcase } from "./page-header"
+import { PageTabsShowcase, pageTabsMock } from "./page-tabs"
+import { sectionMock, SectionShowcase } from "./section"
+import { stackMock, StackShowcase } from "./stack"
+import { skeletonFormMock, SkeletonFormShowcase } from "./skeleton-form"
+import { skeletonTableMock, SkeletonTableShowcase } from "./skeleton-table"
+import { phoneInputMock, PhoneInputShowcase } from "./phone-input"
+import { pageStateMock, PageStateShowcase } from "./page-state"
+import { paginationMock, PaginationShowcase } from "./pagination"
+import { popoverMock, PopoverShowcase } from "./popover"
+import { propertyGridMock, PropertyGridShowcase } from "./property-grid"
+import { ProgressShowcase, progressMock } from "./progress"
+import { quantityInputMock, QuantityInputShowcase } from "./quantity-input"
+import { radioGroupMock, RadioGroupShowcase } from "./radio-group"
+import { resultMock, ResultShowcase } from "./result"
+import { rightClickMenuMock, RightClickMenuShowcase } from "./right-click-menu"
+import { scrollBoxMock, ScrollBoxShowcase } from "./scroll-box"
+import { savedFilterSelectMock, SavedFilterSelectShowcase } from "./saved-filter-select"
+import { searchInputMock, SearchInputShowcase } from "./search-input"
+import { segmentedControlMock, SegmentedControlShowcase } from "./segmented-control"
+import { selectMock, SelectShowcase } from "./select"
+import { sheetShellMock, SheetShellShowcase } from "./sheet-shell"
+import { sidebarNavMock, SidebarNavShowcase } from "./sidebar-nav"
+import { simpleSelectMock, SimpleSelectShowcase } from "./simple-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 { tagListMock, TagListShowcase } from "./tag-list"
+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 { passwordInputMock, PasswordInputShowcase } from "./password-input"
+import { ratingMock, RatingShowcase } from "./rating"
+import { watermarkMock, WatermarkShowcase } from "./watermark"
+
+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 },
+  accordion: { mock: accordionMock, Showcase: AccordionShowcase },
+  affix: { mock: affixMock, Showcase: AffixShowcase },
+  "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 },
+  "cascader": { mock: cascaderMock, Showcase: CascaderShowcase },
+  "command-bar": { mock: commandBarMock, Showcase: CommandBarShowcase },
+  "command-palette": { mock: commandPaletteMock, Showcase: CommandPaletteShowcase },
+  "carousel": { mock: carouselMock, Showcase: CarouselShowcase },
+  "clearable-input": { mock: clearableInputMock, Showcase: ClearableInputShowcase },
+  "code-block": { mock: codeBlockMock, Showcase: CodeBlockShowcase },
+  "aspect-ratio": { mock: aspectRatioMock, Showcase: AspectRatioShowcase },
+  "dual-list-picker": { mock: dualListPickerMock, Showcase: DualListPickerShowcase },
+  "float-button": { mock: floatButtonMock, Showcase: FloatButtonShowcase },
+  divider: { mock: dividerMock, Showcase: DividerShowcase },
+  input: { mock: inputMock, Showcase: InputShowcase },
+  textarea: { mock: textareaMock, Showcase: TextareaShowcase },
+  select: { mock: selectMock, Showcase: SelectShowcase },
+  combobox: { mock: comboboxMock, Showcase: ComboboxShowcase },
+  "radio-group": { mock: radioGroupMock, Showcase: RadioGroupShowcase },
+  "simple-select": { mock: simpleSelectMock, Showcase: SimpleSelectShowcase },
+  "async-select": { mock: asyncSelectMock, Showcase: AsyncSelectShowcase },
+  "async-multi-select": { mock: asyncMultiSelectMock, Showcase: AsyncMultiSelectShowcase },
+  avatar: { mock: avatarMock, Showcase: AvatarShowcase },
+  "number-input": { mock: numberInputMock, Showcase: NumberInputShowcase },
+  "money-input": { mock: moneyInputMock, Showcase: MoneyInputShowcase },
+  "password-input": { mock: passwordInputMock, Showcase: PasswordInputShowcase },
+  "date-input": { mock: dateInputMock, Showcase: DateInputShowcase },
+  "date-range-input": { mock: dateRangeInputMock, Showcase: DateRangeInputShowcase },
+  "date-picker": { mock: datePickerMock, Showcase: DatePickerShowcase },
+  "date-range-picker": { mock: dateRangePickerMock, Showcase: DateRangePickerShowcase },
+  "description-list": { mock: descriptionListMock, Showcase: DescriptionListShowcase },
+  descriptions: { mock: descriptionsMock, Showcase: DescriptionsShowcase },
+  drawer: { mock: drawerMock, Showcase: DrawerShowcase },
+  "json-input": { mock: jsonInputMock, Showcase: JsonInputShowcase },
+  kanban: { mock: kanbanBoardMock, Showcase: KanbanBoardShowcase },
+  "menubar": { mock: menubarMock, Showcase: MenubarShowcase },
+  "navigation-menu": { mock: navigationMenuMock, Showcase: NavigationMenuShowcase },
+  "otp-input": { mock: otpInputMock, Showcase: OtpInputShowcase },
+  "quantity-input": { mock: quantityInputMock, Showcase: QuantityInputShowcase },
+  rating: { mock: ratingMock, Showcase: RatingShowcase },
+  "masked-input": { mock: maskedInputMock, Showcase: MaskedInputShowcase },
+  "phone-input": { mock: phoneInputMock, Showcase: PhoneInputShowcase },
+  "mention-input": { mock: mentionInputMock, Showcase: MentionInputShowcase },
+  "search-input": { mock: searchInputMock, Showcase: SearchInputShowcase },
+  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 },
+  "copy-field": { mock: copyFieldMock, Showcase: CopyFieldShowcase },
+  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 },
+  "modal-shell": { mock: modalShellMock, Showcase: ModalShellShowcase },
+  "sheet-shell": { mock: sheetShellMock, Showcase: SheetShellShowcase },
+  dialog: { mock: dialogMock, Showcase: DialogShowcase },
+  popover: { mock: popoverMock, Showcase: PopoverShowcase },
+  tooltip: { mock: tooltipMock, Showcase: TooltipShowcase },
+  "hover-card": { mock: hoverCardMock, Showcase: HoverCardShowcase },
+  "right-click-menu": { mock: rightClickMenuMock, Showcase: RightClickMenuShowcase },
+  "data-table": { mock: dataTableMock, Showcase: DataTableShowcase },
+  "data-table-pagination": { mock: dataTablePaginationMock, Showcase: (props) => React.createElement(DataTablePartShowcase, { ...props, slug: "data-table-pagination" }) },
+  "data-table-toolbar": { mock: dataTableToolbarMock, Showcase: (props) => React.createElement(DataTablePartShowcase, { ...props, slug: "data-table-toolbar" }) },
+  "data-table-row-actions": { mock: dataTableRowActionsMock, Showcase: (props) => React.createElement(DataTablePartShowcase, { ...props, slug: "data-table-row-actions" }) },
+  "data-table-actions-column": { mock: dataTableActionsColumnMock, Showcase: (props) => React.createElement(DataTablePartShowcase, { ...props, slug: "data-table-actions-column" }) },
+  "data-table-select-column": { mock: dataTableSelectColumnMock, Showcase: (props) => React.createElement(DataTablePartShowcase, { ...props, slug: "data-table-select-column" }) },
+  "data-table-saved-filters": { mock: dataTableSavedFiltersMock, Showcase: (props) => React.createElement(DataTablePartShowcase, { ...props, slug: "data-table-saved-filters" }) },
+  "saved-filter-select": { mock: savedFilterSelectMock, Showcase: SavedFilterSelectShowcase },
+  "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-async-select": { mock: formAsyncSelectMock, Showcase: FormWrapperShowcase },
+  "form-textarea": { mock: formRHFWrapperMock, Showcase: FormWrapperShowcase },
+  "form-switch": { mock: formRHFWrapperMock, Showcase: FormWrapperShowcase },
+  "form-search-input": { mock: formRHFWrapperMock, Showcase: FormWrapperShowcase },
+  "form-password-input": { mock: formRHFWrapperMock, Showcase: FormWrapperShowcase },
+  "form-number-input": { mock: formRHFWrapperMock, Showcase: FormWrapperShowcase },
+  "form-phone-input": { mock: formRHFWrapperMock, Showcase: FormWrapperShowcase },
+  "form-date-input": { 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 },
+  "form-builder": { mock: formBuilderMock, Showcase: FormBuilderShowcase },
+  "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 },
+  "app-sidebar": { mock: appSidebarMock, Showcase: AppSidebarShowcase },
+  "app-shell": { mock: appShellMock, Showcase: AppShellShowcase },
+  "sidebar-nav": { mock: sidebarNavMock, Showcase: SidebarNavShowcase },
+  breadcrumbs: { mock: breadcrumbsMock, Showcase: BreadcrumbsShowcase },
+  "page-header": { mock: pageHeaderMock, Showcase: PageHeaderShowcase },
+  "page-container": { mock: pageContainerMock, Showcase: PageContainerShowcase },
+  "page-state": { mock: pageStateMock, Showcase: PageStateShowcase },
+  "page-tabs": { mock: pageTabsMock, Showcase: PageTabsShowcase },
+  pagination: { mock: paginationMock, Showcase: PaginationShowcase },
+  "metric-grid": { mock: metricGridMock, Showcase: MetricGridShowcase },
+  "notification-center": { mock: notificationCenterMock, Showcase: NotificationCenterShowcase },
+  "info-card": { mock: infoCardMock, Showcase: InfoCardShowcase },
+  list: { mock: listMock, Showcase: ListShowcase },
+  "property-grid": { mock: propertyGridMock, Showcase: PropertyGridShowcase },
+  "activity-feed": { mock: activityFeedMock, Showcase: ActivityFeedShowcase },
+  "empty-state": { mock: emptyStateMock, Showcase: EmptyStateShowcase },
+  "loading-state": { mock: loadingStateMock, Showcase: LoadingStateShowcase },
+  "data-state": { mock: dataStateMock, Showcase: DataStateShowcase },
+  "keyboard-shortcut": { mock: keyboardShortcutMock, Showcase: KeyboardShortcutShowcase },
+  progress: { mock: progressMock, Showcase: ProgressShowcase },
+  result: { mock: resultMock, Showcase: ResultShowcase },
+  "resizable-panel": { mock: resizablePanelMock, Showcase: ResizablePanelShowcase },
+  section: { mock: sectionMock, Showcase: SectionShowcase },
+  stack: { mock: stackMock, Showcase: StackShowcase },
+  statistic: { mock: statisticMock, Showcase: StatisticShowcase },
+  "skeleton-form": { mock: skeletonFormMock, Showcase: SkeletonFormShowcase },
+  "skeleton-table": { mock: skeletonTableMock, Showcase: SkeletonTableShowcase },
+  "sticky-footer-bar": { mock: stickyFooterBarMock, Showcase: StickyFooterBarShowcase },
+  "rich-text-editor": { mock: richTextEditorMock, Showcase: RichTextEditorShowcase },
+  tour: { mock: tourMock, Showcase: TourShowcase },
+  "qr-code": { mock: qrCodeMock, Showcase: QRCodeShowcase },
+  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 },
+  watermark: { mock: watermarkMock, Showcase: WatermarkShowcase },
+  "scroll-box": { mock: scrollBoxMock, Showcase: ScrollBoxShowcase },
+  "tag-list": { mock: tagListMock, Showcase: TagListShowcase },
+  timeline: { mock: timelineMock, Showcase: TimelineShowcase },
+  toast: { mock: toastMock, Showcase: ToastShowcase },
+}

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

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

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

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

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

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

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

@@ -0,0 +1,28 @@
+import type { ComponentDemoMock } from "../types"
+
+export const inputMock: ComponentDemoMock = {
+  code: `import { Label, Input } from "tembro"\n\nexport function Example() {\n  return (\n    <form className="space-y-4">\n      <div>\n        <Label htmlFor="support-email">Support email</Label>\n        <Input id="support-email" type="email" defaultValue="team@acme.io" required />\n      </div>\n\n      <div>\n        <Label htmlFor="component-search">Search components</Label>\n        <Input\n          id="component-search"\n          value={query}\n          onValueChange={setQuery}\n          placeholder="Search by slug or title"\n          clearable\n          trailingAction={<span className="text-xs text-muted-foreground">12 results</span>}\n          replaceTrailingWhenClear={false}\n        />\n      </div>\n\n      <div>\n        <Label htmlFor="api-prefix">Cost estimate</Label>\n        <Input\n          id="api-prefix"\n          defaultValue="120"\n          readOnly\n          trailing={<span className="text-sm aui-text-muted">USD</span>}\n        />\n      </div>\n\n      <div>\n        <Label htmlFor="disabled-input">Locked status</Label>\n        <Input id="disabled-input" disabled value="Locked while syncing" />\n      </div>\n    </form>\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",
+  ],
+  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.",
+  ],
+}
+

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

@@ -0,0 +1,139 @@
+import * as React from "react"
+import type { ChangeEvent } from "react"
+
+import { MailIcon } from "lucide-react"
+
+import { Button, Input } from "@/index"
+
+import type { ComponentDemoProps } from "../types"
+
+import { inputDemoFields } from "./data"
+
+const panelClass = "border-t border-[color:var(--aui-divider)] py-6"
+
+export function InputShowcase({ state, setState }: ComponentDemoProps) {
+  const searchField = inputDemoFields[0]
+  const hasValue = state.textValue.trim().length > 0
+  const [activeMode, setActiveMode] = React.useState<"search" | "profile">("search")
+  const activeLabel = activeMode === "search" ? searchField.label : "Profile contact"
+  const activePlaceholder = activeMode === "search" ? searchField.placeholder : "owner@azamatui.dev"
+  const activeType = activeMode === "search" ? "text" : "email"
+
+  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">Text entry</p>
+            <h3 className="mt-3 text-2xl font-semibold tracking-tight aui-text-strong">One field should define the rhythm</h3>
+            <p className="mt-3 text-sm leading-6 aui-text-muted">Show the real input first, then verify disabled and read-only states around it.</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">Mode</p>
+              <p className="mt-2 text-lg font-semibold capitalize aui-text-strong">{activeMode}</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">Value</p>
+              <p className="mt-2 truncate text-lg font-semibold aui-text-strong">{hasValue ? state.textValue : "Empty"}</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">State</p>
+              <p className="mt-2 text-lg font-semibold aui-text-strong">{hasValue ? "Filled" : "Ready"}</p>
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-6 flex flex-wrap gap-2">
+          <Button size="sm" variant={activeMode === "search" ? "default" : "outline"} onClick={() => setActiveMode("search")}>
+            Search field
+          </Button>
+          <Button size="sm" variant={activeMode === "profile" ? "default" : "outline"} onClick={() => setActiveMode("profile")}>
+            Email field
+          </Button>
+        </div>
+      </section>
+
+      <section className={panelClass}>
+        <div className="grid gap-6 xl:grid-cols-[minmax(0,0.92fr)_minmax(0,1.08fr)]">
+          <div className="space-y-4">
+            <div>
+              <p className="text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted">Primary field</p>
+              <h4 className="mt-2 text-xl font-semibold tracking-tight aui-text-strong">
+                {activeMode === "search" ? "Search-driven input" : "Profile contact field"}
+              </h4>
+            </div>
+
+            <div className="rounded-[20px] border border-[color:var(--aui-divider)] p-4">
+              <p className="text-sm font-medium aui-text-muted">{activeLabel}</p>
+              <div className="mt-3">
+                <Input
+                  aria-label={activeLabel}
+                  value={state.textValue}
+                  onChange={(event: ChangeEvent<HTMLInputElement>) => setState({ textValue: event.target.value })}
+                  placeholder={activePlaceholder}
+                  type={activeType}
+                  kind={activeMode === "search" ? "search" : "text"}
+                  className="w-full"
+                />
+              </div>
+            </div>
+
+            <div className="grid gap-3 sm:grid-cols-2">
+              <div className="rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3">
+                <p className="text-xs aui-text-muted">Email sample</p>
+                <div className="mt-2">
+                  <Input defaultValue={inputDemoFields[1].defaultValue} type="email" aria-label={inputDemoFields[1].label} />
+                </div>
+              </div>
+              <div className="rounded-[18px] border border-[color:var(--aui-divider)] px-4 py-3">
+                <p className="text-xs aui-text-muted">Disabled sample</p>
+                <div className="mt-2">
+                  <Input value={inputDemoFields[2].defaultValue} disabled aria-label={inputDemoFields[2].label} />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="space-y-4">
+            <div className="flex items-center gap-3">
+              <MailIcon className="size-4 aui-text-muted" />
+              <div>
+                <p className="text-xs font-semibold uppercase tracking-[0.22em] aui-text-muted">Read only</p>
+                <p className="mt-1 text-sm aui-text-muted">{inputDemoFields[3].label}</p>
+              </div>
+            </div>
+
+            <Input defaultValue={inputDemoFields[3].defaultValue} readOnly aria-label={inputDemoFields[3].label} />
+
+            <div className="border-y border-[color:var(--aui-divider)]">
+              {[
+                "Default field should stay legible before any decorators or wrappers are added.",
+                "Disabled state should look intentionally inactive without losing structure.",
+                "Read-only fields must remain easy to scan and copy.",
+                "Avoid extra shells when the real input already provides the right chrome.",
+              ].map((note) => (
+                <div key={note} className="border-b border-[color:var(--aui-divider)] py-3 text-sm leading-6 aui-text-muted last:border-b-0">
+                  {note}
+                </div>
+              ))}
+            </div>
+
+            <div className="flex flex-wrap gap-2">
+              <Button type="button" size="sm" onClick={() => setState({ textValue: "Dashboard" })}>
+                Fill sample
+              </Button>
+              <Button type="button" size="sm" variant="outline" onClick={() => setState({ textValue: "finance@azamat.dev" })}>
+                Email sample
+              </Button>
+              <Button type="button" size="sm" variant="secondary" onClick={() => setState({ textValue: "" })}>
+                Clear
+              </Button>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}

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

@@ -0,0 +1,6 @@
+export type InputDemoField = {
+  kind: "search" | "email" | "disabled" | "readOnly" | "toolbar"
+  label: string
+  placeholder?: string
+  defaultValue?: string
+}

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

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

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

@@ -0,0 +1,20 @@
+import type { ComponentDemoMock } from "../types"
+
+export const jsonInputMock: ComponentDemoMock = {
+  code: `import { JsonInput } from "@/index"
+
+export function Example() {
+  return <JsonInput value='{"name":"tembro"}' />
+}`,
+  cliCommand: "npx tembro add json-input",
+  highlights: [
+    "Validates JSON on edit",
+    "Returns parsed payload and validity in callback",
+    "Great for admin panels accepting structured config",
+  ],
+  scenarios: [
+    { title: "Webhooks", description: "Validate headers/payload examples before save." },
+    { title: "Feature flags", description: "Let power users edit nested JSON settings." },
+  ],
+}
+

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

@@ -0,0 +1,28 @@
+import * as React from "react"
+
+import { JsonInput } from "@/index"
+
+export function JsonInputShowcase() {
+  const [value, setValue] = React.useState(`{
+  "name": "Azamat UI",
+  "version": 1
+}`)
+
+  const [isValid, setIsValid] = React.useState(true)
+
+  return (
+    <div className="space-y-3">
+      <JsonInput
+        value={value}
+        onValueChange={(_, __, valid) => {
+          setIsValid(valid)
+        }}
+        onChange={(event) => setValue(event.target.value)}
+      />
+      <p className={`text-sm ${isValid ? "text-emerald-600" : "text-destructive"}`}>
+        {isValid ? "JSON is valid" : "JSON is invalid"}
+      </p>
+    </div>
+  )
+}
+

package/packages/cli/vendor/src/showcase/premium/kanban-board/index.ts

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