@ubidots/vulcanui
Version:
React UI components library from Ubidots
649 lines (613 loc) • 29.3 kB
TypeScript
import * as React$1 from 'react';
import React__default, { Dispatch, SetStateAction, EffectCallback, PropsWithChildren, ButtonHTMLAttributes, HTMLAttributes, LabelHTMLAttributes, AnchorHTMLAttributes, LiHTMLAttributes } from 'react';
import { AriaButtonProps } from '@react-aria/button';
export { AriaButtonProps, useButton } from '@react-aria/button';
import { HoverProps } from '@react-aria/interactions';
export { HoverProps, useHover } from '@react-aria/interactions';
import { OffsetOptions, Placement, UseClickProps, UseDismissProps, UseRoleProps, UseTransitionStylesProps, UseHoverProps } from '@floating-ui/react';
export { useMergeRefs } from '@floating-ui/react';
import * as _vanilla_extract_recipes from '@vanilla-extract/recipes';
import { FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
declare const variants: Record<"solid" | "ghost" | "outlined", string>;
declare const colors$1: Record<"default" | "primary" | "secondary" | "success" | "warning" | "danger", string>;
type TColors = keyof typeof colors$1;
type TVariants = keyof typeof variants;
declare function useComputedStyle<T extends HTMLElement>(elementRef: React.RefObject<T>): CSSStyleDeclaration | null;
type UseControllableStateParams<T> = {
prop?: T;
defaultProp?: T;
onChange?: (state: T) => void;
};
declare function useControllableState<T>({ prop, defaultProp, onChange }: UseControllableStateParams<T>): readonly [T | undefined, Dispatch<React$1.SetStateAction<T | undefined>>];
type UseCurrentStateReturn<T> = [T, (value: SetStateAction<T>) => void, React.MutableRefObject<T>];
declare function useCurrentState<T>(initialState?: T | (() => T)): UseCurrentStateReturn<T>;
declare function useEffectOnce(effect: EffectCallback): void;
declare function useFirstMountState(): boolean;
declare function useFunctionRef<T extends (...args: Parameters<T>) => void>(fn?: T): (...args: Parameters<T>) => void | undefined;
declare function useMountedState(): () => boolean;
interface UseSelectOptions<T> {
defaultSelected?: T[];
min?: number;
max?: number;
onChange?: (items: T[]) => void;
}
declare function useSelect<T>(options?: UseSelectOptions<T>): {
select: (item: T) => void;
values: T[];
has: (item: T) => boolean;
unselect: (item: T) => void;
reset: () => void;
toggle: (item: T) => void;
size: number;
isEmpty: boolean;
isFull: boolean;
selectMany: (items: T[]) => void;
deleteMany: (items: T[]) => void;
};
interface UseSingleSelectOptions<T> {
defaultSelected?: T | null;
onChange?: (item: T | null) => void;
required?: boolean;
}
declare function useSingleSelect<T>(options?: UseSingleSelectOptions<T>): {
select: (item: T) => void;
selected: T | null;
unselect: () => void;
toggle: (item: T) => void;
};
interface UseToggleOptions {
onChange?: (open: boolean) => void;
onClose?: () => void;
onOpen?: () => void;
}
declare function useToggle(initialValue?: boolean, options?: UseToggleOptions): [boolean, React$1.Dispatch<unknown>];
type As = React__default.ElementType;
type NativeProps$8 = React__default.ButtonHTMLAttributes<HTMLButtonElement>;
interface Props$7 {
as?: As;
endContent?: React__default.ReactNode;
startContent?: React__default.ReactNode;
variant?: TVariants;
color?: TColors;
rounded?: boolean;
shadow?: boolean;
auto?: boolean;
fullWidth?: boolean;
}
type ButtonProps = Props$7 & NativeProps$8 & HoverProps & Omit<AriaButtonProps, keyof Props$7>;
declare const Button: React__default.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
type NativeProps$7 = Omit<React__default.HTMLAttributes<HTMLLIElement>, 'color'>;
type Props$6 = {
value: string;
onClick?: (event: React__default.MouseEvent<HTMLLIElement, MouseEvent>) => void;
disabled?: boolean;
};
type DropdownItemProps = NativeProps$7 & Props$6;
declare function DropdownItem(props: DropdownItemProps): React__default.JSX.Element;
declare namespace DropdownItem {
var displayName: string;
var toString: () => string;
}
type NativeProps$6 = React__default.HTMLAttributes<HTMLUListElement>;
type Props$5 = {};
type DropdownMenuProps = NativeProps$6 & Props$5;
declare function DropdownMenu(props: PropsWithChildren): React__default.JSX.Element | null;
declare namespace DropdownMenu {
var displayName: string;
var toString: () => string;
}
type NativeProps$5 = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'disabled'>;
type Props$4 = {
asChild?: boolean;
compacted?: boolean;
hideCaret?: boolean;
fullWidth?: boolean;
};
type DropdownTriggerProps = NativeProps$5 & Props$4;
declare function DropdownTrigger(props: DropdownTriggerProps): React__default.JSX.Element;
declare namespace DropdownTrigger {
var displayName: string;
var toString: () => string;
}
interface UsePopoverOptions {
defaultOpen?: boolean;
offset?: OffsetOptions;
onOpenChange?: (open: boolean) => void;
open?: boolean;
placement?: Placement;
clickProps?: UseClickProps;
dismissProps?: UseDismissProps;
roleProps?: UseRoleProps;
transitionProps?: Omit<UseTransitionStylesProps, 'common'>;
hoverProps?: UseHoverProps;
}
type DropdownContextProps = ReturnType<typeof useDropdownContext>;
declare const useDropdownContext: (consumerName: string) => {
onSelect?: ((value: string) => void) | undefined;
disabled?: boolean | undefined;
portal?: boolean | undefined;
};
interface DropdownProps extends DropdownContextProps, PropsWithChildren {
closeOnSelect?: boolean;
defaultOpen?: boolean;
isDimissible?: boolean;
offset?: number;
triggerType?: 'click' | 'hover';
placement?: UsePopoverOptions['placement'];
portal?: boolean;
onClose?: () => void;
onOpen?: () => void;
onToggle?: (isOpen: boolean) => void;
isOpen?: boolean;
}
declare function Dropdown(props: DropdownProps): React__default.JSX.Element;
declare namespace Dropdown {
var displayName: string;
var toString: () => string;
var Trigger: typeof DropdownTrigger;
var Menu: typeof DropdownMenu;
var Item: typeof DropdownItem;
}
interface InputComboProps {
label?: string;
description?: string;
children?: React__default.ReactNode | ((props: {
id: string;
}) => React__default.ReactNode);
}
declare function InputCombo({ children, description, label }: InputComboProps): React__default.JSX.Element;
declare namespace InputCombo {
var displayName: string;
var toString: () => string;
var Label: typeof Label;
var Description: typeof Description;
}
interface InputComboLabelProps {
htmlFor?: string;
title?: string;
}
declare function Label({ children, htmlFor, title, ...restProps }: PropsWithChildren<InputComboLabelProps>): React__default.JSX.Element;
declare namespace Label {
var displayName: string;
var toString: () => string;
}
interface InputComboDescriptionProps {
maxLines?: number;
title?: string;
}
declare function Description({ children, maxLines, title, ...restProps }: PropsWithChildren<InputComboDescriptionProps>): React__default.JSX.Element;
declare namespace Description {
var displayName: string;
var toString: () => string;
}
type NativeProps$4 = Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'color'>;
type Props$3 = {
fullWidth?: boolean;
onValueChange?: (value: string) => void;
startContent?: React__default.ReactNode;
endContent?: React__default.ReactNode;
hideBorder?: boolean;
};
type InputProps = NativeProps$4 & Props$3;
declare const Input: React__default.ForwardRefExoticComponent<NativeProps$4 & Props$3 & React__default.RefAttributes<HTMLInputElement>>;
declare const colorsVariants: Record<"black" | "default" | "primary" | "secondary" | "success" | "warning" | "danger", string>;
type NativeProps$3 = Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'role' | 'type' | 'value' | 'color' | 'children'>;
type SwitchProps = NativeProps$3 & {
color?: keyof typeof colorsVariants;
shadow?: boolean;
bordered?: boolean;
onCheckedChange?: (checked: boolean) => void;
checked?: boolean;
defaultChecked?: boolean;
required?: boolean;
};
declare const _default$1: React__default.ComponentType<Partial<SwitchProps> & Omit<NativeProps$3 & {
color?: "black" | "default" | "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
shadow?: boolean | undefined;
bordered?: boolean | undefined;
onCheckedChange?: ((checked: boolean) => void) | undefined;
checked?: boolean | undefined;
defaultChecked?: boolean | undefined;
required?: boolean | undefined;
} & React__default.RefAttributes<HTMLInputElement>, "size" | "min" | "max" | "color" | "style" | "className" | "id" | "form" | "slot" | "title" | "pattern" | "height" | "width" | "hidden" | "content" | "shadow" | "disabled" | "onChange" | "required" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "alt" | "autoComplete" | "accept" | "capture" | "checked" | "enterKeyHint" | "multiple" | "maxLength" | "minLength" | "src" | "step" | "readOnly" | "bordered" | "onCheckedChange">>;
declare const sizes: Record<"xs" | "sm" | "base" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl", string>;
declare const weights: Record<"light" | "normal" | "semibold" | "bold", string>;
declare const colors: Record<"inherit" | "current" | "black" | "white" | "transparent" | "background" | "foreground" | "content-1" | "content-2" | "content-3" | "content-4" | "default" | "default-50" | "default-100" | "default-200" | "default-300" | "default-400" | "default-500" | "default-600" | "default-700" | "default-800" | "default-900" | "primary" | "primary-50" | "primary-100" | "primary-200" | "primary-300" | "primary-400" | "primary-500" | "primary-600" | "primary-700" | "primary-800" | "primary-900" | "secondary" | "secondary-50" | "secondary-100" | "secondary-200" | "secondary-300" | "secondary-400" | "secondary-500" | "secondary-600" | "secondary-700" | "secondary-800" | "secondary-900" | "success" | "success-50" | "success-100" | "success-200" | "success-300" | "success-400" | "success-500" | "success-600" | "success-700" | "success-800" | "success-900" | "warning" | "warning-50" | "warning-100" | "warning-200" | "warning-300" | "warning-400" | "warning-500" | "warning-600" | "warning-700" | "warning-800" | "warning-900" | "danger" | "danger-50" | "danger-100" | "danger-200" | "danger-300" | "danger-400" | "danger-500" | "danger-600" | "danger-700" | "danger-800" | "danger-900", string>;
declare const families: Record<"inherit" | "nunito" | "nunitoSans" | "robotoMono", string>;
declare const text: _vanilla_extract_recipes.RuntimeFn<{
size: Record<"xs" | "sm" | "base" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl", string>;
weight: Record<"light" | "normal" | "semibold" | "bold", string>;
color: Record<"inherit" | "current" | "black" | "white" | "transparent" | "background" | "foreground" | "content-1" | "content-2" | "content-3" | "content-4" | "default" | "default-50" | "default-100" | "default-200" | "default-300" | "default-400" | "default-500" | "default-600" | "default-700" | "default-800" | "default-900" | "primary" | "primary-50" | "primary-100" | "primary-200" | "primary-300" | "primary-400" | "primary-500" | "primary-600" | "primary-700" | "primary-800" | "primary-900" | "secondary" | "secondary-50" | "secondary-100" | "secondary-200" | "secondary-300" | "secondary-400" | "secondary-500" | "secondary-600" | "secondary-700" | "secondary-800" | "secondary-900" | "success" | "success-50" | "success-100" | "success-200" | "success-300" | "success-400" | "success-500" | "success-600" | "success-700" | "success-800" | "success-900" | "warning" | "warning-50" | "warning-100" | "warning-200" | "warning-300" | "warning-400" | "warning-500" | "warning-600" | "warning-700" | "warning-800" | "warning-900" | "danger" | "danger-50" | "danger-100" | "danger-200" | "danger-300" | "danger-400" | "danger-500" | "danger-600" | "danger-700" | "danger-800" | "danger-900", string>;
family: Record<"inherit" | "nunito" | "nunitoSans" | "robotoMono", string>;
hasMaxLines: {
true: string;
};
as: {
p: {};
h1: {};
h2: {};
h3: {};
h4: {};
};
textTransform: {
uppercase: {
textTransform: string;
};
lowercase: {
textTransform: string;
};
capitalize: {
textTransform: string;
};
};
}>;
type Colors$1 = keyof typeof colors;
type Sizes = keyof typeof sizes;
type Weights = keyof typeof weights;
type Families = keyof typeof families;
type TextTransforms = keyof typeof text.classNames.variants.textTransform;
type NativeProps$2 = HTMLAttributes<HTMLElement> | LabelHTMLAttributes<HTMLLabelElement> | AnchorHTMLAttributes<HTMLAnchorElement>;
type Props$2 = {
className?: string;
color?: Colors$1;
size?: Sizes;
weight?: Weights;
family?: Families;
maxLines?: number;
as?: As;
textTransform?: TextTransforms;
};
type TextProps = Props$2 & NativeProps$2;
declare const Text: React__default.ForwardRefExoticComponent<TextProps & React__default.RefAttributes<HTMLElement>>;
type NativeProps$1 = LiHTMLAttributes<HTMLLIElement>;
type Props$1 = {
startContent?: React__default.ReactNode;
disabled?: boolean;
focused?: boolean;
as?: As;
readOnly?: boolean;
};
type MenuItemProps = NativeProps$1 & Props$1;
declare function MenuItem(props: MenuItemProps): React__default.JSX.Element;
declare namespace MenuItem {
var displayName: string;
var toString: () => string;
}
declare const checkboxColor: Record<"inherit" | "current" | "black" | "white" | "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "initial", string>;
type Colors = keyof typeof checkboxColor;
type MenuCheckboxItemProps = Omit<MenuItemProps, 'startContent' | 'selected'> & {
checked?: boolean;
color?: Colors;
as?: As;
};
declare function MenuCheckboxItem(props: MenuCheckboxItemProps): React__default.JSX.Element;
declare namespace MenuCheckboxItem {
var displayName: string;
var toString: () => string;
}
type NativeProps = React__default.DetailsHTMLAttributes<HTMLUListElement>;
interface MenuProps extends NativeProps {
className?: string;
style?: React__default.CSSProperties;
as?: As;
maxHeight?: number;
}
declare const _default: React__default.ForwardRefExoticComponent<MenuProps & React__default.RefAttributes<HTMLUListElement>> & {
Item: typeof MenuItem;
CheckboxItem: typeof MenuCheckboxItem;
};
declare const iconsByName: {
readonly solid: {
readonly 'caret-down': IconDefinition;
readonly 'square-check': IconDefinition;
readonly pencil: IconDefinition;
};
readonly regular: {
readonly 'caret-down': IconDefinition;
readonly square: IconDefinition;
readonly search: IconDefinition;
};
readonly light: {
readonly 'caret-down': IconDefinition;
readonly 'chevron-left': IconDefinition;
readonly 'chevron-right': IconDefinition;
};
readonly duotone: {
readonly 'caret-down': IconDefinition;
};
readonly thin: {
readonly 'square-question': IconDefinition;
};
};
type IconStyle = keyof typeof iconsByName;
type IconName<T extends IconStyle> = keyof (typeof iconsByName)[T];
type Names = IconName<'solid'> | IconName<'regular'> | IconName<'light'> | IconName<'duotone'> | IconName<'thin'>;
interface IconProps extends Omit<FontAwesomeIconProps, 'icon'> {
type?: IconStyle;
name: Names;
}
declare function Icon(props: IconProps): React__default.JSX.Element;
declare namespace Icon {
var displayName: string;
var toString: () => string;
}
declare const direction: Record<"row" | "column" | "rowReverse" | "columnReverse", string>;
declare const align: Record<"center" | "baseline" | "start" | "end" | "stretch", string>;
declare const justify: Record<"center" | "start" | "end" | "between" | "around" | "evenly", string>;
declare const gap: Record<0 | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "min" | "max" | "fit" | "screen" | "full" | "px" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96, string>;
declare const basis: Record<0 | "full" | "auto" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12", string>;
declare const grow: Record<0 | 1 | 2 | 3 | 4 | 5, string>;
declare const shrink: Record<0 | 1 | 2 | 3 | 4 | 5, string>;
declare const display: Record<"flex" | "inlineFlex", string>;
declare const wrap: Record<"nowrap" | "wrap" | "wrapReverse", string>;
type Direction = keyof typeof direction;
type Align = keyof typeof align;
type Justify = keyof typeof justify;
type Wrap = keyof typeof wrap;
type Basis = keyof typeof basis;
type Grow = keyof typeof grow;
type Shrink = keyof typeof shrink;
type Gap = keyof typeof gap;
type Display = keyof typeof display;
interface FlexProps extends React__default.HTMLAttributes<HTMLDivElement> {
align?: Align;
as?: As;
basis?: Basis;
direction?: Direction;
display?: Display;
gap?: Gap;
grow?: Grow;
justify?: Justify;
shrink?: Shrink;
wrap?: Wrap;
}
declare const Flex: React__default.ForwardRefExoticComponent<FlexProps & React__default.RefAttributes<HTMLElement>>;
declare const defaultTheme: {
colors: {
"danger-50": string;
"danger-100": string;
"danger-200": string;
"danger-300": string;
"danger-400": string;
"danger-500": string;
"danger-600": string;
"danger-700": string;
"danger-800": string;
"danger-900": string;
danger: string;
"warning-50": string;
"warning-100": string;
"warning-200": string;
"warning-300": string;
"warning-400": string;
"warning-500": string;
"warning-600": string;
"warning-700": string;
"warning-800": string;
"warning-900": string;
warning: string;
"success-50": string;
"success-100": string;
"success-200": string;
"success-300": string;
"success-400": string;
"success-500": string;
"success-600": string;
"success-700": string;
"success-800": string;
"success-900": string;
success: string;
"secondary-50": string;
"secondary-100": string;
"secondary-200": string;
"secondary-300": string;
"secondary-400": string;
"secondary-500": string;
"secondary-600": string;
"secondary-700": string;
"secondary-800": string;
"secondary-900": string;
secondary: string;
"primary-50": string;
"primary-100": string;
"primary-200": string;
"primary-300": string;
"primary-400": string;
"primary-500": string;
"primary-600": string;
"primary-700": string;
"primary-800": string;
"primary-900": string;
primary: string;
"default-50": string;
"default-100": string;
"default-200": string;
"default-300": string;
"default-400": string;
"default-500": string;
"default-600": string;
"default-700": string;
"default-800": string;
"default-900": string;
black: string;
white: string;
transparent: string;
inherit: string;
current: string;
background: string;
foreground: string;
'content-1': string;
'content-2': string;
'content-3': string;
'content-4': string;
default: string;
};
fonts: {
family: {
nunito: string;
nunitoSans: string;
robotoMono: string;
inherit: string;
};
size: {
xs: string;
sm: string;
base: string;
md: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
'4xl': string;
'5xl': string;
'6xl': string;
'7xl': string;
'8xl': string;
'9xl': string;
};
weight: {
light: string;
normal: string;
semibold: string;
bold: string;
};
lineHeights: {
xs: string;
sm: string;
base: string;
md: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
'4xl': string;
'5xl': string;
'6xl': string;
'7xl': string;
'8xl': string;
'9xl': string;
};
letterSpacings: {
tighter: string;
tight: string;
normal: string;
wide: string;
wider: string;
widest: string;
};
};
spaces: {
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
'4xl': string;
'5xl': string;
'6xl': string;
'7xl': string;
'8xl': string;
'9xl': string;
min: string;
max: string;
fit: string;
screen: string;
full: string;
px: string;
0: string;
1: string;
2: string;
3: string;
4: string;
5: string;
6: string;
7: string;
8: string;
9: string;
10: string;
11: string;
12: string;
13: string;
14: string;
15: string;
16: string;
17: string;
18: string;
20: string;
24: string;
28: string;
32: string;
36: string;
40: string;
44: string;
48: string;
52: string;
56: string;
60: string;
64: string;
72: string;
80: string;
96: string;
};
radii: {
xs: string;
sm: string;
base: string;
md: string;
lg: string;
xl: string;
'2xl': string;
'3xl': string;
full: string;
squared: string;
rounded: string;
pill: string;
};
zIndices: {
1: string;
2: string;
3: string;
4: string;
5: string;
6: string;
7: string;
8: string;
9: string;
10: string;
max: string;
};
borders: {
light: string;
normal: string;
bold: string;
extrabold: string;
black: string;
};
transitions: {
fast: string;
normal: string;
slow: string;
colors: string;
};
durations: {
fast: string;
normal: string;
slow: string;
};
};
type DeepPartial<T> = {
[K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
};
declare function createTheme(customVars?: DeepPartial<typeof defaultTheme>): {
[cssVarName: string]: string;
};
type Props = {
theme?: ReturnType<typeof createTheme>;
injectFonts?: boolean;
children: React__default.ReactNode;
root?: HTMLElement;
};
declare function VulcanUIThemeProvider(props: Props): React__default.JSX.Element;
export { Button, type ButtonProps, Dropdown, DropdownItem, type DropdownItemProps, DropdownMenu, type DropdownMenuProps, type DropdownProps, DropdownTrigger, type DropdownTriggerProps, Flex, Icon, Input, InputCombo, Description as InputComboDescription, type InputComboDescriptionProps, Label as InputComboLabel, type InputComboLabelProps, type InputComboProps, type InputProps, _default as Menu, MenuItem, _default$1 as Switch, type SwitchProps, Text, type TextProps, VulcanUIThemeProvider as VulcanUIProvider, createTheme, defaultTheme, useComputedStyle, useControllableState as useControlledValue, useCurrentState, useEffectOnce, useFirstMountState, useFunctionRef, useMountedState, useSelect, useSingleSelect, useToggle };