@northlight/ui 2.36.11 → 2.37.0

package/dist/es/northlight.d.ts

@@ -542,7 +542,7 @@ interface BlinkerProps {
  */
 declare const Blinker: ({ color, size, isBlinking, ...rest }: BlinkerProps) => JSX.Element;
 
-type ButtonVariants = 'default' | 'danger' | 'success' | 'brand' | 'brandSubdued' | 'link' | 'ghost' | 'ai' | 'outline' | 'solid';
+type ButtonVariants = 'default' | 'danger' | 'success' | 'brand' | 'brandSubdued' | 'link' | 'ghost' | 'ai' | 'outline' | 'solid' | 'accent' | 'sidebar';
 type ButtonProps = Omit<ButtonProps$1, 'as' | 'size'> & {
     variant?: ButtonVariants;
     size?: 'xs' | 'sm' | 'md' | 'lg';
@@ -590,7 +590,7 @@ type ButtonProps = Omit<ButtonProps$1, 'as' | 'size'> & {
  * @example (Example)
  * (?
  * +
- * const variants = ['link', 'success', 'default', 'danger', 'brand',
+ * const variants = ['link', 'success', 'default', 'danger', 'brand', 'accent',
  *  'ghost', 'ai', 'outline', 'brandSubdued', 'solid']
  *
  * const ExampleButton = () => {
@@ -1005,6 +1005,7 @@ interface DateRangePickerProps extends Omit<AriaDateRangePickerProps<DateValue>,
     fiscalStartDay?: number;
     renderInPortal?: boolean;
     buttonLabel?: string;
+    setIsOpen?: (isOpen: boolean) => void;
 }
 interface DatePickerFieldProps extends Omit<InputProps, 'onChange'>, InputFieldProps {
     name: string;

package/dist/es/northlight.js

@@ -878,6 +878,38 @@ const Button$1 = {
         bg: color.bg.ai.hover,
         color: color.text.inverted
       }
+    }),
+    accent: ({ theme: { colors: color } }) => ({
+      color: color.text.button.accent,
+      bgColor: color.background.button.ghost,
+      _hover: {
+        bg: color.background.button["ghost-active"],
+        color: color.text.button.accent,
+        _disabled: {
+          bgColor: color.background.button.ghost,
+          color: color.text.button.accent
+        }
+      },
+      _active: {
+        bg: color.background.button["ghost-active"],
+        color: color.text.button.accent
+      }
+    }),
+    sidebar: ({ theme: { colors: color } }) => ({
+      color: color.text.button.sidebar,
+      bgColor: color.background.button.sidebar,
+      _hover: {
+        bg: color.background.button["sidebar-hover"],
+        color: color.text.button.sidebar,
+        _disabled: {
+          bgColor: color.background.button.ghost,
+          color: color.text.button.sidebar
+        }
+      },
+      _active: {
+        bg: color.background.button["sidebar-active"],
+        color: color.text.button["sidebar-active"]
+      }
     })
   },
   defaultProps: {
@@ -7859,7 +7891,9 @@ const DateRangePicker = (props) => {
     renderInPortal = false,
     firstDayOfWeek,
     onSave,
-    buttonLabel = "Save"
+    buttonLabel = "Save",
+    setIsOpen = () => {
+    }
   } = props;
   const ref = useRef();
   const { group } = useMultiStyleConfig("DatePicker");
@@ -7878,6 +7912,9 @@ const DateRangePicker = (props) => {
     shouldCloseOnSelect: false,
     hideTimeZone: true
   }));
+  useEffect(() => {
+    setIsOpen(state.isOpen);
+  }, [state.isOpen]);
   const {
     groupProps,
     startFieldProps,