tembro 2.0.4 → 2.0.5

package/packages/cli/vendor/src/components/display/data-state.tsx

@@ -1,75 +1,144 @@
 import * as React from "react"
-import { AlertTriangleIcon, CheckCircle2Icon, Loader2Icon, SearchXIcon } from "lucide-react"
+import { AlertTriangleIcon, CheckCircle2Icon, Loader2Icon, SearchXIcon, XIcon } from "lucide-react"
 
 import { Button } from "@/components/ui/button"
 import { Card, CardContent } from "@/components/ui/card"
 import { cn } from "@/lib/utils"
 
-export type DataStateStatus = "idle" | "loading" | "empty" | "error" | "success"
+export type DataStateStatus = "idle" | "loading" | "empty" | "error" | "success"
+export type DataStateVariant = "card" | "plain" | "inline"
+export type DataStateTone = "default" | "muted" | "success" | "warning" | "danger" | "info"
 
-export type DataStateProps = React.ComponentProps<typeof Card> & {
-  status: DataStateStatus
-  title?: React.ReactNode
-  description?: React.ReactNode
-  actions?: React.ReactNode
-  icon?: React.ReactNode
-  compact?: boolean
-  children?: React.ReactNode
-  retryLabel?: React.ReactNode
-  onRetry?: () => void
-}
+export type DataStateProps = Omit<React.ComponentProps<typeof Card>, "content" | "title" | "description" | "variant" | "tone"> & {
+  status: DataStateStatus
+  title?: React.ReactNode
+  description?: React.ReactNode
+  badge?: React.ReactNode
+  actions?: React.ReactNode
+  footer?: React.ReactNode
+  icon?: React.ReactNode
+  tone?: DataStateTone
+  variant?: DataStateVariant
+  compact?: boolean
+  align?: "start" | "center"
+  query?: React.ReactNode
+  children?: React.ReactNode
+  retryLabel?: React.ReactNode
+  onRetry?: () => void
+  clearLabel?: React.ReactNode
+  onClear?: () => void
+}
 
-const defaultContent: Record<DataStateStatus, { title: string; description: string; icon: React.ReactNode }> = {
+const defaultContent: Record<DataStateStatus, { title: string; description: string; icon: React.ReactNode }> = {
   idle: { title: "Ready", description: "No action has started yet.", icon: <CheckCircle2Icon /> },
   loading: { title: "Loading", description: "Please wait while data is being prepared.", icon: <Loader2Icon className="animate-spin" /> },
   empty: { title: "No data", description: "There is nothing to show yet.", icon: <SearchXIcon /> },
   error: { title: "Something went wrong", description: "Try again or check the request.", icon: <AlertTriangleIcon /> },
   success: { title: "Ready", description: "Data loaded successfully.", icon: <CheckCircle2Icon /> },
-}
+}
+
+const toneClassName: Record<DataStateTone, string> = {
+  default: "text-muted-foreground",
+  muted: "text-muted-foreground",
+  success: "text-emerald-600 dark:text-emerald-400",
+  warning: "text-amber-600 dark:text-amber-400",
+  danger: "text-destructive",
+  info: "text-blue-600 dark:text-blue-400",
+}
 
 function DataState({
   status,
-  title,
-  description,
-  actions,
-  icon,
-  compact = false,
-  children,
-  retryLabel = "Retry",
-  onRetry,
-  className,
-  ...props
-}: DataStateProps) {
-  const content = defaultContent[status]
-
+  title,
+  description,
+  badge,
+  actions,
+  footer,
+  icon,
+  tone,
+  variant = "card",
+  compact = false,
+  align = "center",
+  query,
+  children,
+  retryLabel = "Retry",
+  onRetry,
+  clearLabel = "Clear",
+  onClear,
+  className,
+  ...props
+}: DataStateProps) {
+  const content = defaultContent[status]
+  const resolvedTone = tone ?? (status === "error" ? "danger" : status === "success" ? "success" : "default")
+  const isPlain = variant === "plain" || variant === "inline"
+  const body = (
+    <div
+      className={cn(
+        "flex flex-col justify-center",
+        align === "center" ? "items-center text-center" : "items-start text-left",
+        compact || variant === "inline" ? "p-4" : "min-h-52 p-8"
+      )}
+    >
+      <div
+        className={cn(
+          "mb-3 flex items-center justify-center rounded-full border border-border/70 bg-muted/45 shadow-[0_1px_0_rgba(255,255,255,0.05)] [&_svg]:size-5",
+          toneClassName[resolvedTone],
+          compact || variant === "inline" ? "size-9" : "size-12"
+        )}
+      >
+        {icon ?? content.icon}
+      </div>
+      <div className={cn("flex flex-wrap items-center gap-2", align === "center" ? "justify-center" : "justify-start")}>
+        <div className={cn("font-semibold tracking-tight text-foreground", compact ? "text-sm" : "text-base")}>{title ?? content.title}</div>
+        {badge}
+      </div>
+      <p className="mt-1 max-w-md text-sm text-muted-foreground">{description ?? content.description}</p>
+      {query && (
+        <div className="mt-3 max-w-full rounded-md border border-border/70 bg-muted/45 px-2.5 py-1 text-sm text-muted-foreground">
+          {query}
+        </div>
+      )}
+      {children && <div className="mt-4 w-full">{children}</div>}
+      {(actions || onRetry || onClear) && (
+        <div className={cn("mt-4 flex flex-wrap gap-2", align === "center" ? "justify-center" : "justify-start")}>
+          {onRetry && <Button size="sm" variant={status === "error" ? "default" : "outline"} onClick={onRetry}>{retryLabel}</Button>}
+          {onClear && (
+            <Button size="sm" variant="ghost" onClick={onClear}>
+              <XIcon data-icon="inline-start" />
+              {clearLabel}
+            </Button>
+          )}
+          {actions}
+        </div>
+      )}
+      {footer ? <div className="mt-4 w-full">{footer}</div> : null}
+    </div>
+  )
+
+  if (isPlain) {
+    return (
+      <div
+        data-slot="data-state"
+        data-status={status}
+        data-variant={variant}
+        className={cn(variant === "inline" ? "rounded-lg border border-border/70 bg-muted/20" : "min-w-0", className)}
+        {...props}
+      >
+        {body}
+      </div>
+    )
+  }
+
   return (
     <Card
       data-slot="data-state"
       data-status={status}
+      data-variant={variant}
       className={cn("min-w-0 border-border/75 bg-card/96 shadow-sm ring-1 ring-foreground/4", className)}
       {...props}
     >
-      <CardContent className={cn("flex flex-col items-center justify-center text-center", compact ? "p-4" : "min-h-52 p-8")}>
-        <div
-          className={cn(
-            "mb-3 flex items-center justify-center rounded-full border border-border/70 bg-muted/45 text-muted-foreground shadow-[0_1px_0_rgba(255,255,255,0.05)] [&_svg]:size-5",
-            compact ? "size-9" : "size-12"
-          )}
-        >
-          {icon ?? content.icon}
-        </div>
-        <div className={cn("font-semibold tracking-tight text-foreground", compact ? "text-sm" : "text-base")}>{title ?? content.title}</div>
-        <p className="mt-1 max-w-md text-sm text-muted-foreground">{description ?? content.description}</p>
-        {children && <div className="mt-4 w-full">{children}</div>}
-        {(actions || onRetry) && (
-          <div className="mt-4 flex flex-wrap justify-center gap-2">
-            {onRetry && <Button size="sm" variant={status === "error" ? "default" : "outline"} onClick={onRetry}>{retryLabel}</Button>}
-            {actions}
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  )
-}
+      <CardContent className="p-0">{body}</CardContent>
+    </Card>
+  )
+}
 
 export { DataState }

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

@@ -8,12 +8,8 @@ export const displayShowcaseDemoRegistry = createShowcaseDemoRegistry([
   component("status-dot", "StatusDot", "display", "Tiny live status indicator with optional pulse animation."),
   component("user-card", "UserCard", "display", "User summary row with avatar, metadata and actions."),
   component("delta-badge", "DeltaBadge", "display", "Compact positive, negative, and risk deltas for metric summaries."),
-  component("entity-header", "EntityHeader", "display", "Top summary row for a customer, invoice, or workspace."),
   component("notification-center", "NotificationCenter", "display", "Compact activity and notifications stream."),
-  component("entity-card", "EntityCard", "display", "Structured summary card with title, meta, state and actions."),
-  component("file-card", "FileCard", "display", "Compact file summary with state and actions."),
   component("data-list", "DataList", "display", "Readable title and description rows for compact operational lists."),
   component("status-legend", "StatusLegend", "display", "Explain status meaning and counts in a compact legend."),
   component("trend-card", "TrendCard", "display", "Metric summary card with trend context."),
-  component("comparison-card", "ComparisonCard", "display", "Compare current and previous values in one compact card."),
 ])

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

@@ -2,13 +2,10 @@ export * from "./description-list"
 export * from "./data-list"
 export * from "./activity-feed"
 export * from "./avatar"
-export * from "./entity-header"
 export * from "./descriptions"
 export * from "./kanban"
 export * from "./code-block"
 export * from "./data-state"
-export * from "./entity-card"
-export * from "./file-card"
 export * from "./list"
 export * from "./metric-grid"
 export * from "./progress"

package/packages/cli/vendor/src/components/feedback/alert.tsx

@@ -5,21 +5,46 @@ import { cn } from "@/lib/utils"
 
 export type AlertTone = "info" | "success" | "warning" | "destructive" | "muted"
 
-export type AlertProps = React.ComponentProps<"div"> & {
-  tone?: AlertTone
-  title?: React.ReactNode
-  description?: React.ReactNode
-  icon?: React.ReactNode
-  action?: React.ReactNode
-}
-
-const alertToneClassName: Record<AlertTone, string> = {
-  info: "border-primary/25 bg-primary/5 text-foreground",
-  success: "border-emerald-500/25 bg-emerald-500/10 text-foreground",
-  warning: "border-amber-500/30 bg-amber-500/10 text-foreground",
-  destructive: "border-destructive/30 bg-destructive/10 text-foreground",
-  muted: "border-border bg-muted/50 text-foreground",
-}
+export type AlertProps = React.ComponentProps<"div"> & {
+  tone?: AlertTone
+  variant?: "soft" | "outline" | "solid"
+  size?: "sm" | "md"
+  title?: React.ReactNode
+  description?: React.ReactNode
+  icon?: React.ReactNode
+  action?: React.ReactNode
+  dismissible?: boolean
+  dismissLabel?: string
+  onDismiss?: () => void
+}
+
+const alertToneClassName: Record<AlertTone, Record<NonNullable<AlertProps["variant"]>, string>> = {
+  info: {
+    soft: "border-primary/25 bg-primary/5 text-foreground",
+    outline: "border-primary/35 bg-background text-foreground",
+    solid: "border-primary bg-primary text-primary-foreground",
+  },
+  success: {
+    soft: "border-emerald-500/25 bg-emerald-500/10 text-foreground",
+    outline: "border-emerald-500/35 bg-background text-foreground",
+    solid: "border-emerald-600 bg-emerald-600 text-white",
+  },
+  warning: {
+    soft: "border-amber-500/30 bg-amber-500/10 text-foreground",
+    outline: "border-amber-500/35 bg-background text-foreground",
+    solid: "border-amber-500 bg-amber-500 text-amber-950",
+  },
+  destructive: {
+    soft: "border-destructive/30 bg-destructive/10 text-foreground",
+    outline: "border-destructive/35 bg-background text-foreground",
+    solid: "border-destructive bg-destructive text-destructive-foreground",
+  },
+  muted: {
+    soft: "border-border bg-muted/50 text-foreground",
+    outline: "border-border bg-background text-foreground",
+    solid: "border-border bg-foreground text-background",
+  },
+}
 
 const alertIconClassName: Record<AlertTone, string> = {
   info: "text-primary",
@@ -42,14 +67,29 @@ function defaultIcon(tone: AlertTone) {
   }
 }
 
-function Alert({ tone = "info", title, description, icon, action, className, children, ...props }: AlertProps) {
+function Alert({
+  tone = "info",
+  variant = "soft",
+  size = "md",
+  title,
+  description,
+  icon,
+  action,
+  dismissible = false,
+  dismissLabel = "Dismiss alert",
+  onDismiss,
+  className,
+  children,
+  ...props
+}: AlertProps) {
   return (
     <div
       data-slot="alert"
+      data-size={size}
       role={tone === "destructive" || tone === "warning" ? "alert" : "status"}
       className={cn(
-        "flex gap-3 rounded-[var(--radius-2xl)] border p-4 text-sm shadow-[0_1px_0_rgba(255,255,255,0.05)]",
-        alertToneClassName[tone],
+        "flex gap-3 rounded-[var(--aui-card-radius,var(--radius-xl))] border p-4 text-sm shadow-[var(--aui-card-shadow,var(--aui-control-shadow,0_1px_0_rgba(255,255,255,0.05)))] data-[size=sm]:p-3",
+        alertToneClassName[tone][variant],
         className
       )}
       {...props}
@@ -58,22 +98,40 @@ function Alert({ tone = "info", title, description, icon, action, className, chi
         data-slot="alert-icon"
         className={cn(
           "mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-full border border-current/10 bg-background/55",
+          variant === "solid" && "bg-white/12 text-current",
           alertIconClassName[tone]
         )}
       >
         {icon ?? defaultIcon(tone)}
       </div>
       <div className="min-w-0 flex-1 space-y-1">
-        {title && <div data-slot="alert-title" className="font-medium leading-none">{title}</div>}
-        {(description || children) && (
-          <div data-slot="alert-description" className="text-muted-foreground">
-            {description ?? children}
-          </div>
-        )}
+        {title && <div data-slot="alert-title" className="font-medium leading-none">{title}</div>}
+        {(description || children) && (
+          <div data-slot="alert-description" className={cn("text-muted-foreground", variant === "solid" && "text-current/88")}>
+            {description ?? children}
+          </div>
+        )}
       </div>
-      {action && <div data-slot="alert-action" className="shrink-0">{action}</div>}
-    </div>
-  )
-}
+      {(action || dismissible) ? (
+        <div data-slot="alert-action" className="flex shrink-0 items-start gap-2">
+          {action}
+          {dismissible ? (
+            <button
+              type="button"
+              aria-label={dismissLabel}
+              className={cn(
+                "inline-flex size-8 items-center justify-center rounded-full border border-current/10 bg-background/45 text-current transition-opacity hover:opacity-90",
+                variant === "solid" && "bg-white/12"
+              )}
+              onClick={onDismiss}
+            >
+              <span aria-hidden="true">×</span>
+            </button>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  )
+}
 
 export { Alert }

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

@@ -1,5 +1,3 @@
 export * from "./alert"
-export * from "./empty-state"
 export * from "./loading-state"
 export * from "./page-state"
-export * from "./empty-search-state"

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

@@ -2,6 +2,5 @@ import { component, createShowcaseDemoRegistry } from "@/showcase/create-demo"
 
 export const filtersShowcaseDemoRegistry = createShowcaseDemoRegistry([
   component("filter-bar", "FilterBar", "actions", "Search, filters, active-count and reset actions in one toolbar."),
-  component("filter-chips", "FilterChips", "actions", "Inline active filter summaries with clear and remove actions."),
   component("data-table-saved-filters", "SavedFilterSelect", "actions", "Saved filter chips and quick view controls."),
 ])

package/packages/cli/vendor/src/components/filters/filter-bar.tsx

@@ -1,40 +1,77 @@
 import * as React from "react"
-import { SlidersHorizontalIcon, XIcon } from "lucide-react"
+import { SlidersHorizontalIcon, XIcon } from "lucide-react"
+
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { cn, stopInteractivePropagation } from "@/lib/utils"
+
+export type FilterBarChip = {
+  key: string
+  label: React.ReactNode
+  value?: React.ReactNode
+  tone?: "default" | "success" | "warning" | "danger" | "info" | "muted"
+  disabled?: boolean
+  hidden?: boolean
+}
 
-import { Button } from "@/components/ui/button"
-import { cn } from "@/lib/utils"
-
-export type FilterBarProps = React.ComponentProps<"div"> & {
+export type FilterBarProps = React.ComponentProps<"div"> & {
   search?: React.ReactNode
   filters?: React.ReactNode
-  actions?: React.ReactNode
-  activeCount?: number
-  activeLabel?: (count: number) => React.ReactNode
-  resetLabel?: React.ReactNode
-  onReset?: () => void
-  collapsible?: boolean
-  defaultExpanded?: boolean
-}
+  actions?: React.ReactNode
+  chips?: FilterBarChip[]
+  activeCount?: number
+  activeLabel?: (count: number) => React.ReactNode
+  resetLabel?: React.ReactNode
+  clearChipLabel?: React.ReactNode
+  onReset?: () => void
+  onRemoveChip?: (key: string) => void
+  collapsible?: boolean
+  defaultExpanded?: boolean
+  emptyChips?: React.ReactNode
+  chipLimit?: number
+  chipOverflowLabel?: (hiddenCount: number) => React.ReactNode
+}
+
+const chipVariant: Record<NonNullable<FilterBarChip["tone"]>, React.ComponentProps<typeof Badge>["variant"]> = {
+  default: "secondary",
+  success: "secondary",
+  warning: "outline",
+  danger: "destructive",
+  info: "outline",
+  muted: "outline",
+}
 
 function FilterBar({
   className,
-  search,
-  filters,
-  actions,
-  activeCount = 0,
-  activeLabel = (count) => `${count} active`,
-  resetLabel = "Reset",
-  onReset,
-  collapsible = false,
-  defaultExpanded = false,
-  children,
-  ...props
-}: FilterBarProps) {
-  const [expanded, setExpanded] = React.useState(defaultExpanded)
-  const hasFilters = Boolean(filters || children)
-  const shouldShowFilters = !collapsible || expanded
-
-  return (
+  search,
+  filters,
+  actions,
+  chips,
+  activeCount,
+  activeLabel = (count) => `${count} active`,
+  resetLabel = "Reset",
+  clearChipLabel,
+  onReset,
+  onRemoveChip,
+  collapsible = false,
+  defaultExpanded = false,
+  emptyChips,
+  chipLimit,
+  chipOverflowLabel = (hiddenCount) => `+${hiddenCount} more`,
+  children,
+  ...props
+}: FilterBarProps) {
+  const [expanded, setExpanded] = React.useState(defaultExpanded)
+  const visibleChips = chips?.filter((chip) => !chip.hidden) ?? []
+  const renderedChips = chipLimit && chipLimit > 0 ? visibleChips.slice(0, chipLimit) : visibleChips
+  const hiddenChipCount = Math.max(visibleChips.length - renderedChips.length, 0)
+  const resolvedActiveCount = activeCount ?? visibleChips.length
+  const hasFilters = Boolean(filters || children)
+  const hasChips = Boolean(chips)
+  const shouldShowFilters = !collapsible || expanded
+  const shouldShowChipRow = visibleChips.length > 0 || (hasChips && emptyChips)
+
+  return (
     <div
       data-slot="filter-bar"
       className={cn("flex flex-col gap-3 rounded-lg border bg-card p-3", className)}
@@ -51,25 +88,25 @@ function FilterBar({
               size="sm"
               onClick={() => setExpanded((value) => !value)}
             >
-              <SlidersHorizontalIcon data-icon="inline-start" />
-              Filters
-              {activeCount > 0 && (
-                <span className="ml-1 rounded-full bg-background px-1.5 text-xs">
-                  {activeCount}
-                </span>
-              )}
-            </Button>
+              <SlidersHorizontalIcon data-icon="inline-start" />
+              Filters
+              {resolvedActiveCount > 0 && (
+                <span className="ml-1 rounded-full bg-background px-1.5 text-xs">
+                  {resolvedActiveCount}
+                </span>
+              )}
+            </Button>
           )}
         </div>
-
-        <div className="flex shrink-0 flex-wrap items-center gap-2">
-          {activeCount > 0 && (
-            <span className="text-sm text-muted-foreground">{activeLabel(activeCount)}</span>
-          )}
-          {activeCount > 0 && onReset && (
-            <Button type="button" variant="ghost" size="sm" onClick={onReset}>
-              <XIcon data-icon="inline-start" />
-              {resetLabel}
+
+        <div className="flex shrink-0 flex-wrap items-center gap-2">
+          {resolvedActiveCount > 0 && (
+            <span className="text-sm text-muted-foreground">{activeLabel(resolvedActiveCount)}</span>
+          )}
+          {resolvedActiveCount > 0 && onReset && (
+            <Button type="button" variant="ghost" size="sm" onClick={onReset}>
+              <XIcon data-icon="inline-start" />
+              {resetLabel}
             </Button>
           )}
           {actions}
@@ -78,12 +115,47 @@ function FilterBar({
 
       {hasFilters && shouldShowFilters && (
         <div className="flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center">
-          {filters}
-          {children}
-        </div>
-      )}
-    </div>
-  )
-}
+          {filters}
+          {children}
+        </div>
+      )}
+
+      {shouldShowChipRow && (
+        <div data-slot="filter-bar-chips" className="flex flex-wrap items-center gap-2">
+          {visibleChips.length > 0 ? (
+            <>
+              {renderedChips.map((chip) => (
+              <Badge key={chip.key} variant={chipVariant[chip.tone ?? "default"]} className={cn("gap-1.5", chip.disabled && "opacity-60")}>
+                <span>{chip.label}</span>
+                {chip.value !== undefined && <span className="text-muted-foreground">{chip.value}</span>}
+                {onRemoveChip && !chip.disabled && (
+                  <button
+                    type="button"
+                    aria-label={typeof clearChipLabel === "string" ? clearChipLabel : "Remove filter"}
+                    className="rounded-full p-0.5 hover:bg-muted"
+                    onClick={(event) => {
+                      stopInteractivePropagation(event)
+                      onRemoveChip(chip.key)
+                    }}
+                    onMouseDown={stopInteractivePropagation}
+                    onDoubleClick={stopInteractivePropagation}
+                  >
+                    <XIcon className="size-3" />
+                  </button>
+                )}
+              </Badge>
+              ))}
+              {hiddenChipCount > 0 ? (
+                <Badge variant="outline">{chipOverflowLabel(hiddenChipCount)}</Badge>
+              ) : null}
+            </>
+          ) : (
+            <span className="text-sm text-muted-foreground">{emptyChips}</span>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
 
 export { FilterBar }

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

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