@mateosuarezdev/react-ui 1.0.9 → 1.0.14

package/dist/index.d.ts

@@ -8,10 +8,13 @@ import { FieldValues } from 'react-hook-form';
 import { ForwardRefExoticComponent } from 'react';
 import { InputHTMLAttributes } from 'react';
 import { JSX } from 'react/jsx-runtime';
+import { Locale } from 'date-fns';
+import { MouseEventHandler } from 'react';
+import { ReactNode } from 'react';
 import { ReactPortal } from 'react';
 import { RefAttributes } from 'react';
 import { RefObject } from 'react';
-import { SubmitHandler as RHFSubmitHandler } from 'react-hook-form';
+import { SubmitHandler } from 'react-hook-form';
 import { TextareaHTMLAttributes } from 'react';
 import { UseFormReturn } from 'react-hook-form';
 import { z } from 'zod';
@@ -89,6 +92,37 @@ export declare const calculatePopoverPosition: ({ triggerRect, popoverWidth, pop
     bottom: number | undefined;
 };
 
+export declare const Calendar: default_2.FC<CalendarProps>;
+
+declare interface CalendarProps {
+    selectedDate?: Date | null;
+    onDateSelect?: (date: Date) => void;
+    disabledDates?: string[];
+    disabledDaysOfWeek?: number[];
+    minDate?: Date;
+    maxDate?: Date;
+    locale?: Locale;
+    weekStartsOnMonday?: boolean;
+    className?: string;
+}
+
+declare interface CardContentProps {
+    children: React.ReactNode;
+    className?: string;
+}
+
+declare interface CardFooterProps {
+    children: React.ReactNode;
+    className?: string;
+}
+
+declare interface CardHeaderProps {
+    title: string;
+    subtitle?: string;
+    onClose?: () => void;
+    className?: string;
+}
+
 export declare const Checkbox: default_2.ForwardRefExoticComponent<CheckboxProps & default_2.RefAttributes<HTMLButtonElement>>;
 
 declare interface CheckboxProps {
@@ -127,6 +161,18 @@ declare const colorStyles: {
     disabled: string;
 };
 
+export declare const DatePickerDemo: default_2.FC;
+
+export declare function DatePickerPopover({ customTrigger, scrollerId, }: {
+    customTrigger?: (toggle: VoidFunction, triggerRef: default_2.RefObject<HTMLButtonElement | null>) => ReactNode;
+    /**
+     * To point scroller id for dismiss on scroll
+     */
+    scrollerId?: string;
+}): JSX.Element;
+
+export declare const DateTimePicker: () => JSX.Element;
+
 /**
  * Creates a debounced function that delays invoking func until after delay milliseconds
  * have elapsed since the last time the debounced function was invoked. Each call resets
@@ -213,9 +259,11 @@ export declare const FormTextArea: ({ name, customRead, customSet, ...others }:
     customSet?: (value: string) => string | null | undefined;
 } & TextAreaProps) => JSX.Element;
 
+export declare const FormWorkingHours: () => JSX.Element;
+
 declare type FormWrapperProps<T extends FieldValues> = {
     methods: UseFormReturn<T>;
-    onSubmit: RHFSubmitHandler<T>;
+    onSubmit: SubmitHandler<T>;
     onError?: (errors: FieldErrors<T>) => void;
     children: default_2.ReactNode;
     logErrors?: boolean;
@@ -303,6 +351,40 @@ declare type KeepAliveProps = React.HTMLAttributes<HTMLDivElement> & {
     enabled?: boolean;
 };
 
+declare type KeyMapping = {
+    [key: string]: (event: KeyboardEvent) => void;
+};
+
+export declare const List: ({ lightSolid, className, children, ...others }: {
+    lightSolid?: boolean;
+    className?: string;
+    children: React.ReactNode;
+    others?: any;
+}) => JSX.Element;
+
+export declare const ListItem: ({ onClick, lightSolid, className, children, }: {
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    lightSolid?: boolean;
+    className?: string;
+    children: React.ReactNode;
+}) => JSX.Element;
+
+declare interface ModalsContextType {
+    add: (id: string) => void;
+    remove: (id: string) => void;
+    getPrevId: () => string | undefined;
+    animateParentModal: (el: HTMLElement, mode?: "modal" | "sheet") => void;
+    restoreParentModal: (el: HTMLElement) => void;
+    getModals: () => string[];
+}
+
+export declare const ModalsProvider: React.FC<ModalsProviderProps>;
+
+declare interface ModalsProviderProps {
+    children: ReactNode;
+    debug?: 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> {
@@ -352,6 +434,51 @@ declare type OverflowInfo = {
     scrollTop: number;
 };
 
+export declare const PageTitle: ({ title, description, size, descriptionClassName, className, }: {
+    title: string;
+    description?: string;
+    size?: keyof typeof titleSizes;
+    descriptionClassName?: string;
+    className?: string;
+}) => JSX.Element;
+
+export declare const PopoverCard: React.FC<PopoverCardProps>;
+
+export declare const PopoverCardContent: React.FC<CardContentProps>;
+
+export declare const PopoverCardFooter: React.FC<CardFooterProps>;
+
+export declare const PopoverCardHeader: React.FC<CardHeaderProps>;
+
+export declare interface PopoverCardProps {
+    children: ReactNode | ((close: VoidFunction) => ReactNode);
+    customTrigger?: ({ triggerRef, triggerProps, toggle, open, close, }: {
+        triggerRef: RefObject<HTMLButtonElement | null>;
+        triggerProps: any;
+        toggle: VoidFunction;
+        open: boolean;
+        close: VoidFunction;
+    }) => React.ReactNode;
+    triggerContent?: React.ReactNode;
+    align?: "start" | "center" | "end";
+    side?: "top" | "bottom" | "left" | "right";
+    offset?: number;
+    className?: string;
+    triggerClassName?: string;
+    popoverClassName?: string;
+    closeOnEscape?: boolean;
+    closeOnClickAway?: boolean;
+    /**
+     * To point to scroller for dismiss on scroll
+     */
+    scrollerId?: string;
+    onOpen?: () => void;
+    onClose?: () => void;
+    maxHeight?: string | number;
+    minWidth?: string | number;
+    maxWidth?: string | number;
+}
+
 export declare const Portal: ({ children, node }: PortalProps) => ReactPortal;
 
 declare type PortalProps = {
@@ -372,7 +499,83 @@ declare type PositionOptions_2 = {
 
 export declare function removeWhitespaces(text: string): string;
 
-export { RHFSubmitHandler }
+export declare const SearchInput: ForwardRefExoticComponent<SearchInputProps & RefAttributes<HTMLInputElement>>;
+
+declare interface SearchInputProps {
+    placeholder?: string;
+    value?: string;
+    exposedRef?: (ref: RefObject<HTMLInputElement | null>) => void;
+    autoFocus?: (lg: boolean) => boolean;
+    onClear?: () => void;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    className?: string;
+    onMount?: (ref: RefObject<HTMLInputElement>, lg: boolean) => Promise<void> | void;
+    error?: string | null;
+}
+
+export declare const SeeMoreText: ({ text, length, size, className, buttonClassName, }: {
+    text: string;
+    length?: number;
+    size?: "sm" | "md";
+    className?: string;
+    buttonClassName?: string;
+}) => JSX.Element;
+
+export declare const SegmentedControl: <T>({ options, selected, onChange, keyExtractor, labelExtractor, itemColor, itemClassName, color, unselectedColor, width, border, rounded, trackScroll, className, }: {
+    options: T[];
+    selected: T;
+    onChange: (option: T) => void;
+    keyExtractor: (option: T) => string | number;
+    labelExtractor: (option: T) => string;
+    /**
+     *
+     * @param selected
+     * @description let you override default items colors
+     * using tailwind classnames based on it's selected status
+     * @returns classnames string
+     */
+    itemColor?: (selected: boolean) => string;
+    itemClassName?: string;
+    color?: keyof typeof segmentedControlStyles.colors;
+    unselectedColor?: keyof typeof segmentedControlStyles.unselectedColors;
+    width?: keyof typeof segmentedControlStyles.widths;
+    border?: keyof typeof segmentedControlStyles.border;
+    rounded?: keyof typeof segmentedControlStyles.rounded;
+    trackScroll?: boolean;
+    className?: string;
+}) => JSX.Element;
+
+declare const segmentedControlStyles: {
+    rounded: {
+        3: string;
+        6: string;
+        full: string;
+    };
+    colors: {
+        solid: string;
+        brand: string;
+        contrast: string;
+    };
+    unselectedColors: {
+        none: string;
+        solid: string;
+    };
+    border: {
+        solid: string;
+        subtle: string;
+        brand: string;
+    };
+    widths: {
+        fit: {
+            container: string;
+            item: string;
+        };
+        full: {
+            container: string;
+            item: string;
+        };
+    };
+};
 
 export declare const Separator: ({ className }: {
     className?: string;
@@ -409,7 +612,24 @@ declare type SpinnerProps = {
     spinnerClassName?: string;
 };
 
-export declare type SubmitHandler<T extends FieldValues> = (data: T, form: UseFormReturn<T>) => Promise<void> | void;
+export declare const SuperModal: ({ title, description, showHeader, mode, onReplace, className, contentClassName, children, }: SuperModalProps) => JSX.Element;
+
+declare type SuperModalProps = {
+    title?: string;
+    description?: string;
+    showHeader?: boolean;
+    mode?: "modal" | "sheet";
+    /**
+     * Where to redirect to if the modal
+     * is loaded as the first page
+     * with no previous pathname history
+     * defaults to auto generated prevPath
+     */
+    onReplace?: string;
+    className?: string;
+    contentClassName?: string;
+    children: ReactNode;
+};
 
 export declare function Switch({ checked, onCheckedChange, disabled, name, required, className, }: SwitchProps): JSX.Element;
 
@@ -464,6 +684,15 @@ declare interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaEleme
  */
 export declare function throttle<T extends (...args: any[]) => any>(func: T, limit?: number): (...args: Parameters<T>) => void;
 
+export declare const TimePicker: () => JSX.Element;
+
+declare const titleSizes: {
+    "2": string;
+    "4": string;
+    "5": string;
+    "6": string;
+};
+
 export declare function toTitleCase(str: string): string;
 
 export declare function useClickAway<T extends HTMLElement = HTMLElement>(callback: () => void): RefObject<T | null>;
@@ -480,6 +709,34 @@ declare interface UseClickOutsideOptions {
 
 export declare const useKeepAlive: () => KeepAliveContextType;
 
+/**
+ * Custom hook for handling keyboard events in React
+ *
+ * @param keyMap - Object mapping keys to callback functions
+ * @param options - Additional options for event handling
+ *
+ * @example
+ * useKeyListener({
+ *   'Escape': (e) => {
+ *     e.preventDefault();
+ *     setIsOpen(false);
+ *   },
+ *   'Tab': (e) => {
+ *     if (document.activeElement === inputRef.current) {
+ *       e.preventDefault();
+ *       // Custom tab handling logic
+ *     }
+ *   }
+ * });
+ */
+export declare function useKeyListener(keyMap: KeyMapping, { target, event, enabled }?: UseKeyListenerOptions): void;
+
+declare type UseKeyListenerOptions = {
+    target?: EventTarget | HTMLElement;
+    event?: "keydown" | "keyup" | "keypress";
+    enabled?: boolean;
+};
+
 /**
  * Custom hook that returns whether the current viewport is larger than the 'lg' breakpoint.
  *
@@ -512,6 +769,8 @@ export declare function useMergedRef<T>(...refs: React.Ref<T>[]): React.RefCallb
  */
 export declare function useMethods<TSchema extends ZodTypeAny>(schema: TSchema, defaultValues?: Partial<z.infer<TSchema>>): UseFormReturn<z.infer<TSchema>>;
 
+export declare const useModals: () => ModalsContextType;
+
 export declare const useOverflow: <T extends HTMLElement>({ onOverflow, trackScroll, withObserver, enabled, deps, }?: {
     onOverflow?: (info: OverflowInfo) => void;
     trackScroll?: boolean;