azamat-ui-kit-cli 0.2.2

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

@@ -0,0 +1,97 @@
+import * as React from "react"
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { cn } from "@/lib/utils"
+
+export type ActivityFeedItem = {
+  id: string
+  title: React.ReactNode
+  description?: React.ReactNode
+  time?: React.ReactNode
+  icon?: React.ReactNode
+  tone?: "default" | "success" | "warning" | "danger" | "info" | "muted"
+  actions?: React.ReactNode
+  hidden?: boolean
+  className?: string
+}
+
+export type ActivityFeedProps = React.ComponentProps<typeof Card> & {
+  title?: React.ReactNode
+  description?: React.ReactNode
+  actions?: React.ReactNode
+  items: ActivityFeedItem[]
+  empty?: React.ReactNode
+  compact?: boolean
+  contentClassName?: string
+  itemClassName?: string
+}
+
+const toneDotClassName: Record<NonNullable<ActivityFeedItem["tone"]>, string> = {
+  default: "bg-primary",
+  success: "bg-emerald-500",
+  warning: "bg-amber-500",
+  danger: "bg-destructive",
+  info: "bg-blue-500",
+  muted: "bg-muted-foreground",
+}
+
+function ActivityFeed({
+  className,
+  title,
+  description,
+  actions,
+  items,
+  empty = "No activity yet.",
+  compact = false,
+  contentClassName,
+  itemClassName,
+  ...props
+}: ActivityFeedProps) {
+  const visibleItems = items.filter((item) => !item.hidden)
+  const hasHeader = Boolean(title || description || actions)
+
+  return (
+    <Card data-slot="activity-feed" className={cn("min-w-0", className)} {...props}>
+      {hasHeader && (
+        <CardHeader>
+          <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("grid gap-0", contentClassName)}>
+        {visibleItems.length === 0 ? (
+          <div className="rounded-lg border border-dashed p-4 text-center text-sm text-muted-foreground">{empty}</div>
+        ) : (
+          visibleItems.map((item, index) => (
+            <div
+              key={item.id}
+              data-slot="activity-feed-item"
+              className={cn("relative flex gap-3 pb-4 last:pb-0", compact && "gap-2 pb-3", itemClassName, item.className)}
+            >
+              {index < visibleItems.length - 1 && <div className="absolute left-3 top-7 h-[calc(100%-1.75rem)] w-px bg-border" />}
+              <div className="relative z-10 mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full border bg-background">
+                {item.icon ?? <span className={cn("size-2 rounded-full", toneDotClassName[item.tone ?? "default"])} />}
+              </div>
+              <div className="min-w-0 flex-1 space-y-1">
+                <div className="flex min-w-0 items-start justify-between gap-2">
+                  <div className="min-w-0 text-sm font-medium leading-5 text-foreground">{item.title}</div>
+                  {item.time && <div className="shrink-0 text-xs text-muted-foreground">{item.time}</div>}
+                </div>
+                {item.description && <div className="text-sm leading-5 text-muted-foreground">{item.description}</div>}
+                {item.actions && <div className="pt-1">{item.actions}</div>}
+              </div>
+            </div>
+          ))
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+
+export { ActivityFeed }

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

@@ -0,0 +1,131 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type AvatarSize = "xs" | "sm" | "default" | "lg" | "xl"
+export type AvatarShape = "circle" | "rounded" | "square"
+
+export type AvatarProps = React.ComponentProps<"span"> & {
+  src?: string
+  alt?: string
+  name?: string
+  fallback?: React.ReactNode
+  size?: AvatarSize
+  shape?: AvatarShape
+  status?: "online" | "offline" | "busy" | "away"
+}
+
+export type AvatarGroupItem = AvatarProps & {
+  key: string
+}
+
+export type AvatarGroupProps = React.ComponentProps<"div"> & {
+  items: AvatarGroupItem[]
+  max?: number
+  size?: AvatarSize
+  shape?: AvatarShape
+  stacked?: boolean
+  overflowLabel?: (count: number) => React.ReactNode
+}
+
+const sizeClassName: Record<AvatarSize, string> = {
+  xs: "size-6 text-[10px]",
+  sm: "size-8 text-xs",
+  default: "size-10 text-sm",
+  lg: "size-12 text-base",
+  xl: "size-16 text-lg",
+}
+
+const shapeClassName: Record<AvatarShape, string> = {
+  circle: "rounded-full",
+  rounded: "rounded-xl",
+  square: "rounded-md",
+}
+
+const statusClassName = {
+  online: "bg-emerald-500",
+  offline: "bg-muted-foreground",
+  busy: "bg-destructive",
+  away: "bg-amber-500",
+}
+
+function getInitials(name?: string) {
+  if (!name) return "?"
+  const words = name.trim().split(/\s+/).filter(Boolean)
+  if (!words.length) return "?"
+  return words.slice(0, 2).map((word) => word[0]?.toUpperCase()).join("")
+}
+
+function Avatar({
+  src,
+  alt,
+  name,
+  fallback,
+  size = "default",
+  shape = "circle",
+  status,
+  className,
+  ...props
+}: AvatarProps) {
+  const [imageError, setImageError] = React.useState(false)
+  const showImage = Boolean(src && !imageError)
+
+  return (
+    <span
+      data-slot="avatar"
+      data-size={size}
+      data-shape={shape}
+      className={cn("relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden border bg-muted font-medium text-muted-foreground", sizeClassName[size], shapeClassName[shape], className)}
+      {...props}
+    >
+      {showImage ? (
+        <img src={src} alt={alt ?? name ?? "Avatar"} className="size-full object-cover" onError={() => setImageError(true)} />
+      ) : (
+        <span data-slot="avatar-fallback">{fallback ?? getInitials(name)}</span>
+      )}
+      {status && (
+        <span
+          data-slot="avatar-status"
+          data-status={status}
+          className={cn("absolute bottom-0 right-0 size-2.5 rounded-full border-2 border-background", size === "xs" && "size-2", size === "xl" && "size-3.5", statusClassName[status])}
+        />
+      )}
+    </span>
+  )
+}
+
+function AvatarGroup({
+  items,
+  max = 5,
+  size = "default",
+  shape = "circle",
+  stacked = true,
+  overflowLabel = (count) => `+${count}`,
+  className,
+  ...props
+}: AvatarGroupProps) {
+  const visibleItems = items.slice(0, max)
+  const overflowCount = Math.max(items.length - max, 0)
+
+  return (
+      <div data-slot="avatar-group" className={cn("flex items-center", stacked ? "-space-x-2" : "gap-2", className)} {...props}>
+      {visibleItems.map((item) => {
+        const { key: itemKey, ...avatarProps } = item
+        return (
+          <Avatar
+            key={itemKey}
+            size={item.size ?? size}
+            shape={item.shape ?? shape}
+            className={cn(stacked && "ring-2 ring-background", item.className)}
+            {...avatarProps}
+          />
+        )
+      })}
+      {overflowCount > 0 && (
+        <Avatar size={size} shape={shape} fallback={overflowLabel(overflowCount)} className={cn(stacked && "ring-2 ring-background")} />
+      )}
+    </div>
+  )
+}
+
+export { Avatar, AvatarGroup }

package/vendor/src/components/display/code-block.tsx

@@ -0,0 +1,33 @@
+import * as React from "react"
+
+import { CopyButton } from "@/components/actions/copy-button"
+import { cn } from "@/lib/utils"
+
+export type CodeBlockProps = React.ComponentProps<"div"> & {
+  code: string
+  language?: string
+  title?: React.ReactNode
+  showCopy?: boolean
+  wrap?: boolean
+}
+
+function CodeBlock({ code, language, title, showCopy = true, wrap = false, className, ...props }: CodeBlockProps) {
+  return (
+    <div data-slot="code-block" className={cn("overflow-hidden rounded-lg border bg-card", className)} {...props}>
+      {(title || language || showCopy) && (
+        <div className="flex items-center justify-between gap-3 border-b px-3 py-2 text-xs text-muted-foreground">
+          <div className="flex min-w-0 items-center gap-2">
+            {title && <span className="truncate font-medium text-foreground">{title}</span>}
+            {language && <span className="rounded bg-muted px-1.5 py-0.5 font-mono">{language}</span>}
+          </div>
+          {showCopy && <CopyButton value={code} size="sm" variant="ghost" copyLabel="Copy" copiedLabel="Copied" />}
+        </div>
+      )}
+      <pre className={cn("overflow-x-auto p-3 text-sm", wrap && "whitespace-pre-wrap break-words")}>
+        <code>{code}</code>
+      </pre>
+    </div>
+  )
+}
+
+export { CodeBlock }

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

@@ -0,0 +1,63 @@
+import * as React from "react"
+import { AlertTriangleIcon, CheckCircle2Icon, Loader2Icon, SearchXIcon } 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 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
+}
+
+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 /> },
+}
+
+function DataState({
+  status,
+  title,
+  description,
+  actions,
+  icon,
+  compact = false,
+  children,
+  retryLabel = "Retry",
+  onRetry,
+  className,
+  ...props
+}: 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) && (
+          <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>
+  )
+}
+
+export { DataState }

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

@@ -0,0 +1,119 @@
+import * as React from "react"
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { cn } from "@/lib/utils"
+
+export type DescriptionListColumn = 1 | 2 | 3 | 4
+
+export type DescriptionListItem = {
+  key: string
+  label: React.ReactNode
+  value?: React.ReactNode
+  description?: React.ReactNode
+  icon?: React.ReactNode
+  span?: DescriptionListColumn
+  hidden?: boolean
+  className?: string
+  labelClassName?: string
+  valueClassName?: string
+}
+
+export type DescriptionListProps = React.ComponentProps<typeof Card> & {
+  title?: React.ReactNode
+  description?: React.ReactNode
+  actions?: React.ReactNode
+  items: DescriptionListItem[]
+  columns?: DescriptionListColumn
+  bordered?: boolean
+  compact?: boolean
+  emptyValue?: React.ReactNode
+  itemClassName?: string
+  labelClassName?: string
+  valueClassName?: string
+  contentClassName?: string
+}
+
+const columnsClassName: Record<DescriptionListColumn, string> = {
+  1: "grid-cols-1",
+  2: "grid-cols-1 md:grid-cols-2",
+  3: "grid-cols-1 md:grid-cols-2 xl:grid-cols-3",
+  4: "grid-cols-1 md:grid-cols-2 xl:grid-cols-4",
+}
+
+const spanClassName: Record<DescriptionListColumn, string> = {
+  1: "col-span-1",
+  2: "md:col-span-2",
+  3: "xl:col-span-3",
+  4: "xl:col-span-4",
+}
+
+function isEmptyValue(value: React.ReactNode) {
+  return value === null || value === undefined || value === ""
+}
+
+function DescriptionList({
+  title,
+  description,
+  actions,
+  items,
+  columns = 2,
+  bordered = true,
+  compact = false,
+  emptyValue = "-",
+  itemClassName,
+  labelClassName,
+  valueClassName,
+  contentClassName,
+  className,
+  ...props
+}: DescriptionListProps) {
+  const visibleItems = items.filter((item) => !item.hidden)
+  const hasHeader = Boolean(title || description || actions)
+
+  return (
+    <Card data-slot="description-list" className={cn("min-w-0", className)} {...props}>
+      {hasHeader && (
+        <CardHeader>
+          <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("grid gap-2", columnsClassName[columns], contentClassName)}>
+        {visibleItems.map((item) => (
+          <div
+            key={item.key}
+            data-slot="description-list-item"
+            className={cn(
+              "min-w-0 rounded-lg",
+              bordered && "border bg-muted/20",
+              compact ? "p-2" : "p-3",
+              item.span && item.span > 1 && spanClassName[item.span],
+              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>}
+              <div className="min-w-0 flex-1 space-y-1">
+                <div className={cn("text-xs font-medium uppercase tracking-wide text-muted-foreground", labelClassName, item.labelClassName)}>
+                  {item.label}
+                </div>
+                <div className={cn("min-w-0 break-words text-sm font-medium text-foreground", valueClassName, item.valueClassName)}>
+                  {isEmptyValue(item.value) ? emptyValue : item.value}
+                </div>
+                {item.description && <div className="text-xs leading-5 text-muted-foreground">{item.description}</div>}
+              </div>
+            </div>
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  )
+}
+
+export { DescriptionList }

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

@@ -0,0 +1,83 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type DescriptionItem = {
+  key: string
+  label: React.ReactNode
+  value: React.ReactNode
+  span?: 1 | 2 | 3 | 4
+}
+
+export type DescriptionsProps = React.ComponentProps<"div"> & {
+  items: DescriptionItem[]
+  title?: React.ReactNode
+  extra?: React.ReactNode
+  bordered?: boolean
+  columns?: 1 | 2 | 3 | 4
+  size?: "sm" | "md" | "lg"
+  labelClassName?: string
+  valueClassName?: string
+}
+
+const gapClassName = {
+  sm: "gap-2 text-sm",
+  md: "gap-3 text-sm",
+  lg: "gap-4 text-base",
+}
+
+function Descriptions({
+  items,
+  title,
+  extra,
+  bordered = true,
+  columns = 3,
+  size = "md",
+  labelClassName,
+  valueClassName,
+  className,
+  ...props
+}: DescriptionsProps) {
+  return (
+    <div data-slot="descriptions" className={cn("grid gap-3", className)} {...props}>
+      {(title || extra) && (
+        <div className="flex items-center justify-between gap-3">
+          {title && <div className="text-base font-semibold text-foreground">{title}</div>}
+          {extra}
+        </div>
+      )}
+      <div
+        className={cn(
+          "grid overflow-hidden",
+          bordered && "rounded-lg border bg-card",
+          !bordered && gapClassName[size],
+          columns === 1 && "grid-cols-1",
+          columns === 2 && "grid-cols-1 sm:grid-cols-2",
+          columns === 3 && "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+          columns === 4 && "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
+        )}
+      >
+        {items.map((item) => (
+          <div
+            key={item.key}
+            data-slot="descriptions-item"
+            className={cn(
+              "min-w-0",
+              bordered ? "border-b border-r p-3 last:border-b-0" : "grid gap-1",
+              item.span === 2 && "sm:col-span-2",
+              item.span === 3 && "lg:col-span-3",
+              item.span === 4 && "lg:col-span-4"
+            )}
+          >
+            <div className={cn("text-xs font-medium uppercase tracking-wide text-muted-foreground", labelClassName)}>
+              {item.label}
+            </div>
+            <div className={cn("mt-1 min-w-0 break-words text-sm text-foreground", valueClassName)}>{item.value}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export { Descriptions }

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

@@ -0,0 +1,53 @@
+import * as React from "react"
+
+import { Card } from "@/components/ui/card"
+import { cn } from "@/lib/utils"
+
+export type EntityCardProps = React.ComponentProps<typeof Card> & {
+  title: React.ReactNode
+  description?: React.ReactNode
+  media?: React.ReactNode
+  icon?: React.ReactNode
+  status?: React.ReactNode
+  meta?: React.ReactNode
+  actions?: React.ReactNode
+  footer?: React.ReactNode
+  selected?: boolean
+  disabled?: boolean
+  orientation?: "vertical" | "horizontal"
+  onSelect?: () => void
+}
+
+function EntityCard({ title, description, media, icon, status, meta, actions, footer, selected = false, disabled = false, orientation = "vertical", onSelect, className, ...props }: EntityCardProps) {
+  return (
+    <Card
+      data-slot="entity-card"
+      data-selected={selected || undefined}
+      data-disabled={disabled || undefined}
+      className={cn("overflow-hidden transition-colors hover:bg-muted/35 data-[selected=true]:border-primary data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-55", onSelect && "cursor-pointer", orientation === "horizontal" && "flex", className)}
+      onClick={onSelect}
+      {...props}
+    >
+      {media && <div className={cn("bg-muted", orientation === "horizontal" ? "w-32 shrink-0" : "aspect-video")}>{media}</div>}
+      <div className="grid min-w-0 flex-1 gap-3 p-4">
+        <div className="flex items-start justify-between gap-3">
+          <div className="flex min-w-0 items-start gap-3">
+            {icon && <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">{icon}</div>}
+            <div className="grid min-w-0 gap-1">
+              <div className="flex flex-wrap items-center gap-2">
+                <div className="truncate text-sm font-medium text-foreground">{title}</div>
+                {status}
+              </div>
+              {description && <div className="line-clamp-2 text-sm text-muted-foreground">{description}</div>}
+            </div>
+          </div>
+          {actions && <div className="shrink-0" onClick={(event) => event.stopPropagation()}>{actions}</div>}
+        </div>
+        {meta && <div className="text-xs text-muted-foreground">{meta}</div>}
+        {footer && <div className="border-t pt-3 text-sm text-muted-foreground">{footer}</div>}
+      </div>
+    </Card>
+  )
+}
+
+export { EntityCard }

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

@@ -0,0 +1,54 @@
+import * as React from "react"
+import { FileIcon, MoreHorizontalIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+export type FileCardProps = React.ComponentProps<"div"> & {
+  name: React.ReactNode
+  description?: React.ReactNode
+  meta?: React.ReactNode
+  icon?: React.ReactNode
+  preview?: React.ReactNode
+  actions?: React.ReactNode
+  selected?: boolean
+  disabled?: boolean
+  onOpen?: () => void
+}
+
+function FileCard({ name, description, meta, icon, preview, actions, selected = false, disabled = false, onOpen, className, ...props }: FileCardProps) {
+  return (
+    <div
+      data-slot="file-card"
+      data-selected={selected || undefined}
+      data-disabled={disabled || undefined}
+      className={cn(
+        "group grid gap-3 rounded-lg border bg-card p-3 transition-colors hover:bg-muted/35 data-[selected=true]:border-primary data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-55",
+        onOpen && "cursor-pointer",
+        className
+      )}
+      onClick={onOpen}
+      {...props}
+    >
+      {preview && <div className="overflow-hidden rounded-md bg-muted">{preview}</div>}
+      <div className="flex items-start gap-3">
+        <div className="flex size-9 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground">
+          {icon ?? <FileIcon className="size-4" />}
+        </div>
+        <div className="min-w-0 flex-1">
+          <div className="truncate text-sm font-medium text-foreground">{name}</div>
+          {description && <div className="mt-0.5 line-clamp-2 text-xs text-muted-foreground">{description}</div>}
+          {meta && <div className="mt-2 text-xs text-muted-foreground">{meta}</div>}
+        </div>
+        {actions ?? (
+          <Button type="button" variant="ghost" size="icon-xs" onClick={(event) => event.stopPropagation()}>
+            <MoreHorizontalIcon />
+            <span className="sr-only">File actions</span>
+          </Button>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export { FileCard }

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

@@ -0,0 +1,30 @@
+export * from "./description-list"
+export * from "./progress"
+export * from "./result"
+export * from "./timeline"
+export * from "./metric-grid"
+export * from "./activity-feed"
+export * from "./status-legend"
+export * from "./avatar"
+export * from "./data-state"
+export * from "./statistic"
+export * from "./list"
+export * from "./descriptions"
+export * from "./kanban"
+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"