shadcn-zod-formkit 1.0.0

package/dist/index.d.mts

@@ -0,0 +1,377 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { ReactNode, JSX } from 'react';
+import { ZodTypeAny, ZodType, z, ZodObject } from 'zod';
+import * as react_hook_form from 'react-hook-form';
+import { UseFormReturn, FieldValues, FormState, FieldPath, ControllerProps } from 'react-hook-form';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { DayPicker, DayButton } from 'react-day-picker';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { Slot } from '@radix-ui/react-slot';
+import { OTPInput as OTPInput$1 } from 'input-otp';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as ResizablePrimitive from 'react-resizable-panels';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import { ToasterProps } from 'sonner';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+
+interface Props$4 {
+    title: string;
+    description: string | ReactNode;
+    className?: string;
+    variant?: "info" | "warning" | "error" | "success";
+}
+declare const CustomAlert: ({ title, description, className, variant, }: Props$4) => react_jsx_runtime.JSX.Element;
+
+declare const validationMessages: {
+    required: string;
+    email: string;
+    invalidFormat: string;
+    onlyPositive: string;
+    minLength: (length: number) => string;
+    maxLength: (length: number) => string;
+    passwordMismatch: string;
+    invalidPhone: string;
+};
+
+declare enum InputTypes {
+    HIDDEN = "hidden",
+    TEXT = "text",
+    NUMBER = "number",
+    SWITCH = "switch",
+    SELECT = "select",
+    CHECK_LIST = "checklist",
+    GROUPED_SWITCH_LIST = "grouped_switchlist",
+    DATE = "date",
+    TEXTAREA = "textarea",
+    FILE = "file",
+    OTP = "otp",
+    FORM = "form",
+    COLOR = "color"
+}
+declare const inputFieldComp: InputTypes[];
+
+interface CustomFormProps {
+    formTitle: string;
+    inputConfig: FieldProps[];
+    fieldsConfig: Array<FieldProps | FieldProps[]>;
+    defaultValues: Record<string, any>;
+    formSchema: ZodType<any, any, any>;
+    submitBtnLabel?: string;
+    className?: string;
+    isFormChild?: boolean;
+    columns?: number;
+    gap?: number;
+    onSubmit: (values: Record<string, any>) => void;
+}
+interface FieldProps {
+    name: string;
+    label: string;
+    placeHolder?: string;
+    description?: string;
+    className?: string;
+    inputType?: InputTypes;
+    keyboardType?: TextInputType;
+    disabled?: boolean;
+    required?: boolean;
+    value?: any;
+    min?: number;
+    max?: number;
+    zodTypeAny?: ZodTypeAny;
+    list?: any[];
+    dependsOn?: string;
+    loadOptions?: (dependencyValue: any) => Promise<any[]>;
+    optionLabel?: string;
+    optionValue?: string;
+    optionDescription?: string;
+    hidden?: boolean;
+    onListOptionChange?: (item: any) => void;
+    listConfig?: ListConfig;
+    fileConfig?: {
+        previewSize?: number;
+        showPreview?: boolean;
+        accept: string;
+        multiple: boolean;
+        maxSize: number;
+    };
+}
+interface ListConfig {
+    list: InputOption[] | GroupedOption[];
+    optionLabel?: string;
+    optionValue?: InputOption | string | number | object;
+    onOptionChange: (item?: InputOption | InputOption[] | GroupedOption) => void;
+    optionDescription?: string;
+    selectedList?: InputOption[];
+}
+interface InputOption {
+    id: number | string;
+    name: string;
+    label?: string;
+    description?: string;
+    disabled?: boolean;
+    checked?: boolean;
+    groupedLabel?: string;
+    value?: any;
+}
+interface GroupedOption {
+    id?: number;
+    label: string;
+    options: InputOption[];
+    totalSelected?: number;
+    disabled?: boolean;
+    value?: any;
+}
+interface InputSetup {
+    required: boolean;
+    disabled: boolean;
+    minLegth?: number;
+    maxLength?: number;
+    pattern?: RegExp;
+    min?: number;
+    max?: number;
+    isObscure?: boolean;
+    isEmail?: boolean;
+    isUrl?: boolean;
+    zopType?: z.ZodType;
+}
+declare enum TextInputType {
+    DEFAULT = "default",
+    NUMBER = "number",
+    EMAIL = "email",
+    PHONE = "phone",
+    PASSWORD = "password"
+}
+
+declare abstract class BaseInput {
+    protected readonly input: FieldProps;
+    protected readonly form: UseFormReturn;
+    constructor(input: FieldProps, form: UseFormReturn);
+    abstract render(): JSX.Element;
+}
+
+interface Props$3 {
+    fields: Array<FieldProps | FieldProps[]>;
+    record?: Record<string, any>;
+    onSubmit?: (data: any) => void;
+}
+declare const DynamicForm: ({ fields, record, onSubmit }: Props$3) => react_jsx_runtime.JSX.Element;
+
+declare const DynamicFormExample: () => react_jsx_runtime.JSX.Element;
+declare const mockFields: Array<FieldProps | FieldProps[]>;
+
+interface Props$2<T extends FieldValues> {
+    formState: FormState<T>;
+    fields: Array<FieldProps | FieldProps[]>;
+}
+declare const FormErrors: <T extends FieldValues>({ formState, fields }: Props$2<T>) => react_jsx_runtime.JSX.Element;
+
+declare class InputFactory {
+    static create(input: FieldProps, form: UseFormReturn): JSX.Element;
+}
+declare function getDefaultValues<T extends Record<string, any>>(entity: T): Record<string, any>;
+declare const getDynamicSchema: (fields: Array<FieldProps | FieldProps[]>) => ZodObject<any>;
+
+declare class CheckListInput extends BaseInput {
+    render(): JSX.Element;
+}
+
+declare class ColorInput extends BaseInput {
+    render(): JSX.Element;
+}
+interface ColorCompProps {
+    value?: string;
+    onChange?: (color: string) => void;
+    onBlur?: () => void;
+    disabled?: boolean;
+    className?: string;
+    placeholder?: string;
+}
+
+declare class DateInput extends BaseInput {
+    render(): JSX.Element;
+}
+
+declare class FileInput extends BaseInput {
+    render(): JSX.Element;
+}
+
+declare class GroupedSwitchInput extends BaseInput {
+    render(): JSX.Element;
+}
+
+declare class NumberInput extends BaseInput {
+    render(): JSX.Element;
+}
+
+declare class OTPInput extends BaseInput {
+    render(): JSX.Element;
+}
+
+declare class SelectInput extends BaseInput {
+    render(): react_jsx_runtime.JSX.Element;
+}
+
+declare class SwitchInput extends BaseInput {
+    render(): JSX.Element;
+}
+
+declare class TextAreaInput extends BaseInput {
+    render(): JSX.Element;
+}
+
+declare class TextInput extends BaseInput {
+    render(): JSX.Element;
+}
+
+interface Props$1 {
+    handleAddInput: (type: InputTypes, config?: InputSetup) => void;
+    inputsTypes: InputTypes[];
+}
+declare const InputList: ({ handleAddInput, inputsTypes, }: Props$1) => react_jsx_runtime.JSX.Element;
+
+declare function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>): react_jsx_runtime.JSX.Element;
+declare function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
+declare function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>): react_jsx_runtime.JSX.Element;
+
+declare const alertVariants: (props?: ({
+    variant?: "default" | "destructive" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>): react_jsx_runtime.JSX.Element;
+declare function AlertTitle({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function AlertDescription({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "destructive" | "secondary" | "outline" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
+    asChild?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "destructive" | "link" | "secondary" | "outline" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
+    buttonVariant?: React.ComponentProps<typeof Button>["variant"];
+}): react_jsx_runtime.JSX.Element;
+declare function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps<typeof DayButton>): react_jsx_runtime.JSX.Element;
+
+declare function Card({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function CardTitle({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function CardDescription({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function CardAction({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function CardContent({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+
+declare function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>): react_jsx_runtime.JSX.Element;
+
+interface Props {
+    value?: string;
+    onChange?: (color: string) => void;
+    onBlur?: () => void;
+    disabled?: boolean;
+    className?: string;
+    placeholder?: string;
+}
+declare const ColorCnInput: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement>>;
+
+declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
+declare function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): react_jsx_runtime.JSX.Element;
+declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): react_jsx_runtime.JSX.Element;
+declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): react_jsx_runtime.JSX.Element;
+declare function DialogContent({ className, children, showCloseButton, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
+    showCloseButton?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function DialogFooter({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): react_jsx_runtime.JSX.Element;
+declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): react_jsx_runtime.JSX.Element;
+
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: react_hook_form.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
+declare const useFormField: () => {
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+    isValidating: boolean;
+    error?: react_hook_form.FieldError;
+    id: string;
+    name: string;
+    formItemId: string;
+    formDescriptionId: string;
+    formMessageId: string;
+};
+declare function FormItem({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function FormLabel({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function FormControl({ ...props }: React.ComponentProps<typeof Slot>): react_jsx_runtime.JSX.Element;
+declare function FormDescription({ className, ...props }: React.ComponentProps<"p">): react_jsx_runtime.JSX.Element;
+declare function FormMessage({ className, ...props }: React.ComponentProps<"p">): react_jsx_runtime.JSX.Element | null;
+
+declare function InputOTP({ className, containerClassName, ...props }: React.ComponentProps<typeof OTPInput$1> & {
+    containerClassName?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function InputOTPSlot({ index, className, ...props }: React.ComponentProps<"div"> & {
+    index: number;
+}): react_jsx_runtime.JSX.Element;
+declare function InputOTPSeparator({ ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+
+declare function Input({ className, type, ...props }: React.ComponentProps<"input">): react_jsx_runtime.JSX.Element;
+
+declare function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>): react_jsx_runtime.JSX.Element;
+
+declare function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
+declare function PopoverContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): react_jsx_runtime.JSX.Element;
+declare function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>): react_jsx_runtime.JSX.Element;
+
+declare function ResizablePanelGroup({ className, ...props }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>): react_jsx_runtime.JSX.Element;
+declare function ResizablePanel({ ...props }: React.ComponentProps<typeof ResizablePrimitive.Panel>): react_jsx_runtime.JSX.Element;
+declare function ResizableHandle({ withHandle, className, ...props }: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+    withHandle?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+declare function ScrollArea({ className, children, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function ScrollBar({ className, orientation, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>): react_jsx_runtime.JSX.Element;
+
+declare function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>): react_jsx_runtime.JSX.Element;
+declare function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>): react_jsx_runtime.JSX.Element;
+declare function SelectTrigger({ className, size, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+    size?: "sm" | "default";
+}): react_jsx_runtime.JSX.Element;
+declare function SelectContent({ className, children, position, ...props }: React.ComponentProps<typeof SelectPrimitive.Content>): react_jsx_runtime.JSX.Element;
+declare function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>): react_jsx_runtime.JSX.Element;
+declare function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>): react_jsx_runtime.JSX.Element;
+declare function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>): react_jsx_runtime.JSX.Element;
+declare function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>): react_jsx_runtime.JSX.Element;
+declare function SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>): react_jsx_runtime.JSX.Element;
+
+declare function Separator({ className, orientation, decorative, ...props }: React.ComponentProps<typeof SeparatorPrimitive.Root>): react_jsx_runtime.JSX.Element;
+
+declare const Toaster: ({ ...props }: ToasterProps) => react_jsx_runtime.JSX.Element;
+
+declare function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>): react_jsx_runtime.JSX.Element;
+
+declare function Textarea({ className, ...props }: React.ComponentProps<"textarea">): react_jsx_runtime.JSX.Element;
+
+declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>): react_jsx_runtime.JSX.Element;
+declare function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
+declare function TooltipContent({ className, sideOffset, children, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content>): react_jsx_runtime.JSX.Element;
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Badge, BaseInput, Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckListInput, Checkbox, ColorCnInput, type ColorCompProps, ColorInput, CustomAlert, type CustomFormProps, DateInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DynamicForm, DynamicFormExample, type FieldProps, FileInput, Form, FormControl, FormDescription, FormErrors, FormField, FormItem, FormLabel, FormMessage, type GroupedOption, GroupedSwitchInput, Input, InputFactory, InputList, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputOption, type InputSetup, InputTypes, Label, NumberInput, OTPInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type Props, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Switch, SwitchInput, TextAreaInput, TextInput, TextInputType, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, getDefaultValues, getDynamicSchema, inputFieldComp, mockFields, useFormField, validationMessages };