azamat-ui-kit-cli 0.2.2

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

@@ -0,0 +1,104 @@
+import * as React from "react"
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { cn } from "@/lib/utils"
+
+export type KanbanCard = {
+  key: string
+  title: React.ReactNode
+  description?: React.ReactNode
+  meta?: React.ReactNode
+  extra?: React.ReactNode
+  disabled?: boolean
+}
+
+export type KanbanColumn = {
+  key: string
+  title: React.ReactNode
+  description?: React.ReactNode
+  cards: KanbanCard[]
+  count?: React.ReactNode
+}
+
+export type KanbanBoardProps = React.ComponentProps<"div"> & {
+  columns: KanbanColumn[]
+  renderCard?: (card: KanbanCard, column: KanbanColumn) => React.ReactNode
+  onCardClick?: (card: KanbanCard, column: KanbanColumn) => void
+  columnClassName?: string
+  cardClassName?: string
+}
+
+function KanbanBoard({ columns, renderCard, onCardClick, columnClassName, cardClassName, className, ...props }: KanbanBoardProps) {
+  return (
+    <div data-slot="kanban-board" className={cn("grid auto-cols-[minmax(280px,1fr)] grid-flow-col gap-4 overflow-x-auto pb-2", className)} {...props}>
+      {columns.map((column) => (
+        <KanbanColumnView
+          key={column.key}
+          column={column}
+          renderCard={renderCard}
+          onCardClick={onCardClick}
+          columnClassName={columnClassName}
+          cardClassName={cardClassName}
+        />
+      ))}
+    </div>
+  )
+}
+
+function KanbanColumnView({
+  column,
+  renderCard,
+  onCardClick,
+  columnClassName,
+  cardClassName,
+}: {
+  column: KanbanColumn
+  renderCard?: (card: KanbanCard, column: KanbanColumn) => React.ReactNode
+  onCardClick?: (card: KanbanCard, column: KanbanColumn) => void
+  columnClassName?: string
+  cardClassName?: string
+}) {
+  return (
+    <section data-slot="kanban-column" className={cn("grid min-h-40 content-start gap-3 rounded-lg border bg-muted/35 p-3", columnClassName)}>
+      <div className="flex items-start justify-between gap-3">
+        <div className="grid gap-0.5">
+          <h3 className="text-sm font-semibold text-foreground">{column.title}</h3>
+          {column.description && <p className="text-xs text-muted-foreground">{column.description}</p>}
+        </div>
+        <div className="rounded-full bg-background px-2 py-0.5 text-xs text-muted-foreground">{column.count ?? column.cards.length}</div>
+      </div>
+      <div className="grid gap-2">
+        {column.cards.map((card) => (
+          renderCard?.(card, column) ?? (
+            <Card
+              key={card.key}
+              data-slot="kanban-card"
+              className={cn(
+                "transition-colors hover:bg-muted/40",
+                onCardClick && !card.disabled && "cursor-pointer",
+                card.disabled && "pointer-events-none opacity-55",
+                cardClassName
+              )}
+              onClick={() => onCardClick?.(card, column)}
+            >
+              <CardHeader className="p-3 pb-1">
+                <div className="flex items-start justify-between gap-2">
+                  <CardTitle className="text-sm">{card.title}</CardTitle>
+                  {card.extra}
+                </div>
+              </CardHeader>
+              {(card.description || card.meta) && (
+                <CardContent className="grid gap-2 p-3 pt-0 text-xs text-muted-foreground">
+                  {card.description}
+                  {card.meta && <div>{card.meta}</div>}
+                </CardContent>
+              )}
+            </Card>
+          )
+        ))}
+      </div>
+    </section>
+  )
+}
+
+export { KanbanBoard }

package/vendor/src/components/display/keyboard-shortcut.tsx

@@ -0,0 +1,31 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type KeyboardShortcutProps = React.ComponentProps<"kbd"> & {
+  keys?: React.ReactNode[]
+  separator?: React.ReactNode
+}
+
+function KeyboardShortcut({ keys, separator = "+", className, children, ...props }: KeyboardShortcutProps) {
+  const content = keys?.length
+    ? keys.map((key, index) => (
+        <React.Fragment key={index}>
+          {index > 0 && <span className="text-muted-foreground">{separator}</span>}
+          <span>{key}</span>
+        </React.Fragment>
+      ))
+    : children
+
+  return (
+    <kbd
+      data-slot="keyboard-shortcut"
+      className={cn("inline-flex items-center gap-1 rounded border bg-muted px-1.5 py-0.5 font-mono text-[11px] font-medium text-muted-foreground", className)}
+      {...props}
+    >
+      {content}
+    </kbd>
+  )
+}
+
+export { KeyboardShortcut }

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

@@ -0,0 +1,100 @@
+import * as React from "react"
+import { ChevronRightIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+export type ListItem = {
+  key: string
+  title: React.ReactNode
+  description?: React.ReactNode
+  avatar?: React.ReactNode
+  extra?: React.ReactNode
+  href?: string
+  disabled?: boolean
+  onClick?: () => void
+}
+
+export type ListProps = React.ComponentProps<"div"> & {
+  items?: ListItem[]
+  bordered?: boolean
+  split?: boolean
+  size?: "sm" | "md" | "lg"
+  renderItem?: (item: ListItem, index: number) => React.ReactNode
+}
+
+const itemPadding = {
+  sm: "px-3 py-2",
+  md: "px-4 py-3",
+  lg: "px-5 py-4",
+}
+
+function List({ items, bordered = true, split = true, size = "md", renderItem, className, children, ...props }: ListProps) {
+  return (
+    <div
+      data-slot="list"
+      className={cn("overflow-hidden bg-card", bordered && "rounded-lg border", className)}
+      {...props}
+    >
+      {items?.map((item, index) => renderItem?.(item, index) ?? <ListRow key={item.key} item={item} split={split} size={size} />)}
+      {children}
+    </div>
+  )
+}
+
+export type ListRowProps = React.ComponentProps<"div"> & {
+  item: ListItem
+  split?: boolean
+  size?: "sm" | "md" | "lg"
+}
+
+function ListRow({ item, split = true, size = "md", className, ...props }: ListRowProps) {
+  const clickable = Boolean(item.href || item.onClick)
+  const content = (
+    <>
+      {item.avatar && <div className="shrink-0">{item.avatar}</div>}
+      <div className="min-w-0 flex-1">
+        <div className="truncate text-sm font-medium text-foreground">{item.title}</div>
+        {item.description && <div className="mt-0.5 line-clamp-2 text-sm text-muted-foreground">{item.description}</div>}
+      </div>
+      {item.extra && <div className="shrink-0 text-sm text-muted-foreground">{item.extra}</div>}
+      {clickable && <ChevronRightIcon className="size-4 shrink-0 text-muted-foreground" />}
+    </>
+  )
+
+  const rowClassName = cn(
+    "flex items-center gap-3 bg-card transition-colors",
+    itemPadding[size],
+    split && "border-b last:border-b-0",
+    clickable && !item.disabled && "cursor-pointer hover:bg-muted/50",
+    item.disabled && "pointer-events-none opacity-55",
+    className
+  )
+
+  if (item.href) {
+    return (
+      <a
+        data-slot="list-row"
+        href={item.href}
+        className={rowClassName}
+        {...(props as React.ComponentProps<"a">)}
+      >
+        {content}
+      </a>
+    )
+  }
+
+  return (
+    <div
+      data-slot="list-row"
+      role={clickable ? "button" : undefined}
+      tabIndex={clickable && !item.disabled ? 0 : undefined}
+      className={rowClassName}
+      onClick={item.onClick}
+      {...(props as React.ComponentProps<"div">)}
+    >
+      {content}
+    </div>
+  )
+}
+
+export { List, ListRow }

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

@@ -0,0 +1,86 @@
+import * as React from "react"
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { cn } from "@/lib/utils"
+
+export type MetricTone = "default" | "success" | "warning" | "danger" | "info" | "muted"
+export type MetricGridColumn = 1 | 2 | 3 | 4
+
+export type MetricItem = {
+  key: string
+  label: React.ReactNode
+  value: React.ReactNode
+  description?: React.ReactNode
+  icon?: React.ReactNode
+  trend?: React.ReactNode
+  tone?: MetricTone
+  hidden?: boolean
+  className?: string
+}
+
+export type MetricGridProps = React.ComponentProps<"div"> & {
+  items: MetricItem[]
+  columns?: MetricGridColumn
+  compact?: boolean
+  itemClassName?: string
+}
+
+const columnsClassName: Record<MetricGridColumn, string> = {
+  1: "grid-cols-1",
+  2: "grid-cols-1 sm:grid-cols-2",
+  3: "grid-cols-1 sm:grid-cols-2 xl:grid-cols-3",
+  4: "grid-cols-1 sm:grid-cols-2 xl:grid-cols-4",
+}
+
+const toneClassName: Record<MetricTone, string> = {
+  default: "",
+  success: "border-emerald-500/20 bg-emerald-500/5",
+  warning: "border-amber-500/20 bg-amber-500/5",
+  danger: "border-destructive/20 bg-destructive/5",
+  info: "border-blue-500/20 bg-blue-500/5",
+  muted: "bg-muted/40",
+}
+
+function MetricGrid({
+  className,
+  items,
+  columns = 4,
+  compact = false,
+  itemClassName,
+  ...props
+}: MetricGridProps) {
+  const visibleItems = items.filter((item) => !item.hidden)
+
+  return (
+    <div
+      data-slot="metric-grid"
+      className={cn("grid gap-3", columnsClassName[columns], className)}
+      {...props}
+    >
+      {visibleItems.map((item) => (
+        <Card
+          key={item.key}
+          data-slot="metric-card"
+          data-tone={item.tone ?? "default"}
+          className={cn("min-w-0 overflow-hidden", toneClassName[item.tone ?? "default"], itemClassName, item.className)}
+        >
+          <CardHeader className={cn("flex flex-row items-start justify-between gap-3 space-y-0", compact ? "p-3 pb-1" : "pb-2")}>
+            <div className="min-w-0 space-y-1">
+              <CardDescription className="truncate">{item.label}</CardDescription>
+              <CardTitle className={cn("truncate", compact ? "text-xl" : "text-2xl")}>{item.value}</CardTitle>
+            </div>
+            {item.icon && <div className="shrink-0 rounded-lg bg-muted p-2 text-muted-foreground [&_svg]:size-4">{item.icon}</div>}
+          </CardHeader>
+          {(item.description || item.trend) && (
+            <CardContent className={cn("flex min-w-0 items-center justify-between gap-2", compact ? "p-3 pt-1" : "pt-0")}>
+              {item.description && <div className="min-w-0 truncate text-xs text-muted-foreground">{item.description}</div>}
+              {item.trend && <div className="shrink-0 text-xs font-medium">{item.trend}</div>}
+            </CardContent>
+          )}
+        </Card>
+      ))}
+    </div>
+  )
+}
+
+export { MetricGrid }

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

@@ -0,0 +1,162 @@
+import * as React from "react"
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { cn } from "@/lib/utils"
+
+export type ProgressTone = "default" | "success" | "info" | "warning" | "danger" | "muted"
+export type ProgressSize = "sm" | "default" | "lg"
+
+export type ProgressProps = Omit<React.ComponentProps<"div">, "children"> & {
+  value?: number | null
+  max?: number
+  min?: number
+  label?: React.ReactNode
+  description?: React.ReactNode
+  showValue?: boolean
+  valueFormatter?: (value: number, percent: number) => React.ReactNode
+  tone?: ProgressTone
+  size?: ProgressSize
+  indeterminate?: boolean
+  trackClassName?: string
+  indicatorClassName?: string
+}
+
+export type ProgressCardProps = React.ComponentProps<typeof Card> & {
+  title?: React.ReactNode
+  description?: React.ReactNode
+  value?: number | null
+  max?: number
+  min?: number
+  tone?: ProgressTone
+  size?: ProgressSize
+  showValue?: boolean
+  valueFormatter?: ProgressProps["valueFormatter"]
+  footer?: React.ReactNode
+  progressClassName?: string
+}
+
+const toneClassName: Record<ProgressTone, string> = {
+  default: "bg-primary",
+  success: "bg-emerald-500",
+  info: "bg-blue-500",
+  warning: "bg-amber-500",
+  danger: "bg-destructive",
+  muted: "bg-muted-foreground",
+}
+
+const sizeClassName: Record<ProgressSize, string> = {
+  sm: "h-1.5",
+  default: "h-2",
+  lg: "h-3",
+}
+
+function clampValue(value: number, min: number, max: number) {
+  return Math.min(Math.max(value, min), max)
+}
+
+function getProgressPercent(value: number | null | undefined, min: number, max: number) {
+  if (value === null || value === undefined || !Number.isFinite(value)) return 0
+  if (max <= min) return 0
+
+  return ((clampValue(value, min, max) - min) / (max - min)) * 100
+}
+
+function Progress({
+  value = 0,
+  min = 0,
+  max = 100,
+  label,
+  description,
+  showValue = false,
+  valueFormatter,
+  tone = "default",
+  size = "default",
+  indeterminate = false,
+  className,
+  trackClassName,
+  indicatorClassName,
+  ...props
+}: ProgressProps) {
+  const percent = getProgressPercent(value, min, max)
+  const resolvedValue = value ?? min
+
+  return (
+    <div data-slot="progress" className={cn("grid gap-1.5", className)} {...props}>
+      {(label || description || showValue) && (
+        <div className="flex min-w-0 items-start justify-between gap-3 text-sm">
+          <div className="min-w-0 space-y-0.5">
+            {label && <div className="font-medium leading-none">{label}</div>}
+            {description && <div className="text-xs text-muted-foreground">{description}</div>}
+          </div>
+          {showValue && (
+            <div className="shrink-0 text-xs font-medium text-muted-foreground">
+              {valueFormatter ? valueFormatter(resolvedValue, percent) : `${Math.round(percent)}%`}
+            </div>
+          )}
+        </div>
+      )}
+      <div
+        data-slot="progress-track"
+        className={cn("w-full overflow-hidden rounded-full bg-muted", sizeClassName[size], trackClassName)}
+        role="progressbar"
+        aria-valuemin={min}
+        aria-valuemax={max}
+        aria-valuenow={indeterminate ? undefined : resolvedValue}
+        aria-label={typeof label === "string" ? label : undefined}
+      >
+        <div
+          data-slot="progress-indicator"
+          data-indeterminate={indeterminate || undefined}
+          className={cn(
+            "h-full rounded-full transition-all data-[indeterminate=true]:w-1/3 data-[indeterminate=true]:animate-pulse",
+            toneClassName[tone],
+            indicatorClassName
+          )}
+          style={indeterminate ? undefined : { width: `${percent}%` }}
+        />
+      </div>
+    </div>
+  )
+}
+
+function ProgressCard({
+  title,
+  description,
+  value,
+  min,
+  max,
+  tone,
+  size,
+  showValue = true,
+  valueFormatter,
+  footer,
+  progressClassName,
+  className,
+  ...props
+}: ProgressCardProps) {
+  return (
+    <Card data-slot="progress-card" className={cn("min-w-0", className)} {...props}>
+      <CardHeader>
+        <div className="min-w-0 space-y-1">
+          {title && <CardTitle>{title}</CardTitle>}
+          {description && <CardDescription>{description}</CardDescription>}
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        <Progress
+          value={value}
+          min={min}
+          max={max}
+          tone={tone}
+          size={size}
+          showValue={showValue}
+          valueFormatter={valueFormatter}
+          className={progressClassName}
+        />
+        {footer}
+      </CardContent>
+    </Card>
+  )
+}
+
+export { Progress, ProgressCard, getProgressPercent }

package/vendor/src/components/display/property-grid.tsx

@@ -0,0 +1,54 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type PropertyGridItem = {
+  key: string
+  label: React.ReactNode
+  value: React.ReactNode
+  description?: React.ReactNode
+  span?: 1 | 2 | 3 | 4
+}
+
+export type PropertyGridProps = React.ComponentProps<"div"> & {
+  items: PropertyGridItem[]
+  columns?: 1 | 2 | 3 | 4
+  bordered?: boolean
+}
+
+function PropertyGrid({ items, columns = 3, bordered = true, className, ...props }: PropertyGridProps) {
+  return (
+    <div
+      data-slot="property-grid"
+      className={cn(
+        "grid gap-3",
+        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",
+        className
+      )}
+      {...props}
+    >
+      {items.map((item) => (
+        <div
+          key={item.key}
+          data-slot="property-grid-item"
+          className={cn(
+            "min-w-0 rounded-lg bg-card p-3",
+            bordered && "border",
+            item.span === 2 && "sm:col-span-2",
+            item.span === 3 && "lg:col-span-3",
+            item.span === 4 && "lg:col-span-4"
+          )}
+        >
+          <div className="text-xs font-medium uppercase tracking-wide text-muted-foreground">{item.label}</div>
+          <div className="mt-1 break-words text-sm font-medium text-foreground">{item.value}</div>
+          {item.description && <div className="mt-1 text-xs text-muted-foreground">{item.description}</div>}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export { PropertyGrid }

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

@@ -0,0 +1,90 @@
+import * as React from "react"
+import { AlertCircleIcon, CheckCircle2Icon, InfoIcon, ShieldAlertIcon, TriangleAlertIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+export type ResultStatus = "success" | "error" | "warning" | "info" | "not-found" | "forbidden" | "server-error"
+
+export type ResultProps = React.ComponentProps<"div"> & {
+  status?: ResultStatus
+  icon?: React.ReactNode
+  title?: React.ReactNode
+  description?: React.ReactNode
+  actions?: React.ReactNode
+  extra?: React.ReactNode
+  compact?: boolean
+  iconClassName?: string
+  titleClassName?: string
+  descriptionClassName?: string
+}
+
+const statusIcon: Record<ResultStatus, React.ReactNode> = {
+  success: <CheckCircle2Icon className="size-8" />,
+  error: <AlertCircleIcon className="size-8" />,
+  warning: <TriangleAlertIcon className="size-8" />,
+  info: <InfoIcon className="size-8" />,
+  "not-found": <InfoIcon className="size-8" />,
+  forbidden: <ShieldAlertIcon className="size-8" />,
+  "server-error": <AlertCircleIcon className="size-8" />,
+}
+
+const statusClassName: Record<ResultStatus, string> = {
+  success: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
+  error: "bg-destructive/10 text-destructive",
+  warning: "bg-amber-500/10 text-amber-600 dark:text-amber-400",
+  info: "bg-blue-500/10 text-blue-600 dark:text-blue-400",
+  "not-found": "bg-muted text-muted-foreground",
+  forbidden: "bg-amber-500/10 text-amber-600 dark:text-amber-400",
+  "server-error": "bg-destructive/10 text-destructive",
+}
+
+const defaultTitle: Record<ResultStatus, React.ReactNode> = {
+  success: "Success",
+  error: "Something went wrong",
+  warning: "Check this action",
+  info: "Information",
+  "not-found": "Page not found",
+  forbidden: "Access forbidden",
+  "server-error": "Server error",
+}
+
+function Result({
+  status = "info",
+  icon,
+  title,
+  description,
+  actions,
+  extra,
+  compact = false,
+  iconClassName,
+  titleClassName,
+  descriptionClassName,
+  className,
+  ...props
+}: ResultProps) {
+  return (
+    <div
+      data-slot="result"
+      data-status={status}
+      className={cn("flex flex-col items-center justify-center text-center", compact ? "gap-3 p-4" : "gap-4 p-8", className)}
+      {...props}
+    >
+      <div className={cn("flex items-center justify-center rounded-full", compact ? "size-12" : "size-16", statusClassName[status], iconClassName)}>
+        {icon ?? statusIcon[status]}
+      </div>
+      <div className="max-w-lg space-y-2">
+        <h3 className={cn("font-semibold tracking-tight", compact ? "text-base" : "text-2xl", titleClassName)}>{title ?? defaultTitle[status]}</h3>
+        {description && <p className={cn("text-sm leading-6 text-muted-foreground", descriptionClassName)}>{description}</p>}
+      </div>
+      {actions && <div className="flex flex-wrap justify-center gap-2">{actions}</div>}
+      {extra && <div className="w-full max-w-2xl">{extra}</div>}
+    </div>
+  )
+}
+
+function ResultAction({ className, ...props }: React.ComponentProps<typeof Button>) {
+  return <Button className={cn("min-w-28", className)} {...props} />
+}
+
+export { Result, ResultAction }