@algorithm-shift/design-system 1.2.41 → 1.2.42

package/dist/index.d.mts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React$1 from 'react';
 import { z } from 'zod';
+import { UseFormReturn } from 'react-hook-form';
 import { ClassValue } from 'clsx';
 
 interface ElementProps {
@@ -296,7 +297,7 @@ type CanvasAction = {
 };
 declare function stateReducer(state: CanvasState, action: CanvasAction): CanvasState;
 
-interface FormWrapperProps<T extends z.ZodObject<any>> {
+interface FormProps<T extends z.ZodObject<any>> {
     validation?: any[];
     formName?: string;
     defaultValues?: Partial<z.infer<T>> | any;
@@ -304,9 +305,19 @@ interface FormWrapperProps<T extends z.ZodObject<any>> {
     onSubmit?: (data: z.infer<T>) => void;
     onReset?: () => void;
 }
+declare const Form: <T extends z.ZodObject<any>>({ validation, defaultValues, children, onSubmit, onReset, }: FormProps<T>) => react_jsx_runtime.JSX.Element;
+
+interface FormWrapperProps<T extends z.ZodObject<any>> {
+    validation?: any[];
+    formName?: string;
+    defaultValues?: Partial<z.infer<T>> | any;
+    children?: React$1.ReactNode | ((form: UseFormReturn<z.infer<T>>) => React$1.ReactNode);
+    onSubmit?: (data: z.infer<T>) => void;
+    onReset?: () => void;
+}
 declare const FormWrapper: <T extends z.ZodObject<any>>({ validation, defaultValues, children, onSubmit, onReset, }: FormWrapperProps<T>) => react_jsx_runtime.JSX.Element;
 
 declare function cn(...inputs: ClassValue[]): string;
 declare function getInitials(name: string): string;
 
-export { ChartComponent as BarChart, Breadcrumb, ButtonWrapper as Button, SplitButton as ButtonGroup, CheckboxInput as Checkbox, Container, DatePicker, DateRange, Dropdown, EmailInput as Email, EmailComposer, FileInput, Flex as FlexLayout, FormWrapper as Form, Grid as GridLayout, ImageControl as Image, Modal, MultiCheckbox, Navbar, NumberInput, CustomPagination as Pagination, PasswordInput as Password, PhoneInput as Phone, DonutChart as PieChart, RadioInput as RadioGroup, RichText, SearchInput as Search, Shape, Spacer, StagesComponent as Stages, StateProvider, SwitchToggle, Table, Tabs, TextInput as Text, TextInputGroup, Textarea, Typography, UrlInput as URL, cn, getInitials, showSonnerToast, stateReducer, useAppState };
+export { ChartComponent as BarChart, Breadcrumb, ButtonWrapper as Button, SplitButton as ButtonGroup, CheckboxInput as Checkbox, Container, DatePicker, DateRange, Dropdown, EmailInput as Email, EmailComposer, FileInput, Flex as FlexLayout, Form, FormWrapper, Grid as GridLayout, ImageControl as Image, Modal, MultiCheckbox, Navbar, NumberInput, CustomPagination as Pagination, PasswordInput as Password, PhoneInput as Phone, DonutChart as PieChart, RadioInput as RadioGroup, RichText, SearchInput as Search, Shape, Spacer, StagesComponent as Stages, StateProvider, SwitchToggle, Table, Tabs, TextInput as Text, TextInputGroup, Textarea, Typography, UrlInput as URL, cn, getInitials, showSonnerToast, stateReducer, useAppState };

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React$1 from 'react';
 import { z } from 'zod';
+import { UseFormReturn } from 'react-hook-form';
 import { ClassValue } from 'clsx';
 
 interface ElementProps {
@@ -296,7 +297,7 @@ type CanvasAction = {
 };
 declare function stateReducer(state: CanvasState, action: CanvasAction): CanvasState;
 
-interface FormWrapperProps<T extends z.ZodObject<any>> {
+interface FormProps<T extends z.ZodObject<any>> {
     validation?: any[];
     formName?: string;
     defaultValues?: Partial<z.infer<T>> | any;
@@ -304,9 +305,19 @@ interface FormWrapperProps<T extends z.ZodObject<any>> {
     onSubmit?: (data: z.infer<T>) => void;
     onReset?: () => void;
 }
+declare const Form: <T extends z.ZodObject<any>>({ validation, defaultValues, children, onSubmit, onReset, }: FormProps<T>) => react_jsx_runtime.JSX.Element;
+
+interface FormWrapperProps<T extends z.ZodObject<any>> {
+    validation?: any[];
+    formName?: string;
+    defaultValues?: Partial<z.infer<T>> | any;
+    children?: React$1.ReactNode | ((form: UseFormReturn<z.infer<T>>) => React$1.ReactNode);
+    onSubmit?: (data: z.infer<T>) => void;
+    onReset?: () => void;
+}
 declare const FormWrapper: <T extends z.ZodObject<any>>({ validation, defaultValues, children, onSubmit, onReset, }: FormWrapperProps<T>) => react_jsx_runtime.JSX.Element;
 
 declare function cn(...inputs: ClassValue[]): string;
 declare function getInitials(name: string): string;
 
-export { ChartComponent as BarChart, Breadcrumb, ButtonWrapper as Button, SplitButton as ButtonGroup, CheckboxInput as Checkbox, Container, DatePicker, DateRange, Dropdown, EmailInput as Email, EmailComposer, FileInput, Flex as FlexLayout, FormWrapper as Form, Grid as GridLayout, ImageControl as Image, Modal, MultiCheckbox, Navbar, NumberInput, CustomPagination as Pagination, PasswordInput as Password, PhoneInput as Phone, DonutChart as PieChart, RadioInput as RadioGroup, RichText, SearchInput as Search, Shape, Spacer, StagesComponent as Stages, StateProvider, SwitchToggle, Table, Tabs, TextInput as Text, TextInputGroup, Textarea, Typography, UrlInput as URL, cn, getInitials, showSonnerToast, stateReducer, useAppState };
+export { ChartComponent as BarChart, Breadcrumb, ButtonWrapper as Button, SplitButton as ButtonGroup, CheckboxInput as Checkbox, Container, DatePicker, DateRange, Dropdown, EmailInput as Email, EmailComposer, FileInput, Flex as FlexLayout, Form, FormWrapper, Grid as GridLayout, ImageControl as Image, Modal, MultiCheckbox, Navbar, NumberInput, CustomPagination as Pagination, PasswordInput as Password, PhoneInput as Phone, DonutChart as PieChart, RadioInput as RadioGroup, RichText, SearchInput as Search, Shape, Spacer, StagesComponent as Stages, StateProvider, SwitchToggle, Table, Tabs, TextInput as Text, TextInputGroup, Textarea, Typography, UrlInput as URL, cn, getInitials, showSonnerToast, stateReducer, useAppState };

package/dist/index.js

@@ -43,7 +43,8 @@ __export(index_exports, {
   EmailComposer: () => EmailComposer,
   FileInput: () => FileInput_default,
   FlexLayout: () => Flex_default,
-  Form: () => Wrapper_default,
+  Form: () => Form_default,
+  FormWrapper: () => Wrapper_default,
   GridLayout: () => Grid_default,
   Image: () => Image_default,
   Modal: () => Modal_default,
@@ -2984,7 +2985,7 @@ function useAppState() {
   return (0, import_react15.useContext)(StateContext);
 }
 
-// src/components/Form/Wrapper.tsx
+// src/components/Form/Form.tsx
 var import_react16 = __toESM(require("react"));
 var import_zod = require("@hookform/resolvers/zod");
 var import_react_hook_form = require("react-hook-form");
@@ -3058,7 +3059,7 @@ function generateZodSchema(data) {
   }, {});
   return import_zod2.z.object(fields);
 }
-var FormWrapper = ({
+var Form = ({
   validation,
   defaultValues,
   children,
@@ -3135,6 +3136,116 @@ var FormWrapper = ({
     }
   );
 };
+var Form_default = Form;
+
+// src/components/Form/Wrapper.tsx
+var import_react17 = require("react");
+var import_zod3 = require("@hookform/resolvers/zod");
+var import_react_hook_form2 = require("react-hook-form");
+var import_zod4 = require("zod");
+var import_jsx_runtime58 = require("react/jsx-runtime");
+function generateZodSchema2(data) {
+  const fields = data.reduce((acc, f) => {
+    const name = f.name || "unnamed";
+    const message = f.message || `${name} is invalid`;
+    const passwordLen = f.passwordLength;
+    let fieldSchema = import_zod4.z.string({ message });
+    switch (f.type) {
+      case "Text":
+      case "Search":
+        fieldSchema = import_zod4.z.string({ message });
+        if (f?.min && f?.min !== "") fieldSchema = fieldSchema.min(f.min);
+        else if (f.isRequired) fieldSchema = fieldSchema.min(1, { message: `${message}. Cannot be empty` });
+        if (f?.max && f?.max !== "") fieldSchema = fieldSchema.max(f.max);
+        if (f?.email) fieldSchema = fieldSchema.email();
+        if (f?.url) fieldSchema = fieldSchema.url();
+        if (f?.regex) fieldSchema = fieldSchema.regex(new RegExp(f.regex));
+        break;
+      case "Email":
+        fieldSchema = import_zod4.z.email({ message });
+        break;
+      case "Password":
+        fieldSchema = import_zod4.z.string({ message }).min(passwordLen, { message: `Password must be at least ${passwordLen} characters long` });
+        break;
+      case "Phone":
+        fieldSchema = import_zod4.z.string().transform((val) => val.replace(/\D/g, "")).transform((val) => val.slice(-10)).refine((val) => {
+          return val.length === 10;
+        }, {
+          message: "Phone number must be 10 digits long"
+        });
+        break;
+      case "DatePicker":
+        fieldSchema = import_zod4.z.iso.date({ message });
+        break;
+      case "FileInput":
+        fieldSchema = import_zod4.z.instanceof(File, { message: "Please select a file" });
+        if (f?.maxSize) {
+          fieldSchema = fieldSchema.refine(
+            (file) => file.size <= f.maxSize,
+            { message: `File size must be less than ${f.maxSize / 1024 / 1024}MB` }
+          );
+        }
+        if (f?.acceptedTypes) {
+          fieldSchema = fieldSchema.refine(
+            (file) => f.acceptedTypes.includes(file.type),
+            { message: `File type must be one of: ${f.acceptedTypes.join(", ")}` }
+          );
+        }
+        break;
+      case "Checkbox":
+        fieldSchema = import_zod4.z.boolean({ message });
+        break;
+      case "Dropdown":
+        fieldSchema = import_zod4.z.string({ message });
+        break;
+      case "NumberInput":
+        fieldSchema = import_zod4.z.number({ message });
+        if (f?.min !== void 0) fieldSchema = fieldSchema.min(f.min);
+        if (f?.max !== void 0) fieldSchema = fieldSchema.max(f.max);
+        break;
+      default:
+        fieldSchema = import_zod4.z.any();
+    }
+    if (!f.isRequired) fieldSchema = fieldSchema.optional();
+    acc[name] = fieldSchema;
+    return acc;
+  }, {});
+  return import_zod4.z.object(fields);
+}
+var FormWrapper = ({
+  validation,
+  defaultValues,
+  children,
+  onSubmit,
+  onReset
+}) => {
+  const schema = (0, import_react17.useMemo)(() => {
+    if (!validation || validation.length === 0) return null;
+    return generateZodSchema2(validation);
+  }, [validation]);
+  const form = (0, import_react_hook_form2.useForm)({
+    resolver: schema ? (0, import_zod3.zodResolver)(schema) : void 0,
+    defaultValues
+  });
+  const formSubmit = (data) => {
+    if (onSubmit) onSubmit(data);
+  };
+  const handleReset = () => {
+    form.reset();
+    if (onReset) onReset();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+    "form",
+    {
+      onSubmit: form.handleSubmit(formSubmit),
+      onReset: handleReset,
+      className: cn(
+        "space-y-4 min-h-[100px] h-auto flex justify-between flex-col"
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "min-h-[50px]", children: typeof children === "function" ? children(form) : children })
+    }
+  );
+};
 var Wrapper_default = FormWrapper;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -3152,6 +3263,7 @@ var Wrapper_default = FormWrapper;
   FileInput,
   FlexLayout,
   Form,
+  FormWrapper,
   GridLayout,
   Image,
   Modal,