tembro 3.1.17 → 4.0.0

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

@@ -1,144 +1,24 @@
-import * as React from "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 DataStateVariant = "card" | "plain" | "inline"
-export type DataStateTone = "default" | "muted" | "success" | "warning" | "danger" | "info"
-
-export type DataStateProps = Omit<React.ComponentProps<typeof Card>, "content" | "title" | "description" | "variant" | "tone"> & {
+import {
+  StateView,
+  type StateViewProps,
+  type StateViewStatus,
+  type StateViewTone,
+  type StateViewVariant,
+} from "@/components/feedback/state-view"
+
+export type DataStateStatus = Exclude<StateViewStatus, "info">
+export type DataStateVariant = StateViewVariant
+export type DataStateTone = StateViewTone
+
+export type DataStateProps = Omit<StateViewProps, "status" | "variant" | "size" | "slot"> & {
   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 }> = {
-  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",
+/** @deprecated Use StateView. */
+function DataState({ status, variant = "card", compact = false, ...props }: DataStateProps) {
+  return <StateView status={status} variant={variant} size={compact ? "compact" : "default"} slot="data-state" {...props} />
 }
-
-function DataState({
-  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="p-0">{body}</CardContent>
-    </Card>
-  )
-}
-
-export { DataState }
+export { DataState }

package/packages/cli/vendor/src/components/display/info-card.tsx

@@ -55,23 +55,16 @@ export type InfoCardProps = Omit<React.ComponentProps<typeof Card>, "title" | "c
   renderFooter?: (ctx: InfoCardRenderContext) => React.ReactNode
 }
 
-const variantClassName: Record<InfoCardVariant, string> = {
-  default: "",
-  outline: "",
-  elevated: "",
-  ghost: "",
-}
-
-const densityClassName: Record<InfoCardDensity, string> = {
-  compact: "",
-  default: "",
-  comfortable: "",
-}
-
-const titleClassName: Record<InfoCardSize, string> = {
-  sm: "",
-  md: "",
-  lg: "",
+const densityClassName: Record<InfoCardDensity, string> = {
+  compact: "gap-2",
+  default: "gap-3",
+  comfortable: "gap-4",
+}
+
+const titleClassName: Record<InfoCardSize, string> = {
+  sm: "text-sm font-semibold",
+  md: "text-base font-semibold",
+  lg: "text-lg font-semibold",
 }
 
 function InfoCard({
@@ -126,7 +119,6 @@ function InfoCard({
       disabled={disabled}
       className={cn(
         "overflow-hidden",
-        variantClassName[variant],
         orientation === "horizontal" && "flex",
         className,
         classNames?.root

package/packages/cli/vendor/src/components/display/status-legend.tsx

@@ -1,7 +1,8 @@
 import * as React from "react"
 
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-import { Badge } from "@/components/ui/badge"
+import { Badge } from "@/components/ui/badge"
+import { StatusDot, type StatusDotTone } from "./status-dot"
 import { cn } from "@/lib/utils"
 
 export type StatusLegendTone = "default" | "success" | "warning" | "danger" | "info" | "muted"
@@ -30,14 +31,14 @@ export type StatusLegendProps = Omit<React.ComponentProps<typeof Card>, "orienta
   itemClassName?: string
 }
 
-const dotClassName: Record<StatusLegendTone, string> = {
-  default: "bg-primary",
-  success: "bg-emerald-500",
-  warning: "bg-amber-500",
-  danger: "bg-destructive",
-  info: "bg-blue-500",
-  muted: "bg-muted-foreground",
-}
+const statusDotTone: Record<StatusLegendTone, StatusDotTone> = {
+  default: "neutral",
+  success: "success",
+  warning: "warning",
+  danger: "danger",
+  info: "info",
+  muted: "muted",
+}
 
 function StatusLegend({
   title,
@@ -105,7 +106,7 @@ function StatusLegend({
               {item.icon ? (
                 <span className="mt-0.5 inline-flex size-8 shrink-0 items-center justify-center rounded-xl bg-[color:var(--aui-page-bg)] text-muted-foreground [&_svg]:size-4">{item.icon}</span>
               ) : (
-                <span className={cn("mt-1.5 size-2.5 shrink-0 rounded-full ring-4 ring-background", dotClassName[item.tone ?? "default"])} />
+                <StatusDot className="mt-1.5" tone={statusDotTone[item.tone ?? "default"]} size="lg" aria-label={typeof item.label === "string" ? item.label : undefined} />
               )}
               <div className="min-w-0 space-y-0.5">
                 <div className="truncate text-sm font-medium text-foreground">{item.label}</div>

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

@@ -1,96 +1,37 @@
 import * as React from "react"
-import { XIcon } from "lucide-react"
 
-import { cn, stopInteractivePropagation } from "@/lib/utils"
-
-export type TagTone = "neutral" | "info" | "success" | "warning" | "danger"
-export type TagSize = "sm" | "default" | "lg"
-
-export type TagProps = React.ComponentProps<"span"> & {
-  tone?: TagTone
-  size?: TagSize
-  removable?: boolean
-  selected?: boolean
-  onRemove?: () => void
-  removeLabel?: string
-}
-
-export type TagGroupProps = React.ComponentProps<"div"> & {
-  gap?: "sm" | "default" | "lg"
-}
-
-const toneClassName: Record<TagTone, string> = {
-  neutral:
-    "border-[color:color-mix(in_oklch,var(--border),var(--foreground)_8%)] bg-[color:color-mix(in_oklch,var(--muted),var(--background)_18%)] text-foreground",
-  info:
-    "border-[color:color-mix(in_oklch,var(--aui-info,var(--primary)),transparent_62%)] bg-[color:color-mix(in_oklch,var(--aui-info,var(--primary)),transparent_84%)] text-[color:color-mix(in_oklch,var(--aui-info,var(--primary)),black_18%)] dark:text-[color:color-mix(in_oklch,var(--aui-info,var(--primary)),white_46%)]",
-  success:
-    "border-[color:color-mix(in_oklch,var(--aui-success,var(--primary)),transparent_58%)] bg-[color:color-mix(in_oklch,var(--aui-success,var(--primary)),transparent_82%)] text-[color:color-mix(in_oklch,var(--aui-success,var(--primary)),black_16%)] dark:text-[color:color-mix(in_oklch,var(--aui-success,var(--primary)),white_42%)]",
-  warning:
-    "border-[color:color-mix(in_oklch,var(--aui-warning,var(--primary)),transparent_52%)] bg-[color:color-mix(in_oklch,var(--aui-warning,var(--primary)),transparent_76%)] text-[color:color-mix(in_oklch,var(--aui-warning-foreground,var(--foreground)),black_6%)] dark:text-[color:color-mix(in_oklch,var(--aui-warning,var(--primary)),white_32%)]",
-  danger:
-    "border-[color:color-mix(in_oklch,var(--destructive),transparent_58%)] bg-[color:color-mix(in_oklch,var(--destructive),transparent_82%)] text-[color:color-mix(in_oklch,var(--destructive),black_16%)] dark:text-[color:color-mix(in_oklch,var(--destructive),white_40%)]",
+import { Badge, type BadgeProps } from "@/components/ui/badge"
+import { cn } from "@/lib/utils"
+
+export type TagTone = "neutral" | "info" | "success" | "warning" | "danger"
+export type TagSize = "sm" | "default" | "lg"
+export type TagProps = Omit<BadgeProps, "status" | "dot" | "label" | "count" | "tone"> & {
+  tone?: TagTone
 }
-
-const sizeClassName: Record<TagSize, string> = {
-  sm: "h-6 px-2 text-xs",
-  default: "h-7 px-2.5 text-sm",
-  lg: "h-8 px-3 text-sm",
-}
-
-function Tag({ tone = "neutral", size = "default", removable, selected, onRemove, removeLabel = "Remove tag", className, children, onKeyDown, ...props }: TagProps) {
-  const handleRemove = (event: React.SyntheticEvent) => {
-    stopInteractivePropagation(event)
-    onRemove?.()
-  }
+export type TagGroupProps = React.ComponentProps<"div"> & { gap?: "sm" | "default" | "lg" }
 
+/** @deprecated Use Badge with className="rounded-full". */
+function Tag({ tone = "neutral", className, children, ...props }: TagProps) {
   return (
-    <span
+    <Badge
       data-slot="tag"
-      data-tone={tone}
-      data-size={size}
-      data-removable={removable || undefined}
-      data-selected={selected ? "true" : undefined}
-      tabIndex={removable ? 0 : props.tabIndex}
-      className={cn(
-        "inline-flex max-w-full items-center gap-1.5 rounded-full border font-medium shadow-[inset_0_1px_0_color-mix(in_oklch,white,transparent_40%)] transition-[background-color,border-color,color,box-shadow] outline-none focus-visible:ring-3 focus-visible:ring-ring/35",
-        toneClassName[tone],
-        sizeClassName[size],
-        selected && "border-[color:var(--aui-control-border-strong,var(--ring))] ring-2 ring-ring/45 ring-offset-1",
-        className
-      )}
-      onKeyDown={(event) => {
-        if (removable && (event.key === "Backspace" || event.key === "Delete")) {
-          event.preventDefault()
-          onRemove?.()
-        }
-        onKeyDown?.(event)
-      }}
+      tone={tone}
+      variant="soft"
+      className={cn("max-w-full rounded-full", className)}
       {...props}
     >
-      <span className="min-w-0 truncate">{children}</span>
-      {removable && (
-        <button
-          type="button"
-          aria-label={removeLabel}
-          className="-mr-1 inline-flex size-4 shrink-0 items-center justify-center rounded-full bg-[color:color-mix(in_oklch,currentColor,transparent_90%)] opacity-80 transition hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current/35"
-          onClick={handleRemove}
-          onMouseDown={stopInteractivePropagation}
-          onDoubleClick={stopInteractivePropagation}
-        >
-          <XIcon className="size-3" />
-        </button>
-      )}
-    </span>
-  )
-}
-
-function Chip(props: TagProps) {
-  return <Tag {...props} />
-}
-
-function TagGroup({ gap = "default", className, ...props }: TagGroupProps) {
-  return <div data-slot="tag-group" className={cn("flex flex-wrap items-center", gap === "sm" && "gap-1", gap === "default" && "gap-2", gap === "lg" && "gap-3", className)} {...props} />
-}
-
-export { Chip, Tag, TagGroup }
+      {children}
+    </Badge>
+  )
+}
+
+/** @deprecated Use Badge. */
+function Chip(props: TagProps) {
+  return <Tag {...props} />
+}
+
+function TagGroup({ gap = "default", className, ...props }: TagGroupProps) {
+  return <div data-slot="tag-group" className={cn("flex flex-wrap items-center", gap === "sm" && "gap-1", gap === "default" && "gap-2", gap === "lg" && "gap-3", className)} {...props} />
+}
+
+export { Chip, Tag, TagGroup }

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

@@ -1,3 +1,4 @@
 export * from "./alert"
 export * from "./loading-state"
 export * from "./page-state"
+export * from "./state-view"

package/packages/cli/vendor/src/components/feedback/loading-state.tsx

@@ -1,55 +1,15 @@
-import * as React from "react"
-import { Loader2Icon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-export type LoadingStateProps = React.ComponentProps<"div"> & {
+import * as React from "react"
+
+import { StateView, type StateViewProps } from "./state-view"
+
+export type LoadingStateProps = Omit<StateViewProps, "status" | "title" | "loadingVariant" | "variant" | "slot"> & {
   label?: React.ReactNode
-  description?: React.ReactNode
-  icon?: React.ReactNode
   variant?: "spinner" | "skeleton" | "progress"
-  progress?: number
 }
 
-function LoadingState({
-  className,
-  label = "Loading...",
-  description,
-  icon,
-  variant = "spinner",
-  progress,
-  ...props
-}: LoadingStateProps) {
-  return (
-    <div
-      data-slot="loading-state"
-      className={cn(
-        "flex min-h-52 flex-col items-center justify-center gap-4 rounded-[var(--radius-3xl)] border border-border/75 bg-muted/25 p-10 text-center text-muted-foreground shadow-sm ring-1 ring-foreground/4",
-        className
-      )}
-      {...props}
-    >
-      {variant === "skeleton" ? (
-        <div className="grid gap-3">
-          <div className="h-4 w-32 animate-pulse rounded bg-muted" />
-          <div className="h-24 w-64 animate-pulse rounded-[min(var(--radius-xl),16px)] bg-muted/70" />
-        </div>
-      ) : (
-        <div className="flex size-12 items-center justify-center rounded-full border border-border/70 bg-background/92 shadow-[0_1px_0_rgba(255,255,255,0.08)]">
-          {icon ?? <Loader2Icon className="size-5 animate-spin" />}
-        </div>
-      )}
-      <div className="grid gap-1.5">
-        {label && <div className="text-base font-semibold tracking-tight text-foreground">{label}</div>}
-        {description && <p className="max-w-sm text-sm leading-6">{description}</p>}
-        {variant === "progress" && typeof progress === "number" ? (
-          <div className="mx-auto mt-2 h-2 w-full max-w-xs overflow-hidden rounded-full bg-muted/80">
-            <div className="h-full rounded-full bg-primary" style={{ width: `${Math.min(Math.max(progress, 0), 100)}%` }} />
-          </div>
-        ) : null}
-      </div>
-    </div>
-  )
+/** @deprecated Use StateView with status="loading". */
+function LoadingState({ label = "Loading...", variant = "spinner", ...props }: LoadingStateProps) {
+  return <StateView status="loading" title={label} loadingVariant={variant} slot="loading-state" {...props} />
 }
-
-export { LoadingState }
+
+export { LoadingState }

package/packages/cli/vendor/src/components/feedback/page-state.tsx

@@ -1,78 +1,29 @@
-import * as React from "react"
-import { AlertCircleIcon, CheckCircle2Icon, InfoIcon, Loader2Icon, SearchXIcon } from "lucide-react"
-
-import { Button } from "@/components/ui/button"
-import { cn } from "@/lib/utils"
-
-export type PageStateTone = "empty" | "loading" | "error" | "success" | "info"
-
-export type PageStateProps = Omit<React.ComponentProps<"div">, "title"> & {
+import * as React from "react"
+
+import { StateView, type StateViewProps, type StateViewStatus } from "./state-view"
+import { cn } from "@/lib/utils"
+
+export type PageStateTone = Extract<StateViewStatus, "empty" | "loading" | "error" | "success" | "info">
+export type PageStateProps = Omit<StateViewProps, "status" | "size" | "variant" | "tone" | "actions" | "slot"> & {
   tone?: PageStateTone
-  title?: React.ReactNode
-  description?: React.ReactNode
-  icon?: React.ReactNode
   action?: React.ReactNode
   extra?: React.ReactNode
   compact?: boolean
 }
-
-function defaultPageStateIcon(tone: PageStateTone) {
-  switch (tone) {
-    case "loading":
-      return <Loader2Icon className="size-8 animate-spin" />
-    case "error":
-      return <AlertCircleIcon className="size-8" />
-    case "success":
-      return <CheckCircle2Icon className="size-8" />
-    case "info":
-      return <InfoIcon className="size-8" />
-    default:
-      return <SearchXIcon className="size-8" />
-  }
-}
-
-function PageState({ tone = "empty", title, description, icon, action, extra, compact = false, className, ...props }: PageStateProps) {
-  return (
-    <div
-      data-slot="page-state"
-      data-tone={tone}
-      data-compact={compact || undefined}
-      role={tone === "error" ? "alert" : "status"}
-      aria-live={tone === "error" ? "assertive" : "polite"}
-      aria-busy={tone === "loading" || undefined}
-      className={cn(
-        "flex flex-col items-center justify-center rounded-[var(--radius-3xl)] border border-border/75 bg-card/96 text-center shadow-sm ring-1 ring-foreground/4",
-        compact ? "gap-2 p-6" : "min-h-72 gap-4 p-10",
-        className
-      )}
-      {...props}
-    >
-      <div data-slot="page-state-icon" className="flex size-14 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)]">
-        {icon ?? defaultPageStateIcon(tone)}
-      </div>
-      <div data-slot="page-state-content" className="grid gap-1">
-        {title && <div data-slot="page-state-title" className="text-base font-semibold tracking-tight text-foreground">{title}</div>}
-        {description && <div data-slot="page-state-description" className="max-w-md text-sm leading-6 text-muted-foreground">{description}</div>}
-      </div>
-      {(action || extra) ? <div data-slot="page-state-actions" className="flex flex-wrap items-center justify-center gap-2">{action}{extra}</div> : null}
-    </div>
-  )
+
+/** @deprecated Use StateView. */
+function PageState({ tone = "empty", action, extra, compact = false, className, ...props }: PageStateProps) {
+  return <StateView status={tone} size={compact ? "compact" : "page"} actions={<>{action}{extra}</>} slot="page-state" className={className} {...props} />
 }
-
-export type InlineStateProps = Omit<PageStateProps, "compact"> & {
-  retryLabel?: React.ReactNode
-  onRetry?: () => void
-}
-
-function InlineState({ retryLabel = "Retry", onRetry, action, className, ...props }: InlineStateProps) {
-  return (
-    <PageState
-      compact
-      className={cn("min-h-0", className)}
-      action={action ?? (onRetry ? <Button type="button" variant="outline" size="sm" onClick={onRetry}>{retryLabel}</Button> : undefined)}
-      {...props}
-    />
-  )
-}
-
-export { InlineState, PageState }
+
+export type InlineStateProps = Omit<PageStateProps, "compact"> & {
+  retryLabel?: React.ReactNode
+  onRetry?: () => void
+}
+
+/** @deprecated Use StateView with variant="inline". */
+function InlineState({ tone = "empty", action, className, ...props }: InlineStateProps) {
+  return <StateView variant="inline" size="compact" actions={action} slot="inline-state" className={cn("min-h-0", className)} {...props} status={tone} />
+}
+
+export { InlineState, PageState }