@northlight/ui 2.28.7 → 2.28.9

package/dist/es/northlight.d.ts

@@ -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

@@ -1776,7 +1776,12 @@ const AvatarGroup = (_a) => {
     "spacing"
   ]);
   const [nbrRemainingAvatars, setNbrRemainingAvatars] = useState(0);
-  return /* @__PURE__ */ React.createElement(HStack, __spreadValues$1_({ bgColor: "background.default" }, rest), /* @__PURE__ */ React.createElement(HStack, { spacing }, /* @__PURE__ */ React.createElement(OverflowGroup, { max, onChange: setNbrRemainingAvatars }, children)), nbrRemainingAvatars > 0 && /* @__PURE__ */ React.createElement(Small$1, { sx: { color: "blue.500" } }, "+", nbrRemainingAvatars));
+  const childrenWithMargin = getChildrenWithProps(
+    children,
+    { ml: spacing },
+    (_child, idx) => idx > 0
+  );
+  return /* @__PURE__ */ React.createElement(HStack, __spreadValues$1_({ bgColor: "background.default" }, rest), /* @__PURE__ */ React.createElement(HStack, { spacing: 0 }, /* @__PURE__ */ React.createElement(OverflowGroup, { max, onChange: setNbrRemainingAvatars }, childrenWithMargin)), nbrRemainingAvatars > 0 && /* @__PURE__ */ React.createElement(Small$1, { sx: { color: "blue.500" } }, "+", nbrRemainingAvatars));
 };
 
 var __defProp$1Z = Object.defineProperty;
@@ -2503,6 +2508,7 @@ const ColorPicker$1 = (_a) => {
   var _b = _a, {
     onChange = () => {
     },
+    clearable = false,
     colors = defaultColors,
     expandedColors = paletteColors,
     value = null,
@@ -2511,6 +2517,7 @@ const ColorPicker$1 = (_a) => {
     popoverProps
   } = _b, rest = __objRest$1l(_b, [
     "onChange",
+    "clearable",
     "colors",
     "expandedColors",
     "value",
@@ -2566,6 +2573,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 +2599,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,
       {