@k3-universe/react-kit 0.0.12 → 0.0.13

package/dist/kit/themes/spotify.css

@@ -87,6 +87,8 @@
     --font-sans: var(--font-sans);
     --font-serif: var(--font-serif);
     --font-mono: var(--font-mono);
+    --color-red-500: oklch(63.7% .237 25.331);
+    --color-green-500: oklch(72.3% .219 149.579);
     --color-teal-50: oklch(98.4% .014 180.72);
     --color-teal-700: oklch(51.1% .096 186.391);
     --color-blue-50: oklch(97% .014 254.604);
@@ -470,6 +472,10 @@
     top: calc(var(--spacing) * 0);
   }
 
+  .top-1 {
+    top: calc(var(--spacing) * 1);
+  }
+
   .top-1\.5 {
     top: calc(var(--spacing) * 1.5);
   }
@@ -942,6 +948,10 @@
     height: calc(var(--spacing) * 5);
   }
 
+  .h-6 {
+    height: calc(var(--spacing) * 6);
+  }
+
   .h-7 {
     height: calc(var(--spacing) * 7);
   }
@@ -970,6 +980,10 @@
     height: calc(var(--spacing) * 24);
   }
 
+  .h-28 {
+    height: calc(var(--spacing) * 28);
+  }
+
   .h-40 {
     height: calc(var(--spacing) * 40);
   }
@@ -1118,6 +1132,10 @@
     width: calc(var(--spacing) * 5);
   }
 
+  .w-6 {
+    width: calc(var(--spacing) * 6);
+  }
+
   .w-7 {
     width: calc(var(--spacing) * 7);
   }
@@ -1146,6 +1164,10 @@
     width: calc(var(--spacing) * 24);
   }
 
+  .w-28 {
+    width: calc(var(--spacing) * 28);
+  }
+
   .w-32 {
     width: calc(var(--spacing) * 32);
   }
@@ -1734,6 +1756,10 @@
     row-gap: calc(var(--spacing) * .5);
   }
 
+  .self-center {
+    align-self: center;
+  }
+
   .self-start {
     align-self: flex-start;
   }
@@ -1960,6 +1986,16 @@
     }
   }
 
+  .bg-black\/40 {
+    background-color: #0006;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-black\/40 {
+      background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
+    }
+  }
+
   .bg-black\/50 {
     background-color: #00000080;
   }
@@ -2420,6 +2456,10 @@
     color: var(--color-gray-900);
   }
 
+  .text-green-500 {
+    color: var(--color-green-500);
+  }
+
   .text-muted-foreground {
     color: var(--muted-foreground);
   }
@@ -2436,6 +2476,10 @@
     color: var(--primary-foreground);
   }
 
+  .text-red-500 {
+    color: var(--color-red-500);
+  }
+
   .text-secondary-foreground {
     color: var(--secondary-foreground);
   }
@@ -2594,6 +2638,12 @@
     outline-width: 1px;
   }
 
+  .drop-shadow {
+    --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, #0000001a)) drop-shadow(0 1px 1px var(--tw-drop-shadow-color, #0000000f));
+    --tw-drop-shadow: drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f);
+    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
+  }
+
   .filter {
     filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
   }
@@ -3150,6 +3200,16 @@
   }
 
   @media (hover: hover) {
+    .hover\:border-foreground\/50:hover {
+      border-color: var(--foreground);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:border-foreground\/50:hover {
+        border-color: color-mix(in oklab, var(--foreground) 50%, transparent);
+      }
+    }
+
     .hover\:bg-accent:hover {
       background-color: var(--accent);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k3-universe/react-kit",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -64,6 +64,7 @@
     "next-themes": "^0.4.6",
     "react-day-picker": "^9.9.0",
     "react-hook-form": "^7.62.0",
+    "react-dropzone": "^14.2.3",
     "react-resizable-panels": "^3.0.4",
     "recharts": "2.15.4",
     "sonner": "^2.0.7",

package/src/index.ts

@@ -6,6 +6,7 @@ export * from './kit/builder/dialog';
 export * from './kit/builder/form';
 export * from './kit/builder/section';
 export * from './kit/builder/page';
+export * from './kit/builder/stack-dialog';
 // Ensure default export for Page at root
 export { default as Page } from './kit/builder/page/Page';
 
@@ -16,6 +17,7 @@ export * from './kit/components/autocomplete';
 export * from './kit/components/login';
 // Ensure default export for Login at root
 export { default as Login } from './kit/components/login/Login';
+export * from './kit/components/fileuploader';
 
 // -----------------------------
 // KIT: layouts (admin)

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

@@ -17,6 +17,11 @@ import type {
   AutocompleteFetcher,
   AutocompleteOption,
 } from '../../../components/autocomplete/types';
+import type { Accept } from 'react-dropzone';
+import type {
+  FileRecord,
+  FileUploaderLayout,
+} from '../../../components/fileuploader/types';
 
 export interface FormBuilderFieldConfig {
   id?: string; // Optional ID for test fixtures
@@ -75,6 +80,9 @@ export interface FormBuilderFieldConfig {
         max?: { value: number; message: string };
         minLength?: { value: number; message: string };
         maxLength?: { value: number; message: string };
+        // For array-like fields (e.g., file uploader)
+        minItems?: { value: number; message: string };
+        maxItems?: { value: number; message: string };
       };
   defaultValue?: unknown;
   fields?: FormBuilderFieldConfig[]; // For nested object/array fields
@@ -136,6 +144,21 @@ export interface FormBuilderFieldConfig {
   hourCycle?: 12 | 24;
   minuteStep?: number;
   secondStep?: number;
+  // File uploader specific options
+  fileMultiple?: boolean;
+  fileMaxFiles?: number;
+  fileAccept?: Accept;
+  fileLayout?: FileUploaderLayout;
+  fileWithDownload?: boolean;
+  fileUploader?: (
+    file: File,
+    onProgress: (pct: number) => void,
+  ) => Promise<Partial<FileRecord>>;
+  fileOnUploadSuccess?: (file: FileRecord) => void;
+  fileOnUploadError?: (file: FileRecord, error: unknown) => void;
+  fileOnRemove?: (file: FileRecord) => void | Promise<void>;
+  fileOnRetry?: (file: FileRecord) => void;
+  fileOnRetryAll?: (files: FileRecord[]) => void;
 }
 
 export interface FormBuilderSectionConfig {
@@ -236,6 +259,9 @@ export function FormBuilder({
           case 'number':
             baseSchema = z.number();
             break;
+          case 'file':
+            baseSchema = z.array(z.unknown());
+            break;
           case 'date_picker':
           case 'month':
           case 'date':
@@ -304,6 +330,27 @@ export function FormBuilder({
             validationObj.maxLength.message
           );
         }
+        // Array item count constraints
+        if (baseSchema instanceof z.ZodArray) {
+          let arr = baseSchema as z.ZodArray<z.ZodTypeAny>;
+          if (validationObj.minItems) {
+            arr = arr.min(
+              validationObj.minItems.value,
+              validationObj.minItems.message,
+            );
+          }
+          if (validationObj.maxItems) {
+            arr = arr.max(
+              validationObj.maxItems.value,
+              validationObj.maxItems.message,
+            );
+          }
+          // If required and file field, enforce at least 1 item when no explicit minItems
+          if (field.type === 'file' && field.required && !validationObj.minItems) {
+            arr = arr.min(1, `${field.label} requires at least 1 file`);
+          }
+          baseSchema = arr;
+        }
 
         return field.required ? baseSchema : baseSchema.optional();
       }
@@ -317,6 +364,15 @@ export function FormBuilder({
         case 'number':
           fieldSchema = z.number();
           break;
+        case 'file': {
+          let arr = z.array(z.unknown());
+          // If required, ensure at least 1 file
+          if (field.required) {
+            arr = arr.min(1, `${field.label} requires at least 1 file`);
+          }
+          fieldSchema = arr;
+          break;
+        }
         case 'date_picker':
         case 'month':
         case 'date':

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

@@ -1,14 +1,26 @@
-import { Input } from '../../../../../shadcn/ui/input'
 import type { FieldRenderProps } from './types'
+import { FileUploader } from '../../../../components/fileuploader/FileUploader'
 
-export function FileField({ field, onChange, className }: FieldRenderProps) {
+export function FileField({ field, value, onChange, className }: FieldRenderProps) {
+  const files = Array.isArray(value) ? value : []
   return (
-    <Input
+    <FileUploader
       className={className}
       disabled={field.disabled}
       placeholder={field.placeholder}
-      type="file"
-      onChange={(e) => onChange((e.target as HTMLInputElement).files?.[0] || null)}
+      value={files}
+      onChange={(files) => onChange(files)}
+      multiple={field.fileMultiple ?? true}
+      maxFiles={field.fileMaxFiles}
+      accept={field.fileAccept}
+      layout={field.fileLayout ?? 'grid'}
+      withDownload={field.fileWithDownload ?? true}
+      uploader={field.fileUploader}
+      onUploadSuccess={field.fileOnUploadSuccess}
+      onUploadError={field.fileOnUploadError}
+      onRemove={field.fileOnRemove}
+      onRetry={field.fileOnRetry}
+      onRetryAll={field.fileOnRetryAll}
     />
   )
 }

package/src/kit/builder/stack-dialog/hooks.ts

@@ -1,7 +1,8 @@
 import { useContext } from 'react';
 import { StackDialogContext } from './context';
+import type { StackDialogHook } from './types';
 
-export function useStackDialog() {
+export function useStackDialog(): StackDialogHook {
   const { createDialog, closeDialog, closeAllDialogs } = useContext(StackDialogContext);
   return {
     createDialog,

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

@@ -1,13 +1,18 @@
 export {
-  StackDialogContext as Context
+  StackDialogContext,
 } from './context'
 
 export {
-  StackDialogContextProvider as ContextProvider
+  StackDialogContextProvider as StackDialogProvider,
 } from './provider'
 
 export {
   useStackDialog
 } from './hooks'
 
-export type * from './types'
+export type {
+  StackDialogContextInstance,
+  StackDialogCreateConfig,
+  StackDialogHook,
+  StackDialogInstance
+} from './types'

package/src/kit/builder/stack-dialog/renderer.tsx

@@ -1,6 +1,6 @@
-import { Dialog } from '@/shadcn/ui/dialog';
-import { StackDialogInstance } from './types';
 import { DialogContent } from '@radix-ui/react-dialog';
+import { Dialog } from '../../../shadcn/ui/dialog';
+import { StackDialogInstance } from './types';
 
 export function StackDialogRenderer(props: {
   dialogs: StackDialogInstance[],

package/src/kit/builder/stack-dialog/types.ts

@@ -20,3 +20,5 @@ export type StackDialogCreateConfig = {
   closeOnInteractOutside?: boolean,
   closeOnEscapePressed?: boolean,
 };
+
+export type StackDialogHook = Omit<StackDialogContextInstance, "activeDialogs">