@k3-universe/react-kit 0.0.27 → 0.0.29

package/src/kit/builder/dialog/index.ts

@@ -1,2 +1,6 @@
-export { default as DialogProvider, useDialog, useDialogController } from './provider';
+export {
+  default as DialogProvider,
+  useDialog,
+  useDialogController,
+} from './provider';
 export type { ConfirmOptions, CustomModalOptions } from './provider';

package/src/kit/builder/dialog/provider.tsx

@@ -1,4 +1,11 @@
-import React, { createContext, useCallback, use, useMemo, useRef, useState } from 'react';
+import {
+  createContext,
+  useCallback,
+  use,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import {
   AlertDialog,
   AlertDialogAction,
@@ -25,18 +32,24 @@ export type CustomModalOptions = {
   // Optional size/placement pass-through to DialogContent if needed later
 };
 
-type CustomRenderer<T = unknown> = (api: { close: (value?: T) => void }) => React.ReactNode;
+type CustomRenderer<T = unknown> = (api: {
+  close: (value?: T) => void;
+}) => React.ReactNode;
 
 interface DialogContextValue {
   confirm: (opts?: ConfirmOptions) => Promise<boolean>;
-  open: <T = unknown>(render: CustomRenderer<T>, opts?: CustomModalOptions) => Promise<T | undefined>;
+  open: <T = unknown>(
+    render: CustomRenderer<T>,
+    opts?: CustomModalOptions,
+  ) => Promise<T | undefined>;
 }
 
 const DialogContext = createContext<DialogContextValue | null>(null);
 
 export function useDialogController(): DialogContextValue {
   const ctx = use(DialogContext);
-  if (!ctx) throw new Error('useDialogController must be used within DialogProvider');
+  if (!ctx)
+    throw new Error('useDialogController must be used within DialogProvider');
   return ctx;
 }
 
@@ -45,8 +58,11 @@ export function DialogProvider({ children }: { children: React.ReactNode }) {
   const resolverRef = useRef<((value: unknown) => void) | null>(null);
   const [mode, setMode] = useState<'confirm' | 'custom' | null>(null);
   const [confirmOpts, setConfirmOpts] = useState<ConfirmOptions>({});
-  const [customRender, setCustomRender] = useState<CustomRenderer<unknown> | null>(null);
-  const [customOpts, setCustomOpts] = useState<CustomModalOptions | undefined>(undefined);
+  const [customRender, setCustomRender] =
+    useState<CustomRenderer<unknown> | null>(null);
+  const [customOpts, setCustomOpts] = useState<CustomModalOptions | undefined>(
+    undefined,
+  );
 
   const confirm = useCallback((options?: ConfirmOptions) => {
     setConfirmOpts(options ?? {});
@@ -57,15 +73,18 @@ export function DialogProvider({ children }: { children: React.ReactNode }) {
     });
   }, []);
 
-  const openCustom = useCallback(<T,>(render: CustomRenderer<T>, options?: CustomModalOptions) => {
-    setCustomRender(() => render as unknown as CustomRenderer<unknown>);
-    setCustomOpts(options);
-    setMode('custom');
-    setOpen(true);
-    return new Promise<T | undefined>((resolve) => {
-      resolverRef.current = resolve as (value: unknown) => void;
-    });
-  }, []);
+  const openCustom = useCallback(
+    <T,>(render: CustomRenderer<T>, options?: CustomModalOptions) => {
+      setCustomRender(() => render as unknown as CustomRenderer<unknown>);
+      setCustomOpts(options);
+      setMode('custom');
+      setOpen(true);
+      return new Promise<T | undefined>((resolve) => {
+        resolverRef.current = resolve as (value: unknown) => void;
+      });
+    },
+    [],
+  );
 
   const handleClose = useCallback((result: unknown) => {
     setOpen(false);
@@ -76,7 +95,10 @@ export function DialogProvider({ children }: { children: React.ReactNode }) {
     setMode(null);
   }, []);
 
-  const value = useMemo<DialogContextValue>(() => ({ confirm, open: openCustom }), [confirm, openCustom]);
+  const value = useMemo<DialogContextValue>(
+    () => ({ confirm, open: openCustom }),
+    [confirm, openCustom],
+  );
 
   const {
     title: cTitle = 'Are you sure?',
@@ -95,19 +117,29 @@ export function DialogProvider({ children }: { children: React.ReactNode }) {
       {children}
       {/* Confirm Dialog */}
       {mode === 'confirm' && (
-        <AlertDialog open={open} onOpenChange={o => !o && handleClose(false)}>
+        <AlertDialog open={open} onOpenChange={(o) => !o && handleClose(false)}>
           <AlertDialogContent>
             <AlertDialogHeader>
-              <AlertDialogTitle className="text-foreground">{cTitle}</AlertDialogTitle>
+              <AlertDialogTitle className="text-foreground">
+                {cTitle}
+              </AlertDialogTitle>
               {cDesc ? (
-                <AlertDialogDescription className="text-muted-foreground">{cDesc}</AlertDialogDescription>
+                <AlertDialogDescription className="text-muted-foreground">
+                  {cDesc}
+                </AlertDialogDescription>
               ) : null}
             </AlertDialogHeader>
             <AlertDialogFooter>
-              <AlertDialogCancel className="text-foreground" onClick={() => handleClose(false)}>
+              <AlertDialogCancel
+                className="text-foreground"
+                onClick={() => handleClose(false)}
+              >
                 {cCancelText}
               </AlertDialogCancel>
-              <AlertDialogAction className={actionClass} onClick={() => handleClose(true)}>
+              <AlertDialogAction
+                className={actionClass}
+                onClick={() => handleClose(true)}
+              >
                 {cConfirmText}
               </AlertDialogAction>
             </AlertDialogFooter>
@@ -117,15 +149,12 @@ export function DialogProvider({ children }: { children: React.ReactNode }) {
 
       {/* Custom Modal */}
       {mode === 'custom' && customRender && (
-        <Dialog
-          open={open}
-          onOpenChange={o => !o && handleClose(undefined)}
-        >
+        <Dialog open={open} onOpenChange={(o) => !o && handleClose(undefined)}>
           <DialogContent
-            onEscapeKeyDown={e => {
+            onEscapeKeyDown={(e) => {
               if (customOpts?.preventCloseOnEscape) e.preventDefault();
             }}
-            onInteractOutside={e => {
+            onInteractOutside={(e) => {
               if (customOpts?.preventCloseOnInteractOutside) e.preventDefault();
             }}
           >

package/src/kit/builder/form/components/FormBuilder.tsx

@@ -1,9 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef } from 'react';
-import {
-  useWatch,
-  type FieldValues,
-  type Path,
-} from 'react-hook-form';
+import { useWatch, type FieldValues, type Path } from 'react-hook-form';
 import { cn } from '../../../../shadcn/lib/utils';
 import { Button } from '../../../../shadcn/ui/button';
 import SectionBuilder from '../../section/SectionBuilder';
@@ -95,7 +91,7 @@ export function FormBuilder<TFieldValues extends FieldValues = FieldValues>({
 
   const handleFieldDependencies = useCallback(
     (
-      field: FormBuilderFieldConfig<TFieldValues, string | Path<TFieldValues>>
+      field: FormBuilderFieldConfig<TFieldValues, string | Path<TFieldValues>>,
     ) => {
       if (!hasDependencies || !field.dependencies) return {};
 
@@ -121,7 +117,7 @@ export function FormBuilder<TFieldValues extends FieldValues = FieldValues>({
           case 'setValue':
             if (conditionMet && dep.value !== undefined) {
               const currentValue = getValues(
-                field.name as unknown as Path<TFieldValues>
+                field.name as unknown as Path<TFieldValues>,
               );
               if (currentValue !== dep.value) {
                 // Defer the update to an effect to prevent state changes during render
@@ -137,7 +133,7 @@ export function FormBuilder<TFieldValues extends FieldValues = FieldValues>({
 
       return result;
     },
-    [hasDependencies, watchedValues, getValues]
+    [hasDependencies, watchedValues, getValues],
   );
 
   // Flush any pending setValue updates after watchedValues change
@@ -173,7 +169,7 @@ export function FormBuilder<TFieldValues extends FieldValues = FieldValues>({
         field.onChange(value, extras, setValue, getValues);
       }
     },
-    [setValue, getValues]
+    [setValue, getValues],
   );
 
   const handleFormSubmit = useCallback(
@@ -184,7 +180,7 @@ export function FormBuilder<TFieldValues extends FieldValues = FieldValues>({
         console.error('Form submission error:', error);
       }
     },
-    [onSubmit]
+    [onSubmit],
   );
 
   const handleReset = useCallback(() => {
@@ -210,7 +206,7 @@ export function FormBuilder<TFieldValues extends FieldValues = FieldValues>({
       handleFieldChange,
       onFieldChange,
       getValues,
-    ]
+    ],
   );
 
   const contextValue = useMemo(
@@ -222,7 +218,7 @@ export function FormBuilder<TFieldValues extends FieldValues = FieldValues>({
         onFieldChange,
         handleFieldDependencies,
         handleFieldChange,
-      } satisfies FormBuilderContextValue<TFieldValues>),
+      }) satisfies FormBuilderContextValue<TFieldValues>,
     [
       control,
       getValues,
@@ -230,7 +226,7 @@ export function FormBuilder<TFieldValues extends FieldValues = FieldValues>({
       onFieldChange,
       handleFieldDependencies,
       handleFieldChange,
-    ]
+    ],
   );
 
   return (
@@ -250,7 +246,7 @@ export function FormBuilder<TFieldValues extends FieldValues = FieldValues>({
                 'flex flex-col sm:flex-row gap-3',
                 showActionsSeparator && 'pt-6',
                 showActionsSeparator && 'border-t',
-                actionsClassName
+                actionsClassName,
               )}
             >
               <Button

package/src/kit/builder/form/components/FormBuilderActions.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import { Button } from '../../../../shadcn/ui/button';
 import { cn } from '../../../../shadcn/lib/utils';
 

package/src/kit/builder/form/components/FormBuilderContext.tsx

@@ -13,17 +13,19 @@ interface DependencyState {
   hidden?: boolean;
 }
 
-export interface FormBuilderContextValue<TFieldValues extends FieldValues = FieldValues> {
+export interface FormBuilderContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+> {
   control: Control<TFieldValues>;
   getValues: UseFormGetValues<TFieldValues>;
   setValue: UseFormSetValue<TFieldValues>;
   onFieldChange?: (
     name: Path<TFieldValues> | string,
     value: unknown,
-    allValues: TFieldValues
+    allValues: TFieldValues,
   ) => void;
   handleFieldDependencies: (
-    field: FormBuilderFieldConfig<TFieldValues, string | Path<TFieldValues>>
+    field: FormBuilderFieldConfig<TFieldValues, string | Path<TFieldValues>>,
   ) => DependencyState;
   handleFieldChange: (
     field: FormBuilderFieldConfig<TFieldValues, string | Path<TFieldValues>>,
@@ -32,10 +34,15 @@ export interface FormBuilderContextValue<TFieldValues extends FieldValues = Fiel
   ) => void;
 }
 
-const FormBuilderContext = createContext<FormBuilderContextValue<FieldValues> | null>(null);
+const FormBuilderContext =
+  createContext<FormBuilderContextValue<FieldValues> | null>(null);
 
-export function useFormBuilderContext<TFieldValues extends FieldValues = FieldValues>() {
-  const value = useContext(FormBuilderContext) as FormBuilderContextValue<TFieldValues> | null;
+export function useFormBuilderContext<
+  TFieldValues extends FieldValues = FieldValues,
+>() {
+  const value = useContext(
+    FormBuilderContext,
+  ) as FormBuilderContextValue<TFieldValues> | null;
   if (!value) {
     throw new Error('FormBuilderGroup must be used within a FormBuilder.');
   }

package/src/kit/builder/form/components/FormBuilderField.tsx

@@ -29,20 +29,31 @@ import {
 
 export interface FormBuilderFieldProps<
   TFieldValues extends FieldValues = FieldValues,
-  TName extends string | Path<TFieldValues> = Path<TFieldValues>
+  TName extends string | Path<TFieldValues> = Path<TFieldValues>,
 > {
   field: FormBuilderFieldConfig<TFieldValues, TName>;
   control: Control<TFieldValues>;
   onChange?: (value: unknown, ...extras: unknown[]) => void;
-  onFieldChange?: (name: import('react-hook-form').Path<TFieldValues> | string, value: unknown, allValues: TFieldValues) => void;
+  onFieldChange?: (
+    name: import('react-hook-form').Path<TFieldValues> | string,
+    value: unknown,
+    allValues: TFieldValues,
+  ) => void;
   parentPath?: string;
 }
 
 export function FormBuilderField<
   TFieldValues extends FieldValues = FieldValues,
-  TName extends string | Path<TFieldValues> = Path<TFieldValues>
->({ field, control, onChange, parentPath }: FormBuilderFieldProps<TFieldValues, TName>) {
-  const fieldPath = parentPath ? `${parentPath}.${field.name}` : (field.name as string);
+  TName extends string | Path<TFieldValues> = Path<TFieldValues>,
+>({
+  field,
+  control,
+  onChange,
+  parentPath,
+}: FormBuilderFieldProps<TFieldValues, TName>) {
+  const fieldPath = parentPath
+    ? `${parentPath}.${field.name}`
+    : (field.name as string);
 
   const {
     field: controllerField,
@@ -53,12 +64,15 @@ export function FormBuilderField<
     disabled: field.disabled,
   });
 
-  const handleChange = useCallback((value: unknown, ...extras: unknown[]) => {
-    // Only patch the RHF value with the first argument (the canonical value)
-    controllerField.onChange(value);
-    // Forward any extra metadata upstream (e.g., option, raw)
-    onChange?.(value, ...extras);
-  }, [controllerField, onChange]);
+  const handleChange = useCallback(
+    (value: unknown, ...extras: unknown[]) => {
+      // Only patch the RHF value with the first argument (the canonical value)
+      controllerField.onChange(value);
+      // Forward any extra metadata upstream (e.g., option, raw)
+      onChange?.(value, ...extras);
+    },
+    [controllerField, onChange],
+  );
   const baseClassName = cn(
     error && 'border-destructive focus-visible:ring-destructive',
     field.className,
@@ -306,7 +320,7 @@ export function FormBuilderField<
           fieldPath,
           control,
           value: controllerField.value,
-          handleChange
+          handleChange,
         });
       default:
         return (
@@ -329,13 +343,22 @@ export function FormBuilderField<
   // For checkbox/switch, label is handled inside the specific field component
   if (field.type === 'checkbox' || field.type === 'switch') {
     return (
-      <div className={cn('space-y-2', field.gridCols && `md:col-span-${field.gridCols}`)}>
+      <div
+        className={cn(
+          'space-y-2',
+          field.gridCols && `md:col-span-${field.gridCols}`,
+        )}
+      >
         {renderField()}
         {field.description && (
           <p className="text-sm text-muted-foreground">{field.description}</p>
         )}
         {error && (
-          <p className="text-sm font-medium text-destructive" role="alert" aria-live="polite">
+          <p
+            className="text-sm font-medium text-destructive"
+            role="alert"
+            aria-live="polite"
+          >
             {error.message}
           </p>
         )}
@@ -347,13 +370,22 @@ export function FormBuilderField<
   const placement = field.labelPlacement ?? 'stacked';
   if (placement === 'hidden' || field.type === 'array') {
     return (
-      <div className={cn('space-y-2', field.gridCols && `md:col-span-${field.gridCols}`)}>
+      <div
+        className={cn(
+          'space-y-2',
+          field.gridCols && `md:col-span-${field.gridCols}`,
+        )}
+      >
         {renderField()}
         {field.description && (
           <p className="text-sm text-muted-foreground">{field.description}</p>
         )}
         {error && (
-          <p className="text-sm font-medium text-destructive" role="alert" aria-live="polite">
+          <p
+            className="text-sm font-medium text-destructive"
+            role="alert"
+            aria-live="polite"
+          >
             {error.message}
           </p>
         )}
@@ -363,7 +395,12 @@ export function FormBuilderField<
 
   if (placement === 'inline') {
     return (
-      <div className={cn('space-y-1', field.gridCols && `md:col-span-${field.gridCols}`)}>
+      <div
+        className={cn(
+          'space-y-1',
+          field.gridCols && `md:col-span-${field.gridCols}`,
+        )}
+      >
         <div className="flex items-center gap-2">
           <Label htmlFor={fieldPath} className="text-sm font-medium">
             {field.label}
@@ -375,7 +412,11 @@ export function FormBuilderField<
           <p className="text-sm text-muted-foreground">{field.description}</p>
         )}
         {error && (
-          <p className="text-sm font-medium text-destructive" role="alert" aria-live="polite">
+          <p
+            className="text-sm font-medium text-destructive"
+            role="alert"
+            aria-live="polite"
+          >
             {error.message}
           </p>
         )}
@@ -385,7 +426,12 @@ export function FormBuilderField<
 
   // stacked (default)
   return (
-    <div className={cn('space-y-2', field.gridCols && `md:col-span-${field.gridCols}`)}>
+    <div
+      className={cn(
+        'space-y-2',
+        field.gridCols && `md:col-span-${field.gridCols}`,
+      )}
+    >
       <Label htmlFor={fieldPath} className="text-sm font-medium">
         {field.label}
         {field.required && <span className="text-destructive ml-1">*</span>}
@@ -395,7 +441,11 @@ export function FormBuilderField<
         <p className="text-sm text-muted-foreground">{field.description}</p>
       )}
       {error && (
-        <p className="text-sm font-medium text-destructive" role="alert" aria-live="polite">
+        <p
+          className="text-sm font-medium text-destructive"
+          role="alert"
+          aria-live="polite"
+        >
           {error.message}
         </p>
       )}