tembro 2.0.6 → 2.1.0

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

@@ -53,7 +53,8 @@ export type CalendarProps = React.ComponentProps<"div"> & {
   max?: string
   disabledDates?: string[]
   locale?: string
-  weekStartsOn?: 0 | 1
+  weekStartsOn?: 0 | 1
+  months?: number
   numberOfMonths?: number
   showMonthHeaders?: boolean
   showOutsideDays?: boolean
@@ -127,8 +128,9 @@ function Calendar({
   min,
   max,
   disabledDates,
-  locale = "en-US",
+  locale = "en-US",
   weekStartsOn = 1,
+  months,
   numberOfMonths = 1,
   showMonthHeaders,
   showOutsideDays = true,
@@ -148,7 +150,7 @@ function Calendar({
   const currentValue = isControlledSingle ? value : internalValue
   const currentRange = isControlledRange ? range : internalRange
   const currentMonth = month ?? internalMonth
-  const resolvedNumberOfMonths = Math.max(numberOfMonths, 1)
+  const resolvedNumberOfMonths = Math.max(months ?? numberOfMonths, 1)
   const shouldShowMonthHeaders = showMonthHeaders ?? resolvedNumberOfMonths > 1
   const navigationStep = pagedNavigation ? resolvedNumberOfMonths : 1
   const todayKey = toDateKey(new Date())
@@ -227,16 +229,16 @@ function Calendar({
     onMonthChange?.(next)
   }
 
-  const moveFocus = (date: Date) => {
-    let nextDate = date
-    let nextKey = toDateKey(nextDate)
-    let guard = 0
-
-    while (isDateDisabled(nextKey) && guard < 370) {
-      nextDate = addDays(nextDate, nextDate < date ? -1 : 1)
-      nextKey = toDateKey(nextDate)
-      guard += 1
-    }
+  const moveFocus = (date: Date, step = 1) => {
+    let nextDate = date
+    let nextKey = toDateKey(nextDate)
+    let guard = 0
+
+    while (isDateDisabled(nextKey) && guard < 370) {
+      nextDate = addDays(nextDate, step)
+      nextKey = toDateKey(nextDate)
+      guard += 1
+    }
 
     setFocusedDateKey(nextKey)
 
@@ -341,38 +343,38 @@ function Calendar({
       ((visibleMonthEntry?.days.findIndex((item) => toDateKey(item) === toDateKey(date)) ?? 0) + 7) % 7
 
     switch (event.key) {
-      case "ArrowRight":
-        event.preventDefault()
-        moveFocus(addDays(date, 1))
-        break
-      case "ArrowLeft":
-        event.preventDefault()
-        moveFocus(addDays(date, -1))
-        break
-      case "ArrowDown":
-        event.preventDefault()
-        moveFocus(addDays(date, 7))
-        break
-      case "ArrowUp":
-        event.preventDefault()
-        moveFocus(addDays(date, -7))
-        break
-      case "Home":
-        event.preventDefault()
-        moveFocus(addDays(date, -columnIndex))
-        break
-      case "End":
-        event.preventDefault()
-        moveFocus(addDays(date, 6 - columnIndex))
-        break
-      case "PageUp":
-        event.preventDefault()
-        moveFocus(getDateAtSameDayInMonth(date, addMonths(date, -1)))
-        break
-      case "PageDown":
-        event.preventDefault()
-        moveFocus(getDateAtSameDayInMonth(date, addMonths(date, 1)))
-        break
+      case "ArrowRight":
+        event.preventDefault()
+        moveFocus(addDays(date, 1), 1)
+        break
+      case "ArrowLeft":
+        event.preventDefault()
+        moveFocus(addDays(date, -1), -1)
+        break
+      case "ArrowDown":
+        event.preventDefault()
+        moveFocus(addDays(date, 7), 7)
+        break
+      case "ArrowUp":
+        event.preventDefault()
+        moveFocus(addDays(date, -7), -7)
+        break
+      case "Home":
+        event.preventDefault()
+        moveFocus(addDays(date, -columnIndex), -1)
+        break
+      case "End":
+        event.preventDefault()
+        moveFocus(addDays(date, 6 - columnIndex), 1)
+        break
+      case "PageUp":
+        event.preventDefault()
+        moveFocus(getDateAtSameDayInMonth(date, addMonths(date, -1)), -1)
+        break
+      case "PageDown":
+        event.preventDefault()
+        moveFocus(getDateAtSameDayInMonth(date, addMonths(date, 1)), 1)
+        break
     }
   }
 
@@ -444,6 +446,9 @@ function Calendar({
                 const selected = mode === "single" ? currentValue === dateKey : dateKey === currentRange?.from || dateKey === currentRange?.to
                 const inRange = mode === "range" && isWithinRange(dateKey, currentRange?.from, currentRange?.to)
                 const inPreviewRange = !inRange && mode === "range" && isWithinRange(dateKey, previewRange?.from, previewRange?.to)
+                const rangeStart = mode === "range" && dateKey === currentRange?.from
+                const rangeEnd = mode === "range" && dateKey === currentRange?.to
+                const rangeMiddle = inRange && !rangeStart && !rangeEnd
                 const disabledReason = getDisabledReason(dateKey)
                 const disabled = Boolean(disabledReason)
                 const disabledLabel = disabledReason ? labels?.disabledDate?.(dateKey, disabledReason) : undefined
@@ -457,11 +462,15 @@ function Calendar({
                     }}
                     type="button"
                     disabled={disabled}
-                    aria-label={disabledLabel ?? labels?.selectDate?.(dateKey) ?? dateKey}
-                    aria-current={dateKey === todayKey ? "date" : undefined}
-                    tabIndex={dateKey === tabbableDateKey ? 0 : -1}
-                    title={disabledLabel}
-                    data-selected={selected || undefined}
+                    aria-label={disabledLabel ?? labels?.selectDate?.(dateKey) ?? dateKey}
+                    aria-current={dateKey === todayKey ? "date" : undefined}
+                    aria-selected={selected || inRange || inPreviewRange || undefined}
+                    tabIndex={dateKey === tabbableDateKey ? 0 : -1}
+                    title={disabledLabel}
+                    data-selected={selected || undefined}
+                    data-range-start={rangeStart || undefined}
+                    data-range-end={rangeEnd || undefined}
+                    data-range-middle={rangeMiddle || undefined}
                     data-today={dateKey === todayKey || undefined}
                     data-outside={outside || undefined}
                     data-in-range={inRange || undefined}

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

@@ -39,6 +39,7 @@ export type DateRangePickerProps = Omit<
   presets?: DateRangePickerPreset[]
   triggerClassName?: string
   contentClassName?: string
+  months?: number
 }
 
 function defaultFormatValue(value: string) {
@@ -65,8 +66,9 @@ function DateRangePicker({
   showFooter = true,
   presets,
   triggerClassName,
-  contentClassName,
-  numberOfMonths = 2,
+  contentClassName,
+  months,
+  numberOfMonths = 2,
   pagedNavigation = true,
   ...calendarProps
 }: DateRangePickerProps) {
@@ -78,7 +80,8 @@ function DateRangePicker({
   const activeValue = showFooter ? draftValue : value
   const activeFrom = activeValue?.from ?? ""
   const activeTo = activeValue?.to ?? ""
-  const hasDraftValue = Boolean(activeFrom || activeTo)
+  const hasDraftValue = Boolean(activeFrom || activeTo)
+  const resolvedNumberOfMonths = months ?? numberOfMonths
 
   const label = from && to
     ? `${formatValue(from)} - ${formatValue(to)}`
@@ -244,7 +247,7 @@ function DateRangePicker({
               if (fromValue) return `${fromValue} -> ...`
               return "No range selected"
             }}
-            numberOfMonths={numberOfMonths}
+            numberOfMonths={resolvedNumberOfMonths}
             pagedNavigation={pagedNavigation}
             showClearShortcut={!showFooter && clearable}
             showSelectionSummary

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

@@ -3,12 +3,12 @@ import * as React from "react"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { cn } from "@/lib/utils"
 
-export type ChartDatum = {
-  label: React.ReactNode
-  value: number
-  description?: React.ReactNode
-  color?: string
-}
+export type ChartDatum = {
+  label: React.ReactNode
+  value: number
+  description?: React.ReactNode
+  color?: string
+}
 
 export type ChartSeries = {
   key: string
@@ -19,7 +19,8 @@ export type ChartSeries = {
 
 export type ChartAxisLabel = string | number | React.ReactNode
 
-export type ChartSize = "sm" | "md" | "lg"
+export type ChartSize = "sm" | "md" | "lg"
+export type ChartState = "ready" | "loading" | "empty"
 
 const chartHeightBySize: Record<ChartSize, number> = {
   sm: 120,
@@ -31,10 +32,14 @@ function safeMax(values: number[], fallback = 1) {
   return Math.max(...values, fallback)
 }
 
-function normalizeValue(value: number, max: number) {
-  if (!Number.isFinite(value) || max <= 0) return 0
-  return Math.max(0, Math.min(value / max, 1))
-}
+function normalizeValue(value: number, max: number) {
+  if (!Number.isFinite(value) || max <= 0) return 0
+  return Math.max(0, Math.min(value / max, 1))
+}
+
+function getChartColor(index: number, custom?: string) {
+  return custom ?? `var(--color-chart-${(index % 5) + 1}, var(--primary))`
+}
 
 function polarToCartesian(cx: number, cy: number, radius: number, angle: number) {
   const radians = ((angle - 90) * Math.PI) / 180
@@ -79,13 +84,15 @@ function buildAreaPath(values: number[], width: number, height: number, padding
   return `${line} L ${lastX} ${baseline} L ${firstX} ${baseline} Z`
 }
 
-export type ChartFrameProps = React.ComponentProps<typeof Card> & {
-  title?: React.ReactNode
-  description?: React.ReactNode
-  action?: React.ReactNode
-}
-
-function ChartFrame({ title, description, action, className, children, ...props }: ChartFrameProps) {
+export type ChartFrameProps = React.ComponentProps<typeof Card> & {
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: React.ReactNode
+  state?: ChartState
+  emptyLabel?: React.ReactNode
+}
+
+function ChartFrame({ title, description, action, state = "ready", emptyLabel = "No data available.", className, children, ...props }: ChartFrameProps) {
   return (
     <Card
       data-slot="chart-frame"
@@ -101,39 +108,55 @@ function ChartFrame({ title, description, action, className, children, ...props
           {action}
         </CardHeader>
       )}
-      <CardContent>{children}</CardContent>
-    </Card>
-  )
-}
+      <CardContent>
+        {state === "loading" ? <div className="grid gap-3"><div className="h-4 w-24 animate-pulse rounded bg-muted" /><div className="h-36 animate-pulse rounded-[min(var(--radius-xl),16px)] bg-muted/70" /></div> : null}
+        {state === "empty" ? <div className="rounded-[min(var(--radius-xl),16px)] border border-dashed border-border/70 px-4 py-10 text-center text-sm text-muted-foreground">{emptyLabel}</div> : null}
+        {state === "ready" ? children : null}
+      </CardContent>
+    </Card>
+  )
+}
 
 export type BarChartProps = React.ComponentProps<"div"> & {
   data: ChartDatum[]
-  size?: ChartSize
-  max?: number
-  showLabels?: boolean
-  showValues?: boolean
-  barClassName?: string
-}
-
-function BarChart({ data, size = "md", max, showLabels = true, showValues = true, className, barClassName, ...props }: BarChartProps) {
-  const resolvedMax = max ?? safeMax(data.map((item) => item.value))
-  const height = chartHeightBySize[size]
-
+  size?: ChartSize
+  max?: number
+  showLabels?: boolean
+  showValues?: boolean
+  barClassName?: string
+  state?: ChartState
+  emptyLabel?: React.ReactNode
+}
+
+function BarChart({ data, size = "md", max, showLabels = true, showValues = true, state = "ready", emptyLabel = "No chart data.", className, barClassName, ...props }: BarChartProps) {
+  const values = data.map((item) => item.value)
+  const absoluteMax = max ?? safeMax(values.map((value) => Math.abs(value)))
+  const height = chartHeightBySize[size]
+
+  if (state === "loading") {
+    return <div data-slot="bar-chart" className={cn("grid gap-3", className)} {...props}><div className="h-40 animate-pulse rounded-[min(var(--radius-xl),16px)] bg-muted/70" /></div>
+  }
+
+  if (state === "empty" || data.length === 0) {
+    return <div data-slot="bar-chart" className={cn("rounded-[min(var(--radius-xl),16px)] border border-dashed border-border/70 px-4 py-10 text-center text-sm text-muted-foreground", className)} {...props}>{emptyLabel}</div>
+  }
+
   return (
     <div data-slot="bar-chart" className={cn("grid gap-3", className)} {...props}>
       <div className="flex items-end gap-2" style={{ height }}>
-        {data.map((item, index) => {
-          const ratio = normalizeValue(item.value, resolvedMax)
-          return (
-            <div key={index} className="flex min-w-0 flex-1 flex-col items-center gap-2">
-              {showValues && <div className="text-xs text-muted-foreground">{item.value}</div>}
+        {data.map((item, index) => {
+          const ratio = normalizeValue(Math.abs(item.value), absoluteMax)
+          const negative = item.value < 0
+          return (
+            <div key={index} className="flex min-w-0 flex-1 flex-col items-center gap-2">
+              {showValues && <div className="text-xs text-muted-foreground">{item.value}</div>}
               <div className="flex w-full flex-1 items-end rounded-[min(var(--radius-xl),16px)] border border-border/60 bg-muted/38 p-1">
                 <div
                   className={cn("w-full rounded-[min(var(--radius-lg),12px)] bg-primary transition-all", barClassName)}
-                  style={{ height: `${Math.max(ratio * 100, item.value > 0 ? 3 : 0)}%`, background: item.color }}
+                  style={{ height: `${Math.max(ratio * 100, Math.abs(item.value) > 0 ? 3 : 0)}%`, background: getChartColor(index, item.color), opacity: negative ? 0.72 : 1 }}
                 />
               </div>
-              {showLabels && <div className="max-w-full truncate text-xs text-muted-foreground">{item.label}</div>}
+              {showLabels && <div className="max-w-full truncate text-xs text-muted-foreground">{item.label}</div>}
             </div>
           )
         })}
@@ -147,15 +170,25 @@ export type LineChartProps = Omit<React.ComponentProps<"svg">, "values"> & {
   size?: ChartSize
   width?: number
   showArea?: boolean
-  stroke?: string
-}
-
-function LineChart({ values, size = "md", width = 560, showArea = false, stroke = "var(--primary)", className, ...props }: LineChartProps) {
-  const height = chartHeightBySize[size]
-  const linePath = buildLinePath(values, width, height)
-  const areaPath = buildAreaPath(values, width, height)
-
-  return (
+  stroke?: string
+  state?: ChartState
+  emptyLabel?: React.ReactNode
+}
+
+function LineChart({ values, size = "md", width = 560, showArea = false, stroke = "var(--primary)", state = "ready", emptyLabel = "No line data.", className, ...props }: LineChartProps) {
+  const height = chartHeightBySize[size]
+  const linePath = buildLinePath(values, width, height)
+  const areaPath = buildAreaPath(values, width, height)
+
+  if (state === "loading") {
+    return <div className={cn("h-36 animate-pulse rounded-[min(var(--radius-xl),16px)] bg-muted/70", className)} />
+  }
+
+  if (state === "empty" || values.length === 0) {
+    return <div className={cn("rounded-[min(var(--radius-xl),16px)] border border-dashed border-border/70 px-4 py-10 text-center text-sm text-muted-foreground", className)}>{emptyLabel}</div>
+  }
+
+  return (
     <svg data-slot="line-chart" viewBox={`0 0 ${width} ${height}`} className={cn("h-auto w-full overflow-visible", className)} role="img" {...props}>
       {showArea && <path d={areaPath} fill="var(--primary)" opacity="0.12" />}
       <path d={linePath} fill="none" stroke={stroke} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
@@ -191,12 +224,14 @@ function Sparkline({ values, positive = true, stroke, className, ...props }: Spa
 export type DonutChartProps = React.ComponentProps<"svg"> & {
   data: ChartDatum[]
   size?: number
-  strokeWidth?: number
-  centerLabel?: React.ReactNode
-  centerValue?: React.ReactNode
-}
-
-function DonutChart({ data, size = 180, strokeWidth = 18, centerLabel, centerValue, className, ...props }: DonutChartProps) {
+  strokeWidth?: number
+  centerLabel?: React.ReactNode
+  centerValue?: React.ReactNode
+  state?: ChartState
+  emptyLabel?: React.ReactNode
+}
+
+function DonutChart({ data, size = 180, strokeWidth = 18, centerLabel, centerValue, state = "ready", emptyLabel = "No distribution data.", className, ...props }: DonutChartProps) {
   const total = data.reduce((sum, item) => sum + Math.max(item.value, 0), 0)
   const radius = size / 2 - strokeWidth
   const segments = data.map((item, index) => {
@@ -207,6 +242,14 @@ function DonutChart({ data, size = 180, strokeWidth = 18, centerLabel, centerVal
     return { item, start, end }
   })
 
+  if (state === "loading") {
+    return <div className={cn("h-44 w-full max-w-48 animate-pulse rounded-full bg-muted/70", className)} />
+  }
+
+  if (state === "empty" || data.length === 0 || total <= 0) {
+    return <div className={cn("flex h-44 w-full max-w-48 items-center justify-center rounded-full border border-dashed border-border/70 px-4 text-center text-sm text-muted-foreground", className)}>{emptyLabel}</div>
+  }
+
   return (
     <svg data-slot="donut-chart" viewBox={`0 0 ${size} ${size}`} className={cn("h-auto w-full max-w-48", className)} role="img" {...props}>
       <circle cx={size / 2} cy={size / 2} r={radius} fill="none" stroke="var(--muted)" strokeWidth={strokeWidth} />
@@ -215,11 +258,11 @@ function DonutChart({ data, size = 180, strokeWidth = 18, centerLabel, centerVal
           <path
             key={index}
             d={describeArc(size / 2, size / 2, radius, start, end)}
-            fill="none"
-            stroke={item.color ?? "var(--primary)"}
-            strokeWidth={strokeWidth}
-            strokeLinecap="round"
-          />
+            fill="none"
+            stroke={getChartColor(index, item.color)}
+            strokeWidth={strokeWidth}
+            strokeLinecap="round"
+          />
         )
       })}
       {(centerValue || centerLabel) && (
@@ -240,11 +283,11 @@ function ChartLegend({ data, className, ...props }: ChartLegendProps) {
   return (
     <div data-slot="chart-legend" className={cn("flex flex-wrap gap-3 text-xs text-muted-foreground", className)} {...props}>
       {data.map((item, index) => (
-        <div key={index} className="inline-flex items-center gap-1.5">
-          <span className="size-2 rounded-full bg-primary" style={{ background: item.color }} />
-          <span>{item.label}</span>
-        </div>
-      ))}
+        <div key={index} className="inline-flex items-center gap-1.5">
+          <span className="size-2 rounded-full bg-primary" style={{ background: getChartColor(index, item.color) }} />
+          <span>{item.label}</span>
+        </div>
+      ))}
     </div>
   )
 }
@@ -283,4 +326,4 @@ function MetricTrend({ label, value, change, positive = true, values, className,
   )
 }
 
-export { BarChart, ChartFrame, ChartLegend, DonutChart, LineChart, MetricTrend, Sparkline }
+export { BarChart, ChartFrame, ChartLegend, DonutChart, LineChart, MetricTrend, Sparkline }

package/packages/cli/vendor/src/components/charts/progress-ring.tsx

@@ -2,36 +2,47 @@ import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
-export type ProgressRingProps = React.ComponentProps<"svg"> & {
-  value: number
-  max?: number
-  size?: number
-  strokeWidth?: number
-  label?: React.ReactNode
-  description?: React.ReactNode
-}
-
-function ProgressRing({ value, max = 100, size = 120, strokeWidth = 10, label, description, className, ...props }: ProgressRingProps) {
-  const radius = (size - strokeWidth) / 2
-  const circumference = 2 * Math.PI * radius
-  const ratio = max > 0 ? Math.min(Math.max(value / max, 0), 1) : 0
-  const offset = circumference - ratio * circumference
-
-  return (
-    <svg data-slot="progress-ring" viewBox={`0 0 ${size} ${size}`} className={cn("h-auto w-full max-w-32", className)} role="img" {...props}>
-      <circle cx={size / 2} cy={size / 2} r={radius} fill="none" stroke="var(--muted)" strokeWidth={strokeWidth} />
-      <circle
+export type ProgressRingProps = React.ComponentProps<"svg"> & {
+  value: number
+  max?: number
+  size?: number
+  strokeWidth?: number
+  label?: React.ReactNode
+  description?: React.ReactNode
+  tone?: "default" | "success" | "warning" | "danger"
+  loading?: boolean
+}
+
+function ProgressRing({ value, max = 100, size = 120, strokeWidth = 10, label, description, tone = "default", loading = false, className, ...props }: ProgressRingProps) {
+  const radius = (size - strokeWidth) / 2
+  const circumference = 2 * Math.PI * radius
+  const ratio = max > 0 ? Math.min(Math.max(value / max, 0), 1) : 0
+  const offset = circumference - ratio * circumference
+  const stroke =
+    tone === "success"
+      ? "var(--color-chart-3, var(--primary))"
+      : tone === "warning"
+        ? "var(--color-chart-4, var(--primary))"
+        : tone === "danger"
+          ? "var(--destructive)"
+          : "var(--primary)"
+
+  return (
+    <svg data-slot="progress-ring" viewBox={`0 0 ${size} ${size}`} className={cn("h-auto w-full max-w-32", className)} role="img" {...props}>
+      <circle cx={size / 2} cy={size / 2} r={radius} fill="none" stroke="var(--muted)" strokeWidth={strokeWidth} />
+      <circle
         cx={size / 2}
         cy={size / 2}
         r={radius}
         fill="none"
-        stroke="var(--primary)"
-        strokeWidth={strokeWidth}
-        strokeLinecap="round"
-        strokeDasharray={circumference}
-        strokeDashoffset={offset}
-        transform={`rotate(-90 ${size / 2} ${size / 2})`}
-      />
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeDasharray={circumference}
+        strokeDashoffset={loading ? circumference * 0.45 : offset}
+        transform={`rotate(-90 ${size / 2} ${size / 2})`}
+        className={loading ? "animate-pulse" : undefined}
+      />
       {(label || description) && (
         <text x="50%" y="50%" textAnchor="middle" dominantBaseline="middle" fill="var(--foreground)">
           {label && <tspan x="50%" dy={description ? "-0.15em" : "0"} className="text-base font-semibold">{label}</tspan>}

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

@@ -19,10 +19,13 @@ export type DataTableColumnVisibilityMenuProps<TData> = {
   triggerLabel?: React.ReactNode
   align?: "start" | "center" | "end"
   side?: "top" | "right" | "bottom" | "left"
-  triggerClassName?: string
-  contentClassName?: string
-  getColumnLabel?: (columnId: string) => React.ReactNode
-}
+  triggerClassName?: string
+  contentClassName?: string
+  emptyLabel?: React.ReactNode
+  showCount?: boolean
+  triggerAriaLabel?: string
+  getColumnLabel?: (columnId: string) => React.ReactNode
+}
 
 function defaultColumnLabel(columnId: string) {
   return columnId
@@ -36,16 +39,20 @@ function DataTableColumnVisibilityMenu<TData>({
   label = "Columns",
   triggerLabel,
   align = "end",
-  side = "bottom",
-  triggerClassName,
-  contentClassName,
-  getColumnLabel = defaultColumnLabel,
-}: DataTableColumnVisibilityMenuProps<TData>) {
-  const columns = table
-    .getAllLeafColumns()
-    .filter((column) => column.getCanHide())
-
-  return (
+  side = "bottom",
+  triggerClassName,
+  contentClassName,
+  emptyLabel = "No hideable columns",
+  showCount = true,
+  triggerAriaLabel,
+  getColumnLabel = defaultColumnLabel,
+}: DataTableColumnVisibilityMenuProps<TData>) {
+  const columns = table
+    .getAllLeafColumns()
+    .filter((column) => column.getCanHide())
+  const visibleCount = columns.filter((column) => column.getIsVisible()).length
+
+  return (
     <DropdownMenu>
       <DropdownMenuTrigger
         render={
@@ -53,27 +60,39 @@ function DataTableColumnVisibilityMenu<TData>({
             type="button"
             variant="outline"
             size="sm"
+            aria-label={triggerAriaLabel ?? "Choose visible columns"}
             className={cn(
-              "border-border/80 bg-background/94 shadow-[0_1px_0_rgba(255,255,255,0.06)]",
+              "min-w-0 border-border/80 bg-background/94 px-2.5 shadow-[0_1px_0_rgba(255,255,255,0.06)] hover:border-border hover:bg-accent/70",
               triggerClassName
             )}
           />
         }
       >
-        <Columns3Icon data-icon="inline-start" />
-        {triggerLabel ?? label}
-      </DropdownMenuTrigger>
+        <Columns3Icon data-icon="inline-start" className="size-4 shrink-0" />
+        <span className="truncate">{triggerLabel ?? label}</span>
+        {showCount && columns.length > 0 ? (
+          <span className="ml-0.5 rounded-[var(--radius-sm)] bg-muted px-1.5 py-0.5 text-[11px] font-medium text-muted-foreground">
+            {visibleCount}/{columns.length}
+          </span>
+        ) : null}
+      </DropdownMenuTrigger>
       <DropdownMenuContent
         align={align}
         side={side}
         className={cn(
-          "min-w-48 rounded-[var(--radius-2xl)] border-border/80 bg-popover/98 shadow-[0_24px_80px_rgba(15,23,42,0.18)] backdrop-blur",
+          "max-h-[min(24rem,var(--radix-dropdown-menu-content-available-height,24rem))] min-w-56 overflow-y-auto rounded-[var(--radius-lg)] border-border/80 bg-popover/98 p-1 shadow-[0_24px_80px_rgba(15,23,42,0.18)] backdrop-blur",
           contentClassName
         )}
       >
-        <DropdownMenuLabel>{label}</DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        {columns.map((column) => (
+        <DropdownMenuLabel className="flex items-center justify-between gap-3">
+          <span>{label}</span>
+          {showCount ? <span className="text-xs font-normal text-muted-foreground">{visibleCount} visible</span> : null}
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {columns.length === 0 ? (
+          <DropdownMenuLabel className="py-3 text-sm font-normal text-muted-foreground">{emptyLabel}</DropdownMenuLabel>
+        ) : null}
+        {columns.map((column) => (
           <DropdownMenuCheckboxItem
             key={column.id}
             checked={column.getIsVisible()}