tembro 1.0.0

package/packages/cli/vendor/src/components/upload/image-upload.tsx

@@ -0,0 +1,132 @@
+import * as React from "react"
+import { ImageIcon, XIcon } from "lucide-react"
+
+import {
+  FileUpload,
+  formatBytes,
+  getFileKey,
+  type FileUploadProps,
+  type FileUploadRenderFileState,
+} from "@/components/upload/file-upload"
+import { Button } from "@/components/ui/button"
+import { cn, stopInteractivePropagation } from "@/lib/utils"
+
+export type ImageUploadProps = Omit<FileUploadProps, "accept" | "renderFile"> & {
+  accept?: string
+  preview?: boolean
+  previewClassName?: string
+  imageClassName?: string
+  renderImageFile?: (state: FileUploadRenderFileState & { previewUrl?: string }) => React.ReactNode
+}
+
+function useImagePreviewUrls(files: File[], enabled = true) {
+  const [urls, setUrls] = React.useState<Record<string, string>>({})
+
+  React.useEffect(() => {
+    if (!enabled) {
+      setUrls({})
+      return
+    }
+
+    const entries = files
+      .filter((file) => file.type.startsWith("image/"))
+      .map((file) => [getFileKey(file), URL.createObjectURL(file)] as const)
+
+    setUrls(Object.fromEntries(entries))
+
+    return () => {
+      entries.forEach(([, url]) => URL.revokeObjectURL(url))
+    }
+  }, [enabled, files])
+
+  return urls
+}
+
+function defaultRenderImageFile({
+  file,
+  previewUrl,
+  progress,
+  remove,
+  previewClassName,
+  imageClassName,
+}: FileUploadRenderFileState & {
+  previewUrl?: string
+  previewClassName?: string
+  imageClassName?: string
+}) {
+  return (
+    <div className="flex min-w-0 items-center gap-3">
+      <div
+        className={cn(
+          "flex size-14 shrink-0 items-center justify-center overflow-hidden rounded-[min(var(--radius-xl),16px)] border border-border/75 bg-muted/45 text-muted-foreground shadow-[0_1px_0_rgba(255,255,255,0.05)]",
+          previewClassName
+        )}
+      >
+        {previewUrl ? (
+          <img src={previewUrl} alt={file.name} className={cn("size-full object-cover", imageClassName)} />
+        ) : (
+          <ImageIcon className="size-5" />
+        )}
+      </div>
+      <div className="min-w-0 flex-1">
+        <div className="truncate text-sm font-medium text-foreground">{file.name}</div>
+        <div className="text-xs text-muted-foreground">{formatBytes(file.size)}</div>
+        {typeof progress === "number" && (
+          <div className="mt-2 h-1.5 overflow-hidden rounded-full bg-muted/80">
+            <div
+              className="h-full rounded-full bg-primary shadow-[0_8px_18px_color-mix(in_oklch,var(--primary),transparent_82%)]"
+              style={{ width: `${Math.min(Math.max(progress, 0), 100)}%` }}
+            />
+          </div>
+        )}
+      </div>
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon-xs"
+        className="rounded-full"
+        onClick={(event) => {
+          stopInteractivePropagation(event)
+          remove()
+        }}
+        onMouseDown={stopInteractivePropagation}
+        onDoubleClick={stopInteractivePropagation}
+      >
+        <XIcon />
+        <span className="sr-only">Remove image</span>
+      </Button>
+    </div>
+  )
+}
+
+function ImageUpload({
+  accept = "image/*",
+  buttonLabel = "Choose image",
+  dropzoneLabel = "Drop images here or click to upload",
+  preview = true,
+  previewClassName,
+  imageClassName,
+  files = [],
+  renderImageFile,
+  ...props
+}: ImageUploadProps) {
+  const previewUrls = useImagePreviewUrls(files, preview)
+
+  return (
+    <FileUpload
+      accept={accept}
+      buttonLabel={buttonLabel}
+      dropzoneLabel={dropzoneLabel}
+      files={files}
+      renderFile={(state) => {
+        const previewUrl = previewUrls[getFileKey(state.file)]
+
+        return renderImageFile?.({ ...state, previewUrl }) ??
+          defaultRenderImageFile({ ...state, previewUrl, previewClassName, imageClassName })
+      }}
+      {...props}
+    />
+  )
+}
+
+export { ImageUpload, useImagePreviewUrls }

package/packages/cli/vendor/src/components/upload/index.ts

@@ -0,0 +1,4 @@
+export { FileUpload } from "./file-upload"
+export { ImageUpload } from "./image-upload"
+export { FileDropzone } from "./file-dropzone"
+export type { FileDropzoneProps } from "./file-dropzone"

package/packages/cli/vendor/src/components/wizard/demo.tsx

@@ -0,0 +1,6 @@
+import { component, createShowcaseDemoRegistry } from "@/showcase/create-demo"
+
+export const wizardShowcaseDemoRegistry = createShowcaseDemoRegistry([
+  component("stepper", "Stepper", "wizard", "Clickable step navigation for multi-step forms."),
+  component("wizard", "Wizard", "wizard", "Stepper, content and footer controls combined into one workflow."),
+])

package/packages/cli/vendor/src/components/wizard/index.ts

@@ -0,0 +1,2 @@
+export * from "./stepper"
+export * from "./wizard"

package/packages/cli/vendor/src/components/wizard/stepper.tsx

@@ -0,0 +1,53 @@
+import * as React from "react"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+export type StepperStep = {
+  id: string
+  title: React.ReactNode
+  description?: React.ReactNode
+  disabled?: boolean
+  completed?: boolean
+}
+
+export type StepperProps = React.ComponentProps<"div"> & {
+  steps: StepperStep[]
+  currentStep: string
+  onStepChange?: (stepId: string) => void
+  orientation?: "horizontal" | "vertical"
+}
+
+function Stepper({ className, steps, currentStep, onStepChange, orientation = "horizontal", ...props }: StepperProps) {
+  const currentIndex = Math.max(steps.findIndex((step) => step.id === currentStep), 0)
+
+  return (
+    <div data-slot="stepper" data-orientation={orientation} className={cn(orientation === "vertical" ? "grid gap-3" : "flex flex-wrap items-start gap-3", className)} {...props}>
+      {steps.map((step, index) => {
+        const isActive = step.id === currentStep
+        const isComplete = step.completed ?? index < currentIndex
+        const isClickable = Boolean(onStepChange) && !step.disabled
+
+        return (
+          <button
+            key={step.id}
+            type="button"
+            disabled={!isClickable}
+            className={cn("flex min-w-0 items-start gap-2 text-left disabled:cursor-default", orientation === "horizontal" && "flex-1")}
+            onClick={() => onStepChange?.(step.id)}
+          >
+            <span className={cn("flex size-7 shrink-0 items-center justify-center rounded-full border text-xs font-medium", isActive && "border-primary bg-primary text-primary-foreground", isComplete && !isActive && "border-primary bg-primary/10 text-primary")}>
+              {isComplete && !isActive ? <CheckIcon className="size-4" /> : index + 1}
+            </span>
+            <span className="min-w-0 grid gap-0.5">
+              <span className={cn("text-sm font-medium", isActive ? "text-foreground" : "text-muted-foreground")}>{step.title}</span>
+              {step.description && <span className="text-xs text-muted-foreground">{step.description}</span>}
+            </span>
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+export { Stepper }

package/packages/cli/vendor/src/components/wizard/wizard.tsx

@@ -0,0 +1,60 @@
+import * as React from "react"
+
+import { Button } from "@/components/ui/button"
+import { Stepper, type StepperStep } from "@/components/wizard/stepper"
+import { cn } from "@/lib/utils"
+
+export type WizardProps = React.ComponentProps<"div"> & {
+  steps: StepperStep[]
+  currentStep: string
+  onStepChange?: (stepId: string) => void
+  onNext?: () => void
+  onPrevious?: () => void
+  onFinish?: () => void
+  nextLabel?: React.ReactNode
+  previousLabel?: React.ReactNode
+  finishLabel?: React.ReactNode
+  children?: React.ReactNode
+  footer?: React.ReactNode
+}
+
+function Wizard({
+  className,
+  steps,
+  currentStep,
+  onStepChange,
+  onNext,
+  onPrevious,
+  onFinish,
+  nextLabel = "Next",
+  previousLabel = "Previous",
+  finishLabel = "Finish",
+  children,
+  footer,
+  ...props
+}: WizardProps) {
+  const currentIndex = Math.max(steps.findIndex((step) => step.id === currentStep), 0)
+  const isFirst = currentIndex === 0
+  const isLast = currentIndex === steps.length - 1
+
+  return (
+    <div data-slot="wizard" className={cn("grid gap-6", className)} {...props}>
+      <Stepper steps={steps} currentStep={currentStep} onStepChange={onStepChange} />
+      <div data-slot="wizard-content" className="min-w-0">
+        {children}
+      </div>
+      {footer ?? (
+        <div data-slot="wizard-footer" className="flex items-center justify-between gap-2 border-t pt-4">
+          <Button type="button" variant="outline" disabled={isFirst} onClick={onPrevious}>
+            {previousLabel}
+          </Button>
+          <Button type="button" onClick={isLast ? onFinish : onNext}>
+            {isLast ? finishLabel : nextLabel}
+          </Button>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export { Wizard }

package/packages/cli/vendor/src/families/badge-family.ts

@@ -0,0 +1,7 @@
+import { Badge } from "@/components/ui/badge"
+
+const BadgeFamily = {
+  Root: Badge,
+} as const
+
+export { BadgeFamily }

package/packages/cli/vendor/src/families/card-family.ts

@@ -0,0 +1,26 @@
+import { EntityCard, FileCard, InfoCard, StatisticCard } from "@/components/display"
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+
+const CardFamily = {
+  Root: Card,
+  Header: CardHeader,
+  Title: CardTitle,
+  Description: CardDescription,
+  Action: CardAction,
+  Content: CardContent,
+  Footer: CardFooter,
+  Info: InfoCard,
+  Statistic: StatisticCard,
+  Entity: EntityCard,
+  File: FileCard,
+} as const
+
+export { CardFamily }

package/packages/cli/vendor/src/families/catalog.ts

@@ -0,0 +1,125 @@
+import { additionalPublicFamilies } from "@/families/public-surface-rationalization"
+
+export type ComponentFamilyName =
+  | "InputFamily"
+  | "SelectFamily"
+  | "CardFamily"
+  | "BadgeFamily"
+  | "OverlayFamily"
+  | "FormFamily"
+  | "DataTableFamily"
+  | "ActionFamily"
+  | "FeedbackFamily"
+  | "ProgressFamily"
+  | "ChartFamily"
+  | "NavigationFamily"
+  | "UploadFamily"
+  | "PrimitiveFamily"
+
+export type ComponentFamilyCatalogEntry = {
+  family: ComponentFamilyName
+  label: string
+  description: string
+  canonical: readonly string[]
+  members: readonly string[]
+  transitional?: readonly string[]
+  advanced?: readonly string[]
+}
+
+export const componentFamilyCatalog: ComponentFamilyCatalogEntry[] = [
+  {
+    family: "InputFamily",
+    label: "Input",
+    description: "Small core input surface for the input types used most often in dashboard screens.",
+    canonical: ["Input", "Textarea"],
+    members: [
+      "NumberInput",
+      "DateInput",
+      "DateRangeInput",
+      "MoneyInput",
+      "PhoneInput",
+      "FormInput",
+    ],
+    transitional: ["ClearableInput", "SearchInput", "MaskedInput", "QuantityInput"],
+    advanced: ["Slider", "RangeSlider", "Rating", "OtpInput", "ColorInput", "InlineEditable", "TagInput", "QuantityStepper"],
+  },
+  {
+    family: "SelectFamily",
+    label: "Select",
+    description: "Base select surface with async, keyboard-search, and form-wrapper members layered only when the workflow needs them.",
+    canonical: ["Select"],
+    members: ["AsyncSelect", "Combobox", "FormSelect"],
+    transitional: ["SimpleSelect", "FormAsyncSelect"],
+    advanced: ["AsyncMultiSelect"],
+  },
+  {
+    family: "CardFamily",
+    label: "Card",
+    description: "Primitive card plus dashboard and entity-oriented composed card presets.",
+    canonical: ["Card", "InfoCard"],
+    members: ["StatisticCard", "EntityCard", "FileCard", "TrendCard", "ComparisonCard"],
+    transitional: ["SmartCard", "StatCard"],
+  },
+  {
+    family: "BadgeFamily",
+    label: "Badge",
+    description: "Status, metadata, and inline labels expressed through one Badge API with tone, dot, size, and variant props.",
+    canonical: ["Badge"],
+    members: ["DeltaBadge"],
+  },
+  {
+    family: "OverlayFamily",
+    label: "Overlay",
+    description: "Dialog, popover, menu, tooltip, drawer, and hover-preview interaction surfaces grouped by behavior.",
+    canonical: ["Dialog", "Popover", "DropdownMenu"],
+    members: ["Tooltip", "HoverCard", "ConfirmDialog", "SheetShell"],
+    transitional: ["RightClickMenu", "AlertDialog", "ModalShell", "Drawer", "DialogActions"],
+  },
+  {
+    family: "FormFamily",
+    label: "Form",
+    description: "Field shell, wrappers, and builder presets.",
+    canonical: ["FormFieldShell"],
+    members: [
+      "FormInput",
+      "FormTextarea",
+      "FormSelect",
+      "FormAsyncSelect",
+      "FormSwitch",
+      "FormDatePicker",
+      "FormDateRangePicker",
+      "RepeaterField",
+    ],
+    transitional: [
+      "FormSearchInput",
+      "FormPasswordInput",
+      "FormNumberInput",
+      "FormPhoneInput",
+      "FormDateInput",
+      "FormDateRangeInput",
+    ],
+    advanced: ["FormBuilder"],
+  },
+  {
+    family: "DataTableFamily",
+    label: "Data Table",
+    description: "Canonical grid surface with a small set of reusable companions. Lower-level helpers stay secondary to the main table route.",
+    canonical: ["DataTable"],
+    members: [
+      "DataTableToolbar",
+      "DataTablePagination",
+      "DataTableRowActions",
+      "DataTableBulkActions",
+      "DataTableViewPresets",
+    ],
+    advanced: [
+      "DataTableColumnVisibilityMenu",
+      "DataTableSortableHeader",
+      "createDataTableSelectColumn",
+      "createDataTableActionsColumn",
+      "TableExportMenu",
+      "TableImportButton",
+    ],
+  },
+  ...additionalPublicFamilies,
+] as const

package/packages/cli/vendor/src/families/data-table-family.ts

@@ -0,0 +1,31 @@
+import {
+  createDataTableActionsColumn,
+  createDataTableSelectColumn,
+  DataTable,
+  DataTableBulkActions,
+  DataTableColumnVisibilityMenu,
+  DataTablePagination,
+  DataTableRowActions,
+  DataTableSortableHeader,
+  DataTableToolbar,
+  DataTableViewPresets,
+} from "@/components/data-table"
+import { TableExportMenu } from "@/components/data-table/table-export-menu"
+import { TableImportButton } from "@/components/data-table/table-import-button"
+
+const DataTableFamily = {
+  Root: DataTable,
+  Toolbar: DataTableToolbar,
+  Pagination: DataTablePagination,
+  ColumnVisibilityMenu: DataTableColumnVisibilityMenu,
+  SortableHeader: DataTableSortableHeader,
+  RowActions: DataTableRowActions,
+  BulkActions: DataTableBulkActions,
+  ViewPresets: DataTableViewPresets,
+  ExportMenu: TableExportMenu,
+  ImportButton: TableImportButton,
+  createSelectColumn: createDataTableSelectColumn,
+  createActionsColumn: createDataTableActionsColumn,
+} as const
+
+export { DataTableFamily }

package/packages/cli/vendor/src/families/docs-adoption.ts

@@ -0,0 +1,103 @@
+import {
+  componentDocsGroups,
+  type ComponentDocsGroupName,
+} from "@/families/docs-groups"
+import { getComponentMemberMetadata } from "@/families/member-queries"
+
+export type ComponentDocsBadgeTone =
+  | "stable"
+  | "preview"
+  | "advanced"
+  | "migration"
+
+export type ComponentDocsAdoption = {
+  component: string
+  group: ComponentDocsGroupName
+  badge: {
+    label: string
+    tone: ComponentDocsBadgeTone
+  }
+  recommendedOrder: number
+  sectionOrder: number
+  itemOrder: number
+}
+
+const sectionBaseOrder = {
+  primitives: 0,
+  presets: 100,
+  "form-wrappers": 200,
+  wrappers: 200,
+  extensions: 200,
+  advanced: 300,
+  transitional: 400,
+} as const
+
+function getBadgeForComponent(component: string) {
+  const metadata = getComponentMemberMetadata(component)
+
+  if (!metadata) {
+    return {
+      label: "Unknown",
+      tone: "preview" as const,
+    }
+  }
+
+  if (metadata.maturity === "canonical") {
+    return {
+      label: "Start here",
+      tone: "stable" as const,
+    }
+  }
+
+  if (metadata.maturity === "advanced") {
+    return {
+      label: "Advanced",
+      tone: "advanced" as const,
+    }
+  }
+
+  if (metadata.maturity === "transitional") {
+    return {
+      label: "Migration",
+      tone: "migration" as const,
+    }
+  }
+
+  return {
+    label: "Expand",
+    tone: "preview" as const,
+  }
+}
+
+const docsAdoptionMap = new Map<string, ComponentDocsAdoption>()
+
+for (const group of componentDocsGroups) {
+  group.sections.forEach((section, sectionIndex) => {
+    section.components.forEach((component, itemIndex) => {
+      const baseOrder =
+        sectionBaseOrder[section.id as keyof typeof sectionBaseOrder] ?? 500
+      const recommendedOrder = baseOrder + sectionIndex * 10 + itemIndex
+
+      docsAdoptionMap.set(component, {
+        component,
+        group: group.group,
+        badge: getBadgeForComponent(component),
+        recommendedOrder,
+        sectionOrder: sectionIndex,
+        itemOrder: itemIndex,
+      })
+    })
+  })
+}
+
+function getComponentDocsAdoption(component: string) {
+  return docsAdoptionMap.get(component)
+}
+
+function listDocsAdoption(group: ComponentDocsGroupName) {
+  return [...docsAdoptionMap.values()]
+    .filter((entry) => entry.group === group)
+    .sort((left, right) => left.recommendedOrder - right.recommendedOrder)
+}
+
+export { getComponentDocsAdoption, listDocsAdoption }