azamat-ui-kit-cli 0.2.2

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

@@ -0,0 +1,168 @@
+import * as React from "react"
+
+import { Card } from "@/components/ui/card"
+import { Skeleton, SkeletonText } from "@/components/ui/skeleton"
+import { cn } from "@/lib/utils"
+
+/** @deprecated Prefer `InfoCardVariant` via `InfoCard` or `CardFamily.Info` for new public usage. */
+export type SmartCardVariant = "default" | "outline" | "elevated" | "ghost"
+/** @deprecated Prefer `InfoCardSize` via `InfoCard` or `CardFamily.Info` for new public usage. */
+export type SmartCardSize = "sm" | "md" | "lg"
+/** @deprecated Prefer `InfoCardDensity` via `InfoCard` or `CardFamily.Info` for new public usage. */
+export type SmartCardDensity = "compact" | "default" | "comfortable"
+/** @deprecated Prefer `InfoCardOrientation` via `InfoCard` or `CardFamily.Info` for new public usage. */
+export type SmartCardOrientation = "vertical" | "horizontal"
+
+/** @deprecated Prefer `InfoCardClassNames` via `InfoCard` or `CardFamily.Info` for new public usage. */
+export type SmartCardClassNames = {
+  root?: string
+  media?: string
+  header?: string
+  icon?: string
+  body?: string
+  eyebrow?: string
+  title?: string
+  description?: string
+  content?: string
+  footer?: string
+  actions?: string
+  meta?: string
+  status?: string
+}
+
+/** @deprecated Prefer `InfoCardRenderContext` via `InfoCard` or `CardFamily.Info` for new public usage. */
+export type SmartCardRenderContext = {
+  title?: React.ReactNode
+  description?: React.ReactNode
+  eyebrow?: React.ReactNode
+  media?: React.ReactNode
+  icon?: React.ReactNode
+  status?: React.ReactNode
+  actions?: React.ReactNode
+  meta?: React.ReactNode
+  content?: React.ReactNode
+  footer?: React.ReactNode
+}
+
+/** @deprecated Prefer `InfoCardProps` via `InfoCard` or `CardFamily.Info` for new public usage. */
+export type SmartCardProps = Omit<React.ComponentProps<typeof Card>, "title" | "content" | "size"> & SmartCardRenderContext & {
+  orientation?: SmartCardOrientation
+  variant?: SmartCardVariant
+  size?: SmartCardSize
+  density?: SmartCardDensity
+  loading?: boolean
+  disabled?: boolean
+  selected?: boolean
+  interactive?: boolean
+  classNames?: SmartCardClassNames
+  renderHeader?: (ctx: SmartCardRenderContext) => React.ReactNode
+  renderMedia?: (ctx: SmartCardRenderContext) => React.ReactNode
+  renderContent?: (ctx: SmartCardRenderContext) => React.ReactNode
+  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 densityClassName: Record<SmartCardDensity, string> = {
+  compact: "p-3",
+  default: "p-4",
+  comfortable: "p-5",
+}
+
+const titleClassName: Record<SmartCardSize, string> = {
+  sm: "text-sm",
+  md: "text-base",
+  lg: "text-lg",
+}
+
+/** @deprecated Prefer `InfoCard` or `CardFamily.Info` for new public usage. */
+function SmartCard({
+  eyebrow,
+  title,
+  description,
+  media,
+  icon,
+  status,
+  actions,
+  meta,
+  content,
+  footer,
+  orientation = "vertical",
+  variant = "outline",
+  size = "md",
+  density = "default",
+  loading = false,
+  disabled = false,
+  selected = false,
+  interactive,
+  className,
+  classNames,
+  renderHeader,
+  renderMedia,
+  renderContent,
+  renderFooter,
+  children,
+  onClick,
+  ...props
+}: SmartCardProps) {
+  const ctx: SmartCardRenderContext = { eyebrow, title, description, media, icon, status, actions, meta, content, footer }
+  const clickable = Boolean(onClick || interactive)
+
+  return (
+    <Card
+      data-slot="smart-card"
+      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
+      )}
+      onClick={disabled ? undefined : onClick}
+      {...props}
+    >
+      {loading ? (
+        <div className={cn("grid gap-3", densityClassName[density])}>
+          <Skeleton className="h-5 w-1/2" />
+          <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>}
+                  </div>
+                </div>
+                {actions && <div data-slot="smart-card-actions" className={cn("shrink-0", classNames?.actions)} onClick={(event) => event.stopPropagation()}>{actions}</div>}
+              </div>
+            )}
+            {meta && <div data-slot="smart-card-meta" className={cn("text-xs text-muted-foreground", classNames?.meta)}>{meta}</div>}
+            {(content || children) && (renderContent?.(ctx) ?? <div data-slot="smart-card-content" className={classNames?.content}>{content ?? children}</div>)}
+            {footer && (renderFooter?.(ctx) ?? <div data-slot="smart-card-footer" className={cn("border-t pt-3 text-sm text-muted-foreground", classNames?.footer)}>{footer}</div>)}
+          </div>
+        </>
+      )}
+    </Card>
+  )
+}
+
+export { SmartCard }

package/vendor/src/components/display/statistic.tsx

@@ -0,0 +1,107 @@
+import * as React from "react"
+import { ArrowDownIcon, ArrowUpIcon } from "lucide-react"
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { cn } from "@/lib/utils"
+
+export type StatisticTrend = "up" | "down" | "neutral"
+
+export type StatisticProps = React.ComponentProps<"div"> & {
+  label: React.ReactNode
+  value: React.ReactNode
+  prefix?: React.ReactNode
+  suffix?: React.ReactNode
+  description?: React.ReactNode
+  trend?: StatisticTrend
+  change?: React.ReactNode
+  loading?: boolean
+}
+
+function Statistic({ label, value, prefix, suffix, description, trend = "neutral", change, loading = false, className, ...props }: StatisticProps) {
+  const trendIcon = trend === "up" ? <ArrowUpIcon className="size-3" /> : trend === "down" ? <ArrowDownIcon className="size-3" /> : null
+
+  return (
+    <div data-slot="statistic" className={cn("grid gap-1", className)} {...props}>
+      <div className="text-sm text-muted-foreground">{label}</div>
+      <div className="flex flex-wrap items-baseline gap-1.5">
+        {loading ? (
+          <div className="h-8 w-28 animate-pulse rounded-md bg-muted" />
+        ) : (
+          <>
+            {prefix && <span className="text-base text-muted-foreground">{prefix}</span>}
+            <span className="text-2xl font-semibold tracking-tight">{value}</span>
+            {suffix && <span className="text-sm text-muted-foreground">{suffix}</span>}
+          </>
+        )}
+      </div>
+      {(description || change) && (
+        <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+          {change && (
+            <span
+              className={cn(
+                "inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 font-medium",
+                trend === "up" && "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
+                trend === "down" && "bg-destructive/10 text-destructive",
+                trend === "neutral" && "bg-muted text-muted-foreground"
+              )}
+            >
+              {trendIcon}
+              {change}
+            </span>
+          )}
+          {description && <span>{description}</span>}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export type StatisticCardProps = React.ComponentProps<typeof Card> & StatisticProps & {
+  action?: React.ReactNode
+}
+
+function StatisticCard({ action, label, value, prefix, suffix, description, trend, change, loading, className, ...props }: StatisticCardProps) {
+  return (
+    <Card data-slot="statistic-card" className={className} {...props}>
+      <CardHeader className="flex flex-row items-center justify-between gap-3 pb-2">
+        <CardTitle className="text-sm font-medium text-muted-foreground">{label}</CardTitle>
+        {action}
+      </CardHeader>
+      <CardContent>
+        <Statistic
+          label={<span className="sr-only">{label}</span>}
+          value={value}
+          prefix={prefix}
+          suffix={suffix}
+          description={description}
+          trend={trend}
+          change={change}
+          loading={loading}
+        />
+      </CardContent>
+    </Card>
+  )
+}
+
+export type StatisticGridProps = React.ComponentProps<"div"> & {
+  columns?: 1 | 2 | 3 | 4
+}
+
+function StatisticGrid({ columns = 4, className, ...props }: StatisticGridProps) {
+  return (
+    <div
+      data-slot="statistic-grid"
+      className={cn(
+        "grid gap-4",
+        columns === 1 && "grid-cols-1",
+        columns === 2 && "grid-cols-1 sm:grid-cols-2",
+        columns === 3 && "grid-cols-1 sm:grid-cols-2 xl:grid-cols-3",
+        columns === 4 && "grid-cols-1 sm:grid-cols-2 xl:grid-cols-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Statistic, StatisticCard, StatisticGrid }

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

@@ -0,0 +1,108 @@
+import * as React from "react"
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { cn } from "@/lib/utils"
+
+export type StatusLegendTone = "default" | "success" | "warning" | "danger" | "info" | "muted"
+export type StatusLegendOrientation = "vertical" | "horizontal" | "grid"
+
+export type StatusLegendItem = {
+  key: string
+  label: React.ReactNode
+  description?: React.ReactNode
+  count?: React.ReactNode
+  tone?: StatusLegendTone
+  icon?: React.ReactNode
+  hidden?: boolean
+  className?: string
+}
+
+export type StatusLegendProps = React.ComponentProps<typeof Card> & {
+  title?: React.ReactNode
+  description?: React.ReactNode
+  actions?: React.ReactNode
+  items: StatusLegendItem[]
+  orientation?: StatusLegendOrientation
+  compact?: boolean
+  showCounts?: boolean
+  contentClassName?: string
+  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",
+}
+
+function StatusLegend({
+  title,
+  description,
+  actions,
+  items,
+  orientation = "vertical",
+  compact = false,
+  showCounts = true,
+  contentClassName,
+  itemClassName,
+  className,
+  ...props
+}: StatusLegendProps) {
+  const visibleItems = items.filter((item) => !item.hidden)
+  const hasHeader = Boolean(title || description || actions)
+
+  return (
+    <Card data-slot="status-legend" className={cn("min-w-0", className)} {...props}>
+      {hasHeader && (
+        <CardHeader className={cn(compact && "p-4 pb-2")}>
+          <div className="flex min-w-0 items-start justify-between gap-3">
+            <div className="min-w-0 space-y-1">
+              {title && <CardTitle>{title}</CardTitle>}
+              {description && <CardDescription>{description}</CardDescription>}
+            </div>
+            {actions && <div className="shrink-0">{actions}</div>}
+          </div>
+        </CardHeader>
+      )}
+
+      <CardContent
+        className={cn(
+          "gap-2",
+          orientation === "vertical" && "grid",
+          orientation === "horizontal" && "flex flex-wrap",
+          orientation === "grid" && "grid sm:grid-cols-2",
+          compact && "p-4 pt-2",
+          contentClassName
+        )}
+      >
+        {visibleItems.map((item) => (
+          <div
+            key={item.key}
+            data-slot="status-legend-item"
+            data-tone={item.tone ?? "default"}
+            className={cn("flex min-w-0 items-start justify-between gap-3 rounded-lg border bg-muted/20 p-3", compact && "p-2", itemClassName, item.className)}
+          >
+            <div className="flex min-w-0 items-start gap-2">
+              {item.icon ? (
+                <span className="mt-0.5 shrink-0 text-muted-foreground [&_svg]:size-4">{item.icon}</span>
+              ) : (
+                <span className={cn("mt-1.5 size-2.5 shrink-0 rounded-full", dotClassName[item.tone ?? "default"])} />
+              )}
+              <div className="min-w-0 space-y-0.5">
+                <div className="truncate text-sm font-medium text-foreground">{item.label}</div>
+                {item.description && <div className="text-xs leading-5 text-muted-foreground">{item.description}</div>}
+              </div>
+            </div>
+            {showCounts && item.count !== undefined && <Badge variant="secondary" className="shrink-0">{item.count}</Badge>}
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  )
+}
+
+export { StatusLegend }

package/vendor/src/components/display/tag-list.tsx

@@ -0,0 +1,52 @@
+import * as React from "react"
+import { XIcon } from "lucide-react"
+
+import { Badge } from "@/components/ui/badge"
+import { cn } from "@/lib/utils"
+
+export type TagListItem = {
+  key: string
+  label: React.ReactNode
+  variant?: React.ComponentProps<typeof Badge>["variant"]
+  disabled?: boolean
+}
+
+export type TagListProps = React.ComponentProps<"div"> & {
+  items: TagListItem[]
+  max?: number
+  removable?: boolean
+  onRemove?: (item: TagListItem) => void
+  overflowLabel?: (count: number) => React.ReactNode
+}
+
+function TagList({ items, max, removable = false, onRemove, overflowLabel = (count) => `+${count}`, className, ...props }: TagListProps) {
+  const visibleItems = typeof max === "number" ? items.slice(0, max) : items
+  const overflowCount = typeof max === "number" ? Math.max(items.length - max, 0) : 0
+
+  return (
+    <div data-slot="tag-list" className={cn("flex flex-wrap items-center gap-1.5", className)} {...props}>
+      {visibleItems.map((item) => (
+        <Badge
+          key={item.key}
+          variant={item.variant}
+          className={cn("gap-1", item.disabled && "opacity-55")}
+        >
+          <span>{item.label}</span>
+          {removable && !item.disabled && (
+            <button
+              type="button"
+              aria-label="Remove tag"
+              className="rounded-sm text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              onClick={() => onRemove?.(item)}
+            >
+              <XIcon className="size-3" />
+            </button>
+          )}
+        </Badge>
+      ))}
+      {overflowCount > 0 && <Badge variant="outline">{overflowLabel(overflowCount)}</Badge>}
+    </div>
+  )
+}
+
+export { TagList }

package/vendor/src/components/display/timeline.tsx

@@ -0,0 +1,132 @@
+import * as React from "react"
+import { CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+export type TimelineTone = "default" | "success" | "info" | "warning" | "danger" | "muted"
+export type TimelineOrientation = "vertical" | "horizontal"
+
+export type TimelineItem = {
+  key: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  time?: React.ReactNode
+  icon?: React.ReactNode
+  tone?: TimelineTone
+  content?: React.ReactNode
+  actions?: React.ReactNode
+  hidden?: boolean
+  className?: string
+}
+
+export type TimelineProps = React.ComponentProps<"div"> & {
+  items: TimelineItem[]
+  orientation?: TimelineOrientation
+  pending?: boolean
+  pendingLabel?: React.ReactNode
+  compact?: boolean
+  itemClassName?: string
+}
+
+const dotClassName: Record<TimelineTone, string> = {
+  default: "border-primary bg-primary text-primary-foreground",
+  success: "border-emerald-500 bg-emerald-500 text-white",
+  info: "border-blue-500 bg-blue-500 text-white",
+  warning: "border-amber-500 bg-amber-500 text-white",
+  danger: "border-destructive bg-destructive text-destructive-foreground",
+  muted: "border-muted-foreground bg-muted-foreground text-background",
+}
+
+function Timeline({
+  items,
+  orientation = "vertical",
+  pending = false,
+  pendingLabel = "Pending",
+  compact = false,
+  itemClassName,
+  className,
+  ...props
+}: TimelineProps) {
+  const visibleItems = items.filter((item) => !item.hidden)
+
+  if (orientation === "horizontal") {
+    return (
+      <div data-slot="timeline" data-orientation="horizontal" className={cn("overflow-x-auto", className)} {...props}>
+        <div className="flex min-w-max gap-3 pb-1">
+          {visibleItems.map((item) => (
+            <TimelineHorizontalItem key={item.key} item={item} compact={compact} className={itemClassName} />
+          ))}
+          {pending && <TimelineHorizontalItem item={{ key: "pending", title: pendingLabel, tone: "muted" }} compact={compact} className={itemClassName} />}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div data-slot="timeline" data-orientation="vertical" className={cn("grid gap-0", className)} {...props}>
+      {visibleItems.map((item, index) => (
+        <TimelineVerticalItem
+          key={item.key}
+          item={item}
+          compact={compact}
+          className={itemClassName}
+          isLast={index === visibleItems.length - 1 && !pending}
+        />
+      ))}
+      {pending && <TimelineVerticalItem item={{ key: "pending", title: pendingLabel, tone: "muted" }} compact={compact} className={itemClassName} isLast />}
+    </div>
+  )
+}
+
+function TimelineDot({ item }: { item: TimelineItem }) {
+  const tone = item.tone ?? "default"
+
+  return (
+    <span
+      data-slot="timeline-dot"
+      data-tone={tone}
+      className={cn("flex size-7 shrink-0 items-center justify-center rounded-full border text-[10px]", dotClassName[tone])}
+    >
+      {item.icon ?? <CircleIcon className="size-2 fill-current" />}
+    </span>
+  )
+}
+
+function TimelineVerticalItem({ item, compact, className, isLast }: { item: TimelineItem; compact: boolean; className?: string; isLast?: boolean }) {
+  return (
+    <div data-slot="timeline-item" className={cn("grid grid-cols-[auto_1fr] gap-3", className, item.className)}>
+      <div className="flex flex-col items-center">
+        <TimelineDot item={item} />
+        {!isLast && <div data-slot="timeline-line" className="w-px flex-1 bg-border" />}
+      </div>
+      <div className={cn("min-w-0 pb-5", compact && "pb-3")}> 
+        <div className="flex min-w-0 flex-col gap-1 sm:flex-row sm:items-start sm:justify-between">
+          <div className="min-w-0">
+            {item.title && <div className="text-sm font-medium text-foreground">{item.title}</div>}
+            {item.description && <div className="text-sm text-muted-foreground">{item.description}</div>}
+          </div>
+          {item.time && <div className="shrink-0 text-xs text-muted-foreground">{item.time}</div>}
+        </div>
+        {item.content && <div className="mt-2 text-sm text-muted-foreground">{item.content}</div>}
+        {item.actions && <div className="mt-2">{item.actions}</div>}
+      </div>
+    </div>
+  )
+}
+
+function TimelineHorizontalItem({ item, compact, className }: { item: TimelineItem; compact: boolean; className?: string }) {
+  return (
+    <div data-slot="timeline-item" className={cn("min-w-48 rounded-xl border bg-card p-3", compact && "min-w-40 p-2", className, item.className)}>
+      <div className="mb-3 flex items-center gap-2">
+        <TimelineDot item={item} />
+        {item.time && <div className="text-xs text-muted-foreground">{item.time}</div>}
+      </div>
+      {item.title && <div className="text-sm font-medium">{item.title}</div>}
+      {item.description && <div className="mt-1 text-xs text-muted-foreground">{item.description}</div>}
+      {item.content && <div className="mt-2 text-sm text-muted-foreground">{item.content}</div>}
+      {item.actions && <div className="mt-2">{item.actions}</div>}
+    </div>
+  )
+}
+
+export { Timeline }

package/vendor/src/components/display/tree-view.tsx

@@ -0,0 +1,116 @@
+import * as React from "react"
+import { ChevronRightIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+export type TreeViewItem = {
+  key: string
+  label: React.ReactNode
+  icon?: React.ReactNode
+  extra?: React.ReactNode
+  children?: TreeViewItem[]
+  disabled?: boolean
+}
+
+export type TreeViewProps = React.ComponentProps<"div"> & {
+  items: TreeViewItem[]
+  defaultExpandedKeys?: string[]
+  expandedKeys?: string[]
+  onExpandedKeysChange?: (keys: string[]) => void
+  selectedKey?: string
+  onSelect?: (item: TreeViewItem) => void
+}
+
+function TreeView({ items, defaultExpandedKeys = [], expandedKeys, onExpandedKeysChange, selectedKey, onSelect, className, ...props }: TreeViewProps) {
+  const [internalExpandedKeys, setInternalExpandedKeys] = React.useState(defaultExpandedKeys)
+  const currentExpandedKeys = expandedKeys ?? internalExpandedKeys
+
+  const setExpandedKeys = (nextKeys: string[]) => {
+    if (expandedKeys === undefined) setInternalExpandedKeys(nextKeys)
+    onExpandedKeysChange?.(nextKeys)
+  }
+
+  const toggle = (key: string) => {
+    setExpandedKeys(currentExpandedKeys.includes(key) ? currentExpandedKeys.filter((item) => item !== key) : [...currentExpandedKeys, key])
+  }
+
+  return (
+    <div data-slot="tree-view" role="tree" className={cn("grid gap-1 text-sm", className)} {...props}>
+      {items.map((item) => (
+        <TreeViewNode
+          key={item.key}
+          item={item}
+          level={1}
+          expandedKeys={currentExpandedKeys}
+          selectedKey={selectedKey}
+          onToggle={toggle}
+          onSelect={onSelect}
+        />
+      ))}
+    </div>
+  )
+}
+
+function TreeViewNode({
+  item,
+  level,
+  expandedKeys,
+  selectedKey,
+  onToggle,
+  onSelect,
+}: {
+  item: TreeViewItem
+  level: number
+  expandedKeys: string[]
+  selectedKey?: string
+  onToggle: (key: string) => void
+  onSelect?: (item: TreeViewItem) => void
+}) {
+  const hasChildren = Boolean(item.children?.length)
+  const expanded = expandedKeys.includes(item.key)
+  const selected = selectedKey === item.key
+
+  return (
+    <div data-slot="tree-node" role="treeitem" aria-expanded={hasChildren ? expanded : undefined} aria-selected={selected || undefined}>
+      <div
+        className={cn(
+          "flex items-center gap-1 rounded-md px-2 py-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+          selected && "bg-muted text-foreground",
+          item.disabled && "pointer-events-none opacity-50"
+        )}
+        style={{ paddingLeft: `${level * 0.75}rem` }}
+      >
+        <button
+          type="button"
+          aria-label={expanded ? "Collapse" : "Expand"}
+          className={cn("flex size-5 items-center justify-center rounded-sm", !hasChildren && "invisible")}
+          onClick={() => onToggle(item.key)}
+        >
+          <ChevronRightIcon className={cn("size-4 transition-transform", expanded && "rotate-90")} />
+        </button>
+        {item.icon}
+        <button type="button" className="min-w-0 flex-1 truncate text-left" onClick={() => onSelect?.(item)}>
+          {item.label}
+        </button>
+        {item.extra}
+      </div>
+      {hasChildren && expanded && (
+        <div role="group" className="grid gap-1">
+          {item.children?.map((child) => (
+            <TreeViewNode
+              key={child.key}
+              item={child}
+              level={level + 1}
+              expandedKeys={expandedKeys}
+              selectedKey={selectedKey}
+              onToggle={onToggle}
+              onSelect={onSelect}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export { TreeView }