@k3-universe/react-kit 0.0.28 → 0.0.30

package/src/kit/builder/form/components/fields/ArrayField.tsx

@@ -1,60 +1,96 @@
-import { useFieldArray } from 'react-hook-form'
-import type { FieldArrayPath, FieldValues } from 'react-hook-form'
-import { Card, CardContent, CardHeader, CardTitle } from '../../../../../shadcn/ui/card'
-import { Button } from '../../../../../shadcn/ui/button'
-import { Input } from '../../../../../shadcn/ui/input'
-import { GripVertical, Plus, Trash2 } from 'lucide-react'
-import { cn } from '../../../../../shadcn/lib/utils'
-import type { FieldRenderProps } from './types'
-import { FormBuilderField } from '../FormBuilderField'
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../../../../shadcn/ui/table'
+import { useFieldArray } from 'react-hook-form';
+import type { FieldArrayPath, FieldValues } from 'react-hook-form';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from '../../../../../shadcn/ui/card';
+import { Button } from '../../../../../shadcn/ui/button';
+import { Input } from '../../../../../shadcn/ui/input';
+import { GripVertical, Plus, Trash2 } from 'lucide-react';
+import { cn } from '../../../../../shadcn/lib/utils';
+import type { FieldRenderProps } from './types';
+import { FormBuilderField } from '../FormBuilderField';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '../../../../../shadcn/ui/table';
 
-export function ArrayField({ field, control, fieldPath, value, onChange }: FieldRenderProps) {
+export function ArrayField({
+  field,
+  control,
+  fieldPath,
+  value,
+  onChange,
+}: FieldRenderProps) {
   const { fields, append, remove } = useFieldArray({
     control,
     name: fieldPath as FieldArrayPath<FieldValues>,
-  })
+  });
 
   const addItem = () => {
     // For custom layout, prefer appending an object so useFieldArray can generate stable IDs
     if (field.arrayLayout === 'custom') {
-      append({} as never)
-      return
+      append({} as never);
+      return;
     }
     if (field.fields && field.fields.length === 1) {
-      const defaultValue = field.fields[0].defaultValue ?? ''
-      append(defaultValue as never)
+      const defaultValue = field.fields[0].defaultValue ?? '';
+      append(defaultValue as never);
     } else if (field.fields) {
-      const defaultObject: Record<string, unknown> = {}
+      const defaultObject: Record<string, unknown> = {};
       field.fields.forEach((subField) => {
-        defaultObject[subField.name] = subField.defaultValue ?? ''
-      })
-      append(defaultObject as never)
+        defaultObject[subField.name] = subField.defaultValue ?? '';
+      });
+      append(defaultObject as never);
     } else {
-      append('' as never)
+      append('' as never);
     }
-  }
+  };
 
-  const removeItem = (index: number) => remove(index)
+  const removeItem = (index: number) => remove(index);
 
   // Custom layout hook
-  if (field.arrayLayout === 'custom' && typeof field.arrayRender === 'function') {
+  if (
+    field.arrayLayout === 'custom' &&
+    typeof field.arrayRender === 'function'
+  ) {
     return (
-      <>{field.arrayRender({ field, control, fieldPath, value, onChange, addItem, removeItem, disabled: field.disabled, rows: fields })}</>
-    )
+      <>
+        {field.arrayRender({
+          field,
+          control,
+          fieldPath,
+          value,
+          onChange,
+          addItem,
+          removeItem,
+          disabled: field.disabled,
+          rows: fields,
+        })}
+      </>
+    );
   }
 
   // Table layout
   if (field.arrayLayout === 'table') {
-    const hasNested = Array.isArray(field.fields) && field.fields.length > 0
-    const fFields = field.fields ?? []
-    const isSubFieldHidden = (subField: typeof fFields[number]) =>
-      Boolean(subField?.hidden) || subField?.type === 'hidden'
-    const visibleSubFields = fFields.filter(subField => !isSubFieldHidden(subField))
-    const singleNested = hasNested && visibleSubFields.length === 1
-    const headerBg = field.arrayColors?.headerBgClass ?? 'bg-primary'
-    const headerText = field.arrayColors?.headerTextClass ?? 'text-primary-foreground'
-    const altRow = field.arrayColors?.rowAltBgClass ?? 'bg-muted/40'
+    const hasNested = Array.isArray(field.fields) && field.fields.length > 0;
+    const fFields = field.fields ?? [];
+    const isSubFieldHidden = (subField: (typeof fFields)[number]) =>
+      Boolean(subField?.hidden) || subField?.type === 'hidden';
+    const visibleSubFields = fFields.filter(
+      (subField) => !isSubFieldHidden(subField),
+    );
+    const singleNested = hasNested && visibleSubFields.length === 1;
+    const headerBg = field.arrayColors?.headerBgClass ?? 'bg-primary';
+    const headerText =
+      field.arrayColors?.headerTextClass ?? 'text-primary-foreground';
+    const altRow = field.arrayColors?.rowAltBgClass ?? 'bg-muted/40';
 
     return (
       <Card className={cn(field.className, 'py-3 rounded-md gap-3')}>
@@ -63,10 +99,18 @@ export function ArrayField({ field, control, fieldPath, value, onChange }: Field
             <div>
               <CardTitle className="text-base">{field.label}</CardTitle>
               {field.description && (
-                <p className="text-sm text-muted-foreground">{field.description}</p>
+                <p className="text-sm text-muted-foreground">
+                  {field.description}
+                </p>
               )}
             </div>
-            <Button type="button" variant="outline" size="sm" onClick={addItem} disabled={field.disabled}>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={addItem}
+              disabled={field.disabled}
+            >
               <Plus className="h-4 w-4 mr-1" />
               Add Item
             </Button>
@@ -83,10 +127,14 @@ export function ArrayField({ field, control, fieldPath, value, onChange }: Field
                 <TableRow className={cn(headerBg, headerText)}>
                   {hasNested ? (
                     singleNested ? (
-                      <TableHead className={cn(headerText)}>{visibleSubFields[0]?.label || 'Value'}</TableHead>
+                      <TableHead className={cn(headerText)}>
+                        {visibleSubFields[0]?.label || 'Value'}
+                      </TableHead>
                     ) : (
-                      visibleSubFields.map(sf => (
-                        <TableHead key={sf.name} className={cn(headerText)}>{sf.label || sf.name}</TableHead>
+                      visibleSubFields.map((sf) => (
+                        <TableHead key={sf.name} className={cn(headerText)}>
+                          {sf.label || sf.name}
+                        </TableHead>
                       ))
                     )
                   ) : (
@@ -97,18 +145,25 @@ export function ArrayField({ field, control, fieldPath, value, onChange }: Field
               </TableHeader>
               <TableBody>
                 {fields.map((item, index) => (
-                  <TableRow key={item.id} className={cn(index % 2 === 1 && altRow)}>
+                  <TableRow
+                    key={item.id}
+                    className={cn(index % 2 === 1 && altRow)}
+                  >
                     {hasNested ? (
                       singleNested ? (
                         <TableCell>
                           <FormBuilderField
-                            field={{ ...visibleSubFields[0], name: visibleSubFields[0]?.name, label: visibleSubFields[0]?.label || 'Value' }}
+                            field={{
+                              ...visibleSubFields[0],
+                              name: visibleSubFields[0]?.name,
+                              label: visibleSubFields[0]?.label || 'Value',
+                            }}
                             control={control}
                             parentPath={`${fieldPath}.${index}`}
                           />
                         </TableCell>
                       ) : (
-                        visibleSubFields.map(subField => (
+                        visibleSubFields.map((subField) => (
                           <TableCell key={subField.name}>
                             <FormBuilderField
                               field={subField}
@@ -121,12 +176,15 @@ export function ArrayField({ field, control, fieldPath, value, onChange }: Field
                     ) : (
                       <TableCell>
                         <Input
-                          value={String(((value as unknown[] | undefined)?.[index] ?? ''))}
+                          value={String(
+                            (value as unknown[] | undefined)?.[index] ?? '',
+                          )}
                           onChange={(e) => {
-                            const current = (value as unknown[] | undefined) ?? []
-                            const newArray = [...current]
-                            newArray[index] = e.target.value
-                            onChange(newArray)
+                            const current =
+                              (value as unknown[] | undefined) ?? [];
+                            const newArray = [...current];
+                            newArray[index] = e.target.value;
+                            onChange(newArray);
                           }}
                           placeholder={`Item ${index + 1}`}
                           disabled={field.disabled}
@@ -134,7 +192,13 @@ export function ArrayField({ field, control, fieldPath, value, onChange }: Field
                       </TableCell>
                     )}
                     <TableCell className="w-1 text-right">
-                      <Button type="button" variant="destructive" size="sm" onClick={() => remove(index)} disabled={field.disabled}>
+                      <Button
+                        type="button"
+                        variant="destructive"
+                        size="sm"
+                        onClick={() => remove(index)}
+                        disabled={field.disabled}
+                      >
                         <Trash2 className="h-4 w-4" />
                       </Button>
                     </TableCell>
@@ -145,7 +209,7 @@ export function ArrayField({ field, control, fieldPath, value, onChange }: Field
           )}
         </CardContent>
       </Card>
-    )
+    );
   }
 
   // Default: card layout (existing UI)
@@ -156,10 +220,18 @@ export function ArrayField({ field, control, fieldPath, value, onChange }: Field
           <div>
             <CardTitle className="text-base">{field.label}</CardTitle>
             {field.description && (
-              <p className="text-sm text-muted-foreground">{field.description}</p>
+              <p className="text-sm text-muted-foreground">
+                {field.description}
+              </p>
             )}
           </div>
-          <Button type="button" variant="outline" size="sm" onClick={addItem} disabled={field.disabled}>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={addItem}
+            disabled={field.disabled}
+          >
             <Plus className="h-4 w-4 mr-1" />
             Add Item
           </Button>
@@ -177,9 +249,17 @@ export function ArrayField({ field, control, fieldPath, value, onChange }: Field
                 <div className="flex items-center justify-between">
                   <div className="flex items-center gap-2">
                     <GripVertical className="h-4 w-4 text-muted-foreground" />
-                    <span className="text-sm font-medium">Item {index + 1}</span>
+                    <span className="text-sm font-medium">
+                      Item {index + 1}
+                    </span>
                   </div>
-                  <Button type="button" variant="ghost" size="sm" onClick={() => remove(index)} disabled={field.disabled}>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => remove(index)}
+                    disabled={field.disabled}
+                  >
                     <Trash2 className="h-4 w-4" />
                   </Button>
                 </div>
@@ -187,13 +267,17 @@ export function ArrayField({ field, control, fieldPath, value, onChange }: Field
               <CardContent>
                 {field.fields && field.fields.length === 1 ? (
                   <FormBuilderField
-                    field={{ ...field.fields[0], name: field.fields[0].name, label: field.fields[0].label || 'Value' }}
+                    field={{
+                      ...field.fields[0],
+                      name: field.fields[0].name,
+                      label: field.fields[0].label || 'Value',
+                    }}
                     control={control}
                     parentPath={`${fieldPath}.${index}`}
                   />
                 ) : field.fields ? (
                   <div className="grid gap-2 md:grid-cols-2">
-                    {field.fields.map(subField => (
+                    {field.fields.map((subField) => (
                       <FormBuilderField
                         key={subField.name}
                         field={subField}
@@ -204,12 +288,14 @@ export function ArrayField({ field, control, fieldPath, value, onChange }: Field
                   </div>
                 ) : (
                   <Input
-                    value={String(((value as unknown[] | undefined)?.[index] ?? ''))}
+                    value={String(
+                      (value as unknown[] | undefined)?.[index] ?? '',
+                    )}
                     onChange={(e) => {
-                      const current = (value as unknown[] | undefined) ?? []
-                      const newArray = [...current]
-                      newArray[index] = e.target.value
-                      onChange(newArray)
+                      const current = (value as unknown[] | undefined) ?? [];
+                      const newArray = [...current];
+                      newArray[index] = e.target.value;
+                      onChange(newArray);
                     }}
                     placeholder={`Item ${index + 1}`}
                     disabled={field.disabled}
@@ -221,5 +307,5 @@ export function ArrayField({ field, control, fieldPath, value, onChange }: Field
         )}
       </CardContent>
     </Card>
-  )
+  );
 }

package/src/kit/builder/form/components/fields/AutocompleteField.tsx

@@ -1,29 +1,58 @@
-import { Autocomplete } from '../../../../../kit/components/autocomplete/Autocomplete'
-import type { AutocompleteOption } from '../../../../../kit/components/autocomplete/types'
-import type { FieldRenderProps } from './types'
+import { Autocomplete } from '../../../../../kit/components/autocomplete/Autocomplete';
+import type { AutocompleteOption } from '../../../../../kit/components/autocomplete/types';
+import type { FieldRenderProps } from './types';
 
-export function AutocompleteField({ field, value, onChange, className }: FieldRenderProps) {
+export function AutocompleteField({
+  field,
+  value,
+  onChange,
+  className,
+}: FieldRenderProps) {
   const options: AutocompleteOption[] = (field.options ?? [])
-    .filter((o): o is { label: string; value: string | number } => o.value !== null && o.value !== undefined)
-    .map(o => ({ label: o.label, value: o.value as string | number, raw: (o as unknown as AutocompleteOption).raw }))
+    .filter(
+      (o): o is { label: string; value: string | number } =>
+        o.value !== null && o.value !== undefined,
+    )
+    .map((o) => ({
+      label: o.label,
+      value: o.value as string | number,
+      raw: (o as unknown as AutocompleteOption).raw,
+    }));
 
   // Shape defaultValue according to single/multiple
-  let defaultValueShaped: string | number | null | Array<string | number> | undefined = undefined
+  let defaultValueShaped:
+    | string
+    | number
+    | null
+    | Array<string | number>
+    | undefined;
   if (field.defaultValue !== undefined) {
     if (field.multiple) {
       if (Array.isArray(field.defaultValue)) {
-        defaultValueShaped = field.defaultValue.filter((v): v is string | number => typeof v === 'string' || typeof v === 'number')
-      } else if (field.defaultValue === null || field.defaultValue === undefined) {
-        defaultValueShaped = []
-      } else if (typeof field.defaultValue === 'string' || typeof field.defaultValue === 'number') {
-        defaultValueShaped = [field.defaultValue]
+        defaultValueShaped = field.defaultValue.filter(
+          (v): v is string | number =>
+            typeof v === 'string' || typeof v === 'number',
+        );
+      } else if (
+        field.defaultValue === null ||
+        field.defaultValue === undefined
+      ) {
+        defaultValueShaped = [];
+      } else if (
+        typeof field.defaultValue === 'string' ||
+        typeof field.defaultValue === 'number'
+      ) {
+        defaultValueShaped = [field.defaultValue];
       } else {
-        defaultValueShaped = []
+        defaultValueShaped = [];
       }
     } else {
-      defaultValueShaped = (typeof field.defaultValue === 'string' || typeof field.defaultValue === 'number' || field.defaultValue === null)
-        ? field.defaultValue as string | number | null
-        : null
+      defaultValueShaped =
+        typeof field.defaultValue === 'string' ||
+        typeof field.defaultValue === 'number' ||
+        field.defaultValue === null
+          ? (field.defaultValue as string | number | null)
+          : null;
     }
   }
 
@@ -42,12 +71,18 @@ export function AutocompleteField({ field, value, onChange, className }: FieldRe
       defaultValue={defaultValueShaped}
       initialSelectedOptions={field.initialSelectedOptions ?? undefined}
       loadSelected={field.loadSelected}
-      value={field.multiple ? ((Array.isArray(value) ? value : (value ? [value] : [])) as Array<string | number>) : ((value as string | number | null) ?? null)}
+      value={
+        field.multiple
+          ? ((Array.isArray(value) ? value : value ? [value] : []) as Array<
+              string | number
+            >)
+          : ((value as string | number | null) ?? null)
+      }
       onChange={(val, option, raw) => onChange(val, option, raw)}
       placeholder={field.placeholder}
       renderOption={field.renderOption}
       disabled={field.disabled}
       className={className}
     />
-  )
+  );
 }

package/src/kit/builder/form/components/fields/CheckboxField.tsx

@@ -1,13 +1,19 @@
-import { Checkbox } from '../../../../../shadcn/ui/checkbox'
-import { Label } from '../../../../../shadcn/ui/label'
-import { cn } from '../../../../../shadcn/lib/utils'
-import type { FieldRenderProps } from './types'
+import { Checkbox } from '../../../../../shadcn/ui/checkbox';
+import { Label } from '../../../../../shadcn/ui/label';
+import { cn } from '../../../../../shadcn/lib/utils';
+import type { FieldRenderProps } from './types';
 
-export function CheckboxField({ field, fieldPath, value, onChange, className }: FieldRenderProps) {
-  const placement = field.labelPlacement ?? 'inline'
+export function CheckboxField({
+  field,
+  fieldPath,
+  value,
+  onChange,
+  className,
+}: FieldRenderProps) {
+  const placement = field.labelPlacement ?? 'inline';
 
   if (placement === 'stacked') {
-    const labelId = `${fieldPath}-label`
+    const labelId = `${fieldPath}-label`;
     return (
       <div className="space-y-2">
         <Label id={labelId} className="text-sm font-medium">
@@ -23,7 +29,7 @@ export function CheckboxField({ field, fieldPath, value, onChange, className }:
           className={cn(className)}
         />
       </div>
-    )
+    );
   }
 
   if (placement === 'hidden') {
@@ -35,7 +41,7 @@ export function CheckboxField({ field, fieldPath, value, onChange, className }:
         disabled={field.disabled}
         className={cn(className)}
       />
-    )
+    );
   }
 
   return (
@@ -47,10 +53,13 @@ export function CheckboxField({ field, fieldPath, value, onChange, className }:
         disabled={field.disabled}
         className={cn(className)}
       />
-      <Label htmlFor={fieldPath} className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+      <Label
+        htmlFor={fieldPath}
+        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+      >
         {field.label}
         {field.required && <span className="text-destructive ml-1">*</span>}
       </Label>
     </div>
-  )
+  );
 }

package/src/kit/builder/form/components/fields/DateField.tsx

@@ -1,15 +1,26 @@
-import { Input } from '../../../../../shadcn/ui/input'
-import type { FieldRenderProps } from './types'
+import { Input } from '../../../../../shadcn/ui/input';
+import type { FieldRenderProps } from './types';
 
-export function DateField({ field, value, onChange, className }: FieldRenderProps) {
+export function DateField({
+  field,
+  value,
+  onChange,
+  className,
+}: FieldRenderProps) {
   return (
     <Input
       className={className}
       disabled={field.disabled}
       placeholder={field.placeholder}
       type="date"
-      value={value ? new Date(value as Date | string).toISOString().split('T')[0] : ''}
-      onChange={(e) => onChange(e.target.value ? new Date(e.target.value) : null)}
+      value={
+        value
+          ? new Date(value as Date | string).toISOString().split('T')[0]
+          : ''
+      }
+      onChange={(e) =>
+        onChange(e.target.value ? new Date(e.target.value) : null)
+      }
     />
-  )
+  );
 }

package/src/kit/builder/form/components/fields/DatePickerField.tsx

@@ -1,14 +1,19 @@
-import * as React from 'react'
-import type { FieldRenderProps } from './types'
-import { DatePicker } from '../../../../components/datepicker/DatePicker'
+import * as React from 'react';
+import type { FieldRenderProps } from './types';
+import { DatePicker } from '../../../../components/datepicker/DatePicker';
 
-export function DatePickerField({ field, value, onChange, className }: FieldRenderProps) {
+export function DatePickerField({
+  field,
+  value,
+  onChange,
+  className,
+}: FieldRenderProps) {
   const v = React.useMemo(() => {
-    if (!value) return null
-    if (value instanceof Date) return value
-    const d = new Date(value as string)
-    return Number.isNaN(d.getTime()) ? null : d
-  }, [value])
+    if (!value) return null;
+    if (value instanceof Date) return value;
+    const d = new Date(value as string);
+    return Number.isNaN(d.getTime()) ? null : d;
+  }, [value]);
 
   return (
     <DatePicker
@@ -20,5 +25,5 @@ export function DatePickerField({ field, value, onChange, className }: FieldRend
       disabledDates={field.disabledDates}
       buttonVariant="outline"
     />
-  )
+  );
 }

package/src/kit/builder/form/components/fields/DateRangePickerField.tsx

@@ -1,27 +1,32 @@
-import * as React from 'react'
-import type { FieldRenderProps } from './types'
-import { DateRangePicker } from '../../../../components/datepicker/DateRangePicker'
-import type { DateRange } from 'react-day-picker'
+import * as React from 'react';
+import type { FieldRenderProps } from './types';
+import { DateRangePicker } from '../../../../components/datepicker/DateRangePicker';
+import type { DateRange } from 'react-day-picker';
 
 function coerceDate(input: unknown): Date | undefined {
-  if (!input) return undefined
-  if (input instanceof Date) return input
-  const d = new Date(input as string)
-  return Number.isNaN(d.getTime()) ? undefined : d
+  if (!input) return undefined;
+  if (input instanceof Date) return input;
+  const d = new Date(input as string);
+  return Number.isNaN(d.getTime()) ? undefined : d;
 }
 
-export function DateRangePickerField({ field, value, onChange, className }: FieldRenderProps) {
+export function DateRangePickerField({
+  field,
+  value,
+  onChange,
+  className,
+}: FieldRenderProps) {
   const v = React.useMemo<DateRange | null>(() => {
-    if (!value) return null
+    if (!value) return null;
     if (typeof value === 'object' && value !== null) {
-      const anyVal = value as { from?: unknown; to?: unknown }
+      const anyVal = value as { from?: unknown; to?: unknown };
       return {
         from: coerceDate(anyVal.from),
         to: coerceDate(anyVal.to),
-      }
+      };
     }
-    return null
-  }, [value])
+    return null;
+  }, [value]);
 
   return (
     <DateRangePicker
@@ -37,5 +42,5 @@ export function DateRangePickerField({ field, value, onChange, className }: Fiel
       cancelLabel={field.cancelLabel}
       applyLabel={field.applyLabel}
     />
-  )
+  );
 }

package/src/kit/builder/form/components/fields/DateTimePickerField.tsx

@@ -1,14 +1,19 @@
-import * as React from 'react'
-import type { FieldRenderProps } from './types'
-import { DateTimePicker } from '../../../../components/datetimepicker/DateTimePicker'
+import * as React from 'react';
+import type { FieldRenderProps } from './types';
+import { DateTimePicker } from '../../../../components/datetimepicker/DateTimePicker';
 
-export function DateTimePickerField({ field, value, onChange, className }: FieldRenderProps) {
+export function DateTimePickerField({
+  field,
+  value,
+  onChange,
+  className,
+}: FieldRenderProps) {
   const v = React.useMemo(() => {
-    if (!value) return null
-    if (value instanceof Date) return value
-    const d = new Date(value as string)
-    return Number.isNaN(d.getTime()) ? null : d
-  }, [value])
+    if (!value) return null;
+    if (value instanceof Date) return value;
+    const d = new Date(value as string);
+    return Number.isNaN(d.getTime()) ? null : d;
+  }, [value]);
 
   return (
     <DateTimePicker
@@ -27,7 +32,7 @@ export function DateTimePickerField({ field, value, onChange, className }: Field
       cancelLabel={field.cancelLabel}
       applyLabel={field.applyLabel}
     />
-  )
+  );
 }
 
-export default DateTimePickerField
+export default DateTimePickerField;