tembro 1.0.0

package/packages/cli/vendor/src/components/feedback/empty-state.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import { InboxIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+export type EmptyStateProps = React.ComponentProps<"div"> & {
+  icon?: React.ReactNode
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: React.ReactNode
+  actionLabel?: React.ReactNode
+  onAction?: () => void
+}
+
+function EmptyState({
+  className,
+  icon,
+  title = "No data",
+  description,
+  action,
+  actionLabel,
+  onAction,
+  ...props
+}: EmptyStateProps) {
+  return (
+    <div
+      data-slot="empty-state"
+      className={cn(
+        "flex min-h-52 flex-col items-center justify-center gap-4 rounded-[var(--radius-3xl)] border border-dashed border-border/80 bg-muted/25 p-10 text-center shadow-sm ring-1 ring-foreground/4",
+        className
+      )}
+      {...props}
+    >
+      <div className="flex size-12 items-center justify-center rounded-full border border-border/70 bg-background/92 text-muted-foreground shadow-[0_1px_0_rgba(255,255,255,0.08)]">
+        {icon ?? <InboxIcon className="size-5" />}
+      </div>
+
+      <div className="grid gap-1.5">
+        {title && <h3 className="text-base font-semibold tracking-tight text-foreground">{title}</h3>}
+        {description && (
+          <p className="max-w-sm text-sm leading-6 text-muted-foreground">{description}</p>
+        )}
+      </div>
+
+      {action ??
+        (actionLabel && onAction ? (
+          <Button type="button" variant="outline" size="sm" onClick={onAction}>
+            {actionLabel}
+          </Button>
+        ) : null)}
+    </div>
+  )
+}
+
+export { EmptyState }

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

@@ -0,0 +1,5 @@
+export * from "./alert"
+export * from "./empty-state"
+export * from "./loading-state"
+export * from "./page-state"
+export * from "./empty-search-state"

package/packages/cli/vendor/src/components/feedback/loading-state.tsx

@@ -0,0 +1,39 @@
+import * as React from "react"
+import { Loader2Icon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+export type LoadingStateProps = React.ComponentProps<"div"> & {
+  label?: React.ReactNode
+  description?: React.ReactNode
+  icon?: React.ReactNode
+}
+
+function LoadingState({
+  className,
+  label = "Loading...",
+  description,
+  icon,
+  ...props
+}: LoadingStateProps) {
+  return (
+    <div
+      data-slot="loading-state"
+      className={cn(
+        "flex min-h-52 flex-col items-center justify-center gap-4 rounded-[var(--radius-3xl)] border border-border/75 bg-muted/25 p-10 text-center text-muted-foreground shadow-sm ring-1 ring-foreground/4",
+        className
+      )}
+      {...props}
+    >
+      <div className="flex size-12 items-center justify-center rounded-full border border-border/70 bg-background/92 shadow-[0_1px_0_rgba(255,255,255,0.08)]">
+        {icon ?? <Loader2Icon className="size-5 animate-spin" />}
+      </div>
+      <div className="grid gap-1.5">
+        {label && <div className="text-base font-semibold tracking-tight text-foreground">{label}</div>}
+        {description && <p className="max-w-sm text-sm leading-6">{description}</p>}
+      </div>
+    </div>
+  )
+}
+
+export { LoadingState }

package/packages/cli/vendor/src/components/feedback/page-state.tsx

@@ -0,0 +1,73 @@
+import * as React from "react"
+import { AlertCircleIcon, CheckCircle2Icon, InfoIcon, Loader2Icon, SearchXIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+export type PageStateTone = "empty" | "loading" | "error" | "success" | "info"
+
+export type PageStateProps = Omit<React.ComponentProps<"div">, "title"> & {
+  tone?: PageStateTone
+  title?: React.ReactNode
+  description?: React.ReactNode
+  icon?: React.ReactNode
+  action?: React.ReactNode
+  compact?: boolean
+}
+
+function defaultPageStateIcon(tone: PageStateTone) {
+  switch (tone) {
+    case "loading":
+      return <Loader2Icon className="size-8 animate-spin" />
+    case "error":
+      return <AlertCircleIcon className="size-8" />
+    case "success":
+      return <CheckCircle2Icon className="size-8" />
+    case "info":
+      return <InfoIcon className="size-8" />
+    default:
+      return <SearchXIcon className="size-8" />
+  }
+}
+
+function PageState({ tone = "empty", title, description, icon, action, compact = false, className, ...props }: PageStateProps) {
+  return (
+    <div
+      data-slot="page-state"
+      role={tone === "error" ? "alert" : "status"}
+      className={cn(
+        "flex flex-col items-center justify-center rounded-[var(--radius-3xl)] border border-border/75 bg-card/96 text-center shadow-sm ring-1 ring-foreground/4",
+        compact ? "gap-2 p-6" : "min-h-72 gap-4 p-10",
+        className
+      )}
+      {...props}
+    >
+      <div className="flex size-14 items-center justify-center rounded-full border border-border/70 bg-muted/45 text-muted-foreground shadow-[0_1px_0_rgba(255,255,255,0.05)]">
+        {icon ?? defaultPageStateIcon(tone)}
+      </div>
+      <div className="grid gap-1">
+        {title && <div className="text-base font-semibold tracking-tight text-foreground">{title}</div>}
+        {description && <div className="max-w-md text-sm leading-6 text-muted-foreground">{description}</div>}
+      </div>
+      {action && <div>{action}</div>}
+    </div>
+  )
+}
+
+export type InlineStateProps = Omit<PageStateProps, "compact"> & {
+  retryLabel?: React.ReactNode
+  onRetry?: () => void
+}
+
+function InlineState({ retryLabel = "Retry", onRetry, action, className, ...props }: InlineStateProps) {
+  return (
+    <PageState
+      compact
+      className={cn("min-h-0", className)}
+      action={action ?? (onRetry ? <Button type="button" variant="outline" size="sm" onClick={onRetry}>{retryLabel}</Button> : undefined)}
+      {...props}
+    />
+  )
+}
+
+export { InlineState, PageState }

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

@@ -0,0 +1,7 @@
+import { component, createShowcaseDemoRegistry } from "@/showcase/create-demo"
+
+export const filtersShowcaseDemoRegistry = createShowcaseDemoRegistry([
+  component("filter-bar", "FilterBar", "actions", "Search, filters, active-count and reset actions in one toolbar."),
+  component("filter-chips", "FilterChips", "actions", "Inline active filter summaries with clear and remove actions."),
+  component("data-table-saved-filters", "SavedFilterSelect", "actions", "Saved filter chips and quick view controls."),
+])

package/packages/cli/vendor/src/components/filters/filter-bar.tsx

@@ -0,0 +1,89 @@
+import * as React from "react"
+import { SlidersHorizontalIcon, XIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+export type FilterBarProps = React.ComponentProps<"div"> & {
+  search?: React.ReactNode
+  filters?: React.ReactNode
+  actions?: React.ReactNode
+  activeCount?: number
+  activeLabel?: (count: number) => React.ReactNode
+  resetLabel?: React.ReactNode
+  onReset?: () => void
+  collapsible?: boolean
+  defaultExpanded?: boolean
+}
+
+function FilterBar({
+  className,
+  search,
+  filters,
+  actions,
+  activeCount = 0,
+  activeLabel = (count) => `${count} active`,
+  resetLabel = "Reset",
+  onReset,
+  collapsible = false,
+  defaultExpanded = false,
+  children,
+  ...props
+}: FilterBarProps) {
+  const [expanded, setExpanded] = React.useState(defaultExpanded)
+  const hasFilters = Boolean(filters || children)
+  const shouldShowFilters = !collapsible || expanded
+
+  return (
+    <div
+      data-slot="filter-bar"
+      className={cn("flex flex-col gap-3 rounded-lg border bg-card p-3", className)}
+      {...props}
+    >
+      <div className="flex flex-col gap-2 lg:flex-row lg:items-center lg:justify-between">
+        <div className="flex min-w-0 flex-1 flex-col gap-2 sm:flex-row sm:items-center">
+          {search && <div className="min-w-0 flex-1">{search}</div>}
+
+          {collapsible && hasFilters && (
+            <Button
+              type="button"
+              variant={expanded ? "secondary" : "outline"}
+              size="sm"
+              onClick={() => setExpanded((value) => !value)}
+            >
+              <SlidersHorizontalIcon data-icon="inline-start" />
+              Filters
+              {activeCount > 0 && (
+                <span className="ml-1 rounded-full bg-background px-1.5 text-xs">
+                  {activeCount}
+                </span>
+              )}
+            </Button>
+          )}
+        </div>
+
+        <div className="flex shrink-0 flex-wrap items-center gap-2">
+          {activeCount > 0 && (
+            <span className="text-sm text-muted-foreground">{activeLabel(activeCount)}</span>
+          )}
+          {activeCount > 0 && onReset && (
+            <Button type="button" variant="ghost" size="sm" onClick={onReset}>
+              <XIcon data-icon="inline-start" />
+              {resetLabel}
+            </Button>
+          )}
+          {actions}
+        </div>
+      </div>
+
+      {hasFilters && shouldShowFilters && (
+        <div className="flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center">
+          {filters}
+          {children}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export { FilterBar }

package/packages/cli/vendor/src/components/filters/filter-chips.tsx

@@ -0,0 +1,89 @@
+import * as React from "react"
+import { XIcon } from "lucide-react"
+
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { cn, stopInteractivePropagation } from "@/lib/utils"
+
+export type FilterChip = {
+  key: string
+  label: React.ReactNode
+  value?: React.ReactNode
+  tone?: "default" | "success" | "warning" | "danger" | "info" | "muted"
+  disabled?: boolean
+  hidden?: boolean
+}
+
+export type FilterChipsProps = React.ComponentProps<"div"> & {
+  chips: FilterChip[]
+  clearLabel?: React.ReactNode
+  empty?: React.ReactNode
+  onRemove?: (key: string) => void
+  onClear?: () => void
+}
+
+const chipVariant: Record<NonNullable<FilterChip["tone"]>, React.ComponentProps<typeof Badge>["variant"]> = {
+  default: "secondary",
+  success: "secondary",
+  warning: "outline",
+  danger: "destructive",
+  info: "outline",
+  muted: "outline",
+}
+
+function FilterChips({
+  chips,
+  clearLabel = "Clear all",
+  empty = "No active filters",
+  onRemove,
+  onClear,
+  className,
+  ...props
+}: FilterChipsProps) {
+  const visibleChips = chips.filter((chip) => !chip.hidden)
+  if (!visibleChips.length) {
+    return <div data-slot="filter-chips-empty" className={cn("text-sm text-muted-foreground", className)} {...props}>{empty}</div>
+  }
+
+  return (
+    <div data-slot="filter-chips" className={cn("flex flex-wrap items-center gap-2", className)} {...props}>
+      {visibleChips.map((chip) => (
+        <Badge key={chip.key} variant={chipVariant[chip.tone ?? "default"]} className={cn("gap-1.5", chip.disabled && "opacity-60")}>
+          <span>{chip.label}</span>
+          {chip.value !== undefined && <span className="text-muted-foreground">{chip.value}</span>}
+          {onRemove && !chip.disabled && (
+            <button
+              type="button"
+              className="rounded-full p-0.5 hover:bg-muted"
+              onClick={(event) => {
+                stopInteractivePropagation(event)
+                onRemove(chip.key)
+              }}
+              onMouseDown={stopInteractivePropagation}
+              onDoubleClick={stopInteractivePropagation}
+            >
+              <XIcon className="size-3" />
+            </button>
+          )}
+        </Badge>
+      ))}
+      {onClear && (
+        <Button
+          type="button"
+          variant="ghost"
+          size="xs"
+          onClick={(event) => {
+            stopInteractivePropagation(event)
+            onClear()
+          }}
+          onMouseDown={stopInteractivePropagation}
+          onDoubleClick={stopInteractivePropagation}
+        >
+          {clearLabel}
+        </Button>
+      )}
+    </div>
+  )
+}
+
+export { FilterChips }

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

@@ -0,0 +1,3 @@
+export * from "./filter-chips"
+export * from "./filter-bar"
+export * from "./saved-filter-select"

package/packages/cli/vendor/src/components/filters/saved-filter-select.tsx

@@ -0,0 +1,161 @@
+import * as React from "react"
+import { BookmarkIcon, SaveIcon, Trash2Icon, CheckIcon, ChevronsUpDownIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { cn, stopInteractivePropagation } from "@/lib/utils"
+
+export type SavedFilterItem = {
+  value: string
+  label: string
+  description?: string
+}
+
+export type SavedFilterSelectProps = Omit<React.ComponentProps<"div">, "value" | "onChange"> & {
+  value?: string
+  onValueChange?: (value: string | undefined) => void
+  filters: SavedFilterItem[]
+  onSave?: (name: string) => void
+  onDelete?: (value: string) => void
+  placeholder?: string
+  saveLabel?: string
+  savePlaceholder?: string
+  emptyMessage?: React.ReactNode
+  saveValue?: string
+  onSaveValueChange?: (value: string) => void
+}
+
+function SavedFilterSelect({
+  value,
+  onValueChange,
+  filters,
+  onSave,
+  onDelete,
+  placeholder = "Views",
+  saveLabel = "Save current view",
+  savePlaceholder = "Name this view",
+  emptyMessage = "No saved views",
+  saveValue,
+  onSaveValueChange,
+  className,
+  ...props
+}: SavedFilterSelectProps) {
+  const [open, setOpen] = React.useState(false)
+  const [internalSaveValue, setInternalSaveValue] = React.useState("")
+  const selectedFilter = filters.find((f) => f.value === value)
+  const nextSaveValue = saveValue ?? internalSaveValue
+
+  function setNextSaveValue(nextValue: string) {
+    if (saveValue === undefined) setInternalSaveValue(nextValue)
+    onSaveValueChange?.(nextValue)
+  }
+
+  function handleSave() {
+    const normalizedValue = nextSaveValue.trim()
+    if (!normalizedValue || !onSave) return
+    onSave(normalizedValue)
+    setNextSaveValue("")
+    setOpen(false)
+  }
+
+  return (
+    <div data-slot="saved-filter-select" className={className} {...props}>
+      <Popover open={open} onOpenChange={setOpen}>
+        <Button
+          render={<PopoverTrigger />}
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-[200px] justify-between"
+        >
+            <div className="flex items-center gap-2 truncate">
+              <BookmarkIcon className="size-4 shrink-0 opacity-50" />
+              <span className="truncate">{selectedFilter ? selectedFilter.label : placeholder}</span>
+            </div>
+            <ChevronsUpDownIcon className="size-4 shrink-0 opacity-50" />
+        </Button>
+        <PopoverContent className="w-[250px] p-0" align="start">
+          <div className="max-h-[300px] overflow-y-auto p-1">
+            {filters.length === 0 ? (
+              <div className="py-6 text-center text-sm text-muted-foreground">{emptyMessage}</div>
+            ) : (
+              <div className="grid gap-1">
+                {filters.map((filter) => {
+                  const isSelected = value === filter.value
+                  return (
+                    <div
+                      key={filter.value}
+                      className={cn(
+                        "group relative flex items-center justify-between rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground",
+                        isSelected && "bg-accent text-accent-foreground"
+                      )}
+                    >
+                      <button
+                        className="flex min-w-0 flex-1 items-center gap-2 text-left"
+                        onClick={() => {
+                          onValueChange?.(isSelected ? undefined : filter.value)
+                          setOpen(false)
+                        }}
+                      >
+                        <span className="flex size-4 shrink-0 items-center justify-center">
+                          {isSelected && <CheckIcon className="size-4" />}
+                        </span>
+                        <div className="grid gap-0.5">
+                          <span className="truncate font-medium">{filter.label}</span>
+                          {filter.description && (
+                            <span className="truncate text-xs text-muted-foreground">
+                              {filter.description}
+                            </span>
+                          )}
+                        </div>
+                      </button>
+                      
+                      {onDelete && (
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="size-6 shrink-0 opacity-0 group-hover:opacity-100 hover:text-destructive"
+                          onClick={(e) => {
+                            stopInteractivePropagation(e)
+                            onDelete(filter.value)
+                          }}
+                          onMouseDown={stopInteractivePropagation}
+                          onDoubleClick={stopInteractivePropagation}
+                        >
+                          <Trash2Icon className="size-3" />
+                        </Button>
+                      )}
+                    </div>
+                  )
+                })}
+              </div>
+            )}
+          </div>
+          
+          {onSave && (
+            <div className="grid gap-2 border-t p-2">
+              <Input
+                value={nextSaveValue}
+                placeholder={savePlaceholder}
+                onChange={(event) => setNextSaveValue(event.target.value)}
+                onKeyDown={(event) => {
+                  if (event.key === "Enter") {
+                    event.preventDefault()
+                    handleSave()
+                  }
+                }}
+              />
+              <Button variant="outline" className="w-full justify-center text-sm font-medium" disabled={!nextSaveValue.trim()} onClick={handleSave}>
+                <SaveIcon className="mr-2 size-4" />
+                {saveLabel}
+              </Button>
+            </div>
+          )}
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
+
+export { SavedFilterSelect }

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

@@ -0,0 +1,11 @@
+import { component, createShowcaseDemoRegistry } from "@/showcase/create-demo"
+
+export const formShowcaseDemoRegistry = createShowcaseDemoRegistry([
+  component("form-input", "FormInput", "form", "Form wrapper for the universal Input surface."),
+  component("form-select", "FormSelect", "form", "Form wrapper for controlled select fields."),
+  component("form-textarea", "FormTextarea", "form", "Textarea wrapper with validation slots."),
+  component("form-switch", "FormSwitch", "form", "Boolean form control with shell-level label and hint handling."),
+  component("form-date-picker", "FormDatePicker", "form", "Popover date picker wrapper with RHF integration."),
+  component("form-date-range-picker", "FormDateRangePicker", "form", "Range date picker wrapper with RHF integration."),
+  component("repeater-field", "RepeaterField", "form", "Repeating field array surface for editable lists inside forms."),
+])

package/packages/cli/vendor/src/components/form/deprecated-compat.tsx

@@ -0,0 +1,45 @@
+import type { ReactElement } from "react"
+
+import { FormInput, type FormInputKind } from "@/components/form/form-input"
+import { FormSelect } from "@/components/form/form-select"
+import { warnDeprecatedComponent } from "@/lib/deprecated-warning"
+
+type DeprecatedFormInputAliasArgs<TProps> = {
+  componentName: string
+  replacement: string
+  kind: FormInputKind
+  props: TProps
+  extraProps?: Record<string, unknown>
+}
+
+function renderDeprecatedFormInputAlias<TProps>({
+  componentName,
+  replacement,
+  kind,
+  props,
+  extraProps,
+}: DeprecatedFormInputAliasArgs<TProps>) {
+  warnDeprecatedComponent(componentName, replacement)
+  const Component = FormInput as unknown as (props: Record<string, unknown>) => ReactElement
+  return <Component {...(props as Record<string, unknown>)} {...extraProps} kind={kind} />
+}
+
+type DeprecatedFormSelectAliasArgs<TProps> = {
+  componentName: string
+  replacement: string
+  kind: "async"
+  props: TProps
+}
+
+function renderDeprecatedFormSelectAlias<TProps>({
+  componentName,
+  replacement,
+  kind,
+  props,
+}: DeprecatedFormSelectAliasArgs<TProps>) {
+  warnDeprecatedComponent(componentName, replacement)
+  const Component = FormSelect as unknown as (props: Record<string, unknown>) => ReactElement
+  return <Component {...(props as Record<string, unknown>)} kind={kind} />
+}
+
+export { renderDeprecatedFormInputAlias, renderDeprecatedFormSelectAlias }

package/packages/cli/vendor/src/components/form/form-async-select.tsx

@@ -0,0 +1,32 @@
+import { type FormSelectAsyncVariantProps as BaseFormAsyncSelectProps } from "@/components/form/form-select"
+import { renderDeprecatedFormSelectAlias } from "@/components/form/deprecated-compat"
+import type { AsyncSelectOption } from "@/components/inputs/async-select"
+import type { FieldPath, FieldValues } from "react-hook-form"
+
+export type FormAsyncSelectProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TValue extends string = string,
+  TData = unknown,
+  TOption extends AsyncSelectOption<TValue, TData> = AsyncSelectOption<TValue, TData>,
+> = Omit<BaseFormAsyncSelectProps<TFieldValues, TName, TValue, TData, TOption>, "kind">
+
+/**
+ * @deprecated Use {@link FormSelect} with `kind="async"` instead.
+ */
+function FormAsyncSelect<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TValue extends string = string,
+  TData = unknown,
+  TOption extends AsyncSelectOption<TValue, TData> = AsyncSelectOption<TValue, TData>,
+>(props: FormAsyncSelectProps<TFieldValues, TName, TValue, TData, TOption>) {
+  return renderDeprecatedFormSelectAlias({
+    componentName: "FormAsyncSelect",
+    replacement: "FormSelect with kind=\"async\"",
+    kind: "async",
+    props,
+  })
+}
+
+export { FormAsyncSelect }

package/packages/cli/vendor/src/components/form/form-date-input.tsx

@@ -0,0 +1,25 @@
+import { type FormInputDateVariantProps } from "@/components/form/form-input"
+import { renderDeprecatedFormInputAlias } from "@/components/form/deprecated-compat"
+import type { FieldPath, FieldValues } from "react-hook-form"
+
+export type FormDateInputProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = Omit<FormInputDateVariantProps<TFieldValues, TName>, "kind">
+
+/**
+ * @deprecated Use {@link FormInput} with `kind="date"` instead.
+ */
+function FormDateInput<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>(props: FormDateInputProps<TFieldValues, TName>) {
+  return renderDeprecatedFormInputAlias({
+    componentName: "FormDateInput",
+    replacement: "FormInput with kind=\"date\"",
+    kind: "date",
+    props,
+  })
+}
+
+export { FormDateInput }