@dsbtek/component-library 1.0.3 → 1.2.0

package/dist/index.d.mts

@@ -2,8 +2,11 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { DateRange } from 'react-day-picker';
 import { DropzoneOptions } from 'react-dropzone';
 import * as React$1 from 'react';
-import React__default from 'react';
+import React__default, { Dispatch, SetStateAction, Context } from 'react';
 import { CountryCode, E164Number, CountryCallingCode, CarrierCode, NationalNumber, NumberType } from 'libphonenumber-js';
+import * as react_hook_form from 'react-hook-form';
+import { FieldValues, UseFormReturn, SubmitHandler, SubmitErrorHandler } from 'react-hook-form';
+import { ZodSchema } from 'zod';
 
 type DateValue = Date | undefined;
 type RangeValue = {
@@ -866,4 +869,166 @@ interface MultiSelectProps {
 declare const MAX_VISIBLE_TAGS = 2;
 declare function MultiSelect({ options, selected, onChange, placeholder, className, multiple, onLoadMore, hasMore, isDialog, }: MultiSelectProps): react_jsx_runtime.JSX.Element;
 
-export { type AdvancedFilter, AdvancedFilterBuilder, type AdvancedFilterBuilderProps, type AdvancedSort, AdvancedSortBuilder, type AdvancedSortBuilderProps, Breadcrumbs, type BreadcrumbsProps, ColorPicker, type ColorPickerProps, type ColumnDef, type Country, DIRECTIONS, DataTable, DataTableBody, type DataTableBodyProps, type DataTableFeatures, DataTableGridView, type DataTableGridViewProps, DataTableHeader, type DataTableHeaderProps, DataTablePagination, type DataTablePaginationProps, type DataTableProps, DataTableToolbar, type DataTableToolbarProps, type DataTableViewState, DateTimePicker, type DateTimePickerProps, type DateValue, FileInput, type FileInputProps, type FileWithPreview, type HSL, MAX_VISIBLE_TAGS, MultiSelect, type MultiSelectProps, OPERATORS, type OptionType, PasswordInput, type PasswordInputProps, type PhoneData, PhoneInput, type PickerValue, type RGB, type RangeValue, ResizableHeader, type ResizableHeaderProps, ResponsiveAlertDialog, type ResponsiveAlertDialogProps, ResponsiveDialog, type ResponsiveDialogProps, TagInput, type TagInputProps, defaultFeatures, getPhoneData };
+type Form$1<T> = {
+    id: number;
+    label: string;
+    fields: (keyof T)[];
+    form: React__default.FC;
+};
+type UseMultiStepFormTypeOptions$1<T extends FieldValues> = {
+    schema: ZodSchema<T>;
+    currentStep: number;
+    setCurrentStep: Dispatch<SetStateAction<number>>;
+    form?: UseFormReturn<T>;
+    forms: Form$1<T>[];
+    saveFormData: SubmitHandler<T>;
+};
+
+type Form<T> = {
+    id: number;
+    label: string;
+    fields: (keyof T)[];
+    form: React__default.FC;
+};
+type UseMultiStepFormTypeOptions<T extends FieldValues> = {
+    schema: ZodSchema<T>;
+    currentStep: number;
+    setCurrentStep: Dispatch<SetStateAction<number>>;
+    form?: UseFormReturn<T>;
+    forms: Form<T>[];
+    saveFormData: SubmitHandler<T>;
+};
+
+/**
+ * Custom hook for managing a multistep form.
+ *
+ * @template T - The type of the multistep form options.
+ * @param {Context<T>} context - The React context containing the form state and methods.
+ * @returns {Object} An object containing methods and properties for managing the multistep form.
+ * @throws {Error} If the form is not defined in the context.
+ */
+declare function useMultiStepForm<T extends UseMultiStepFormTypeOptions<any>>(context: Context<T>): {
+    form: react_hook_form.UseFormReturn<any>;
+    currentStep: number;
+    steps: number;
+    nextStep: () => void;
+    previousStep: () => void;
+    goToStep: (index: number) => void;
+    isFirstStep: boolean;
+    isLastStep: boolean;
+    labels: string[];
+    currentStepLabel: string;
+    CurrentForm: React__default.FC<{}>;
+    onSubmit: SubmitHandler<any>;
+    onErrors: SubmitErrorHandler<any>;
+};
+
+interface MultiStepNavBarProps<T> extends React__default.HTMLAttributes<HTMLElement> {
+    context: Context<T>;
+}
+declare function MultiStepNavbar<T extends UseMultiStepFormTypeOptions$1<any>>({ className, context, ...props }: MultiStepNavBarProps<T>): react_jsx_runtime.JSX.Element;
+
+interface MultiStepNavButtonsProps<T> {
+    previousLabel: string;
+    nextLabel: string;
+    endStepLabel: string;
+    context: Context<T>;
+    debug?: boolean;
+    isLoading?: boolean;
+}
+declare function MultiStepNavButtons<T extends UseMultiStepFormTypeOptions$1<any>>({ previousLabel, nextLabel, endStepLabel, debug, context, isLoading, }: MultiStepNavButtonsProps<T>): react_jsx_runtime.JSX.Element;
+
+declare const containerCurrentForm: {
+    hidden: {
+        opacity: number;
+        y: number;
+    };
+    visible: {
+        opacity: number;
+        y: number;
+        transition: {
+            delay: number;
+            ease: string;
+            type: string;
+            stiffness: number;
+        };
+    };
+    exit: {
+        opacity: number;
+        y: number;
+        transition: {
+            ease: string;
+        };
+    };
+};
+declare const containerSignUpForm: {
+    hidden: {
+        opacity: number;
+        x: number;
+    };
+    visible: {
+        opacity: number;
+        x: number;
+        transition: {
+            delay: number;
+            ease: string;
+            type: string;
+            stiffness: number;
+        };
+    };
+    exit: {
+        opacity: number;
+        x: number;
+        transition: {
+            ease: string;
+        };
+    };
+};
+declare const containerMultiStepForm: {
+    hidden: {
+        opacity: number;
+        x: number;
+    };
+    visible: {
+        opacity: number;
+        x: number;
+        transition: {
+            delay: number;
+            ease: string;
+            type: string;
+            stiffness: number;
+        };
+    };
+    exit: {
+        opacity: number;
+        x: number;
+        transition: {
+            ease: string;
+        };
+    };
+};
+declare const containerMultiStepNavbar: {
+    hidden: {
+        opacity: number;
+        x: number;
+    };
+    visible: {
+        opacity: number;
+        x: number;
+        transition: {
+            delay: number;
+            ease: string;
+            type: string;
+            stiffness: number;
+        };
+    };
+    exit: {
+        opacity: number;
+        x: number;
+        transition: {
+            ease: string;
+        };
+    };
+};
+
+export { type AdvancedFilter, AdvancedFilterBuilder, type AdvancedFilterBuilderProps, type AdvancedSort, AdvancedSortBuilder, type AdvancedSortBuilderProps, Breadcrumbs, type BreadcrumbsProps, ColorPicker, type ColorPickerProps, type ColumnDef, type Country, DIRECTIONS, DataTable, DataTableBody, type DataTableBodyProps, type DataTableFeatures, DataTableGridView, type DataTableGridViewProps, DataTableHeader, type DataTableHeaderProps, DataTablePagination, type DataTablePaginationProps, type DataTableProps, DataTableToolbar, type DataTableToolbarProps, type DataTableViewState, DateTimePicker, type DateTimePickerProps, type DateValue, FileInput, type FileInputProps, type FileWithPreview, type Form$1 as Form, type HSL, MAX_VISIBLE_TAGS, MultiSelect, type MultiSelectProps, type MultiStepNavBarProps, MultiStepNavButtons, type MultiStepNavButtonsProps, MultiStepNavbar, OPERATORS, type OptionType, PasswordInput, type PasswordInputProps, type PhoneData, PhoneInput, type PickerValue, type RGB, type RangeValue, ResizableHeader, type ResizableHeaderProps, ResponsiveAlertDialog, type ResponsiveAlertDialogProps, ResponsiveDialog, type ResponsiveDialogProps, TagInput, type TagInputProps, type UseMultiStepFormTypeOptions$1 as UseMultiStepFormTypeOptions, containerCurrentForm, containerMultiStepForm, containerMultiStepNavbar, containerSignUpForm, defaultFeatures, getPhoneData, useMultiStepForm };

package/dist/index.d.ts

@@ -2,8 +2,11 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { DateRange } from 'react-day-picker';
 import { DropzoneOptions } from 'react-dropzone';
 import * as React$1 from 'react';
-import React__default from 'react';
+import React__default, { Dispatch, SetStateAction, Context } from 'react';
 import { CountryCode, E164Number, CountryCallingCode, CarrierCode, NationalNumber, NumberType } from 'libphonenumber-js';
+import * as react_hook_form from 'react-hook-form';
+import { FieldValues, UseFormReturn, SubmitHandler, SubmitErrorHandler } from 'react-hook-form';
+import { ZodSchema } from 'zod';
 
 type DateValue = Date | undefined;
 type RangeValue = {
@@ -866,4 +869,166 @@ interface MultiSelectProps {
 declare const MAX_VISIBLE_TAGS = 2;
 declare function MultiSelect({ options, selected, onChange, placeholder, className, multiple, onLoadMore, hasMore, isDialog, }: MultiSelectProps): react_jsx_runtime.JSX.Element;
 
-export { type AdvancedFilter, AdvancedFilterBuilder, type AdvancedFilterBuilderProps, type AdvancedSort, AdvancedSortBuilder, type AdvancedSortBuilderProps, Breadcrumbs, type BreadcrumbsProps, ColorPicker, type ColorPickerProps, type ColumnDef, type Country, DIRECTIONS, DataTable, DataTableBody, type DataTableBodyProps, type DataTableFeatures, DataTableGridView, type DataTableGridViewProps, DataTableHeader, type DataTableHeaderProps, DataTablePagination, type DataTablePaginationProps, type DataTableProps, DataTableToolbar, type DataTableToolbarProps, type DataTableViewState, DateTimePicker, type DateTimePickerProps, type DateValue, FileInput, type FileInputProps, type FileWithPreview, type HSL, MAX_VISIBLE_TAGS, MultiSelect, type MultiSelectProps, OPERATORS, type OptionType, PasswordInput, type PasswordInputProps, type PhoneData, PhoneInput, type PickerValue, type RGB, type RangeValue, ResizableHeader, type ResizableHeaderProps, ResponsiveAlertDialog, type ResponsiveAlertDialogProps, ResponsiveDialog, type ResponsiveDialogProps, TagInput, type TagInputProps, defaultFeatures, getPhoneData };
+type Form$1<T> = {
+    id: number;
+    label: string;
+    fields: (keyof T)[];
+    form: React__default.FC;
+};
+type UseMultiStepFormTypeOptions$1<T extends FieldValues> = {
+    schema: ZodSchema<T>;
+    currentStep: number;
+    setCurrentStep: Dispatch<SetStateAction<number>>;
+    form?: UseFormReturn<T>;
+    forms: Form$1<T>[];
+    saveFormData: SubmitHandler<T>;
+};
+
+type Form<T> = {
+    id: number;
+    label: string;
+    fields: (keyof T)[];
+    form: React__default.FC;
+};
+type UseMultiStepFormTypeOptions<T extends FieldValues> = {
+    schema: ZodSchema<T>;
+    currentStep: number;
+    setCurrentStep: Dispatch<SetStateAction<number>>;
+    form?: UseFormReturn<T>;
+    forms: Form<T>[];
+    saveFormData: SubmitHandler<T>;
+};
+
+/**
+ * Custom hook for managing a multistep form.
+ *
+ * @template T - The type of the multistep form options.
+ * @param {Context<T>} context - The React context containing the form state and methods.
+ * @returns {Object} An object containing methods and properties for managing the multistep form.
+ * @throws {Error} If the form is not defined in the context.
+ */
+declare function useMultiStepForm<T extends UseMultiStepFormTypeOptions<any>>(context: Context<T>): {
+    form: react_hook_form.UseFormReturn<any>;
+    currentStep: number;
+    steps: number;
+    nextStep: () => void;
+    previousStep: () => void;
+    goToStep: (index: number) => void;
+    isFirstStep: boolean;
+    isLastStep: boolean;
+    labels: string[];
+    currentStepLabel: string;
+    CurrentForm: React__default.FC<{}>;
+    onSubmit: SubmitHandler<any>;
+    onErrors: SubmitErrorHandler<any>;
+};
+
+interface MultiStepNavBarProps<T> extends React__default.HTMLAttributes<HTMLElement> {
+    context: Context<T>;
+}
+declare function MultiStepNavbar<T extends UseMultiStepFormTypeOptions$1<any>>({ className, context, ...props }: MultiStepNavBarProps<T>): react_jsx_runtime.JSX.Element;
+
+interface MultiStepNavButtonsProps<T> {
+    previousLabel: string;
+    nextLabel: string;
+    endStepLabel: string;
+    context: Context<T>;
+    debug?: boolean;
+    isLoading?: boolean;
+}
+declare function MultiStepNavButtons<T extends UseMultiStepFormTypeOptions$1<any>>({ previousLabel, nextLabel, endStepLabel, debug, context, isLoading, }: MultiStepNavButtonsProps<T>): react_jsx_runtime.JSX.Element;
+
+declare const containerCurrentForm: {
+    hidden: {
+        opacity: number;
+        y: number;
+    };
+    visible: {
+        opacity: number;
+        y: number;
+        transition: {
+            delay: number;
+            ease: string;
+            type: string;
+            stiffness: number;
+        };
+    };
+    exit: {
+        opacity: number;
+        y: number;
+        transition: {
+            ease: string;
+        };
+    };
+};
+declare const containerSignUpForm: {
+    hidden: {
+        opacity: number;
+        x: number;
+    };
+    visible: {
+        opacity: number;
+        x: number;
+        transition: {
+            delay: number;
+            ease: string;
+            type: string;
+            stiffness: number;
+        };
+    };
+    exit: {
+        opacity: number;
+        x: number;
+        transition: {
+            ease: string;
+        };
+    };
+};
+declare const containerMultiStepForm: {
+    hidden: {
+        opacity: number;
+        x: number;
+    };
+    visible: {
+        opacity: number;
+        x: number;
+        transition: {
+            delay: number;
+            ease: string;
+            type: string;
+            stiffness: number;
+        };
+    };
+    exit: {
+        opacity: number;
+        x: number;
+        transition: {
+            ease: string;
+        };
+    };
+};
+declare const containerMultiStepNavbar: {
+    hidden: {
+        opacity: number;
+        x: number;
+    };
+    visible: {
+        opacity: number;
+        x: number;
+        transition: {
+            delay: number;
+            ease: string;
+            type: string;
+            stiffness: number;
+        };
+    };
+    exit: {
+        opacity: number;
+        x: number;
+        transition: {
+            ease: string;
+        };
+    };
+};
+
+export { type AdvancedFilter, AdvancedFilterBuilder, type AdvancedFilterBuilderProps, type AdvancedSort, AdvancedSortBuilder, type AdvancedSortBuilderProps, Breadcrumbs, type BreadcrumbsProps, ColorPicker, type ColorPickerProps, type ColumnDef, type Country, DIRECTIONS, DataTable, DataTableBody, type DataTableBodyProps, type DataTableFeatures, DataTableGridView, type DataTableGridViewProps, DataTableHeader, type DataTableHeaderProps, DataTablePagination, type DataTablePaginationProps, type DataTableProps, DataTableToolbar, type DataTableToolbarProps, type DataTableViewState, DateTimePicker, type DateTimePickerProps, type DateValue, FileInput, type FileInputProps, type FileWithPreview, type Form$1 as Form, type HSL, MAX_VISIBLE_TAGS, MultiSelect, type MultiSelectProps, type MultiStepNavBarProps, MultiStepNavButtons, type MultiStepNavButtonsProps, MultiStepNavbar, OPERATORS, type OptionType, PasswordInput, type PasswordInputProps, type PhoneData, PhoneInput, type PickerValue, type RGB, type RangeValue, ResizableHeader, type ResizableHeaderProps, ResponsiveAlertDialog, type ResponsiveAlertDialogProps, ResponsiveDialog, type ResponsiveDialogProps, TagInput, type TagInputProps, type UseMultiStepFormTypeOptions$1 as UseMultiStepFormTypeOptions, containerCurrentForm, containerMultiStepForm, containerMultiStepNavbar, containerSignUpForm, defaultFeatures, getPhoneData, useMultiStepForm };