azamat-ui-kit-cli 0.2.2

package/vendor/src/components/command/command-palette.tsx

@@ -0,0 +1,375 @@
+import * as React from "react"
+import { Loader2Icon, SearchIcon } from "lucide-react"
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { cn } from "@/lib/utils"
+
+export type CommandPaletteItem = {
+  id: string
+  label: React.ReactNode
+  value?: string
+  description?: React.ReactNode
+  icon?: React.ReactNode
+  shortcut?: React.ReactNode
+  disabled?: boolean
+  disabledReason?: React.ReactNode
+  hidden?: boolean
+  keywords?: string[]
+  closeOnSelect?: boolean
+  onSelect?: () => void | Promise<void>
+}
+
+export type CommandPaletteGroup = {
+  id: string
+  label?: React.ReactNode
+  items?: CommandPaletteItem[]
+  loadItems?: (search: string) => Promise<CommandPaletteItem[]>
+  loadingLabel?: React.ReactNode
+  emptyLabel?: React.ReactNode
+  hidden?: boolean
+}
+
+export type CommandPaletteRecentConfig = {
+  enabled?: boolean
+  label?: React.ReactNode
+  limit?: number
+}
+
+export type CommandPaletteProps = {
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  title?: React.ReactNode
+  description?: React.ReactNode
+  placeholder?: string
+  emptyLabel?: React.ReactNode
+  loadingLabel?: React.ReactNode
+  groups: CommandPaletteGroup[]
+  value?: string
+  onValueChange?: (value: string) => void
+  debounceMs?: number
+  recent?: CommandPaletteRecentConfig | boolean
+  filterItem?: (item: CommandPaletteItem, search: string) => boolean
+  renderEmpty?: (search: string) => React.ReactNode
+  renderLoading?: (search: string) => React.ReactNode
+  onItemSelect?: (item: CommandPaletteItem, group: CommandPaletteGroup) => void
+  className?: string
+  contentClassName?: string
+  inputClassName?: string
+  listClassName?: string
+}
+
+type AsyncGroupState = {
+  items: CommandPaletteItem[]
+  loading: boolean
+  error?: unknown
+}
+
+type RuntimeCommandPaletteGroup = CommandPaletteGroup & AsyncGroupState & {
+  items: CommandPaletteItem[]
+}
+
+function itemText(item: CommandPaletteItem) {
+  return [
+    item.value,
+    typeof item.label === "string" || typeof item.label === "number" ? String(item.label) : item.id,
+    typeof item.description === "string" || typeof item.description === "number" ? String(item.description) : "",
+    ...(item.keywords ?? []),
+  ]
+    .filter(Boolean)
+    .join(" ")
+    .toLowerCase()
+}
+
+function defaultFilterItem(item: CommandPaletteItem, search: string) {
+  if (!search) return true
+  return itemText(item).includes(search.trim().toLowerCase())
+}
+
+function resolveRecentConfig(recent?: CommandPaletteRecentConfig | boolean): Required<CommandPaletteRecentConfig> {
+  if (recent === false) {
+    return { enabled: false, label: "Recent", limit: 5 }
+  }
+
+  if (recent === true || recent === undefined) {
+    return { enabled: true, label: "Recent", limit: 5 }
+  }
+
+  return {
+    enabled: recent.enabled ?? true,
+    label: recent.label ?? "Recent",
+    limit: recent.limit ?? 5,
+  }
+}
+
+function CommandPalette({
+  open,
+  onOpenChange,
+  title = "Command palette",
+  description = "Search commands and actions.",
+  placeholder = "Search...",
+  emptyLabel = "No results found.",
+  loadingLabel = "Loading commands...",
+  groups,
+  value,
+  onValueChange,
+  debounceMs = 180,
+  recent,
+  filterItem = defaultFilterItem,
+  renderEmpty,
+  renderLoading,
+  onItemSelect,
+  className,
+  contentClassName,
+  inputClassName,
+  listClassName,
+}: CommandPaletteProps) {
+  const [internalValue, setInternalValue] = React.useState("")
+  const [debouncedSearch, setDebouncedSearch] = React.useState("")
+  const [asyncGroups, setAsyncGroups] = React.useState<Record<string, AsyncGroupState>>({})
+  const [recentItems, setRecentItems] = React.useState<CommandPaletteItem[]>([])
+  const [loadingKey, setLoadingKey] = React.useState<string | null>(null)
+  const search = value ?? internalValue
+  const normalizedSearch = search.trim().toLowerCase()
+  const recentConfig = resolveRecentConfig(recent)
+
+  React.useEffect(() => {
+    const timeout = window.setTimeout(() => setDebouncedSearch(search), debounceMs)
+    return () => window.clearTimeout(timeout)
+  }, [debounceMs, search])
+
+  React.useEffect(() => {
+    if (!open) return
+
+    let active = true
+    const asyncLoaders = groups.filter((group) => !group.hidden && group.loadItems)
+
+    asyncLoaders.forEach((group) => {
+      setAsyncGroups((current) => ({
+        ...current,
+        [group.id]: {
+          items: current[group.id]?.items ?? [],
+          loading: true,
+          error: undefined,
+        },
+      }))
+
+      void group.loadItems?.(debouncedSearch).then(
+        (items) => {
+          if (!active) return
+          setAsyncGroups((current) => ({ ...current, [group.id]: { items, loading: false } }))
+        },
+        (error) => {
+          if (!active) return
+          setAsyncGroups((current) => ({ ...current, [group.id]: { items: [], loading: false, error } }))
+        },
+      )
+    })
+
+    return () => {
+      active = false
+    }
+  }, [debouncedSearch, groups, open])
+
+  const setSearch = (nextValue: string) => {
+    setInternalValue(nextValue)
+    onValueChange?.(nextValue)
+  }
+
+  const allItemsById = React.useMemo(() => {
+    const map = new Map<string, CommandPaletteItem>()
+
+    groups.forEach((group) => {
+      group.items?.forEach((item) => map.set(item.id, item))
+      asyncGroups[group.id]?.items.forEach((item) => map.set(item.id, item))
+    })
+
+    return map
+  }, [asyncGroups, groups])
+
+  const visibleGroups = React.useMemo<RuntimeCommandPaletteGroup[]>(
+    () =>
+      groups
+        .filter((group) => !group.hidden)
+        .map((group) => {
+          const asyncState = asyncGroups[group.id]
+          const mergedItems = [...(group.items ?? []), ...(asyncState?.items ?? [])]
+          const items = mergedItems.filter((item) => {
+            if (item.hidden) return false
+            return filterItem(item, normalizedSearch)
+          })
+
+          return {
+            ...group,
+            items,
+            loading: asyncState?.loading ?? false,
+            error: asyncState?.error,
+          } as RuntimeCommandPaletteGroup
+        })
+        .filter((group) => group.items.length > 0 || group.loading || group.error),
+    [asyncGroups, filterItem, groups, normalizedSearch],
+  )
+
+  const recentGroup = React.useMemo(() => {
+    if (!recentConfig.enabled || normalizedSearch || recentItems.length === 0) return null
+
+    return {
+      id: "__recent",
+      label: recentConfig.label,
+      items: recentItems.slice(0, recentConfig.limit),
+      loading: false,
+      error: undefined,
+    } as RuntimeCommandPaletteGroup
+  }, [normalizedSearch, recentConfig.enabled, recentConfig.label, recentConfig.limit, recentItems])
+
+  const renderedGroups = recentGroup ? [recentGroup, ...visibleGroups] : visibleGroups
+  const hasResults = renderedGroups.some((group) => group.items.length > 0)
+  const hasLoading = renderedGroups.some((group) => group.loading)
+
+  const pushRecentItem = (item: CommandPaletteItem) => {
+    if (!recentConfig.enabled) return
+
+    const source = allItemsById.get(item.id) ?? item
+    setRecentItems((current) => [source, ...current.filter((entry) => entry.id !== item.id)].slice(0, recentConfig.limit))
+  }
+
+  const handleSelect = async (item: CommandPaletteItem, group: RuntimeCommandPaletteGroup) => {
+    if (item.disabled || loadingKey) return
+
+    try {
+      setLoadingKey(item.id)
+      await item.onSelect?.()
+      onItemSelect?.(item, group)
+      pushRecentItem(item)
+      if (item.closeOnSelect !== false) {
+        onOpenChange?.(false)
+      }
+    } finally {
+      setLoadingKey(null)
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className={cn("overflow-hidden p-0 sm:max-w-xl", contentClassName)}>
+        <DialogHeader className="sr-only">
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+
+        <div
+          data-slot="command-palette"
+          className={cn("flex max-h-[32rem] flex-col overflow-hidden rounded-lg bg-popover text-popover-foreground", className)}
+        >
+          <div className="relative border-b p-2">
+            <SearchIcon className="pointer-events-none absolute left-4 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              value={search}
+              onChange={(event) => setSearch(event.target.value)}
+              placeholder={placeholder}
+              className={cn("border-0 pl-8 shadow-none focus-visible:ring-0", inputClassName)}
+              autoFocus
+            />
+          </div>
+
+          <div className={cn("overflow-y-auto p-2", listClassName)}>
+            {!hasResults && hasLoading && (
+              <div className="flex items-center justify-center gap-2 py-8 text-sm text-muted-foreground">
+                {renderLoading?.(search) ?? (
+                  <>
+                    <Loader2Icon className="size-4 animate-spin" />
+                    {loadingLabel}
+                  </>
+                )}
+              </div>
+            )}
+
+            {!hasResults && !hasLoading && (
+              <div className="py-8 text-center text-sm text-muted-foreground">
+                {renderEmpty?.(search) ?? emptyLabel}
+              </div>
+            )}
+
+            {renderedGroups.map((group) => (
+              <div key={group.id} className="py-1">
+                {group.label && (
+                  <div className="flex items-center justify-between px-2 py-1.5 text-xs font-medium text-muted-foreground">
+                    <span>{group.label}</span>
+                    {group.loading && <Loader2Icon className="size-3.5 animate-spin" />}
+                  </div>
+                )}
+
+                {group.error ? (
+                  <div className="rounded-md px-2 py-2 text-xs text-destructive">
+                    Could not load commands.
+                  </div>
+                ) : null}
+
+                {group.loading && group.items.length === 0 && (
+                  <div className="rounded-md px-2 py-2 text-xs text-muted-foreground">
+                    {group.loadingLabel ?? loadingLabel}
+                  </div>
+                )}
+
+                {group.items.length === 0 && !group.loading && !group.error && group.emptyLabel && (
+                  <div className="rounded-md px-2 py-2 text-xs text-muted-foreground">{group.emptyLabel}</div>
+                )}
+
+                {group.items.map((item) => {
+                  const isLoading = loadingKey === item.id
+
+                  return (
+                    <button
+                      key={item.id}
+                      type="button"
+                      disabled={item.disabled || isLoading}
+                      data-disabled={item.disabled || undefined}
+                      className="flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-sm outline-none hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"
+                      onClick={() => void handleSelect(item, group)}
+                    >
+                      {item.icon && <span className="shrink-0 text-muted-foreground [&_svg]:size-4">{item.icon}</span>}
+                      <span className="min-w-0 flex-1">
+                        <span className="block truncate">{item.label}</span>
+                        {(item.description || item.disabledReason) && (
+                          <span className="block truncate text-xs text-muted-foreground">
+                            {item.disabled ? item.disabledReason ?? item.description : item.description}
+                          </span>
+                        )}
+                      </span>
+                      {isLoading && <Loader2Icon className="size-3.5 animate-spin text-muted-foreground" />}
+                      {item.shortcut && <span className="text-xs text-muted-foreground">{item.shortcut}</span>}
+                    </button>
+                  )
+                })}
+              </div>
+            ))}
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function useCommandPaletteShortcut(onOpenChange: (open: boolean) => void, enabled = true) {
+  React.useEffect(() => {
+    if (!enabled) return
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
+        event.preventDefault()
+        onOpenChange(true)
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [enabled, onOpenChange])
+}
+
+export { CommandPalette, useCommandPaletteShortcut }

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

@@ -0,0 +1 @@
+export * from "./command-palette"

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

@@ -0,0 +1,58 @@
+import * as React from "react"
+import type { ColumnDef, Row } from "@tanstack/react-table"
+
+import {
+  DataTableRowActions,
+  type DataTableRowAction,
+} from "@/components/data-table/data-table-row-actions"
+import { cn } from "@/lib/utils"
+
+export type DataTableActionsColumnOptions<TData> = {
+  id?: string
+  size?: number
+  header?: React.ReactNode
+  headerClassName?: string
+  cellClassName?: string
+  actions?: DataTableRowAction<TData>[]
+  getActions?: (row: Row<TData>, original: TData) => DataTableRowAction<TData>[]
+  label?: React.ReactNode
+  emptyLabel?: React.ReactNode
+}
+
+function createDataTableActionsColumn<TData>({
+  id = "actions",
+  size = 56,
+  header,
+  headerClassName,
+  cellClassName,
+  actions,
+  getActions,
+  label,
+  emptyLabel,
+}: DataTableActionsColumnOptions<TData> = {}): ColumnDef<TData> {
+  return {
+    id,
+    size,
+    enableSorting: false,
+    enableHiding: false,
+    header: () =>
+      header ? (
+        <div className={cn("flex items-center justify-end", headerClassName)}>
+          {header}
+        </div>
+      ) : null,
+    cell: ({ row }) => (
+      <div className={cn("flex items-center justify-end", cellClassName)}>
+        <DataTableRowActions
+          row={row}
+          actions={actions}
+          getActions={getActions}
+          label={label}
+          emptyLabel={emptyLabel}
+        />
+      </div>
+    ),
+  }
+}
+
+export { createDataTableActionsColumn }

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

@@ -0,0 +1,84 @@
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+
+import {
+  ActionMenu,
+  type ActionMenuItem,
+  type ActionMenuProps,
+} from "@/components/actions/action-menu"
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+export type DataTableBulkAction<TData> = Omit<ActionMenuItem, "onSelect"> & {
+  onSelect?: (rows: TData[]) => void | Promise<void>
+}
+
+export type DataTableBulkActionsProps<TData> = Omit<
+  ActionMenuProps,
+  "actions" | "trigger"
+> & {
+  rows: TData[]
+  actions: DataTableBulkAction<TData>[]
+  label?: React.ReactNode
+  selectedLabel?: (count: number) => React.ReactNode
+  clearLabel?: React.ReactNode
+  onClearSelection?: () => void
+  hideWhenEmpty?: boolean
+  triggerClassName?: string
+}
+
+function DataTableBulkActions<TData>({
+  rows,
+  actions,
+  label = "Bulk actions",
+  selectedLabel = (count) => `${count} selected`,
+  clearLabel = "Clear",
+  onClearSelection,
+  hideWhenEmpty = true,
+  triggerClassName,
+  disabled,
+  ...props
+}: DataTableBulkActionsProps<TData>) {
+  const count = rows.length
+
+  if (hideWhenEmpty && count === 0) {
+    return null
+  }
+
+  const resolvedActions: ActionMenuItem[] = actions.map((action) => ({
+    ...action,
+    disabled: action.disabled || count === 0,
+    onSelect: action.onSelect ? () => action.onSelect?.(rows) : undefined,
+  }))
+
+  return (
+    <div data-slot="data-table-bulk-actions" className="flex items-center gap-2">
+      <ActionMenu
+        label={label}
+        actions={resolvedActions}
+        disabled={disabled || count === 0}
+        trigger={
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            disabled={disabled || count === 0}
+            className={cn("gap-1.5", triggerClassName)}
+          >
+            {selectedLabel(count)}
+            <ChevronDownIcon className="size-3.5" />
+          </Button>
+        }
+        {...props}
+      />
+
+      {onClearSelection && count > 0 && (
+        <Button type="button" variant="ghost" size="sm" onClick={onClearSelection}>
+          {clearLabel}
+        </Button>
+      )}
+    </div>
+  )
+}
+
+export { DataTableBulkActions }

package/vendor/src/components/data-table/data-table-column-visibility-menu.tsx

@@ -0,0 +1,79 @@
+import * as React from "react"
+import { Columns3Icon } from "lucide-react"
+import type { Table as TanStackTable } from "@tanstack/react-table"
+
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { cn } from "@/lib/utils"
+
+export type DataTableColumnVisibilityMenuProps<TData> = {
+  table: TanStackTable<TData>
+  label?: React.ReactNode
+  triggerLabel?: React.ReactNode
+  align?: "start" | "center" | "end"
+  side?: "top" | "right" | "bottom" | "left"
+  triggerClassName?: string
+  contentClassName?: string
+  getColumnLabel?: (columnId: string) => React.ReactNode
+}
+
+function defaultColumnLabel(columnId: string) {
+  return columnId
+    .replace(/_/g, " ")
+    .replace(/-/g, " ")
+    .replace(/\b\w/g, (char) => char.toUpperCase())
+}
+
+function DataTableColumnVisibilityMenu<TData>({
+  table,
+  label = "Columns",
+  triggerLabel,
+  align = "end",
+  side = "bottom",
+  triggerClassName,
+  contentClassName,
+  getColumnLabel = defaultColumnLabel,
+}: DataTableColumnVisibilityMenuProps<TData>) {
+  const columns = table
+    .getAllLeafColumns()
+    .filter((column) => column.getCanHide())
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={
+          <Button type="button" variant="outline" size="sm" className={triggerClassName} />
+        }
+      >
+        <Columns3Icon data-icon="inline-start" />
+        {triggerLabel ?? label}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align={align}
+        side={side}
+        className={cn("min-w-48", contentClassName)}
+      >
+        <DropdownMenuLabel>{label}</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {columns.map((column) => (
+          <DropdownMenuCheckboxItem
+            key={column.id}
+            checked={column.getIsVisible()}
+            onCheckedChange={(value) => column.toggleVisibility(Boolean(value))}
+          >
+            {getColumnLabel(column.id)}
+          </DropdownMenuCheckboxItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+export { DataTableColumnVisibilityMenu }

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

@@ -0,0 +1,91 @@
+import * as React from "react"
+
+import { SimpleSelect } from "@/components/inputs/simple-select"
+import { Pagination, type PaginationLabels } from "@/components/navigation/pagination"
+import { cn } from "@/lib/utils"
+
+export type DataTablePaginationLabels = PaginationLabels & {
+  rowsPerPage?: React.ReactNode
+  pageInfo?: (page: number, pageCount: number, rowCount?: number) => React.ReactNode
+}
+
+export type DataTablePaginationProps = React.ComponentProps<"div"> & {
+  pageIndex: number
+  pageSize: number
+  pageCount?: number
+  rowCount?: number
+  pageSizeOptions?: number[]
+  disabled?: boolean
+  showPageSize?: boolean
+  labels?: DataTablePaginationLabels
+  onPageChange?: (pageIndex: number) => void
+  onPageSizeChange?: (pageSize: number) => void
+}
+
+function getDataTablePageCount(pageSize: number, pageCount?: number, rowCount?: number) {
+  if (typeof pageCount === "number") return Math.max(pageCount, 1)
+  if (typeof rowCount === "number") return Math.max(Math.ceil(rowCount / pageSize), 1)
+  return 1
+}
+
+function DataTablePagination({
+  className,
+  pageIndex,
+  pageSize,
+  pageCount,
+  rowCount,
+  pageSizeOptions = [10, 20, 30, 50, 100],
+  disabled = false,
+  showPageSize = true,
+  labels,
+  onPageChange,
+  onPageSizeChange,
+  ...props
+}: DataTablePaginationProps) {
+  const resolvedPageCount = getDataTablePageCount(pageSize, pageCount, rowCount)
+  const currentPage = Math.min(Math.max(pageIndex + 1, 1), resolvedPageCount)
+
+  return (
+    <div
+      data-slot="data-table-pagination"
+      className={cn(
+        "flex flex-col gap-3 border-t border-border/80 px-4 py-3 sm:flex-row sm:items-center sm:justify-between",
+        className
+      )}
+      {...props}
+    >
+      <div className="text-sm font-medium text-muted-foreground">
+        {labels?.pageInfo?.(currentPage, resolvedPageCount, rowCount) ??
+          `Page ${currentPage} of ${resolvedPageCount}`}
+      </div>
+
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+        {showPageSize && onPageSizeChange && (
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <span>{labels?.rowsPerPage ?? "Rows per page"}</span>
+            <SimpleSelect
+              value={String(pageSize)}
+              onValueChange={(value) => onPageSizeChange(Number(value))}
+              options={pageSizeOptions.map((option) => ({
+                label: String(option),
+                value: String(option),
+              }))}
+              disabled={disabled}
+              triggerClassName="h-9 w-20 rounded-full border-border/80 bg-background/90"
+            />
+          </div>
+        )}
+
+        <Pagination
+          page={currentPage}
+          pageCount={resolvedPageCount}
+          disabled={disabled}
+          labels={labels}
+          onPageChange={(nextPage) => onPageChange?.(nextPage - 1)}
+        />
+      </div>
+    </div>
+  )
+}
+
+export { DataTablePagination, getDataTablePageCount }