azamat-ui-kit-cli 0.2.2

package/vendor/src/components/patterns/action-system.tsx

@@ -0,0 +1,116 @@
+import * as React from "react"
+import { MoreHorizontalIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { cn } from "@/lib/utils"
+
+type MaybeFn<TItem, TResult> = TResult | ((item: TItem) => TResult)
+
+function resolveMaybeFn<TItem, TResult>(value: MaybeFn<TItem, TResult> | undefined, item: TItem): TResult | undefined {
+  return typeof value === "function" ? (value as (item: TItem) => TResult)(item) : value
+}
+
+export type ActionSystemAction<TItem = unknown> = {
+  key: string
+  label: React.ReactNode
+  icon?: React.ReactNode
+  description?: React.ReactNode
+  variant?: React.ComponentProps<typeof Button>["variant"]
+  disabled?: MaybeFn<TItem, boolean>
+  hidden?: MaybeFn<TItem, boolean>
+  confirm?: MaybeFn<TItem, string | { title?: string; description?: string } | undefined>
+  onClick?: (item: TItem, action: ActionSystemAction<TItem>) => void
+}
+
+export type ActionSystemLabels = {
+  more?: React.ReactNode
+  menu?: React.ReactNode
+  confirmFallback?: string
+}
+
+export type ActionSystemProps<TItem = unknown> = React.ComponentProps<"div"> & {
+  item: TItem
+  actions: ActionSystemAction<TItem>[]
+  mode?: "inline" | "menu" | "hybrid"
+  maxInline?: number
+  size?: React.ComponentProps<typeof Button>["size"]
+  labels?: ActionSystemLabels
+  onAction?: (item: TItem, action: ActionSystemAction<TItem>) => void
+  renderAction?: (action: ActionSystemAction<TItem>, item: TItem, state: { disabled: boolean }) => React.ReactNode
+  renderMenuItem?: (action: ActionSystemAction<TItem>, item: TItem, state: { disabled: boolean }) => React.ReactNode
+}
+
+function ActionSystem<TItem = unknown>({
+  item,
+  actions,
+  mode = "hybrid",
+  maxInline = 2,
+  size = "sm",
+  labels,
+  onAction,
+  renderAction,
+  renderMenuItem,
+  className,
+  ...props
+}: ActionSystemProps<TItem>) {
+  const visibleActions = actions.filter((action) => !resolveMaybeFn(action.hidden, item))
+  const inlineActions = mode === "menu" ? [] : visibleActions.slice(0, mode === "inline" ? visibleActions.length : maxInline)
+  const menuActions = mode === "inline" ? [] : visibleActions.slice(mode === "menu" ? 0 : maxInline)
+
+  const runAction = (action: ActionSystemAction<TItem>) => {
+    const confirm = resolveMaybeFn(action.confirm, item)
+    if (confirm) {
+      const message = typeof confirm === "string" ? confirm : confirm.description ?? confirm.title ?? labels?.confirmFallback ?? "Are you sure?"
+      if (typeof window !== "undefined" && !window.confirm(message)) return
+    }
+
+    action.onClick?.(item, action)
+    onAction?.(item, action)
+  }
+
+  return (
+    <div data-slot="action-system" className={cn("inline-flex items-center gap-2", className)} {...props}>
+      {inlineActions.map((action) => {
+        const disabled = Boolean(resolveMaybeFn(action.disabled, item))
+        return renderAction?.(action, item, { disabled }) ?? (
+          <Button key={action.key} type="button" size={size} variant={action.variant ?? "outline"} disabled={disabled} onClick={() => runAction(action)}>
+            {action.icon}
+            {action.label}
+          </Button>
+        )
+      })}
+      {menuActions.length > 0 && (
+        <DropdownMenu>
+          <DropdownMenuTrigger render={<Button type="button" size={size} variant="outline" />}>
+            <MoreHorizontalIcon />
+            <span className="sr-only">{labels?.more ?? "More actions"}</span>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="min-w-48">
+            {labels?.menu && <DropdownMenuLabel>{labels.menu}</DropdownMenuLabel>}
+            {menuActions.map((action) => {
+              const disabled = Boolean(resolveMaybeFn(action.disabled, item))
+              return renderMenuItem?.(action, item, { disabled }) ?? (
+                <DropdownMenuItem key={action.key} disabled={disabled} variant={action.variant === "destructive" ? "destructive" : "default"} onClick={() => runAction(action)}>
+                  {action.icon}
+                  <span className="grid gap-0.5">
+                    <span>{action.label}</span>
+                    {action.description && <span className="text-xs text-muted-foreground">{action.description}</span>}
+                  </span>
+                </DropdownMenuItem>
+              )
+            })}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )}
+    </div>
+  )
+}
+
+export { ActionSystem }

package/vendor/src/components/patterns/crud-system.tsx

@@ -0,0 +1,53 @@
+import * as React from "react"
+
+import { ActionSystem, type ActionSystemAction } from "@/components/patterns/action-system"
+import { ResourceSystem, type ResourceSystemProps } from "@/components/patterns/resource-system"
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+export type CrudSystemLabels = {
+  create?: React.ReactNode
+  edit?: React.ReactNode
+  delete?: React.ReactNode
+  view?: React.ReactNode
+}
+
+export type CrudSystemProps<TItem = unknown> = Omit<ResourceSystemProps<TItem>, "actions"> & {
+  labels?: CrudSystemLabels
+  canCreate?: boolean
+  createAction?: React.ReactNode
+  extraActions?: React.ReactNode
+  itemActions?: ActionSystemAction<TItem>[]
+  onCreate?: () => void
+  onView?: (item: TItem) => void
+  onEdit?: (item: TItem) => void
+  onDelete?: (item: TItem) => void
+  renderActions?: (args: { createAction?: React.ReactNode; extraActions?: React.ReactNode }) => React.ReactNode
+  actionsClassName?: string
+}
+
+function CrudSystem<TItem = unknown>({ labels, canCreate = true, createAction, extraActions, itemActions, onCreate, onView, onEdit, onDelete, renderActions, actionsClassName, list, ...props }: CrudSystemProps<TItem>) {
+  const resolvedItemActions = itemActions ?? [
+    onView && { key: "view", label: labels?.view ?? "View", onClick: onView },
+    onEdit && { key: "edit", label: labels?.edit ?? "Edit", onClick: onEdit },
+    onDelete && { key: "delete", label: labels?.delete ?? "Delete", variant: "destructive" as const, confirm: "Are you sure?", onClick: onDelete },
+  ].filter(Boolean) as ActionSystemAction<TItem>[]
+
+  const actions = renderActions?.({ createAction, extraActions }) ?? (
+    <div className={cn("flex items-center gap-2", actionsClassName)}>
+      {extraActions}
+      {canCreate && (createAction ?? <Button type="button" onClick={onCreate}>{labels?.create ?? "Create"}</Button>)}
+    </div>
+  )
+
+  const renderItem = list.renderItem ?? (resolvedItemActions.length ? (item: TItem) => (
+    <div className="flex items-center justify-between gap-3 rounded-lg border bg-card p-3">
+      <pre className="min-w-0 flex-1 overflow-hidden text-xs">{JSON.stringify(item, null, 2)}</pre>
+      <ActionSystem item={item} actions={resolvedItemActions} />
+    </div>
+  ) : undefined)
+
+  return <ResourceSystem {...props} actions={actions} list={{ ...list, renderItem }} />
+}
+
+export { CrudSystem }

package/vendor/src/components/patterns/data-view.tsx

@@ -0,0 +1,84 @@
+import * as React from "react"
+
+import { InlineState } from "@/components/feedback/page-state"
+import { cn } from "@/lib/utils"
+
+export type DataViewState = "idle" | "loading" | "error" | "empty"
+
+export type DataViewLabels = {
+  loadingTitle?: React.ReactNode
+  loadingDescription?: React.ReactNode
+  errorTitle?: React.ReactNode
+  emptyTitle?: React.ReactNode
+  emptyDescription?: React.ReactNode
+}
+
+export type DataViewProps<TItem = unknown> = React.ComponentProps<"div"> & {
+  data: TItem[]
+  loading?: boolean
+  error?: unknown
+  view?: string
+  labels?: DataViewLabels
+  toolbar?: React.ReactNode
+  filters?: React.ReactNode
+  selectionBar?: React.ReactNode
+  pagination?: React.ReactNode
+  actions?: React.ReactNode
+  empty?: React.ReactNode
+  loadingState?: React.ReactNode
+  errorState?: React.ReactNode
+  getState?: (args: { data: TItem[]; loading: boolean; error: unknown }) => DataViewState
+  renderContent?: (data: TItem[], meta: { view?: string; state: DataViewState }) => React.ReactNode
+  renderItem?: (item: TItem, index: number) => React.ReactNode
+  contentClassName?: string
+  toolbarClassName?: string
+  filtersClassName?: string
+}
+
+function DataView<TItem = unknown>({
+  data,
+  loading = false,
+  error,
+  view,
+  labels,
+  toolbar,
+  filters,
+  selectionBar,
+  pagination,
+  actions,
+  empty,
+  loadingState,
+  errorState,
+  getState,
+  renderContent,
+  renderItem,
+  contentClassName,
+  toolbarClassName,
+  filtersClassName,
+  className,
+  ...props
+}: DataViewProps<TItem>) {
+  const state = getState?.({ data, loading, error }) ?? (loading ? "loading" : error ? "error" : data.length === 0 ? "empty" : "idle")
+
+  return (
+    <div data-slot="data-view" data-state={state} className={cn("grid gap-4", className)} {...props}>
+      {(toolbar || actions) && (
+        <div data-slot="data-view-toolbar" className={cn("flex flex-wrap items-center justify-between gap-3", toolbarClassName)}>
+          <div className="min-w-0 flex-1">{toolbar}</div>
+          {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
+        </div>
+      )}
+      {filters && <div data-slot="data-view-filters" className={filtersClassName}>{filters}</div>}
+      {selectionBar}
+      <div data-slot="data-view-content" className={contentClassName}>
+        {state === "loading" ? loadingState ?? <InlineState tone="loading" title={labels?.loadingTitle ?? "Loading"} description={labels?.loadingDescription} /> : null}
+        {state === "error" ? errorState ?? <InlineState tone="error" title={labels?.errorTitle ?? "Something went wrong"} /> : null}
+        {state === "empty" ? empty ?? <InlineState tone="empty" title={labels?.emptyTitle ?? "No data"} description={labels?.emptyDescription} /> : null}
+        {state === "idle" ? renderContent?.(data, { view, state }) ?? <div className="grid gap-3">{data.map((item, index) => renderItem?.(item, index) ?? <pre key={index} className="rounded-lg border bg-card p-3 text-xs">{JSON.stringify(item, null, 2)}</pre>)}</div> : null}
+      </div>
+      {pagination && <div data-slot="data-view-pagination">{pagination}</div>}
+    </div>
+  )
+}
+
+export { DataView }

package/vendor/src/components/patterns/entity-details.tsx

@@ -0,0 +1,66 @@
+import * as React from "react"
+
+import { PropertyGrid, type PropertyGridItem } from "@/components/display/property-grid"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { cn } from "@/lib/utils"
+
+export type EntityDetailsTab = {
+  key: string
+  label: React.ReactNode
+  content: React.ReactNode
+  disabled?: boolean
+}
+
+export type EntityDetailsSection = {
+  key: string
+  title?: React.ReactNode
+  content: React.ReactNode
+}
+
+export type EntityDetailsProps = React.ComponentProps<"div"> & {
+  title: React.ReactNode
+  subtitle?: React.ReactNode
+  avatar?: React.ReactNode
+  status?: React.ReactNode
+  actions?: React.ReactNode
+  metadata?: PropertyGridItem[]
+  sections?: EntityDetailsSection[]
+  tabs?: EntityDetailsTab[]
+  tab?: string
+  defaultTab?: string
+  onTabChange?: (key: string) => void
+  renderHeader?: () => React.ReactNode
+}
+
+function EntityDetails({ title, subtitle, avatar, status, actions, metadata, sections, tabs, tab, defaultTab, onTabChange, renderHeader, className, children, ...props }: EntityDetailsProps) {
+  return (
+    <div data-slot="entity-details" className={cn("grid gap-6", className)} {...props}>
+      {renderHeader?.() ?? (
+        <div className="flex flex-wrap items-start justify-between gap-4">
+          <div className="flex min-w-0 items-start gap-3">
+            {avatar}
+            <div className="grid min-w-0 gap-1">
+              <div className="flex flex-wrap items-center gap-2">
+                <h1 className="truncate text-2xl font-semibold tracking-tight text-foreground">{title}</h1>
+                {status}
+              </div>
+              {subtitle && <div className="text-sm text-muted-foreground">{subtitle}</div>}
+            </div>
+          </div>
+          {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
+        </div>
+      )}
+      {metadata?.length ? <PropertyGrid items={metadata} columns={3} /> : null}
+      {sections?.length ? <div className="grid gap-4">{sections.map((section) => <section key={section.key} className="grid gap-3 rounded-lg border bg-card p-4">{section.title && <h2 className="text-base font-semibold text-foreground">{section.title}</h2>}{section.content}</section>)}</div> : null}
+      {tabs?.length ? (
+        <Tabs value={tab} defaultValue={defaultTab ?? tabs[0]?.key} onValueChange={onTabChange}>
+          <TabsList>{tabs.map((item) => <TabsTrigger key={item.key} value={item.key} disabled={item.disabled}>{item.label}</TabsTrigger>)}</TabsList>
+          {tabs.map((item) => <TabsContent key={item.key} value={item.key}>{item.content}</TabsContent>)}
+        </Tabs>
+      ) : null}
+      {children}
+    </div>
+  )
+}
+
+export { EntityDetails }

package/vendor/src/components/patterns/filter-builder.tsx

@@ -0,0 +1,113 @@
+import * as React from "react"
+import { RotateCcwIcon, SearchIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { cn } from "@/lib/utils"
+
+export type FilterValue = string | number | boolean | null | undefined | string[] | [string | undefined, string | undefined]
+
+export type FilterOption = {
+  value: string
+  label: React.ReactNode
+  disabled?: boolean
+}
+
+export type FilterField = {
+  key: string
+  label?: React.ReactNode
+  type?: "text" | "search" | "select" | "date" | "date-range" | "custom"
+  placeholder?: string
+  options?: FilterOption[]
+  disabled?: boolean
+  hidden?: boolean
+  className?: string
+}
+
+export type FilterBuilderLabels = {
+  reset?: React.ReactNode
+  apply?: React.ReactNode
+  search?: string
+  from?: string
+  to?: string
+}
+
+export type FilterBuilderProps<TFilters extends Record<string, FilterValue> = Record<string, FilterValue>> = React.ComponentProps<"div"> & {
+  value: TFilters
+  fields: FilterField[]
+  labels?: FilterBuilderLabels
+  layout?: "inline" | "grid"
+  columns?: 1 | 2 | 3 | 4
+  showApply?: boolean
+  showReset?: boolean
+  onChange: (value: TFilters) => void
+  onApply?: (value: TFilters) => void
+  onReset?: () => void
+  renderField?: (field: FilterField, value: FilterValue, helpers: { setValue: (value: FilterValue) => void; filters: TFilters }) => React.ReactNode
+}
+
+function FilterBuilder<TFilters extends Record<string, FilterValue> = Record<string, FilterValue>>({
+  value,
+  fields,
+  labels,
+  layout = "inline",
+  columns = 3,
+  showApply = false,
+  showReset = true,
+  onChange,
+  onApply,
+  onReset,
+  renderField,
+  className,
+  ...props
+}: FilterBuilderProps<TFilters>) {
+  const setFieldValue = (key: string, nextValue: FilterValue) => onChange({ ...value, [key]: nextValue } as TFilters)
+  const visibleFields = fields.filter((field) => !field.hidden)
+
+  return (
+    <div data-slot="filter-builder" className={cn("flex flex-wrap items-end gap-3", layout === "grid" && "grid w-full", columns === 2 && "sm:grid-cols-2", columns === 3 && "sm:grid-cols-2 lg:grid-cols-3", columns === 4 && "sm:grid-cols-2 lg:grid-cols-4", className)} {...props}>
+      {visibleFields.map((field) => (
+        <div key={field.key} data-slot="filter-builder-field" className={cn("grid min-w-48 gap-1.5", field.className)}>
+          {field.label && <label className="text-xs font-medium text-muted-foreground">{field.label}</label>}
+          {renderField?.(field, value[field.key], { setValue: (nextValue) => setFieldValue(field.key, nextValue), filters: value }) ?? <DefaultFilterField field={field} value={value[field.key]} labels={labels} onChange={(nextValue) => setFieldValue(field.key, nextValue)} />}
+        </div>
+      ))}
+      {(showReset || showApply) && (
+        <div data-slot="filter-builder-actions" className="flex items-center gap-2">
+          {showReset && <Button type="button" variant="outline" size="sm" onClick={onReset}><RotateCcwIcon data-icon="inline-start" />{labels?.reset ?? "Reset"}</Button>}
+          {showApply && <Button type="button" size="sm" onClick={() => onApply?.(value)}>{labels?.apply ?? "Apply"}</Button>}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function DefaultFilterField({ field, value, labels, onChange }: { field: FilterField; value: FilterValue; labels?: FilterBuilderLabels; onChange: (value: FilterValue) => void }) {
+  if (field.type === "select") {
+    return (
+      <select disabled={field.disabled} value={String(value ?? "")} className="h-8 rounded-md border bg-background px-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring" onChange={(event) => onChange(event.currentTarget.value || undefined)}>
+        <option value="">{field.placeholder ?? "All"}</option>
+        {field.options?.map((option) => <option key={option.value} value={option.value} disabled={option.disabled}>{typeof option.label === "string" ? option.label : option.value}</option>)}
+      </select>
+    )
+  }
+
+  if (field.type === "date-range") {
+    const range = Array.isArray(value) ? value as [string | undefined, string | undefined] : [undefined, undefined]
+    return (
+      <div className="grid grid-cols-2 gap-2">
+        <Input type="date" disabled={field.disabled} value={range[0] ?? ""} aria-label={labels?.from ?? "From"} onChange={(event) => onChange([event.currentTarget.value || undefined, range[1]])} />
+        <Input type="date" disabled={field.disabled} value={range[1] ?? ""} aria-label={labels?.to ?? "To"} onChange={(event) => onChange([range[0], event.currentTarget.value || undefined])} />
+      </div>
+    )
+  }
+
+  return (
+    <div className="relative">
+      {field.type === "search" && <SearchIcon className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />}
+      <Input type={field.type === "date" ? "date" : "text"} disabled={field.disabled} value={String(value ?? "")} placeholder={field.placeholder ?? labels?.search} className={cn(field.type === "search" && "pl-8")} onChange={(event) => onChange(event.currentTarget.value || undefined)} />
+    </div>
+  )
+}
+
+export { FilterBuilder }

package/vendor/src/components/patterns/form-builder-presets.ts

@@ -0,0 +1,131 @@
+import type { FieldPath, FieldValues } from "react-hook-form"
+
+import type {
+  FormBuilderAsyncSelectField,
+  FormBuilderCustomField,
+  FormBuilderDateField,
+  FormBuilderDateRangeField,
+  FormBuilderInputField,
+  FormBuilderNumberField,
+  FormBuilderPhoneField,
+  FormBuilderSection,
+  FormBuilderSelectField,
+  FormBuilderSwitchField,
+  FormBuilderTextareaField,
+} from "./form-builder"
+
+type FieldBase = {
+  id: string
+  hidden?: boolean
+  className?: string
+  colSpan?: 1 | 2 | 3 | 4 | "full"
+}
+
+type FieldPresetOptions<TProps> = FieldBase & {
+  props: TProps
+}
+
+function splitFieldOptions<TProps>(options: FieldPresetOptions<TProps>) {
+  const { id, hidden, className, colSpan, props } = options
+  return { base: { id, hidden, className, colSpan }, props }
+}
+
+function inputField<
+  TFieldValues extends FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>(options: FieldPresetOptions<FormBuilderInputField<TFieldValues, TName>["props"]>): FormBuilderInputField<TFieldValues, TName> {
+  const { base, props } = splitFieldOptions(options)
+  return { ...base, type: "input", props }
+}
+
+function textareaField<
+  TFieldValues extends FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>(options: FieldPresetOptions<FormBuilderTextareaField<TFieldValues, TName>["props"]>): FormBuilderTextareaField<TFieldValues, TName> {
+  const { base, props } = splitFieldOptions(options)
+  return { ...base, type: "textarea", props }
+}
+
+function selectField<
+  TFieldValues extends FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>(options: FieldPresetOptions<FormBuilderSelectField<TFieldValues, TName>["props"]>): FormBuilderSelectField<TFieldValues, TName> {
+  const { base, props } = splitFieldOptions(options)
+  return { ...base, type: "select", props }
+}
+
+function asyncSelectField<
+  TFieldValues extends FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>(options: FieldPresetOptions<FormBuilderAsyncSelectField<TFieldValues, TName>["props"]>): FormBuilderAsyncSelectField<TFieldValues, TName> {
+  const { base, props } = splitFieldOptions(options)
+  return { ...base, type: "async-select", props }
+}
+
+function switchField<
+  TFieldValues extends FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>(options: FieldPresetOptions<FormBuilderSwitchField<TFieldValues, TName>["props"]>): FormBuilderSwitchField<TFieldValues, TName> {
+  const { base, props } = splitFieldOptions(options)
+  return { ...base, type: "switch", props }
+}
+
+function numberField<
+  TFieldValues extends FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>(options: FieldPresetOptions<FormBuilderNumberField<TFieldValues, TName>["props"]>): FormBuilderNumberField<TFieldValues, TName> {
+  const { base, props } = splitFieldOptions(options)
+  return { ...base, type: "number", props }
+}
+
+function phoneField<
+  TFieldValues extends FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>(options: FieldPresetOptions<FormBuilderPhoneField<TFieldValues, TName>["props"]>): FormBuilderPhoneField<TFieldValues, TName> {
+  const { base, props } = splitFieldOptions(options)
+  return { ...base, type: "phone", props }
+}
+
+function dateField<
+  TFieldValues extends FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>(options: FieldPresetOptions<FormBuilderDateField<TFieldValues, TName>["props"]>): FormBuilderDateField<TFieldValues, TName> {
+  const { base, props } = splitFieldOptions(options)
+  return { ...base, type: "date", props }
+}
+
+function dateRangeField<
+  TFieldValues extends FieldValues,
+  TFromName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TToName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>(options: FieldPresetOptions<FormBuilderDateRangeField<TFieldValues, TFromName, TToName>["props"]>): FormBuilderDateRangeField<TFieldValues, TFromName, TToName> {
+  const { base, props } = splitFieldOptions(options)
+  return { ...base, type: "date-range", props }
+}
+
+function customField<TFieldValues extends FieldValues>(
+  options: FieldBase & Pick<FormBuilderCustomField<TFieldValues>, "render">
+): FormBuilderCustomField<TFieldValues> {
+  const { id, hidden, className, colSpan, render } = options
+  return { id, hidden, className, colSpan, type: "custom", render }
+}
+
+function formSection<TFieldValues extends FieldValues>(
+  section: FormBuilderSection<TFieldValues>
+): FormBuilderSection<TFieldValues> {
+  return section
+}
+
+export {
+  asyncSelectField,
+  customField,
+  dateField,
+  dateRangeField,
+  formSection,
+  inputField,
+  numberField,
+  phoneField,
+  selectField,
+  switchField,
+  textareaField,
+}