azamat-ui-kit-cli 0.2.2

package/vendor/src/components/feedback/alert.tsx

@@ -0,0 +1,69 @@
+import * as React from "react"
+import { AlertCircleIcon, CheckCircle2Icon, InfoIcon, TriangleAlertIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+export type AlertTone = "info" | "success" | "warning" | "destructive" | "muted"
+
+export type AlertProps = React.ComponentProps<"div"> & {
+  tone?: AlertTone
+  title?: React.ReactNode
+  description?: React.ReactNode
+  icon?: React.ReactNode
+  action?: React.ReactNode
+}
+
+const alertToneClassName: Record<AlertTone, string> = {
+  info: "border-primary/25 bg-primary/5 text-foreground",
+  success: "border-emerald-500/25 bg-emerald-500/10 text-foreground",
+  warning: "border-amber-500/30 bg-amber-500/10 text-foreground",
+  destructive: "border-destructive/30 bg-destructive/10 text-foreground",
+  muted: "border-border bg-muted/50 text-foreground",
+}
+
+const alertIconClassName: Record<AlertTone, string> = {
+  info: "text-primary",
+  success: "text-emerald-600 dark:text-emerald-400",
+  warning: "text-amber-600 dark:text-amber-400",
+  destructive: "text-destructive",
+  muted: "text-muted-foreground",
+}
+
+function defaultIcon(tone: AlertTone) {
+  switch (tone) {
+    case "success":
+      return <CheckCircle2Icon className="size-4" />
+    case "warning":
+      return <TriangleAlertIcon className="size-4" />
+    case "destructive":
+      return <AlertCircleIcon className="size-4" />
+    default:
+      return <InfoIcon className="size-4" />
+  }
+}
+
+function Alert({ tone = "info", title, description, icon, action, className, children, ...props }: AlertProps) {
+  return (
+    <div
+      data-slot="alert"
+      role={tone === "destructive" || tone === "warning" ? "alert" : "status"}
+      className={cn("flex gap-3 rounded-lg border p-4 text-sm", alertToneClassName[tone], className)}
+      {...props}
+    >
+      <div data-slot="alert-icon" className={cn("mt-0.5 shrink-0", alertIconClassName[tone])}>
+        {icon ?? defaultIcon(tone)}
+      </div>
+      <div className="min-w-0 flex-1 space-y-1">
+        {title && <div data-slot="alert-title" className="font-medium leading-none">{title}</div>}
+        {(description || children) && (
+          <div data-slot="alert-description" className="text-muted-foreground">
+            {description ?? children}
+          </div>
+        )}
+      </div>
+      {action && <div data-slot="alert-action" className="shrink-0">{action}</div>}
+    </div>
+  )
+}
+
+export { Alert }

package/vendor/src/components/feedback/empty-state.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import { InboxIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+export type EmptyStateProps = React.ComponentProps<"div"> & {
+  icon?: React.ReactNode
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: React.ReactNode
+  actionLabel?: React.ReactNode
+  onAction?: () => void
+}
+
+function EmptyState({
+  className,
+  icon,
+  title = "No data",
+  description,
+  action,
+  actionLabel,
+  onAction,
+  ...props
+}: EmptyStateProps) {
+  return (
+    <div
+      data-slot="empty-state"
+      className={cn(
+        "flex min-h-52 flex-col items-center justify-center gap-4 rounded-[var(--radius-3xl)] border border-dashed border-border/80 bg-muted/25 p-10 text-center shadow-sm",
+        className
+      )}
+      {...props}
+    >
+      <div className="flex size-12 items-center justify-center rounded-full border border-border/70 bg-background/90 text-muted-foreground shadow-sm">
+        {icon ?? <InboxIcon className="size-5" />}
+      </div>
+
+      <div className="grid gap-1.5">
+        {title && <h3 className="text-base font-semibold tracking-tight text-foreground">{title}</h3>}
+        {description && (
+          <p className="max-w-sm text-sm leading-6 text-muted-foreground">{description}</p>
+        )}
+      </div>
+
+      {action ??
+        (actionLabel && onAction ? (
+          <Button type="button" variant="outline" size="sm" onClick={onAction}>
+            {actionLabel}
+          </Button>
+        ) : null)}
+    </div>
+  )
+}
+
+export { EmptyState }

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

@@ -0,0 +1,5 @@
+export * from "./empty-state"
+export * from "./loading-state"
+export * from "./status-badge"
+export * from "./alert"
+export * from "./page-state"

package/vendor/src/components/feedback/loading-state.tsx

@@ -0,0 +1,39 @@
+import * as React from "react"
+import { Loader2Icon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+export type LoadingStateProps = React.ComponentProps<"div"> & {
+  label?: React.ReactNode
+  description?: React.ReactNode
+  icon?: React.ReactNode
+}
+
+function LoadingState({
+  className,
+  label = "Loading...",
+  description,
+  icon,
+  ...props
+}: LoadingStateProps) {
+  return (
+    <div
+      data-slot="loading-state"
+      className={cn(
+        "flex min-h-52 flex-col items-center justify-center gap-4 rounded-[var(--radius-3xl)] border border-border/70 bg-muted/25 p-10 text-center text-muted-foreground shadow-sm",
+        className
+      )}
+      {...props}
+    >
+      <div className="flex size-12 items-center justify-center rounded-full border border-border/70 bg-background/90 shadow-sm">
+        {icon ?? <Loader2Icon className="size-5 animate-spin" />}
+      </div>
+      <div className="grid gap-1.5">
+        {label && <div className="text-base font-semibold tracking-tight text-foreground">{label}</div>}
+        {description && <p className="max-w-sm text-sm leading-6">{description}</p>}
+      </div>
+    </div>
+  )
+}
+
+export { LoadingState }

package/vendor/src/components/feedback/page-state.tsx

@@ -0,0 +1,69 @@
+import * as React from "react"
+import { AlertCircleIcon, CheckCircle2Icon, InfoIcon, Loader2Icon, SearchXIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+export type PageStateTone = "empty" | "loading" | "error" | "success" | "info"
+
+export type PageStateProps = Omit<React.ComponentProps<"div">, "title"> & {
+  tone?: PageStateTone
+  title?: React.ReactNode
+  description?: React.ReactNode
+  icon?: React.ReactNode
+  action?: React.ReactNode
+  compact?: boolean
+}
+
+function defaultPageStateIcon(tone: PageStateTone) {
+  switch (tone) {
+    case "loading":
+      return <Loader2Icon className="size-8 animate-spin" />
+    case "error":
+      return <AlertCircleIcon className="size-8" />
+    case "success":
+      return <CheckCircle2Icon className="size-8" />
+    case "info":
+      return <InfoIcon className="size-8" />
+    default:
+      return <SearchXIcon className="size-8" />
+  }
+}
+
+function PageState({ tone = "empty", title, description, icon, action, compact = false, className, ...props }: PageStateProps) {
+  return (
+    <div
+      data-slot="page-state"
+      role={tone === "error" ? "alert" : "status"}
+      className={cn("flex flex-col items-center justify-center rounded-lg border bg-card text-center", compact ? "gap-2 p-6" : "min-h-72 gap-4 p-10", className)}
+      {...props}
+    >
+      <div className="flex size-14 items-center justify-center rounded-full bg-muted text-muted-foreground">
+        {icon ?? defaultPageStateIcon(tone)}
+      </div>
+      <div className="grid gap-1">
+        {title && <div className="text-base font-semibold text-foreground">{title}</div>}
+        {description && <div className="max-w-md text-sm text-muted-foreground">{description}</div>}
+      </div>
+      {action && <div>{action}</div>}
+    </div>
+  )
+}
+
+export type InlineStateProps = Omit<PageStateProps, "compact"> & {
+  retryLabel?: React.ReactNode
+  onRetry?: () => void
+}
+
+function InlineState({ retryLabel = "Retry", onRetry, action, className, ...props }: InlineStateProps) {
+  return (
+    <PageState
+      compact
+      className={cn("min-h-0", className)}
+      action={action ?? (onRetry ? <Button type="button" variant="outline" size="sm" onClick={onRetry}>{retryLabel}</Button> : undefined)}
+      {...props}
+    />
+  )
+}
+
+export { InlineState, PageState }

package/vendor/src/components/feedback/status-badge.tsx

@@ -0,0 +1,62 @@
+import * as React from "react"
+
+import { Badge, badgeVariants } from "@/components/ui/badge"
+import { cn } from "@/lib/utils"
+
+type BadgeVariant = NonNullable<Parameters<typeof badgeVariants>[0]>["variant"]
+
+export type StatusBadgeTone =
+  | "default"
+  | "success"
+  | "warning"
+  | "danger"
+  | "info"
+  | "muted"
+  | "outline"
+
+export type StatusBadgeProps = React.ComponentProps<typeof Badge> & {
+  tone?: StatusBadgeTone
+  dot?: boolean
+}
+
+const toneClassName: Record<StatusBadgeTone, string> = {
+  default: "border-primary/10 bg-primary/8 text-primary shadow-sm",
+  success: "border-emerald-500/20 bg-emerald-500/12 text-emerald-700 shadow-sm dark:text-emerald-300",
+  warning: "border-amber-500/22 bg-amber-500/12 text-amber-700 shadow-sm dark:text-amber-300",
+  danger: "border-destructive/18 bg-destructive/12 text-destructive shadow-sm",
+  info: "border-blue-500/20 bg-blue-500/12 text-blue-700 shadow-sm dark:text-blue-300",
+  muted: "border-border/70 bg-muted/80 text-muted-foreground",
+  outline: "border-border/80 bg-background/90 text-foreground shadow-sm",
+}
+
+const toneVariant: Record<StatusBadgeTone, BadgeVariant> = {
+  default: "default",
+  success: "secondary",
+  warning: "secondary",
+  danger: "destructive",
+  info: "secondary",
+  muted: "secondary",
+  outline: "outline",
+}
+
+function StatusBadge({
+  className,
+  tone = "default",
+  dot = false,
+  children,
+  ...props
+}: StatusBadgeProps) {
+  return (
+    <Badge
+      data-slot="status-badge"
+      variant={toneVariant[tone]}
+      className={cn("rounded-full px-2.5 py-1 text-[11px] font-semibold tracking-[0.01em]", toneClassName[tone], className)}
+      {...props}
+    >
+      {dot && <span className="size-1.5 rounded-full bg-current shadow-[0_0_0_3px_color-mix(in_oklch,currentColor,transparent_82%)]" />}
+      {children}
+    </Badge>
+  )
+}
+
+export { StatusBadge }

package/vendor/src/components/filters/filter-bar.tsx

@@ -0,0 +1,89 @@
+import * as React from "react"
+import { SlidersHorizontalIcon, XIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+export type FilterBarProps = React.ComponentProps<"div"> & {
+  search?: React.ReactNode
+  filters?: React.ReactNode
+  actions?: React.ReactNode
+  activeCount?: number
+  activeLabel?: (count: number) => React.ReactNode
+  resetLabel?: React.ReactNode
+  onReset?: () => void
+  collapsible?: boolean
+  defaultExpanded?: boolean
+}
+
+function FilterBar({
+  className,
+  search,
+  filters,
+  actions,
+  activeCount = 0,
+  activeLabel = (count) => `${count} active`,
+  resetLabel = "Reset",
+  onReset,
+  collapsible = false,
+  defaultExpanded = false,
+  children,
+  ...props
+}: FilterBarProps) {
+  const [expanded, setExpanded] = React.useState(defaultExpanded)
+  const hasFilters = Boolean(filters || children)
+  const shouldShowFilters = !collapsible || expanded
+
+  return (
+    <div
+      data-slot="filter-bar"
+      className={cn("flex flex-col gap-3 rounded-lg border bg-card p-3", className)}
+      {...props}
+    >
+      <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 && <div className="min-w-0 flex-1">{search}</div>}
+
+          {collapsible && hasFilters && (
+            <Button
+              type="button"
+              variant={expanded ? "secondary" : "outline"}
+              size="sm"
+              onClick={() => setExpanded((value) => !value)}
+            >
+              <SlidersHorizontalIcon data-icon="inline-start" />
+              Filters
+              {activeCount > 0 && (
+                <span className="ml-1 rounded-full bg-background px-1.5 text-xs">
+                  {activeCount}
+                </span>
+              )}
+            </Button>
+          )}
+        </div>
+
+        <div className="flex shrink-0 flex-wrap items-center gap-2">
+          {activeCount > 0 && (
+            <span className="text-sm text-muted-foreground">{activeLabel(activeCount)}</span>
+          )}
+          {activeCount > 0 && onReset && (
+            <Button type="button" variant="ghost" size="sm" onClick={onReset}>
+              <XIcon data-icon="inline-start" />
+              {resetLabel}
+            </Button>
+          )}
+          {actions}
+        </div>
+      </div>
+
+      {hasFilters && shouldShowFilters && (
+        <div className="flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center">
+          {filters}
+          {children}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export { FilterBar }

package/vendor/src/components/filters/filter-chips.tsx

@@ -0,0 +1,69 @@
+import * as React from "react"
+import { XIcon } from "lucide-react"
+
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+export type FilterChip = {
+  key: string
+  label: React.ReactNode
+  value?: React.ReactNode
+  tone?: "default" | "success" | "warning" | "danger" | "info" | "muted"
+  disabled?: boolean
+  hidden?: boolean
+}
+
+export type FilterChipsProps = React.ComponentProps<"div"> & {
+  chips: FilterChip[]
+  clearLabel?: React.ReactNode
+  empty?: React.ReactNode
+  onRemove?: (key: string) => void
+  onClear?: () => void
+}
+
+const chipVariant: Record<NonNullable<FilterChip["tone"]>, React.ComponentProps<typeof Badge>["variant"]> = {
+  default: "secondary",
+  success: "secondary",
+  warning: "outline",
+  danger: "destructive",
+  info: "outline",
+  muted: "outline",
+}
+
+function FilterChips({
+  chips,
+  clearLabel = "Clear all",
+  empty = "No active filters",
+  onRemove,
+  onClear,
+  className,
+  ...props
+}: FilterChipsProps) {
+  const visibleChips = chips.filter((chip) => !chip.hidden)
+
+  if (!visibleChips.length) {
+    return <div data-slot="filter-chips-empty" className={cn("text-sm text-muted-foreground", className)} {...props}>{empty}</div>
+  }
+
+  return (
+    <div data-slot="filter-chips" className={cn("flex flex-wrap items-center gap-2", className)} {...props}>
+      {visibleChips.map((chip) => (
+        <Badge key={chip.key} variant={chipVariant[chip.tone ?? "default"]} className={cn("gap-1.5", chip.disabled && "opacity-60")}>
+          <span>{chip.label}</span>
+          {chip.value !== undefined && <span className="text-muted-foreground">{chip.value}</span>}
+          {onRemove && !chip.disabled && (
+            <button type="button" className="rounded-full p-0.5 hover:bg-muted" onClick={() => onRemove(chip.key)}>
+              <XIcon className="size-3" />
+            </button>
+          )}
+        </Badge>
+      ))}
+      {onClear && (
+        <Button type="button" variant="ghost" size="xs" onClick={onClear}>{clearLabel}</Button>
+      )}
+    </div>
+  )
+}
+
+export { FilterChips }

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

@@ -0,0 +1,2 @@
+export * from "./filter-bar"
+export * from "./filter-chips"

package/vendor/src/components/form/form-actions.tsx

@@ -0,0 +1,53 @@
+import * as React from "react"
+
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+export type FormActionsProps = React.ComponentProps<"div"> & {
+  submitLabel?: React.ReactNode
+  cancelLabel?: React.ReactNode
+  resetLabel?: React.ReactNode
+  loading?: boolean
+  disabled?: boolean
+  onCancel?: () => void
+  onReset?: () => void
+  align?: "start" | "end" | "between"
+}
+
+function FormActions({
+  submitLabel = "Save",
+  cancelLabel = "Cancel",
+  resetLabel,
+  loading = false,
+  disabled = false,
+  onCancel,
+  onReset,
+  align = "end",
+  className,
+  children,
+  ...props
+}: FormActionsProps) {
+  return (
+    <div
+      data-slot="form-actions"
+      className={cn(
+        "flex flex-wrap items-center gap-2 border-t pt-4",
+        align === "end" && "justify-end",
+        align === "between" && "justify-between",
+        align === "start" && "justify-start",
+        className
+      )}
+      {...props}
+    >
+      {children ?? (
+        <>
+          {resetLabel && <Button type="button" variant="ghost" disabled={disabled || loading} onClick={onReset}>{resetLabel}</Button>}
+          {onCancel && <Button type="button" variant="outline" disabled={disabled || loading} onClick={onCancel}>{cancelLabel}</Button>}
+          <Button type="submit" disabled={disabled || loading}>{loading ? "Saving..." : submitLabel}</Button>
+        </>
+      )}
+    </div>
+  )
+}
+
+export { FormActions }

package/vendor/src/components/form/form-async-select.tsx

@@ -0,0 +1,26 @@
+import {
+  FormSelect,
+  type FormSelectAsyncVariantProps as BaseFormAsyncSelectProps,
+} from "@/components/form/form-select"
+import type { AsyncSelectOption } from "@/components/inputs/async-select"
+import type { FieldPath, FieldValues } from "react-hook-form"
+
+export type FormAsyncSelectProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TValue extends string = string,
+  TData = unknown,
+  TOption extends AsyncSelectOption<TValue, TData> = AsyncSelectOption<TValue, TData>,
+> = Omit<BaseFormAsyncSelectProps<TFieldValues, TName, TValue, TData, TOption>, "kind">
+
+function FormAsyncSelect<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TValue extends string = string,
+  TData = unknown,
+  TOption extends AsyncSelectOption<TValue, TData> = AsyncSelectOption<TValue, TData>,
+>(props: FormAsyncSelectProps<TFieldValues, TName, TValue, TData, TOption>) {
+  return <FormSelect {...props} kind="async" />
+}
+
+export { FormAsyncSelect }

package/vendor/src/components/form/form-date-input.tsx

@@ -0,0 +1,19 @@
+import {
+  FormInput,
+  type FormInputDateVariantProps as BaseFormDateInputProps,
+} from "@/components/form/form-input"
+import type { FieldPath, FieldValues } from "react-hook-form"
+
+export type FormDateInputProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = Omit<BaseFormDateInputProps<TFieldValues, TName>, "kind">
+
+function FormDateInput<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>(props: FormDateInputProps<TFieldValues, TName>) {
+  return <FormInput {...props} kind="date" />
+}
+
+export { FormDateInput }

package/vendor/src/components/form/form-date-picker.tsx

@@ -0,0 +1,54 @@
+import { Controller, type Control, type FieldPath, type FieldValues } from "react-hook-form"
+
+import { DatePicker, type DatePickerProps } from "@/components/calendar/date-picker"
+import { FormFieldShell, type FormFieldShellProps } from "@/components/form/form-field-shell"
+
+export type FormDatePickerProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = Omit<DatePickerProps, "value" | "onValueChange"> &
+  Pick<FormFieldShellProps, "label" | "description" | "required" | "className"> & {
+    control: Control<TFieldValues>
+    name: TName
+    fieldClassName?: string
+    emptyValue?: unknown
+    onValueChange?: (value: string) => void
+  }
+
+function FormDatePicker<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  control,
+  name,
+  label,
+  description,
+  required,
+  className,
+  fieldClassName,
+  emptyValue = "",
+  onValueChange,
+  ...props
+}: FormDatePickerProps<TFieldValues, TName>) {
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={({ field, fieldState }) => (
+        <FormFieldShell label={label} description={description} required={required} error={fieldState.error?.message} className={className}>
+          <DatePicker
+            value={field.value ?? ""}
+            triggerClassName={fieldClassName}
+            onValueChange={(nextValue) => {
+              field.onChange(nextValue || emptyValue)
+              onValueChange?.(nextValue)
+            }}
+            {...props}
+          />
+        </FormFieldShell>
+      )}
+    />
+  )
+}
+
+export { FormDatePicker }