@northlight/ui 2.22.0 → 2.22.2

package/dist/es/northlight.d.ts

@@ -1,4 +1,4 @@
-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, BoxProps, InputProps, FlexProps, TagProps as TagProps$1, IconProps as IconProps$1, SystemStyleObject, HeadingProps as HeadingProps$1, TextProps, FormLabelProps as FormLabelProps$1, Heading, Text, ModalProps as ModalProps$1, ResponsiveValue, MenuProps as MenuProps$1, NumberInputProps as NumberInputProps$1, PinInputProps as PinInputProps$1, ProgressProps, 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, TooltipProps, FadeProps as FadeProps$1, ScaleFadeProps as ScaleFadeProps$1, SlideProps as SlideProps$1, SlideFadeProps as SlideFadeProps$1, CollapseProps as CollapseProps$1, ModalBodyProps, TabListProps, TabProps, LinkProps, GridProps, GridItemProps, EditableProps as EditableProps$1 } from '@chakra-ui/react';
+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, BoxProps, InputProps, CenterProps, FlexProps, TagProps as TagProps$1, IconProps as IconProps$1, SystemStyleObject, HeadingProps as HeadingProps$1, TextProps, FormLabelProps as FormLabelProps$1, Heading, Text, ModalProps as ModalProps$1, ResponsiveValue, MenuProps as MenuProps$1, NumberInputProps as NumberInputProps$1, PinInputProps as PinInputProps$1, ProgressProps, 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, TooltipProps, FadeProps as FadeProps$1, ScaleFadeProps as ScaleFadeProps$1, SlideProps as SlideProps$1, SlideFadeProps as SlideFadeProps$1, CollapseProps as CollapseProps$1, ModalBodyProps, 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, MenuButton, MenuCommand, MenuDivider, MenuGroup, MenuIcon, MenuItem, MenuItemOption, MenuList, MenuOptionGroup, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, NumberDecrementStepper, NumberIncrementStepper, OrderedList, PinInputField, 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, 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, MultiValue, SingleValue } from 'chakra-react-select';
@@ -328,7 +328,7 @@ interface OrganizationLogoProps extends AvatarProps$1 {
  */
 declare const OrganizationLogo: ({ name, image, variant, ...rest }: OrganizationLogoProps) => JSX.Element;
 
-type AlertVariants = 'success' | 'warning' | 'error' | 'info';
+type AlertVariants = 'success' | 'warning' | 'error' | 'info' | 'danger' | 'ai' | 'default' | 'ghost';
 interface AlertProps extends AlertProps$1 {
     variant?: AlertVariants;
 }
@@ -1025,7 +1025,7 @@ 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 {
+interface IntentButtonProps extends CenterProps {
     icon?: ComponentType<any>;
     timeout?: number;
     onTimeout?: () => void;
@@ -1063,7 +1063,7 @@ interface IntentButtonProps {
  *?)
  *
  */
-declare const IntentButton: ({ icon, timeout, ringColor, onTimeout, tooltipText, "aria-label": ariaLabel, }: IntentButtonProps) => JSX.Element;
+declare const IntentButton: ({ icon, timeout, ringColor, onTimeout, tooltipText, "aria-label": ariaLabel, ...rest }: IntentButtonProps) => JSX.Element;
 
 interface ToolboxProps extends Omit<FlexProps, 'direction'> {
     isResizable?: boolean;
@@ -1310,17 +1310,20 @@ type ChildrenType$1<PropType = any, PropTypeTwo = any> = ((props: PropType, seco
 type MultiItemType<itemKeys extends string | number | symbol> = Record<itemKeys, string[]>;
 interface DroppableProps extends UseDroppableArguments {
     children?: ((props: any) => JSX.Element | JSX.Element[]) | (JSX.Element | JSX.Element[]);
+    'data-testid'?: string;
 }
 interface DraggableProps extends UseDraggableArguments {
     itemLabel?: string;
     children?: ChildrenType$1<ListenersType>;
     disableDrag?: boolean;
+    'data-testid'?: string;
 }
 interface SortableItemProps extends UseSortableArguments {
     children?: ChildrenType$1<ListenersType>;
     itemLabel?: UniqueIdentifier;
     dblClickThreshold?: number;
     disableDrag?: boolean;
+    'data-testid'?: string;
 }
 type MovedItemType<T> = {
     item: T;
@@ -1416,7 +1419,7 @@ interface SortableContainerProps {
  *
  *
  */
-declare const Draggable: ({ itemLabel, children, disableDrag, ...rest }: DraggableProps) => JSX.Element;
+declare const Draggable: ({ itemLabel, children, disableDrag, "data-testid": dataTestId, ...rest }: DraggableProps) => JSX.Element;
 
 /**
  * Wrapper where you can style a container to place draggable elements
@@ -1454,7 +1457,7 @@ declare const Draggable: ({ itemLabel, children, disableDrag, ...rest }: Draggab
  * ?)
  *
  */
-declare const Droppable: ({ children, ...rest }: DroppableProps) => JSX.Element;
+declare const Droppable: ({ children, "data-testid": testId, ...rest }: DroppableProps) => JSX.Element;
 
 /**
  * Wrapper that provides context for sortable elements using DnD-kit
@@ -1477,7 +1480,7 @@ declare const Sortable: (props: SortableContextProps) => JSX.Element;
  * @example
  * (? <SortableItem id="sortable-1"/> ?)
  * */
-declare const SortableItem: ({ itemLabel, dblClickThreshold, children, disableDrag, ...rest }: SortableItemProps) => JSX.Element;
+declare const SortableItem: ({ itemLabel, dblClickThreshold, children, disableDrag, "data-testid": dataTestId, ...rest }: SortableItemProps) => JSX.Element;
 
 /**
  * Default draggable item none other provided in SortableList and MultiSort.
@@ -2097,7 +2100,7 @@ type ModalBooleans = {
     confirmDelete?: boolean;
     canEditFileName?: boolean;
 };
-interface FilePickerProps {
+interface FilePickerProps extends Omit<StackProps, 'onChange'> {
     /** Ex: acceptFormat="'acceptFormat="video/*, .jpg" */
     acceptFormat?: string;
     onChange?: (image: File | null) => void;
@@ -2124,7 +2127,7 @@ interface FilePickerFieldProps extends Omit<FilePickerProps, 'onChange'> {
 interface MultiFilePickerFieldProps extends Omit<FilePickerFieldProps, 'onChange'> {
     onChange?: (File: string[]) => void;
 }
-interface MultiFilePickerProps<T extends FileFormat> extends Omit<FilePickerProps, 'onChange'> {
+interface MultiFilePickerProps<T extends FileFormat> extends Omit<FilePickerProps, 'onChange'>, Omit<StackProps, 'onChange'> {
     onChange?: (files: File[]) => void;
     compression?: CompressionType;
     files?: T[] | null;
@@ -2135,7 +2138,7 @@ interface MultiFilePickerProps<T extends FileFormat> extends Omit<FilePickerProp
     confirmDelete?: boolean;
     variant?: 'ai';
 }
-interface MultiFileUploaderProps<T extends FileFormat> {
+interface MultiFileUploaderProps<T extends FileFormat> extends Omit<BoxProps, 'onChange'> {
     /** Ex: acceptFormat="'acceptFormat="video/*, .jpg" */
     variant?: 'ai';
     acceptFormat?: string;
@@ -2146,7 +2149,7 @@ interface MultiFileUploaderProps<T extends FileFormat> {
     updatePreviewFiles?: (files: any[]) => void;
     onChange?: (files: File[]) => void;
 }
-interface MultiFileListProps<T extends FileFormat> {
+interface MultiFileListProps<T extends FileFormat> extends Omit<StackProps, 'onChange'> {
     files?: T[];
     uploadingFiles?: T[];
     deleteFile?: (file: T | FileFormat) => void;
@@ -2268,7 +2271,7 @@ declare function MultiFileUploader<T extends FileFormat>({ acceptFormat, compres
  *
  *
  */
-declare function MultiFilePicker<T extends FileFormat>({ acceptFormat, compression, onChange, files, uploadingFiles, deleteFile, confirmDelete, maxFileSize, enablePreLoad, enableSmartLoad, editFileOptions, variant, }: MultiFilePickerProps<T>): JSX.Element;
+declare function MultiFilePicker<T extends FileFormat>({ acceptFormat, compression, onChange, files, uploadingFiles, deleteFile, confirmDelete, maxFileSize, enablePreLoad, enableSmartLoad, editFileOptions, variant, ...rest }: MultiFilePickerProps<T>): JSX.Element;
 
 /**
  * Show list of files, their uploading progress as well as options to edit/delete them
@@ -2277,7 +2280,7 @@ declare function MultiFilePicker<T extends FileFormat>({ acceptFormat, compressi
  * @see {@link https://northlight.dev/multi-file-list}
  *
  */
-declare function MultiFileList<T extends FileFormat>({ files, uploadingFiles, onChange, deleteFile, addFile, confirmDelete, editFileOptions, enableSmartLoad, }: MultiFileListProps<T>): JSX.Element;
+declare function MultiFileList<T extends FileFormat>({ files, uploadingFiles, onChange, deleteFile, addFile, confirmDelete, editFileOptions, enableSmartLoad, ...rest }: MultiFileListProps<T>): JSX.Element;
 
 /**
  * The multi file picker component wrapped in a <Field />
@@ -3295,9 +3298,6 @@ interface UseToastOptions extends UseToastOptions$1 {
     variant?: AlertVariants;
     title?: string;
     description?: string;
-    /** if set to true and if there is already another toast visible,
-     *  it will update the information on the current visible toast rather
-     *  than displaying a new one on top of the previous one */
     replacePreviousToast?: boolean;
 }
 
@@ -3310,10 +3310,12 @@ interface UseToastOptions extends UseToastOptions$1 {
  * (?
  *
         <HStack spacing={ 4 }>
+          <Toast variant="default" title="default" />
           <Toast variant="success" title="success" />
           <Toast variant="warning" title="warning" />
-          <Toast variant="info" title="info" />
           <Toast variant="error" title="error" />
+          <Toast variant="info" title="info" />
+          <Toast variant="ai" title="mtGPT" />
         </HStack>
  * ?)
  *
@@ -3340,60 +3342,137 @@ declare const Toast: ({ variant, title, description, onClose, ...rest }: ToastPr
  */
 declare const useToast: (defaultOpts?: UseToastOptions) => (opts?: UseToastOptions) => void;
 
+type TooltipVariants = 'success' | 'warning' | 'error' | 'info' | 'danger' | 'ai' | 'default' | 'ghost';
+interface OurTooltipProps extends TooltipProps {
+    variant?: TooltipVariants;
+    description?: string;
+    hasIcon?: boolean;
+}
+
 /**
+ * A tooltip is a brief, informative message that appears when a user interacts with an element.
  * @see {@link https://northlight.dev/reference/tooltip}
  *
  * @example
  * (?
- * <Tooltip label="Secret message">
- * <Badge>Hover over me</Badge>
- * </Tooltip>
+ * <HStack>
+ *    <Tooltip
+ *      description="Here’s a regular tooltip with some with icon
+ *      inside of it that’s supposed to be substantially large.">
+ *      <Badge>ICON</Badge>
+ *    </Tooltip>
+ *    <Tooltip
+ *       hasIcon={ false }
+ *       description="Here’s a regular tooltip with some text without icon
+ *      inside of it that’s supposed to be substantially large."
+ *    >
+ *      <Badge>NOICON</Badge>
+ *    </Tooltip>
+ * </HStack>
  * ?)
  *
- * @example (Example)
- * You can render a custom component
- * (?
- * +
- * const TooltipContent = (
- * <Box>
- * <Label size="sm">Text</Label>
- * <P sx={{color: 'text.inverted'}}>Content</P>
- * </Box>
- * )
- *
- * const ExampleTooltip = () => {
- * return (
- * <Tooltip label={TooltipContent}>
- * <Badge>Hover here</Badge>
- * </Tooltip>
- * )}
- *
- * render(<ExampleTooltip />)
- * ?)
  *
- * @example (Example)
- * Try out a variant, success, info, warning, danger, ghost
+ * @example
  * (?
  * <HStack>
- * <Tooltip label="Secret message" variant="success">
- * <Badge colorScheme="green">Success</Badge>
- * </Tooltip>
- * <Tooltip label="Secret message" variant="info">
- * <Badge colorScheme="blue">Info</Badge>
- * </Tooltip>
- * <Tooltip label="Secret message" variant="warning">
- * <Badge colorScheme="yellow">Warning</Badge>
- * </Tooltip>
- * <Tooltip label="Secret message" variant="danger">
- * <Badge colorScheme="red">Danger</Badge>
- * </Tooltip>
- * <Tooltip label="Secret message" variant="ghost">
- * <Badge>Ghost</Badge>
- * </Tooltip>
+ *     <VStack>
+ *        <Tooltip
+ *          variant="success"
+ *          description="This is a successful message"
+ *          >
+ *          <Badge colorScheme="green">Success</Badge>
+ *        </Tooltip>
+ *        <Tooltip
+ *          variant="success"
+ *          title="Please check fields"
+ *          description="This is a successful message with a title and an icon
+ *          that’s supposed to be substantially large."
+ *          >
+ *          <Badge colorScheme="green">Success</Badge>
+ *          </Tooltip>
+ *     </VStack>
+ *     <VStack>
+ *        <Tooltip
+ *          variant="info"
+ *          description="This is an informative text"
+ *          >
+ *          <Badge colorScheme="blue">Info</Badge>
+ *        </Tooltip>
+ *        <Tooltip
+ *          variant="info"
+ *          title="Please check fields"
+ *          description="This is an informative text with a title and an icon
+ *          that’s supposed to be substantially large."
+ *          >
+ *        <Badge colorScheme="blue">Info</Badge>
+ *        </Tooltip>
+ *     </VStack>
+ *     <VStack>
+ *        <Tooltip
+ *          variant="warning"
+ *          description="This is a warning"
+ *          >
+ *        <Badge colorScheme="yellow">Warning</Badge>
+ *        </Tooltip>
+ *        <Tooltip
+ *          variant="warning"
+ *          title="Please check fields"
+ *          description="This is a warning with a title and an icon
+ *          that’s supposed to be substantially large."
+ *          >
+ *          <Badge colorScheme="yellow">Warning</Badge>
+ *        </Tooltip>
+ *      </VStack>
+ *      <VStack>
+ *        <Tooltip
+ *          variant="danger"
+ *          description="This is an error message"
+ *          >
+ *        <Badge colorScheme="red">Error</Badge>
+ *        </Tooltip>
+ *        <Tooltip
+ *          variant="danger"
+ *          title="Please check fields"
+ *          description="This is an error message with a title and an icon
+ *          that’s supposed to be substantially large."
+ *          >
+ *          <Badge colorScheme="red">Error</Badge>
+ *        </Tooltip>
+ *      </VStack>
+ *      <VStack>
+ *        <Tooltip
+ *          variant="ai"
+ *          description="This is an AI message">
+ *        <Badge colorScheme="teal" variant="subtle">AI</Badge>
+ *        </Tooltip>
+ *        <Tooltip
+ *          variant="ai"
+ *          title="Please check fields"
+ *          description="This is an AI message with a title and an icon
+ *          that’s supposed to be substantially large."
+ *          >
+ *          <Badge colorScheme="teal" variant="subtle">AI</Badge>
+ *        </Tooltip>
+ *      </VStack>
+ *      <VStack>
+ *        <Tooltip
+ *          variant="ghost"
+ *          description="This is an clean message">
+ *        <Badge>Ghost</Badge>
+ *        </Tooltip>
+ *        <Tooltip
+ *          variant="ghost"
+ *          title="Please check fields"
+ *          description="This is an clean message with a title and an icon
+ *          that’s supposed to be substantially large."
+ *          >
+ *          <Badge>Ghost</Badge>
+ *        </Tooltip>
+ *      </VStack>
  * </HStack>
  * ?)
  */
-declare const Tooltip: ({ hasArrow, ...rest }: TooltipProps) => JSX.Element;
+declare const Tooltip: React__default.FC<OurTooltipProps>;
 
 type DurationType = number | null;
 type OffsetType = number | string;
@@ -3549,7 +3628,7 @@ declare const SlideFade: ({ children, enterDuration, exitDuration, duration, in:
  */
 declare const Collapse: ({ children, enterDuration, exitDuration, duration, in: show, disableFocus, hideDisplay, enterDelay, exitDelay, onTransitionComplete, ...rest }: CollapseProps) => JSX.Element;
 
-interface StatusPinProps {
+interface StatusPinProps extends BoxProps {
     size?: PinSize;
     variant: PinVariant;
 }
@@ -3580,10 +3659,10 @@ interface StatusPinProps {
  * ?)
  *
  */
-declare const StatusPin: ({ size, variant }: StatusPinProps) => JSX.Element;
+declare const StatusPin: ({ size, variant, ...rest }: StatusPinProps) => JSX.Element;
 
 type BlockVariant = 'working' | 'pending' | 'approved' | 'rejected';
-interface StatusBlockProps {
+interface StatusBlockProps extends Omit<TagProps$1, 'bgColor'> {
     variant: BlockVariant;
 }
 type BlockVariantColorTuple = [`${Color}.${ColorGrade}`, `${Color}.${ColorGrade}`];
@@ -3595,7 +3674,7 @@ declare const statusIconMap: Record<BlockVariant, any>;
  * @example
  * (? <StatusBlock variant="approved" /> ?)
  */
-declare const StatusBlock: ({ variant }: StatusBlockProps) => JSX.Element;
+declare const StatusBlock: ({ variant, ...rest }: StatusBlockProps) => JSX.Element;
 
 interface AsyncErrorProps extends AlertProps {
     message?: string;
@@ -3893,7 +3972,7 @@ interface SplitPaneProps extends GridProps {
  * @see {@link https://northlight.dev/reference/split-pane}
  *
  */
-declare const SplitPane: ({ children, initialSplit, isOpen, minLeftWidth, minRightWidth, }: SplitPaneProps) => JSX.Element;
+declare const SplitPane: ({ children, initialSplit, isOpen, minLeftWidth, minRightWidth, ...rest }: SplitPaneProps) => JSX.Element;
 
 /**
  *  Wrapper around child of split pane