import * as react_jsx_runtime from 'react/jsx-runtime'; import * as React$1 from 'react'; import React__default, { ReactNode, FC, HTMLAttributes, ElementType, SVGProps as SVGProps$1, RefObject, Dispatch, SetStateAction, ComponentPropsWithoutRef, ButtonHTMLAttributes, HTMLProps as HTMLProps$1 } from 'react'; import * as Headless from '@headlessui/react'; import { InputProps as InputProps$1, DialogProps, DialogTitleProps, ListboxProps, ListboxOptionProps, FieldProps as FieldProps$1, SwitchProps, TextareaProps as TextareaProps$1, RadioGroup as RadioGroup$1 } from '@headlessui/react'; import * as class_variance_authority_types from 'class-variance-authority/types'; import { VariantProps } from 'class-variance-authority'; import { Placement, UseFloatingReturn, UseInteractionsReturn } from '@floating-ui/react'; declare const _isOptionEqualToValue: (option: T, value: T | T[] | null | undefined) => boolean; type FnIsOptionEqualToValue = typeof _isOptionEqualToValue; type RenderOptionProps = { option: T; index: number; autoHighlight?: boolean; getOptionProps: (option: T, index: number) => AutocompleteOptionProps; } & ({ getOptionLabel: (option: T) => string; } | { getOptionLabel?: never; }); declare const _renderOption: ({ option, index, autoHighlight, getOptionProps, getOptionLabel, }: RenderOptionProps) => React.ReactNode; type AutocompleteRenderOption = typeof _renderOption; type AutocompleteRenderTagsProps = { renderableOptions: T[]; removeSelected?: (option: T) => void; getOptionLabel?: (option: T) => string; defaultTagProps?: Omit; }; declare const _renderTags: ({ renderableOptions, removeSelected, getOptionLabel, defaultTagProps, }: AutocompleteRenderTagsProps) => react_jsx_runtime.JSX.Element[]; type AutocompleteRenderTags = typeof _renderTags; type AutocompleteOptionDefault = string | { label: string; disabled?: boolean; }; type AutocompleteProps = Omit & Pick & { /** * Placeholder text */ placeholder?: string; /** * Disable read only */ readOnly?: boolean; /** * Disable interactions */ disabled?: boolean; /** * Custom function to compare option and value */ isOptionEqualToValue?: FnIsOptionEqualToValue; /** * Getter for option disabled state */ getOptionDisabled?: (option: T) => boolean; /** * Getter for option label */ getOptionLabel?: (option: T) => string; /** * Component to display list options */ renderOption?: AutocompleteRenderOption; /** * Component to display list options */ renderSelection?: (option: T) => React.ReactNode; /** * Component to display selection in `multiple` mode */ renderTags?: AutocompleteRenderTags; /** * Text to display when the tags are truncated (limitTags). Signature: function(more: number) => ReactNode more: The number of truncated tags. */ getLimitTagsText?: (more: number) => string; /** * Filter options function */ filterOptions?: (options: T[], filterOptions: AutocompleteFilterOptions) => T[]; /** * List options */ options?: T[]; /** * Close button tooltip text */ textEmpty?: string | null; /** * Not found text */ textNotFound?: string | null; /** * Loading icon tooltip text */ textLoading?: string | null; /** * Clear button tooltip text */ textClear?: string | null; /** * Create option text */ textCreate?: string | null; /** * Should highlight matched text */ autoHighlight?: boolean; /** * Limit of multiple selected to be displayed in input */ limit?: number; /** * Callback function that is called when creating new option. * @param title:string - The new value(s). Calls with the current input value. */ onCreate?: (title: string) => void; /** * Callback function that is called when the input value changes. */ onInputChange?: (event: React.ChangeEvent) => void; /** * @default 500 * either provide a number of pixels or a string like 1rem, 20vh, etc. * 'availableHeight': will set the max height of the dropdown to the available height of the screen */ maxHeight?: DropdownMaxHeight; /** * Props of the default tags component (Chip) */ defaultTagProps?: ChipProps; /** * z-index configuration */ zIndex?: { list?: number; }; /** * Should filter selected options from the list */ filterSelectedOptions?: boolean; } & ({ /** * Current value to display */ value?: T | null; /** * Allow selection of multiple value */ multiple?: false; /** * Callback function that is called when the value changes. * @param { T | null } value - The new value(s). Returns an array of selected values. If !multiple, will return an array with one value. */ onChange?: (value: T | null) => void; } | { /** * Current value to display */ value?: T[] | null; /** * Allow selection of multiple value */ multiple: true; /** * Callback function that is called when the value changes. * @param { T[] | null } value - The new value(s). Returns an array of selected values. If !multiple, will return an array with one value. */ onChange?: (value: T[] | null) => void; }); interface AutocompleteFilterOptionsConfig { ignoreAccents?: boolean; ignoreCase?: boolean; limit?: number; matchFrom: 'start' | 'any' | 'end'; stringify?: (option: T) => string; trim?: boolean; } interface AutocompleteFilterOptions { query: string; getOptionLabel: (option: T) => string; } type AutocompleteOptionProps = { className: string; index: number; query: string; active: boolean; } & GetItemPropsReturnType; type GetItemPropsReturnType = { 'aria-selected'?: boolean; 'aria-disabled'?: boolean; role: string; key: string; multiple: boolean; selected: boolean; onClick: (event: React.MouseEvent) => void; ref: React.RefObject; } & React.HTMLProps; type AutocompleteInnerInputProps = React.InputHTMLAttributes; declare function Autocomplete(props: AutocompleteProps): react_jsx_runtime.JSX.Element; declare const AVATAR_VARIANTS: readonly ["circle", "rounded", "square"]; type AvatarVariant = (typeof AVATAR_VARIANTS)[number]; type AvatarProps = Omit, 'size'> & { /** * How large should the Avatar be? */ size?: number; /** * Class name */ className?: string; /** * Variant of Avatar */ variant?: AvatarVariant; /** * Children of Avatar */ children?: ReactNode; }; interface AvatarGroupProps extends Pick { /** * Total number of avatars to show in counter */ total?: number; /** * Maximum number of avatars to show */ limit?: number; /** * Children of AvatarGroup - other `Avatar`s */ children?: ReactNode; /** * Controls the offset of `Avatar`s components. * Default -3.5% which translates directly to margin-left:-3.5%. */ stackingOffsetPercent?: number; /** * Class name */ className?: string; /** * `className` for surplus `Avatar` component. */ surplusClassName?: string; /** * Custom render function for surplus `Avatar` component. * @param surplusCount * @returns ReactNode */ renderSurplus?: (surplusCount: number) => ReactNode; } declare const Avatar: React$1.ForwardRefExoticComponent & React$1.RefAttributes>; declare const AvatarGroup: FC; declare const avatarStyles: { img: (props?: ({ variant?: "circle" | "square" | "rounded" | null | undefined; container?: boolean | null | undefined; } & class_variance_authority_types.ClassProp) | undefined) => string; container: string[]; }; /** * TODO: Update this component to use your client-side framework's link * component. We've provided examples of how to do this for Next.js, Remix, and * Inertia.js in the Catalyst documentation: * * https://catalyst.tailwindui.com/docs#client-side-router-integration */ declare const Link: React__default.ForwardRefExoticComponent<{ href: string; } & Omit, HTMLAnchorElement>, "ref"> & React__default.RefAttributes>; type JSXNode = any; type FunctionalComponent

= (props: P) => JSXNode; type ForwardedComponent

= { (props: P, ref?: any): JSXNode | null; }; type HTMLProps = { [P in keyof T]?: T[P]; }; type ClassName = string[] | string | undefined; declare const DATE_TYPES: readonly ["date", "datetime-local", "month", "time", "week"]; type DateType = (typeof DATE_TYPES)[number]; declare const INPUT_TYPES: readonly ["email", "number", "password", "search", "tel", "text", "url", "color", "file"]; type InputType = (typeof INPUT_TYPES)[number]; type HTMLInputType = InputType | DateType; declare const ELEMENT_COLOR: readonly ["primary", "destructive", "warning", "success", "mono"]; declare const ELEMENT_THEMES: readonly ["dark", "light"]; declare const ELEMENT_BASE_VARIANTS: readonly ["contained", "outlined"]; declare const ELEMENT_VARIANTS: readonly ["contained", "outlined", "text"]; declare const INPUT_VARIANTS: readonly ["contained", "outlined", "underline", "text"]; declare const INPUT_BORDER: readonly ["full", "bottom", "none"]; declare const INPUT_CONTAINER_HEIGHTS: readonly ["fixed", "auto"]; declare const INPUT_BACKGROUNDS: readonly ["none", "bottom", "full"]; declare const ELEMENT_ORIENTATION: readonly ["vertical", "horizontal"]; declare const ELEMENT_PLACEMENT_VERTICAL: readonly ["top", "bottom"]; declare const ELEMENT_PLACEMENT_HORIZONTAL: readonly ["right", "left"]; declare const ELEMENT_POSITION: readonly ["top", "bottom", "right", "left"]; declare const TYPOGRAPHY: readonly ["h1", "h2", "h3", "h4", "h5", "h6", "content", "description"]; declare const TAILWIND_SHADES: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]; declare const ELEMENT_STATES: readonly ["hover", "focus", "active", "disabled", "default"]; type ElementColor = (typeof ELEMENT_COLOR)[number]; type ElementState = (typeof ELEMENT_STATES)[number]; type ElementOrientation = (typeof ELEMENT_ORIENTATION)[number]; type ElementTheme = (typeof ELEMENT_THEMES)[number]; type ElementVariant = (typeof ELEMENT_VARIANTS)[number]; type InputVariant = (typeof INPUT_VARIANTS)[number]; type InputBorder = (typeof INPUT_BORDER)[number]; type InputContainerHeight = (typeof INPUT_CONTAINER_HEIGHTS)[number]; type InputBackground = (typeof INPUT_BACKGROUNDS)[number]; type ElementBaseVariant = (typeof ELEMENT_BASE_VARIANTS)[number]; type ElementPlacementHorizontal = (typeof ELEMENT_PLACEMENT_HORIZONTAL)[number]; type ElementPlacementVertical = (typeof ELEMENT_PLACEMENT_VERTICAL)[number]; type ElementPosition = (typeof ELEMENT_POSITION)[number]; type ElementTypography = (typeof TYPOGRAPHY)[number]; type ElementPlacement = { horizontal: ElementPlacementHorizontal; vertical: ElementPlacementVertical; }; type TailwindShades = (typeof TAILWIND_SHADES)[number]; type TailwindColorSet = Record; type DropdownOptionType = { id: string; label: string; disabled?: boolean; }; type CommitInfo = { shortHash: string; hash: string; subject: string; sanitizedSubject: string; body: string; authoredOn: string; committedOn: string; author: { name: string; email: string; }; committer: { name: string; email: string; }; notes: string; branch: string; tags: string[]; version: string; timestamp: string; }; interface MultipleEllipsisFormatter { value: string; hidden: number; total: number; } interface UIElement { /** * Children */ children?: JSXNode; /** * CSS classes API */ className?: string; /** * HTML id of element */ id?: string; } interface BaseComponentProps { /** * CSS classes API */ className?: string; /** * HTML id of element */ id?: string; /** * Is element required? */ required?: boolean; /** * Is element read-only? */ readOnly?: boolean; /** * Input label */ label?: string; /** * Is disabled? */ disabled?: boolean; /** * Error message */ error?: JSXNode; /** * Helper text */ helperText?: JSXNode; } interface _InputBaseProps extends Omit { /** * Component is in loading state? */ loading?: boolean; /** * Variant of the component? */ variant?: ElementVariant; /** * Element to be displayed on the left side of the input */ startAdornment?: JSXNode; /** * Element to be displayed on the right side of the input */ endAdornment?: JSXNode; /** * Type of HTML input */ type?: HTMLInputType; /** * Children */ children: JSXNode; /** * Show clear input icon? */ clearable?: boolean; /** * Callback for clear input icon. */ onClear?: () => void; /** * Layout of elements */ layout?: 'column' | 'row'; /** * CSS classes API */ cx?: InputClassNamesAPI; /** * Disable interactions e.g. while loading, readOnly, disabled. This will prevent interactions with the input by "pointer-events-none". */ interactionsDisabled?: boolean; /** * Placeholder */ placeholder?: string; /** * Resize options for textarea */ resize?: 'none' | 'both' | 'horizontal' | 'vertical'; } type InputClassNamesAPI = { container?: { outer?: string; inner?: string; }; label?: string; input?: string; }; type ReadableError = { message: JSXNode; title: JSXNode; code?: JSXNode; }; type DropdownValueType = DropdownOptionType | DropdownOptionType[] | string | string[] | null; type OptionComponentProps = OptionProps & HTMLProps; type OptionComponentType = ForwardedComponent & { ref?: any; }> | FunctionalComponent; type DropdownMaxHeight = number | string | 'available'; interface DropdownProps extends BaseComponentProps { /** * CSS classes API */ cx?: _InputBaseProps['cx']; /** * Placeholder */ placeholder?: string | null; /** * List options */ options?: DropdownOptionType[] | string[]; /** * Component to display list options */ optionComponent?: OptionComponentType; /** * Component to display list options */ selectedOptionComponent?: FunctionalComponent; /** * Default value to display when component is not controlled */ defaultValue?: DropdownOptionType | string; /** * Current value to display */ value?: DropdownValueType; /** * Close button tooltip text */ emptyText?: string | null; /** * Not found text */ notFoundText?: string | null; /** * Loading icon tooltip text */ loadingText?: string | null; /** * Clear button tooltip text */ clearText?: string | null; /** * Close button tooltip text */ closeText?: string | null; /** * Should display clear value button */ clearable?: boolean; /** * Is field required */ required?: boolean; /** * Is disabled */ disabled?: boolean; /** * Allow selection of multiple value */ multiple?: boolean; /** * Should highlight matched text TODO: not implemented */ highlightSearch?: boolean; /** * Limit of multiple selected to be displayed in input */ limit?: number; /** * Should display Loader */ loading?: boolean; /** * Format of count of multiple selected to be displayed in input */ getLimitText?: (more: number) => string; /** * Filter options function */ filterOptions?: (query?: string) => (option: DropdownOptionType | any) => string; /** * onChange callback. Will return array of selected values. If !multiple, will return array with one value. * @param value * @returns */ onChange?: (value: DropdownValueType) => void; /** * @default 500 * either provide a number of pixels or a string like 1rem, 20vh, etc. * 'availableHeight': will set the max height of the dropdown to the available height of the screen */ maxHeight?: DropdownMaxHeight; /** * Variant of the input */ variant?: ElementVariant; /** * z-index configuration */ zIndex?: { list?: number; }; } interface OptionProps { active: boolean; selected?: boolean; option: DropdownOptionType; multiple?: boolean; children?: JSXNode; } interface SelectedOptionProps { option: DropdownOptionType; children?: JSXNode; idx: number; } type BreadcrumbLink = { href: string; label: string; disabled?: boolean; }; type ButtonProps = { color?: ElementColor | 'unstyled'; variant?: ElementVariant; className?: string; children?: ReactNode; loading?: boolean; disabled?: boolean; uppercase?: boolean; fullWidth?: boolean; startAdornment?: ReactNode; endAdornment?: ReactNode; spinnerPosition?: ElementPlacementHorizontal; loaderColor?: string; } & (Omit | Omit, 'className'>); declare const Button: React__default.ForwardRefExoticComponent>; type CalendarDateValue = Date | null | undefined; type CalendarMode = 'date' | 'range'; type CalendarProps = Omit & { showTodaySelector?: boolean; weekStartsOn?: WeekDayIndex; todayText?: string; startOn?: CalendarDateValue; numberOfMonths?: 1 | 2; locale?: string; } & ({ onChange?: (date: CalendarDateValue) => void; value?: CalendarDateValue; mode?: 'date'; } | { onChange?: (date: DateRange) => void; value?: DateRange; mode?: 'range'; }); type DateRange = [CalendarDateValue, CalendarDateValue]; type CalendarViewMode = 'days' | 'months' | 'years'; type WeekDayIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7; declare const Calendar: FC; interface CardProps extends HTMLAttributes { href?: string; } declare const CardTitle: React__default.ForwardRefExoticComponent & React__default.RefAttributes>; declare const Card: React__default.ForwardRefExoticComponent>; declare const CardContent: React__default.ForwardRefExoticComponent & React__default.RefAttributes>; declare const CardDescription: React__default.ForwardRefExoticComponent & React__default.RefAttributes>; declare const CardFooter: React__default.ForwardRefExoticComponent & React__default.RefAttributes>; declare const CardHeader: React__default.ForwardRefExoticComponent & React__default.RefAttributes>; declare const CardStats: React__default.ForwardRefExoticComponent & React__default.RefAttributes>; declare const CardStyles: (props?: ({} & class_variance_authority_types.ClassProp) | undefined) => string; interface CheckboxProps extends Omit { children?: ReactNode; className?: string; readOnly?: boolean; loading?: boolean; } declare const Checkbox: FC; declare const checkboxStyles: (props?: ({ readOnly?: boolean | null | undefined; } & class_variance_authority_types.ClassProp) | undefined) => string; type ChipProps = Partial> & { /** * Should be uppercase? */ uppercase?: boolean; /** * Status of the element */ color?: ElementColor | 'unstyled'; /** * Should have border? */ border?: boolean; /** * Variant */ variant?: ElementBaseVariant; /** * Start adornment */ startAdornment?: ReactNode; /** * Start adornment */ endAdornment?: ReactNode; /** * Callback when delete button is clicked */ onDelete?: () => void; /** * * Callback when chip is clicked */ onClick?: () => void; /** * Class names overrides */ cx?: Pick; /** * Style overrides, helpful with adding custom colors. Passing `style` will disable `color` prop. */ style?: React.CSSProperties; }; declare const Chip: { (props: ChipProps): react_jsx_runtime.JSX.Element; displayName: string; }; declare const chipClasses: (props?: ({ uppercase?: boolean | null | undefined; interactive?: boolean | null | undefined; variant?: "text" | "contained" | "outlined" | null | undefined; color?: "primary" | "destructive" | "warning" | "success" | "mono" | "unstyled" | null | undefined; } & class_variance_authority_types.ClassProp) | undefined) => string; interface ClearButtonProps { onClick?: (e: React.MouseEvent) => void; className?: string; } declare const ClearButton: React$1.ForwardRefExoticComponent>; interface Circle { r: number; } interface Mask { cx: string; cy: string; } interface Svg { transform: string; } interface Lines { opacity: number; } interface Dark { circle: Circle; mask: Mask; svg: Svg; lines: Lines; } interface Circle2 { r: number; } interface Mask2 { cx: string; cy: string; } interface Svg2 { transform: string; } interface Lines2 { opacity: number; } interface Light { circle: Circle2; mask: Mask2; svg: Svg2; lines: Lines2; } interface SpringConfig { mass: number; tension: number; friction: number; } interface AnimationProperties { dark: Dark; light: Light; springConfig: SpringConfig; } type SVGProps = Omit, 'onChange'>; interface DarkModeToggleProps extends SVGProps { onModeChange?: (theme: ElementTheme) => void; theme?: ElementTheme; style?: React.CSSProperties; size?: number | string; animationProperties?: AnimationProperties; moonColor?: string; sunColor?: string; defaultTheme?: ElementTheme; localStorageKey?: string; } declare const DarkModeToggle: FC; declare const Input: React__default.NamedExoticComponent & { as?: React__default.ElementType; endAdornment?: React__default.ReactNode; startAdornment?: React__default.ReactNode; onClear?: () => void; type?: HTMLInputType; cx?: { container?: string; input?: string; }; } & Omit & React__default.RefAttributes>; declare function InputGroup({ children, }: React.ComponentPropsWithoutRef<'span'>): react_jsx_runtime.JSX.Element; declare const cuiInputContainer: (props?: ({ containerHeight?: "fixed" | "auto" | null | undefined; isDateType?: boolean | null | undefined; adornments?: boolean | "both" | "end" | "start" | null | undefined; clearable?: boolean | null | undefined; inputType?: "default" | "color" | "file" | null | undefined; border?: "bottom" | "full" | "none" | null | undefined; background?: boolean | null | undefined; } & class_variance_authority_types.ClassProp) | undefined) => string; type InputContainerStyles = VariantProps; declare const InputContainer: React$1.NamedExoticComponent, "className" | "children" | "style" | "onClick"> & Omit & { endAdornment?: React.ReactNode; startAdornment?: React.ReactNode; onClear?: () => void; disabled?: boolean; readOnly?: boolean; hasValue?: boolean; } & React$1.RefAttributes>; interface EndAdornmentProps { children: ReactNode; className?: string; } declare const EndAdornment: ({ children, className }: EndAdornmentProps) => react_jsx_runtime.JSX.Element; interface StartAdornmentProps { children: ReactNode; className?: string; } declare const StartAdornment: ({ children, className, }: StartAdornmentProps) => react_jsx_runtime.JSX.Element; type InputContainerProps = Pick, 'className' | 'style' | 'children' | 'onClick'> & Omit & { endAdornment?: React.ReactNode; startAdornment?: React.ReactNode; onClear?: () => void; disabled?: boolean; readOnly?: boolean; hasValue?: boolean; }; type InputProps = Omit & { as?: ElementType; endAdornment?: ReactNode; startAdornment?: ReactNode; onClear?: () => void; type?: HTMLInputType; cx?: { container?: string; input?: string; }; } & Omit; type DatePickerProps = Omit & Omit & { onChange?: (date: CalendarDateValue) => void; /** * z-index configuration */ zIndex?: { popover?: number; }; }; declare const DatePicker: FC; interface DescriptionProps extends Omit { children?: ReactNode; className?: string; } declare const Description: FC; declare const DescriptionStyles: (props?: ({} & class_variance_authority_types.ClassProp) | undefined) => string; interface DrawerProps { /** * The content of the drawer. */ children?: ReactNode; /** * The position of the drawer. `right` | `left` | `top` | `bottom` * @default `right`` */ position?: ElementPosition; /** * Whether the drawer is open or not. `true` | `false` * @default `false` */ open?: boolean; /** * Callback for when the drawer is closed. * @default `() => {}` */ onClose?: () => void; /** * * Callback for when the overlay is clicked. */ onOverlayClick?: () => void; /** * Class names API */ cx?: { /** * Set height of the drawer */ height?: string; /** * Set width of the drawer */ width?: string; container?: { /** * Manipulate the outer container element */ outer?: string; /** * Manipulate the inner container element, e.g. add margins and roundness. */ inner?: string; }; }; } declare const Drawer: ({ open, children, onOverlayClick, ...props }: DrawerProps) => react_jsx_runtime.JSX.Element; declare const drawerAnimation: { animation: string[]; enter: { top: string[]; bottom: string[]; right: string[]; left: string[]; }; leave: { top: string[]; bottom: string[]; right: string[]; left: string[]; }; }; declare const drawerChildClasses: string[]; declare const drawerStyles: (props?: ({ position?: "top" | "bottom" | "right" | "left" | null | undefined; defaultVariants?: "position" | null | undefined; } & class_variance_authority_types.ClassProp) | undefined) => string; declare const Icon: ({ icon, title, className, ...props }: IconProps) => react_jsx_runtime.JSX.Element; declare const icons: string[]; type IconType = (typeof icons)[number]; interface IconProps extends Omit, 'className' | 'children'> { /** * Icon name from Material Icons collection */ icon: IconType; /** * Additional class names */ className?: ClassName; /** * Title for the icon */ title?: string; } interface DropdownChevronProps extends Omit { /** * Open state */ open?: boolean; /** * Disabled state */ disabled?: boolean; } declare const DropdownChevron: ({ open, className, disabled, ...props }: DropdownChevronProps) => react_jsx_runtime.JSX.Element; declare const DropdownChevronStyles: (props?: ({} & class_variance_authority_types.ClassProp) | undefined) => string; interface ErrorProps extends Omit { children?: ReactNode; className?: string; } declare const Error: FC; declare const fieldStyles: (props?: ({ layout?: "column" | "row" | null | undefined; } & class_variance_authority_types.ClassProp) | undefined) => string; type FieldLayout = VariantProps['layout']; interface FieldProps extends Omit { children?: ReactNode; className?: string; layout?: FieldLayout; } declare const Field: FC; declare const flexClasses: (props?: ({ column?: boolean | null | undefined; justify?: "end" | "start" | "center" | "between" | "around" | "evenly" | null | undefined; items?: "end" | "start" | "center" | "stretch" | "baseline" | null | undefined; self?: "auto" | "end" | "start" | "center" | "stretch" | "baseline" | null | undefined; wrap?: "none" | "reverse" | "wrap" | null | undefined; content?: "end" | "start" | "center" | "between" | "around" | "evenly" | null | undefined; gapX?: 0 | 1 | 5 | 9 | 2 | 3 | 4 | 8 | 10 | 6 | 32 | 40 | 7 | 12 | 11 | 14 | 16 | 20 | 24 | 28 | 36 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined; gapY?: 0 | 1 | 5 | 9 | 2 | 3 | 4 | 8 | 10 | 6 | 32 | 40 | 7 | 12 | 11 | 14 | 16 | 20 | 24 | 28 | 36 | 44 | 48 | 52 | 56 | 60 | 64 | 72 | 80 | 96 | null | undefined; grow?: boolean | null | undefined; shrink?: boolean | null | undefined; } & class_variance_authority_types.ClassProp) | undefined) => string; type FlexClasses = VariantProps; type FlexProps = FlexClasses & Pick, 'title' | 'className' | 'children' | 'onClick'>; declare const Flex: FC; interface ForProps { each?: T[]; children?: (item: T, index: number) => ReactNode; } declare const For: (props: ForProps) => ReactNode; interface HighlighterProps { searchWords: string[]; textToHighlight: string; } declare const Highlighter: FC; declare const HighlighterStyles: (props?: ({} & class_variance_authority_types.ClassProp) | undefined) => string; declare const _default: (_locked?: boolean, _elementRef?: RefObject) => void; type parserOptions = { raw: boolean; serializer?: (value: T) => string; deserializer?: (value: string) => T; }; declare const useLocalStorage: (key: string, initialValue?: T, options?: parserOptions) => [T | undefined, Dispatch>, () => void]; interface ContentRect { width: number; height: number; top: number; right: number; left: number; bottom: number; } declare const useMeasureDirty: (ref: RefObject) => ContentRect; /** * Use this hook to detect whether dark mode is active based on the presence of the 'dark' class on the body element. * @returns {boolean} - Returns true if dark mode is active, otherwise false. */ declare function useDetectDarkMode(): boolean; interface LabelProps extends Omit { children?: ReactNode; className?: string; required?: boolean; } declare const Label: FC; declare const labelStyles: (props?: ({ required?: boolean | null | undefined; } & class_variance_authority_types.ClassProp) | undefined) => string; type LoaderProps = { /** * Color of the loader */ color?: string | ElementColor; /** * Class names API. Inner will be applied to SVG element, outer to the container. */ cx?: { outer?: string; inner?: string; }; }; declare const Loader: (props: LoaderProps) => react_jsx_runtime.JSX.Element; interface OverlayProps { active?: boolean; onClick?: () => void; className?: string; cursorWait?: boolean; children?: ReactNode; } declare const Overlay: FC; declare const overlay: (props?: ({ cursorWait?: boolean | null | undefined; } & class_variance_authority_types.ClassProp) | undefined) => string; interface LoadingOverlayProps extends Partial> { cx?: { overlay?: string; loader?: LoaderProps['cx']; }; /** * Loader color */ loaderColor?: LoaderProps['color']; } declare const LoadingOverlay: ({ cx, ...props }: LoadingOverlayProps) => react_jsx_runtime.JSX.Element; declare const LoadingOverlayStyles: (props?: ({} & class_variance_authority_types.ClassProp) | undefined) => string; type ModalProps = { className?: string; children: React.ReactNode; } & Omit; type ModalHeaderProps = { className?: string; border?: boolean; } & Omit; type ModalBodyProps = ComponentPropsWithoutRef<'div'>; type ModalFooterProps = { border?: boolean; } & ComponentPropsWithoutRef<'div'>; declare const Modal: FC; declare const ModalHeader: FC; declare const ModalBody: FC; declare const ModalFooter: FC; declare const ModalStyles: (props?: ({} & class_variance_authority_types.ClassProp) | undefined) => string; interface PopoverOptions { initialOpen?: boolean; placement?: Placement; modal?: boolean; open?: boolean; onOpenChange?: (open: boolean) => void; className?: string; } type PopoverContextType = ReturnType | null; declare function usePopover({ initialOpen, placement, modal, open: controlledOpen, onOpenChange: setControlledOpen, }?: PopoverOptions): UseFloatingReturn & UseInteractionsReturn & { open: boolean; setOpen: (open: boolean) => void; modal?: boolean; labelId?: string; descriptionId?: string; setLabelId: (id: string | undefined) => void; setDescriptionId: (id: string | undefined) => void; }; declare const PopoverContext: React$1.Context; declare const usePopoverContext: () => NonNullable; interface PopoverCloseProps extends ButtonHTMLAttributes { } declare const PopoverClose: React$1.ForwardRefExoticComponent>; interface PopoverContentProps extends Omit, 'size'> { zIndex?: number; } declare const PopoverContent: React$1.ForwardRefExoticComponent & React$1.RefAttributes>; interface PopoverDescriptionProps extends Omit, 'size'> { } declare const PopoverDescription: React$1.ForwardRefExoticComponent, "ref"> & React$1.RefAttributes>; interface PopoverHeadingProps extends Omit, 'size'> { } declare const PopoverHeading: React$1.ForwardRefExoticComponent & React$1.RefAttributes>; declare function Popover({ children, modal, className, ...restOptions }: { children: ReactNode; } & PopoverOptions): react_jsx_runtime.JSX.Element; interface PopoverTriggerProps extends Omit, 'size'> { children: ReactNode; asChild?: boolean; } declare const PopoverTrigger: React__default.ForwardRefExoticComponent & React__default.RefAttributes>; interface RadioProps extends Omit { className?: string; } interface RadioGroupProps extends Omit { className?: string; readOnly?: boolean; } declare const Radio: FC; declare const radioGroupStyles: (props?: ({} & class_variance_authority_types.ClassProp) | undefined) => string; declare const radioStyles: (props?: ({} & class_variance_authority_types.ClassProp) | undefined) => string; declare const RadioGroup: FC; type SelectProps = Omit & Omit & Pick & { readOnly?: boolean; value?: T | null; }; type SelectHOC = { open: boolean; disabled: boolean; invalid: boolean; value: T | null; }; interface SelectComponentProps extends SelectProps { /** * Children to render */ children: ReactNode; /** * Callback when clear button is clicked */ onClear?: () => void; } declare const Select: React__default.ForwardRefExoticComponent & React__default.RefAttributes>; interface SelectButtonProps { children?: ReactNode; className?: string; } declare const SelectButton: React$1.ForwardRefExoticComponent>; interface SelectedProps { placeholder?: string; formatter?: (value: any) => string; children?: ReactNode; className?: string; } declare const Selected: React$1.ForwardRefExoticComponent>; interface SelectOptionProps extends Omit { children?: ReactNode; className?: string; multiple?: boolean; truncate?: boolean; showCheckIcon?: boolean; } declare const SelectOption: React$1.ForwardRefExoticComponent>; declare const zIndexStyles: (props?: ({ zIndex?: "dropdown" | "tooltip" | "overlay" | "drawer" | "modal" | "notification" | "default" | null | undefined; } & class_variance_authority_types.ClassProp) | undefined) => string; type ZIndex = VariantProps['zIndex']; interface SelectOptionsProps { children?: ReactNode; className?: string; zIndex?: ZIndex; } declare const SelectOptions: React$1.ForwardRefExoticComponent>; interface SelectContextValue { open: boolean; disabled: boolean; invalid: boolean; value: T; onClear?: () => void; } declare const SelectContext: React$1.Context | null>; declare const useSelectContext: () => SelectContextValue; declare const getDropdownHeight: (maxHeight: DropdownMaxHeight | undefined, availableHeight: number) => string; interface PlaceholderProps { children: React.ReactNode; } declare const Placeholder: FC; declare const dropdownMenuClasses: (props?: ({ open?: boolean | null | undefined; placement?: "top" | "bottom" | null | undefined; } & class_variance_authority_types.ClassProp) | undefined) => string; type DropdownMenudStyles = VariantProps; interface DropdownMenuProps extends React.HTMLProps { open?: boolean; placement?: DropdownMenudStyles['placement']; zIndex?: ZIndex; } declare const DropdownMenu: React$1.ForwardRefExoticComponent & React$1.RefAttributes>; interface ShowProps { when?: boolean; children?: React.ReactNode; fallback?: React.ReactNode; } type ShowFirstMatchingProps = { children: React.ReactElement[] | React.ReactElement; fallback?: React.ReactNode; }; declare const Show: ({ when, children, fallback }: ShowProps) => react_jsx_runtime.JSX.Element; /** * Render a field wrapper for a switch control that arranges control, label, and description using slot-based layout. * * The component forwards all remaining FieldProps to the underlying Headless UI Field, applies a grid-based layout, * and merges the provided `className` with the component's slot-aware layout classes. * * @param className - Optional additional class names applied to the root field container. * @param props - Remaining FieldProps forwarded to the underlying HeadlessField. * * @returns A HeadlessField element configured for a switch control with slot-aware styling. * * @example * * Enable feature * * * * Toggles the feature on or off. * * * @remarks * - Accessibility: Provide a label (slot="label") and, when needed, a description (slot="description") so assistive technologies can associate the switch control correctly. */ declare function SwitchField({ className, ...props }: { className?: string; } & Omit): react_jsx_runtime.JSX.Element; /** * Renders a styled toggle switch control with a visible knob. * * The component forwards all SwitchProps to the underlying Headless UI Switch, merges provided * class names with the component's default styles, and renders a non-interactive span as the * visual knob. * * @param className - Optional additional class names applied to the switch container. * @param props - Remaining SwitchProps forwarded to the underlying Headless UI Switch. * @returns The rendered Headless UI Switch element containing a styled, aria-hidden knob. * * @example * * * @accessibility * The component forwards ARIA attributes and state from Headless UI. Provide `checked` and * `onChange` to expose the switch state to assistive technologies; the inner knob is marked * `aria-hidden="true"` because it is purely decorative. */ declare function Switch({ className, ...props }: { className?: string; } & Omit): react_jsx_runtime.JSX.Element; interface TextareaProps extends Omit { className?: string; resizable?: boolean; } declare const Textarea: React__default.ForwardRefExoticComponent>; declare const TextareaStyles: (props?: ({} & class_variance_authority_types.ClassProp) | undefined) => string; declare const containerClasses: string[]; type GetComponentProps = T extends React.ComponentType | React.Component ? P : never; type HeadlessRadioGroupOptionProps = GetComponentProps; type HeadlessRadioGroupProps = GetComponentProps; type ToggleGroupValue = string; type ToggleGroupOption = HeadlessRadioGroupOptionProps & { label: string | React.ReactNode; value: ToggleGroupValue; disabled?: boolean; }; type ToggleGroupProps = Omit & { options: ToggleGroupOption[]; value?: ToggleGroupValue; onChange?: (value: ToggleGroupValue) => void; }; /** * * * * * * * */ declare const ToggleGroup: ({ className, options, onChange, value, disabled, ...props }: ToggleGroupProps) => react_jsx_runtime.JSX.Element; declare const toggleGroupButtonStyles: (props?: ({ element?: "middle" | "first" | "last" | null | undefined; checked?: boolean | null | undefined; disabled?: boolean | null | undefined; autofocus?: boolean | null | undefined; focus?: boolean | null | undefined; hover?: boolean | null | undefined; } & class_variance_authority_types.ClassProp) | undefined) => string; declare const toggleGroupContainerStyles: (props?: ({ disabled?: boolean | null | undefined; } & class_variance_authority_types.ClassProp) | undefined) => string; interface TooltipProps { className?: string; children?: React.ReactNode; content?: React.ReactNode; position?: ElementPosition; } declare const Tooltip: (props: TooltipProps) => string | number | bigint | boolean | Iterable | Promise> | Iterable | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined; interface TouchTargetProps { children?: ReactNode; disabled?: boolean; } /** * Expand the hit area to at least 44×44px on touch devices */ declare function TouchTarget({ children, disabled }: TouchTargetProps): react_jsx_runtime.JSX.Element; declare function propsGuard>(propsList: string[], props: T): T; declare const getWidthClasses: (classes: string[]) => string[]; /** * * Curried function to merge base element classes with incoming `props.className` * @param classes base element classes * @returns `(className?: string | string[]) => string` * @example * const baseClasses = twix(['text-red-500', 'text-center']) *

*/ declare const twix: (...classes: string[]) => (className?: string | string[]) => string; declare const pick: (obj: T, keys: K[]) => Pick; /** * Checks if a value is present (not null or undefined). * * This utility is specifically designed for form field validation where * falsy values like 0, '', and false are considered valid selections, * but null and undefined represent the absence of a value. * * Unlike a simple truthiness check (!!value), this function treats * all non-nullish values as "having a value", which is crucial for * form controls that can legitimately have falsy but meaningful values. * * @param value - The value to check for presence * @returns true if value is not null and not undefined, false otherwise * * @example * ```typescript * isNonNulish(0) // true - zero is a valid value * isNonNulish('') // true - empty string is a valid value * isNonNulish(false) // true - false is a valid boolean value * isNonNulish(null) // false - null represents no value * isNonNulish(undefined) // false - undefined represents no value * isNonNulish('hello') // true - non-empty string has value * isNonNulish([]) // true - empty array still has value (it's an array) * isNonNulish({}) // true - empty object still has value (it's an object) * ``` */ declare const isNonNulish: (value: T) => value is NonNullable; declare const noop: () => void; declare const passThrough: (...args: any) => any; declare function on(obj: T | null, ...args: Parameters | [string, Function | null, ...any]): void; declare function off(obj: T | null, ...args: Parameters | [string, Function | null, ...any]): void; declare const isBrowser: boolean; declare const isNavigator: boolean; export { AVATAR_VARIANTS, type AnimationProperties, Autocomplete, type AutocompleteFilterOptions, type AutocompleteFilterOptionsConfig, type AutocompleteInnerInputProps, type AutocompleteOptionDefault, type AutocompleteOptionProps, type AutocompleteProps, type AutocompleteRenderOption, type AutocompleteRenderTags, type AutocompleteRenderTagsProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarVariant, type BaseComponentProps, type BreadcrumbLink, Button, type ButtonProps, Calendar, type CalendarDateValue, type CalendarMode, type CalendarProps, type CalendarViewMode, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardStats, CardStyles, CardTitle, Checkbox, type CheckboxProps, Chip, type ChipProps, type Circle, type Circle2, type ClassName, ClearButton, type ClearButtonProps, type CommitInfo, DATE_TYPES, type Dark, DarkModeToggle, type DarkModeToggleProps, DatePicker, type DatePickerProps, type DateRange, type DateType, Description, type DescriptionProps, DescriptionStyles, Drawer, type DrawerProps, DropdownChevron, type DropdownChevronProps, DropdownChevronStyles, type DropdownMaxHeight, DropdownMenu, type DropdownMenuProps, type DropdownOptionType, type DropdownProps, type DropdownValueType, ELEMENT_BASE_VARIANTS, ELEMENT_COLOR, ELEMENT_ORIENTATION, ELEMENT_PLACEMENT_HORIZONTAL, ELEMENT_PLACEMENT_VERTICAL, ELEMENT_POSITION, ELEMENT_STATES, ELEMENT_THEMES, ELEMENT_VARIANTS, type ElementBaseVariant, type ElementColor, type ElementOrientation, type ElementPlacement, type ElementPlacementHorizontal, type ElementPlacementVertical, type ElementPosition, type ElementState, type ElementTheme, type ElementTypography, type ElementVariant, EndAdornment, Error, type ErrorProps, Field, type FieldLayout, type FieldProps, Flex, type FlexClasses, type FlexProps, For, type ForProps, type ForwardedComponent, type FunctionalComponent, type GetComponentProps, type GetItemPropsReturnType, type HTMLInputType, type HTMLProps, type HeadlessRadioGroupOptionProps, type HeadlessRadioGroupProps, Highlighter, type HighlighterProps, HighlighterStyles, INPUT_BACKGROUNDS, INPUT_BORDER, INPUT_CONTAINER_HEIGHTS, INPUT_TYPES, INPUT_VARIANTS, Icon, type IconProps, type IconType, Input, type InputBackground, type InputBorder, type InputClassNamesAPI, InputContainer, type InputContainerHeight, type InputContainerProps, type InputContainerStyles, InputGroup, type InputProps, type InputType, type InputVariant, type JSXNode, Label, type LabelProps, type Light, type Lines, type Lines2, Link, Loader, type LoaderProps, LoadingOverlay, type LoadingOverlayProps, LoadingOverlayStyles, type Mask, type Mask2, Modal, ModalBody, type ModalBodyProps, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, type ModalProps, ModalStyles, type MultipleEllipsisFormatter, type OptionComponentProps, type OptionComponentType, type OptionProps, Overlay, type OverlayProps, Placeholder, Popover, PopoverClose, PopoverContent, PopoverContext, type PopoverContextType, PopoverDescription, type PopoverDescriptionProps, PopoverHeading, type PopoverOptions, PopoverTrigger, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type ReadableError, type SVGProps, Select, SelectButton, SelectContext, type SelectContextValue, type SelectHOC, SelectOption, SelectOptions, type SelectProps, Selected, type SelectedOptionProps, Show, type ShowFirstMatchingProps, type ShowProps, type SpringConfig, StartAdornment, type Svg, type Svg2, Switch, SwitchField, TAILWIND_SHADES, TYPOGRAPHY, type TailwindColorSet, type TailwindShades, Textarea, type TextareaProps, TextareaStyles, ToggleGroup, type ToggleGroupOption, type ToggleGroupProps, type ToggleGroupValue, Tooltip, type TooltipProps, TouchTarget, type UIElement, type WeekDayIndex, type _InputBaseProps, _renderOption, _renderTags, avatarStyles, checkboxStyles, chipClasses, containerClasses, cuiInputContainer, drawerAnimation, drawerChildClasses, drawerStyles, dropdownMenuClasses, fieldStyles, flexClasses, getDropdownHeight, getWidthClasses, icons, isBrowser, isNavigator, isNonNulish, labelStyles, noop, off, on, overlay, passThrough, pick, propsGuard, radioGroupStyles, radioStyles, toggleGroupButtonStyles, toggleGroupContainerStyles, twix, useDetectDarkMode, useLocalStorage, _default as useLockScroll, useMeasureDirty, usePopover, usePopoverContext, useSelectContext };