@vacano/ui 0.0.1 → 1.0.0

package/dist/index.d.ts

@@ -7,6 +7,14 @@ import { PropsWithChildren } from 'react';
 import { ReactNode } from 'react';
 import { Ref } from 'react';
 
+export declare const breakpoints: {
+    readonly sm: 640;
+    readonly md: 768;
+    readonly lg: 1024;
+    readonly xl: 1280;
+    readonly xl2: 1536;
+};
+
 export declare const Button: ({ char, children, className, classnames, disabled, fullWidth, icon, loading, onClick, variant, ...rest }: ButtonProps) => JSX.Element;
 
 export declare type ButtonClassnames = {
@@ -247,6 +255,48 @@ export declare type ChipProps = HTMLAttributes<HTMLSpanElement> & {
 
 export declare type ChipStatus = 'neutral' | 'success' | 'warning' | 'error';
 
+export declare const colors: {
+    readonly black: "#000000";
+    readonly white: "#ffffff";
+    readonly onyx: "#111111";
+    readonly carbonBlack: "#232323";
+    readonly graphite: "#343434";
+    readonly slate: "#484848";
+    readonly ash: "#6b6b6b";
+    readonly silver: "#8c8c8c";
+    readonly mist: "#b0b0b0";
+    readonly cloud: "#d4d4d4";
+    readonly snow: "#ebebeb";
+    readonly icyBlue: "#bde0fe";
+    readonly blue: "#0050c8";
+    readonly green: "#009650";
+    readonly amber: "#b48200";
+    readonly red: "#c83232";
+    readonly grey: "#646464";
+    readonly blueBg: "#0064ff1a";
+    readonly greenBg: "#00c8641a";
+    readonly amberBg: "#ffb4001a";
+    readonly redBg: "#ff50501a";
+    readonly greyBg: "#0000000d";
+    readonly hoverLight: "#00000008";
+    readonly activeLight: "#00000012";
+    readonly hoverDark: "#ffffff12";
+    readonly activeDark: "#ffffff20";
+    readonly redLight: "#c8323214";
+    readonly redMedium: "#c8323228";
+    readonly focusRingDark: "#00000080";
+    readonly focusRingDarkSubtle: "#00000040";
+    readonly focusRingLight: "#ffffff80";
+    readonly focusRingLightSubtle: "#ffffff40";
+    readonly focusRingDanger: "#c8323280";
+    readonly focusRingWarning: "#b4820040";
+    readonly focusRingError: "#c8323240";
+    readonly inputBgLight: "#00000008";
+    readonly inputBgDark: "#ffffff0d";
+    readonly inputBgWarning: "#ffb4001a";
+    readonly inputBgError: "#ff50501a";
+};
+
 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';
@@ -382,6 +432,170 @@ export declare type LoaderProps = HTMLAttributes<HTMLSpanElement> & {
     size?: number;
 };
 
+export declare const media: {
+    readonly sm: "@media (min-width: 640px)";
+    readonly md: "@media (min-width: 768px)";
+    readonly lg: "@media (min-width: 1024px)";
+    readonly xl: "@media (min-width: 1280px)";
+    readonly xl2: "@media (min-width: 1536px)";
+};
+
+export declare const MultiSelect: ({ options, value, onChange, placeholder, searchPlaceholder, emptyMessage, label, icon, state, disabled, fullWidth, placement, maxHeight, virtualized, searchable, portalRenderNode, className, classnames, ...rest }: MultiSelectProps) => JSX.Element;
+
+export declare type MultiSelectClassnames = {
+    container?: string;
+    label?: string;
+    trigger?: string;
+    chips?: string;
+    chip?: string;
+    chipRemove?: string;
+    content?: string;
+    search?: string;
+    list?: string;
+    option?: string;
+    empty?: string;
+};
+
+export declare type MultiSelectOption = {
+    label: string;
+    value: string;
+};
+
+export declare type MultiSelectPlacement = 'top' | 'bottom';
+
+export declare type MultiSelectProps = Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> & {
+    options: MultiSelectOption[];
+    value: string[];
+    onChange: (values: string[]) => void;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyMessage?: string;
+    label?: string;
+    icon?: ReactNode;
+    state?: MultiSelectState;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    placement?: MultiSelectPlacement;
+    maxHeight?: number;
+    virtualized?: boolean;
+    searchable?: boolean;
+    portalRenderNode?: HTMLElement | null;
+    classnames?: MultiSelectClassnames;
+    'data-test-id'?: string;
+};
+
+export declare type MultiSelectState = 'warning' | 'error';
+
+declare type MultiSelectStateTheme = {
+    trigger: {
+        backgroundColor: string;
+        borderColor: string;
+        focus: {
+            outlineColor: string;
+        };
+    };
+    label: {
+        color: string;
+    };
+    chip: {
+        backgroundColor: string;
+        color: string;
+        remove: {
+            color: string;
+        };
+    };
+    icon: {
+        color: string;
+    };
+    chevron: {
+        color: string;
+    };
+};
+
+declare type MultiSelectTheme = {
+    trigger: {
+        backgroundColor: string;
+        borderColor: string;
+        focus: {
+            outlineColor: string;
+        };
+        disabled: {
+            backgroundColor: string;
+            borderColor: string;
+        };
+    };
+    label: {
+        color: string;
+    };
+    placeholder: {
+        color: string;
+        disabled: {
+            color: string;
+        };
+    };
+    chip: {
+        backgroundColor: string;
+        color: string;
+        remove: {
+            color: string;
+            hover: {
+                color: string;
+            };
+        };
+        disabled: {
+            backgroundColor: string;
+            color: string;
+            remove: {
+                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;
+        };
+        check: {
+            color: string;
+        };
+    };
+    search: {
+        backgroundColor: string;
+        borderColor: string;
+        color: string;
+        placeholderColor: string;
+    };
+    empty: {
+        color: string;
+    };
+    state: {
+        warning: MultiSelectStateTheme;
+        error: MultiSelectStateTheme;
+    };
+};
+
 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;
@@ -668,6 +882,9 @@ declare type SelectTheme = {
             backgroundColor: string;
             color: string;
         };
+        check: {
+            color: string;
+        };
     };
     search: {
         backgroundColor: string;
@@ -684,6 +901,17 @@ declare type SelectTheme = {
     };
 };
 
+export declare const shadows: {
+    readonly none: "none";
+    readonly sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
+    readonly md: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
+    readonly lg: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
+    readonly xl: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
+    readonly xl2: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
+    readonly xl3: "0 25px 50px -12px rgb(0 0 0 / 0.25)";
+    readonly inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)";
+};
+
 export declare const Spinner: ({ "aria-label": ariaLabel, className, classnames, size, ...rest }: SpinnerProps) => JSX.Element;
 
 export declare type SpinnerClassnames = {
@@ -781,6 +1009,59 @@ export declare type StyledLoaderContainerProps = {
     $size: number;
 };
 
+export declare type StyledMultiSelectChevronProps = {
+    $state?: MultiSelectState;
+    $disabled?: boolean;
+    $isOpen?: boolean;
+};
+
+export declare type StyledMultiSelectChipProps = {
+    $state?: MultiSelectState;
+    $disabled?: boolean;
+};
+
+export declare type StyledMultiSelectChipRemoveProps = {
+    $state?: MultiSelectState;
+    $disabled?: boolean;
+};
+
+export declare type StyledMultiSelectContainerProps = {
+    $fullWidth?: boolean;
+};
+
+export declare type StyledMultiSelectContentProps = {
+    $isOpen: boolean;
+    $maxHeight: number;
+};
+
+export declare type StyledMultiSelectIconProps = {
+    $state?: MultiSelectState;
+    $disabled?: boolean;
+};
+
+export declare type StyledMultiSelectLabelProps = {
+    $state?: MultiSelectState;
+};
+
+export declare type StyledMultiSelectOptionCheckProps = {
+    $isSelected?: boolean;
+};
+
+export declare type StyledMultiSelectOptionProps = {
+    $isHighlighted?: boolean;
+};
+
+export declare type StyledMultiSelectPlaceholderProps = {
+    $disabled?: boolean;
+};
+
+export declare type StyledMultiSelectTriggerProps = {
+    $state?: MultiSelectState;
+    $disabled?: boolean;
+    $isOpen?: boolean;
+    $hasValue?: boolean;
+};
+
 export declare type StyledRadioCardContainerProps = {
     $checked?: boolean;
     $disabled?: boolean;
@@ -820,8 +1101,11 @@ export declare type StyledSelectLabelProps = {
     $state?: SelectState;
 };
 
-export declare type StyledSelectOptionProps = {
+export declare type StyledSelectOptionCheckProps = {
     $isSelected?: boolean;
+};
+
+export declare type StyledSelectOptionProps = {
     $isHighlighted?: boolean;
 };
 
@@ -873,6 +1157,7 @@ export declare type Theme = {
     radioGroup: RadioGroupTheme;
     dropdown: DropdownTheme;
     select: SelectTheme;
+    multiSelect: MultiSelectTheme;
 };
 
 export declare interface ThemeContextValue {