@northlight/ui 2.28.6 → 2.28.8

package/dist/es/northlight.d.ts

@@ -1,5 +1,5 @@
 import { AccordionProps, AccordionButtonProps, AccordionPanelProps, AccordionItemProps, Icon as Icon$1, 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, Mark, 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';
+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, ContainerProps, 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, Mark, 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, CreatableSelectComponent } from 'chakra-react-select';
 export { AsyncCreatableSelect, AsyncSelect, Select as ChakraReactSelect, CreatableSelect, MultiValue, SingleValue, chakraComponents as selectChakraComponents } from 'chakra-react-select';
 import * as React$1 from 'react';
@@ -599,11 +599,12 @@ declare const CheckboxField: (props: CheckboxFieldProps & React__default.RefAttr
 
 type ColorPickerSize = 'sm' | 'md' | 'lg';
 interface ColorPickerProps extends Omit<IconButtonProps$1, 'onChange' | 'value' | 'aria-label' | 'variant'> {
-    onChange?: (value: string) => void;
+    onChange?: (value: string | null) => void;
     /** This are what color options the user can choose */
     colors?: string[];
     /** This are the extended color options  displayed when clicking the down caret */
     expandedColors?: string[];
+    clearable?: boolean;
     value?: string | null;
     size?: ColorPickerSize;
     name?: string;
@@ -652,7 +653,7 @@ type ColorPickerFieldProps = ColorPickerProps & {
  *
  *
  */
-declare const ColorPicker: ({ onChange, colors, expandedColors, value, name, size, popoverProps, ...rest }: ColorPickerProps) => JSX.Element;
+declare const ColorPicker: ({ onChange, clearable, colors, expandedColors, value, name, size, popoverProps, ...rest }: ColorPickerProps) => JSX.Element;
 
 /**
  * The <ColorPicker /> component wrapped in a <Field />

package/dist/es/northlight.js

@@ -2503,6 +2503,7 @@ const ColorPicker$1 = (_a) => {
   var _b = _a, {
     onChange = () => {
     },
+    clearable = false,
     colors = defaultColors,
     expandedColors = paletteColors,
     value = null,
@@ -2511,6 +2512,7 @@ const ColorPicker$1 = (_a) => {
     popoverProps
   } = _b, rest = __objRest$1l(_b, [
     "onChange",
+    "clearable",
     "colors",
     "expandedColors",
     "value",
@@ -2566,6 +2568,10 @@ const ColorPicker$1 = (_a) => {
     setSelectedColor(color);
     onChange(color);
   };
+  const clearSelection = () => {
+    setSelectedColor(null);
+    onChange(null);
+  };
   return /* @__PURE__ */ React.createElement(Box, { "data-testid": "color-picker-test-id" }, /* @__PURE__ */ React.createElement(
     Popover$1,
     __spreadValues$1O({
@@ -2588,9 +2594,23 @@ const ColorPicker$1 = (_a) => {
       PopoverHeader,
       {
         color: "text.default",
-        sx: heading
+        sx: heading,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        width: "full"
       },
-      "Pick a color"
+      "Pick a color",
+      clearable && trigger.color !== "unset" && /* @__PURE__ */ React.createElement(
+        Button$1,
+        {
+          size: "sm",
+          h: "5",
+          onClick: clearSelection,
+          variant: "ghost"
+        },
+        "Clear"
+      )
     ), /* @__PURE__ */ React.createElement(PopoverBody, { p: 0 }, /* @__PURE__ */ React.createElement(Stack, { alignItems: "center", p: 0, spacing: 0 }, /* @__PURE__ */ React.createElement(FocusScope, null, /* @__PURE__ */ React.createElement(
       SimpleGrid,
       {