@spark-ui/components 10.8.2 → 10.9.0

package/dist/drawer/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/drawer/Drawer.tsx","../../src/drawer/DrawerBody.styles.ts","../../src/drawer/DrawerBody.tsx","../../src/drawer/DrawerCloseButton.tsx","../../src/drawer/DrawerClose.tsx","../../src/drawer/DrawerContent.tsx","../../src/drawer/DrawerContent.styles.tsx","../../src/drawer/DrawerDescription.tsx","../../src/drawer/DrawerFooter.tsx","../../src/drawer/DrawerHeader.tsx","../../src/drawer/DrawerOverlay.tsx","../../src/drawer/DrawerPortal.tsx","../../src/drawer/DrawerTitle.tsx","../../src/drawer/DrawerTrigger.tsx","../../src/drawer/index.ts"],"sourcesContent":["import { Dialog as RadixDrawer } from 'radix-ui'\nimport { type ReactElement, ReactNode } from 'react'\n\nexport interface DrawerProps {\n  /**\n   * Children of the component.\n   */\n  children?: RadixDrawer.DialogProps['children']\n  /**\n   * Specifies if the dialog is open or not.\n   */\n  open?: RadixDrawer.DialogProps['open']\n  /**\n   * Default open state.\n   */\n  defaultOpen?: RadixDrawer.DialogProps['defaultOpen']\n  /**\n   * Handler executed on every dialog open state change.\n   */\n  onOpenChange?: RadixDrawer.DialogProps['onOpenChange']\n  /**\n   * Specifies if the dialog is a modal.\n   */\n  modal?: RadixDrawer.DialogProps['modal']\n}\n\nexport interface DialogProps {\n  children?: ReactNode\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?(open: boolean): void\n  modal?: boolean\n}\n\nexport const Drawer = ({ children, ...rest }: DrawerProps): ReactElement => (\n  <RadixDrawer.Root {...rest}>{children}</RadixDrawer.Root>\n)\n\nDrawer.displayName = 'Drawer.Root'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const drawerBodyStyles = cva(\n  ['grow', 'overflow-y-auto', 'outline-hidden', 'focus-visible:u-outline'],\n  {\n    variants: {\n      inset: {\n        true: '',\n        false: 'px-xl py-lg',\n      },\n    },\n    defaultVariants: {\n      inset: false,\n    },\n  }\n)\n\nexport type DrawerBodyStylesProps = VariantProps<typeof drawerBodyStyles>\n","import { type ReactNode, Ref } from 'react'\n\nimport { drawerBodyStyles, type DrawerBodyStylesProps } from './DrawerBody.styles'\n\nexport interface DrawerBodyProps extends DrawerBodyStylesProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const DrawerBody = ({\n  children,\n  inset = false,\n  className,\n  ref,\n  ...rest\n}: DrawerBodyProps) => (\n  <div\n    data-spark-component=\"drawer-body\"\n    ref={ref}\n    className={drawerBodyStyles({ inset, className })}\n    {...rest}\n  >\n    {children}\n  </div>\n)\n\nDrawerBody.displayName = 'Drawer.Body'\n","import { Close as CloseSVG } from '@spark-ui/icons/Close'\nimport { cx } from 'class-variance-authority'\n\nimport { Icon } from '../icon'\nimport { IconButton, type IconButtonProps } from '../icon-button'\nimport { DrawerClose, type DrawerCloseProps } from './DrawerClose'\n\nexport type DrawerCloseButtonProps = DrawerCloseProps &\n  Pick<IconButtonProps, 'size' | 'intent' | 'design' | 'aria-label'>\n\nexport const DrawerCloseButton = ({\n  'aria-label': ariaLabel,\n  className,\n  size = 'md',\n  intent = 'neutral',\n  design = 'ghost',\n  children = <CloseSVG />,\n  ref,\n  ...rest\n}: DrawerCloseButtonProps) => (\n  <DrawerClose\n    data-spark-component=\"drawer-close-button\"\n    ref={ref}\n    className={cx(['absolute', 'top-sm', 'right-xl'], className)}\n    asChild\n    {...rest}\n  >\n    <IconButton intent={intent} size={size} design={design} aria-label={ariaLabel}>\n      <Icon>{children}</Icon>\n    </IconButton>\n  </DrawerClose>\n)\n\nDrawerCloseButton.displayName = 'Drawer.CloseButton'\n","import { Dialog as RadixDrawer } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type DrawerCloseProps = RadixDrawer.DialogCloseProps & {\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const DrawerClose = (props: DrawerCloseProps) => (\n  <RadixDrawer.Close data-spark-component=\"drawer-close\" {...props} />\n)\n\nDrawerClose.displayName = 'Drawer.Close'\n","import { Dialog as RadixDrawer } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { drawerContentStyles, type DrawerContentStylesProps } from './DrawerContent.styles'\n\nexport type DrawerContentProps = RadixDrawer.DialogContentProps &\n  DrawerContentStylesProps & {\n    ref?: Ref<HTMLDivElement>\n  }\n\nexport const DrawerContent = ({\n  className,\n  size = 'md',\n  side = 'right',\n  onInteractOutside,\n  ref,\n  ...rest\n}: DrawerContentProps) => (\n  <RadixDrawer.Content\n    data-spark-component=\"drawer-content\"\n    ref={ref}\n    className={drawerContentStyles({\n      size,\n      side,\n      className,\n    })}\n    onInteractOutside={e => {\n      const isForegroundElement = (e.target as HTMLElement).closest('.z-toast, .z-popover')\n\n      /**\n       * The focus trap of the drawer applies `pointer-events-none` on the body of the page in the background, but\n       * some components with an higher z-index have `pointer-events-auto` applied on them to remain interactive and ignore the focust trap (ex: a Snackbar with actions).\n       *\n       * Clicking on the snackbar will be considered as an \"outside click\" and close the drawer. We want to prevent this.\n       */\n      if (isForegroundElement) {\n        e.preventDefault()\n      }\n\n      onInteractOutside?.(e)\n    }}\n    {...rest}\n  />\n)\n\nDrawerContent.displayName = 'Drawer.Content'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const drawerContentStyles = cva(\n  [\n    ['fixed', 'z-modal', 'flex', 'flex-col'],\n    ['bg-surface', 'shadow-md'],\n  ],\n  {\n    variants: {\n      size: {\n        sm: '',\n        md: '',\n        lg: '',\n        fluid: '',\n        fullscreen: 'h-screen w-screen',\n      },\n      side: {\n        right: [\n          'inset-y-0 right-0',\n          'data-[state=open]:animate-slide-in-right',\n          'data-[state=closed]:animate-slide-out-right',\n        ],\n        left: [\n          'inset-y-0 left-0',\n          'data-[state=open]:animate-slide-in-left',\n          'data-[state=closed]:animate-slide-out-left',\n        ],\n        top: [\n          'top-0 left-0',\n          'w-screen',\n          'data-[state=open]:animate-slide-in-top',\n          'data-[state=closed]:animate-slide-out-top',\n        ],\n        bottom: [\n          'bottom-0 left-0',\n          'w-screen',\n          'data-[state=open]:animate-slide-in-bottom',\n          'data-[state=closed]:animate-slide-out-bottom',\n        ],\n      },\n    },\n    compoundVariants: [\n      {\n        side: ['right', 'left'],\n        size: 'sm',\n        class: ['w-sz-480', 'max-w-full'],\n      },\n      {\n        side: ['right', 'left'],\n        size: 'md',\n        class: ['w-sz-672', 'max-w-full'],\n      },\n      {\n        side: ['right', 'left'],\n        size: 'lg',\n        class: ['w-sz-864', 'max-w-full'],\n      },\n      {\n        side: ['left', 'right'],\n        size: 'fluid',\n        class: ['w-auto', 'max-w-full'],\n      },\n      {\n        side: ['top', 'bottom'],\n        size: 'sm',\n        class: ['h-sz-480', 'max-h-full'],\n      },\n      {\n        side: ['top', 'bottom'],\n        size: 'md',\n        class: ['h-sz-672', 'max-h-full'],\n      },\n      {\n        side: ['top', 'bottom'],\n        size: 'lg',\n        class: ['h-sz-864', 'max-h-full'],\n      },\n      {\n        side: ['top', 'bottom'],\n        size: 'fluid',\n        class: ['h-auto', 'max-h-full'],\n      },\n    ],\n    defaultVariants: {\n      side: 'right',\n      size: 'md',\n    },\n  }\n)\n\nexport type DrawerContentStylesProps = VariantProps<typeof drawerContentStyles>\n","import { Dialog as RadixDrawer } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type DrawerDescriptionProps = RadixDrawer.DialogDescriptionProps & {\n  ref?: Ref<HTMLParagraphElement>\n}\n\nexport const DrawerDescription = (props: DrawerDescriptionProps) => (\n  <RadixDrawer.Description data-spark-component=\"drawer-description\" {...props} />\n)\n\nDrawerDescription.displayName = 'Drawer.Description'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, type ReactElement, Ref } from 'react'\n\nexport type DrawerFooterProps = ComponentPropsWithoutRef<'footer'> & {\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const DrawerFooter = ({ className, ref, ...rest }: DrawerFooterProps): ReactElement => (\n  <footer\n    data-spark-component=\"drawer-footer\"\n    ref={ref}\n    className={cx(['px-xl', 'py-lg'], className)}\n    {...rest}\n  />\n)\n\nDrawerFooter.displayName = 'Drawer.Footer'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface DrawerHeaderProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const DrawerHeader = ({\n  children,\n  className,\n  ref,\n  ...rest\n}: DrawerHeaderProps): ReactElement => (\n  <header\n    data-spark-component=\"drawer-header\"\n    ref={ref}\n    className={cx(['px-xl', 'py-lg'], className)}\n    {...rest}\n  >\n    {children}\n  </header>\n)\n\nDrawerHeader.displayName = 'Dialog.Header'\n","import { cx } from 'class-variance-authority'\nimport { Dialog as RadixDrawer } from 'radix-ui'\nimport { type ReactElement, Ref } from 'react'\n\nexport type DrawerOverlayProps = RadixDrawer.DialogOverlayProps & {\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const DrawerOverlay = ({ className, ref, ...rest }: DrawerOverlayProps): ReactElement => (\n  <RadixDrawer.Overlay\n    data-spark-component=\"drawer-overlay\"\n    ref={ref}\n    className={cx(\n      ['fixed', 'top-0', 'left-0', 'w-screen', 'h-screen', 'z-overlay'],\n      ['bg-overlay/dim-1'],\n      ['data-[state=open]:animate-fade-in'],\n      ['data-[state=closed]:animate-fade-out'],\n      className\n    )}\n    {...rest}\n  />\n)\n\nDrawerOverlay.displayName = 'Drawer.Overlay'\n","import { Dialog as RadixDrawer } from 'radix-ui'\nimport { type ReactElement } from 'react'\n\nexport type DrawerPortalProps = RadixDrawer.DialogPortalProps\n\nexport const DrawerPortal = ({ children, ...rest }: DrawerPortalProps): ReactElement => (\n  <RadixDrawer.Portal {...rest}>{children}</RadixDrawer.Portal>\n)\n\nDrawerPortal.displayName = 'Drawer.Portal'\n","import { cx } from 'class-variance-authority'\nimport { Dialog as RadixDrawer } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type DrawerTitleProps = RadixDrawer.DialogTitleProps & {\n  ref?: Ref<HTMLHeadingElement>\n}\n\nexport const DrawerTitle = ({ className, ref, ...others }: DrawerTitleProps) => (\n  <RadixDrawer.Title\n    data-spark-component=\"drawer-title\"\n    ref={ref}\n    className={cx('text-headline-2 text-on-surface', className)}\n    {...others}\n  />\n)\n\nDrawerTitle.displayName = 'Drawer.Title'\n","import { Dialog as RadixDrawer } from 'radix-ui'\nimport { type ReactElement, Ref } from 'react'\n\nexport interface DrawerTriggerProps extends RadixDrawer.DialogTriggerProps {\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const DrawerTrigger = (props: DrawerTriggerProps): ReactElement => (\n  <RadixDrawer.Trigger data-spark-component=\"drawer-trigger\" {...props} />\n)\n\nDrawerTrigger.displayName = 'Drawer.Trigger'\n","import { Drawer as Root } from './Drawer'\nimport { DrawerBody } from './DrawerBody'\nimport { DrawerCloseButton } from './DrawerCloseButton'\nimport { DrawerContent } from './DrawerContent'\nimport { DrawerDescription } from './DrawerDescription' // aria-describedby\nimport { DrawerFooter } from './DrawerFooter'\nimport { DrawerHeader } from './DrawerHeader'\nimport { DrawerOverlay } from './DrawerOverlay'\nimport { DrawerPortal } from './DrawerPortal'\nimport { DrawerTitle } from './DrawerTitle'\nimport { DrawerTrigger } from './DrawerTrigger'\n\nexport const Drawer: typeof Root & {\n  Trigger: typeof DrawerTrigger\n  Portal: typeof DrawerPortal\n  Overlay: typeof DrawerOverlay\n  Content: typeof DrawerContent\n  Header: typeof DrawerHeader\n  Body: typeof DrawerBody\n  Footer: typeof DrawerFooter\n  CloseButton: typeof DrawerCloseButton\n  Title: typeof DrawerTitle\n  Description: typeof DrawerDescription\n} = Object.assign(Root, {\n  Trigger: DrawerTrigger,\n  Portal: DrawerPortal,\n  Overlay: DrawerOverlay,\n  Content: DrawerContent,\n  Header: DrawerHeader,\n  Body: DrawerBody,\n  Footer: DrawerFooter,\n  CloseButton: DrawerCloseButton,\n  Title: DrawerTitle,\n  Description: DrawerDescription,\n})\n\nDrawer.displayName = 'Drawer'\nDrawerTrigger.displayName = 'Drawer.Trigger'\nDrawerPortal.displayName = 'Drawer.Portal'\nDrawerOverlay.displayName = 'Drawer.Overlay'\nDrawerContent.displayName = 'Drawer.Content'\nDrawerHeader.displayName = 'Drawer.Header'\nDrawerBody.displayName = 'Drawer.Body'\nDrawerFooter.displayName = 'Drawer.Footer'\nDrawerCloseButton.displayName = 'Drawer.CloseButton'\nDrawerTitle.displayName = 'Drawer.Title'\nDrawerDescription.displayName = 'Drawer.Description'\n\nexport { type DrawerProps } from './Drawer'\nexport { type DrawerContentProps } from './DrawerContent'\nexport { type DrawerHeaderProps } from './DrawerHeader'\nexport { type DrawerBodyProps } from './DrawerBody'\nexport { type DrawerFooterProps } from './DrawerFooter'\nexport { type DrawerTriggerProps } from './DrawerTrigger'\nexport { type DrawerOverlayProps } from './DrawerOverlay'\nexport { type DrawerPortalProps } from './DrawerPortal'\nexport { type DrawerTitleProps } from './DrawerTitle'\nexport { type DrawerDescriptionProps } from './DrawerDescription'\nexport { type DrawerCloseProps } from './DrawerClose'\nexport { type DrawerCloseButtonProps } from './DrawerCloseButton'\n"],"mappings":"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","names":["jsx","RadixDrawer","jsx","jsx","RadixDrawer","cva","jsx","RadixDrawer","RadixDrawer","jsx","cx","jsx","cx","jsx","cx","RadixDrawer","jsx","RadixDrawer","jsx","cx","RadixDrawer","jsx","RadixDrawer","jsx","Drawer"]}
+{"version":3,"sources":["../../src/drawer/Drawer.tsx","../../src/drawer/DrawerContext.tsx","../../src/drawer/DrawerBody.tsx","../../src/drawer/DrawerBody.styles.ts","../../src/drawer/DrawerCloseButton.tsx","../../src/drawer/DrawerClose.tsx","../../src/drawer/DrawerContent.tsx","../../src/drawer/DrawerContent.styles.tsx","../../src/drawer/DrawerDescription.tsx","../../src/drawer/DrawerFooter.tsx","../../src/drawer/DrawerHeader.tsx","../../src/drawer/DrawerOverlay.tsx","../../src/drawer/DrawerPortal.tsx","../../src/drawer/DrawerTitle.tsx","../../src/drawer/DrawerTrigger.tsx","../../src/drawer/index.ts"],"sourcesContent":["import { Dialog as RadixDrawer } from 'radix-ui'\nimport { type ReactElement, ReactNode } from 'react'\n\nimport { DrawerProvider } from './DrawerContext'\n\nexport interface DrawerProps {\n  /**\n   * Children of the component.\n   */\n  children?: RadixDrawer.DialogProps['children']\n  /**\n   * Specifies if the dialog is open or not.\n   */\n  open?: RadixDrawer.DialogProps['open']\n  /**\n   * Default open state.\n   */\n  defaultOpen?: RadixDrawer.DialogProps['defaultOpen']\n  /**\n   * Handler executed on every dialog open state change.\n   */\n  onOpenChange?: RadixDrawer.DialogProps['onOpenChange']\n  /**\n   * Specifies if the dialog is a modal.\n   */\n  modal?: RadixDrawer.DialogProps['modal']\n  /**\n   * Specifies if the drawer should have a fade animation on its body (in case it is scrollable).\n   */\n  withFade?: boolean\n}\n\nexport interface DialogProps {\n  children?: ReactNode\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?(open: boolean): void\n  modal?: boolean\n}\n\nexport const Drawer = ({ children, withFade = false, ...rest }: DrawerProps): ReactElement => (\n  <DrawerProvider withFade={withFade}>\n    <RadixDrawer.Root {...rest}>{children}</RadixDrawer.Root>\n  </DrawerProvider>\n)\n\nDrawer.displayName = 'Drawer.Root'\n","import { createContext, type ReactNode, useContext } from 'react'\n\nexport interface DrawerContextState {\n  withFade: boolean\n}\n\nconst DrawerContext = createContext<DrawerContextState | null>(null)\n\nexport const DrawerProvider = ({\n  children: childrenProp,\n  withFade = false,\n}: {\n  children: ReactNode\n  withFade?: boolean\n}) => {\n  return (\n    <DrawerContext.Provider\n      value={{\n        withFade,\n      }}\n    >\n      {childrenProp}\n    </DrawerContext.Provider>\n  )\n}\n\nexport const useDrawer = () => {\n  const context = useContext(DrawerContext)\n\n  if (!context) {\n    throw Error('useDrawer must be used within a Drawer provider')\n  }\n\n  return context\n}\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { useScrollOverflow } from '@spark-ui/hooks/use-scroll-overflow'\nimport { type ReactNode, Ref, useRef } from 'react'\n\nimport { drawerBodyStyles, type DrawerBodyStylesProps } from './DrawerBody.styles'\nimport { useDrawer } from './DrawerContext'\n\nexport interface DrawerBodyProps extends DrawerBodyStylesProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const DrawerBody = ({\n  children,\n  inset = false,\n  className,\n  ref: forwardedRef,\n  ...rest\n}: DrawerBodyProps) => {\n  const scrollAreaRef = useRef<HTMLDivElement>(null)\n  const ref = useMergeRefs(forwardedRef, scrollAreaRef)\n\n  const { withFade } = useDrawer()\n\n  const overflow = useScrollOverflow(scrollAreaRef)\n\n  return (\n    <div\n      data-spark-component=\"drawer-body\"\n      ref={ref}\n      className={drawerBodyStyles({ inset, className })}\n      style={{\n        ...(withFade && {\n          maskImage:\n            'linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))',\n          maskSize: `100% calc(100% + ${overflow.top ? '0px' : '44px'} + ${overflow.bottom ? '0px' : '44px'})`,\n          maskPosition: `0 ${overflow.top ? '0px' : '-44px'}`,\n        }),\n      }}\n      {...rest}\n    >\n      {children}\n    </div>\n  )\n}\n\nDrawerBody.displayName = 'Drawer.Body'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const drawerBodyStyles = cva(\n  ['grow', 'overflow-y-auto', 'outline-hidden', 'focus-visible:u-outline'],\n  {\n    variants: {\n      inset: {\n        true: '',\n        false: 'px-xl py-lg',\n      },\n    },\n    defaultVariants: {\n      inset: false,\n    },\n  }\n)\n\nexport type DrawerBodyStylesProps = VariantProps<typeof drawerBodyStyles>\n","import { Close as CloseSVG } from '@spark-ui/icons/Close'\nimport { cx } from 'class-variance-authority'\n\nimport { Icon } from '../icon'\nimport { IconButton, type IconButtonProps } from '../icon-button'\nimport { DrawerClose, type DrawerCloseProps } from './DrawerClose'\n\nexport type DrawerCloseButtonProps = DrawerCloseProps &\n  Pick<IconButtonProps, 'size' | 'intent' | 'design' | 'aria-label'>\n\nexport const DrawerCloseButton = ({\n  'aria-label': ariaLabel,\n  className,\n  size = 'md',\n  intent = 'neutral',\n  design = 'ghost',\n  children = <CloseSVG />,\n  ref,\n  ...rest\n}: DrawerCloseButtonProps) => (\n  <DrawerClose\n    data-spark-component=\"drawer-close-button\"\n    ref={ref}\n    className={cx(['absolute', 'top-sm', 'right-xl'], className)}\n    asChild\n    {...rest}\n  >\n    <IconButton intent={intent} size={size} design={design} aria-label={ariaLabel}>\n      <Icon>{children}</Icon>\n    </IconButton>\n  </DrawerClose>\n)\n\nDrawerCloseButton.displayName = 'Drawer.CloseButton'\n","import { Dialog as RadixDrawer } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type DrawerCloseProps = RadixDrawer.DialogCloseProps & {\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const DrawerClose = (props: DrawerCloseProps) => (\n  <RadixDrawer.Close data-spark-component=\"drawer-close\" {...props} />\n)\n\nDrawerClose.displayName = 'Drawer.Close'\n","import { Dialog as RadixDrawer } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { drawerContentStyles, type DrawerContentStylesProps } from './DrawerContent.styles'\n\nexport type DrawerContentProps = RadixDrawer.DialogContentProps &\n  DrawerContentStylesProps & {\n    ref?: Ref<HTMLDivElement>\n  }\n\nexport const DrawerContent = ({\n  className,\n  size = 'md',\n  side = 'right',\n  onInteractOutside,\n  ref,\n  ...rest\n}: DrawerContentProps) => (\n  <RadixDrawer.Content\n    data-spark-component=\"drawer-content\"\n    ref={ref}\n    className={drawerContentStyles({\n      size,\n      side,\n      className,\n    })}\n    onInteractOutside={e => {\n      const isForegroundElement = (e.target as HTMLElement).closest('.z-toast, .z-popover')\n\n      /**\n       * The focus trap of the drawer applies `pointer-events-none` on the body of the page in the background, but\n       * some components with an higher z-index have `pointer-events-auto` applied on them to remain interactive and ignore the focust trap (ex: a Snackbar with actions).\n       *\n       * Clicking on the snackbar will be considered as an \"outside click\" and close the drawer. We want to prevent this.\n       */\n      if (isForegroundElement) {\n        e.preventDefault()\n      }\n\n      onInteractOutside?.(e)\n    }}\n    {...rest}\n  />\n)\n\nDrawerContent.displayName = 'Drawer.Content'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const drawerContentStyles = cva(\n  [\n    ['fixed', 'z-modal', 'flex', 'flex-col'],\n    ['bg-surface', 'shadow-md'],\n  ],\n  {\n    variants: {\n      size: {\n        sm: '',\n        md: '',\n        lg: '',\n        fluid: '',\n        fullscreen: 'h-screen w-screen',\n      },\n      side: {\n        right: [\n          'inset-y-0 right-0',\n          'data-[state=open]:animate-slide-in-right',\n          'data-[state=closed]:animate-slide-out-right',\n        ],\n        left: [\n          'inset-y-0 left-0',\n          'data-[state=open]:animate-slide-in-left',\n          'data-[state=closed]:animate-slide-out-left',\n        ],\n        top: [\n          'top-0 left-0',\n          'w-screen',\n          'data-[state=open]:animate-slide-in-top',\n          'data-[state=closed]:animate-slide-out-top',\n        ],\n        bottom: [\n          'bottom-0 left-0',\n          'w-screen',\n          'data-[state=open]:animate-slide-in-bottom',\n          'data-[state=closed]:animate-slide-out-bottom',\n        ],\n      },\n    },\n    compoundVariants: [\n      {\n        side: ['right', 'left'],\n        size: 'sm',\n        class: ['w-sz-480', 'max-w-full'],\n      },\n      {\n        side: ['right', 'left'],\n        size: 'md',\n        class: ['w-sz-672', 'max-w-full'],\n      },\n      {\n        side: ['right', 'left'],\n        size: 'lg',\n        class: ['w-sz-864', 'max-w-full'],\n      },\n      {\n        side: ['left', 'right'],\n        size: 'fluid',\n        class: ['w-auto', 'max-w-full'],\n      },\n      {\n        side: ['top', 'bottom'],\n        size: 'sm',\n        class: ['h-sz-480', 'max-h-full'],\n      },\n      {\n        side: ['top', 'bottom'],\n        size: 'md',\n        class: ['h-sz-672', 'max-h-full'],\n      },\n      {\n        side: ['top', 'bottom'],\n        size: 'lg',\n        class: ['h-sz-864', 'max-h-full'],\n      },\n      {\n        side: ['top', 'bottom'],\n        size: 'fluid',\n        class: ['h-auto', 'max-h-full'],\n      },\n    ],\n    defaultVariants: {\n      side: 'right',\n      size: 'md',\n    },\n  }\n)\n\nexport type DrawerContentStylesProps = VariantProps<typeof drawerContentStyles>\n","import { Dialog as RadixDrawer } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type DrawerDescriptionProps = RadixDrawer.DialogDescriptionProps & {\n  ref?: Ref<HTMLParagraphElement>\n}\n\nexport const DrawerDescription = (props: DrawerDescriptionProps) => (\n  <RadixDrawer.Description data-spark-component=\"drawer-description\" {...props} />\n)\n\nDrawerDescription.displayName = 'Drawer.Description'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, type ReactElement, Ref } from 'react'\n\nexport type DrawerFooterProps = ComponentPropsWithoutRef<'footer'> & {\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const DrawerFooter = ({ className, ref, ...rest }: DrawerFooterProps): ReactElement => (\n  <footer\n    data-spark-component=\"drawer-footer\"\n    ref={ref}\n    className={cx(['px-xl', 'py-lg'], className)}\n    {...rest}\n  />\n)\n\nDrawerFooter.displayName = 'Drawer.Footer'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface DrawerHeaderProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const DrawerHeader = ({\n  children,\n  className,\n  ref,\n  ...rest\n}: DrawerHeaderProps): ReactElement => (\n  <header\n    data-spark-component=\"drawer-header\"\n    ref={ref}\n    className={cx(['px-xl', 'py-lg'], className)}\n    {...rest}\n  >\n    {children}\n  </header>\n)\n\nDrawerHeader.displayName = 'Dialog.Header'\n","import { cx } from 'class-variance-authority'\nimport { Dialog as RadixDrawer } from 'radix-ui'\nimport { type ReactElement, Ref } from 'react'\n\nexport type DrawerOverlayProps = RadixDrawer.DialogOverlayProps & {\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const DrawerOverlay = ({ className, ref, ...rest }: DrawerOverlayProps): ReactElement => (\n  <RadixDrawer.Overlay\n    data-spark-component=\"drawer-overlay\"\n    ref={ref}\n    className={cx(\n      ['fixed', 'top-0', 'left-0', 'w-screen', 'h-screen', 'z-overlay'],\n      ['bg-overlay/dim-1'],\n      ['data-[state=open]:animate-fade-in'],\n      ['data-[state=closed]:animate-fade-out'],\n      className\n    )}\n    {...rest}\n  />\n)\n\nDrawerOverlay.displayName = 'Drawer.Overlay'\n","import { Dialog as RadixDrawer } from 'radix-ui'\nimport { type ReactElement } from 'react'\n\nexport type DrawerPortalProps = RadixDrawer.DialogPortalProps\n\nexport const DrawerPortal = ({ children, ...rest }: DrawerPortalProps): ReactElement => (\n  <RadixDrawer.Portal {...rest}>{children}</RadixDrawer.Portal>\n)\n\nDrawerPortal.displayName = 'Drawer.Portal'\n","import { cx } from 'class-variance-authority'\nimport { Dialog as RadixDrawer } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type DrawerTitleProps = RadixDrawer.DialogTitleProps & {\n  ref?: Ref<HTMLHeadingElement>\n}\n\nexport const DrawerTitle = ({ className, ref, ...others }: DrawerTitleProps) => (\n  <RadixDrawer.Title\n    data-spark-component=\"drawer-title\"\n    ref={ref}\n    className={cx('text-headline-2 text-on-surface', className)}\n    {...others}\n  />\n)\n\nDrawerTitle.displayName = 'Drawer.Title'\n","import { Dialog as RadixDrawer } from 'radix-ui'\nimport { type ReactElement, Ref } from 'react'\n\nexport interface DrawerTriggerProps extends RadixDrawer.DialogTriggerProps {\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const DrawerTrigger = (props: DrawerTriggerProps): ReactElement => (\n  <RadixDrawer.Trigger data-spark-component=\"drawer-trigger\" {...props} />\n)\n\nDrawerTrigger.displayName = 'Drawer.Trigger'\n","import { Drawer as Root } from './Drawer'\nimport { DrawerBody } from './DrawerBody'\nimport { DrawerCloseButton } from './DrawerCloseButton'\nimport { DrawerContent } from './DrawerContent'\nimport { DrawerDescription } from './DrawerDescription' // aria-describedby\nimport { DrawerFooter } from './DrawerFooter'\nimport { DrawerHeader } from './DrawerHeader'\nimport { DrawerOverlay } from './DrawerOverlay'\nimport { DrawerPortal } from './DrawerPortal'\nimport { DrawerTitle } from './DrawerTitle'\nimport { DrawerTrigger } from './DrawerTrigger'\n\nexport const Drawer: typeof Root & {\n  Trigger: typeof DrawerTrigger\n  Portal: typeof DrawerPortal\n  Overlay: typeof DrawerOverlay\n  Content: typeof DrawerContent\n  Header: typeof DrawerHeader\n  Body: typeof DrawerBody\n  Footer: typeof DrawerFooter\n  CloseButton: typeof DrawerCloseButton\n  Title: typeof DrawerTitle\n  Description: typeof DrawerDescription\n} = Object.assign(Root, {\n  Trigger: DrawerTrigger,\n  Portal: DrawerPortal,\n  Overlay: DrawerOverlay,\n  Content: DrawerContent,\n  Header: DrawerHeader,\n  Body: DrawerBody,\n  Footer: DrawerFooter,\n  CloseButton: DrawerCloseButton,\n  Title: DrawerTitle,\n  Description: DrawerDescription,\n})\n\nDrawer.displayName = 'Drawer'\nDrawerTrigger.displayName = 'Drawer.Trigger'\nDrawerPortal.displayName = 'Drawer.Portal'\nDrawerOverlay.displayName = 'Drawer.Overlay'\nDrawerContent.displayName = 'Drawer.Content'\nDrawerHeader.displayName = 'Drawer.Header'\nDrawerBody.displayName = 'Drawer.Body'\nDrawerFooter.displayName = 'Drawer.Footer'\nDrawerCloseButton.displayName = 'Drawer.CloseButton'\nDrawerTitle.displayName = 'Drawer.Title'\nDrawerDescription.displayName = 'Drawer.Description'\n\nexport { type DrawerProps } from './Drawer'\nexport { type DrawerContentProps } from './DrawerContent'\nexport { type DrawerHeaderProps } from './DrawerHeader'\nexport { type DrawerBodyProps } from './DrawerBody'\nexport { type DrawerFooterProps } from './DrawerFooter'\nexport { type DrawerTriggerProps } from './DrawerTrigger'\nexport { type DrawerOverlayProps } from './DrawerOverlay'\nexport { type DrawerPortalProps } from './DrawerPortal'\nexport { type DrawerTitleProps } from './DrawerTitle'\nexport { type DrawerDescriptionProps } from './DrawerDescription'\nexport { type DrawerCloseProps } from './DrawerClose'\nexport { type DrawerCloseButtonProps } from './DrawerCloseButton'\n"],"mappings":"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","names":["jsx","jsx","RadixDrawer","jsx","jsx","RadixDrawer","cva","jsx","RadixDrawer","RadixDrawer","jsx","cx","jsx","cx","jsx","cx","RadixDrawer","jsx","RadixDrawer","jsx","cx","RadixDrawer","jsx","RadixDrawer","jsx","Drawer"]}

package/dist/scrolling-list/index.d.mts

@@ -24,7 +24,7 @@ interface Props$2 {
     /**
      * Add a fade effect to indicate content overflow.
      */
-    widthFade?: boolean;
+    withFade?: boolean;
     children?: ReactNode;
     /**
      * When `true`, allow previous and next buttons to be used when reaching the edges of the list.
@@ -40,7 +40,7 @@ interface Props$2 {
     scrollPadding?: number;
 }
 declare const ScrollingList$1: {
-    ({ snapType, snapStop, scrollBehavior, loop, gap, widthFade, scrollPadding, children, }: Props$2): react_jsx_runtime.JSX.Element;
+    ({ snapType, snapStop, scrollBehavior, loop, gap, withFade, scrollPadding, children, }: Props$2): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/scrolling-list/index.d.ts

@@ -24,7 +24,7 @@ interface Props$2 {
     /**
      * Add a fade effect to indicate content overflow.
      */
-    widthFade?: boolean;
+    withFade?: boolean;
     children?: ReactNode;
     /**
      * When `true`, allow previous and next buttons to be used when reaching the edges of the list.
@@ -40,7 +40,7 @@ interface Props$2 {
     scrollPadding?: number;
 }
 declare const ScrollingList$1: {
-    ({ snapType, snapStop, scrollBehavior, loop, gap, widthFade, scrollPadding, children, }: Props$2): react_jsx_runtime.JSX.Element;
+    ({ snapType, snapStop, scrollBehavior, loop, gap, withFade, scrollPadding, children, }: Props$2): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/scrolling-list/index.js

@@ -25,46 +25,11 @@ __export(scrolling_list_exports, {
 module.exports = __toCommonJS(scrolling_list_exports);
 
 // src/scrolling-list/ScrollingList.tsx
-var import_react2 = require("react");
-var import_react_snap_carousel = require("react-snap-carousel");
-
-// src/scrolling-list/useScrollOverflow.ts
+var import_use_scroll_overflow = require("@spark-ui/hooks/use-scroll-overflow");
 var import_react = require("react");
-function useScrollOverflow(scrollRef) {
-  const [overflow, setOverflow] = (0, import_react.useState)({
-    left: 0,
-    right: 0
-  });
-  (0, import_react.useEffect)(() => {
-    const checkScrollContent = () => {
-      const scrollElement2 = scrollRef.current;
-      if (scrollElement2) {
-        const { scrollLeft, scrollWidth, clientWidth } = scrollElement2;
-        setOverflow({
-          left: scrollLeft,
-          right: scrollWidth - (scrollLeft + clientWidth)
-        });
-      }
-    };
-    checkScrollContent();
-    const scrollElement = scrollRef.current;
-    if (scrollElement) {
-      scrollElement.addEventListener("scroll", checkScrollContent);
-      window.addEventListener("resize", checkScrollContent);
-    }
-    return () => {
-      if (scrollElement) {
-        scrollElement.removeEventListener("scroll", checkScrollContent);
-        window.addEventListener("resize", checkScrollContent);
-      }
-    };
-  }, [scrollRef]);
-  return overflow;
-}
-
-// src/scrolling-list/ScrollingList.tsx
+var import_react_snap_carousel = require("react-snap-carousel");
 var import_jsx_runtime = require("react/jsx-runtime");
-var ScrollingListContext = (0, import_react2.createContext)(
+var ScrollingListContext = (0, import_react.createContext)(
   null
 );
 var ScrollingList = ({
@@ -73,15 +38,14 @@ var ScrollingList = ({
   scrollBehavior = "smooth",
   loop = false,
   gap = 16,
-  widthFade = false,
-  // TODO: ask for default value + why it has been removed from specs
+  withFade = false,
   scrollPadding = 0,
   children
 }) => {
-  const scrollAreaRef = (0, import_react2.useRef)(null);
-  const skipAnchorRef = (0, import_react2.useRef)(null);
+  const scrollAreaRef = (0, import_react.useRef)(null);
+  const skipAnchorRef = (0, import_react.useRef)(null);
   const snapCarouselAPI = (0, import_react_snap_carousel.useSnapCarousel)();
-  const overflow = useScrollOverflow(scrollAreaRef);
+  const overflow = (0, import_use_scroll_overflow.useScrollOverflow)(scrollAreaRef);
   const { activePageIndex, pages } = snapCarouselAPI;
   const visibleItems = pages[activePageIndex];
   const visibleItemsRange = visibleItems ? [visibleItems[0] + 1, visibleItems[visibleItems.length - 1] + 1] : [0, 0];
@@ -97,7 +61,7 @@ var ScrollingList = ({
     visibleItemsRange,
     loop,
     gap,
-    widthFade,
+    withFade,
     scrollPadding,
     scrollAreaRef,
     overflow
@@ -146,11 +110,11 @@ ScrollingListControls.displayName = "ScrollingList.Controls";
 
 // src/scrolling-list/ScrollingListItem.tsx
 var import_class_variance_authority2 = require("class-variance-authority");
-var import_react5 = require("react");
+var import_react4 = require("react");
 
 // src/slot/Slot.tsx
 var import_radix_ui = require("radix-ui");
-var import_react3 = require("react");
+var import_react2 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var Slottable = import_radix_ui.Slot.Slottable;
 var Slot = ({ ref, ...props }) => {
@@ -158,7 +122,7 @@ var Slot = ({ ref, ...props }) => {
 };
 var wrapPolymorphicSlot = (asChild, children, callback) => {
   if (!asChild) return callback(children);
-  return (0, import_react3.isValidElement)(children) ? (0, import_react3.cloneElement)(
+  return (0, import_react2.isValidElement)(children) ? (0, import_react2.cloneElement)(
     children,
     void 0,
     callback(children.props.children)
@@ -166,10 +130,10 @@ var wrapPolymorphicSlot = (asChild, children, callback) => {
 };
 
 // src/scrolling-list/useFocusWithinScroll.tsx
-var import_react4 = require("react");
+var import_react3 = require("react");
 function useFocusWithinScroll(ref, scrollRef) {
-  const [isFocusWithin, setIsFocusWithin] = (0, import_react4.useState)(false);
-  (0, import_react4.useEffect)(() => {
+  const [isFocusWithin, setIsFocusWithin] = (0, import_react3.useState)(false);
+  (0, import_react3.useEffect)(() => {
     const handleFocusIn = (event) => {
       setIsFocusWithin(true);
       const focusedElement = event.target;
@@ -212,8 +176,8 @@ var ScrollingListItem = ({
   className = "",
   ...rest
 }) => {
-  const ctx = (0, import_react5.useContext)(ScrollingListContext);
-  const itemRef = (0, import_react5.useRef)(null);
+  const ctx = (0, import_react4.useContext)(ScrollingListContext);
+  const itemRef = (0, import_react4.useRef)(null);
   const isSnapPoint = ctx.snapPointIndexes.has(index);
   useFocusWithinScroll(itemRef, ctx.scrollAreaRef);
   const Component = asChild ? Slot : "div";
@@ -241,7 +205,7 @@ ScrollingListItem.displayName = "ScrollingList.Item";
 
 // src/scrolling-list/ScrollingListItems.tsx
 var import_class_variance_authority3 = require("class-variance-authority");
-var import_react6 = require("react");
+var import_react5 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function mergeRefs(...refs) {
   return (value) => {
@@ -256,7 +220,7 @@ function mergeRefs(...refs) {
   };
 }
 var ScrollingListItems = ({ children, className = "", ...rest }) => {
-  const ctx = (0, import_react6.useContext)(ScrollingListContext);
+  const ctx = (0, import_react5.useContext)(ScrollingListContext);
   const snapConfig = {
     mandatory: "x mandatory",
     proximity: "x proximity",
@@ -287,7 +251,7 @@ var ScrollingListItems = ({ children, className = "", ...rest }) => {
     scrollPaddingInline: "var(--scrolling-list-px)",
     "--scrolling-list-px": `${ctx.scrollPadding}px`,
     "--scrolling-list-gap": `${ctx.gap}px`,
-    ...ctx.widthFade && {
+    ...ctx.withFade && {
       maskImage: "linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))",
       maskSize: `calc(100% + ${ctx.overflow.left ? "0px" : "44px"} + ${ctx.overflow.right ? "0px" : "44px"}) 100%`,
       maskPosition: `${ctx.overflow.left ? "0px" : "-44px"} 0`
@@ -310,9 +274,9 @@ var ScrollingListItems = ({ children, className = "", ...rest }) => {
       style: inlineStyles,
       onKeyDown: handleKeyDown,
       ...rest,
-      children: import_react6.Children.map(
+      children: import_react5.Children.map(
         children,
-        (child, index) => (0, import_react6.isValidElement)(child) ? (0, import_react6.cloneElement)(child, { index }) : child
+        (child, index) => (0, import_react5.isValidElement)(child) ? (0, import_react5.cloneElement)(child, { index }) : child
       )
     }
   );
@@ -322,10 +286,10 @@ ScrollingListItems.displayName = "ScrollingList.Items";
 // src/scrolling-list/ScrollingListNextButton.tsx
 var import_ArrowVerticalRight = require("@spark-ui/icons/ArrowVerticalRight");
 var import_class_variance_authority9 = require("class-variance-authority");
-var import_react9 = require("react");
+var import_react8 = require("react");
 
 // src/icon/Icon.tsx
-var import_react7 = require("react");
+var import_react6 = require("react");
 
 // src/visually-hidden/VisuallyHidden.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
@@ -398,9 +362,9 @@ var Icon = ({
   children,
   ...others
 }) => {
-  const child = import_react7.Children.only(children);
+  const child = import_react6.Children.only(children);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    (0, import_react7.cloneElement)(child, {
+    (0, import_react6.cloneElement)(child, {
       className: iconStyles({ className, size, intent }),
       "data-spark-component": "icon",
       "aria-hidden": "true",
@@ -414,7 +378,7 @@ Icon.displayName = "Icon";
 
 // src/button/Button.tsx
 var import_class_variance_authority7 = require("class-variance-authority");
-var import_react8 = require("react");
+var import_react7 = require("react");
 
 // src/spinner/Spinner.styles.tsx
 var import_internal_utils2 = require("@spark-ui/internal-utils");
@@ -1166,7 +1130,7 @@ var Button = ({
 }) => {
   const Component = asChild ? Slot : "button";
   const shouldNotInteract = !!disabled || isLoading;
-  const disabledEventHandlers = (0, import_react8.useMemo)(() => {
+  const disabledEventHandlers = (0, import_react7.useMemo)(() => {
     const result = {};
     if (shouldNotInteract) {
       blockedEventHandlers.forEach((eventHandler) => result[eventHandler] = void 0);
@@ -1267,7 +1231,7 @@ IconButton.displayName = "IconButton";
 // src/scrolling-list/ScrollingListNextButton.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var ScrollingListNextButton = ({ "aria-label": ariaLabel, ...rest }) => {
-  const ctx = (0, import_react9.useContext)(ScrollingListContext);
+  const ctx = (0, import_react8.useContext)(ScrollingListContext);
   const handleNextPage = () => {
     if (ctx.hasNextPage) {
       ctx.next({ behavior: ctx.scrollBehavior });
@@ -1302,13 +1266,13 @@ ScrollingListNextButton.displayName = "ScrollingList.NextButton";
 // src/scrolling-list/ScrollingListPrevButton.tsx
 var import_ArrowVerticalLeft = require("@spark-ui/icons/ArrowVerticalLeft");
 var import_class_variance_authority10 = require("class-variance-authority");
-var import_react10 = require("react");
+var import_react9 = require("react");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var ScrollingListPrevButton = ({
   "aria-label": ariaLabel,
   ...rest
 }) => {
-  const ctx = (0, import_react10.useContext)(ScrollingListContext);
+  const ctx = (0, import_react9.useContext)(ScrollingListContext);
   const handlePrevPage = () => {
     const shouldSnapFirstPage = ctx.activePageIndex === 0 && (ctx.scrollAreaRef.current?.scrollLeft || 0) > 0;
     if (shouldSnapFirstPage) {
@@ -1345,10 +1309,10 @@ ScrollingListPrevButton.displayName = "ScrollingList.PrevButton";
 
 // src/scrolling-list/ScrollingListSkipButton.tsx
 var import_class_variance_authority11 = require("class-variance-authority");
-var import_react11 = require("react");
+var import_react10 = require("react");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var ScrollingListSkipButton = ({ children, ...rest }) => {
-  const ctx = (0, import_react11.useContext)(ScrollingListContext);
+  const ctx = (0, import_react10.useContext)(ScrollingListContext);
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     Button,
     {