tembro 6.1.0 → 6.1.1

package/packages/cli/vendor/src/components/actions/action-menu.tsx

@@ -33,7 +33,11 @@ export type ActionMenuItem = {
 
 export type ActionMenuProps = {
   actions: ActionMenuItem[]
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
   label?: React.ReactNode
+  triggerLabel?: string
   trigger?: React.ReactElement
   align?: "start" | "center" | "end"
   side?: "top" | "right" | "bottom" | "left"
@@ -50,12 +54,19 @@ export type ActionMenuProps = {
   menuWidth?: number | string
   loadingLabel?: React.ReactNode
   persistIconSpace?: boolean
+  itemRoleDescription?: string
+  renderItem?: (action: ActionMenuItem, state: { loading: boolean; close: () => void }) => React.ReactNode
+  onActionError?: (error: unknown, action: ActionMenuItem) => void
 }
-
+
 function ActionMenu({
-  actions,
-  label,
-  trigger,
+  actions,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  label,
+  triggerLabel = "Open actions",
+  trigger,
   align = "end",
   side = "bottom",
   sideOffset = 4,
@@ -71,12 +82,21 @@ function ActionMenu({
   menuWidth,
   loadingLabel = "Working...",
   persistIconSpace = true,
+  itemRoleDescription,
+  renderItem,
+  onActionError,
 }: ActionMenuProps) {
   const visibleActions = actions.filter((action) => !action.hidden)
   const [loadingKey, setLoadingKey] = React.useState<string | null>(null)
-  const [open, setOpen] = React.useState(false)
+  const [internalOpen, setInternalOpen] = React.useState(defaultOpen)
+  const open = openProp ?? internalOpen
   const lastInvokedActionKeyRef = React.useRef<string | null>(null)
 
+  const setOpen = React.useCallback((nextOpen: boolean) => {
+    if (openProp === undefined) setInternalOpen(nextOpen)
+    onOpenChange?.(nextOpen)
+  }, [onOpenChange, openProp])
+
   const handleSelect = async (action: ActionMenuItem) => {
     if (action.disabled || action.loading || loadingKey) return
 
@@ -84,6 +104,9 @@ function ActionMenu({
       setLoadingKey(action.key)
       await action.onSelect?.()
       if (closeOnSelect && !action.keepOpen) setOpen(false)
+    } catch (error) {
+      onActionError?.(error, action)
+      if (!onActionError) throw error
     } finally {
       setLoadingKey(null)
     }
@@ -122,7 +145,7 @@ function ActionMenu({
       >
         {!trigger && <MoreHorizontalIcon />}
         {!trigger && showChevron && <span className="text-[10px] font-medium uppercase tracking-[0.18em]">Menu</span>}
-        <span className="sr-only">Open actions</span>
+        <span className="sr-only">{triggerLabel}</span>
       </DropdownMenuTrigger>
       <DropdownMenuContent
         align={align}
@@ -155,6 +178,7 @@ function ActionMenu({
                 disabled={action.disabled || isLoading}
                 variant={action.destructive ? "destructive" : "default"}
                 closeOnSelect={closeOnSelect && !action.keepOpen}
+                aria-roledescription={itemRoleDescription}
                 className={cn(
                   "min-h-11 items-start gap-3 rounded-[calc(var(--radius-md)+1px)] border border-transparent py-2.5 transition-[background-color,color,border-color,box-shadow] data-[highlighted]:shadow-[inset_0_0_0_1px_color-mix(in_oklch,var(--primary),transparent_76%)] data-[disabled]:opacity-45",
                   itemClassName
@@ -173,19 +197,23 @@ function ActionMenu({
                 onMouseDown={stopInteractivePropagation}
                 onDoubleClick={stopInteractivePropagation}
               >
-                <span className={cn("mt-0.5 flex size-5 shrink-0 items-center justify-center text-muted-foreground", !persistIconSpace && !isLoading && !action.icon && "hidden")}>
-                  {isLoading ? <Loader2Icon className="size-4 animate-spin" /> : action.icon}
-                </span>
-                <span className="min-w-0 flex-1">
-                  <span className="block truncate">{action.label}</span>
-                  {action.description ? (
-                    <DropdownMenuItemDescription className="mt-0.5 truncate">
-                      {isLoading ? loadingLabel : action.description}
-                    </DropdownMenuItemDescription>
-                  ) : null}
-                </span>
-                {action.shortcut && (
-                  <DropdownMenuShortcut>{action.shortcut}</DropdownMenuShortcut>
+                {renderItem?.(action, { loading: isLoading, close: () => setOpen(false) }) ?? (
+                  <>
+                    <span className={cn("mt-0.5 flex size-5 shrink-0 items-center justify-center text-muted-foreground", !persistIconSpace && !isLoading && !action.icon && "hidden")}>
+                      {isLoading ? <Loader2Icon className="size-4 animate-spin" /> : action.icon}
+                    </span>
+                    <span className="min-w-0 flex-1">
+                      <span className="block truncate">{action.label}</span>
+                      {action.description ? (
+                        <DropdownMenuItemDescription className="mt-0.5 truncate">
+                          {isLoading ? loadingLabel : action.description}
+                        </DropdownMenuItemDescription>
+                      ) : null}
+                    </span>
+                    {action.shortcut && (
+                      <DropdownMenuShortcut>{action.shortcut}</DropdownMenuShortcut>
+                    )}
+                  </>
                 )}
               </DropdownMenuItem>
             </React.Fragment>

package/packages/cli/vendor/src/components/actions/copy-button.tsx

@@ -97,8 +97,8 @@ function CopyButton({
       aria-live="polite"
       {...props}
     >
-      {showIcon && (copied ? <CheckIcon data-icon="inline-start" /> : <CopyIcon data-icon="inline-start" />)}
-      {children ?? (copied ? copiedLabel : copyLabel)}
+      {showIcon && (copied ? <CheckIcon data-icon="inline-start" className="size-3.5" /> : <CopyIcon data-icon="inline-start" className="size-3.5" />)}
+      {children ?? (copied ? copiedLabel : copyLabel)}
     </Button>
   )
 }

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

@@ -86,11 +86,8 @@ function DatePicker({
             />
           }
         >
-          <CalendarIcon data-icon="inline-start" className={cn(hasValue && "text-primary")} />
-          <span className={cn("grid min-w-0 flex-1", triggerVariant === "default" && "gap-0.5")}>
-            {triggerVariant === "default" ? <span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground">
-              {labels?.selected ?? "Date"}
-            </span> : null}
+          <CalendarIcon data-icon="inline-start" className={cn("size-4", hasValue && "text-primary")} />
+          <span className="grid min-w-0 flex-1">
             <span className={cn("truncate text-sm", hasValue && "font-semibold text-foreground")}>
               {hasValue ? formatValue(String(value)) : placeholder ?? labels?.placeholder ?? "Select date"}
             </span>

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

@@ -176,22 +176,15 @@ function DateRangePicker({
             />
           }
         >
-          <CalendarIcon data-icon="inline-start" className={cn(hasValue && "text-primary")} />
+          <CalendarIcon data-icon="inline-start" className={cn("size-4", hasValue && "text-primary")} />
           {hasValue ? (
-            <span className="grid min-w-0 flex-1 grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-2">
-              <span className="grid min-w-0 gap-0.5">
-                <span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground">{labels?.start ?? "Start"}</span>
-                <span className="truncate text-sm font-semibold text-foreground">{from ? formatValue(from) : "..."}</span>
-              </span>
+            <span className="flex min-w-0 flex-1 items-center gap-2">
+              <span className="min-w-0 truncate text-sm font-semibold text-foreground">{from ? formatValue(from) : "..."}</span>
               <span className="text-muted-foreground">-</span>
-              <span className="grid min-w-0 gap-0.5">
-                <span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground">{labels?.end ?? "End"}</span>
-                <span className="truncate text-sm font-semibold text-foreground">{to ? formatValue(to) : "..."}</span>
-              </span>
+              <span className="min-w-0 truncate text-sm font-semibold text-foreground">{to ? formatValue(to) : "..."}</span>
             </span>
           ) : (
-            <span className="grid min-w-0 flex-1 gap-0.5">
-              <span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground">Range</span>
+            <span className="grid min-w-0 flex-1">
               <span className="truncate text-sm">{label}</span>
             </span>
           )}

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

@@ -4,8 +4,9 @@ import * as React from "react"
 import {
   flexRender,
   getCoreRowModel,
-  getPaginationRowModel,
-  useReactTable,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
   type Cell,
   type ColumnDef,
   type Header,
@@ -288,40 +289,50 @@ function DataTable<TData, TValue = unknown>({
     ]
   }, [columns, features?.rowActions, rowActions])
 
-  const paginationConfig = pagination === false ? undefined : pagination
-  const controlledPagination = paginationConfig
-    ? {
-        pageIndex: paginationConfig.pageIndex,
-        pageSize: paginationConfig.pageSize,
-      }
-    : undefined
-  const manualPagination = Boolean(paginationConfig && paginationConfig.manual !== false)
-  const resolvedRowSelection = rowSelection ?? {}
-
-  // TanStack Table returns imperative helpers that React Compiler flags by design.
-  // eslint-disable-next-line react-hooks/incompatible-library
-  const table = useReactTable({
+  const paginationConfig = pagination === false ? undefined : pagination
+  const [internalSorting, setInternalSorting] = React.useState<SortingState>([])
+  const [internalColumnVisibility, setInternalColumnVisibility] = React.useState<VisibilityState>({})
+  const [internalRowSelection, setInternalRowSelection] = React.useState<RowSelectionState>({})
+  const [internalExpanded, setInternalExpanded] = React.useState<ExpandedState>({})
+  const [internalColumnPinning, setInternalColumnPinning] = React.useState<ColumnPinningState>({})
+  const resolvedSorting = sorting ?? internalSorting
+  const resolvedColumnVisibility = columnVisibility ?? internalColumnVisibility
+  const resolvedRowSelection = rowSelection ?? internalRowSelection
+  const resolvedExpanded = expanded ?? internalExpanded
+  const resolvedColumnPinning = columnPinning ?? internalColumnPinning
+  const controlledPagination = paginationConfig
+    ? {
+        pageIndex: paginationConfig.pageIndex,
+        pageSize: paginationConfig.pageSize,
+      }
+    : undefined
+  const manualPagination = Boolean(paginationConfig && paginationConfig.manual !== false)
+
+  // TanStack Table returns imperative helpers that React Compiler flags by design.
+  // eslint-disable-next-line react-hooks/incompatible-library
+  const table = useReactTable({
     data,
     columns: resolvedColumns,
-    getRowId,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: paginationConfig && !manualPagination ? getPaginationRowModel() : undefined,
-    manualPagination,
-    pageCount: paginationConfig?.pageCount,
-    state: {
-      sorting,
-      columnVisibility,
-      rowSelection: resolvedRowSelection,
-      pagination: controlledPagination,
-      expanded,
-      ...(columnPinning ? { columnPinning } : {}),
-    },
-    onSortingChange,
-    onColumnVisibilityChange,
-    onRowSelectionChange,
-    onExpandedChange,
-    onColumnPinningChange,
-    enableRowSelection,
+    getRowId,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: paginationConfig && !manualPagination ? getPaginationRowModel() : undefined,
+    manualPagination,
+    pageCount: paginationConfig?.pageCount,
+    state: {
+      sorting: resolvedSorting,
+      columnVisibility: resolvedColumnVisibility,
+      rowSelection: resolvedRowSelection,
+      pagination: controlledPagination,
+      expanded: resolvedExpanded,
+      columnPinning: resolvedColumnPinning,
+    },
+    onSortingChange: onSortingChange ?? setInternalSorting,
+    onColumnVisibilityChange: onColumnVisibilityChange ?? setInternalColumnVisibility,
+    onRowSelectionChange: onRowSelectionChange ?? setInternalRowSelection,
+    onExpandedChange: onExpandedChange ?? setInternalExpanded,
+    onColumnPinningChange: onColumnPinningChange ?? setInternalColumnPinning,
+    enableRowSelection,
     getRowCanExpand,
     getExpandedRowModel: getExpandedRowModel(),
   })

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

@@ -3,15 +3,13 @@ export * from "./activity-feed"
 export * from "./avatar"
 export * from "./kanban"
 export * from "./code-block"
-export * from "./data-state"
-export * from "./list"
-export * from "./progress"
-export * from "./statistic"
+export * from "./data-state"
+export * from "./list"
+export * from "./progress"
 export * from "./status-dot"
 export * from "./status-legend"
 export * from "./timeline"
 export * from "./tree-view"
-export * from "./info-card"
 export * from "./virtual-list"
 export * from "./qr-code"
 export * from "./carousel"

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

@@ -1,2 +1 @@
-export * from "./filter-bar"
 export * from "./saved-filter-select"

package/packages/cli/vendor/src/components/inputs/color-picker.tsx

@@ -31,6 +31,14 @@ function withAlpha(value: string, alpha: number, includeAlpha: boolean) {
   return `${opaque}${channel}`
 }
 
+function getAlphaTrackStyle(value: string): React.CSSProperties {
+  const opaque = getOpaqueColor(value)
+
+  return {
+    background: `linear-gradient(90deg, ${opaque}00 0%, ${opaque}ff 100%)`,
+  }
+}
+
 export type ColorPickerProps = Omit<React.ComponentProps<"div">, "defaultValue" | "onChange"> & {
   value?: string
   defaultValue?: string
@@ -83,6 +91,11 @@ function ColorPicker({
       {label ? <div className="text-sm font-medium text-foreground">{label}</div> : null}
       <div className="flex min-w-0 items-center gap-2">
         <label className="relative size-10 shrink-0 overflow-hidden rounded-md border bg-background shadow-sm focus-within:ring-2 focus-within:ring-ring">
+          <span
+            aria-hidden="true"
+            className="absolute inset-0 bg-[linear-gradient(45deg,#e2e8f0_25%,transparent_25%),linear-gradient(-45deg,#e2e8f0_25%,transparent_25%),linear-gradient(45deg,transparent_75%,#e2e8f0_75%),linear-gradient(-45deg,transparent_75%,#e2e8f0_75%)] bg-[length:10px_10px] bg-[position:0_0,0_5px,5px_-5px,-5px_0]"
+          />
+          <span aria-hidden="true" className="absolute inset-0" style={{ backgroundColor: currentValue }} />
           <span className="sr-only">{labels?.color ?? "Choose color"}</span>
           <input
             type="color"
@@ -120,7 +133,8 @@ function ColorPicker({
             value={getAlphaPercent(currentValue)}
             disabled={disabled}
             aria-label={labels?.alpha ?? "Opacity"}
-            className="w-full accent-foreground disabled:cursor-not-allowed"
+            style={getAlphaTrackStyle(currentValue)}
+            className="h-2 w-full cursor-pointer appearance-none rounded-full border border-border/70 outline-none focus-visible:ring-4 focus-visible:ring-ring/20 disabled:cursor-not-allowed [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-background [&::-webkit-slider-thumb]:bg-foreground [&::-webkit-slider-thumb]:shadow-sm"
             onChange={(event) => updateValue(withAlpha(currentValue, Number(event.target.value), true))}
           />
           <span className="w-10 text-right tabular-nums">{getAlphaPercent(currentValue)}%</span>

package/packages/cli/vendor/src/components/inputs/slider.tsx

@@ -83,7 +83,7 @@ function Slider({
         step={step}
         disabled={disabled}
         style={getSliderTrackStyle(currentValue, min, max)}
-        className="h-3 w-full cursor-pointer appearance-none rounded-full border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-control-bg)] shadow-[inset_0_1px_2px_rgba(15,23,42,0.08)] outline-none transition hover:brightness-[1.02] disabled:cursor-not-allowed disabled:opacity-50 [&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-[3px] [&::-moz-range-thumb]:border-[color:var(--aui-page-bg)] [&::-moz-range-thumb]:bg-[color:var(--aui-brand-strong)] [&::-moz-range-thumb]:shadow-[0_8px_24px_rgba(16,185,129,0.24)] [&::-moz-range-thumb]:transition [&::-moz-range-track]:h-3 [&::-moz-range-track]:rounded-full [&::-webkit-slider-runnable-track]:h-3 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-thumb]:mt-[-5px] [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-[3px] [&::-webkit-slider-thumb]:border-[color:var(--aui-page-bg)] [&::-webkit-slider-thumb]:bg-[color:var(--aui-brand-strong)] [&::-webkit-slider-thumb]:shadow-[0_8px_24px_rgba(16,185,129,0.24)]"
+        className="h-3 w-full cursor-pointer appearance-none rounded-full border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-control-bg)] shadow-[inset_0_1px_2px_rgba(15,23,42,0.08)] outline-none transition hover:brightness-[1.02] focus-visible:ring-4 focus-visible:ring-[color:color-mix(in_oklch,var(--aui-brand-strong),transparent_78%)] disabled:cursor-not-allowed disabled:opacity-50 [&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-[3px] [&::-moz-range-thumb]:border-[color:var(--aui-page-bg)] [&::-moz-range-thumb]:bg-[color:var(--aui-brand-strong)] [&::-moz-range-thumb]:shadow-[0_8px_24px_rgba(16,185,129,0.24)] [&::-moz-range-thumb]:transition [&::-moz-range-track]:h-3 [&::-moz-range-track]:rounded-full [&::-webkit-slider-runnable-track]:h-3 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-thumb]:mt-[-5px] [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-[3px] [&::-webkit-slider-thumb]:border-[color:var(--aui-page-bg)] [&::-webkit-slider-thumb]:bg-[color:var(--aui-brand-strong)] [&::-webkit-slider-thumb]:shadow-[0_8px_24px_rgba(16,185,129,0.24)] [&::-webkit-slider-thumb]:transition-transform hover:[&::-webkit-slider-thumb]:scale-105"
         onChange={(event) => updateValue(event.currentTarget.valueAsNumber)}
         {...props}
       />
@@ -170,7 +170,7 @@ function RangeSlider({
             max={max}
             step={step}
             disabled={disabled}
-            className="pointer-events-none absolute inset-0 h-6 w-full cursor-pointer appearance-none bg-transparent outline-none disabled:cursor-not-allowed disabled:opacity-50 [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-[3px] [&::-moz-range-thumb]:border-[color:var(--aui-page-bg)] [&::-moz-range-thumb]:bg-[color:var(--aui-brand-strong)] [&::-moz-range-thumb]:shadow-[0_8px_24px_rgba(16,185,129,0.24)] [&::-moz-range-track]:h-3 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-transparent [&::-webkit-slider-runnable-track]:h-3 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-transparent [&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:mt-[-5px] [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-[3px] [&::-webkit-slider-thumb]:border-[color:var(--aui-page-bg)] [&::-webkit-slider-thumb]:bg-[color:var(--aui-brand-strong)] [&::-webkit-slider-thumb]:shadow-[0_8px_24px_rgba(16,185,129,0.24)]"
+            className="pointer-events-none absolute inset-0 h-6 w-full cursor-pointer appearance-none bg-transparent outline-none focus-visible:ring-4 focus-visible:ring-[color:color-mix(in_oklch,var(--aui-brand-strong),transparent_78%)] disabled:cursor-not-allowed disabled:opacity-50 [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-[3px] [&::-moz-range-thumb]:border-[color:var(--aui-page-bg)] [&::-moz-range-thumb]:bg-[color:var(--aui-brand-strong)] [&::-moz-range-thumb]:shadow-[0_8px_24px_rgba(16,185,129,0.24)] [&::-moz-range-track]:h-3 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-transparent [&::-webkit-slider-runnable-track]:h-3 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-transparent [&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:mt-[-5px] [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-[3px] [&::-webkit-slider-thumb]:border-[color:var(--aui-page-bg)] [&::-webkit-slider-thumb]:bg-[color:var(--aui-brand-strong)] [&::-webkit-slider-thumb]:shadow-[0_8px_24px_rgba(16,185,129,0.24)] [&::-webkit-slider-thumb]:transition-transform hover:[&::-webkit-slider-thumb]:scale-105"
             onChange={(event) => updateValue(0, event.currentTarget.valueAsNumber)}
             {...props}
           />
@@ -181,7 +181,7 @@ function RangeSlider({
             max={max}
             step={step}
             disabled={disabled}
-            className="pointer-events-none absolute inset-0 h-6 w-full cursor-pointer appearance-none bg-transparent outline-none disabled:cursor-not-allowed disabled:opacity-50 [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-[3px] [&::-moz-range-thumb]:border-[color:var(--aui-page-bg)] [&::-moz-range-thumb]:bg-[color:var(--aui-brand-strong)] [&::-moz-range-thumb]:shadow-[0_8px_24px_rgba(16,185,129,0.24)] [&::-moz-range-track]:h-3 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-transparent [&::-webkit-slider-runnable-track]:h-3 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-transparent [&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:mt-[-5px] [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-[3px] [&::-webkit-slider-thumb]:border-[color:var(--aui-page-bg)] [&::-webkit-slider-thumb]:bg-[color:var(--aui-brand-strong)] [&::-webkit-slider-thumb]:shadow-[0_8px_24px_rgba(16,185,129,0.24)]"
+            className="pointer-events-none absolute inset-0 h-6 w-full cursor-pointer appearance-none bg-transparent outline-none focus-visible:ring-4 focus-visible:ring-[color:color-mix(in_oklch,var(--aui-brand-strong),transparent_78%)] disabled:cursor-not-allowed disabled:opacity-50 [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-[3px] [&::-moz-range-thumb]:border-[color:var(--aui-page-bg)] [&::-moz-range-thumb]:bg-[color:var(--aui-brand-strong)] [&::-moz-range-thumb]:shadow-[0_8px_24px_rgba(16,185,129,0.24)] [&::-moz-range-track]:h-3 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-transparent [&::-webkit-slider-runnable-track]:h-3 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-transparent [&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:mt-[-5px] [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-[3px] [&::-webkit-slider-thumb]:border-[color:var(--aui-page-bg)] [&::-webkit-slider-thumb]:bg-[color:var(--aui-brand-strong)] [&::-webkit-slider-thumb]:shadow-[0_8px_24px_rgba(16,185,129,0.24)] [&::-webkit-slider-thumb]:transition-transform hover:[&::-webkit-slider-thumb]:scale-105"
             onChange={(event) => updateValue(1, event.currentTarget.valueAsNumber)}
             {...props}
           />

package/packages/cli/vendor/src/components/inputs/tag-input.tsx

@@ -80,13 +80,13 @@ function TagInput({
           <Badge
             key={tag}
             variant="secondary"
-            className="h-8 gap-1 rounded-full border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg)] px-3 pr-1 text-[13px] font-medium shadow-sm"
+            className="h-8 gap-1.5 rounded-full border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg)] px-3 pr-1.5 text-[13px] font-medium leading-none shadow-sm"
           >
-            {tag}
+            <span className="leading-none">{tag}</span>
             {!readOnly && !disabled && (
               <button
                 type="button"
-                className="grid size-5 shrink-0 place-items-center rounded-full p-0 leading-none text-muted-foreground transition hover:bg-[color:var(--aui-control-bg)] hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
+                className="inline-flex size-5 shrink-0 items-center justify-center rounded-full p-0 leading-none text-muted-foreground transition hover:bg-[color:var(--aui-control-bg)] hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
                 aria-label={`Remove ${tag}`}
                 onClick={(event) => {
                   stopInteractivePropagation(event)
@@ -95,7 +95,7 @@ function TagInput({
                 onMouseDown={stopInteractivePropagation}
                 onDoubleClick={stopInteractivePropagation}
               >
-                <XIcon className="size-3" strokeWidth={2} />
+                <XIcon className="size-3" strokeWidth={2.25} />
               </button>
             )}
           </Badge>

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

@@ -1,22 +1,31 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-export type TimePickerProps = Omit<React.ComponentProps<"input">, "type"> & {
-  label?: React.ReactNode
-}
-
-export type DateTimePickerProps = Omit<React.ComponentProps<"input">, "type"> & {
-  label?: React.ReactNode
-}
+import * as React from "react"
+import { CalendarClockIcon, ClockIcon, XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+export type TimePickerProps = Omit<React.ComponentProps<"input">, "type"> & {
+  label?: React.ReactNode
+  clearable?: boolean
+  onClear?: () => void
+}
+
+export type DateTimePickerProps = Omit<React.ComponentProps<"input">, "type"> & {
+  label?: React.ReactNode
+  clearable?: boolean
+  onClear?: () => void
+}
 
 export type TimeRangePickerProps = React.ComponentProps<"div"> & {
   from?: string
   to?: string
   onFromChange?: (value: string) => void
-  onToChange?: (value: string) => void
-  disabled?: boolean
-}
+  onToChange?: (value: string) => void
+  disabled?: boolean
+  labels?: {
+    from?: React.ReactNode
+    to?: React.ReactNode
+  }
+}
 
 function FieldShell({ label, className, children }: { label?: React.ReactNode; className?: string; children: React.ReactNode }) {
   return (
@@ -27,29 +36,73 @@ function FieldShell({ label, className, children }: { label?: React.ReactNode; c
   )
 }
 
-function TimePicker({ label, className, ...props }: TimePickerProps) {
-  return (
-    <FieldShell label={label}>
-      <input type="time" className={cn("h-10 rounded-md border bg-background px-3 text-sm outline-none ring-offset-background focus-visible:ring-2 focus-visible:ring-ring", className)} {...props} />
-    </FieldShell>
-  )
-}
-
-function DateTimePicker({ label, className, ...props }: DateTimePickerProps) {
-  return (
-    <FieldShell label={label}>
-      <input type="datetime-local" className={cn("h-10 rounded-md border bg-background px-3 text-sm outline-none ring-offset-background focus-visible:ring-2 focus-visible:ring-ring", className)} {...props} />
-    </FieldShell>
-  )
-}
-
-function TimeRangePicker({ from, to, onFromChange, onToChange, disabled, className, ...props }: TimeRangePickerProps) {
-  return (
-    <div data-slot="time-range-picker" className={cn("grid gap-2 sm:grid-cols-2", className)} {...props}>
-      <TimePicker value={from} disabled={disabled} onChange={(event) => onFromChange?.(event.target.value)} />
-      <TimePicker value={to} disabled={disabled} onChange={(event) => onToChange?.(event.target.value)} />
-    </div>
-  )
-}
+function clearInput(event: React.MouseEvent<HTMLButtonElement>, onChange: React.ChangeEventHandler<HTMLInputElement> | undefined, onClear: (() => void) | undefined) {
+  event.preventDefault()
+  event.stopPropagation()
+  onChange?.({ target: { value: "" }, currentTarget: { value: "" } } as React.ChangeEvent<HTMLInputElement>)
+  onClear?.()
+}
+
+function TimePicker({ label, className, clearable = false, onClear, value, defaultValue, disabled, onChange, ...props }: TimePickerProps) {
+  const hasValue = value !== undefined ? String(value).length > 0 : defaultValue !== undefined && String(defaultValue).length > 0
+
+  return (
+    <FieldShell label={label}>
+      <span className="relative grid">
+        <ClockIcon className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+        <input
+          type="time"
+          value={value}
+          defaultValue={defaultValue}
+          disabled={disabled}
+          onChange={onChange}
+          className={cn("h-11 rounded-[var(--aui-control-radius,var(--radius-md))] border border-input/82 bg-background px-10 text-sm tabular-nums outline-none transition-[border-color,box-shadow] hover:border-ring/30 focus-visible:border-ring focus-visible:ring-4 focus-visible:ring-ring/16 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground", className)}
+          {...props}
+        />
+        {clearable && hasValue && !disabled ? (
+          <button type="button" aria-label="Clear time" className="absolute right-2 top-1/2 grid size-7 -translate-y-1/2 place-items-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" onClick={(event) => clearInput(event, onChange, onClear)}>
+            <XIcon className="size-3.5" />
+          </button>
+        ) : null}
+      </span>
+    </FieldShell>
+  )
+}
+
+function DateTimePicker({ label, className, clearable = false, onClear, value, defaultValue, disabled, onChange, ...props }: DateTimePickerProps) {
+  const hasValue = value !== undefined ? String(value).length > 0 : defaultValue !== undefined && String(defaultValue).length > 0
+
+  return (
+    <FieldShell label={label}>
+      <span className="relative grid">
+        <CalendarClockIcon className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+        <input
+          type="datetime-local"
+          value={value}
+          defaultValue={defaultValue}
+          disabled={disabled}
+          onChange={onChange}
+          className={cn("h-11 rounded-[var(--aui-control-radius,var(--radius-md))] border border-input/82 bg-background px-10 text-sm tabular-nums outline-none transition-[border-color,box-shadow] hover:border-ring/30 focus-visible:border-ring focus-visible:ring-4 focus-visible:ring-ring/16 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground", className)}
+          {...props}
+        />
+        {clearable && hasValue && !disabled ? (
+          <button type="button" aria-label="Clear date and time" className="absolute right-2 top-1/2 grid size-7 -translate-y-1/2 place-items-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" onClick={(event) => clearInput(event, onChange, onClear)}>
+            <XIcon className="size-3.5" />
+          </button>
+        ) : null}
+      </span>
+    </FieldShell>
+  )
+}
+
+function TimeRangePicker({ from, to, onFromChange, onToChange, disabled, labels, className, ...props }: TimeRangePickerProps) {
+  return (
+    <div data-slot="time-range-picker" className={cn("grid gap-2 sm:grid-cols-[1fr_auto_1fr] sm:items-end", className)} {...props}>
+      <TimePicker label={labels?.from} value={from} clearable disabled={disabled} onChange={(event) => onFromChange?.(event.target.value)} onClear={() => onFromChange?.("")} />
+      <span className="hidden h-11 items-center text-sm text-muted-foreground sm:inline-flex">to</span>
+      <TimePicker label={labels?.to} value={to} clearable disabled={disabled} onChange={(event) => onToChange?.(event.target.value)} onClear={() => onToChange?.("")} />
+    </div>
+  )
+}
 
 export { DateTimePicker, TimePicker, TimeRangePicker }

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

@@ -18,7 +18,7 @@ export type FileManagerItem = {
   status?: React.ReactNode
 }
 
-export type FileManagerProps = React.ComponentProps<"div"> & {
+export type FileManagerProps = Omit<React.ComponentProps<"div">, "onSelect"> & {
   items: FileManagerItem[]
   selectedId?: string
   onSelect?: (item: FileManagerItem) => void

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

@@ -2,5 +2,7 @@ export * from "./calendar-scheduler"
 export * from "./dual-list-picker"
 export * from "./resizable-panel"
 export * from "./rich-text-editor"
-export * from "./image-cropper"
 export * from "./file-manager"
+export * from "./map"
+export * from "./media-player"
+export * from "./spreadsheet"