tembro 3.0.0 → 3.1.5

package/packages/cli/vendor/src/components/layout/controllable-details.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+import * as React from "react"
+
+type ControllableDetailsProps = Omit<React.ComponentProps<"details">, "open" | "onToggle"> & {
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+function ControllableDetails({
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  children,
+  ...props
+}: ControllableDetailsProps) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)
+  const isControlled = open !== undefined
+
+  return (
+    <details
+      {...props}
+      open={isControlled ? open : uncontrolledOpen}
+      onToggle={(event) => {
+        const nextOpen = event.currentTarget.open
+        if (!isControlled) setUncontrolledOpen(nextOpen)
+        onOpenChange?.(nextOpen)
+      }}
+    >
+      {children}
+    </details>
+  )
+}
+
+export { ControllableDetails }
+export type { ControllableDetailsProps }

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

@@ -2,6 +2,4 @@ import { component, createShowcaseDemoRegistry } from "@/showcase/create-demo"
 
 export const layoutShowcaseDemoRegistry = createShowcaseDemoRegistry([
   component("app-header", "AppHeader", "layout", "Sticky product header with left, center and right slots."),
-  component("section-header", "SectionHeader", "layout", "Reusable section title block with actions and metadata."),
-  component("stat-card", "StatCard", "layout", "Dashboard stat card for KPI, trend and helper text."),
 ])

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

@@ -1,8 +1,4 @@
 export * from "./app-header"
 export * from "./app-sidebar"
-export * from "./stat-card"
-export * from "./sidebar-nav"
 export * from "./breadcrumbs"
-export * from "./page-container"
 export * from "./section"
-export * from "./sticky-footer-bar"

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

@@ -1,7 +1,3 @@
 export * from "./app-sidebar"
 export * from "./breadcrumbs"
-export * from "./page-container"
 export * from "./section"
-export * from "./section-header"
-export * from "./sidebar-nav"
-export * from "./sticky-footer-bar"

package/packages/cli/vendor/src/components/layout/sidebar-nav.tsx

@@ -1,8 +1,11 @@
+"use client"
+
 import * as React from "react"
 
 import { Badge } from "@/components/ui/badge"
 import { Tooltip } from "@/components/ui/tooltip"
 import { cn } from "@/lib/utils"
+import { ControllableDetails } from "./controllable-details"
 
 export type SidebarNavItem = {
   key: string
@@ -17,6 +20,8 @@ export type SidebarNavItem = {
   hidden?: boolean
   sectionLabel?: React.ReactNode
   defaultExpanded?: boolean
+  expanded?: boolean
+  onExpandedChange?: (expanded: boolean) => void
   tooltip?: React.ReactNode
   onSelect?: () => void
 }
@@ -26,6 +31,9 @@ export type SidebarNavProps = React.ComponentProps<"nav"> & {
   collapsed?: boolean
   scrollable?: boolean
   tooltipOnCollapsed?: boolean
+  showSectionLabels?: boolean
+  itemSize?: "sm" | "md" | "lg"
+  activeIndicator?: "none" | "bar" | "pill"
   itemClassName?: string
   activeItemClassName?: string
   renderItem?: (item: SidebarNavItem, element: React.ReactNode) => React.ReactNode
@@ -45,6 +53,8 @@ function SidebarLeaf({
   item,
   collapsed,
   depth,
+  itemSize,
+  activeIndicator,
   itemClassName,
   activeItemClassName,
   renderLink,
@@ -52,6 +62,8 @@ function SidebarLeaf({
   item: SidebarNavItem
   collapsed: boolean
   depth: number
+  itemSize: NonNullable<SidebarNavProps["itemSize"]>
+  activeIndicator: NonNullable<SidebarNavProps["activeIndicator"]>
   itemClassName?: string
   activeItemClassName?: string
   renderLink?: SidebarNavProps["renderLink"]
@@ -70,7 +82,7 @@ function SidebarLeaf({
   )
 
   const commonClassName = cn(
-    "group flex min-h-9 items-center gap-2 rounded-xl border border-transparent px-2.5 text-sm font-medium text-[color:var(--aui-page-muted-strong,var(--muted-foreground))] transition-[background-color,border-color,color,box-shadow] hover:border-[color:var(--aui-divider)] hover:bg-[color:var(--aui-page-bg-alt)] hover:text-[color:var(--aui-page-foreground)] data-[active=true]:border-[color:var(--aui-surface-border-strong,var(--ring))] data-[active=true]:bg-[color:var(--aui-control-bg)] data-[active=true]:text-[color:var(--aui-page-foreground)] data-[active=true]:shadow-[inset_0_1px_0_rgba(255,255,255,0.25)] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
+    "group flex items-center gap-2 border border-transparent text-sm font-medium transition-[background-color,border-color,color,box-shadow] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
     collapsed && "justify-center px-0",
     depth > 0 && !collapsed && "pl-3",
     itemClassName,
@@ -98,6 +110,8 @@ function SidebarLeaf({
           "data-depth": String(depth),
           "data-active": item.active || undefined,
           "data-disabled": item.disabled || undefined,
+          "data-size": itemSize,
+          "data-active-indicator": activeIndicator,
           "aria-current": currentValue,
           className: commonClassName,
           onClick: (event) => {
@@ -119,6 +133,8 @@ function SidebarLeaf({
         data-depth={depth}
         data-active={item.active || undefined}
         data-disabled={item.disabled || undefined}
+        data-size={itemSize}
+        data-active-indicator={activeIndicator}
         aria-current={currentValue}
         className={commonClassName}
         onClick={(event) => {
@@ -142,6 +158,8 @@ function SidebarLeaf({
         data-depth={depth}
         data-active={item.active || undefined}
         data-disabled={item.disabled || undefined}
+        data-size={itemSize}
+        data-active-indicator={activeIndicator}
         aria-current={currentValue}
         className={cn("w-full text-left", commonClassName)}
         onClick={() => {
@@ -168,6 +186,8 @@ function SidebarLeaf({
       data-depth={depth}
       data-active={item.active || undefined}
       data-disabled={item.disabled || undefined}
+      data-size={itemSize}
+      data-active-indicator={activeIndicator}
       aria-current={currentValue}
       disabled={item.disabled}
       className={cn("w-full text-left", commonClassName)}
@@ -182,6 +202,9 @@ function SidebarTree({
   items,
   collapsed,
   depth,
+  showSectionLabels,
+  itemSize,
+  activeIndicator,
   itemClassName,
   activeItemClassName,
   renderItem,
@@ -190,6 +213,9 @@ function SidebarTree({
   items: SidebarNavItem[]
   collapsed: boolean
   depth: number
+  showSectionLabels: boolean
+  itemSize: NonNullable<SidebarNavProps["itemSize"]>
+  activeIndicator: NonNullable<SidebarNavProps["activeIndicator"]>
   itemClassName?: string
   activeItemClassName?: string
   renderItem?: SidebarNavProps["renderItem"]
@@ -198,7 +224,7 @@ function SidebarTree({
   return items.map((item) => {
     if (item.hidden) return null
 
-    const showSectionLabel = !collapsed && depth === 0 && item.sectionLabel
+    const showSectionLabel = showSectionLabels && !collapsed && depth === 0 && item.sectionLabel
     const hasChildren = hasVisibleChildren(item)
 
     if (!hasChildren) {
@@ -207,6 +233,8 @@ function SidebarTree({
           item={item}
           collapsed={collapsed}
           depth={depth}
+          itemSize={itemSize}
+          activeIndicator={activeIndicator}
           itemClassName={itemClassName}
           activeItemClassName={activeItemClassName}
           renderLink={renderLink}
@@ -273,10 +301,12 @@ function SidebarTree({
             {item.sectionLabel}
           </div>
         ) : null}
-        <details
+        <ControllableDetails
           data-slot="sidebar-nav-group-details"
-          open={isExpanded}
+          open={item.expanded}
+          defaultOpen={isExpanded}
           className="group/sidebar-nav-details"
+          onOpenChange={item.onExpandedChange}
         >
           {trigger}
           <div
@@ -287,13 +317,16 @@ function SidebarTree({
               items={item.items ?? []}
               collapsed={collapsed}
               depth={depth + 1}
+              showSectionLabels={showSectionLabels}
+              itemSize={itemSize}
+              activeIndicator={activeIndicator}
               itemClassName={itemClassName}
               activeItemClassName={activeItemClassName}
               renderItem={renderItem}
               renderLink={renderLink}
             />
           </div>
-        </details>
+        </ControllableDetails>
       </div>
     )
 
@@ -306,6 +339,9 @@ function SidebarNav({
   items,
   collapsed = false,
   scrollable = true,
+  showSectionLabels = true,
+  itemSize = "md",
+  activeIndicator = "bar",
   itemClassName,
   activeItemClassName,
   renderItem,
@@ -316,6 +352,7 @@ function SidebarNav({
 
   return (
     <nav
+      aria-label="Primary navigation"
       data-slot="sidebar-nav"
       data-collapsed={collapsed || undefined}
       className={cn("grid min-h-0 gap-1", scrollable ? "overflow-y-auto overscroll-contain" : null, className)}
@@ -325,6 +362,9 @@ function SidebarNav({
         items={visibleItems}
         collapsed={collapsed}
         depth={0}
+        showSectionLabels={showSectionLabels}
+        itemSize={itemSize}
+        activeIndicator={activeIndicator}
         itemClassName={itemClassName}
         activeItemClassName={activeItemClassName}
         renderItem={renderItem}

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

@@ -1,7 +1,7 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
 export type CalendarSchedulerEvent = {
   id: string
   title: React.ReactNode
@@ -19,54 +19,113 @@ export type CalendarSchedulerProps = React.ComponentProps<"div"> & {
   onCreateEvent?: (date: string) => void
   onEventClick?: (event: CalendarSchedulerEvent) => void
 }
-
-const toneClassName = {
-  default: "border-border bg-muted",
-  success: "border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-900 dark:bg-emerald-950 dark:text-emerald-300",
-  warning: "border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-300",
-  danger: "border-red-200 bg-red-50 text-red-700 dark:border-red-900 dark:bg-red-950 dark:text-red-300",
-}
-
-function CalendarScheduler({ events, days, view = "week", empty = "No events scheduled.", onCreateEvent, onEventClick, className, ...props }: CalendarSchedulerProps) {
+
+const toneClassName = {
+  default: "border-border bg-muted",
+  success: "border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-900 dark:bg-emerald-950 dark:text-emerald-300",
+  warning: "border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-300",
+  danger: "border-red-200 bg-red-50 text-red-700 dark:border-red-900 dark:bg-red-950 dark:text-red-300",
+}
+
+function CalendarScheduler({
+  events,
+  days,
+  view = "week",
+  empty = "No events scheduled.",
+  onCreateEvent,
+  onEventClick,
+  className,
+  ...props
+}: CalendarSchedulerProps) {
   const visibleDays = days ?? Array.from(new Set(events.map((event) => event.date)))
 
-  return (
-    <div data-slot="calendar-scheduler" data-view={view} className={cn("grid gap-3", view === "month" && "md:grid-cols-2 xl:grid-cols-3", className)} {...props}>
-      {visibleDays.map((day) => (
-        <section key={day} className="rounded-[var(--aui-card-radius,var(--radius-xl))] border border-[color:var(--aui-card-border,var(--border))] bg-card p-4 shadow-[var(--aui-card-shadow,var(--aui-control-shadow,none))]">
-          <div className="mb-3 flex items-center justify-between gap-3">
-            <div className="text-sm font-semibold text-foreground">{day}</div>
-            <div className="text-xs text-muted-foreground">{events.filter((event) => event.date === day).length} items</div>
+  if (visibleDays.length === 0) {
+    return (
+      <div
+        data-slot="calendar-scheduler"
+        data-view={view}
+        className={cn(
+          "rounded-[var(--aui-card-radius,var(--radius-xl))] border border-[color:var(--aui-card-border,var(--border))] bg-card p-5 text-sm text-muted-foreground shadow-[var(--aui-card-shadow,var(--aui-control-shadow,none))]",
+          className
+        )}
+        {...props}
+      >
+        <div className="flex min-h-32 items-center justify-center rounded-[var(--radius-lg)] border border-dashed border-[color:var(--aui-card-border,var(--border))] bg-muted/20 px-4 py-6 text-center">
+          <div className="space-y-1.5">
+            <p data-empty="true" className="text-sm font-medium text-foreground">
+              {empty}
+            </p>
+            {onCreateEvent ? (
+              <button
+                type="button"
+                className="rounded-md border border-dashed px-3 py-2 text-sm text-muted-foreground hover:bg-muted/50"
+                onClick={() => onCreateEvent("today")}
+              >
+                Create event
+              </button>
+            ) : null}
           </div>
-          <div className="grid gap-2">
-            {events.filter((event) => event.date === day).length === 0 ? (
-              <div className="rounded-[var(--radius-md)] border border-dashed border-[color:var(--aui-card-border,var(--border))] px-3 py-4 text-sm text-muted-foreground">
-                {empty}
-              </div>
-            ) : (
-              events.filter((event) => event.date === day).map((event) => (
-                <button
-                  key={event.id}
-                  type="button"
-                  className={cn("rounded-[var(--radius-md)] border px-3 py-2.5 text-left text-sm shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40", toneClassName[event.tone ?? "default"])}
-                  onClick={() => onEventClick?.(event)}
-                >
-                  <div className="font-medium">{event.title}</div>
-                  {event.time && <div className="mt-1 text-xs opacity-70">{event.time}</div>}
-                  {event.durationMinutes && <div className="mt-1 text-xs opacity-70">{event.durationMinutes} min</div>}
-                </button>
-              ))
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div
+      data-slot="calendar-scheduler"
+      data-view={view}
+      className={cn("grid gap-3", view === "month" && "md:grid-cols-2 xl:grid-cols-3", className)}
+      {...props}
+    >
+      {visibleDays.map((day) => {
+        const dayEvents = events.filter((event) => event.date === day)
+
+        return (
+          <section
+            key={day}
+            className="rounded-[var(--aui-card-radius,var(--radius-xl))] border border-[color:var(--aui-card-border,var(--border))] bg-card p-4 shadow-[var(--aui-card-shadow,var(--aui-control-shadow,none))]"
+          >
+            <div className="mb-3 flex items-center justify-between gap-3">
+              <div className="text-sm font-semibold text-foreground">{day}</div>
+              <div className="text-xs text-muted-foreground">{dayEvents.length} items</div>
+            </div>
+            <div className="grid gap-2">
+              {dayEvents.length === 0 ? (
+                <div className="rounded-[var(--radius-md)] border border-dashed border-[color:var(--aui-card-border,var(--border))] px-3 py-4 text-sm text-muted-foreground">
+                  {empty}
+                </div>
+              ) : (
+                dayEvents.map((event) => (
+                  <button
+                    key={event.id}
+                    type="button"
+                    className={cn(
+                      "rounded-[var(--radius-md)] border px-3 py-2.5 text-left text-sm shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40",
+                      toneClassName[event.tone ?? "default"],
+                    )}
+                    onClick={() => onEventClick?.(event)}
+                  >
+                    <div className="font-medium">{event.title}</div>
+                    {event.time && <div className="mt-1 text-xs opacity-70">{event.time}</div>}
+                    {event.durationMinutes && <div className="mt-1 text-xs opacity-70">{event.durationMinutes} min</div>}
+                  </button>
+                ))
+              )}
+            </div>
+            {onCreateEvent && (
+              <button
+                type="button"
+                className="mt-3 w-full rounded-md border border-dashed px-3 py-2 text-sm text-muted-foreground hover:bg-muted/50"
+                onClick={() => onCreateEvent(day)}
+              >
+                Create event
+              </button>
             )}
-          </div>
-          {onCreateEvent && (
-            <button type="button" className="mt-3 w-full rounded-md border border-dashed px-3 py-2 text-sm text-muted-foreground hover:bg-muted/50" onClick={() => onCreateEvent(day)}>
-              Create event
-            </button>
-          )}
-        </section>
-      ))}
+          </section>
+        )
+      })}
     </div>
-  )
-}
-
-export { CalendarScheduler }
+  )
+}
+
+export { CalendarScheduler }

package/packages/cli/vendor/src/components/modern/dual-list-picker.tsx

@@ -1,18 +1,19 @@
-"use client"
-
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-export type DualListItem = {
-  label: React.ReactNode
-  value: string
-  disabled?: boolean
-}
-
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type DualListItem = {
+  label: React.ReactNode
+  value: string
+  disabled?: boolean
+}
+
 export type DualListPickerProps = React.ComponentProps<"div"> & {
   items: DualListItem[]
   picked?: string[]
+  defaultPicked?: string[]
   onPickedChange?: (value: string[]) => void
   availableTitle?: React.ReactNode
   pickedTitle?: React.ReactNode
@@ -24,74 +25,106 @@ export type DualListPickerProps = React.ComponentProps<"div"> & {
 
 function DualListPicker({
   items,
-  picked = [],
+  picked,
+  defaultPicked = [],
   onPickedChange,
   availableTitle = "Available",
   pickedTitle = "Selected",
   searchPlaceholder = "Search items...",
-  emptyMessage = "No items.",
+  emptyMessage = "Nothing to show.",
   maxPicked,
   transferAll = true,
   className,
   ...props
 }: DualListPickerProps) {
+  const [internalPicked, setInternalPicked] = React.useState(defaultPicked)
   const [query, setQuery] = React.useState("")
-  const pickedSet = new Set(picked)
+  const currentPicked = picked ?? internalPicked
+  const pickedSet = React.useMemo(() => new Set(currentPicked), [currentPicked])
+
   const normalizedQuery = query.trim().toLowerCase()
-  const matchesQuery = (item: DualListItem) => {
-    if (!normalizedQuery) return true
-    return String(item.label).toLowerCase().includes(normalizedQuery) || item.value.toLowerCase().includes(normalizedQuery)
-  }
-  const availableItems = items.filter((item) => !pickedSet.has(item.value) && matchesQuery(item))
-  const pickedItems = items.filter((item) => pickedSet.has(item.value) && matchesQuery(item))
-  const maxReached = maxPicked !== undefined && picked.length >= maxPicked
+  const matchesQuery = React.useCallback(
+    (item: DualListItem) => {
+      if (!normalizedQuery) return true
+      const label = typeof item.label === "string" ? item.label : String(item.value)
+      return label.toLowerCase().includes(normalizedQuery) || item.value.toLowerCase().includes(normalizedQuery)
+    },
+    [normalizedQuery]
+  )
+
+  const availableItems = React.useMemo(
+    () => items.filter((item) => !pickedSet.has(item.value) && matchesQuery(item)),
+    [items, matchesQuery, pickedSet]
+  )
+  const pickedItems = React.useMemo(
+    () => items.filter((item) => pickedSet.has(item.value) && matchesQuery(item)),
+    [items, matchesQuery, pickedSet]
+  )
+  const maxReached = maxPicked !== undefined && currentPicked.length >= maxPicked
+
+  const setPickedValues = React.useCallback(
+    (next: string[]) => {
+      if (picked === undefined) {
+        setInternalPicked(next)
+      }
+      onPickedChange?.(next)
+    },
+    [onPickedChange, picked]
+  )
 
   function toggle(value: string) {
-    const isPicked = pickedSet.has(value)
-    if (!isPicked && maxReached) return
-    const next = isPicked ? picked.filter((item) => item !== value) : [...picked, value]
-    onPickedChange?.(next)
+    if (pickedSet.has(value)) {
+      setPickedValues(currentPicked.filter((item) => item !== value))
+      return
+    }
+
+    if (maxReached) return
+    setPickedValues([...currentPicked, value])
   }
 
   function addAll() {
-    const next = [...picked]
+    const next = [...currentPicked]
+
     for (const item of items) {
       if (item.disabled || pickedSet.has(item.value)) continue
       if (maxPicked !== undefined && next.length >= maxPicked) break
       next.push(item.value)
     }
-    onPickedChange?.(next)
+
+    setPickedValues(next)
   }
 
   function removeAll() {
-    onPickedChange?.([])
+    setPickedValues([])
   }
 
-  const renderColumn = (title: React.ReactNode, columnItems: DualListItem[], mode: "available" | "picked") => (
+  const renderColumn = (title: React.ReactNode, columnItems: DualListItem[]) => (
     <div className="min-h-48 rounded-lg border bg-card">
       <div className="flex items-center justify-between gap-2 border-b px-3 py-2 text-sm font-medium">
         <span>{title}</span>
         <span className="text-xs font-normal text-muted-foreground">{columnItems.length}</span>
       </div>
       <div className="grid gap-1 p-2">
-        {columnItems.length === 0 ? (
-          <div className="rounded-md border border-dashed px-3 py-6 text-center text-sm text-muted-foreground">{emptyMessage}</div>
-        ) : columnItems.map((item) => (
-          <button
-            key={item.value}
-            type="button"
-            disabled={item.disabled || (mode === "available" && maxReached)}
-            className="flex items-center justify-between rounded-md px-2 py-1.5 text-left text-sm hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:opacity-50"
-            aria-pressed={pickedSet.has(item.value)}
-            onClick={() => toggle(item.value)}
-          >
-            <span>{item.label}</span>
-            <span className="text-muted-foreground">{pickedSet.has(item.value) ? "−" : "+"}</span>
-          </button>
-        ))}
-      </div>
-    </div>
-  )
+        {columnItems.length ? (
+          columnItems.map((item) => (
+            <button
+              key={item.value}
+              type="button"
+              disabled={item.disabled}
+              aria-pressed={pickedSet.has(item.value)}
+              className="flex items-center justify-between rounded-md px-2 py-1.5 text-left text-sm transition-colors hover:bg-muted disabled:opacity-50"
+              onClick={() => toggle(item.value)}
+            >
+              <span>{item.label}</span>
+              <span className="text-muted-foreground">{pickedSet.has(item.value) ? "−" : "+"}</span>
+            </button>
+          ))
+        ) : (
+          <div className="px-2 py-3 text-sm text-muted-foreground">{emptyMessage}</div>
+        )}
+      </div>
+    </div>
+  )
 
   return (
     <div data-slot="dual-list-picker" className={cn("grid gap-3", className)} {...props}>
@@ -102,20 +135,40 @@ function DualListPicker({
           className="h-9 min-w-0 rounded-md border bg-background px-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring/40 sm:max-w-xs"
           onChange={(event) => setQuery(event.currentTarget.value)}
         />
-        {transferAll && (
-          <div className="flex gap-2">
-            <button type="button" className="rounded-md border px-3 py-1.5 text-sm disabled:opacity-50" disabled={maxReached} onClick={addAll}>Add all</button>
-            <button type="button" className="rounded-md border px-3 py-1.5 text-sm disabled:opacity-50" disabled={picked.length === 0} onClick={removeAll}>Remove all</button>
+        {transferAll ? (
+          <div className="flex flex-wrap gap-2">
+            <button
+              type="button"
+              className="rounded-md border px-3 py-1.5 text-sm disabled:opacity-50"
+              disabled={maxReached}
+              onClick={addAll}
+            >
+              Add all
+            </button>
+            <button
+              type="button"
+              className="rounded-md border px-3 py-1.5 text-sm disabled:opacity-50"
+              disabled={currentPicked.length === 0}
+              onClick={removeAll}
+            >
+              Remove all
+            </button>
           </div>
-        )}
+        ) : null}
       </div>
+
       <div className="grid gap-3 md:grid-cols-2">
-        {renderColumn(availableTitle, availableItems, "available")}
-        {renderColumn(pickedTitle, pickedItems, "picked")}
+        {renderColumn(availableTitle, availableItems)}
+        {renderColumn(pickedTitle, pickedItems)}
       </div>
-      {maxPicked !== undefined && <div className="text-xs text-muted-foreground">{picked.length} / {maxPicked} selected</div>}
+
+      {maxPicked !== undefined ? (
+        <div className="text-xs text-muted-foreground">
+          {currentPicked.length} / {maxPicked} selected
+        </div>
+      ) : null}
     </div>
   )
 }
-
-export { DualListPicker }
+
+export { DualListPicker }