@northlight/ui 2.20.1 → 2.22.0

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, 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, 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';
@@ -420,23 +420,24 @@ declare const AvatarGroup: ({ children, max, spacing, ...rest }: AvatarGroupProp
  *
  * @example
  * (?
- * <Stack>
-    <HStack spacing={ 4 }>
-      <Badge>Default badge</Badge>
-      <Badge variant="outline">Outline badge</Badge>
-      <Badge variant="subtle">Subtle badge</Badge>
-    </HStack>
-    <HStack spacing={ 4 } mt={ 4 }>
-      <Badge variant="solid" colorScheme="mediatoolBlue">Solid badge</Badge>
-      <Badge variant="outline" colorScheme="mediatoolBlue">Outline badge</Badge>
-      <Badge variant="subtle" colorScheme="mediatoolBlue">Subtle badge</Badge>
-    </HStack>
-    <HStack spacing={ 4 } mt={ 4 }>
-      <Badge variant="solid" colorScheme="red">Solid badge</Badge>
-      <Badge variant="outline" colorScheme="red">Outline badge</Badge>
-      <Badge variant="subtle" colorScheme="red">Subtle badge</Badge>
-    </HStack>
-  </Stack>
+ * +
+ * const colors = ["gray", "mediatoolBlue", "blue", "red", "green",
+ * "orange", "yellow", "teal", "purple", "pink"]
+ * const variants = ["solid", "outline", "subtle"]
+ * const Example = () => {
+ *     return <Stack>
+ *         { colors.map((color) => (
+ *         <HStack spacing={ 4 }>
+ *          {
+ *              variants.map((variant) => (
+ *                    <Badge colorScheme={color} variant={variant}>{variant} Badge</Badge>
+ *              ))
+ *          }
+ *         </HStack>
+ *         ))}
+ *     </Stack>
+ * }
+ * render(<Example/>)
  * ?)
  */
 declare const Badge: (props: BadgeProps & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
@@ -2752,7 +2753,7 @@ declare const PinInput: ({ variant, hidden, children, ...rest }: PinInputProps)
 
 declare const Popover: (props: PopoverProps) => JSX.Element;
 
-interface ProgressBarProps extends StackProps {
+interface LoadingBarProps extends StackProps {
     loaded: number;
     /** Whether to remove the progress bar from the DOM tree once finnished loading */
     hideDisplay?: boolean;
@@ -2760,7 +2761,7 @@ interface ProgressBarProps extends StackProps {
 }
 
 /**
- * @see {@link https:/northlight/reference/progress-bar}
+ * @see {@link https:/northlight/reference/loading-bar}
  *
  * @example
  * (?
@@ -2780,7 +2781,7 @@ interface ProgressBarProps extends StackProps {
   }
   return (
     <Stack>
-    <ProgressBar loaded={ progress } hideDisplay={true}/>
+    <LoadingBar loaded={ progress } hideDisplay={true}/>
     <Button onClick={ handleClick }>Start Loading</Button>
     </Stack>
   )
@@ -2788,7 +2789,20 @@ interface ProgressBarProps extends StackProps {
  * ?)
  *
  */
-declare const ProgressBar: ({ loaded, onLoadEnd, hideDisplay, ...rest }: ProgressBarProps) => JSX.Element;
+declare const LoadingBar: ({ loaded, onLoadEnd, hideDisplay, ...rest }: LoadingBarProps) => JSX.Element;
+
+interface ProgressBarProps extends ProgressProps {
+    animationSlideTimeMs?: number;
+}
+/**
+ * @see {@link https:/northlight/reference/progress-bar}
+ *
+ * @example
+ * (?
+ * <ProgressBar value={40} />
+ * ?)
+ */
+declare const ProgressBar: (props: ProgressBarProps & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
 type RadioProps = RadioProps$1 & {
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
@@ -3022,22 +3036,74 @@ interface TagGroupProps extends StackProps {
 }
 
 /**
+ * Tag component is used for items that need to be labeled,
+ * categorized, or organized using keywords that describe them.
  * @see TagGroup
  * @see {@link https://northlight.dev/reference/tag}
  *
  * @example
- * (? <Tag>Brand 1</Tag> ?)
+ * (?
+ * <Tag>Hello</Tag>
+ * ?)
  *
  * @example
  * (?
- *   <Tag>
-    <TagLeftIcon>
-      <Icon as={ StackSolid } />
-    </TagLeftIcon>
-    <TagLabel>Left Icon</TagLabel>
-  </Tag>
+ * +
+ * const colors = ["mediatoolBlue", "blue", "gray", "red", "green",
+ * "orange", "yellow", "teal", "purple", "pink"]
+ * const variants = ["solid", "subtle"]
+ * const Example = () =>  {
+ *    return <Stack>
+ *        { colors.map((color) => (
+ *    <HStack spacing={ 4 }>
+ *        {
+ *      variants.map((variant) => (
+ *      <HStack spacing={ 4 }>
+ *                 <Tag size="sm" variant={variant} colorScheme={color}>
+ *                    <TagLeftIcon size="xs">
+*                       <Icon as={ MediatoolLogoDuo } />
+ *                    </TagLeftIcon>
+ *                    <TagLabel>
+ *                      Hello
+ *                    </TagLabel>
+ *                    <TagRightIcon size="xs">
+ *                      <Icon as={ MediatoolLogoDuo } />
+ *                    </TagRightIcon>
+ *                  </Tag>
+ *                  <Tag size="md" variant={variant} colorScheme={color}>
+ *                    <TagLeftIcon size="md">
+ *                       <Icon as={ MediatoolLogoDuo } />
+ *                    </TagLeftIcon>
+ *                    <TagLabel>
+ *                      Hello
+ *                    </TagLabel>
+ *                    <TagRightIcon size="md">
+ *                      <Icon as={ MediatoolLogoDuo } />
+ *                    </TagRightIcon>
+ *                  </Tag>
+ *                  <Tag size="lg" variant={variant} colorScheme={color}>
+ *                    <TagLeftIcon size="lg">
+ *                       <Icon as={ MediatoolLogoDuo } />
+ *                    </TagLeftIcon>
+ *                    <TagLabel>
+ *                      Hello
+ *                    </TagLabel>
+ *                    <TagRightIcon size="lg">
+ *                      <Icon as={ MediatoolLogoDuo } />
+ *                    </TagRightIcon>
+ *                  </Tag>
+ *         </HStack>
+ *      ))
+ *      }
+ *       </HStack>
+ *    ))
+ *    }
+ *    </Stack>
+ * }
+ *  render(<Example/>)
  * ?)
  *
+ *
 */
 declare const Tag: (props: TagProps & React__default.RefAttributes<HTMLSpanElement>) => React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>> | null;
 
@@ -4029,4 +4095,4 @@ declare const useResizeWidth: ({ stationaryEdge, minWidthPx, maxWidthPx, default
 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, H1, H2, H3, H4, H5, H6, HeadingProps, HeadingType, Icon, IconButton, IconButtonProps, IconProps, InputFieldProps, IntentButton, Label, LabelProps, LabelSizes, LabelType, Lead, ListenersType, MaskedTextInput, MaskedTextInputProps, MediatoolThemeProvider, MediatoolThemeProviderProps, Menu, MenuProps, MenuVariants, Message, Modal, ModalBase, ModalBody, ModalBooleans, ModalProps, ModalSizes, MultiFileList, MultiFileListProps, MultiFilePicker, MultiFilePickerField, MultiFilePickerFieldProps, MultiFilePickerProps, MultiFileUploader, MultiFileUploaderProps, MultiItemType, MultiSort, MultiSortProps, NotificationIconButton, NotificationIconButtonProps, NumVal, NumValType, NumberInput, NumberInputField, NumberInputFieldProps, NumberInputProps, NumberInputSizeProps, NumberInputStepperProps, OffsetType, Option, OrganizationLogo, OrganizationLogoProps, OverflowGroup, OverflowGroupProps, OverflowIndicatorProps, P, PProps, PaneDivider, PaneItem, PinInput, PinInputProps, PinSize, PinSizeTuple, PinVariant, Popover, PresetOptions, ProgressBar, Radio, RadioFieldGroupProps, RadioFieldProps, RadioGroup, RadioGroupField, RadioGroupProps, RadioProps, ResizeHandle, 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, Tooltip, TransitionDirection, UseFormReturn, UseSelectCallbacksProps, UseToastOptions, addAlpha, advancedParseFloat, clamp, createDebounceFunctionInstance, getChildrenWithProps, getContrastColor, getFieldError, getInitials, getMatchingValue, getShades, highlight, luminosity, ring, statusIconMap, theme, tottTheme, trimFormValues, useArrowFocus, useCurrentTheme, useDebounce, useDidUpdateEffect, useLoadingMessage, useOutsideRectClick, useOverflowGroup, useResizeWidth, 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, LoadingBar, MaskedTextInput, MaskedTextInputProps, MediatoolThemeProvider, MediatoolThemeProviderProps, Menu, MenuProps, MenuVariants, Message, Modal, ModalBase, ModalBody, ModalBooleans, ModalProps, ModalSizes, MultiFileList, MultiFileListProps, MultiFilePicker, MultiFilePickerField, MultiFilePickerFieldProps, MultiFilePickerProps, MultiFileUploader, MultiFileUploaderProps, MultiItemType, MultiSort, MultiSortProps, NotificationIconButton, NotificationIconButtonProps, NumVal, NumValType, NumberInput, NumberInputField, NumberInputFieldProps, NumberInputProps, NumberInputSizeProps, NumberInputStepperProps, OffsetType, Option, OrganizationLogo, OrganizationLogoProps, OverflowGroup, OverflowGroupProps, OverflowIndicatorProps, P, PProps, PaneDivider, PaneItem, PinInput, PinInputProps, PinSize, PinSizeTuple, PinVariant, Popover, PresetOptions, ProgressBar, ProgressBarProps, Radio, RadioFieldGroupProps, RadioFieldProps, RadioGroup, RadioGroupField, RadioGroupProps, RadioProps, ResizeHandle, 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, Tooltip, TransitionDirection, UseFormReturn, UseSelectCallbacksProps, UseToastOptions, addAlpha, advancedParseFloat, clamp, createDebounceFunctionInstance, getChildrenWithProps, getContrastColor, getFieldError, getInitials, getMatchingValue, getShades, highlight, luminosity, ring, statusIconMap, theme, tottTheme, trimFormValues, useArrowFocus, useCurrentTheme, useDebounce, useDidUpdateEffect, useLoadingMessage, useOutsideRectClick, useOverflowGroup, useResizeWidth, useScreenSize, useScrollToBottom, useSelectCallbacks, useSetValueRefreshed, useToast };