@northlight/ui 2.13.0 → 2.14.0

package/dist/es/northlight.d.ts

@@ -1,13 +1,12 @@
 import { AccordionProps, AccordionButtonProps, AccordionPanelProps, AccordionItemProps, StackDirection, AvatarProps as AvatarProps$1, AlertProps as AlertProps$1, AspectRatioProps, StackProps, BadgeProps, ButtonProps as ButtonProps$1, CheckboxProps as CheckboxProps$1, IconButtonProps as IconButtonProps$1, PopoverProps, InputProps, FlexProps, BoxProps, TagProps as TagProps$1, IconProps as IconProps$1, SystemStyleObject, HeadingProps as HeadingProps$1, TextProps, FormLabelProps as FormLabelProps$1, Heading, Text, ModalProps as ModalProps$1, NumberInputProps as NumberInputProps$1, PinInputProps as PinInputProps$1, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, SpinnerProps as SpinnerProps$1, SwitchProps as SwitchProps$1, TableProps as TableProps$1, TabsProps as TabsProps$1, TabPanelProps as TabPanelProps$1, TextareaProps as TextareaProps$1, UseToastOptions as UseToastOptions$1, FadeProps as FadeProps$1, ScaleFadeProps as ScaleFadeProps$1, SlideProps as SlideProps$1, SlideFadeProps as SlideFadeProps$1, CollapseProps as CollapseProps$1, TabListProps, TabProps, LinkProps, GridProps, GridItemProps, EditableProps as EditableProps$1 } from '@chakra-ui/react';
 export { AbsoluteCenter, AccordionButtonProps, AccordionIcon, AccordionIconProps, AccordionItemProps, AccordionPanelProps, AccordionProps, AlertDescription, AlertDialog, AlertDialogBody, AlertDialogCloseButton, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertIcon, AlertTitle, AspectRatioProps, BadgeProps, Box, BoxProps, BreadcrumbItem as Breadcrumb, BreadcrumbLink, BreadcrumbSeparator, Breadcrumb as Breadcrumbs, ButtonGroup, Card, CardBody, CardFooter, CardHeader, Center, Modal as ChakraModal, CheckboxGroup, Circle, CircularProgress, CircularProgressLabel, CloseButton, Code, Container, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, DrawerHeader, DrawerOverlay, Editable, EditableInput, EditablePreview, Flex, FormControl, FormErrorMessage, FormHelperText, Grid, GridItem, HStack, Heading, Hide, Highlight, Image, Input, InputAddon, InputGroup, InputLeftAddon, InputLeftElement, InputRightAddon, InputRightElement, Kbd, Link, LinkBox, LinkOverlay, List, ListIcon, ListItem, Menu, MenuButton, MenuCommand, MenuDivider, MenuGroup, MenuIcon, MenuItem, MenuItemOption, MenuList, MenuOptionGroup, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, NumberDecrementStepper, NumberIncrementStepper, OrderedList, PinInputField, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, Portal, RangeSlider, RangeSliderFilledTrack, RangeSliderMark, RangeSliderThumb, RangeSliderTrack, Show, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, Slider, SliderFilledTrack, SliderMark, SliderThumb, SliderTrack, Spacer, Stack, StackDivider, StackProps, Stat, StatArrow, StatGroup, StatHelpText, StatLabel, StatNumber, TabIndicator as StepIndicator, TabPanels as StepPanels, Tab, TabIndicator, TabList, TabPanels, TableBodyProps, TableCaption, TableCaptionProps, TableCellProps, TableColumnHeaderProps, TableContainer, TableContainerProps, TableFooterProps, TableHeadProps, TableRowProps, TagCloseButton, TagLabel, TagLeftIcon, TagRightIcon, Tbody, Td, Text, Tfoot, Th, Thead, Tooltip, Tr, UnorderedList, VStack, VisuallyHidden, VisuallyHiddenInput, Wrap, WrapItem, keyframes, useBoolean, useBreakpoint, useBreakpointValue, useClipboard, useControllableProp, useControllableState, useDisclosure, useEditable, useEditableControls, useEditableState, useInterval, useMediaQuery, useMergeRefs, useNumberInput, useOutsideClick, usePrefersReducedMotion, useRadio, useRadioGroup, useTab, useTabs, useTheme, useToken } from '@chakra-ui/react';
 import { Props, GroupBase, MultiValue, SingleValue, ActionMeta, MenuListProps, SelectInstance, ChakraStylesConfig } from 'chakra-react-select';
-export { AsyncCreatableSelect, AsyncSelect, Select as ChakraReactSelect, CreatableSelect } from 'chakra-react-select';
+export { AsyncCreatableSelect, AsyncSelect, Select as ChakraReactSelect, CreatableSelect, MultiValue, SingleValue } from 'chakra-react-select';
 import * as React$1 from 'react';
-import React__default, { ComponentType, Ref, RefObject, ComponentProps, ChangeEvent, InputHTMLAttributes, ReactNode, ReactElement, MutableRefObject, EffectCallback, DependencyList } from 'react';
+import React__default, { ComponentType, Ref, RefObject, ChangeEvent, InputHTMLAttributes, ReactNode, ReactElement, MutableRefObject, EffectCallback, DependencyList } from 'react';
 import * as react_hook_form from 'react-hook-form';
 import { RegisterOptions, FieldValues, UseFormReturn as UseFormReturn$1, SetValueConfig, FieldPath, Control, ControllerRenderProps, UseFormProps, FieldError, Merge, FieldErrorsImpl } from 'react-hook-form';
 export { useController, useFieldArray, useForm, useFormContext, useFormState, useWatch } from 'react-hook-form';
-import * as _chakra_ui_system_dist_system_types from '@chakra-ui/system/dist/system.types';
 import * as _chakra_ui_button_dist_button from '@chakra-ui/button/dist/button';
 import { CheckboxGroupState } from '@react-stately/checkbox';
 import { RadioGroupState } from '@react-stately/radio';
@@ -23,6 +22,7 @@ export * from '@dnd-kit/utilities';
 export { useInterval as dndUseInterval } from '@dnd-kit/utilities';
 export * from '@dnd-kit/modifiers';
 import { VariableSizeListProps, VariableSizeList, VariableSizeGridProps, VariableSizeGrid } from 'react-window';
+import * as _chakra_ui_system_dist_system_types from '@chakra-ui/system/dist/system.types';
 import * as _chakra_ui_layout_dist_stack_stack_utils from '@chakra-ui/layout/dist/stack/stack.utils';
 import * as _chakra_ui_radio_dist_radio_group from '@chakra-ui/radio/dist/radio-group';
 import * as react_select from 'react-select';
@@ -475,13 +475,10 @@ interface BlinkerProps {
 declare const Blinker: ({ color, size, isBlinking, ...rest }: BlinkerProps) => JSX.Element;
 
 type ButtonVariants = 'default' | 'danger' | 'success' | 'brand' | 'brandSubdued' | 'link' | 'ghost';
-type ButtonProps<As extends React.ElementType> = Omit<ButtonProps$1, 'as' | 'size'> & Omit<GenericAsProps<As>, 'size'> & {
+type ButtonProps = Omit<ButtonProps$1, 'as' | 'size'> & {
     variant?: ButtonVariants;
     size?: 'xs' | 'sm' | 'md' | 'lg';
 };
-type GenericAsProps<As extends React.ElementType> = ({
-    as?: As;
-} & ComponentProps<As>);
 
 /**
  * @see {@link https://northlight.dev/reference/button}
@@ -526,11 +523,21 @@ type GenericAsProps<As extends React.ElementType> = ({
  *
  * render(<ExampleButton/>)
  * ?)
+ *
+ * @example (Example)
+ * Use LinkOverlay to turn the button into a link
+ *
+ * (?
+ * <LinkBox>
+  * <LinkOverlay as={NavLink} to="/" />
+  * <Button variant="link">Go to home page</Button>
+  * </LinkBox>
+ * ?)
  */
-declare const Button: <As extends React__default.ElementType<any> = _chakra_ui_system_dist_system_types.ComponentWithAs<"button", _chakra_ui_button_dist_button.ButtonProps>>(props: Omit<_chakra_ui_button_dist_button.ButtonProps, "as" | "size"> & Omit<GenericAsProps<As>, "size"> & {
+declare const Button: (props: Omit<_chakra_ui_button_dist_button.ButtonProps, "as" | "size"> & {
     variant?: ButtonVariants | undefined;
     size?: "sm" | "md" | "lg" | "xs" | undefined;
-} & React__default.RefAttributes<unknown>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
+} & React__default.RefAttributes<HTMLButtonElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 type CheckboxVariants = 'default' | 'rounded';
 interface CheckboxProps extends Omit<CheckboxProps$1, 'value'> {
@@ -1032,6 +1039,45 @@ declare const DatePickerField: (props: DatePickerFieldProps & React__default.Ref
  */
 declare const DateRangePickerField: (props: DateRangePickerFieldProps & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
+interface IntentButtonProps {
+    icon?: ComponentType<any>;
+    timeout?: number;
+    onTimeout?: () => void;
+    tooltipText?: string;
+    'aria-label'?: string;
+}
+
+/**
+ * @see {@link https://northlight.dev/reference/intent-button}
+ *
+ * Hold in to confirm delete
+ *
+ * @example
+ * (?
+ * +
+ *
+ * const Example = () => {
+ * const [isShowing, setIsShowing] = useState(true)
+ *
+ * const handleDelete = () => {
+ * setIsShowing(false)
+ * }
+ *
+ * return (
+ * <>
+ * {isShowing && (
+ * <IntentButton onTimeout={handleDelete} />
+ * )}
+ * </>
+ * )
+ *
+ * }
+ * render(<Example />)
+ *?)
+ *
+ */
+declare const IntentButton: ({ icon, timeout, onTimeout, tooltipText, "aria-label": ariaLabel, }: IntentButtonProps) => JSX.Element;
+
 interface ToolboxProps extends Omit<FlexProps, 'direction'> {
     isResizable?: boolean;
     isOpen: boolean;
@@ -1041,7 +1087,7 @@ interface ToolboxProps extends Omit<FlexProps, 'direction'> {
      *  width, causes layout change. */
     shouldPush?: boolean;
     children: JSX.Element[] | JSX.Element;
-    size?: 'sm' | 'md' | 'lg';
+    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
     onClose: () => void;
     /** if true focuses on the first element in the toolboxcontent. */
     autoFocus?: boolean;
@@ -3770,4 +3816,4 @@ declare const useDidUpdateEffect: (effect: EffectCallback, dependencies: Depende
 declare const theme: Record<string, any>;
 declare const tottTheme: Record<string, any>;
 
-export { Accordion, AccordionButton, AccordionItem, AccordionPanel, Alert, AlertProps, AlertVariants, AspectRatio, AsyncError, AsyncErrorProps, Avatar, AvatarBadgeProps, AvatarGroup, AvatarGroupProps, AvatarProps, Badge, BasicOption, Blinker, BlinkerProps, BlockVariant, BlockVariantColorTuple, Blockquote, BodyType, Button, ButtonProps, ButtonVariants, Capitalized, Carousel, Checkbox, CheckboxField, CheckboxFieldProps, CheckboxProps, CheckboxVariants, ChildrenType, Clickable, ClickableProps, ClipboardInput, ClipboardInputProps, Collapse, CollapseProps, Color, ColorButtonProps, ColorGrade, ColorPicker, ColorPickerField, ColorPickerFieldProps, ColorPickerProps, ColorShades, ColorsExpandButtonProps, ConfirmDeleteModalProps, CurrentTheme, CustomContainerPropsType, CustomElementType, CustomFlipButtonProps, CustomFlipButtonPropsType, CustomTheme, DatePicker, DatePickerField, DatePickerFieldProps, DatePickerProps, DateRange, DateRangePicker, DateRangePickerField, DateRangePickerFieldProps, DateRangePickerProps, DragAndDrop, DragHandle, DragHandleProps, DragItem, DragItemProps, Draggable, DraggableProps, DropZone, DropZoneProps, Droppable, DroppableProps, DurationType, EditableControlsProps, EditableProps, EditableSizes, EditableText, Fade, FadeProps, FastGrid, FastGridProps, FastList, FastListProps, Field, FieldErrorType, FieldProps, FileEditorModalProps, FileFormat, FileIconButtonProps, FileItemProps, FilePicker, FilePickerField, FilePickerFieldProps, FilePickerProps, FileWithSizeAndType, FileWithSrcNameType, FileWithType, FlipButton, FlipButtonGroup, FlipButtonGroupField, FlipButtonGroupFieldProps, FlipButtonGroupProps, FlipButtonProps, Form, FormBody, FormLabel, FormLabelProps, FormProps, FormattedNumberInput, FormattedNumberInputField, FormattedNumberInputFieldProps, FormattedNumberInputPreset, FormattedNumberInputProps, GenericAsProps, H1, H2, H3, H4, H5, H6, HeadingProps, HeadingType, Icon, IconButton, IconButtonProps, IconProps, InputFieldProps, Label, LabelProps, LabelSizes, LabelType, Lead, ListenersType, MaskedTextInput, MaskedTextInputProps, MediatoolThemeProvider, MediatoolThemeProviderProps, Message, Modal, ModalBase, ModalBooleans, ModalProps, ModalSizes, MultiFileList, MultiFileListProps, MultiFilePicker, MultiFilePickerField, MultiFilePickerFieldProps, MultiFilePickerProps, MultiFileUploader, MultiFileUploaderProps, MultiItemType, MultiSort, MultiSortProps, NotificationIconButton, NotificationIconButtonProps, NumberInput, NumberInputField, NumberInputFieldProps, NumberInputProps, NumberInputSizeProps, NumberInputStepperProps, OffsetType, Option, OrganizationLogo, OrganizationLogoProps, OverflowGroup, OverflowGroupProps, OverflowIndicatorProps, P, PProps, PaneDivider, PaneItem, PinInput, PinInputProps, PinSize, PinSizeTuple, PinVariant, PresetOptions, ProgressBar, Radio, RadioFieldGroupProps, RadioFieldProps, RadioGroup, RadioGroupField, RadioGroupProps, RadioProps, ScaleFade, ScaleFadeProps, SearchBar, SearchBarField, SearchBarFieldProps, SearchBarOptionType, SearchBarProps, Select, SelectActionMeta, SelectField, SelectFieldProps, SelectProps, SetValueOptionsType, Slide, SlideFade, SlideFadeProps, SlideProps, Small, Sortable, SortableContainer, SortableContainerProps, SortableItem, SortableItemProps, SortableList, SortableListProps, Spinner, SpinnerProps, SplitPane, SplitPaneProps, StatusBlock, StatusBlockProps, StatusPin, StatusPinProps, Step, StepList, StepListProps, StepPanel, StepPanelProps, StepProps, StepStack, Steps, StepsProps, StylizedType, Switch, SwitchField, SwitchFieldProps, SwitchProps, TabPanel, TabPanelProps, Table, TableProps, Tabs, TabsProps, Tag, TagGroup, TagGroupProps, TagProps, TagsInput, TagsInputProps, TextField, TextFieldProps, TextInputFormatter, TextSizeProps, Textarea, TextareaField, TextareaFieldProps, TextareaProps, Tiny, Toast, ToastProps, Toolbox, ToolboxContent, ToolboxContentProps, ToolboxFooter, ToolboxFooterProps, ToolboxHeader, ToolboxHeaderProps, ToolboxProps, TransitionDirection, UseAdaptiveMenuPlacementProps, UseFormReturn, UseSelectCallbacksProps, UseToastOptions, addAlpha, advancedParseFloat, createDebounceFunctionInstance, getChildrenWithProps, getContrastColor, getFieldError, getInitials, getMatchingValue, getShades, highlight, luminosity, ring, statusIconMap, theme, tottTheme, trimFormValues, useArrowFocus, useCurrentTheme, useDebounce, useDidUpdateEffect, useLoadingMessage, useOutsideRectClick, useOverflowGroup, useScreenSize, useScrollToBottom, useSelectCallbacks, useSetValueRefreshed, useToast };
+export { Accordion, AccordionButton, AccordionItem, AccordionPanel, Alert, AlertProps, AlertVariants, AspectRatio, AsyncError, AsyncErrorProps, Avatar, AvatarBadgeProps, AvatarGroup, AvatarGroupProps, AvatarProps, Badge, BasicOption, Blinker, BlinkerProps, BlockVariant, BlockVariantColorTuple, Blockquote, BodyType, Button, ButtonProps, ButtonVariants, Capitalized, Carousel, Checkbox, CheckboxField, CheckboxFieldProps, CheckboxProps, CheckboxVariants, ChildrenType, Clickable, ClickableProps, ClipboardInput, ClipboardInputProps, Collapse, CollapseProps, Color, ColorButtonProps, ColorGrade, ColorPicker, ColorPickerField, ColorPickerFieldProps, ColorPickerProps, ColorShades, ColorsExpandButtonProps, ConfirmDeleteModalProps, CurrentTheme, CustomContainerPropsType, CustomElementType, CustomFlipButtonProps, CustomFlipButtonPropsType, CustomTheme, DatePicker, DatePickerField, DatePickerFieldProps, DatePickerProps, DateRange, DateRangePicker, DateRangePickerField, DateRangePickerFieldProps, DateRangePickerProps, DragAndDrop, DragHandle, DragHandleProps, DragItem, DragItemProps, Draggable, DraggableProps, DropZone, DropZoneProps, Droppable, DroppableProps, DurationType, EditableControlsProps, EditableProps, EditableSizes, EditableText, Fade, FadeProps, FastGrid, FastGridProps, FastList, FastListProps, Field, FieldErrorType, FieldProps, FileEditorModalProps, FileFormat, FileIconButtonProps, FileItemProps, FilePicker, FilePickerField, FilePickerFieldProps, FilePickerProps, FileWithSizeAndType, FileWithSrcNameType, FileWithType, FlipButton, FlipButtonGroup, FlipButtonGroupField, FlipButtonGroupFieldProps, FlipButtonGroupProps, FlipButtonProps, Form, FormBody, FormLabel, FormLabelProps, FormProps, FormattedNumberInput, FormattedNumberInputField, FormattedNumberInputFieldProps, FormattedNumberInputPreset, FormattedNumberInputProps, H1, H2, H3, H4, H5, H6, HeadingProps, HeadingType, Icon, IconButton, IconButtonProps, IconProps, InputFieldProps, IntentButton, Label, LabelProps, LabelSizes, LabelType, Lead, ListenersType, MaskedTextInput, MaskedTextInputProps, MediatoolThemeProvider, MediatoolThemeProviderProps, Message, Modal, ModalBase, ModalBooleans, ModalProps, ModalSizes, MultiFileList, MultiFileListProps, MultiFilePicker, MultiFilePickerField, MultiFilePickerFieldProps, MultiFilePickerProps, MultiFileUploader, MultiFileUploaderProps, MultiItemType, MultiSort, MultiSortProps, NotificationIconButton, NotificationIconButtonProps, NumberInput, NumberInputField, NumberInputFieldProps, NumberInputProps, NumberInputSizeProps, NumberInputStepperProps, OffsetType, Option, OrganizationLogo, OrganizationLogoProps, OverflowGroup, OverflowGroupProps, OverflowIndicatorProps, P, PProps, PaneDivider, PaneItem, PinInput, PinInputProps, PinSize, PinSizeTuple, PinVariant, PresetOptions, ProgressBar, Radio, RadioFieldGroupProps, RadioFieldProps, RadioGroup, RadioGroupField, RadioGroupProps, RadioProps, ScaleFade, ScaleFadeProps, SearchBar, SearchBarField, SearchBarFieldProps, SearchBarOptionType, SearchBarProps, Select, SelectActionMeta, SelectField, SelectFieldProps, SelectProps, SetValueOptionsType, Slide, SlideFade, SlideFadeProps, SlideProps, Small, Sortable, SortableContainer, SortableContainerProps, SortableItem, SortableItemProps, SortableList, SortableListProps, Spinner, SpinnerProps, SplitPane, SplitPaneProps, StatusBlock, StatusBlockProps, StatusPin, StatusPinProps, Step, StepList, StepListProps, StepPanel, StepPanelProps, StepProps, StepStack, Steps, StepsProps, StylizedType, Switch, SwitchField, SwitchFieldProps, SwitchProps, TabPanel, TabPanelProps, Table, TableProps, Tabs, TabsProps, Tag, TagGroup, TagGroupProps, TagProps, TagsInput, TagsInputProps, TextField, TextFieldProps, TextInputFormatter, TextSizeProps, Textarea, TextareaField, TextareaFieldProps, TextareaProps, Tiny, Toast, ToastProps, Toolbox, ToolboxContent, ToolboxContentProps, ToolboxFooter, ToolboxFooterProps, ToolboxHeader, ToolboxHeaderProps, ToolboxProps, TransitionDirection, UseAdaptiveMenuPlacementProps, UseFormReturn, UseSelectCallbacksProps, UseToastOptions, addAlpha, advancedParseFloat, createDebounceFunctionInstance, getChildrenWithProps, getContrastColor, getFieldError, getInitials, getMatchingValue, getShades, highlight, luminosity, ring, statusIconMap, theme, tottTheme, trimFormValues, useArrowFocus, useCurrentTheme, useDebounce, useDidUpdateEffect, useLoadingMessage, useOutsideRectClick, useOverflowGroup, useScreenSize, useScrollToBottom, useSelectCallbacks, useSetValueRefreshed, useToast };