@vacano/ui 1.9.0 → 1.10.0

package/dist/index.d.ts

@@ -9,6 +9,8 @@ import { ReactPortal } from 'react';
 import { Ref } from 'react';
 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 type AutocompleteClassNames = {
@@ -44,6 +46,18 @@ export declare type AutocompleteValue = {
 
 export declare type AutocompleteVariant = 'normal' | 'error';
 
+declare type Breakpoint = keyof typeof BREAKPOINTS;
+
+export declare const BREAKPOINTS: {
+    readonly sm: 640;
+    readonly md: 768;
+    readonly lg: 1024;
+    readonly xl: 1280;
+    readonly '2xl': 1536;
+};
+
+export declare type Browser = 'chrome' | 'firefox' | 'safari' | 'edge' | 'opera' | 'unknown';
+
 export declare const Button: ({ children, className, classnames, disabled, fullWidth, icon, loading, onClick, ref, keyBindings, size, type, variant, ...rest }: ButtonProps) => JSX.Element;
 
 export declare type ButtonClassNames = {
@@ -153,6 +167,18 @@ export declare type ChipProps = VacanoComponentProps<HTMLSpanElement, ChipClassN
 
 export declare type ChipVariant = 'gray' | 'red' | 'blue' | 'black';
 
+export declare const COLORS: {
+    readonly black: "#212529";
+    readonly white: "#ffffff";
+    readonly red: "#C1121F";
+    readonly green: "#16a34a";
+    readonly yellow: "#ffb703";
+    readonly gray: "#e5e7eb";
+    readonly 'steel-blue': "#0582ca";
+    readonly 'iron-grey': "#495057";
+    readonly 'baltic-blue': "#1e6091";
+};
+
 export declare type ConfirmationContextValue = {
     show: (message: ReactNode, onConfirm: () => void | Promise<void>, onCancel?: () => void, options?: ConfirmationOptions) => void;
     hide: () => void;
@@ -325,6 +351,12 @@ export declare type FieldMessageVariant = 'normal' | 'error' | 'success' | 'warn
  */
 export declare const formatDateGo: (date: Date, format: string, locale?: string) => string;
 
+export declare const getBrowser: () => Browser;
+
+export declare const getKeySymbols: (keys?: KeyboardEventKey[]) => string[];
+
+export declare const getOperatingSystem: () => OperatingSystem;
+
 export declare const GlobalStyle: () => JSX.Element;
 
 export declare const ImageCropper: ({ allowedTypes, applyLabel, buttonLabel, cancelLabel, className, classnames, compression, maxFileSize, onCrop, onError, outputSize, portalSize, previewSize, ref, type, value, ...rest }: ImageCropperProps) => JSX.Element;
@@ -377,11 +409,117 @@ export declare type InputProps = VacanoComponentProps<HTMLInputElement, InputCla
 
 export declare type InputVariant = 'normal' | 'error';
 
+export declare const isValid: (hexColor: string) => boolean;
+
+export declare const KEY_SYMBOLS: Partial<Record<KeyboardEventKey, {
+    mac: string;
+    other: string;
+}>>;
+
 /**
  * Keyboard key values based on KeyboardEvent.key
  * @see https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values
  */
-declare type KeyboardEventKey = 'Meta' | 'Control' | 'Alt' | 'Shift' | 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'J' | 'K' | 'L' | 'M' | 'N' | 'O' | 'P' | 'Q' | 'R' | 'S' | 'T' | 'U' | 'V' | 'W' | 'X' | 'Y' | 'Z' | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | 'F1' | 'F2' | 'F3' | 'F4' | 'F5' | 'F6' | 'F7' | 'F8' | 'F9' | 'F10' | 'F11' | 'F12' | 'ArrowUp' | 'ArrowDown' | 'ArrowLeft' | 'ArrowRight' | 'Home' | 'End' | 'PageUp' | 'PageDown' | ' ' | 'Enter' | 'Tab' | 'Backspace' | 'Delete' | 'Insert' | 'Escape' | '`' | '-' | '=' | '[' | ']' | '\\' | ';' | "'" | ',' | '.' | '/' | 'NumLock' | 'NumpadEnter' | 'NumpadAdd' | 'NumpadSubtract' | 'NumpadMultiply' | 'NumpadDivide' | 'NumpadDecimal' | 'Numpad0' | 'Numpad1' | 'Numpad2' | 'Numpad3' | 'Numpad4' | 'Numpad5' | 'Numpad6' | 'Numpad7' | 'Numpad8' | 'Numpad9' | 'CapsLock' | 'ScrollLock' | 'Pause' | 'PrintScreen' | 'ContextMenu';
+export declare type KeyboardEventKey = 'Meta' | 'Control' | 'Alt' | 'Shift' | 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'J' | 'K' | 'L' | 'M' | 'N' | 'O' | 'P' | 'Q' | 'R' | 'S' | 'T' | 'U' | 'V' | 'W' | 'X' | 'Y' | 'Z' | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | 'F1' | 'F2' | 'F3' | 'F4' | 'F5' | 'F6' | 'F7' | 'F8' | 'F9' | 'F10' | 'F11' | 'F12' | 'ArrowUp' | 'ArrowDown' | 'ArrowLeft' | 'ArrowRight' | 'Home' | 'End' | 'PageUp' | 'PageDown' | ' ' | 'Enter' | 'Tab' | 'Backspace' | 'Delete' | 'Insert' | 'Escape' | '`' | '-' | '=' | '[' | ']' | '\\' | ';' | "'" | ',' | '.' | '/' | 'NumLock' | 'NumpadEnter' | 'NumpadAdd' | 'NumpadSubtract' | 'NumpadMultiply' | 'NumpadDivide' | 'NumpadDecimal' | 'Numpad0' | 'Numpad1' | 'Numpad2' | 'Numpad3' | 'Numpad4' | 'Numpad5' | 'Numpad6' | 'Numpad7' | 'Numpad8' | 'Numpad9' | 'CapsLock' | 'ScrollLock' | 'Pause' | 'PrintScreen' | 'ContextMenu';
+
+export declare const KEYFRAMES: {
+    rotate: {
+        name: string;
+        styles: string;
+        anim: 1;
+        toString: () => string;
+    } & string;
+    fadeIn: {
+        name: string;
+        styles: string;
+        anim: 1;
+        toString: () => string;
+    } & string;
+    fadeOut: {
+        name: string;
+        styles: string;
+        anim: 1;
+        toString: () => string;
+    } & string;
+    slideInLeft: {
+        name: string;
+        styles: string;
+        anim: 1;
+        toString: () => string;
+    } & string;
+    slideOutLeft: {
+        name: string;
+        styles: string;
+        anim: 1;
+        toString: () => string;
+    } & string;
+    slideInRight: {
+        name: string;
+        styles: string;
+        anim: 1;
+        toString: () => string;
+    } & string;
+    slideOutRight: {
+        name: string;
+        styles: string;
+        anim: 1;
+        toString: () => string;
+    } & string;
+    slideInTop: {
+        name: string;
+        styles: string;
+        anim: 1;
+        toString: () => string;
+    } & string;
+    slideOutTop: {
+        name: string;
+        styles: string;
+        anim: 1;
+        toString: () => string;
+    } & string;
+    slideInBottom: {
+        name: string;
+        styles: string;
+        anim: 1;
+        toString: () => string;
+    } & string;
+    slideOutBottom: {
+        name: string;
+        styles: string;
+        anim: 1;
+        toString: () => string;
+    } & string;
+    scaleIn: {
+        name: string;
+        styles: string;
+        anim: 1;
+        toString: () => string;
+    } & string;
+    slideInTopFade: {
+        name: string;
+        styles: string;
+        anim: 1;
+        toString: () => string;
+    } & string;
+    slideOutTopFade: {
+        name: string;
+        styles: string;
+        anim: 1;
+        toString: () => string;
+    } & string;
+    slideInBottomFade: {
+        name: string;
+        styles: string;
+        anim: 1;
+        toString: () => string;
+    } & string;
+    slideOutBottomFade: {
+        name: string;
+        styles: string;
+        anim: 1;
+        toString: () => string;
+    } & string;
+};
 
 export declare const KeysBindings: ({ className, classnames, keys, ref, variant, ...rest }: KeysBindingsProps) => JSX.Element | null;
 
@@ -405,6 +543,12 @@ export declare type KeySymbolProps = VacanoComponentProps<HTMLSpanElement> & {
 
 export declare type KeySymbolVariant = 'dark' | 'light';
 
+export declare const mediaBetween: (min: Breakpoint, max: Breakpoint) => string;
+
+export declare const mediaDown: (bp: Breakpoint) => string;
+
+export declare const mediaUp: (bp: Breakpoint) => string;
+
 export declare const Modal: ({ animated, children, className, classnames, open, ref, width, ...rest }: ModalProps) => ReactPortal | null;
 
 export declare type ModalClassNames = {
@@ -455,6 +599,8 @@ export declare type MultiSelectProps = VacanoComponentProps<HTMLDivElement, Mult
 
 export declare type MultiSelectVariant = 'normal' | 'error';
 
+export declare const newClassNameGetter: (name: string) => (element: string, ...classNames: Array<string | undefined>) => string;
+
 declare type Notification_2 = {
     id: string;
     message: ReactNode;
@@ -486,6 +632,8 @@ export declare type NotificationState = {
 
 export declare type NotificationVariant = 'default' | 'success' | 'warning' | 'danger' | 'info';
 
+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 type OtpCodeClassNames = {
@@ -804,6 +952,8 @@ export declare type ToastState = {
 
 export declare type ToastVariant = 'default' | 'success' | 'warning' | 'danger';
 
+export declare const toHEX: (n: number) => string;
+
 export declare const Tooltip: ({ children, className, classnames, content, delay, placement, portalRenderNode, ref, variant, ...rest }: TooltipProps) => JSX.Element;
 
 export declare type TooltipClassNames = {
@@ -844,21 +994,36 @@ export declare type UseImageCropperReturn = {
     open: () => void;
 };
 
+export declare const useKeyBinding: (keys: KeyboardEventKey[], cb?: () => void) => void;
+
 export declare const useNotification: () => NotificationContextValue;
 
 export declare const useSaveProgress: () => SaveProgressContextValue;
 
 export declare const useToast: () => ToastContextValue;
 
-declare type VacanoComponentClassNames<T> = T;
+export declare type VacanoComponentClassNames<T> = T;
 
-declare type VacanoComponentProps<E extends HTMLElement | null, T extends Record<string, string> = Record<string, never>> = {
+export declare type VacanoComponentProps<E extends HTMLElement | null, T extends Record<string, string> = Record<string, never>> = {
     'data-test-id'?: string;
     className?: string;
     classnames?: VacanoComponentClassNames<T>;
     ref?: Ref<E>;
 };
 
-declare type VacanoComponentSize = 'compact' | 'default';
+export declare type VacanoComponentSize = 'compact' | 'default';
+
+export declare type VacanoInteractiveElementState = {
+    active?: string;
+    disabled?: string;
+    hover?: string;
+    static?: string;
+};
+
+export declare type VacanoValueItem = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
 
 export { }