azamat-ui-kit-cli 0.2.2

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

@@ -0,0 +1,48 @@
+import type { Row } from "@tanstack/react-table"
+
+import {
+  ActionMenu,
+  type ActionMenuItem,
+  type ActionMenuProps,
+} from "@/components/actions/action-menu"
+
+export type DataTableRowAction<TData> = Omit<ActionMenuItem, "onSelect"> & {
+  onSelect?: (row: Row<TData>, original: TData) => void | Promise<void>
+}
+
+export type DataTableRowActionsProps<TData> = Omit<ActionMenuProps, "actions"> & {
+  row: Row<TData>
+  actions?: DataTableRowAction<TData>[]
+  getActions?: (row: Row<TData>, original: TData) => DataTableRowAction<TData>[]
+}
+
+function resolveRowActions<TData>(
+  row: Row<TData>,
+  actions?: DataTableRowAction<TData>[],
+  getActions?: (row: Row<TData>, original: TData) => DataTableRowAction<TData>[]
+): ActionMenuItem[] {
+  const resolvedActions = getActions?.(row, row.original) ?? actions ?? []
+
+  return resolvedActions.map((action) => ({
+    ...action,
+    onSelect: action.onSelect
+      ? () => action.onSelect?.(row, row.original)
+      : undefined,
+  }))
+}
+
+function DataTableRowActions<TData>({
+  row,
+  actions,
+  getActions,
+  ...props
+}: DataTableRowActionsProps<TData>) {
+  return (
+    <ActionMenu
+      actions={resolveRowActions(row, actions, getActions)}
+      {...props}
+    />
+  )
+}
+
+export { DataTableRowActions, resolveRowActions }

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

@@ -0,0 +1,59 @@
+import type { ColumnDef } from "@tanstack/react-table"
+
+import { Checkbox } from "@/components/ui/checkbox"
+import { cn } from "@/lib/utils"
+
+export type DataTableSelectColumnOptions<TData> = {
+  id?: string
+  size?: number
+  headerClassName?: string
+  cellClassName?: string
+  ariaLabel?: {
+    selectAll?: string
+    selectRow?: (row: TData) => string
+  }
+}
+
+function createDataTableSelectColumn<TData>({
+  id = "select",
+  size = 40,
+  headerClassName,
+  cellClassName,
+  ariaLabel,
+}: DataTableSelectColumnOptions<TData> = {}): ColumnDef<TData> {
+  return {
+    id,
+    size,
+    enableSorting: false,
+    enableHiding: false,
+    header: ({ table }) => (
+      <div className={cn("flex items-center justify-center", headerClassName)}>
+        <Checkbox
+          checked={
+            table.getIsAllPageRowsSelected()
+              ? true
+              : table.getIsSomePageRowsSelected()
+                ? "indeterminate"
+                : false
+          }
+          aria-label={ariaLabel?.selectAll ?? "Select all rows"}
+          onClick={(event) => event.stopPropagation()}
+          onCheckedChange={(checked) => table.toggleAllPageRowsSelected(checked)}
+        />
+      </div>
+    ),
+    cell: ({ row }) => (
+      <div className={cn("flex items-center justify-center", cellClassName)}>
+        <Checkbox
+          checked={row.getIsSelected()}
+          disabled={!row.getCanSelect()}
+          aria-label={ariaLabel?.selectRow?.(row.original) ?? "Select row"}
+          onClick={(event) => event.stopPropagation()}
+          onCheckedChange={(checked) => row.toggleSelected(checked)}
+        />
+      </div>
+    ),
+  }
+}
+
+export { createDataTableSelectColumn }

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

@@ -0,0 +1,45 @@
+import * as React from "react"
+import { ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon } from "lucide-react"
+import type { Column } from "@tanstack/react-table"
+
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+export type DataTableSortableHeaderProps<TData, TValue> = React.ComponentProps<"div"> & {
+  column: Column<TData, TValue>
+  children?: React.ReactNode
+  label?: React.ReactNode
+  disabled?: boolean
+  buttonClassName?: string
+}
+
+function DataTableSortableHeader<TData, TValue>({
+  className,
+  column,
+  children,
+  label,
+  disabled,
+  buttonClassName,
+  ...props
+}: DataTableSortableHeaderProps<TData, TValue>) {
+  const sorted = column.getIsSorted()
+  const Icon = sorted === "asc" ? ArrowUpIcon : sorted === "desc" ? ArrowDownIcon : ArrowUpDownIcon
+
+  return (
+    <div className={cn("flex items-center", className)} {...props}>
+      <Button
+        type="button"
+        variant="ghost"
+        size="sm"
+        className={cn("-ml-2 h-8 px-2 font-medium", buttonClassName)}
+        disabled={disabled || !column.getCanSort()}
+        onClick={() => column.toggleSorting(sorted === "asc")}
+      >
+        <span>{children ?? label}</span>
+        <Icon className="ml-1 size-3.5" />
+      </Button>
+    </div>
+  )
+}
+
+export { DataTableSortableHeader }

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

@@ -0,0 +1,76 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type DataTableToolbarProps = React.ComponentProps<"div"> & {
+  title?: React.ReactNode
+  description?: React.ReactNode
+  search?: React.ReactNode
+  filters?: React.ReactNode
+  actions?: React.ReactNode
+  selectionActions?: React.ReactNode
+  selectedCount?: number
+  totalCount?: number
+  selectedLabel?: (selectedCount: number, totalCount?: number) => React.ReactNode
+}
+
+function DataTableToolbar({
+  className,
+  title,
+  description,
+  search,
+  filters,
+  actions,
+  selectionActions,
+  selectedCount = 0,
+  totalCount,
+  selectedLabel = (selected, total) =>
+    total === undefined ? `${selected} selected` : `${selected} of ${total} selected`,
+  children,
+  ...props
+}: DataTableToolbarProps) {
+  const hasHeading = Boolean(title || description)
+  const hasSelection = selectedCount > 0 && Boolean(selectionActions)
+
+  return (
+    <div
+      data-slot="data-table-toolbar"
+      className={cn("flex flex-col gap-4 rounded-[var(--radius-2xl)] p-4 md:p-5", className)}
+      {...props}
+    >
+      {(hasHeading || actions) && (
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+          {hasHeading && (
+            <div className="grid gap-1">
+              {title && <h2 className="text-lg font-semibold tracking-tight text-foreground">{title}</h2>}
+              {description && <p className="text-sm leading-6 text-muted-foreground">{description}</p>}
+            </div>
+          )}
+
+          {actions && <div className="flex shrink-0 flex-wrap items-center gap-2">{actions}</div>}
+        </div>
+      )}
+
+      {(search || filters || hasSelection || children) && (
+        <div className="flex flex-col gap-2 lg:flex-row lg:items-center lg:justify-between">
+          <div className="flex min-w-0 flex-1 flex-col gap-2 sm:flex-row sm:items-center">
+            {search}
+            {filters}
+            {children}
+          </div>
+
+          {hasSelection && (
+            <div className="flex shrink-0 items-center gap-2 rounded-full border border-border/70 bg-background/88 px-2.5 py-1.5 text-sm shadow-sm backdrop-blur">
+              <span className="text-muted-foreground">
+                {selectedLabel(selectedCount, totalCount)}
+              </span>
+              {selectionActions}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export { DataTableToolbar }

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

@@ -0,0 +1,128 @@
+import * as React from "react"
+
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { cn } from "@/lib/utils"
+
+export type DataTableViewPreset<TValue extends string = string> = {
+  value: TValue
+  label: React.ReactNode
+  description?: React.ReactNode
+  icon?: React.ReactNode
+  count?: React.ReactNode
+  disabled?: boolean
+  hidden?: boolean
+}
+
+export type DataTableViewPresetsProps<TValue extends string = string> = Omit<React.ComponentProps<"div">, "onChange"> & {
+  value?: TValue
+  presets: DataTableViewPreset<TValue>[]
+  onValueChange?: (value: TValue | undefined, preset?: DataTableViewPreset<TValue>) => void
+  clearable?: boolean
+  clearLabel?: React.ReactNode
+  emptyLabel?: React.ReactNode
+  size?: "xs" | "sm" | "default"
+  variant?: "tabs" | "buttons" | "pills"
+  renderPreset?: (preset: DataTableViewPreset<TValue>, state: { active: boolean }) => React.ReactNode
+  presetClassName?: string
+  activePresetClassName?: string
+}
+
+const sizeClassName: Record<NonNullable<DataTableViewPresetsProps["size"]>, string> = {
+  xs: "h-7 px-2 text-xs",
+  sm: "h-8 px-3 text-sm",
+  default: "h-9 px-3 text-sm",
+}
+
+function DataTableViewPresets<TValue extends string = string>({
+  className,
+  value,
+  presets,
+  onValueChange,
+  clearable = true,
+  clearLabel = "Clear",
+  emptyLabel = "No views",
+  size = "sm",
+  variant = "pills",
+  renderPreset,
+  presetClassName,
+  activePresetClassName,
+  ...props
+}: DataTableViewPresetsProps<TValue>) {
+  const visiblePresets = presets.filter((preset) => !preset.hidden)
+  const activePreset = visiblePresets.find((preset) => preset.value === value)
+  const canClear = clearable && Boolean(value)
+
+  if (visiblePresets.length === 0) {
+    return (
+      <div data-slot="data-table-view-presets-empty" className={cn("text-sm text-muted-foreground", className)} {...props}>
+        {emptyLabel}
+      </div>
+    )
+  }
+
+  return (
+    <div
+      data-slot="data-table-view-presets"
+      data-variant={variant}
+      className={cn(
+        "flex min-w-0 flex-wrap items-center gap-2 rounded-[var(--radius-xl)] border border-border/70 bg-background/88 p-2 shadow-sm backdrop-blur",
+        className
+      )}
+      {...props}
+    >
+      {visiblePresets.map((preset) => {
+        const active = preset.value === value
+
+        return (
+          <Button
+            key={preset.value}
+            type="button"
+            variant={active ? "default" : variant === "tabs" ? "ghost" : "outline"}
+            size={size === "default" ? "sm" : size}
+            disabled={preset.disabled}
+            data-active={active || undefined}
+            className={cn(
+              "min-w-0 gap-1.5 rounded-full shadow-none",
+              sizeClassName[size],
+              variant === "tabs" && "rounded-[var(--radius-lg)] border border-transparent bg-transparent data-[active=true]:border-border data-[active=true]:bg-background",
+              variant === "buttons" && "rounded-[var(--radius-lg)]",
+              !active && "border-border/70 bg-transparent hover:border-border hover:bg-accent/60",
+              presetClassName,
+              active && "shadow-sm",
+              active && activePresetClassName
+            )}
+            title={typeof preset.description === "string" ? preset.description : undefined}
+            onClick={() => onValueChange?.(preset.value, preset)}
+          >
+            {renderPreset?.(preset, { active }) ?? (
+              <>
+                {preset.icon && <span className="shrink-0 [&_svg]:size-3.5">{preset.icon}</span>}
+                <span className="truncate">{preset.label}</span>
+                {preset.count !== undefined && (
+                  <Badge variant={active ? "secondary" : "outline"} className="h-5 px-1.5 text-[10px]">
+                    {preset.count}
+                  </Badge>
+                )}
+              </>
+            )}
+          </Button>
+        )
+      })}
+
+      {canClear && (
+        <Button
+          type="button"
+          variant="ghost"
+          size={size === "default" ? "sm" : size}
+          className="rounded-full"
+          onClick={() => onValueChange?.(undefined, activePreset)}
+        >
+          {clearLabel}
+        </Button>
+      )}
+    </div>
+  )
+}
+
+export { DataTableViewPresets }