azamat-ui-kit-cli 0.2.2 → 0.3.3

package/vendor/src/components/data-table/data-table-toolbar.tsx

@@ -1,21 +1,47 @@
 import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
 
-export type DataTableToolbarProps = React.ComponentProps<"div"> & {
-  title?: React.ReactNode
-  description?: React.ReactNode
-  search?: React.ReactNode
-  filters?: React.ReactNode
-  actions?: React.ReactNode
-  selectionActions?: React.ReactNode
-  selectedCount?: number
-  totalCount?: number
-  selectedLabel?: (selectedCount: number, totalCount?: number) => React.ReactNode
-}
+const dataTableToolbarVariants = cva("flex flex-col", {
+  variants: {
+    variant: {
+      default: "rounded-[var(--radius-2xl)] border border-border/70 bg-card/80 shadow-sm ring-1 ring-foreground/5",
+      plain: "border-transparent bg-transparent shadow-none",
+      soft: "rounded-[var(--radius-2xl)] border border-transparent bg-muted/45 shadow-none",
+    },
+    density: {
+      compact: "gap-3 p-3",
+      default: "gap-4 p-4 md:p-5",
+      comfortable: "gap-5 p-5 md:p-6",
+    },
+  },
+  defaultVariants: {
+    variant: "plain",
+    density: "default",
+  },
+})
+
+export type DataTableToolbarProps = React.ComponentProps<"div"> &
+  VariantProps<typeof dataTableToolbarVariants> & {
+    title?: React.ReactNode
+    description?: React.ReactNode
+    search?: React.ReactNode
+    filters?: React.ReactNode
+    actions?: React.ReactNode
+    selectionActions?: React.ReactNode
+    selectedCount?: number
+    totalCount?: number
+    selectedLabel?: (selectedCount: number, totalCount?: number) => React.ReactNode
+    titleClassName?: string
+    descriptionClassName?: string
+    actionsClassName?: string
+  }
 
 function DataTableToolbar({
   className,
+  variant,
+  density,
   title,
   description,
   search,
@@ -26,44 +52,46 @@ function DataTableToolbar({
   totalCount,
   selectedLabel = (selected, total) =>
     total === undefined ? `${selected} selected` : `${selected} of ${total} selected`,
+  titleClassName,
+  descriptionClassName,
+  actionsClassName,
   children,
   ...props
 }: DataTableToolbarProps) {
   const hasHeading = Boolean(title || description)
   const hasSelection = selectedCount > 0 && Boolean(selectionActions)
 
-  return (
-    <div
-      data-slot="data-table-toolbar"
-      className={cn("flex flex-col gap-4 rounded-[var(--radius-2xl)] p-4 md:p-5", className)}
-      {...props}
-    >
-      {(hasHeading || actions) && (
-        <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-          {hasHeading && (
-            <div className="grid gap-1">
-              {title && <h2 className="text-lg font-semibold tracking-tight text-foreground">{title}</h2>}
-              {description && <p className="text-sm leading-6 text-muted-foreground">{description}</p>}
-            </div>
-          )}
-
-          {actions && <div className="flex shrink-0 flex-wrap items-center gap-2">{actions}</div>}
-        </div>
-      )}
-
-      {(search || filters || hasSelection || children) && (
-        <div className="flex flex-col gap-2 lg:flex-row lg:items-center lg:justify-between">
-          <div className="flex min-w-0 flex-1 flex-col gap-2 sm:flex-row sm:items-center">
-            {search}
-            {filters}
-            {children}
-          </div>
-
-          {hasSelection && (
-            <div className="flex shrink-0 items-center gap-2 rounded-full border border-border/70 bg-background/88 px-2.5 py-1.5 text-sm shadow-sm backdrop-blur">
-              <span className="text-muted-foreground">
-                {selectedLabel(selectedCount, totalCount)}
-              </span>
+  return (
+    <div
+      data-slot="data-table-toolbar"
+      data-density={density ?? "default"}
+      className={cn(dataTableToolbarVariants({ variant, density }), className)}
+      {...props}
+    >
+      {(hasHeading || actions) && (
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+          {hasHeading && (
+            <div className="grid gap-1">
+              {title && <h2 className={cn("text-lg font-semibold tracking-tight text-foreground", titleClassName)}>{title}</h2>}
+              {description && <p className={cn("text-sm leading-6 text-muted-foreground", descriptionClassName)}>{description}</p>}
+            </div>
+          )}
+
+          {actions && <div className={cn("flex shrink-0 flex-wrap items-center gap-2", actionsClassName)}>{actions}</div>}
+        </div>
+      )}
+
+      {(search || filters || hasSelection || children) && (
+        <div className="flex flex-col gap-2 lg:flex-row lg:items-center lg:justify-between">
+          <div className="flex min-w-0 flex-1 flex-col gap-2 sm:flex-row sm:items-center">
+            {search}
+            {filters}
+            {children}
+          </div>
+
+          {hasSelection && (
+            <div className="flex shrink-0 items-center gap-2 rounded-full border border-border/75 bg-background/92 px-2.5 py-1.5 text-sm shadow-[0_1px_0_rgba(255,255,255,0.08)] backdrop-blur">
+              <span className="text-muted-foreground">{selectedLabel(selectedCount, totalCount)}</span>
               {selectionActions}
             </div>
           )}
@@ -73,4 +101,4 @@ function DataTableToolbar({
   )
 }
 
-export { DataTableToolbar }
+export { DataTableToolbar, dataTableToolbarVariants }

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

@@ -407,26 +407,29 @@ function DataTable<TData, TValue = unknown>({
         data-striped={striped || undefined}
         data-bordered={bordered || undefined}
         className={cn(
-          "overflow-auto rounded-[var(--radius-2xl)] border bg-card/96 shadow-sm backdrop-blur",
+          "overflow-auto rounded-[var(--radius-2xl)] border bg-[linear-gradient(180deg,color-mix(in_oklch,var(--card),white_10%),var(--card))] shadow-sm ring-1 ring-foreground/5 backdrop-blur",
           !bordered && "border-border",
           renderMobileCard && "hidden md:block",
           tableWrapperClassName
         )}
       >
         <Table className={cn("text-[0.95rem]", tableClassName)}>
-          <TableHeader className={cn(stickyHeader && "sticky top-0 z-10 bg-background shadow-sm")}>
-            {table.getHeaderGroups().map((headerGroup) => (
-              <TableRow key={headerGroup.id}>
-                {headerGroup.headers.map((header) => (
+          <TableHeader
+            className={cn(stickyHeader && "sticky top-0 z-10 bg-[linear-gradient(180deg,color-mix(in_oklch,var(--background),white_10%),var(--background))] shadow-sm backdrop-blur")}
+          >
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
                   <TableHead
                     key={header.id}
                     style={{ width: header.getSize() }}
-                    className={cn(
-                      densityHeadClassName[density],
-                      stickyHeader && "bg-background",
-                      bordered && "border-r last:border-r-0",
-                      getHeaderCellClassName(header, headerCellClassName)
-                    )}
+                    className={cn(
+                      densityHeadClassName[density],
+                      "text-muted-foreground",
+                      stickyHeader && "bg-[linear-gradient(180deg,color-mix(in_oklch,var(--background),white_10%),var(--background))] backdrop-blur",
+                      bordered && "border-r last:border-r-0",
+                      getHeaderCellClassName(header, headerCellClassName)
+                    )}
                   >
                     {header.isPlaceholder
                       ? null
@@ -452,6 +455,7 @@ function DataTable<TData, TValue = unknown>({
                         data-disabled={rowDisabled || undefined}
                         className={cn(
                           onRowClick && !rowDisabled && "cursor-pointer",
+                          !rowDisabled && "transition-colors",
                           striped && rowIndex % 2 === 1 && "bg-muted/20",
                           rowDisabled && "pointer-events-none opacity-55",
                           getRowClassName(row, rowClassName)

package/vendor/src/components/data-table/table-export-menu.tsx

@@ -12,7 +12,7 @@ export type TableExportOption = {
   disabled?: boolean
 }
 
-export type TableExportMenuProps = Omit<ButtonProps, "onSelect"> & {
+export type TableExportMenuProps = Omit<ButtonProps, "onSelect" | "onClick"> & {
   options?: TableExportOption[]
   label?: React.ReactNode
   menuLabel?: React.ReactNode

package/vendor/src/components/data-table/table-import-button.tsx

@@ -3,7 +3,7 @@ import { UploadIcon } from "lucide-react"
 
 import { Button, type ButtonProps } from "@/components/ui/button"
 
-export type TableImportButtonProps = Omit<ButtonProps, "onChange"> & {
+export type TableImportButtonProps = Omit<ButtonProps, "onChange" | "onClick"> & {
   accept?: string
   multiple?: boolean
   label?: React.ReactNode

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

@@ -42,14 +42,26 @@ function DataState({
 }: DataStateProps) {
   const content = defaultContent[status]
 
-  return (
-    <Card data-slot="data-state" data-status={status} className={cn("min-w-0", 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 bg-muted text-muted-foreground [&_svg]:size-5", compact ? "size-9" : "size-12")}>{icon ?? content.icon}</div>
-        <div className={cn("font-semibold", 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) && (
+  return (
+    <Card
+      data-slot="data-state"
+      data-status={status}
+      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}

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

@@ -1,11 +1,15 @@
 export * from "./description-list"
 export * from "./progress"
+export * from "./progress-circle"
 export * from "./result"
 export * from "./timeline"
-export * from "./metric-grid"
-export * from "./activity-feed"
+export * from "./metric-grid"
+export * from "./metric-card"
+export * from "./activity-feed"
 export * from "./status-legend"
+export * from "./status-dot"
 export * from "./avatar"
+export * from "./user-card"
 export * from "./data-state"
 export * from "./statistic"
 export * from "./list"
@@ -15,16 +19,16 @@ export * from "./tag-list"
 export * from "./tree-view"
 export * from "./keyboard-shortcut"
 export * from "./code-block"
-export * from "./file-card"
-export * from "./property-grid"
-export * from "./entity-card"
-export {
-  SmartCard as InfoCard,
-  type SmartCardClassNames as InfoCardClassNames,
-  type SmartCardDensity as InfoCardDensity,
-  type SmartCardOrientation as InfoCardOrientation,
-  type SmartCardProps as InfoCardProps,
-  type SmartCardRenderContext as InfoCardRenderContext,
-  type SmartCardSize as InfoCardSize,
-  type SmartCardVariant as InfoCardVariant,
-} from "./smart-card"
+export * from "./file-card"
+export * from "./property-grid"
+export * from "./entity-card"
+export {
+  SmartCard as InfoCard,
+  type SmartCardClassNames as InfoCardClassNames,
+  type SmartCardDensity as InfoCardDensity,
+  type SmartCardOrientation as InfoCardOrientation,
+  type SmartCardProps as InfoCardProps,
+  type SmartCardRenderContext as InfoCardRenderContext,
+  type SmartCardSize as InfoCardSize,
+  type SmartCardVariant as InfoCardVariant,
+} from "./smart-card"

package/vendor/src/components/display/metric-card.tsx

@@ -0,0 +1,35 @@
+import * as React from "react"
+
+import { Badge } from "@/components/ui/badge"
+import { Card } from "@/components/ui/card"
+import { cn } from "@/lib/utils"
+
+export type MetricCardProps = React.ComponentProps<typeof Card> & {
+  title: React.ReactNode
+  value: React.ReactNode
+  description?: React.ReactNode
+  trend?: React.ReactNode
+  icon?: React.ReactNode
+}
+
+function MetricCard({ title, value, description, trend, icon, className, ...props }: MetricCardProps) {
+  return (
+    <Card data-slot="metric-card" className={cn("p-5", className)} {...props}>
+      <div className="flex items-start justify-between gap-4">
+        <div className="min-w-0 space-y-1">
+          <p className="text-sm font-medium text-muted-foreground">{title}</p>
+          <div className="text-3xl font-semibold tracking-[-0.04em] text-foreground">{value}</div>
+        </div>
+        {icon ? <div className="inline-flex size-10 shrink-0 items-center justify-center rounded-2xl bg-muted text-muted-foreground [&_svg]:size-5">{icon}</div> : null}
+      </div>
+      {(description || trend) && (
+        <div className="mt-4 flex flex-wrap items-center gap-2">
+          {trend ? <Badge variant="secondary">{trend}</Badge> : null}
+          {description ? <span className="text-sm text-muted-foreground">{description}</span> : null}
+        </div>
+      )}
+    </Card>
+  )
+}
+
+export { MetricCard }

package/vendor/src/components/display/progress-circle.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type ProgressCircleProps = React.ComponentProps<"div"> & {
+  value?: number
+  max?: number
+  label?: React.ReactNode
+}
+
+function ProgressCircle({ value = 0, max = 100, label, className, ...props }: ProgressCircleProps) {
+  const percent = max > 0 ? Math.max(0, Math.min(100, Math.round((value / max) * 100))) : 0
+
+  return (
+    <div data-slot="progress-circle" className={cn("inline-flex items-center gap-3", className)} {...props}>
+      <span className="inline-flex size-14 items-center justify-center rounded-full border-4 border-muted bg-background text-xs font-semibold text-foreground">
+        {percent}%
+      </span>
+      {label ? <span className="text-sm text-muted-foreground">{label}</span> : null}
+    </div>
+  )
+}
+
+export { ProgressCircle }

package/vendor/src/components/display/smart-card.tsx

@@ -61,12 +61,12 @@ export type SmartCardProps = Omit<React.ComponentProps<typeof Card>, "title" | "
   renderFooter?: (ctx: SmartCardRenderContext) => React.ReactNode
 }
 
-const variantClassName: Record<SmartCardVariant, string> = {
-  default: "bg-card",
-  outline: "border bg-card",
-  elevated: "border bg-card shadow-md",
-  ghost: "border-transparent bg-transparent shadow-none",
-}
+const variantClassName: Record<SmartCardVariant, string> = {
+  default: "border border-border/70 bg-card/96 shadow-sm ring-1 ring-foreground/4",
+  outline: "border border-border/75 bg-card/96 shadow-sm ring-1 ring-foreground/4",
+  elevated: "border border-border/75 bg-card/98 shadow-[0_24px_80px_rgba(15,23,42,0.12)] ring-1 ring-foreground/4",
+  ghost: "border-transparent bg-transparent shadow-none",
+}
 
 const densityClassName: Record<SmartCardDensity, string> = {
   compact: "p-3",
@@ -119,13 +119,13 @@ function SmartCard({
       data-selected={selected || undefined}
       data-disabled={disabled || undefined}
       data-loading={loading || undefined}
-      className={cn(
-        "overflow-hidden transition-colors data-[selected=true]:border-primary data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-55",
-        variantClassName[variant],
-        clickable && "cursor-pointer hover:bg-muted/35",
-        orientation === "horizontal" && "flex",
-        className,
-        classNames?.root
+      className={cn(
+        "overflow-hidden transition-colors data-[selected=true]:border-primary data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-55",
+        variantClassName[variant],
+        clickable && "cursor-pointer hover:bg-muted/35",
+        orientation === "horizontal" && "flex",
+        className,
+        classNames?.root
       )}
       onClick={disabled ? undefined : onClick}
       {...props}
@@ -136,20 +136,42 @@ function SmartCard({
           <SkeletonText rows={3} />
         </div>
       ) : (
-        <>
-          {media && (renderMedia?.(ctx) ?? <div data-slot="smart-card-media" className={cn("bg-muted", orientation === "horizontal" ? "w-40 shrink-0" : "aspect-video", classNames?.media)}>{media}</div>)}
-          <div data-slot="smart-card-body" className={cn("grid min-w-0 flex-1 gap-3", densityClassName[density], classNames?.body)}>
-            {renderHeader?.(ctx) ?? (
-              <div data-slot="smart-card-header" className={cn("flex items-start justify-between gap-3", classNames?.header)}>
-                <div className="flex min-w-0 items-start gap-3">
-                  {icon && <div data-slot="smart-card-icon" className={cn("flex size-9 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground", classNames?.icon)}>{icon}</div>}
-                  <div className="grid min-w-0 gap-1">
-                    {eyebrow && <div data-slot="smart-card-eyebrow" className={cn("text-xs font-medium uppercase tracking-wide text-muted-foreground", classNames?.eyebrow)}>{eyebrow}</div>}
-                    <div className="flex flex-wrap items-center gap-2">
-                      {title && <div data-slot="smart-card-title" className={cn("truncate font-semibold text-foreground", titleClassName[size], classNames?.title)}>{title}</div>}
-                      {status && <div data-slot="smart-card-status" className={classNames?.status}>{status}</div>}
-                    </div>
-                    {description && <div data-slot="smart-card-description" className={cn("line-clamp-2 text-sm text-muted-foreground", classNames?.description)}>{description}</div>}
+        <>
+          {media &&
+            (renderMedia?.(ctx) ?? (
+              <div
+                data-slot="smart-card-media"
+                className={cn(
+                  "bg-muted/50",
+                  orientation === "horizontal" ? "w-40 shrink-0 border-r border-border/70" : "aspect-video border-b border-border/70",
+                  classNames?.media
+                )}
+              >
+                {media}
+              </div>
+            ))}
+          <div data-slot="smart-card-body" className={cn("grid min-w-0 flex-1 gap-3", densityClassName[density], classNames?.body)}>
+            {renderHeader?.(ctx) ?? (
+              <div data-slot="smart-card-header" className={cn("flex items-start justify-between gap-3", classNames?.header)}>
+                <div className="flex min-w-0 items-start gap-3">
+                  {icon && (
+                    <div
+                      data-slot="smart-card-icon"
+                      className={cn(
+                        "flex size-9 shrink-0 items-center justify-center rounded-[min(var(--radius-xl),16px)] border border-border/70 bg-muted/45 text-muted-foreground shadow-[0_1px_0_rgba(255,255,255,0.05)]",
+                        classNames?.icon
+                      )}
+                    >
+                      {icon}
+                    </div>
+                  )}
+                  <div className="grid min-w-0 gap-1">
+                    {eyebrow && <div data-slot="smart-card-eyebrow" className={cn("text-[11px] font-semibold uppercase tracking-[0.22em] text-muted-foreground", classNames?.eyebrow)}>{eyebrow}</div>}
+                    <div className="flex flex-wrap items-center gap-2">
+                      {title && <div data-slot="smart-card-title" className={cn("truncate font-semibold tracking-tight text-foreground", titleClassName[size], classNames?.title)}>{title}</div>}
+                      {status && <div data-slot="smart-card-status" className={classNames?.status}>{status}</div>}
+                    </div>
+                    {description && <div data-slot="smart-card-description" className={cn("line-clamp-2 text-sm text-muted-foreground", classNames?.description)}>{description}</div>}
                   </div>
                 </div>
                 {actions && <div data-slot="smart-card-actions" className={cn("shrink-0", classNames?.actions)} onClick={(event) => event.stopPropagation()}>{actions}</div>}

package/vendor/src/components/display/status-dot.tsx

@@ -0,0 +1,45 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type StatusDotTone = "neutral" | "info" | "success" | "warning" | "danger" | "muted"
+
+export type StatusDotProps = React.ComponentProps<"span"> & {
+  tone?: StatusDotTone
+  pulse?: boolean
+  label?: React.ReactNode
+  size?: "sm" | "default" | "lg"
+}
+
+const toneClassName: Record<StatusDotTone, string> = {
+  neutral: "bg-foreground",
+  info: "bg-blue-500",
+  success: "bg-emerald-500",
+  warning: "bg-amber-500",
+  danger: "bg-destructive",
+  muted: "bg-muted-foreground",
+}
+
+const sizeClassName = {
+  sm: "size-1.5",
+  default: "size-2",
+  lg: "size-2.5",
+}
+
+function StatusDot({ className, tone = "neutral", pulse = false, label, size = "default", ...props }: StatusDotProps) {
+  const dot = (
+    <span className="relative inline-flex shrink-0 items-center justify-center">
+      {pulse ? <span className={cn("absolute inline-flex size-full animate-ping rounded-full opacity-35", toneClassName[tone])} /> : null}
+      <span data-slot="status-dot-indicator" className={cn("relative rounded-full", sizeClassName[size], toneClassName[tone])} />
+    </span>
+  )
+
+  return (
+    <span data-slot="status-dot" className={cn("inline-flex items-center gap-2 text-sm text-muted-foreground", className)} {...props}>
+      {dot}
+      {label ? <span data-slot="status-dot-label">{label}</span> : null}
+    </span>
+  )
+}
+
+export { StatusDot }

package/vendor/src/components/display/user-card.tsx

@@ -0,0 +1,30 @@
+import * as React from "react"
+
+import { Avatar } from "@/components/display/avatar"
+import { Card } from "@/components/ui/card"
+import { cn } from "@/lib/utils"
+
+export type UserCardProps = React.ComponentProps<typeof Card> & {
+  name: React.ReactNode
+  description?: React.ReactNode
+  src?: string
+  alt?: string
+  meta?: React.ReactNode
+  actions?: React.ReactNode
+}
+
+function UserCard({ name, description, src, alt, meta, actions, className, ...props }: UserCardProps) {
+  return (
+    <Card className={cn("flex items-center gap-4 p-4", className)} {...props}>
+      <Avatar src={src} alt={alt} name={typeof name === "string" ? name : undefined} />
+      <div className="min-w-0 flex-1">
+        <p className="truncate font-medium text-foreground">{name}</p>
+        {description ? <p className="truncate text-sm text-muted-foreground">{description}</p> : null}
+        {meta ? <div className="mt-2 text-xs text-muted-foreground">{meta}</div> : null}
+      </div>
+      {actions ? <div className="shrink-0">{actions}</div> : null}
+    </Card>
+  )
+}
+
+export { UserCard }

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

@@ -42,17 +42,27 @@ function defaultIcon(tone: AlertTone) {
   }
 }
 
-function Alert({ tone = "info", title, description, icon, action, className, children, ...props }: AlertProps) {
-  return (
-    <div
-      data-slot="alert"
-      role={tone === "destructive" || tone === "warning" ? "alert" : "status"}
-      className={cn("flex gap-3 rounded-lg border p-4 text-sm", alertToneClassName[tone], className)}
-      {...props}
-    >
-      <div data-slot="alert-icon" className={cn("mt-0.5 shrink-0", alertIconClassName[tone])}>
-        {icon ?? defaultIcon(tone)}
-      </div>
+function Alert({ tone = "info", title, description, icon, action, className, children, ...props }: AlertProps) {
+  return (
+    <div
+      data-slot="alert"
+      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],
+        className
+      )}
+      {...props}
+    >
+      <div
+        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",
+          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) && (

package/vendor/src/components/feedback/empty-state.tsx

@@ -27,12 +27,12 @@ function EmptyState({
     <div
       data-slot="empty-state"
       className={cn(
-        "flex min-h-52 flex-col items-center justify-center gap-4 rounded-[var(--radius-3xl)] border border-dashed border-border/80 bg-muted/25 p-10 text-center shadow-sm",
+        "flex min-h-52 flex-col items-center justify-center gap-4 rounded-[var(--radius-3xl)] border border-dashed border-border/80 bg-muted/25 p-10 text-center shadow-sm ring-1 ring-foreground/4",
         className
       )}
       {...props}
     >
-      <div className="flex size-12 items-center justify-center rounded-full border border-border/70 bg-background/90 text-muted-foreground shadow-sm">
+      <div className="flex size-12 items-center justify-center rounded-full border border-border/70 bg-background/92 text-muted-foreground shadow-[0_1px_0_rgba(255,255,255,0.08)]">
         {icon ?? <InboxIcon className="size-5" />}
       </div>
 

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

@@ -20,12 +20,12 @@ function LoadingState({
     <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/70 bg-muted/25 p-10 text-center text-muted-foreground shadow-sm",
+        "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}
     >
-      <div className="flex size-12 items-center justify-center rounded-full border border-border/70 bg-background/90 shadow-sm">
+      <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">