tembro 2.0.4 → 2.0.6

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

@@ -20,17 +20,17 @@ import {
 
 import { createDataTableActionsColumn } from "@/components/data-table/data-table-actions-column"
 import { DataTableBulkActions, type DataTableBulkAction } from "@/components/data-table/data-table-bulk-actions"
-import { DataTableColumnVisibilityMenu } from "@/components/data-table/data-table-column-visibility-menu"
-import { DataTablePagination, type DataTablePaginationProps } from "@/components/data-table/data-table-pagination"
-import { type DataTableRowAction } from "@/components/data-table/data-table-row-actions"
-import { DataTableToolbar, type DataTableToolbarProps } from "@/components/data-table/data-table-toolbar"
-import { EmptyState, type EmptyStateProps } from "@/components/feedback/empty-state"
-import { LoadingState, type LoadingStateProps } from "@/components/feedback/loading-state"
-import { SearchInput, type SearchInputProps } from "@/components/inputs/search-input"
-import { Button } from "@/components/ui/button"
-import {
-  Table,
-  TableBody,
+import { DataTableColumnVisibilityMenu } from "@/components/data-table/data-table-column-visibility-menu"
+import { DataTablePagination, type DataTablePaginationProps } from "@/components/data-table/data-table-pagination"
+import { type DataTableRowAction } from "@/components/data-table/data-table-row-actions"
+import { DataTableToolbar, type DataTableToolbarProps } from "@/components/data-table/data-table-toolbar"
+import { DataState, type DataStateProps } from "@/components/display/data-state"
+import { LoadingState, type LoadingStateProps } from "@/components/feedback/loading-state"
+import { Button } from "@/components/ui/button"
+import { Input, type InputSearchProps } from "@/components/ui/input"
+import {
+  Table,
+  TableBody,
   TableCell,
   TableHead,
   TableHeader,
@@ -50,12 +50,12 @@ export type DataTableFeatureConfig = {
   export?: boolean
 }
 
-export type DataTableSearchConfig = Pick<
-  SearchInputProps,
-  | "value"
-  | "onValueChange"
-  | "placeholder"
-  | "inputClassName"
+export type DataTableSearchConfig = Pick<
+  InputSearchProps,
+  | "value"
+  | "onValueChange"
+  | "placeholder"
+  | "inputClassName"
   | "disabled"
   | "clearable"
   | "clearLabel"
@@ -87,28 +87,30 @@ export type DataTablePaginationConfig = Pick<
   onPageSizeChange?: (pageSize: number) => void
 }
 
-export type DataTableProps<TData, TValue = unknown> = Omit<
-  React.ComponentProps<"div">,
-  "children"
-> & {
+export type DataTableProps<TData, TValue = unknown> = Omit<
+  React.ComponentProps<"div">,
+  "children"
+> & {
   columns: ColumnDef<TData, TValue>[]
   data: TData[]
-  title?: React.ReactNode
-  description?: React.ReactNode
-  features?: DataTableFeatureConfig
-  search?: DataTableSearchConfig
-  toolbarActions?: React.ReactNode | ((context: DataTableActionContext<TData>) => React.ReactNode)
-  rowActions?: (row: Row<TData>, original: TData) => DataTableRowAction<TData>[]
+  title?: React.ReactNode
+  description?: React.ReactNode
+  features?: DataTableFeatureConfig
+  search?: DataTableSearchConfig
+  filters?: React.ReactNode | ((context: DataTableActionContext<TData>) => React.ReactNode)
+  summary?: React.ReactNode | ((context: DataTableActionContext<TData>) => React.ReactNode)
+  toolbarActions?: React.ReactNode | ((context: DataTableActionContext<TData>) => React.ReactNode)
+  rowActions?: (row: Row<TData>, original: TData) => DataTableRowAction<TData>[]
   bulkActions?: DataTableBulkAction<TData>[]
   onRefresh?: (context: DataTableActionContext<TData>) => void
-  onExport?: (context: DataTableActionContext<TData>) => void
+  onExport?: (context: DataTableActionContext<TData>) => void
   refreshLabel?: React.ReactNode
   exportLabel?: React.ReactNode
   getRowId?: (originalRow: TData, index: number, parent?: Row<TData>) => string
   isLoading?: boolean
   isError?: boolean
-  emptyState?: EmptyStateProps
-  errorState?: EmptyStateProps
+  emptyState?: Omit<DataStateProps, "status">
+  errorState?: Omit<DataStateProps, "status">
   loadingState?: LoadingStateProps
   loadingVariant?: DataTableLoadingVariant
   toolbar?: React.ReactNode | ((table: TanStackTable<TData>) => React.ReactNode)
@@ -189,11 +191,13 @@ function DataTable<TData, TValue = unknown>({
   columns,
   data,
   title,
-  description,
-  features,
-  search,
-  toolbarActions,
-  rowActions,
+  description,
+  features,
+  search,
+  filters,
+  summary,
+  toolbarActions,
+  rowActions,
   bulkActions,
   onRefresh,
   onExport,
@@ -259,11 +263,10 @@ function DataTable<TData, TValue = unknown>({
         pageSize: paginationConfig.pageSize,
       }
     : undefined
-  const manualPagination = Boolean(paginationConfig && paginationConfig.manual !== false)
-  const resolvedRowSelection = rowSelection ?? {}
-  const selectedRowCount = Object.keys(resolvedRowSelection).length
-
-  // TanStack Table returns imperative helpers that React Compiler flags by design.
+  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({
     data,
@@ -291,18 +294,21 @@ function DataTable<TData, TValue = unknown>({
     getExpandedRowModel: getExpandedRowModel(),
   })
 
-  const rows = table.getRowModel().rows
-  const selectedRows = table.getSelectedRowModel().rows.map((row) => row.original)
-  const actionContext = React.useMemo<DataTableActionContext<TData>>(
-    () => ({ table, data, selectedRows }),
-    [data, selectedRows, table]
-  )
-  const visibleColumns = table.getVisibleLeafColumns()
-  const visibleColumnCount = Math.max(visibleColumns.length, 1)
-  const resolvedToolbar = typeof toolbar === "function" ? toolbar(table) : toolbar
-  const resolvedToolbarProps = typeof toolbarProps === "function" ? toolbarProps(table) : toolbarProps
-  const shouldShowSearch = Boolean(search && features?.search !== false)
-  const shouldShowColumnVisibility = Boolean(features?.columnVisibility && table.getAllLeafColumns().some((column) => column.getCanHide()))
+  const rows = table.getRowModel().rows
+  const selectedRows = table.getSelectedRowModel().rows.map((row) => row.original)
+  const selectedRowCount = selectedRows.length
+  const actionContext = React.useMemo<DataTableActionContext<TData>>(
+    () => ({ table, data, selectedRows }),
+    [data, selectedRows, table]
+  )
+  const visibleColumns = table.getVisibleLeafColumns()
+  const visibleColumnCount = Math.max(visibleColumns.length, 1)
+  const resolvedToolbar = typeof toolbar === "function" ? toolbar(table) : toolbar
+  const resolvedToolbarProps = typeof toolbarProps === "function" ? toolbarProps(table) : toolbarProps
+  const resolvedFilters = typeof filters === "function" ? filters(actionContext) : filters
+  const resolvedSummary = typeof summary === "function" ? summary(actionContext) : summary
+  const shouldShowSearch = Boolean(search && features?.search !== false)
+  const shouldShowColumnVisibility = Boolean(features?.columnVisibility && table.getAllLeafColumns().some((column) => column.getCanHide()))
   const shouldShowRefresh = Boolean(features?.refresh && onRefresh)
   const shouldShowExport = Boolean(features?.export && onExport)
   const shouldShowBulkActions = Boolean(features?.bulkActions !== false && bulkActions?.length)
@@ -310,16 +316,19 @@ function DataTable<TData, TValue = unknown>({
     title ||
       description ||
       search ||
+      resolvedFilters ||
+      resolvedSummary ||
       toolbarActions ||
       shouldShowRefresh ||
       shouldShowExport
   )
   const shouldShowColumnVisibilityInToolbar = shouldShowColumnVisibility && hasPrimaryToolbarContent
   const defaultSearch = shouldShowSearch && search ? (
-    <SearchInput
-      value={search.value}
-      onValueChange={search.onValueChange}
-      placeholder={search.placeholder ?? "Search..."}
+    <Input
+      type="search"
+      value={search.value}
+      onValueChange={search.onValueChange}
+      placeholder={search.placeholder ?? "Search..."}
       wrapperClassName={search.wrapperClassName ?? search.className}
       inputClassName={search.inputClassName}
       disabled={search.disabled}
@@ -355,9 +364,11 @@ function DataTable<TData, TValue = unknown>({
     />
   ) : undefined
   const hasDefaultToolbarContent = Boolean(
-    title ||
-      description ||
+    title ||
+      description ||
       defaultSearch ||
+      resolvedFilters ||
+      resolvedSummary ||
       toolbarActions ||
       shouldShowColumnVisibilityInToolbar ||
       shouldShowRefresh ||
@@ -400,26 +411,28 @@ function DataTable<TData, TValue = unknown>({
       </TableRow>
     ))
 
-  const stateContent = shouldRenderSkeleton ? null : isLoading ? (
-    <LoadingState label="Loading data..." {...loadingState} />
-  ) : isError ? (
-    <EmptyState title="Could not load data" description="Please try again." {...errorState} />
-  ) : rows.length === 0 ? (
-    <EmptyState {...emptyState} />
-  ) : null
+  const stateContent = shouldRenderSkeleton ? null : isLoading ? (
+    <LoadingState label="Loading data..." {...loadingState} />
+  ) : isError ? (
+    <DataState status="error" title="Could not load data" description="Please try again." variant="plain" {...errorState} />
+  ) : rows.length === 0 ? (
+    <DataState status="empty" variant="plain" {...emptyState} />
+  ) : null
 
   return (
     <div data-slot="data-table" className={cn("grid gap-3", className)} {...props}>
       {hasToolbar &&
         (resolvedToolbar ?? (
-          <DataTableToolbar
-            title={title}
-            description={description}
-            search={defaultSearch}
-            actions={defaultActions}
-            selectionActions={defaultSelectionActions}
-            selectedCount={selectedRowCount}
-            totalCount={paginationConfig ? paginationConfig.rowCount ?? data.length : data.length}
+          <DataTableToolbar
+            title={title}
+            description={description}
+            search={defaultSearch}
+            filters={resolvedFilters}
+            summary={resolvedSummary}
+            actions={defaultActions}
+            selectionActions={defaultSelectionActions}
+            selectedCount={selectedRowCount}
+            totalCount={paginationConfig ? paginationConfig.rowCount ?? data.length : data.length}
             variant="plain"
             {...resolvedToolbarProps}
           />

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

@@ -1,13 +1,3 @@
-import { component, createShowcaseDemoRegistry } from "@/showcase/create-demo"
+import { createShowcaseDemoRegistry } from "@/showcase/create-demo"
 
-export const dataTableShowcaseDemoRegistry = createShowcaseDemoRegistry([
-  component("data-table-pagination", "DataTablePagination", "data-table", "Pagination control used by DataTable pages."),
-  component("data-table-toolbar", "DataTableToolbar", "data-table", "Toolbar surface for DataTable search, filters and actions."),
-  component("data-table-column-visibility-menu", "DataTableColumnVisibilityMenu", "data-table", "Column visibility menu pattern for table views."),
-  component("data-table-select-column", "DataTableSelectColumn", "data-table", "Selection column pattern for bulk table workflows."),
-  component("data-table-sortable-header", "DataTableSortableHeader", "data-table", "Sortable header trigger with clear visual state."),
-  component("data-table-row-actions", "DataTableRowActions", "data-table", "Row action menu for inspect, duplicate and archive operations."),
-  component("data-table-actions-column", "DataTableActionsColumn", "data-table", "Reusable actions column for DataTable definitions."),
-  component("data-table-bulk-actions", "DataTableBulkActions", "data-table", "Bulk action bar for selected rows."),
-  component("data-table-view-presets", "DataTableViewPresets", "data-table", "Saved table view presets for operational dashboards."),
-])
+export const dataTableShowcaseDemoRegistry = createShowcaseDemoRegistry([])

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

@@ -1,11 +1,6 @@
 export * from "./data-table"
-export * from "./data-table-actions-column"
+export * from "./data-table-pagination"
 export * from "./data-table-bulk-actions"
 export * from "./data-table-column-visibility-menu"
-export * from "./data-table-pagination"
-export * from "./data-table-row-actions"
-export * from "./data-table-select-column"
 export * from "./data-table-sortable-header"
-export * from "./data-table-toolbar"
 export * from "./data-table-view-presets"
-export * from "./data-table-saved-filters"

package/packages/cli/vendor/src/components/display/activity-feed.tsx

@@ -3,28 +3,39 @@ import * as React from "react"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { cn } from "@/lib/utils"
 
-export type ActivityFeedItem = {
+export type ActivityFeedItem = {
   id: string
   title: React.ReactNode
   description?: React.ReactNode
   time?: React.ReactNode
   icon?: React.ReactNode
   tone?: "default" | "success" | "warning" | "danger" | "info" | "muted"
-  actions?: React.ReactNode
-  hidden?: boolean
-  className?: string
-}
+  actions?: React.ReactNode
+  meta?: React.ReactNode
+  badge?: React.ReactNode
+  unread?: boolean
+  hidden?: boolean
+  interactive?: boolean
+  href?: string
+  target?: React.ComponentProps<"a">["target"]
+  rel?: React.ComponentProps<"a">["rel"]
+  onSelect?: () => void
+  className?: string
+}
 
-export type ActivityFeedProps = React.ComponentProps<typeof Card> & {
+export type ActivityFeedProps = React.ComponentProps<typeof Card> & {
   title?: React.ReactNode
   description?: React.ReactNode
   actions?: React.ReactNode
   items: ActivityFeedItem[]
   empty?: React.ReactNode
-  compact?: boolean
-  contentClassName?: string
-  itemClassName?: string
-}
+  compact?: boolean
+  density?: "comfortable" | "compact"
+  showConnector?: boolean
+  connectorClassName?: string
+  contentClassName?: string
+  itemClassName?: string
+}
 
 const toneDotClassName: Record<NonNullable<ActivityFeedItem["tone"]>, string> = {
   default: "bg-primary",
@@ -41,14 +52,18 @@ function ActivityFeed({
   description,
   actions,
   items,
-  empty = "No activity yet.",
-  compact = false,
-  contentClassName,
-  itemClassName,
-  ...props
-}: ActivityFeedProps) {
-  const visibleItems = items.filter((item) => !item.hidden)
-  const hasHeader = Boolean(title || description || actions)
+  empty = "No activity yet.",
+  compact = false,
+  density,
+  showConnector = true,
+  connectorClassName,
+  contentClassName,
+  itemClassName,
+  ...props
+}: ActivityFeedProps) {
+  const visibleItems = items.filter((item) => !item.hidden)
+  const hasHeader = Boolean(title || description || actions)
+  const isCompact = density ? density === "compact" : compact
 
   return (
     <Card data-slot="activity-feed" className={cn("min-w-0", className)} {...props}>
@@ -68,28 +83,71 @@ function ActivityFeed({
         {visibleItems.length === 0 ? (
           <div className="rounded-lg border border-dashed p-4 text-center text-sm text-muted-foreground">{empty}</div>
         ) : (
-          visibleItems.map((item, index) => (
-            <div
-              key={item.id}
-              data-slot="activity-feed-item"
-              className={cn("relative flex gap-3 pb-4 last:pb-0", compact && "gap-2 pb-3", itemClassName, item.className)}
-            >
-              {index < visibleItems.length - 1 && <div className="absolute left-3 top-7 h-[calc(100%-1.75rem)] w-px bg-border" />}
-              <div className="relative z-10 mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full border bg-background">
-                {item.icon ?? <span className={cn("size-2 rounded-full", toneDotClassName[item.tone ?? "default"])} />}
-              </div>
-              <div className="min-w-0 flex-1 space-y-1">
-                <div className="flex min-w-0 items-start justify-between gap-2">
-                  <div className="min-w-0 text-sm font-medium leading-5 text-foreground">{item.title}</div>
-                  {item.time && <div className="shrink-0 text-xs text-muted-foreground">{item.time}</div>}
-                </div>
-                {item.description && <div className="text-sm leading-5 text-muted-foreground">{item.description}</div>}
-                {item.actions && <div className="pt-1">{item.actions}</div>}
-              </div>
-            </div>
-          ))
-        )}
-      </CardContent>
+          visibleItems.map((item, index) => {
+            const isInteractive = item.interactive ?? Boolean(item.href || item.onSelect)
+            const content = (
+              <>
+                <div className={cn(
+                  "relative z-10 mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full border bg-background",
+                  item.unread && "border-primary/45 bg-primary/8 shadow-[0_0_0_3px_color-mix(in_oklch,var(--primary),transparent_88%)]"
+                )}>
+                  {item.icon ?? <span className={cn("size-2 rounded-full", toneDotClassName[item.tone ?? "default"])} />}
+                </div>
+                <div className="min-w-0 flex-1 space-y-1">
+                  <div className="flex min-w-0 items-start justify-between gap-2">
+                    <div className="min-w-0 space-y-1">
+                      <div className="min-w-0 text-sm font-medium leading-5 text-foreground">{item.title}</div>
+                      {item.meta && <div className="text-xs text-muted-foreground">{item.meta}</div>}
+                    </div>
+                    <div className="flex shrink-0 items-center gap-2">
+                      {item.badge}
+                      {item.time && <div className="text-xs text-muted-foreground">{item.time}</div>}
+                    </div>
+                  </div>
+                  {item.description && <div className="text-sm leading-5 text-muted-foreground">{item.description}</div>}
+                  {item.actions && <div className="pt-1">{item.actions}</div>}
+                </div>
+              </>
+            )
+
+            return (
+            <div
+              key={item.id}
+              data-slot="activity-feed-item"
+              className={cn("relative flex gap-3 pb-4 last:pb-0", isCompact && "gap-2 pb-3", itemClassName, item.className)}
+            >
+              {showConnector && index < visibleItems.length - 1 && (
+                <div className={cn("absolute left-3 top-7 h-[calc(100%-1.75rem)] w-px bg-border", connectorClassName)} />
+              )}
+              {item.href ? (
+                <a
+                  href={item.href}
+                  target={item.target}
+                  rel={item.rel}
+                  className={cn(
+                    "flex min-w-0 flex-1 gap-3 rounded-[var(--radius-lg)] px-2 py-1.5 transition-[background-color,border-color,box-shadow]",
+                    isInteractive && "hover:bg-muted/35 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
+                  )}
+                >
+                  {content}
+                </a>
+              ) : isInteractive ? (
+                <button
+                  type="button"
+                  className="flex min-w-0 flex-1 gap-3 rounded-[var(--radius-lg)] px-2 py-1.5 text-left transition-[background-color,border-color,box-shadow] hover:bg-muted/35 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
+                  onClick={item.onSelect}
+                >
+                  {content}
+                </button>
+              ) : (
+                <div className="flex min-w-0 flex-1 gap-3 px-2 py-1.5">
+                  {content}
+                </div>
+              )}
+            </div>
+          )})
+        )}
+      </CardContent>
     </Card>
   )
 }

package/packages/cli/vendor/src/components/display/carousel.tsx

@@ -16,6 +16,21 @@ export type CarouselProps = React.ComponentProps<"div"> & {
   ariaLabel?: string
   previousLabel?: string
   nextLabel?: string
+  swipeThreshold?: number
+  autoplay?: boolean
+  autoplayInterval?: number
+  pauseOnHover?: boolean
+  stopAutoplayOnInteraction?: boolean
+  showPlaybackControl?: boolean
+  playLabel?: string
+  pauseLabel?: string
+  onAutoplayChange?: (playing: boolean) => void
+  viewportClassName?: string
+  controlsClassName?: string
+  dotsClassName?: string
+  arrowClassName?: string
+  dotClassName?: string
+  activeDotClassName?: string
 }
 
 export type CarouselItemProps = React.ComponentProps<"div">
@@ -38,24 +53,86 @@ function Carousel({
   ariaLabel = "Carousel",
   previousLabel = "Previous slide",
   nextLabel = "Next slide",
+  swipeThreshold = 44,
+  autoplay = false,
+  autoplayInterval = 4500,
+  pauseOnHover = true,
+  stopAutoplayOnInteraction = true,
+  showPlaybackControl = false,
+  playLabel = "Start autoplay",
+  pauseLabel = "Pause autoplay",
+  onAutoplayChange,
+  viewportClassName,
+  controlsClassName,
+  dotsClassName,
+  arrowClassName,
+  dotClassName,
+  activeDotClassName,
   className,
   children,
   ...props
 }: CarouselProps) {
   const items = React.Children.toArray(children)
   const [internalIndex, setInternalIndex] = React.useState(defaultIndex)
+  const touchStartXRef = React.useRef<number | null>(null)
+  const [isHovered, setIsHovered] = React.useState(false)
+  const [autoplayStopped, setAutoplayStopped] = React.useState(false)
+  const [autoplayEnabled, setAutoplayEnabled] = React.useState(autoplay)
   const controlled = index !== undefined
   const activeIndex = clampIndex(controlled ? index : internalIndex, items.length, loop)
 
-  function setActiveIndex(nextIndex: number) {
+  React.useEffect(() => {
+    setAutoplayEnabled(autoplay)
+  }, [autoplay])
+
+  function setActiveIndex(nextIndex: number, reason: "manual" | "autoplay" = "manual") {
     const resolvedIndex = clampIndex(nextIndex, items.length, loop)
     if (!controlled) setInternalIndex(resolvedIndex)
+    if (reason === "manual" && stopAutoplayOnInteraction) {
+      setAutoplayStopped(true)
+      if (autoplayEnabled) {
+        setAutoplayEnabled(false)
+        onAutoplayChange?.(false)
+      }
+    }
     onIndexChange?.(resolvedIndex)
   }
 
   const canGoPrevious = loop || activeIndex > 0
   const canGoNext = loop || activeIndex < items.length - 1
 
+  const handleTouchStart: React.TouchEventHandler<HTMLDivElement> = (event) => {
+    touchStartXRef.current = event.touches[0]?.clientX ?? null
+  }
+
+  const handleTouchEnd: React.TouchEventHandler<HTMLDivElement> = (event) => {
+    if (touchStartXRef.current == null || items.length <= 1) return
+    const endX = event.changedTouches[0]?.clientX ?? touchStartXRef.current
+    const deltaX = endX - touchStartXRef.current
+    touchStartXRef.current = null
+
+    if (Math.abs(deltaX) < swipeThreshold) return
+    if (deltaX > 0 && canGoPrevious) setActiveIndex(activeIndex - 1)
+    if (deltaX < 0 && canGoNext) setActiveIndex(activeIndex + 1)
+  }
+
+  React.useEffect(() => {
+    if (!autoplayEnabled || items.length <= 1 || autoplayStopped) return
+    if (pauseOnHover && isHovered) return
+
+    const timer = window.setInterval(() => {
+      if (!loop && activeIndex >= items.length - 1) {
+        setActiveIndex(0, "autoplay")
+        return
+      }
+      setActiveIndex(activeIndex + 1, "autoplay")
+    }, autoplayInterval)
+
+    return () => {
+      window.clearInterval(timer)
+    }
+  }, [activeIndex, autoplayEnabled, autoplayInterval, autoplayStopped, isHovered, items.length, loop, pauseOnHover])
+
   return (
     <div
       data-slot="carousel"
@@ -63,6 +140,7 @@ function Carousel({
       role="region"
       aria-roledescription="carousel"
       aria-label={ariaLabel}
+      tabIndex={keyboard ? 0 : undefined}
       className={cn("grid gap-3", className)}
       onKeyDown={(event) => {
         if (!keyboard || items.length <= 1) return
@@ -75,13 +153,17 @@ function Carousel({
           setActiveIndex(activeIndex + 1)
         }
       }}
+      onTouchStart={handleTouchStart}
+      onTouchEnd={handleTouchEnd}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
       {...props}
     >
       <div className={cn(
         "relative overflow-hidden rounded-[var(--aui-card-radius,var(--radius-lg))] border border-[color:var(--aui-card-border,var(--border))] bg-card shadow-[var(--aui-card-shadow,0_12px_32px_rgba(15,23,42,0.08))]",
         variant === "hero" && "min-h-72",
         variant === "minimal" && "rounded-[var(--radius-md)] shadow-none"
-      )}>
+      , viewportClassName)}>
         <div className="transition-transform duration-300 ease-out" aria-live="polite">
           {items[activeIndex]}
         </div>
@@ -91,7 +173,7 @@ function Carousel({
               type="button"
               variant={variant === "hero" ? "default" : "secondary"}
               size="icon-sm"
-              className="absolute left-3 top-1/2 -translate-y-1/2 rounded-full shadow-lg"
+              className={cn("absolute left-3 top-1/2 -translate-y-1/2 rounded-full shadow-lg", arrowClassName)}
               disabled={!canGoPrevious}
               aria-label={previousLabel}
               onClick={() => setActiveIndex(activeIndex - 1)}
@@ -102,7 +184,7 @@ function Carousel({
               type="button"
               variant={variant === "hero" ? "default" : "secondary"}
               size="icon-sm"
-              className="absolute right-3 top-1/2 -translate-y-1/2 rounded-full shadow-lg"
+              className={cn("absolute right-3 top-1/2 -translate-y-1/2 rounded-full shadow-lg", arrowClassName)}
               disabled={!canGoNext}
               aria-label={nextLabel}
               onClick={() => setActiveIndex(activeIndex + 1)}
@@ -113,7 +195,7 @@ function Carousel({
         ) : null}
       </div>
       {showDots && items.length > 1 && (
-        <div className="flex items-center justify-center gap-2" role="tablist" aria-label={`${ariaLabel} slides`}>
+        <div className={cn("flex flex-wrap items-center justify-center gap-2", dotsClassName)} role="tablist" aria-label={`${ariaLabel} slides`}>
           {items.map((_, itemIndex) => (
             <button
               key={itemIndex}
@@ -123,11 +205,27 @@ function Carousel({
               aria-selected={itemIndex === activeIndex}
               className={cn(
                 "h-2.5 rounded-full bg-muted-foreground/30 transition-[width,background-color,opacity] hover:bg-muted-foreground/55",
-                itemIndex === activeIndex ? "w-7 bg-primary" : "w-2.5"
+                itemIndex === activeIndex ? cn("w-7 bg-primary", activeDotClassName) : cn("w-2.5", dotClassName)
               )}
               onClick={() => setActiveIndex(itemIndex)}
             />
           ))}
+          {showPlaybackControl ? (
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className={cn("ml-2 rounded-full", controlsClassName)}
+              onClick={() => {
+                const nextPlaying = !autoplayEnabled
+                setAutoplayStopped(false)
+                setAutoplayEnabled(nextPlaying)
+                onAutoplayChange?.(nextPlaying)
+              }}
+            >
+              {autoplayEnabled ? pauseLabel : playLabel}
+            </Button>
+          ) : null}
         </div>
       )}
     </div>