@mateosuarezdev/react-ui 1.0.5 → 1.0.6

package/dist/index.d.ts

@@ -2,10 +2,20 @@ import { ButtonHTMLAttributes } from 'react';
 import { ClassValue } from 'clsx';
 import { ComponentPropsWithoutRef } from 'react';
 import { CSSProperties } from 'react';
+import { default as default_2 } from 'react';
+import { FieldErrors } from 'react-hook-form';
+import { FieldValues } from 'react-hook-form';
 import { ForwardRefExoticComponent } from 'react';
+import { InputHTMLAttributes } from 'react';
 import { JSX } from 'react/jsx-runtime';
+import { ReactPortal } from 'react';
 import { RefAttributes } from 'react';
 import { RefObject } from 'react';
+import { SubmitHandler as RHFSubmitHandler } from 'react-hook-form';
+import { TextareaHTMLAttributes } from 'react';
+import { UseFormReturn } from 'react-hook-form';
+import { z } from 'zod';
+import { ZodTypeAny } from 'zod';
 
 export declare const AliveScope: React.FC<AliveScopeProps>;
 
@@ -73,6 +83,28 @@ export declare type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>
     children?: React.ReactNode;
 };
 
+export declare const calculatePopoverPosition: ({ triggerRect, popoverWidth, popoverHeight, align, side, offset, collisionPadding, avoidCollisions, }: PositionOptions_2) => {
+    x: number;
+    top: number | undefined;
+    bottom: number | undefined;
+};
+
+export declare const Checkbox: default_2.ForwardRefExoticComponent<CheckboxProps & default_2.RefAttributes<HTMLButtonElement>>;
+
+declare interface CheckboxProps {
+    checked?: boolean | "indeterminate";
+    onCheckedChange?: (checked: boolean | "indeterminate") => void;
+    disabled?: boolean;
+    required?: boolean;
+    name?: string;
+    value?: string;
+    id?: string;
+    className?: string | ((checked: boolean | "indeterminate") => string);
+    size?: "xs" | "sm" | "md" | "lg";
+}
+
+export declare const checkOverflow: (element: HTMLElement) => OverflowInfo;
+
 export { ClassValue }
 
 /**Tailwind Merge + Clsx */
@@ -113,6 +145,26 @@ declare const colorStyles: {
  */
 export declare function debounce<T extends (...args: any[]) => any>(func: T, delay?: number): (...args: Parameters<T>) => void;
 
+/**
+ * Extracts only the dirty fields from form data
+ * @param data The complete form data
+ * @param dirtyFields The dirtyFields object from form.formState
+ * @param staticFields An object containing fields to always include (like ID)
+ * @returns A new object containing only dirty fields and the static fields
+ */
+export declare function extractDirtyData<T extends Record<string, any>>(data: T, dirtyFields: any, staticFields?: Partial<T>): Partial<T>;
+
+export declare class FocusTrap {
+    private container;
+    private previouslyFocusedElement;
+    constructor();
+    enable(): void;
+    disable(): void;
+    setContainer(container: HTMLElement): void;
+    private trapFocus;
+    private handleClickOutside;
+}
+
 declare const fontWeightStyles: {
     light: string;
     normal: string;
@@ -121,6 +173,55 @@ declare const fontWeightStyles: {
     bold: string;
 };
 
+export declare function Form<T extends FieldValues>({ methods, onSubmit, onError, children, logErrors, className, }: FormWrapperProps<T>): JSX.Element;
+
+export declare const FormInput: ({ name, customRead, customSet, withNullSet, ...others }: {
+    name: string;
+    customRead?: (value: string | null) => string;
+    customSet?: (value: string) => string | number | null | undefined;
+    withNullSet?: boolean;
+} & InputProps) => JSX.Element;
+
+export declare const FormMultiSelect: <T>({ name, ...others }: FormMultiSelectProps<T>) => JSX.Element;
+
+declare type FormMultiSelectProps<T> = Omit<MultiSelectProps<T>, "selectedValues" | "onChange"> & {
+    name: string;
+};
+
+export declare const FormSubmit: ({ isEditable, isDeletable, createUpdateLoading, deleteLoading, onDelete, onDeleteConfirm, addText, updateText, deleteText, className, }: {
+    isEditable?: boolean;
+    isDeletable?: boolean;
+    createUpdateLoading: boolean;
+    deleteLoading?: boolean;
+    onDelete?: () => void;
+    onDeleteConfirm?: boolean;
+    addText?: string;
+    updateText?: string;
+    deleteText?: string;
+    className?: string;
+}) => JSX.Element;
+
+export declare const FormTags: ({ name, ...others }: FormTagsProps) => JSX.Element;
+
+declare type FormTagsProps = Omit<TagsProps, "tags" | "onChange"> & {
+    name: string;
+};
+
+export declare const FormTextArea: ({ name, customRead, customSet, ...others }: {
+    name: string;
+    customRead?: (value: string | null) => string;
+    customSet?: (value: string) => string | null | undefined;
+} & TextAreaProps) => JSX.Element;
+
+declare type FormWrapperProps<T extends FieldValues> = {
+    methods: UseFormReturn<T>;
+    onSubmit: RHFSubmitHandler<T>;
+    onError?: (errors: FieldErrors<T>) => void;
+    children: default_2.ReactNode;
+    logErrors?: boolean;
+    className?: string;
+};
+
 export declare function generateInitials(name: string): string;
 
 /**
@@ -169,6 +270,23 @@ declare interface IconProps extends React.SVGProps<SVGSVGElement> {
 
 export declare type IndividualIconProps = Omit<IconProps, "children">;
 
+export declare const Input: ForwardRefExoticComponent<InputProps & RefAttributes<HTMLInputElement>>;
+
+export declare interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    description?: string;
+    labelPosition?: "default" | "floating";
+    color?: "solid" | "outline";
+    focusColor?: "solid" | "brand";
+    valid?: boolean;
+    error?: boolean;
+    errorMessage?: string;
+    isPrice?: boolean;
+    prefix?: string;
+    wrapperClassName?: string;
+    containerClassName?: string;
+}
+
 export declare const KeepAlive: React.FC<KeepAliveProps>;
 
 declare type KeepAliveContextType = {
@@ -185,10 +303,83 @@ declare type KeepAliveProps = React.HTMLAttributes<HTMLDivElement> & {
     enabled?: boolean;
 };
 
+export declare const MultiSelect: <T>({ label, labelPosition, options, selectedValues, onChange, idExtractor, labelExtractor, customSetter, valid, error, placeholder, maxSelections, searchable, disabled, className, }: MultiSelectProps<T>) => JSX.Element;
+
+declare interface MultiSelectProps<T> {
+    label: string;
+    labelPosition?: "default" | "floating";
+    options: T[];
+    selectedValues: T[];
+    onChange: (values: T[]) => void;
+    idExtractor: (item: T) => string | number;
+    labelExtractor: (item: T) => string;
+    customSetter?: (item: T) => any;
+    valid?: boolean;
+    error?: string;
+    placeholder?: string;
+    maxSelections?: number;
+    searchable?: boolean;
+    disabled?: boolean;
+    className?: string;
+}
+
+/**
+ * helper to set an input to empty string
+ * if the value is null
+ */
+export declare function nullRead(e: string | null): string;
+
+/**
+ * helper to set an input
+ * back to null if the value is empty
+ */
+export declare function nullSet(e: string): string | null;
+
+declare type OverflowInfo = {
+    horizontal: boolean;
+    vertical: boolean;
+    scrollWidth: number;
+    clientWidth: number;
+    scrollHeight: number;
+    clientHeight: number;
+    canScrollLeft: boolean;
+    canScrollRight: boolean;
+    canScrollUp: boolean;
+    canScrollDown: boolean;
+    scrollPercentageX: number;
+    scrollPercentageY: number;
+    scrollLeft: number;
+    scrollTop: number;
+};
+
+export declare const Portal: ({ children, node }: PortalProps) => ReactPortal;
+
+declare type PortalProps = {
+    children: React.ReactNode;
+    node?: HTMLElement | null;
+};
+
+declare type PositionOptions_2 = {
+    triggerRect: DOMRect;
+    popoverWidth: number;
+    popoverHeight: number;
+    align?: "start" | "center" | "end";
+    side?: "top" | "bottom" | "left" | "right";
+    offset?: number;
+    collisionPadding?: number;
+    avoidCollisions?: boolean;
+};
+
+export declare function removeWhitespaces(text: string): string;
+
+export { RHFSubmitHandler }
+
 export declare const Separator: ({ className }: {
     className?: string;
 }) => JSX.Element;
 
+export declare function setFocusEnd(element: HTMLInputElement): void;
+
 declare const sizes: {
     xs: string;
     sm: string;
@@ -210,6 +401,51 @@ declare const sizeStyles: {
     iconLg: string;
 };
 
+export declare const Spinner: React.FC<SpinnerProps>;
+
+declare type SpinnerProps = {
+    loading?: boolean;
+    wrapperClassName?: string;
+    spinnerClassName?: string;
+};
+
+export declare type SubmitHandler<T extends FieldValues> = (data: T, form: UseFormReturn<T>) => Promise<void> | void;
+
+export declare function Switch({ checked, onCheckedChange, disabled, name, required, className, }: SwitchProps): JSX.Element;
+
+declare interface SwitchProps {
+    checked: boolean;
+    onCheckedChange: (checked: boolean) => void;
+    disabled?: boolean;
+    name?: string;
+    required?: boolean;
+    className?: string;
+}
+
+export declare const Tags: ({ label, variant, color, tags, onChange, valid, error, placeholder, maxTags, validateTag, }: TagsProps) => JSX.Element;
+
+declare interface TagsProps {
+    label: string;
+    variant?: "default" | "floating";
+    color?: "solid" | "translucent" | "outline";
+    tags: string[];
+    onChange: (tags: string[]) => void;
+    valid?: boolean;
+    error?: string;
+    placeholder?: string;
+    maxTags?: number;
+    validateTag?: (tag: string) => boolean | string;
+}
+
+export declare const TextArea: ForwardRefExoticComponent<TextAreaProps & RefAttributes<HTMLTextAreaElement>>;
+
+declare interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    label: string;
+    labelPosition?: "default" | "floating";
+    error?: boolean;
+    focusColor?: "solid" | "brand";
+}
+
 /**
  * Creates a throttled function that only invokes func at most once per every limit milliseconds.
  * The first call executes immediately, subsequent calls are rate-limited, and the last call
@@ -228,6 +464,20 @@ declare const sizeStyles: {
  */
 export declare function throttle<T extends (...args: any[]) => any>(func: T, limit?: number): (...args: Parameters<T>) => void;
 
+export declare function toTitleCase(str: string): string;
+
+export declare function useClickAway<T extends HTMLElement = HTMLElement>(callback: () => void): RefObject<T | null>;
+
+export declare function useClickAwayAdvanced<T extends HTMLElement = HTMLElement>(callback: () => void, options?: UseClickOutsideOptions): RefObject<T | null>;
+
+export declare function useClickAwayWithRef<T extends HTMLElement | null = HTMLElement>(ref: React.RefObject<T>, callback: (event: MouseEvent) => void, enabled?: boolean): void;
+
+declare interface UseClickOutsideOptions {
+    enabled?: boolean;
+    events?: string[];
+    excludeRefs?: React.RefObject<HTMLElement>[];
+}
+
 export declare const useKeepAlive: () => KeepAliveContextType;
 
 /**
@@ -253,6 +503,71 @@ export declare const useLargeScreen: () => boolean;
 
 export declare function useMergedRef<T>(...refs: React.Ref<T>[]): React.RefCallback<T>;
 
+/**
+ * Hook to create react-hook-form methods based on a zod schema and default values.
+ *
+ * @param schema Zod schema to validate form data
+ * @param defaultValues Optional default form values (partial)
+ * @returns UseFormReturn with typed form methods
+ */
+export declare function useMethods<TSchema extends ZodTypeAny>(schema: TSchema, defaultValues?: Partial<z.infer<TSchema>>): UseFormReturn<z.infer<TSchema>>;
+
+export declare const useOverflow: <T extends HTMLElement>({ onOverflow, trackScroll, withObserver, enabled, deps, }?: {
+    onOverflow?: (info: OverflowInfo) => void;
+    trackScroll?: boolean;
+    withObserver?: boolean;
+    enabled?: boolean;
+    deps?: any[];
+}) => {
+    ref: RefObject<T | null>;
+};
+
+export declare const useOverflowState: <T extends HTMLElement>({ trackScroll, withObserver, enabled, deps, }?: {
+    trackScroll?: boolean;
+    withObserver?: boolean;
+    enabled?: boolean;
+    deps?: any[];
+}) => {
+    ref: RefObject<T | null>;
+    overflowInfo: OverflowInfo | null;
+};
+
+export declare const usePopover: <T extends HTMLElement, P extends HTMLElement>({ scrollerId, align, side, offset, collisionPadding, avoidCollisions, closeOnScroll, onOpen, onClose, }?: UsePopoverProps) => {
+    triggerRef: RefObject<T | null>;
+    triggerProps: {
+        id: string;
+        "aria-expanded": boolean;
+        "aria-haspopup": boolean;
+    };
+    popoverRef: RefObject<P | null>;
+    /**
+     * Call this sync before rendering the popover
+     */
+    getPopoverPosition: (customRect?: DOMRect) => {
+        x: number;
+        top: number | undefined;
+        bottom: number | undefined;
+    };
+    open: boolean;
+    toggle: () => void;
+    close: () => void;
+};
+
+declare type UsePopoverProps = {
+    scrollerId?: string;
+    /**
+     * To point scroller id to route id-content instead of id
+     */
+    align?: "start" | "center" | "end";
+    side?: "top" | "bottom" | "left" | "right";
+    offset?: number;
+    collisionPadding?: number;
+    avoidCollisions?: boolean;
+    closeOnScroll?: boolean;
+    onOpen?: VoidFunction;
+    onClose?: VoidFunction;
+};
+
 export declare const useRipple: <T extends HTMLElement>(enabled?: boolean, contrastRipple?: boolean) => {
     ref: RefObject<T | null>;
     ripple: (event: React.MouseEvent<T>) => void;