tembro 2.0.4 → 2.0.6

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

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { CalendarIcon } from "lucide-react"
+import { CalendarIcon, XIcon } from "lucide-react"
 
 import { Calendar, type CalendarDateRange, type CalendarProps } from "@/components/calendar/calendar"
 import { Button } from "@/components/ui/button"
@@ -10,10 +10,17 @@ import { parseDateKey } from "./date-utils"
 export type DateRangePickerValue = CalendarDateRange
 
 export type DateRangePickerLabels = CalendarProps["labels"] & {
-  placeholder?: string
-  apply?: React.ReactNode
-  clear?: React.ReactNode
-}
+  placeholder?: string
+  apply?: React.ReactNode
+  clear?: React.ReactNode
+  start?: string
+  end?: string
+}
+
+export type DateRangePickerPreset = {
+  label: React.ReactNode
+  value: DateRangePickerValue
+}
 
 export type DateRangePickerProps = Omit<
   CalendarProps,
@@ -23,31 +30,41 @@ export type DateRangePickerProps = Omit<
   onValueChange?: (value: DateRangePickerValue) => void
   labels?: DateRangePickerLabels
   placeholder?: string
-  disabled?: boolean
-  formatValue?: (value: string) => React.ReactNode
-  closeOnSelect?: boolean
-  showFooter?: boolean
-  triggerClassName?: string
-  contentClassName?: string
-}
+  disabled?: boolean
+  clearable?: boolean
+  formatValue?: (value: string) => React.ReactNode
+  closeOnSelect?: boolean
+  closeOnPresetSelect?: boolean
+  showFooter?: boolean
+  presets?: DateRangePickerPreset[]
+  triggerClassName?: string
+  contentClassName?: string
+}
 
-function defaultFormatValue(value: string) {
-  const date = parseDateKey(value)
-  if (!date) return value
-  return new Intl.DateTimeFormat("en-US", { dateStyle: "medium" }).format(date)
-}
+function defaultFormatValue(value: string) {
+  const date = parseDateKey(value)
+  if (!date) return value
+  return new Intl.DateTimeFormat("en-US", { dateStyle: "medium" }).format(date)
+}
+
+function getTextLabel(value: React.ReactNode, fallback: string) {
+  return typeof value === "string" ? value : fallback
+}
 
 function DateRangePicker({
   className,
   value,
   onValueChange,
-  labels,
-  placeholder,
-  disabled = false,
-  formatValue = defaultFormatValue,
-  closeOnSelect = true,
-  showFooter = false,
-  triggerClassName,
+  labels,
+  placeholder,
+  disabled = false,
+  clearable = true,
+  formatValue = defaultFormatValue,
+  closeOnSelect = false,
+  closeOnPresetSelect = false,
+  showFooter = true,
+  presets,
+  triggerClassName,
   contentClassName,
   numberOfMonths = 2,
   pagedNavigation = true,
@@ -98,16 +115,44 @@ function DateRangePicker({
     setOpen(false)
   }
 
-  const clearDraftValue = () => {
-    const nextValue = {}
+  const clearDraftValue = () => {
+    const nextValue = {}
 
     if (showFooter) {
       setDraftValue(nextValue)
       return
     }
 
-    onValueChange?.(nextValue)
-  }
+    onValueChange?.(nextValue)
+  }
+
+  const resetValue = () => {
+    const nextValue = {}
+    setDraftValue(nextValue)
+    onValueChange?.(nextValue)
+  }
+
+  const clearValue = (event: React.MouseEvent<HTMLElement>) => {
+    event.preventDefault()
+    event.stopPropagation()
+    resetValue()
+  }
+
+  const selectPreset = (presetValue: DateRangePickerValue) => {
+    if (showFooter) {
+      setDraftValue(presetValue)
+      if (closeOnPresetSelect) {
+        onValueChange?.(presetValue)
+        setOpen(false)
+      }
+      return
+    }
+
+    onValueChange?.(presetValue)
+    if ((closeOnSelect || closeOnPresetSelect) && presetValue.from && presetValue.to) {
+      setOpen(false)
+    }
+  }
 
   return (
     <div data-slot="date-range-picker" className={cn("w-full", className)}>
@@ -118,33 +163,93 @@ function DateRangePicker({
               type="button"
               variant="outline"
               disabled={disabled}
-              className={cn(
-                "min-h-11 w-full justify-start rounded-[var(--aui-control-radius,var(--radius-md))] border-border/80 bg-background/96 text-left font-normal shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04))]",
-                !hasValue && "text-muted-foreground",
-                triggerClassName
-              )}
-            />
-          }
-        >
-          <CalendarIcon data-icon="inline-start" />
-          <span className="min-w-0 flex-1 truncate">{label}</span>
-        </PopoverTrigger>
+              className={cn(
+                "group min-h-11 w-full justify-start gap-3 rounded-[var(--aui-control-radius,var(--radius-md))] border-border/80 bg-background/96 px-3 text-left font-normal shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04))]",
+                !hasValue && "text-muted-foreground",
+                triggerClassName
+              )}
+            />
+          }
+        >
+          <CalendarIcon data-icon="inline-start" className={cn(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="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>
+          ) : (
+            <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="truncate text-sm">{label}</span>
+            </span>
+          )}
+          {clearable && hasValue ? (
+            <span
+              role="button"
+              tabIndex={0}
+              aria-label={getTextLabel(labels?.clear, "Clear date range")}
+              className="ml-auto inline-flex size-7 shrink-0 items-center justify-center rounded-[var(--radius-sm)] text-muted-foreground opacity-80 transition hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
+              onClick={clearValue}
+              onKeyDown={(event) => {
+                if (event.key === "Enter" || event.key === " ") {
+                  event.preventDefault()
+                  resetValue()
+                }
+              }}
+            >
+              <XIcon className="size-3.5" />
+            </span>
+          ) : null}
+        </PopoverTrigger>
         <PopoverContent
           align="start"
           className={cn(
             "w-auto overflow-hidden rounded-[var(--aui-card-radius,var(--radius-lg))] border-border/70 bg-popover p-0 shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))] backdrop-blur",
             contentClassName
           )}
-        >
-          <Calendar
-            mode="range"
-            range={activeValue}
-            onRangeChange={handleRangeChange}
-            labels={labels}
-            numberOfMonths={numberOfMonths}
-            pagedNavigation={pagedNavigation}
-            {...calendarProps}
-          />
+        >
+          {presets?.length ? (
+            <div className="flex flex-wrap gap-2 border-b border-border/70 bg-muted/20 px-3 py-3">
+              {presets.map((preset, index) => (
+                <Button
+                  key={index}
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  className="h-7 rounded-full px-3 text-xs"
+                  onClick={() => selectPreset(preset.value)}
+                >
+                  {preset.label}
+                </Button>
+              ))}
+            </div>
+          ) : null}
+          <Calendar
+            mode="range"
+            range={activeValue}
+            onRangeChange={handleRangeChange}
+            labels={labels}
+            renderSelectionSummary={({ range }) => {
+              const fromValue = range?.from ? formatValue(range.from) : null
+              const toValue = range?.to ? formatValue(range.to) : null
+
+              if (fromValue && toValue) return `${fromValue} -> ${toValue}`
+              if (fromValue) return `${fromValue} -> ...`
+              return "No range selected"
+            }}
+            numberOfMonths={numberOfMonths}
+            pagedNavigation={pagedNavigation}
+            showClearShortcut={!showFooter && clearable}
+            showSelectionSummary
+            {...calendarProps}
+          />
           {showFooter && (
             <div className="flex flex-wrap items-center justify-between gap-3 border-t border-border/70 bg-muted/24 px-4 py-3">
               <div className="min-w-0 text-sm text-muted-foreground">

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

@@ -1,8 +1,8 @@
-import * as React from "react"
-
-import { SimpleSelect } from "@/components/inputs/simple-select"
-import { Pagination, type PaginationLabels } from "@/components/navigation/pagination"
-import { cn } from "@/lib/utils"
+import * as React from "react"
+
+import { Select } from "@/components/ui/select"
+import { Pagination, type PaginationLabels } from "@/components/navigation/pagination"
+import { cn } from "@/lib/utils"
 
 export type DataTablePaginationLabels = PaginationLabels & {
   rowsPerPage?: React.ReactNode
@@ -63,9 +63,9 @@ function DataTablePagination({
         {showPageSize && onPageSizeChange && (
           <div className="flex items-center gap-2 text-sm text-muted-foreground">
             <span>{labels?.rowsPerPage ?? "Rows per page"}</span>
-            <SimpleSelect
+            <Select
               value={String(pageSize)}
-              onValueChange={(value) => onPageSizeChange(Number(value))}
+              onValueChange={(value) => onPageSizeChange(Number(value))}
               options={pageSizeOptions.map((option) => ({
                 label: String(option),
                 value: String(option),

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

@@ -22,46 +22,55 @@ const dataTableToolbarVariants = cva("flex flex-col", {
   },
 })
 
-export type DataTableToolbarProps = React.ComponentProps<"div"> &
-  VariantProps<typeof dataTableToolbarVariants> & {
-    title?: React.ReactNode
-    description?: React.ReactNode
-    search?: React.ReactNode
-    filters?: React.ReactNode
-    actions?: React.ReactNode
-    selectionActions?: React.ReactNode
-    selectedCount?: number
-    totalCount?: number
-    selectedLabel?: (selectedCount: number, totalCount?: number) => React.ReactNode
-    titleClassName?: string
-    descriptionClassName?: string
-    actionsClassName?: string
-  }
+export type DataTableToolbarProps = React.ComponentProps<"div"> &
+  VariantProps<typeof dataTableToolbarVariants> & {
+    title?: React.ReactNode
+    description?: React.ReactNode
+    search?: React.ReactNode
+    filters?: React.ReactNode
+    summary?: React.ReactNode
+    actions?: React.ReactNode
+    selectionActions?: React.ReactNode
+    selectedCount?: number
+    totalCount?: number
+    selectedLabel?: (selectedCount: number, totalCount?: number) => React.ReactNode
+    titleClassName?: string
+    descriptionClassName?: string
+    searchClassName?: string
+    filtersClassName?: string
+    summaryClassName?: string
+    actionsClassName?: string
+  }
 
 function DataTableToolbar({
   className,
   variant,
   density,
   title,
-  description,
-  search,
-  filters,
-  actions,
-  selectionActions,
-  selectedCount = 0,
-  totalCount,
-  selectedLabel = (selected, total) =>
-    total === undefined ? `${selected} selected` : `${selected} of ${total} selected`,
-  titleClassName,
-  descriptionClassName,
-  actionsClassName,
-  children,
-  ...props
-}: DataTableToolbarProps) {
-  const hasHeading = Boolean(title || description)
-  const hasSelection = selectedCount > 0 && Boolean(selectionActions)
-
-  return (
+  description,
+  search,
+  filters,
+  summary,
+  actions,
+  selectionActions,
+  selectedCount = 0,
+  totalCount,
+  selectedLabel = (selected, total) =>
+    total === undefined ? `${selected} selected` : `${selected} of ${total} selected`,
+  titleClassName,
+  descriptionClassName,
+  searchClassName,
+  filtersClassName,
+  summaryClassName,
+  actionsClassName,
+  children,
+  ...props
+}: DataTableToolbarProps) {
+  const hasHeading = Boolean(title || description)
+  const hasSelection = selectedCount > 0 && Boolean(selectionActions)
+  const hasMainControls = Boolean(search || filters || children)
+
+  return (
     <div
       data-slot="data-table-toolbar"
       data-variant={variant ?? "plain"}
@@ -69,8 +78,8 @@ function DataTableToolbar({
       className={cn(dataTableToolbarVariants({ variant, density }), className)}
       {...props}
     >
-      {(hasHeading || actions) && (
-        <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+      {(hasHeading || actions) && (
+        <div className="flex flex-col gap-3 xl:flex-row xl:items-start xl:justify-between">
           {hasHeading && (
             <div className="grid gap-1">
               {title && <h2 className={cn("text-lg font-semibold tracking-tight text-foreground", titleClassName)}>{title}</h2>}
@@ -78,24 +87,36 @@ function DataTableToolbar({
             </div>
           )}
 
-          {actions && <div className={cn("flex shrink-0 flex-wrap items-center gap-2", actionsClassName)}>{actions}</div>}
-        </div>
-      )}
-
-      {(search || filters || hasSelection || children) && (
-        <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}
-            {filters}
-            {children}
-          </div>
-
+          {actions && <div className={cn("flex min-w-0 shrink-0 flex-wrap items-center gap-2 xl:justify-end", actionsClassName)}>{actions}</div>}
+        </div>
+      )}
+
+      {(hasMainControls || summary || hasSelection) && (
+        <div className="flex flex-col gap-3 xl:flex-row xl:items-start xl:justify-between">
+          <div className="flex min-w-0 flex-1 flex-col gap-3">
+            {hasMainControls && (
+              <div className="flex min-w-0 flex-1 flex-col gap-2 lg:flex-row lg:flex-wrap lg:items-center">
+                {search ? <div className={cn("min-w-[16rem] max-w-xl flex-1", searchClassName)}>{search}</div> : null}
+                {filters ? <div className={cn("flex min-w-0 flex-1 flex-wrap items-center gap-2", filtersClassName)}>{filters}</div> : null}
+                {children}
+              </div>
+            )}
+            {summary ? (
+              <div
+                data-slot="data-table-summary"
+                className={cn("flex flex-wrap items-center gap-2 text-sm text-muted-foreground", summaryClassName)}
+              >
+                {summary}
+              </div>
+            ) : null}
+          </div>
+
           {hasSelection && (
-            <div data-slot="data-table-selection-bar" className="flex shrink-0 items-center gap-2 rounded-[var(--radius-md)] border border-[color:var(--aui-control-border-strong,var(--border))] bg-[color:var(--aui-control-surface,var(--background))] px-2.5 py-1.5 text-sm shadow-[var(--aui-control-shadow,none)] backdrop-blur">
+            <div data-slot="data-table-selection-bar" className="flex shrink-0 flex-wrap items-center gap-2 rounded-[var(--radius-md)] border border-[color:var(--aui-control-border-strong,var(--border))] bg-[color:var(--aui-control-surface,var(--background))] px-2.5 py-1.5 text-sm shadow-[var(--aui-control-shadow,none)] backdrop-blur">
               <span className="text-muted-foreground">{selectedLabel(selectedCount, totalCount)}</span>
               {selectionActions}
             </div>
-          )}
+          )}
         </div>
       )}
     </div>