@k3-universe/react-kit 0.0.28 → 0.0.30

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

@@ -1,21 +1,27 @@
-import * as React from 'react'
-import type { FieldRenderProps } from './types'
-import { DateTimeRangePicker } from '../../../../components/datetimepicker/DateTimeRangePicker'
+import * as React from 'react';
+import type { FieldRenderProps } from './types';
+import { DateTimeRangePicker } from '../../../../components/datetimepicker/DateTimeRangePicker';
 
-export function DateTimeRangePickerField({ field, value, onChange, className }: FieldRenderProps) {
+export function DateTimeRangePickerField({
+  field,
+  value,
+  onChange,
+  className,
+}: FieldRenderProps) {
   const v = React.useMemo(() => {
-    if (!value || typeof value !== 'object') return null as { from?: Date | null; to?: Date | null } | null
-    const anyVal = value as { from?: unknown; to?: unknown }
+    if (!value || typeof value !== 'object')
+      return null as { from?: Date | null; to?: Date | null } | null;
+    const anyVal = value as { from?: unknown; to?: unknown };
     const toDate = (x: unknown) => {
-      if (!x) return undefined
-      if (x instanceof Date) return x
-      const d = new Date(x as string)
-      return Number.isNaN(d.getTime()) ? undefined : d
-    }
-    const from = toDate(anyVal.from) ?? null
-    const to = toDate(anyVal.to) ?? null
-    return { from, to }
-  }, [value])
+      if (!x) return undefined;
+      if (x instanceof Date) return x;
+      const d = new Date(x as string);
+      return Number.isNaN(d.getTime()) ? undefined : d;
+    };
+    const from = toDate(anyVal.from) ?? null;
+    const to = toDate(anyVal.to) ?? null;
+    return { from, to };
+  }, [value]);
 
   return (
     <DateTimeRangePicker
@@ -36,7 +42,7 @@ export function DateTimeRangePickerField({ field, value, onChange, className }:
       cancelLabel={field.cancelLabel}
       applyLabel={field.applyLabel}
     />
-  )
+  );
 }
 
-export default DateTimeRangePickerField
+export default DateTimeRangePickerField;

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

@@ -1,8 +1,13 @@
-import type { FieldRenderProps } from './types'
-import { FileUploader } from '../../../../components/fileuploader/FileUploader'
+import type { FieldRenderProps } from './types';
+import { FileUploader } from '../../../../components/fileuploader/FileUploader';
 
-export function FileField({ field, value, onChange, className }: FieldRenderProps) {
-  const files = Array.isArray(value) ? value : []
+export function FileField({
+  field,
+  value,
+  onChange,
+  className,
+}: FieldRenderProps) {
+  const files = Array.isArray(value) ? value : [];
   return (
     <FileUploader
       className={className}
@@ -22,5 +27,5 @@ export function FileField({ field, value, onChange, className }: FieldRenderProp
       onRetry={field.fileOnRetry}
       onRetryAll={field.fileOnRetryAll}
     />
-  )
+  );
 }

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

@@ -1,14 +1,19 @@
-import * as React from 'react'
-import type { FieldRenderProps } from './types'
-import { MonthInput } from '../../../../components/monthpicker/MonthInput'
+import * as React from 'react';
+import type { FieldRenderProps } from './types';
+import { MonthInput } from '../../../../components/monthpicker/MonthInput';
 
-export function MonthPickerField({ field, value, onChange, className }: FieldRenderProps) {
+export function MonthPickerField({
+  field,
+  value,
+  onChange,
+  className,
+}: FieldRenderProps) {
   const v = React.useMemo(() => {
-    if (!value) return undefined
-    if (value instanceof Date) return value
-    const d = new Date(value as string)
-    return Number.isNaN(d.getTime()) ? undefined : d
-  }, [value])
+    if (!value) return undefined;
+    if (value instanceof Date) return value;
+    const d = new Date(value as string);
+    return Number.isNaN(d.getTime()) ? undefined : d;
+  }, [value]);
 
   return (
     <MonthInput
@@ -17,10 +22,12 @@ export function MonthPickerField({ field, value, onChange, className }: FieldRen
       onChange={(d: Date | null) => onChange(d)}
       minDate={field.minDate}
       maxDate={field.maxDate}
-      disabledDates={(field.disabledDates?.filter((it): it is Date => it instanceof Date))}
+      disabledDates={field.disabledDates?.filter(
+        (it): it is Date => it instanceof Date,
+      )}
       showFooter
       clearLabel={field.cancelLabel}
       closeLabel={field.applyLabel}
     />
-  )
+  );
 }

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

@@ -1,22 +1,28 @@
-import * as React from 'react'
-import type { FieldRenderProps } from './types'
-import { MonthRangeInput } from '../../../../components/monthpicker/MonthRangeInput'
+import * as React from 'react';
+import type { FieldRenderProps } from './types';
+import { MonthRangeInput } from '../../../../components/monthpicker/MonthRangeInput';
 
-export function MonthRangePickerField({ field, value, onChange, className }: FieldRenderProps) {
+export function MonthRangePickerField({
+  field,
+  value,
+  onChange,
+  className,
+}: FieldRenderProps) {
   const v = React.useMemo(() => {
-    if (!value || typeof value !== 'object') return undefined as { start: Date; end: Date } | undefined
-    const anyVal = value as { start?: unknown; end?: unknown }
+    if (!value || typeof value !== 'object')
+      return undefined as { start: Date; end: Date } | undefined;
+    const anyVal = value as { start?: unknown; end?: unknown };
     const toDate = (x: unknown) => {
-      if (!x) return undefined
-      if (x instanceof Date) return x
-      const d = new Date(x as string)
-      return Number.isNaN(d.getTime()) ? undefined : d
-    }
-    const start = toDate(anyVal.start)
-    const end = toDate(anyVal.end)
-    if (!start || !end) return undefined
-    return { start, end }
-  }, [value])
+      if (!x) return undefined;
+      if (x instanceof Date) return x;
+      const d = new Date(x as string);
+      return Number.isNaN(d.getTime()) ? undefined : d;
+    };
+    const start = toDate(anyVal.start);
+    const end = toDate(anyVal.end);
+    if (!start || !end) return undefined;
+    return { start, end };
+  }, [value]);
 
   return (
     <MonthRangeInput
@@ -31,5 +37,5 @@ export function MonthRangePickerField({ field, value, onChange, className }: Fie
       cancelLabel={field.cancelLabel}
       applyLabel={field.applyLabel}
     />
-  )
+  );
 }

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

@@ -1,7 +1,12 @@
-import { Input } from '../../../../../shadcn/ui/input'
-import type { FieldRenderProps } from './types'
+import { Input } from '../../../../../shadcn/ui/input';
+import type { FieldRenderProps } from './types';
 
-export function NumberField({ field, value, onChange, className }: FieldRenderProps) {
+export function NumberField({
+  field,
+  value,
+  onChange,
+  className,
+}: FieldRenderProps) {
   return (
     <Input
       className={className}
@@ -11,5 +16,5 @@ export function NumberField({ field, value, onChange, className }: FieldRenderPr
       value={(value as number | string) ?? ''}
       onChange={(e) => onChange(Number(e.target.value))}
     />
-  )
+  );
 }

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

@@ -1,10 +1,15 @@
-import { Card, CardContent, CardHeader, CardTitle } from '../../../../../shadcn/ui/card'
-import { cn } from '../../../../../shadcn/lib/utils'
-import type { FieldRenderProps } from './types'
-import { FormBuilderField } from '../FormBuilderField'
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from '../../../../../shadcn/ui/card';
+import { cn } from '../../../../../shadcn/lib/utils';
+import type { FieldRenderProps } from './types';
+import { FormBuilderField } from '../FormBuilderField';
 
 export function ObjectField({ field, control, fieldPath }: FieldRenderProps) {
-  if (!field.fields) return null
+  if (!field.fields) return null;
   return (
     <Card className={cn(field.className)}>
       <CardHeader className="pb-3">
@@ -15,7 +20,7 @@ export function ObjectField({ field, control, fieldPath }: FieldRenderProps) {
       </CardHeader>
       <CardContent className="space-y-4">
         <div className="grid gap-4 md:grid-cols-2">
-          {field.fields.map(subField => (
+          {field.fields.map((subField) => (
             <FormBuilderField
               key={subField.name}
               field={subField}
@@ -26,5 +31,5 @@ export function ObjectField({ field, control, fieldPath }: FieldRenderProps) {
         </div>
       </CardContent>
     </Card>
-  )
+  );
 }

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

@@ -1,15 +1,25 @@
-import { RadioGroup, RadioGroupItem } from '../../../../../shadcn/ui/radio-group'
-import { Label } from '../../../../../shadcn/ui/label'
-import type { FieldRenderProps } from './types'
+import {
+  RadioGroup,
+  RadioGroupItem,
+} from '../../../../../shadcn/ui/radio-group';
+import { Label } from '../../../../../shadcn/ui/label';
+import type { FieldRenderProps } from './types';
 
-const NULL_SENTINEL = '__NULL__'
+const NULL_SENTINEL = '__NULL__';
 
-export function RadioField({ field, value, onChange, className, fieldPath }: FieldRenderProps) {
-  const toUiValue = (val: unknown) => (val === null || val === undefined ? NULL_SENTINEL : String(val))
+export function RadioField({
+  field,
+  value,
+  onChange,
+  className,
+  fieldPath,
+}: FieldRenderProps) {
+  const toUiValue = (val: unknown) =>
+    val === null || val === undefined ? NULL_SENTINEL : String(val);
   const fromUiValue = (val: string) => {
-    const match = field.options?.find(opt => toUiValue(opt.value) === val)
-    return match ? match.value : null
-  }
+    const match = field.options?.find((opt) => toUiValue(opt.value) === val);
+    return match ? match.value : null;
+  };
 
   return (
     <RadioGroup
@@ -18,12 +28,20 @@ export function RadioField({ field, value, onChange, className, fieldPath }: Fie
       disabled={field.disabled}
       className={className}
     >
-      {field.options?.map(option => (
-        <div key={toUiValue(option.value)} className="flex items-center space-x-2">
-          <RadioGroupItem value={toUiValue(option.value)} id={`${fieldPath}-${toUiValue(option.value)}`} />
-          <Label htmlFor={`${fieldPath}-${toUiValue(option.value)}`}>{option.label}</Label>
+      {field.options?.map((option) => (
+        <div
+          key={toUiValue(option.value)}
+          className="flex items-center space-x-2"
+        >
+          <RadioGroupItem
+            value={toUiValue(option.value)}
+            id={`${fieldPath}-${toUiValue(option.value)}`}
+          />
+          <Label htmlFor={`${fieldPath}-${toUiValue(option.value)}`}>
+            {option.label}
+          </Label>
         </div>
       ))}
     </RadioGroup>
-  )
+  );
 }

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

@@ -1,14 +1,26 @@
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../../../../shadcn/ui/select'
-import type { FieldRenderProps } from './types'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../../../../shadcn/ui/select';
+import type { FieldRenderProps } from './types';
 
-const NULL_SENTINEL = '__NULL__'
+const NULL_SENTINEL = '__NULL__';
 
-export function SelectField({ field, value, onChange, className }: FieldRenderProps) {
-  const toUiValue = (val: unknown) => (val === null || val === undefined ? NULL_SENTINEL : String(val))
+export function SelectField({
+  field,
+  value,
+  onChange,
+  className,
+}: FieldRenderProps) {
+  const toUiValue = (val: unknown) =>
+    val === null || val === undefined ? NULL_SENTINEL : String(val);
   const fromUiValue = (val: string) => {
-    const match = field.options?.find(opt => toUiValue(opt.value) === val)
-    return match ? match.value : null
-  }
+    const match = field.options?.find((opt) => toUiValue(opt.value) === val);
+    return match ? match.value : null;
+  };
 
   return (
     <Select
@@ -20,12 +32,15 @@ export function SelectField({ field, value, onChange, className }: FieldRenderPr
         <SelectValue placeholder={field.placeholder} />
       </SelectTrigger>
       <SelectContent>
-        {field.options?.map(option => (
-          <SelectItem key={toUiValue(option.value)} value={toUiValue(option.value)}>
+        {field.options?.map((option) => (
+          <SelectItem
+            key={toUiValue(option.value)}
+            value={toUiValue(option.value)}
+          >
             {option.label}
           </SelectItem>
         ))}
       </SelectContent>
     </Select>
-  )
+  );
 }

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

@@ -1,13 +1,19 @@
-import { Switch } from '../../../../../shadcn/ui/switch'
-import { Label } from '../../../../../shadcn/ui/label'
-import { cn } from '../../../../../shadcn/lib/utils'
-import type { FieldRenderProps } from './types'
+import { Switch } from '../../../../../shadcn/ui/switch';
+import { Label } from '../../../../../shadcn/ui/label';
+import { cn } from '../../../../../shadcn/lib/utils';
+import type { FieldRenderProps } from './types';
 
-export function SwitchField({ field, fieldPath, value, onChange, className }: FieldRenderProps) {
-  const placement = field.labelPlacement ?? 'inline'
+export function SwitchField({
+  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 SwitchField({ field, fieldPath, value, onChange, className }: Fi
           className={cn(className)}
         />
       </div>
-    )
+    );
   }
 
   if (placement === 'hidden') {
@@ -35,7 +41,7 @@ export function SwitchField({ field, fieldPath, value, onChange, className }: Fi
         disabled={field.disabled}
         className={cn(className)}
       />
-    )
+    );
   }
 
   return (
@@ -47,10 +53,13 @@ export function SwitchField({ field, fieldPath, value, onChange, className }: Fi
         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/TextField.tsx

@@ -1,9 +1,15 @@
-import { Input } from '../../../../../shadcn/ui/input'
-import type { FieldRenderProps } from './types'
+import { Input } from '../../../../../shadcn/ui/input';
+import type { FieldRenderProps } from './types';
 
-export function TextField({ field, fieldPath, value, onChange, className }: FieldRenderProps) {
+export function TextField({
+  field,
+  fieldPath,
+  value,
+  onChange,
+  className,
+}: FieldRenderProps) {
   const type: 'text' | 'email' | 'password' =
-    field.type === 'email' || field.type === 'password' ? field.type : 'text'
+    field.type === 'email' || field.type === 'password' ? field.type : 'text';
   return (
     <Input
       id={fieldPath}
@@ -14,5 +20,5 @@ export function TextField({ field, fieldPath, value, onChange, className }: Fiel
       value={(value as string) || ''}
       onChange={(e) => onChange(e.target.value)}
     />
-  )
+  );
 }

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

@@ -1,7 +1,12 @@
-import { Textarea } from '../../../../../shadcn/ui/textarea'
-import type { FieldRenderProps } from './types'
+import { Textarea } from '../../../../../shadcn/ui/textarea';
+import type { FieldRenderProps } from './types';
 
-export function TextareaField({ field, value, onChange, className }: FieldRenderProps) {
+export function TextareaField({
+  field,
+  value,
+  onChange,
+  className,
+}: FieldRenderProps) {
   return (
     <Textarea
       className={className}
@@ -11,5 +16,5 @@ export function TextareaField({ field, value, onChange, className }: FieldRender
       onChange={(e) => onChange(e.target.value)}
       rows={4}
     />
-  )
+  );
 }

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

@@ -1,14 +1,19 @@
-import * as React from 'react'
-import type { FieldRenderProps } from './types'
-import { TimePicker } from '../../../../components/timepicker/TimePicker'
+import * as React from 'react';
+import type { FieldRenderProps } from './types';
+import { TimePicker } from '../../../../components/timepicker/TimePicker';
 
-export function TimePickerField({ field, value, onChange, className }: FieldRenderProps) {
+export function TimePickerField({
+  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 (
     <TimePicker
@@ -24,7 +29,7 @@ export function TimePickerField({ field, value, onChange, className }: FieldRend
       cancelLabel={field.cancelLabel}
       applyLabel={field.applyLabel}
     />
-  )
+  );
 }
 
-export default TimePickerField
+export default TimePickerField;

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

@@ -1,21 +1,27 @@
-import * as React from 'react'
-import type { FieldRenderProps } from './types'
-import { TimeRangePicker } from '../../../../components/timepicker/TimeRangePicker'
+import * as React from 'react';
+import type { FieldRenderProps } from './types';
+import { TimeRangePicker } from '../../../../components/timepicker/TimeRangePicker';
 
-export function TimeRangePickerField({ field, value, onChange, className }: FieldRenderProps) {
+export function TimeRangePickerField({
+  field,
+  value,
+  onChange,
+  className,
+}: FieldRenderProps) {
   const v = React.useMemo(() => {
-    if (!value || typeof value !== 'object') return null as { from?: Date | null; to?: Date | null } | null
-    const anyVal = value as { from?: unknown; to?: unknown }
+    if (!value || typeof value !== 'object')
+      return null as { from?: Date | null; to?: Date | null } | null;
+    const anyVal = value as { from?: unknown; to?: unknown };
     const toDate = (x: unknown) => {
-      if (!x) return undefined
-      if (x instanceof Date) return x
-      const d = new Date(x as string)
-      return Number.isNaN(d.getTime()) ? undefined : d
-    }
-    const from = toDate(anyVal.from) ?? null
-    const to = toDate(anyVal.to) ?? null
-    return { from, to }
-  }, [value])
+      if (!x) return undefined;
+      if (x instanceof Date) return x;
+      const d = new Date(x as string);
+      return Number.isNaN(d.getTime()) ? undefined : d;
+    };
+    const from = toDate(anyVal.from) ?? null;
+    const to = toDate(anyVal.to) ?? null;
+    return { from, to };
+  }, [value]);
 
   return (
     <TimeRangePicker
@@ -31,7 +37,7 @@ export function TimeRangePickerField({ field, value, onChange, className }: Fiel
       cancelLabel={field.cancelLabel}
       applyLabel={field.applyLabel}
     />
-  )
+  );
 }
 
-export default TimeRangePickerField
+export default TimeRangePickerField;

package/src/kit/builder/form/components/fields/index.ts

@@ -1,21 +1,21 @@
-export * from './types'
-export * from './AutocompleteField'
-export * from './TextField'
-export * from './NumberField'
-export * from './TextareaField'
-export * from './SelectField'
-export * from './CheckboxField'
-export * from './SwitchField'
-export * from './RadioField'
-export * from './DateField'
-export * from './DatePickerField'
-export * from './DateRangePickerField'
-export * from './MonthPickerField'
-export * from './MonthRangePickerField'
-export * from './TimePickerField'
-export * from './TimeRangePickerField'
-export * from './DateTimePickerField'
-export * from './DateTimeRangePickerField'
-export * from './FileField'
-export * from './ObjectField'
-export * from './ArrayField'
+export * from './types';
+export * from './AutocompleteField';
+export * from './TextField';
+export * from './NumberField';
+export * from './TextareaField';
+export * from './SelectField';
+export * from './CheckboxField';
+export * from './SwitchField';
+export * from './RadioField';
+export * from './DateField';
+export * from './DatePickerField';
+export * from './DateRangePickerField';
+export * from './MonthPickerField';
+export * from './MonthRangePickerField';
+export * from './TimePickerField';
+export * from './TimeRangePickerField';
+export * from './DateTimePickerField';
+export * from './DateTimeRangePickerField';
+export * from './FileField';
+export * from './ObjectField';
+export * from './ArrayField';

package/src/kit/builder/form/components/fields/types.ts

@@ -1,14 +1,18 @@
-import type { Control, FieldValues } from 'react-hook-form'
-import type { FormBuilderFieldConfig } from '../../types'
+import type { Control, FieldValues } from 'react-hook-form';
+import type { FormBuilderFieldConfig } from '../../types';
 
 export interface FieldRenderProps {
-  field: FormBuilderFieldConfig<any, any>
-  control: Control<FieldValues>
-  fieldPath: string
-  value: unknown
-  onChange: (value: unknown, ...extras: unknown[]) => void
-  className?: string
-  disabled?: boolean
-  errorMessage?: string
-  onFieldChange?: (name: string, value: unknown, allValues: Record<string, unknown>) => void
+  field: FormBuilderFieldConfig<any, any>;
+  control: Control<FieldValues>;
+  fieldPath: string;
+  value: unknown;
+  onChange: (value: unknown, ...extras: unknown[]) => void;
+  className?: string;
+  disabled?: boolean;
+  errorMessage?: string;
+  onFieldChange?: (
+    name: string,
+    value: unknown,
+    allValues: Record<string, unknown>,
+  ) => void;
 }