tembro 6.0.2 → 6.1.0

package/packages/cli/vendor/src/components/calendar/calendar-range-scheduler.tsx

@@ -0,0 +1,72 @@
+"use client"
+
+import * as React from "react"
+import { CalendarDaysIcon } from "lucide-react"
+
+import { DateRangePicker, type DateRangePickerValue } from "@/components/calendar/date-range-picker"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { cn } from "@/lib/utils"
+
+export type CalendarRangeSchedulerEvent = {
+  id: string
+  title: React.ReactNode
+  range: DateRangePickerValue
+  tone?: "default" | "info" | "success" | "warning" | "danger"
+  meta?: React.ReactNode
+}
+
+export type CalendarRangeSchedulerProps = Omit<React.ComponentProps<typeof Card>, "onSelect"> & {
+  value?: DateRangePickerValue
+  onValueChange?: (range: DateRangePickerValue) => void
+  events?: CalendarRangeSchedulerEvent[]
+  onEventSelect?: (event: CalendarRangeSchedulerEvent) => void
+  title?: React.ReactNode
+  action?: React.ReactNode
+}
+
+function CalendarRangeScheduler({
+  value,
+  onValueChange,
+  events = [],
+  onEventSelect,
+  title = "Schedule range",
+  action,
+  className,
+  ...props
+}: CalendarRangeSchedulerProps) {
+  return (
+    <Card data-slot="calendar-range-scheduler" className={cn("min-w-0", className)} {...props}>
+      <CardHeader className="flex-row items-center justify-between gap-3">
+        <CardTitle className="flex items-center gap-2"><CalendarDaysIcon className="size-4" />{title}</CardTitle>
+        {action}
+      </CardHeader>
+      <CardContent className="grid gap-4 lg:grid-cols-[320px_minmax(0,1fr)]">
+        <DateRangePicker value={value} onValueChange={onValueChange} />
+        <div className="grid content-start gap-2">
+          {events.length ? events.map((event) => (
+            <button
+              key={event.id}
+              type="button"
+              className="grid gap-1 rounded-lg border bg-background p-3 text-left transition hover:border-primary/45 hover:bg-muted/40"
+              onClick={() => onEventSelect?.(event)}
+            >
+              <span className="flex items-center justify-between gap-2">
+                <span className="font-medium">{event.title}</span>
+                <Badge label={event.tone ?? "scheduled"} status={event.tone === "danger" ? "danger" : event.tone === "warning" ? "warning" : event.tone === "success" ? "success" : "info"} variant="soft" />
+              </span>
+              <span className="text-xs text-muted-foreground">{event.range.from || "Start"} - {event.range.to || "End"}</span>
+              {event.meta ? <span className="text-xs text-muted-foreground">{event.meta}</span> : null}
+            </button>
+          )) : (
+            <div className="rounded-lg border border-dashed p-6 text-sm text-muted-foreground">No scheduled ranges.</div>
+          )}
+          <Button type="button" variant="outline" onClick={() => onValueChange?.({ from: "", to: "" })}>Clear range</Button>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export { CalendarRangeScheduler }

package/packages/cli/vendor/src/components/calendar/date-time-picker.tsx

@@ -0,0 +1,53 @@
+"use client"
+
+import * as React from "react"
+
+import { DatePicker, type DatePickerProps } from "@/components/calendar/date-picker"
+import { TimePicker } from "@/components/inputs/time-picker"
+import { cn } from "@/lib/utils"
+
+export type DateTimeValue = {
+  date?: string
+  time?: string
+}
+
+export type CalendarDateTimePickerProps = Omit<React.ComponentProps<"div">, "value" | "onChange"> & {
+  value?: DateTimeValue
+  onValueChange?: (value: DateTimeValue) => void
+  datePickerProps?: Omit<DatePickerProps, "value" | "onValueChange">
+  timeLabel?: React.ReactNode
+  disabled?: boolean
+}
+
+function CalendarDateTimePicker({
+  value,
+  onValueChange,
+  datePickerProps,
+  timeLabel = "Time",
+  disabled,
+  className,
+  ...props
+}: CalendarDateTimePickerProps) {
+  const current = value ?? {}
+
+  return (
+    <div data-slot="date-time-picker" className={cn("grid gap-3 sm:grid-cols-2", className)} {...props}>
+      <DatePicker
+        {...datePickerProps}
+        value={current.date}
+        disabled={disabled || datePickerProps?.disabled}
+        onValueChange={(date) => onValueChange?.({ ...current, date })}
+      />
+      <label className="grid gap-1.5 text-sm font-medium">
+        <span>{timeLabel}</span>
+        <TimePicker
+          value={current.time ?? ""}
+          onChange={(event) => onValueChange?.({ ...current, time: event.currentTarget.value })}
+          disabled={disabled}
+        />
+      </label>
+    </div>
+  )
+}
+
+export { CalendarDateTimePicker }

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

@@ -1,4 +1,6 @@
 export * from "./date-utils"
-export * from "./calendar"
-export * from "./date-picker"
-export * from "./date-range-picker"
+export * from "./calendar"
+export * from "./date-picker"
+export * from "./date-range-picker"
+export * from "./date-time-picker"
+export * from "./calendar-range-scheduler"

package/packages/cli/vendor/src/components/charts/chart-card.tsx

@@ -0,0 +1,81 @@
+"use client"
+
+import * as React from "react"
+
+import { BarChart, LineChart, DonutChart, type ChartDatum, type ChartSeries, type ChartState } from "@/components/charts/charts"
+import { Badge } from "@/components/ui/badge"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Select } from "@/components/ui/select"
+import { cn } from "@/lib/utils"
+
+export type ChartCardType = "bar" | "line" | "donut"
+export type ChartCardFilter = {
+  label: string
+  value: string
+}
+
+export type ChartCardProps = Omit<React.ComponentProps<typeof Card>, "type"> & {
+  title?: React.ReactNode
+  description?: React.ReactNode
+  type?: ChartCardType
+  data?: ChartDatum[]
+  series?: ChartSeries[]
+  labels?: React.ReactNode[]
+  state?: ChartState
+  metric?: React.ReactNode
+  badge?: React.ReactNode
+  filters?: ChartCardFilter[]
+  filterValue?: string
+  onFilterChange?: (value: string) => void
+}
+
+function ChartCard({
+  title,
+  description,
+  type = "bar",
+  data = [],
+  series,
+  labels,
+  state,
+  metric,
+  badge,
+  filters,
+  filterValue,
+  onFilterChange,
+  className,
+  ...props
+}: ChartCardProps) {
+  return (
+    <Card data-slot="chart-card" className={cn("min-w-0", className)} {...props}>
+      <CardHeader className="flex-row items-start justify-between gap-3">
+        <div className="grid gap-1">
+          {title ? <CardTitle>{title}</CardTitle> : null}
+          {description ? <CardDescription>{description}</CardDescription> : null}
+          {metric ? <div className="text-2xl font-semibold tracking-tight">{metric}</div> : null}
+        </div>
+        <div className="flex shrink-0 items-center gap-2">
+          {badge ?? <Badge label={type} variant="secondary" />}
+          {filters?.length ? (
+            <Select
+              value={filterValue}
+              onValueChange={(value) => value && onFilterChange?.(value)}
+              options={filters}
+              triggerClassName="h-9 w-36"
+            />
+          ) : null}
+        </div>
+      </CardHeader>
+      <CardContent>
+        {type === "line" ? (
+          <LineChart series={series} labels={labels} values={data.map((item) => item.value)} state={state} />
+        ) : type === "donut" ? (
+          <DonutChart data={data} state={state} />
+        ) : (
+          <BarChart data={data} series={series} state={state} />
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+
+export { ChartCard }

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

@@ -1,2 +1,3 @@
 export * from './charts'
 export * from './progress-circle'
+export * from './chart-card'

package/packages/cli/vendor/src/components/command/advanced-command-menu.tsx

@@ -0,0 +1,88 @@
+"use client"
+
+import * as React from "react"
+import { SearchIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandShortcut } from "@/components/ui/command"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+
+export type AdvancedCommandMenuItem = {
+  id: string
+  label: React.ReactNode
+  description?: React.ReactNode
+  icon?: React.ReactNode
+  shortcut?: React.ReactNode
+  keywords?: string[]
+  onSelect?: () => void
+}
+
+export type AdvancedCommandMenuGroup = {
+  id: string
+  label: React.ReactNode
+  items: AdvancedCommandMenuItem[]
+}
+
+export type AdvancedCommandMenuProps = {
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  groups: AdvancedCommandMenuGroup[]
+  title?: React.ReactNode
+  triggerLabel?: React.ReactNode
+  placeholder?: string
+}
+
+function AdvancedCommandMenu({
+  open,
+  onOpenChange,
+  groups,
+  title = "Command menu",
+  triggerLabel = "Command",
+  placeholder = "Search commands...",
+}: AdvancedCommandMenuProps) {
+  const [internalOpen, setInternalOpen] = React.useState(false)
+  const resolvedOpen = open ?? internalOpen
+  const setOpen = onOpenChange ?? setInternalOpen
+
+  return (
+    <>
+      <Button type="button" variant="outline" leftIcon={<SearchIcon className="size-4" />} onClick={() => setOpen(true)}>{triggerLabel}</Button>
+      <Dialog open={resolvedOpen} onOpenChange={setOpen}>
+        <DialogContent className="overflow-hidden p-0">
+          <DialogHeader className="border-b px-4 py-3">
+            <DialogTitle>{title}</DialogTitle>
+          </DialogHeader>
+          <Command>
+            <CommandInput placeholder={placeholder} />
+            <CommandList>
+              <CommandEmpty>No command found.</CommandEmpty>
+              {groups.map((group) => (
+                <CommandGroup key={group.id} heading={group.label}>
+                  {group.items.map((item) => (
+                    <CommandItem
+                      key={item.id}
+                      value={[item.id, item.label, item.description, ...(item.keywords ?? [])].filter(Boolean).join(" ")}
+                      onSelect={() => {
+                        item.onSelect?.()
+                        setOpen(false)
+                      }}
+                    >
+                      {item.icon}
+                      <span className="grid min-w-0 flex-1">
+                        <span className="truncate">{item.label}</span>
+                        {item.description ? <span className="truncate text-xs text-muted-foreground">{item.description}</span> : null}
+                      </span>
+                      {item.shortcut ? <CommandShortcut>{item.shortcut}</CommandShortcut> : null}
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              ))}
+            </CommandList>
+          </Command>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}
+
+export { AdvancedCommandMenu }

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

@@ -1 +1,2 @@
-export * from "./command-palette"
+export * from "./command-palette"
+export * from "./advanced-command-menu"

package/packages/cli/vendor/src/components/data-table/data-grid.tsx

@@ -0,0 +1,59 @@
+"use client"
+
+import * as React from "react"
+
+import { Input } from "@/components/ui/input"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { cn } from "@/lib/utils"
+
+export type DataGridColumn<TRow extends Record<string, unknown>> = {
+  key: keyof TRow & string
+  header: React.ReactNode
+  editable?: boolean
+  width?: React.CSSProperties["width"]
+  render?: (value: TRow[keyof TRow], row: TRow, rowIndex: number) => React.ReactNode
+}
+
+export type DataGridProps<TRow extends Record<string, unknown>> = React.ComponentProps<"div"> & {
+  columns: DataGridColumn<TRow>[]
+  rows: TRow[]
+  onRowsChange?: (rows: TRow[]) => void
+}
+
+function DataGrid<TRow extends Record<string, unknown>>({ columns, rows, onRowsChange, className, ...props }: DataGridProps<TRow>) {
+  const updateCell = (rowIndex: number, key: keyof TRow & string, value: string) => {
+    onRowsChange?.(rows.map((row, index) => index === rowIndex ? { ...row, [key]: value } : row))
+  }
+
+  return (
+    <div data-slot="data-grid" className={cn("overflow-hidden rounded-lg border", className)} {...props}>
+      <Table>
+        <TableHeader>
+          <TableRow>{columns.map((column) => <TableHead key={column.key} style={{ width: column.width }}>{column.header}</TableHead>)}</TableRow>
+        </TableHeader>
+        <TableBody>
+          {rows.map((row, rowIndex) => (
+            <TableRow key={rowIndex}>
+              {columns.map((column) => {
+                const value = row[column.key]
+                return (
+                  <TableCell key={column.key}>
+                    {column.editable ? (
+                      <Input value={String(value ?? "")} onValueChange={(nextValue) => updateCell(rowIndex, column.key, nextValue)} />
+                    ) : column.render ? (
+                      column.render(value, row, rowIndex)
+                    ) : (
+                      String(value ?? "")
+                    )}
+                  </TableCell>
+                )
+              })}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  )
+}
+
+export { DataGrid }

package/packages/cli/vendor/src/components/data-table/index.ts

@@ -1,5 +1,6 @@
-export * from './data-table'
-export * from './data-table-pagination'
+export * from './data-table'
+export * from './data-grid'
+export * from './data-table-pagination'
 export * from './data-table-toolbar'
 export * from './data-table-column-visibility-menu'
 export * from './data-table-select-column'

package/packages/cli/vendor/src/components/data-table/public.ts

@@ -1 +1,2 @@
 export * from "./data-table"
+export * from "./data-grid"

package/packages/cli/vendor/src/components/feedback/async-boundary.tsx

@@ -0,0 +1,36 @@
+"use client"
+
+import * as React from "react"
+
+import { StateView } from "@/components/feedback/state-view"
+
+export type AsyncBoundaryProps = React.PropsWithChildren<{
+  loading?: boolean
+  error?: unknown
+  empty?: boolean
+  loadingTitle?: React.ReactNode
+  errorTitle?: React.ReactNode
+  emptyTitle?: React.ReactNode
+  onRetry?: () => void
+}>
+
+function AsyncBoundary({
+  loading,
+  error,
+  empty,
+  loadingTitle = "Loading",
+  errorTitle = "Unable to load",
+  emptyTitle = "No data",
+  onRetry,
+  children,
+}: AsyncBoundaryProps) {
+  if (loading) return <StateView status="loading" title={loadingTitle} loadingVariant="skeleton" />
+  if (error) {
+    const description = error instanceof Error ? error.message : "Try again or check the request."
+    return <StateView status="error" title={errorTitle} description={description} onRetry={onRetry} />
+  }
+  if (empty) return <StateView status="empty" title={emptyTitle} />
+  return <>{children}</>
+}
+
+export { AsyncBoundary }

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

@@ -1,2 +1,3 @@
 export * from "./alert"
 export * from "./state-view"
+export * from "./async-boundary"

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

@@ -1,4 +1,5 @@
 export * from "./async-select"
+export * from "./multi-select"
 export * from "./combobox"
 export * from "./otp-input"
 export * from "./rating"

package/packages/cli/vendor/src/components/inputs/multi-select.tsx

@@ -0,0 +1,75 @@
+"use client"
+
+import * as React from "react"
+import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react"
+
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { cn } from "@/lib/utils"
+
+export type MultiSelectOption = {
+  value: string
+  label: React.ReactNode
+  description?: React.ReactNode
+  disabled?: boolean
+}
+
+export type MultiSelectProps = React.ComponentProps<"div"> & {
+  options: MultiSelectOption[]
+  value?: string[]
+  onValueChange?: (value: string[]) => void
+  placeholder?: React.ReactNode
+  maxVisibleTags?: number
+}
+
+function MultiSelect({ options, value = [], onValueChange, placeholder = "Select options", maxVisibleTags = 3, className, ...props }: MultiSelectProps) {
+  const [open, setOpen] = React.useState(false)
+  const selected = options.filter((option) => value.includes(option.value))
+  const hiddenCount = Math.max(0, selected.length - maxVisibleTags)
+
+  const toggle = (optionValue: string) => {
+    onValueChange?.(value.includes(optionValue) ? value.filter((item) => item !== optionValue) : [...value, optionValue])
+  }
+
+  return (
+    <div data-slot="multi-select" className={cn("w-full", className)} {...props}>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger render={<Button type="button" variant="outline" className="min-h-10 w-full justify-between" />}>
+          <span className="flex min-w-0 flex-1 flex-wrap gap-1">
+            {selected.length ? selected.slice(0, maxVisibleTags).map((option) => (
+              <Badge key={option.value} label={option.label} variant="secondary" />
+            )) : <span className="text-muted-foreground">{placeholder}</span>}
+            {hiddenCount ? <Badge label={`+${hiddenCount}`} variant="secondary" /> : null}
+          </span>
+          <ChevronDownIcon className="size-4 opacity-70" />
+        </PopoverTrigger>
+        <PopoverContent align="start" className="w-[var(--anchor-width)] p-1">
+          <div className="grid gap-1">
+            {options.map((option) => {
+              const checked = value.includes(option.value)
+              return (
+                <button
+                  key={option.value}
+                  type="button"
+                  disabled={option.disabled}
+                  className="flex items-start gap-2 rounded-md px-2 py-2 text-left text-sm hover:bg-muted disabled:pointer-events-none disabled:opacity-50"
+                  onClick={() => toggle(option.value)}
+                >
+                  <span className="mt-0.5 grid size-4 place-items-center rounded border">{checked ? <CheckIcon className="size-3" /> : null}</span>
+                  <span className="grid min-w-0 flex-1">
+                    <span className="truncate font-medium">{option.label}</span>
+                    {option.description ? <span className="truncate text-xs text-muted-foreground">{option.description}</span> : null}
+                  </span>
+                </button>
+              )
+            })}
+            {value.length ? <Button type="button" size="sm" variant="ghost" leftIcon={<XIcon className="size-3.5" />} onClick={() => onValueChange?.([])}>Clear</Button> : null}
+          </div>
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
+
+export { MultiSelect }

package/packages/cli/vendor/src/components/inputs/public.ts

@@ -1,4 +1,5 @@
 export * from "./async-select"
+export * from "./multi-select"
 export * from "./combobox"
 export * from "./otp-input"
 export * from "./rating"

package/packages/cli/vendor/src/components/modern/file-manager.tsx

@@ -0,0 +1,79 @@
+"use client"
+
+import * as React from "react"
+import { FileIcon, FolderIcon, MoreHorizontalIcon } from "lucide-react"
+
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { ScrollBox } from "@/components/ui/scroll-box"
+import { cn } from "@/lib/utils"
+
+export type FileManagerItem = {
+  id: string
+  name: string
+  type: "file" | "folder"
+  size?: React.ReactNode
+  owner?: React.ReactNode
+  status?: React.ReactNode
+}
+
+export type FileManagerProps = React.ComponentProps<"div"> & {
+  items: FileManagerItem[]
+  selectedId?: string
+  onSelect?: (item: FileManagerItem) => void
+  onOpen?: (item: FileManagerItem) => void
+  onSearchChange?: (value: string) => void
+  searchValue?: string
+  actions?: React.ReactNode
+}
+
+function FileManager({ items, selectedId, onSelect, onOpen, searchValue, onSearchChange, actions, className, ...props }: FileManagerProps) {
+  const [internalSearch, setInternalSearch] = React.useState("")
+  const query = searchValue ?? internalSearch
+  const filteredItems = items.filter((item) => item.name.toLowerCase().includes(query.toLowerCase()))
+
+  return (
+    <div data-slot="file-manager" className={cn("grid min-w-0 gap-3 rounded-lg border bg-card p-3", className)} {...props}>
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <Input
+          kind="search"
+          placeholder="Search files..."
+          value={query}
+          onValueChange={(value) => {
+            setInternalSearch(value)
+            onSearchChange?.(value)
+          }}
+          className="max-w-sm"
+        />
+        {actions}
+      </div>
+      <ScrollBox className="max-h-[420px]">
+        <div className="grid gap-1">
+          {filteredItems.map((item) => (
+            <button
+              key={item.id}
+              type="button"
+              data-selected={selectedId === item.id || undefined}
+              className="grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3 rounded-md px-3 py-2 text-left transition hover:bg-muted/60 data-[selected=true]:bg-muted"
+              onClick={() => onSelect?.(item)}
+              onDoubleClick={() => onOpen?.(item)}
+            >
+              {item.type === "folder" ? <FolderIcon className="size-4 text-primary" /> : <FileIcon className="size-4 text-muted-foreground" />}
+              <span className="min-w-0">
+                <span className="block truncate text-sm font-medium">{item.name}</span>
+                <span className="text-xs text-muted-foreground">{item.owner ?? "Shared"} {item.size ? `- ${item.size}` : ""}</span>
+              </span>
+              <span className="flex items-center gap-2">
+                {item.status ? <Badge label={item.status} variant="soft" status="info" /> : null}
+                <Button type="button" variant="ghost" size="icon-xs" aria-label="File actions"><MoreHorizontalIcon /></Button>
+              </span>
+            </button>
+          ))}
+        </div>
+      </ScrollBox>
+    </div>
+  )
+}
+
+export { FileManager }

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

@@ -3,3 +3,4 @@ export * from "./dual-list-picker"
 export * from "./resizable-panel"
 export * from "./rich-text-editor"
 export * from "./image-cropper"
+export * from "./file-manager"