@vacano/ui 1.12.1 → 1.13.0

package/dist/index.d.ts

@@ -1,4 +1,6 @@
+import { AnyObject } from 'yup';
 import { ChangeEventHandler } from 'react';
+import { DateSchema } from 'yup';
 import { HTMLAttributes } from 'react';
 import { InputHTMLAttributes } from 'react';
 import { JSX } from '@emotion/react/jsx-runtime';
@@ -7,11 +9,12 @@ import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { ReactPortal } from 'react';
 import { Ref } from 'react';
+import { StringSchema } from 'yup';
 import { TextareaHTMLAttributes } from 'react';
 
 export declare const alpha: (hexColor: string, percentage: number) => string;
 
-export declare const Autocomplete: ({ className, classnames, disabled, fullWidth, label, ref, size, variant, value, onChange, onSearch, debounceMs, minChars, noResultsMessage, ...rest }: AutocompleteProps) => JSX.Element;
+export declare const Autocomplete: ({ className, classnames, disabled, fullWidth, label, ref, message, size, variant, value, onChange, onSearch, debounceMs, minChars, noResultsMessage, ...rest }: AutocompleteProps) => JSX.Element;
 
 export declare type AutocompleteClassNames = {
     input?: string;
@@ -31,6 +34,7 @@ export declare type AutocompleteProps = VacanoComponentProps<HTMLInputElement, A
     size?: VacanoComponentSize;
     variant?: AutocompleteVariant;
     noResultsMessage?: string;
+    message?: string;
 };
 
 export declare type AutocompleteSuggestion = {
@@ -120,7 +124,7 @@ export declare type CheckboxClassNames = {
     label?: string;
 };
 
-export declare const CheckboxGroup: ({ className, classnames, disabled, label, onChange, options, ref, value, ...rest }: CheckboxGroupProps) => JSX.Element;
+export declare const CheckboxGroup: ({ className, classnames, disabled, label, onChange, options, ref, value, variant, ...rest }: CheckboxGroupProps) => JSX.Element;
 
 export declare type CheckboxGroupClassNames = {
     label?: string;
@@ -139,6 +143,7 @@ export declare type CheckboxGroupProps = VacanoComponentProps<HTMLDivElement, Ch
     onChange: (values: string[]) => void;
     label?: string;
     disabled?: boolean;
+    variant?: CheckboxVariant;
 };
 
 export declare type CheckboxProps = VacanoComponentProps<HTMLInputElement, CheckboxClassNames> & Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange' | 'className'> & {
@@ -203,7 +208,9 @@ export declare const Container: ({ children, className, ref, ...rest }: PropsWit
 
 export declare type ContainerProps = VacanoComponentProps<HTMLDivElement> & Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
 
-export declare const DatePicker: ({ value, onChange, mode, displayFormat, placeholder, locale, weekStartsOn, minDate, maxDate, size, variant, disabled, fullWidth, label, portalRenderNode, open: controlledOpen, onOpen, onClose, className, classnames, ref, ...rest }: DatePickerProps) => JSX.Element;
+declare const creditCard: (message?: string) => StringSchema<string | undefined, AnyObject, undefined, "">;
+
+export declare const DatePicker: ({ value, onChange, mode, displayFormat, placeholder, locale, weekStartsOn, minDate, maxDate, size, variant, disabled, fullWidth, label, message, portalRenderNode, open: controlledOpen, onOpen, onClose, className, classnames, ref, ...rest }: DatePickerProps) => JSX.Element;
 
 export declare type DatePickerClassNames = {
     trigger?: string;
@@ -254,6 +261,8 @@ export declare type DatePickerProps = VacanoComponentProps<HTMLDivElement, DateP
     onOpen?: () => void;
     /** Callback when dropdown closes */
     onClose?: () => void;
+    /** Message text below the picker */
+    message?: string;
 };
 
 export declare type DatePickerVariant = 'normal' | 'error';
@@ -304,19 +313,7 @@ export declare type DropdownProps = VacanoComponentProps<HTMLDivElement, Dropdow
     trigger: ReactElement;
 };
 
-export declare const EditableText: ({ value, onChange, disabled, placeholder, className, classnames, "data-test-id": dataTestId, }: EditableTextProps) => JSX.Element;
-
-export declare type EditableTextClassNames = {
-    text?: string;
-    button?: string;
-};
-
-export declare type EditableTextProps = VacanoComponentProps<HTMLDivElement, EditableTextClassNames> & {
-    value: string;
-    onChange: (value: string) => void;
-    disabled?: boolean;
-    placeholder?: string;
-};
+declare const email: (options?: string) => StringSchema<string | undefined, AnyObject, undefined, "">;
 
 export declare const FieldLabel: ({ children, className, ref, required, variant, ...rest }: FieldLabelProps) => JSX.Element | null;
 
@@ -337,6 +334,12 @@ export declare type FieldMessageProps = VacanoComponentProps<HTMLSpanElement> &
 
 export declare type FieldMessageVariant = 'normal' | 'error' | 'success' | 'warning';
 
+export declare const FieldRow: ({ className, gap, ref, ...rest }: FieldRowProps) => JSX.Element;
+
+export declare type FieldRowProps = VacanoComponentProps<HTMLDivElement> & Omit<HTMLAttributes<HTMLDivElement>, 'className'> & {
+    gap?: number | string;
+};
+
 /**
  * Go-style date formatting
  * Reference time: Mon Jan 2 15:04:05 MST 2006
@@ -371,6 +374,8 @@ export declare const getOperatingSystem: () => OperatingSystem;
 
 export declare const GlobalStyle: () => JSX.Element;
 
+declare const hexColor: (message?: string) => StringSchema<string | undefined, AnyObject, undefined, "">;
+
 export declare const ImageCropper: ({ allowedTypes, applyLabel, buttonLabel, cancelLabel, className, classnames, compression, maxFileSize, onCrop, onError, outputSize, portalSize, previewSize, ref, type, value, ...rest }: ImageCropperProps) => JSX.Element;
 
 export declare type ImageCropperClassNames = {
@@ -405,7 +410,7 @@ export declare type ImageCropperState = {
     sourceHeight: number;
 };
 
-export declare const Input: ({ className, classnames, disabled, fullWidth, label, ref, size, variant, ...rest }: InputProps) => JSX.Element;
+export declare const Input: ({ className, classnames, disabled, fullWidth, label, ref, message, prefix, size, variant, ...rest }: InputProps) => JSX.Element;
 
 export declare type InputClassNames = {
     input?: string;
@@ -417,10 +422,14 @@ export declare type InputProps = VacanoComponentProps<HTMLInputElement, InputCla
     label?: string;
     size?: VacanoComponentSize;
     variant?: InputVariant;
+    message?: string;
+    prefix?: ReactNode;
 };
 
 export declare type InputVariant = 'normal' | 'error';
 
+declare const ipv4: (message?: string) => StringSchema<string | undefined, AnyObject, undefined, "">;
+
 export declare const isValid: (hexColor: string) => boolean;
 
 export declare const KEY_SYMBOLS: Partial<Record<KeyboardEventKey, {
@@ -561,6 +570,8 @@ export declare const mediaDown: (bp: Breakpoint) => string;
 
 export declare const mediaUp: (bp: Breakpoint) => string;
 
+declare const minAge: (years: number, message?: string) => DateSchema<Date | undefined, AnyObject, undefined, "">;
+
 export declare const Modal: ({ animated, children, className, classnames, open, ref, width, ...rest }: ModalProps) => ReactPortal | null;
 
 export declare type ModalClassNames = {
@@ -575,7 +586,7 @@ export declare type ModalProps = VacanoComponentProps<HTMLDivElement, ModalClass
     width?: string;
 };
 
-export declare const MultiSelect: ({ className, classnames, disabled, emptyMessage, label, maxVisible, modalTitle, onChange, options, placeholder, ref, searchPlaceholder, value, variant, ...rest }: MultiSelectProps) => JSX.Element;
+export declare const MultiSelect: ({ className, classnames, disabled, emptyMessage, label, maxVisible, message, modalTitle, onChange, options, placeholder, ref, searchPlaceholder, value, variant, ...rest }: MultiSelectProps) => JSX.Element;
 
 export declare type MultiSelectClassNames = {
     trigger?: string;
@@ -607,12 +618,15 @@ export declare type MultiSelectProps = VacanoComponentProps<HTMLDivElement, Mult
     emptyMessage?: ReactNode;
     searchPlaceholder?: string;
     modalTitle?: string;
+    message?: string;
 };
 
 export declare type MultiSelectVariant = 'normal' | 'error';
 
 export declare const newClassNameGetter: (name: string) => (element: string, ...classNames: Array<string | undefined>) => string;
 
+declare const noSpaces: (message?: string) => StringSchema<string | undefined, AnyObject, undefined, "">;
+
 declare type Notification_2 = {
     id: string;
     message: ReactNode;
@@ -667,7 +681,7 @@ export declare type NotifyConfirmationState = {
 
 export declare type OperatingSystem = 'windows' | 'macos' | 'linux' | 'ios' | 'android' | 'unknown';
 
-export declare const OtpCode: ({ autoFocus, className, classnames, disabled, label, length, onChange, ref, size, value, variant, ...rest }: OtpCodeProps) => JSX.Element;
+export declare const OtpCode: ({ autoFocus, className, classnames, disabled, label, length, message, onChange, ref, size, value, variant, ...rest }: OtpCodeProps) => JSX.Element;
 
 export declare type OtpCodeClassNames = {
     container?: string;
@@ -684,6 +698,7 @@ export declare type OtpCodeProps = VacanoComponentProps<HTMLDivElement, OtpCodeC
     size?: VacanoComponentSize;
     value?: string;
     variant?: OtpCodeVariant;
+    message?: string;
 };
 
 export declare type OtpCodeVariant = 'normal' | 'error';
@@ -705,6 +720,10 @@ export declare type PanelProps = VacanoComponentProps<HTMLDivElement, PanelClass
 
 export declare type PanelVariant = 'light' | 'dark';
 
+declare const password: (message?: string) => StringSchema<string | undefined, AnyObject, undefined, "">;
+
+declare const phone: (message?: string) => StringSchema<string | undefined, AnyObject, undefined, "">;
+
 export declare const Progress: ({ value, size, className, classnames, ref, ...rest }: ProgressProps) => JSX.Element;
 
 export declare type ProgressClassNames = {
@@ -748,7 +767,7 @@ export declare type RadioClassNames = {
     label?: string;
 };
 
-export declare const RadioGroup: <T extends string = string>({ className, classnames, disabled, label, name, onChange, options, ref, value, ...rest }: RadioGroupProps<T>) => JSX.Element;
+export declare const RadioGroup: <T extends string = string>({ className, classnames, disabled, label, name, onChange, options, ref, value, variant, ...rest }: RadioGroupProps<T>) => JSX.Element;
 
 export declare type RadioGroupClassNames = {
     label?: string;
@@ -768,6 +787,7 @@ export declare type RadioGroupProps<T extends string = string> = VacanoComponent
     label?: string;
     name?: string;
     disabled?: boolean;
+    variant?: RadioVariant;
 };
 
 export declare type RadioProps = VacanoComponentProps<HTMLInputElement, RadioClassNames> & Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange' | 'className'> & {
@@ -792,7 +812,7 @@ export declare type SaveProgressProviderProps = {
     defaultMessage?: string;
 };
 
-export declare const Select: ({ className, classnames, disabled, fullWidth, label, onChange, options, placeholder, portalRenderNode, ref, size, value, variant, ...rest }: SelectProps) => JSX.Element;
+export declare const Select: ({ className, classnames, disabled, fullWidth, label, message, onChange, options, placeholder, portalRenderNode, ref, size, value, variant, ...rest }: SelectProps) => JSX.Element;
 
 export declare type SelectClassNames = {
     label?: string;
@@ -817,11 +837,14 @@ export declare type SelectProps = VacanoComponentProps<HTMLDivElement, SelectCla
     size?: VacanoComponentSize;
     disabled?: boolean;
     fullWidth?: boolean;
+    message?: string;
     portalRenderNode?: HTMLElement | null;
 };
 
 export declare type SelectVariant = 'normal' | 'error';
 
+declare const slug: (message?: string) => StringSchema<string | undefined, AnyObject, undefined, "">;
+
 export declare const Spinner: ({ "aria-label": ariaLabel, className, ref, size, ...rest }: SpinnerProps) => JSX.Element;
 
 export declare type SpinnerClassNames = Record<string, never>;
@@ -833,26 +856,6 @@ export declare type SpinnerProps = VacanoComponentProps<HTMLDivElement, SpinnerC
 
 export declare type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg';
 
-export declare const StatusCard: ({ border, className, classnames, icon, label, ref, shadow, trend, trendVariant, value, ...rest }: StatusCardProps) => JSX.Element;
-
-export declare type StatusCardClassNames = {
-    label?: string;
-    value?: string;
-    trend?: string;
-};
-
-export declare type StatusCardProps = VacanoComponentProps<HTMLDivElement, StatusCardClassNames> & Omit<HTMLAttributes<HTMLDivElement>, 'className'> & {
-    border?: boolean;
-    icon?: ReactNode;
-    label: string;
-    shadow?: boolean;
-    trend?: string;
-    trendVariant?: StatusCardTrend;
-    value: string;
-};
-
-export declare type StatusCardTrend = 'positive' | 'negative' | 'neutral';
-
 export declare type StepItem = {
     value: string;
     label: string;
@@ -894,7 +897,7 @@ export declare type TabsProps = VacanoComponentProps<HTMLDivElement, TabsClassNa
     onChange: (value: string) => void;
 };
 
-export declare const Tags: ({ className, classnames, createKey, disabled, emptyMessage, freeSolo, label, onChange, options, placeholder, portalRenderNode, ref, value, variant, ...rest }: TagsProps) => JSX.Element;
+export declare const Tags: ({ className, classnames, createKey, disabled, emptyMessage, freeSolo, label, message, onChange, options, placeholder, portalRenderNode, ref, value, variant, ...rest }: TagsProps) => JSX.Element;
 
 export declare type TagsClassNames = {
     trigger?: string;
@@ -924,11 +927,12 @@ export declare type TagsProps = VacanoComponentProps<HTMLDivElement, TagsClassNa
     createKey?: TagsCreateKey;
     emptyMessage?: ReactNode;
     portalRenderNode?: HTMLElement | null;
+    message?: string;
 };
 
 export declare type TagsVariant = 'normal' | 'error';
 
-export declare const Textarea: ({ className, classnames, disabled, fullWidth, label, ref, variant, rows, ...rest }: TextareaProps) => JSX.Element;
+export declare const Textarea: ({ className, classnames, count, disabled, fullWidth, label, message, ref, value, variant, rows, ...rest }: TextareaProps) => JSX.Element;
 
 export declare type TextareaClassNames = {
     textarea?: string;
@@ -939,6 +943,8 @@ export declare type TextareaProps = VacanoComponentProps<HTMLTextAreaElement, Te
     fullWidth?: boolean;
     label?: string;
     variant?: TextareaVariant;
+    message?: string;
+    count?: number;
 };
 
 export declare type TextareaVariant = 'normal' | 'error';
@@ -985,6 +991,66 @@ export declare type ToastState = {
 
 export declare type ToastVariant = 'default' | 'success' | 'warning' | 'danger';
 
+export declare const Toggle: ({ checked, className, classnames, disabled, label, onChange, ref, variant, ...rest }: ToggleProps) => JSX.Element;
+
+export declare const ToggleCard: ({ checked, className, classnames, description, disabled, fullWidth, label, onChange, ref, variant, ...rest }: ToggleCardProps) => JSX.Element;
+
+export declare type ToggleCardClassNames = {
+    toggle?: string;
+    content?: string;
+    label?: string;
+    description?: string;
+};
+
+export declare type ToggleCardProps = VacanoComponentProps<HTMLInputElement, ToggleCardClassNames> & Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange' | 'className'> & {
+    checked: boolean;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    label: string;
+    description?: string;
+    fullWidth?: boolean;
+    variant?: ToggleCardVariant;
+};
+
+export declare type ToggleCardVariant = 'normal' | 'error';
+
+export declare type ToggleClassNames = {
+    input?: string;
+    track?: string;
+    thumb?: string;
+    label?: string;
+};
+
+export declare const ToggleGroup: ({ className, classnames, disabled, label, onChange, options, ref, value, variant, ...rest }: ToggleGroupProps) => JSX.Element;
+
+export declare type ToggleGroupClassNames = {
+    label?: string;
+    options?: string;
+    toggle?: string;
+};
+
+export declare type ToggleGroupOption = {
+    label: string;
+    value: string;
+};
+
+export declare type ToggleGroupProps = VacanoComponentProps<HTMLDivElement, ToggleGroupClassNames> & {
+    options: ToggleGroupOption[];
+    value: string[];
+    onChange: (values: string[]) => void;
+    label?: string;
+    disabled?: boolean;
+    variant?: ToggleVariant;
+};
+
+export declare type ToggleProps = VacanoComponentProps<HTMLInputElement, ToggleClassNames> & Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange' | 'className'> & {
+    checked: boolean;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    label?: ReactNode;
+    variant?: ToggleVariant;
+};
+
+export declare type ToggleVariant = 'normal' | 'error';
+
 export declare const toHEX: (n: number) => string;
 
 export declare const Tooltip: ({ children, className, classnames, content, delay, placement, portalRenderNode, ref, variant, ...rest }: TooltipProps) => JSX.Element;
@@ -1006,6 +1072,8 @@ export declare type TooltipProps = VacanoComponentProps<HTMLDivElement, TooltipC
 
 export declare type TooltipVariant = 'dark' | 'light' | 'success' | 'warning' | 'danger';
 
+declare const url: (message?: string) => StringSchema<string | undefined, AnyObject, undefined, "">;
+
 export declare const useConfirmation: () => ConfirmationContextValue;
 
 export declare const useImageCropper: (options?: UseImageCropperOptions) => UseImageCropperReturn;
@@ -1061,4 +1129,19 @@ export declare type VacanoValueItem = {
     disabled?: boolean;
 };
 
+export declare namespace validation {
+    export {
+        creditCard,
+        email,
+        hexColor,
+        ipv4,
+        minAge,
+        noSpaces,
+        password,
+        phone,
+        slug,
+        url
+    }
+}
+
 export { }