@vacano/ui 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,899 @@
+import { ButtonHTMLAttributes } from 'react';
+import { ChangeEventHandler } from 'react';
+import { HTMLAttributes } from 'react';
+import { InputHTMLAttributes } from 'react';
+import { JSX } from '@emotion/react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+import { ReactNode } from 'react';
+import { Ref } from 'react';
+
+export declare const Button: ({ char, children, className, classnames, disabled, fullWidth, icon, loading, onClick, variant, ...rest }: ButtonProps) => JSX.Element;
+
+export declare type ButtonClassnames = {
+    container?: string;
+    content?: string;
+    icon?: string;
+    text?: string;
+    char?: string;
+    loader?: string;
+};
+
+export declare type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> & {
+    char?: string;
+    children?: string;
+    classnames?: ButtonClassnames;
+    'data-test-id'?: string;
+    fullWidth?: boolean;
+    icon?: ReactNode;
+    loading?: boolean;
+    variant?: ButtonVariant;
+};
+
+export declare type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
+
+declare type ButtonVariantTheme = {
+    color: string;
+    backgroundColor: string;
+    borderColor: string;
+    hover: {
+        backgroundColor: string;
+        borderColor: string;
+    };
+    active: {
+        backgroundColor: string;
+        borderColor: string;
+    };
+    focus: {
+        outlineColor: string;
+    };
+    disabled: {
+        color: string;
+        backgroundColor: string;
+        borderColor: string;
+    };
+    char: {
+        color: string;
+        backgroundColor: string;
+    };
+    icon: {
+        color: string;
+    };
+};
+
+export declare const Checkbox: ({ checked, className, classnames, disabled, indeterminate, label, onChange, ref, state, ...rest }: CheckboxProps) => JSX.Element;
+
+export declare const CheckboxCard: ({ checked, className, classnames, description, disabled, fullWidth, label, onChange, ref, state, ...rest }: CheckboxCardProps) => JSX.Element;
+
+export declare type CheckboxCardClassnames = {
+    container?: string;
+    checkbox?: string;
+    content?: string;
+    label?: string;
+    description?: string;
+};
+
+export declare type CheckboxCardProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange'> & {
+    checked: boolean;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    label: string;
+    description?: string;
+    fullWidth?: boolean;
+    state?: CheckboxCardState;
+    className?: string;
+    classnames?: CheckboxCardClassnames;
+    ref?: Ref<HTMLInputElement>;
+    'data-test-id'?: string;
+};
+
+export declare type CheckboxCardState = 'warning' | 'error';
+
+declare type CheckboxCardStateTheme = {
+    container: {
+        borderColor: string;
+        checked: {
+            borderColor: string;
+        };
+    };
+    label: {
+        color: string;
+    };
+    description: {
+        color: string;
+    };
+};
+
+declare type CheckboxCardTheme = {
+    container: {
+        backgroundColor: string;
+        borderColor: string;
+        hover: {
+            borderColor: string;
+        };
+        checked: {
+            backgroundColor: string;
+            borderColor: string;
+        };
+        focus: {
+            outlineColor: string;
+        };
+        disabled: {
+            backgroundColor: string;
+            borderColor: string;
+        };
+    };
+    label: {
+        color: string;
+        disabled: {
+            color: string;
+        };
+    };
+    description: {
+        color: string;
+        disabled: {
+            color: string;
+        };
+    };
+    state: {
+        warning: CheckboxCardStateTheme;
+        error: CheckboxCardStateTheme;
+    };
+};
+
+export declare type CheckboxClassnames = {
+    container?: string;
+    input?: string;
+    box?: string;
+    icon?: string;
+    label?: string;
+};
+
+export declare const CheckboxGroup: ({ className, classnames, disabled, label, onChange, options, value, ...rest }: CheckboxGroupProps) => JSX.Element;
+
+export declare type CheckboxGroupClassnames = {
+    container?: string;
+    label?: string;
+    options?: string;
+    checkbox?: string;
+};
+
+export declare type CheckboxGroupOption = {
+    label: string;
+    value: string;
+};
+
+export declare type CheckboxGroupProps = {
+    options: CheckboxGroupOption[];
+    value: string[];
+    onChange: (values: string[]) => void;
+    label?: string;
+    disabled?: boolean;
+    className?: string;
+    classnames?: CheckboxGroupClassnames;
+    'data-test-id'?: string;
+};
+
+declare type CheckboxGroupTheme = {
+    label: {
+        color: string;
+    };
+};
+
+export declare type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange'> & {
+    checked: boolean;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    'data-test-id'?: string;
+    classnames?: CheckboxClassnames;
+    indeterminate?: boolean;
+    label?: string;
+    ref?: Ref<HTMLInputElement>;
+    state?: CheckboxState;
+};
+
+export declare type CheckboxState = 'warning' | 'error';
+
+declare type CheckboxStateTheme = {
+    box: {
+        borderColor: string;
+        checked: {
+            backgroundColor: string;
+            borderColor: string;
+        };
+        focus: {
+            shadowColor: string;
+        };
+    };
+    label: {
+        color: string;
+    };
+};
+
+declare type CheckboxTheme = {
+    box: {
+        backgroundColor: string;
+        borderColor: string;
+        checked: {
+            backgroundColor: string;
+            borderColor: string;
+        };
+        focus: {
+            shadowColor: string;
+        };
+    };
+    icon: {
+        color: string;
+    };
+    label: {
+        color: string;
+    };
+    state: {
+        warning: CheckboxStateTheme;
+        error: CheckboxStateTheme;
+    };
+};
+
+export declare const Chip: ({ children, className, classnames, fullWidth, status, ...rest }: PropsWithChildren<ChipProps>) => JSX.Element;
+
+export declare type ChipClassnames = {
+    container?: string;
+    text?: string;
+};
+
+export declare type ChipProps = HTMLAttributes<HTMLSpanElement> & {
+    classnames?: ChipClassnames;
+    'data-test-id'?: string;
+    fullWidth?: boolean;
+    status?: ChipStatus;
+};
+
+export declare type ChipStatus = 'neutral' | 'success' | 'warning' | 'error';
+
+export declare const Dropdown: ({ trigger, children, placement, align, offset, open, onOpenChange, portalRenderNode, classnames, className, fullWidth, ...rest }: DropdownProps) => JSX.Element;
+
+export declare type DropdownAlign = 'start' | 'end';
+
+export declare type DropdownClassnames = {
+    container?: string;
+    trigger?: string;
+    content?: string;
+};
+
+export declare type DropdownPlacement = 'top' | 'bottom';
+
+export declare type DropdownProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    trigger: ReactNode;
+    children: ReactNode;
+    placement?: DropdownPlacement;
+    align?: DropdownAlign;
+    offset?: number;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    portalRenderNode?: HTMLElement | null;
+    classnames?: DropdownClassnames;
+    fullWidth?: boolean;
+    'data-test-id'?: string;
+};
+
+declare type DropdownTheme = {
+    content: {
+        backgroundColor: string;
+        borderColor: string;
+        shadow: string;
+    };
+};
+
+export declare const GlobalStyle: () => JSX.Element;
+
+export declare const Input: ({ className, classnames, fullWidth, icon, label, onChange, onBlur, onFocus, ref, state, type, value, ...rest }: InputProps) => JSX.Element;
+
+export declare type InputClassnames = {
+    container?: string;
+    label?: string;
+    wrapper?: string;
+    input?: string;
+    icon?: string;
+    toggle?: string;
+};
+
+export declare type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'onChange'> & {
+    value: string;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    type?: InputType;
+    label?: string;
+    icon?: ReactNode;
+    state?: InputState;
+    fullWidth?: boolean;
+    className?: string;
+    classnames?: InputClassnames;
+    ref?: Ref<HTMLInputElement>;
+    'data-test-id'?: string;
+};
+
+export declare type InputState = 'warning' | 'error';
+
+declare type InputStateTheme = {
+    wrapper: {
+        backgroundColor: string;
+        borderColor: string;
+        focus: {
+            outlineColor: string;
+        };
+    };
+    label: {
+        color: string;
+    };
+    input: {
+        color: string;
+        placeholderColor: string;
+    };
+    icon: {
+        color: string;
+    };
+};
+
+declare type InputTheme = {
+    wrapper: {
+        backgroundColor: string;
+        borderColor: string;
+        focus: {
+            outlineColor: string;
+        };
+        disabled: {
+            backgroundColor: string;
+            borderColor: string;
+        };
+    };
+    label: {
+        color: string;
+    };
+    input: {
+        color: string;
+        placeholderColor: string;
+        disabled: {
+            color: string;
+        };
+    };
+    icon: {
+        color: string;
+        disabled: {
+            color: string;
+        };
+    };
+    toggle: {
+        color: string;
+    };
+    state: {
+        warning: InputStateTheme;
+        error: InputStateTheme;
+    };
+};
+
+export declare type InputType = InputHTMLAttributes<HTMLInputElement>['type'];
+
+export declare const Loader: ({ "aria-label": ariaLabel, className, classnames, size, ...rest }: LoaderProps) => JSX.Element;
+
+export declare type LoaderClassnames = {
+    container?: string;
+};
+
+export declare type LoaderProps = HTMLAttributes<HTMLSpanElement> & {
+    'aria-label'?: string;
+    'data-test-id'?: string;
+    classnames?: LoaderClassnames;
+    size?: number;
+};
+
+export declare const Radio: ({ checked, className, classnames, disabled, label, onChange, ref, state, ...rest }: RadioProps) => JSX.Element;
+
+export declare const RadioCard: ({ checked, className, classnames, description, disabled, fullWidth, label, onChange, ref, state, ...rest }: RadioCardProps) => JSX.Element;
+
+export declare type RadioCardClassnames = {
+    container?: string;
+    radio?: string;
+    content?: string;
+    label?: string;
+    description?: string;
+};
+
+export declare type RadioCardProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange'> & {
+    checked: boolean;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    label: string;
+    description?: string;
+    fullWidth?: boolean;
+    state?: RadioCardState;
+    className?: string;
+    classnames?: RadioCardClassnames;
+    ref?: Ref<HTMLInputElement>;
+    'data-test-id'?: string;
+};
+
+export declare type RadioCardState = 'warning' | 'error';
+
+declare type RadioCardStateTheme = {
+    container: {
+        borderColor: string;
+        checked: {
+            borderColor: string;
+        };
+    };
+    label: {
+        color: string;
+    };
+    description: {
+        color: string;
+    };
+};
+
+declare type RadioCardTheme = {
+    container: {
+        backgroundColor: string;
+        borderColor: string;
+        hover: {
+            borderColor: string;
+        };
+        checked: {
+            backgroundColor: string;
+            borderColor: string;
+        };
+        focus: {
+            outlineColor: string;
+        };
+        disabled: {
+            backgroundColor: string;
+            borderColor: string;
+        };
+    };
+    label: {
+        color: string;
+        disabled: {
+            color: string;
+        };
+    };
+    description: {
+        color: string;
+        disabled: {
+            color: string;
+        };
+    };
+    state: {
+        warning: RadioCardStateTheme;
+        error: RadioCardStateTheme;
+    };
+};
+
+export declare type RadioClassnames = {
+    container?: string;
+    input?: string;
+    circle?: string;
+    dot?: string;
+    label?: string;
+};
+
+export declare const RadioGroup: ({ className, classnames, disabled, label, name, onChange, options, value, ...rest }: RadioGroupProps) => JSX.Element;
+
+export declare type RadioGroupClassnames = {
+    container?: string;
+    label?: string;
+    options?: string;
+    radio?: string;
+};
+
+export declare type RadioGroupOption = {
+    label: string;
+    value: string;
+};
+
+export declare type RadioGroupProps = {
+    value: string;
+    options: RadioGroupOption[];
+    onChange: (value: string) => void;
+    label?: string;
+    name?: string;
+    disabled?: boolean;
+    className?: string;
+    classnames?: RadioGroupClassnames;
+    'data-test-id'?: string;
+};
+
+declare type RadioGroupTheme = {
+    label: {
+        color: string;
+    };
+};
+
+export declare type RadioProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange'> & {
+    checked: boolean;
+    classnames?: RadioClassnames;
+    'data-test-id'?: string;
+    label?: string;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    ref?: Ref<HTMLInputElement>;
+    state?: RadioState;
+};
+
+export declare type RadioState = 'warning' | 'error';
+
+declare type RadioStateTheme = {
+    circle: {
+        borderColor: string;
+        checked: {
+            borderColor: string;
+        };
+        focus: {
+            shadowColor: string;
+        };
+    };
+    dot: {
+        color: string;
+    };
+    label: {
+        color: string;
+    };
+};
+
+declare type RadioTheme = {
+    circle: {
+        borderColor: string;
+        checked: {
+            borderColor: string;
+        };
+        focus: {
+            shadowColor: string;
+        };
+    };
+    dot: {
+        color: string;
+    };
+    label: {
+        color: string;
+    };
+    state: {
+        warning: RadioStateTheme;
+        error: RadioStateTheme;
+    };
+};
+
+export declare const Select: ({ options, value, onChange, placeholder, searchPlaceholder, emptyMessage, label, icon, state, disabled, fullWidth, placement, maxHeight, virtualized, searchable, portalRenderNode, className, classnames, ...rest }: SelectProps) => JSX.Element;
+
+export declare type SelectClassnames = {
+    container?: string;
+    label?: string;
+    trigger?: string;
+    content?: string;
+    search?: string;
+    list?: string;
+    option?: string;
+    empty?: string;
+};
+
+export declare type SelectOption = {
+    label: string;
+    value: string;
+};
+
+export declare type SelectPlacement = 'top' | 'bottom';
+
+export declare type SelectProps = Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> & {
+    options: SelectOption[];
+    value?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyMessage?: string;
+    label?: string;
+    icon?: ReactNode;
+    state?: SelectState;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    placement?: SelectPlacement;
+    maxHeight?: number;
+    virtualized?: boolean;
+    searchable?: boolean;
+    portalRenderNode?: HTMLElement | null;
+    classnames?: SelectClassnames;
+    'data-test-id'?: string;
+};
+
+export declare type SelectState = 'warning' | 'error';
+
+declare type SelectStateTheme = {
+    trigger: {
+        backgroundColor: string;
+        borderColor: string;
+        focus: {
+            outlineColor: string;
+        };
+    };
+    label: {
+        color: string;
+    };
+    value: {
+        color: string;
+        placeholderColor: string;
+    };
+    icon: {
+        color: string;
+    };
+    chevron: {
+        color: string;
+    };
+};
+
+declare type SelectTheme = {
+    trigger: {
+        backgroundColor: string;
+        borderColor: string;
+        focus: {
+            outlineColor: string;
+        };
+        disabled: {
+            backgroundColor: string;
+            borderColor: string;
+        };
+    };
+    label: {
+        color: string;
+    };
+    value: {
+        color: string;
+        placeholderColor: string;
+        disabled: {
+            color: string;
+        };
+    };
+    icon: {
+        color: string;
+        disabled: {
+            color: string;
+        };
+    };
+    chevron: {
+        color: string;
+        disabled: {
+            color: string;
+        };
+    };
+    content: {
+        backgroundColor: string;
+        borderColor: string;
+        shadow: string;
+    };
+    option: {
+        color: string;
+        backgroundColor: string;
+        hover: {
+            backgroundColor: string;
+        };
+        selected: {
+            backgroundColor: string;
+            color: string;
+        };
+    };
+    search: {
+        backgroundColor: string;
+        borderColor: string;
+        color: string;
+        placeholderColor: string;
+    };
+    empty: {
+        color: string;
+    };
+    state: {
+        warning: SelectStateTheme;
+        error: SelectStateTheme;
+    };
+};
+
+export declare const Spinner: ({ "aria-label": ariaLabel, className, classnames, size, ...rest }: SpinnerProps) => JSX.Element;
+
+export declare type SpinnerClassnames = {
+    container?: string;
+};
+
+export declare type SpinnerProps = HTMLAttributes<HTMLSpanElement> & {
+    'aria-label'?: string;
+    classnames?: SpinnerClassnames;
+    'data-test-id'?: string;
+    size?: number;
+};
+
+export declare type StyledButtonCharProps = {
+    $variant: ButtonVariant;
+    $loading?: boolean;
+};
+
+export declare type StyledButtonContainerProps = {
+    $variant: ButtonVariant;
+    $fullWidth?: boolean;
+    $loading?: boolean;
+    $iconOnly?: boolean;
+};
+
+export declare type StyledButtonIconWrapperProps = {
+    $variant: ButtonVariant;
+    $loading?: boolean;
+};
+
+export declare type StyledButtonTextProps = {
+    $loading?: boolean;
+};
+
+export declare type StyledCheckboxCardContainerProps = {
+    $checked?: boolean;
+    $disabled?: boolean;
+    $fullWidth?: boolean;
+    $state?: CheckboxCardState;
+};
+
+export declare type StyledCheckboxCardDescriptionProps = {
+    $state?: CheckboxCardState;
+};
+
+export declare type StyledCheckboxCardLabelProps = {
+    $state?: CheckboxCardState;
+};
+
+export declare type StyledChipContainerProps = {
+    $status?: ChipStatus;
+    $fullWidth?: boolean;
+};
+
+export declare type StyledDropdownContainerProps = {
+    $fullWidth?: boolean;
+};
+
+export declare type StyledDropdownContentProps = {
+    $isOpen: boolean;
+};
+
+export declare type StyledDropdownTriggerProps = {
+    $fullWidth?: boolean;
+};
+
+export declare type StyledInputContainerProps = {
+    $fullWidth?: boolean;
+};
+
+export declare type StyledInputFieldProps = {
+    $state?: InputState;
+};
+
+export declare type StyledInputIconWrapperProps = {
+    $disabled?: boolean;
+    $state?: InputState;
+};
+
+export declare type StyledInputLabelProps = {
+    $state?: InputState;
+};
+
+export declare type StyledInputToggleProps = {
+    $state?: InputState;
+    $disabled?: boolean;
+};
+
+export declare type StyledInputWrapperProps = {
+    $state?: InputState;
+    $disabled?: boolean;
+};
+
+export declare type StyledLoaderContainerProps = {
+    $size: number;
+};
+
+export declare type StyledRadioCardContainerProps = {
+    $checked?: boolean;
+    $disabled?: boolean;
+    $fullWidth?: boolean;
+    $state?: RadioCardState;
+};
+
+export declare type StyledRadioCardDescriptionProps = {
+    $state?: RadioCardState;
+};
+
+export declare type StyledRadioCardLabelProps = {
+    $state?: RadioCardState;
+};
+
+export declare type StyledSelectChevronProps = {
+    $state?: SelectState;
+    $disabled?: boolean;
+    $isOpen?: boolean;
+};
+
+export declare type StyledSelectContainerProps = {
+    $fullWidth?: boolean;
+};
+
+export declare type StyledSelectContentProps = {
+    $isOpen: boolean;
+    $maxHeight: number;
+};
+
+export declare type StyledSelectIconProps = {
+    $state?: SelectState;
+    $disabled?: boolean;
+};
+
+export declare type StyledSelectLabelProps = {
+    $state?: SelectState;
+};
+
+export declare type StyledSelectOptionProps = {
+    $isSelected?: boolean;
+    $isHighlighted?: boolean;
+};
+
+export declare type StyledSelectTriggerProps = {
+    $state?: SelectState;
+    $disabled?: boolean;
+    $isOpen?: boolean;
+};
+
+export declare type StyledSelectValueProps = {
+    $isPlaceholder?: boolean;
+    $state?: SelectState;
+    $disabled?: boolean;
+};
+
+export declare type StyledSpinnerContainerProps = {
+    $size: number;
+};
+
+export declare type Theme = {
+    chip: {
+        color: {
+            default: string;
+            neutral: string;
+            success: string;
+            warning: string;
+            error: string;
+        };
+        backgroundColor: {
+            default: string;
+            neutral: string;
+            success: string;
+            warning: string;
+            error: string;
+        };
+    };
+    button: {
+        primary: ButtonVariantTheme;
+        secondary: ButtonVariantTheme;
+        ghost: ButtonVariantTheme;
+        danger: ButtonVariantTheme;
+    };
+    checkbox: CheckboxTheme;
+    checkboxCard: CheckboxCardTheme;
+    checkboxGroup: CheckboxGroupTheme;
+    input: InputTheme;
+    radio: RadioTheme;
+    radioCard: RadioCardTheme;
+    radioGroup: RadioGroupTheme;
+    dropdown: DropdownTheme;
+    select: SelectTheme;
+};
+
+export declare interface ThemeContextValue {
+    theme: Theme;
+    mode: ThemeMode;
+    setMode: (mode: ThemeMode) => void;
+}
+
+export declare const themeDark: Theme;
+
+export declare const themeLight: Theme;
+
+export declare type ThemeMode = 'light' | 'dark';
+
+export declare function ThemeProvider({ children, defaultMode }: ThemeProviderProps): JSX.Element;
+
+export declare interface ThemeProviderProps {
+    children: ReactNode;
+    defaultMode?: ThemeMode;
+}
+
+export declare const useTheme: () => ThemeContextValue;
+
+export { }