@redsift/popovers 9.6.0 → 10.0.0-alpha.0

package/CONTRIBUTING.md

@@ -311,7 +311,7 @@ export const StyledBadge = styled.div<StyledBadgeProps>`
     $color
       ? css`
           color: var(--redsift-color-neutral-white);
-          background-color: var(--redsift-color-${$color}-primary);
+          background-color: var(--redsift-color-presentation-color-${$color}-standard);
         `
       : ''}
 `;
@@ -381,7 +381,7 @@ To display a prop table, use the `PropsTable` component as following:
 To display a demo, first create a demo (a simple `tsx` file) in the demo folder (`apps/website/demo/`) inside a subfolder with the name of the component (i.e. `apps/website/demo/button/coloring` for a coloring demo of the `Button` component). Then use the `DemoBlock` as following:
 
 ```ts
-<DemoBlock path="button/coloring" />
+<DemoBlock withThemeSwitcher path="button/coloring" />
 ```
 
 To display simple code, use the `CodeBlock` as following:

package/index.d.ts

@@ -2,10 +2,10 @@ import * as _floating_ui_react from '@floating-ui/react';
 export { FloatingPortal, useMergeRefs } from '@floating-ui/react';
 import React$1, { Dispatch, SetStateAction, ReactNode, ComponentProps } from 'react';
 import * as _redsift_design_system from '@redsift/design-system';
-import { ValueOf, ContainerProps, Comp, HeadingProps, IconProps, StylingProps, SpacingProps, SizingProps, InternalSpacingProps } from '@redsift/design-system';
+import { ValueOf, Theme, ContainerProps, Comp, HeadingProps, IconProps, StylingProps, SpacingProps, SizingProps, InternalSpacingProps } from '@redsift/design-system';
 import * as _floating_ui_core from '@floating-ui/core';
 import * as styled_components from 'styled-components';
-import { ClearWaitingQueueParams } from 'react-toastify';
+import { Theme as Theme$1, ClearWaitingQueueParams } from 'react-toastify';
 
 declare function useDialog({ defaultOpen, hasCloseButton, initialFocus, isOpen: propsIsOpen, onOpen, size, }: Omit<DialogProps, 'children'>): {
     labelId: string | undefined;
@@ -100,6 +100,8 @@ interface DialogProps {
     size?: DialogSize | {
         width: string;
     };
+    /** Theme. */
+    theme?: Theme;
 }
 type StyledDialogProps = DialogProps;
 
@@ -109,6 +111,8 @@ declare const DialogContext: React$1.Context<DialogState>;
  * Component props.
  */
 interface DialogContentActionsProps extends ComponentProps<'div'>, ContainerProps {
+    /** Theme. */
+    theme?: Theme;
 }
 type StyledDialogContentActionsProps = DialogContentActionsProps;
 
@@ -121,6 +125,8 @@ declare const DialogContentActions: Comp<DialogContentActionsProps, HTMLDivEleme
  * Component props.
  */
 interface DialogContentBodyProps extends ComponentProps<'div'>, ContainerProps {
+    /** Theme. */
+    theme?: Theme;
 }
 type StyledDialogContentBodyProps = DialogContentBodyProps & {
     $marginTop: number;
@@ -151,6 +157,8 @@ interface DialogContentHeaderProps extends ComponentProps<'div'> {
     iconProps?: Omit<IconProps, 'ref' | 'icon'>;
     /** Whether the card is loading or not. */
     isLoading?: boolean;
+    /** Theme. */
+    theme?: Theme;
 }
 type StyledDialogContentHeaderProps = DialogContentHeaderProps;
 
@@ -163,9 +171,12 @@ declare const DialogContentHeader: Comp<DialogContentHeaderProps, HTMLDivElement
  * Component props.
  */
 interface DialogContentProps extends ComponentProps<'div'> {
+    /** Theme. */
+    theme?: Theme;
 }
 type StyledDialogContentProps = DialogContentProps & {
     $width: string;
+    $theme: Theme;
 };
 
 declare const sizeToDimension: (size: DialogSize | {
@@ -362,6 +373,8 @@ interface PopoverProps {
     };
     /** Role to apply to the popover. */
     role?: 'dialog' | 'menu' | 'listbox';
+    /** Theme. */
+    theme?: Theme;
 }
 type StyledPopoverProps = PopoverProps;
 
@@ -371,13 +384,19 @@ declare const PopoverContext: React$1.Context<PopoverState>;
  * Component props.
  */
 interface PopoverContentProps extends ComponentProps<'div'>, ContainerProps {
+    /** Theme. */
+    theme?: Theme;
 }
-type StyledPopoverContentProps = PopoverContentProps;
+type StyledPopoverContentProps = PopoverContentProps & {
+    $theme: Theme;
+};
 
 /**
  * Component style.
  */
-declare const StyledPopoverContent: styled_components.StyledComponent<"div", any, PopoverContentProps, never>;
+declare const StyledPopoverContent: styled_components.StyledComponent<"div", any, PopoverContentProps & {
+    $theme: Theme;
+}, never>;
 
 /**
  * The PopoverContent component.
@@ -477,12 +496,15 @@ interface ToastProps extends Omit<ComponentProps<'div'>, 'id' | 'style'>, Spacin
     closeButton?: boolean | ReactNode;
     /** Title. */
     title?: string;
+    /** Theme. */
+    theme?: Theme;
     /** Variant */
     variant?: ToastVariant;
 }
 type StyledToastProps = Omit<ToastProps, 'variant' | 'id'> & {
     $hasTitle: boolean;
     $variant: ToastProps['variant'];
+    $theme: Theme;
 };
 
 /**
@@ -514,6 +536,8 @@ interface ToastContainerProps {
     placement?: ToastPlacement;
     /** Supports right to left content. */
     rtl?: boolean;
+    /** Theme. */
+    theme?: Theme$1;
 }
 type StyledToastContainerProps = ToastContainerProps & {};
 interface ToastOptions {
@@ -656,6 +680,8 @@ interface TooltipProps {
     onOpen?: (open: boolean) => void;
     /** Id to the tooltip content. */
     tooltipId?: string;
+    /** Theme. */
+    theme?: Theme;
 }
 type StyledTooltipProps = TooltipProps;
 
@@ -665,9 +691,12 @@ declare const TooltipContext: React$1.Context<TooltipState>;
  * Component props.
  */
 interface TooltipContentProps extends ComponentProps<'div'>, Omit<ContainerProps, keyof InternalSpacingProps> {
+    /** Theme. */
+    theme?: Theme;
 }
 type StyledTooltipContentProps = TooltipContentProps & {
     $placement: TooltipPlacement;
+    $theme: Theme;
 };
 
 /**