@spark-ui/components 17.11.0 → 17.11.2

package/dist/dialog/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/dialog/DialogContext.tsx","../../src/dialog/Dialog.tsx","../../src/dialog/DialogBody.tsx","../../src/dialog/DialogClose.tsx","../../src/dialog/DialogCloseButton.tsx","../../src/dialog/DialogContent.tsx","../../src/dialog/DialogDescription.tsx","../../src/dialog/DialogFooter.tsx","../../src/dialog/DialogHeader.tsx","../../src/dialog/DialogOverlay.tsx","../../src/dialog/DialogPortal.tsx","../../src/dialog/DialogTitle.tsx","../../src/dialog/DialogTrigger.tsx","../../src/dialog/index.ts"],"sourcesContent":["import { createContext, type ReactNode, useContext, useState } from 'react'\n\nexport interface DialogContextState {\n  isFullScreen: boolean\n  setIsFullScreen: (value: boolean) => void\n  withFade: boolean\n}\n\nconst DialogContext = createContext<DialogContextState | null>(null)\n\nexport const DialogProvider = ({\n  children: childrenProp,\n  withFade = false,\n}: {\n  children: ReactNode\n  withFade?: boolean\n}) => {\n  const [isFullScreen, setIsFullScreen] = useState(false)\n\n  return (\n    <DialogContext.Provider\n      value={{\n        isFullScreen,\n        setIsFullScreen,\n        withFade,\n      }}\n    >\n      {childrenProp}\n    </DialogContext.Provider>\n  )\n}\n\nexport const useDialog = () => {\n  const context = useContext(DialogContext)\n\n  if (!context) {\n    throw Error('useDialog must be used within a Dialog provider')\n  }\n\n  return context\n}\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { ComponentProps, type ReactElement } from 'react'\n\nimport { DialogProvider } from './DialogContext'\n\nexport interface DialogProps extends Omit<\n  ComponentProps<typeof BaseDialog.Root>,\n  'onOpenChange' | 'render'\n> {\n  /**\n   * Specifies if the dialog is open or not.\n   */\n  open?: boolean\n  /**\n   * Default open state.\n   */\n  defaultOpen?: boolean\n  /**\n   * Handler executed on every dialog open state change.\n   */\n  onOpenChange?: (open: boolean) => void\n  /**\n   * Specifies if the dialog is a modal.\n   */\n  modal?: boolean\n  /**\n   * Specifies if the dialog should have a fade animation on its body (in case it is scrollable).\n   */\n  withFade?: boolean\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n}\n\nexport const Dialog = ({ withFade = false, onOpenChange, ...props }: DialogProps): ReactElement => {\n  const handleOpenChange = onOpenChange\n    ? (open: boolean, _eventDetails: unknown) => {\n        onOpenChange(open)\n      }\n    : undefined\n\n  return (\n    <DialogProvider withFade={withFade}>\n      <BaseDialog.Root data-spark-component=\"dialog\" onOpenChange={handleOpenChange} {...props} />\n    </DialogProvider>\n  )\n}\n\nDialog.createHandle = BaseDialog.createHandle\nDialog.displayName = 'Dialog.Root'\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { useScrollOverflow } from '@spark-ui/hooks/use-scroll-overflow'\nimport { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref, useRef } from 'react'\n\nimport { useDialog } from './DialogContext'\n\nexport interface BodyProps {\n  children: ReactNode\n  className?: string\n  tabIndex?: number\n  ref?: Ref<HTMLDivElement>\n  inset?: boolean\n}\n\n/**\n * The scrollable body section of the dialog. Renders a <div> element.\n */\nexport const Body = ({\n  children,\n  className,\n  inset = false,\n  ref: forwardedRef,\n  ...rest\n}: BodyProps): ReactElement => {\n  const scrollAreaRef = useRef<HTMLDivElement>(null)\n  const ref = useMergeRefs(forwardedRef, scrollAreaRef)\n\n  const { withFade } = useDialog()\n\n  const { overflow } = useScrollOverflow(scrollAreaRef)\n\n  return (\n    <div\n      data-spark-component=\"dialog-body\"\n      ref={ref}\n      className={cx(\n        'focus-visible:u-outline relative grow overflow-y-auto outline-hidden',\n        'transition-all duration-300',\n        {\n          ['px-xl py-lg']: !inset,\n        },\n        className\n      )}\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\nBody.displayName = 'Dialog.Body'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from '../drawer/useRenderSlot'\n\nexport interface CloseProps extends Omit<ComponentProps<typeof BaseDialog.Close>, 'render'> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button that closes the dialog. Renders a <button> element.\n */\nexport const Close = ({ asChild = false, ...props }: CloseProps) => {\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return <BaseDialog.Close data-spark-component=\"dialog-close\" render={renderSlot} {...props} />\n}\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 { Close, CloseProps } from './DialogClose'\n\nexport type CloseButtonProps = CloseProps &\n  Pick<IconButtonProps, 'size' | 'intent' | 'design' | 'aria-label'>\n\n/**\n * A styled close button positioned in the dialog header. Renders a <button> element.\n */\nconst Root = ({\n  'aria-label': ariaLabel,\n  className,\n  size = 'md',\n  intent = 'neutral',\n  design = 'ghost',\n  children = <CloseSVG />,\n  ref,\n  ...rest\n}: CloseButtonProps) => {\n  return (\n    <Close\n      data-spark-component=\"dialog-close-button\"\n      data-part=\"close\"\n      ref={ref}\n      className={cx(['absolute', 'top-md', '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    </Close>\n  )\n}\n\nexport const CloseButton = Object.assign(Root, {\n  id: 'CloseButton',\n})\n\nRoot.displayName = 'Dialog.CloseButton'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref, useEffect } from 'react'\n\nimport { dialogContentStyles, type DialogContentStylesProps } from './DialogContent.styles'\nimport { useDialog } from './DialogContext'\n\nexport interface ContentProps\n  extends Omit<ComponentProps<typeof BaseDialog.Popup>, 'render'>, DialogContentStylesProps {\n  /**\n   * When set to true, the content will adjust its width to fit the content rather than taking up the full available width.\n   */\n  isNarrow?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The popup element that contains the dialog content. Renders a <div> element.\n */\nexport const Content = ({\n  className,\n  isNarrow = false,\n  size = 'md',\n  ref,\n  ...rest\n}: ContentProps) => {\n  const { setIsFullScreen } = useDialog()\n\n  useEffect(() => {\n    if (size === 'fullscreen') setIsFullScreen(true)\n\n    return () => setIsFullScreen(false)\n  }, [setIsFullScreen, size])\n\n  return (\n    <BaseDialog.Popup\n      ref={ref}\n      data-spark-component=\"dialog-content\"\n      role=\"dialog\"\n      className={state =>\n        cx(\n          dialogContentStyles({\n            isNarrow,\n            size,\n            className: typeof className === 'function' ? className(state) : className,\n          })\n        )\n      }\n      {...rest}\n    />\n  )\n}\n\nContent.displayName = 'Dialog.Content'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { ComponentProps, Ref } from 'react'\n\nexport type DescriptionProps = ComponentProps<typeof BaseDialog.Description> & {\n  ref?: Ref<HTMLParagraphElement>\n}\n\n/**\n * A paragraph with additional information about the dialog. Renders a <p> element.\n */\nexport const Description = (props: DescriptionProps) => (\n  <BaseDialog.Description data-spark-component=\"dialog-description\" {...props} />\n)\n\nDescription.displayName = 'Dialog.Description'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface FooterProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The footer section of the dialog, typically containing action buttons. Renders a <footer> element.\n */\nexport const Footer = ({ children, className, ref, ...rest }: FooterProps): ReactElement => (\n  <footer\n    data-spark-component=\"dialog-footer\"\n    ref={ref}\n    className={cx(className, ['px-xl', 'py-lg'])}\n    {...rest}\n  >\n    {children}\n  </footer>\n)\n\nFooter.displayName = 'Dialog.Footer'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface HeaderProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The header section of the dialog. Renders a <header> element.\n */\nexport const Header = ({ children, className, ref, ...rest }: HeaderProps): ReactElement => (\n  <header\n    data-spark-component=\"dialog-header\"\n    ref={ref}\n    className={cx(className, ['px-xl', 'py-lg'])}\n    {...rest}\n  >\n    {children}\n  </header>\n)\n\nHeader.displayName = 'Dialog.Header'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface OverlayProps extends Omit<ComponentProps<typeof BaseDialog.Backdrop>, 'render'> {\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The backdrop element that dims the rest of the page. Renders a <div> element.\n */\nexport const Overlay = ({ className, ...props }: OverlayProps) => {\n  return (\n    <BaseDialog.Backdrop\n      data-spark-component=\"dialog-overlay\"\n      className={state =>\n        cx(\n          'z-overlay size-screen fixed inset-0',\n          'bg-overlay/dim-1',\n          'data-starting-style:animate-fade-in',\n          'data-ending-style:animate-fade-out',\n          typeof className === 'function' ? className(state) : className\n        )\n      }\n      {...props}\n    />\n  )\n}\n\nOverlay.displayName = 'Dialog.Overlay'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps } from 'react'\n\nexport type PortalProps = ComponentProps<typeof BaseDialog.Portal>\n\n/**\n * A portal that renders the dialog in a different part of the DOM. Renders a <div> element.\n */\nexport const Portal = ({ className, ...props }: PortalProps) => {\n  return (\n    <BaseDialog.Portal\n      data-spark-component=\"dialog-portal\"\n      className={cx(className, 'z-modal absolute')}\n      {...props}\n    />\n  )\n}\n\nPortal.displayName = 'Dialog.Portal'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport type TitleProps = ComponentProps<typeof BaseDialog.Title> & {\n  ref?: Ref<HTMLHeadingElement>\n}\n\n/**\n * The title of the dialog, announced to assistive technology. Renders an <h2> element.\n */\nexport const Title = ({ className, ref, ...others }: TitleProps) => {\n  return (\n    <BaseDialog.Title\n      data-spark-component=\"dialog-title\"\n      ref={ref}\n      className={cx(\n        'text-headline-1 text-on-surface',\n        'group-has-data-[part=close]:pr-3xl',\n        className\n      )}\n      {...others}\n    />\n  )\n}\n\nTitle.displayName = 'Dialog.Title'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from '../drawer/useRenderSlot'\n\nexport interface TriggerProps extends Omit<ComponentProps<typeof BaseDialog.Trigger>, 'render'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button that opens the dialog. Renders a <button> element.\n */\nexport const Trigger = ({ asChild = false, ...props }: TriggerProps) => {\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return <BaseDialog.Trigger data-spark-component=\"dialog-trigger\" render={renderSlot} {...props} />\n}\n\nTrigger.displayName = 'Dialog.Trigger'\n","import { Dialog as Root } from './Dialog'\nimport { Body } from './DialogBody'\nimport { Close } from './DialogClose'\nimport { CloseButton } from './DialogCloseButton'\nimport { Content } from './DialogContent'\nimport { Description } from './DialogDescription' // aria-describedby\nimport { Footer } from './DialogFooter'\nimport { Header } from './DialogHeader'\nimport { Overlay } from './DialogOverlay'\nimport { Portal } from './DialogPortal'\nimport { Title } from './DialogTitle' // aria-labelledby\nimport { Trigger } from './DialogTrigger'\n\n/**\n * A modal window that displays content on top of the main page, requiring user interaction before returning to the main flow.\n */\nexport const Dialog: typeof Root & {\n  Trigger: typeof Trigger\n  Portal: typeof Portal\n  Overlay: typeof Overlay\n  Content: typeof Content\n  Header: typeof Header\n  Body: typeof Body\n  Footer: typeof Footer\n  Close: typeof Close\n  CloseButton: typeof CloseButton\n  Title: typeof Title\n  Description: typeof Description\n} = Object.assign(Root, {\n  Trigger,\n  Portal,\n  Overlay,\n  Content,\n  Header,\n  Body,\n  Footer,\n  Close,\n  CloseButton,\n  Title,\n  Description,\n})\n\nDialog.displayName = 'Dialog'\n\nexport { type DialogProps } from './Dialog'\nexport { type ContentProps as DialogContentProps } from './DialogContent'\nexport { type HeaderProps as DialogHeaderProps } from './DialogHeader'\nexport { type BodyProps as DialogBodyProps } from './DialogBody'\nexport { type FooterProps as DialogFooterProps } from './DialogFooter'\nexport { type TriggerProps as DialogTriggerProps } from './DialogTrigger'\nexport { type OverlayProps as DialogOverlayProps } from './DialogOverlay'\nexport { type PortalProps as DialogPortalProps } from './DialogPortal'\nexport { type TitleProps as DialogTitleProps } from './DialogTitle'\nexport { type DescriptionProps as DialogDescriptionProps } from './DialogDescription'\nexport { type CloseProps as DialogCloseProps } from './DialogClose'\nexport { type CloseButtonProps as DialogCloseButtonProps } from './DialogCloseButton'\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/dialog/DialogContext.tsx","../../src/dialog/Dialog.tsx","../../src/dialog/DialogBody.tsx","../../src/dialog/DialogClose.tsx","../../src/dialog/DialogCloseButton.tsx","../../src/dialog/DialogContent.tsx","../../src/dialog/DialogDescription.tsx","../../src/dialog/DialogFooter.tsx","../../src/dialog/DialogHeader.tsx","../../src/dialog/DialogOverlay.tsx","../../src/dialog/DialogPortal.tsx","../../src/dialog/DialogTitle.tsx","../../src/dialog/DialogTrigger.tsx","../../src/dialog/index.ts"],"sourcesContent":["import { createContext, type ReactNode, useContext, useState } from 'react'\n\nexport interface DialogContextState {\n  isFullScreen: boolean\n  setIsFullScreen: (value: boolean) => void\n  withFade: boolean\n}\n\nconst DialogContext = createContext<DialogContextState | null>(null)\n\nexport const DialogProvider = ({\n  children: childrenProp,\n  withFade = false,\n}: {\n  children: ReactNode\n  withFade?: boolean\n}) => {\n  const [isFullScreen, setIsFullScreen] = useState(false)\n\n  return (\n    <DialogContext\n      value={{\n        isFullScreen,\n        setIsFullScreen,\n        withFade,\n      }}\n    >\n      {childrenProp}\n    </DialogContext>\n  )\n}\n\nexport const useDialog = () => {\n  const context = useContext(DialogContext)\n\n  if (!context) {\n    throw Error('useDialog must be used within a Dialog provider')\n  }\n\n  return context\n}\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { ComponentProps, type ReactElement } from 'react'\n\nimport { DialogProvider } from './DialogContext'\n\nexport interface DialogProps extends Omit<\n  ComponentProps<typeof BaseDialog.Root>,\n  'onOpenChange' | 'render'\n> {\n  /**\n   * Specifies if the dialog is open or not.\n   */\n  open?: boolean\n  /**\n   * Default open state.\n   */\n  defaultOpen?: boolean\n  /**\n   * Handler executed on every dialog open state change.\n   */\n  onOpenChange?: (open: boolean) => void\n  /**\n   * Specifies if the dialog is a modal.\n   */\n  modal?: boolean\n  /**\n   * Specifies if the dialog should have a fade animation on its body (in case it is scrollable).\n   */\n  withFade?: boolean\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n}\n\nexport const Dialog = ({ withFade = false, onOpenChange, ...props }: DialogProps): ReactElement => {\n  const handleOpenChange = onOpenChange\n    ? (open: boolean, _eventDetails: unknown) => {\n        onOpenChange(open)\n      }\n    : undefined\n\n  return (\n    <DialogProvider withFade={withFade}>\n      <BaseDialog.Root data-spark-component=\"dialog\" onOpenChange={handleOpenChange} {...props} />\n    </DialogProvider>\n  )\n}\n\nDialog.createHandle = BaseDialog.createHandle\nDialog.displayName = 'Dialog.Root'\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { useScrollOverflow } from '@spark-ui/hooks/use-scroll-overflow'\nimport { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref, useRef } from 'react'\n\nimport { useDialog } from './DialogContext'\n\nexport interface BodyProps {\n  children: ReactNode\n  className?: string\n  tabIndex?: number\n  ref?: Ref<HTMLDivElement>\n  inset?: boolean\n}\n\n/**\n * The scrollable body section of the dialog. Renders a <div> element.\n */\nexport const Body = ({\n  children,\n  className,\n  inset = false,\n  ref: forwardedRef,\n  ...rest\n}: BodyProps): ReactElement => {\n  const scrollAreaRef = useRef<HTMLDivElement>(null)\n  const ref = useMergeRefs(forwardedRef, scrollAreaRef)\n\n  const { withFade } = useDialog()\n\n  const { overflow } = useScrollOverflow(scrollAreaRef)\n\n  return (\n    <div\n      data-spark-component=\"dialog-body\"\n      ref={ref}\n      className={cx(\n        'focus-visible:u-outline relative grow overflow-y-auto outline-hidden',\n        'transition-all duration-300',\n        {\n          ['px-xl py-lg']: !inset,\n        },\n        className\n      )}\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\nBody.displayName = 'Dialog.Body'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from '../drawer/useRenderSlot'\n\nexport interface CloseProps extends Omit<ComponentProps<typeof BaseDialog.Close>, 'render'> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button that closes the dialog. Renders a <button> element.\n */\nexport const Close = ({ asChild = false, ...props }: CloseProps) => {\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return <BaseDialog.Close data-spark-component=\"dialog-close\" render={renderSlot} {...props} />\n}\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 { Close, CloseProps } from './DialogClose'\n\nexport type CloseButtonProps = CloseProps &\n  Pick<IconButtonProps, 'size' | 'intent' | 'design' | 'aria-label'>\n\n/**\n * A styled close button positioned in the dialog header. Renders a <button> element.\n */\nconst Root = ({\n  'aria-label': ariaLabel,\n  className,\n  size = 'md',\n  intent = 'neutral',\n  design = 'ghost',\n  children = <CloseSVG />,\n  ref,\n  ...rest\n}: CloseButtonProps) => {\n  return (\n    <Close\n      data-spark-component=\"dialog-close-button\"\n      data-part=\"close\"\n      ref={ref}\n      className={cx(['absolute', 'top-md', '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    </Close>\n  )\n}\n\nexport const CloseButton = Object.assign(Root, {\n  id: 'CloseButton',\n})\n\nRoot.displayName = 'Dialog.CloseButton'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref, useEffect } from 'react'\n\nimport { dialogContentStyles, type DialogContentStylesProps } from './DialogContent.styles'\nimport { useDialog } from './DialogContext'\n\nexport interface ContentProps\n  extends Omit<ComponentProps<typeof BaseDialog.Popup>, 'render'>, DialogContentStylesProps {\n  /**\n   * When set to true, the content will adjust its width to fit the content rather than taking up the full available width.\n   */\n  isNarrow?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The popup element that contains the dialog content. Renders a <div> element.\n */\nexport const Content = ({\n  className,\n  isNarrow = false,\n  size = 'md',\n  ref,\n  ...rest\n}: ContentProps) => {\n  const { setIsFullScreen } = useDialog()\n\n  useEffect(() => {\n    if (size === 'fullscreen') setIsFullScreen(true)\n\n    return () => setIsFullScreen(false)\n  }, [setIsFullScreen, size])\n\n  return (\n    <BaseDialog.Popup\n      ref={ref}\n      data-spark-component=\"dialog-content\"\n      role=\"dialog\"\n      className={state =>\n        cx(\n          dialogContentStyles({\n            isNarrow,\n            size,\n            className: typeof className === 'function' ? className(state) : className,\n          })\n        )\n      }\n      {...rest}\n    />\n  )\n}\n\nContent.displayName = 'Dialog.Content'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { ComponentProps, Ref } from 'react'\n\nexport type DescriptionProps = ComponentProps<typeof BaseDialog.Description> & {\n  ref?: Ref<HTMLParagraphElement>\n}\n\n/**\n * A paragraph with additional information about the dialog. Renders a <p> element.\n */\nexport const Description = (props: DescriptionProps) => (\n  <BaseDialog.Description data-spark-component=\"dialog-description\" {...props} />\n)\n\nDescription.displayName = 'Dialog.Description'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface FooterProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The footer section of the dialog, typically containing action buttons. Renders a <footer> element.\n */\nexport const Footer = ({ children, className, ref, ...rest }: FooterProps): ReactElement => (\n  <footer\n    data-spark-component=\"dialog-footer\"\n    ref={ref}\n    className={cx(className, ['px-xl', 'py-lg'])}\n    {...rest}\n  >\n    {children}\n  </footer>\n)\n\nFooter.displayName = 'Dialog.Footer'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface HeaderProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The header section of the dialog. Renders a <header> element.\n */\nexport const Header = ({ children, className, ref, ...rest }: HeaderProps): ReactElement => (\n  <header\n    data-spark-component=\"dialog-header\"\n    ref={ref}\n    className={cx(className, ['px-xl', 'py-lg'])}\n    {...rest}\n  >\n    {children}\n  </header>\n)\n\nHeader.displayName = 'Dialog.Header'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface OverlayProps extends Omit<ComponentProps<typeof BaseDialog.Backdrop>, 'render'> {\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The backdrop element that dims the rest of the page. Renders a <div> element.\n */\nexport const Overlay = ({ className, ...props }: OverlayProps) => {\n  return (\n    <BaseDialog.Backdrop\n      data-spark-component=\"dialog-overlay\"\n      className={state =>\n        cx(\n          'z-overlay size-screen fixed inset-0',\n          'bg-overlay/dim-1',\n          'data-starting-style:animate-fade-in',\n          'data-ending-style:animate-fade-out',\n          typeof className === 'function' ? className(state) : className\n        )\n      }\n      {...props}\n    />\n  )\n}\n\nOverlay.displayName = 'Dialog.Overlay'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps } from 'react'\n\nexport type PortalProps = ComponentProps<typeof BaseDialog.Portal>\n\n/**\n * A portal that renders the dialog in a different part of the DOM. Renders a <div> element.\n */\nexport const Portal = ({ className, ...props }: PortalProps) => {\n  return (\n    <BaseDialog.Portal\n      data-spark-component=\"dialog-portal\"\n      className={cx(className, 'z-modal absolute')}\n      {...props}\n    />\n  )\n}\n\nPortal.displayName = 'Dialog.Portal'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport type TitleProps = ComponentProps<typeof BaseDialog.Title> & {\n  ref?: Ref<HTMLHeadingElement>\n}\n\n/**\n * The title of the dialog, announced to assistive technology. Renders an <h2> element.\n */\nexport const Title = ({ className, ref, ...others }: TitleProps) => {\n  return (\n    <BaseDialog.Title\n      data-spark-component=\"dialog-title\"\n      ref={ref}\n      className={cx(\n        'text-headline-1 text-on-surface',\n        'group-has-data-[part=close]:pr-3xl',\n        className\n      )}\n      {...others}\n    />\n  )\n}\n\nTitle.displayName = 'Dialog.Title'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from '../drawer/useRenderSlot'\n\nexport interface TriggerProps extends Omit<ComponentProps<typeof BaseDialog.Trigger>, 'render'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button that opens the dialog. Renders a <button> element.\n */\nexport const Trigger = ({ asChild = false, ...props }: TriggerProps) => {\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return <BaseDialog.Trigger data-spark-component=\"dialog-trigger\" render={renderSlot} {...props} />\n}\n\nTrigger.displayName = 'Dialog.Trigger'\n","import { Dialog as Root } from './Dialog'\nimport { Body } from './DialogBody'\nimport { Close } from './DialogClose'\nimport { CloseButton } from './DialogCloseButton'\nimport { Content } from './DialogContent'\nimport { Description } from './DialogDescription' // aria-describedby\nimport { Footer } from './DialogFooter'\nimport { Header } from './DialogHeader'\nimport { Overlay } from './DialogOverlay'\nimport { Portal } from './DialogPortal'\nimport { Title } from './DialogTitle' // aria-labelledby\nimport { Trigger } from './DialogTrigger'\n\n/**\n * A modal window that displays content on top of the main page, requiring user interaction before returning to the main flow.\n */\nexport const Dialog: typeof Root & {\n  Trigger: typeof Trigger\n  Portal: typeof Portal\n  Overlay: typeof Overlay\n  Content: typeof Content\n  Header: typeof Header\n  Body: typeof Body\n  Footer: typeof Footer\n  Close: typeof Close\n  CloseButton: typeof CloseButton\n  Title: typeof Title\n  Description: typeof Description\n} = Object.assign(Root, {\n  Trigger,\n  Portal,\n  Overlay,\n  Content,\n  Header,\n  Body,\n  Footer,\n  Close,\n  CloseButton,\n  Title,\n  Description,\n})\n\nDialog.displayName = 'Dialog'\n\nexport { type DialogProps } from './Dialog'\nexport { type ContentProps as DialogContentProps } from './DialogContent'\nexport { type HeaderProps as DialogHeaderProps } from './DialogHeader'\nexport { type BodyProps as DialogBodyProps } from './DialogBody'\nexport { type FooterProps as DialogFooterProps } from './DialogFooter'\nexport { type TriggerProps as DialogTriggerProps } from './DialogTrigger'\nexport { type OverlayProps as DialogOverlayProps } from './DialogOverlay'\nexport { type PortalProps as DialogPortalProps } from './DialogPortal'\nexport { type TitleProps as DialogTitleProps } from './DialogTitle'\nexport { type DescriptionProps as DialogDescriptionProps } from './DialogDescription'\nexport { type CloseProps as DialogCloseProps } from './DialogClose'\nexport { type CloseButtonProps as DialogCloseButtonProps } from './DialogCloseButton'\n"],"mappings":"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"}

package/dist/drawer/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../icon-CRPcdgYp.js`),t=require(`../icon-button-CTe0v0g7.js`),n=require(`../useRenderSlot-C4UVWhDN.js`);let r=require(`class-variance-authority`),i=require(`react`),a=require(`react/jsx-runtime`),o=require(`@spark-ui/hooks/use-merge-refs`),s=require(`@spark-ui/hooks/use-scroll-overflow`),c=require(`@spark-ui/icons/Close`),l=require(`@base-ui/react/dialog`);var u=(0,i.createContext)(null),d=({children:e,withFade:t=!1})=>(0,a.jsx)(u.Provider,{value:{withFade:t},children:e}),f=()=>{let e=(0,i.useContext)(u);if(!e)throw Error(`useDrawer must be used within a Drawer provider`);return e},p=({onOpenChange:e,withFade:t=!1,...n})=>{let r=e?(t,n)=>{e(t)}:void 0;return(0,a.jsx)(d,{withFade:t,children:(0,a.jsx)(l.Dialog.Root,{"data-spark-component":`drawer`,onOpenChange:r,...n})})};p.displayName=`Drawer.Root`;var m=(0,r.cva)([`grow`,`overflow-y-auto`,`outline-hidden`,`focus-visible:u-outline`],{variants:{inset:{true:``,false:`px-xl py-lg`}},defaultVariants:{inset:!1}}),h=({children:e,inset:t=!1,className:n,ref:r,...c})=>{let l=(0,i.useRef)(null),u=(0,o.useMergeRefs)(r,l),{withFade:d}=f(),{overflow:p}=(0,s.useScrollOverflow)(l);return(0,a.jsx)(`div`,{"data-spark-component":`drawer-body`,ref:u,className:m({inset:t,className:n}),style:{...d&&{maskImage:`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))`,maskSize:`100% calc(100% + ${p.top?`0px`:`44px`} + ${p.bottom?`0px`:`44px`})`,maskPosition:`0 ${p.top?`0px`:`-44px`}`}},...c,children:e})};h.displayName=`Drawer.Body`;var g=({asChild:e=!1,...t})=>{let r=n.t(e,`button`);return(0,a.jsx)(l.Dialog.Close,{"data-spark-component":`drawer-close`,render:r,...t})};g.displayName=`Drawer.Close`;var _=({"aria-label":n,className:i,size:o=`md`,intent:s=`neutral`,design:l=`ghost`,children:u=(0,a.jsx)(c.Close,{}),ref:d,...f})=>(0,a.jsx)(g,{"data-spark-component":`drawer-close-button`,ref:d,className:(0,r.cx)([`absolute`,`top-sm`,`right-xl`],i),asChild:!0,...f,children:(0,a.jsx)(t.t,{intent:s,size:o,design:l,"aria-label":n,children:(0,a.jsx)(e.t,{children:u})})});_.displayName=`Drawer.CloseButton`;var v=(0,r.cva)([`fixed z-modal flex flex-col bg-surface shadow-md`,`data-open:animation-duration-400 data-closed:animation-duration-200`,`data-nested-dialog-open:after:pointer-events-none`,`after:bg-transparent`,`after:transition-all`,`after:duration-200`,`data-nested-dialog-open:after:inset-0`,`data-nested-dialog-open:after:absolute`,`data-nested-dialog-open:after:rounded-[inherit]`,`data-nested-dialog-open:after:bg-overlay/dim-3`],{variants:{size:{sm:``,md:``,lg:``,fluid:``,fullscreen:`h-screen w-screen`},side:{right:[`inset-y-0 right-0`,`data-open:animate-slide-in-right `,`data-closed:animate-slide-out-right`],left:[`inset-y-0 left-0`,`data-open:animate-slide-in-left`,`data-closed:animate-slide-out-left`],top:[`top-0 left-0`,`w-screen`,`data-open:animate-slide-in-top`,`data-closed:animate-slide-out-top`],bottom:[`bottom-0 left-0`,`w-screen`,`data-open:animate-slide-in-bottom`,`data-closed:animate-slide-out-bottom`]}},compoundVariants:[{side:[`right`,`left`],size:`sm`,class:[`w-sz-480`,`max-w-full`]},{side:[`right`,`left`],size:`md`,class:[`w-sz-672`,`max-w-full`]},{side:[`right`,`left`],size:`lg`,class:[`w-sz-864`,`max-w-full`]},{side:[`left`,`right`],size:`fluid`,class:[`w-auto`,`max-w-full`]},{side:[`top`,`bottom`],size:`sm`,class:[`h-sz-480`,`max-h-full`]},{side:[`top`,`bottom`],size:`md`,class:[`h-sz-672`,`max-h-full`]},{side:[`top`,`bottom`],size:`lg`,class:[`h-sz-864`,`max-h-full`]},{side:[`top`,`bottom`],size:`fluid`,class:[`h-auto`,`max-h-full`]}],defaultVariants:{side:`right`,size:`md`}}),y=({className:e,size:t=`md`,side:n=`right`,ref:i,...o})=>(0,a.jsx)(l.Dialog.Popup,{ref:i,"data-spark-component":`drawer-content`,role:`dialog`,className:i=>(0,r.cx)(v({size:t,side:n,className:typeof e==`function`?e(i):e})),...o});y.displayName=`Drawer.Content`;var b=e=>(0,a.jsx)(l.Dialog.Description,{"data-spark-component":`drawer-description`,...e});b.displayName=`Drawer.Description`;var x=({className:e,ref:t,...n})=>(0,a.jsx)(`footer`,{"data-spark-component":`drawer-footer`,ref:t,className:(0,r.cx)([`px-xl`,`py-lg`],e),...n});x.displayName=`Drawer.Footer`;var S=({children:e,className:t,ref:n,...i})=>(0,a.jsx)(`header`,{"data-spark-component":`drawer-header`,ref:n,className:(0,r.cx)([`px-xl`,`py-lg`],t),...i,children:e});S.displayName=`Dialog.Header`;var C=({className:e,...t})=>(0,a.jsx)(l.Dialog.Backdrop,{"data-spark-component":`drawer-overlay`,className:t=>(0,r.cx)(`z-overlay fixed top-0 left-0 h-screen w-screen`,`bg-overlay/dim-1`,`data-starting-style:animate-fade-in`,`data-ending-style:animate-fade-out`,typeof e==`function`?e(t):e),...t});C.displayName=`Drawer.Overlay`;var w=({className:e,...t})=>(0,a.jsx)(l.Dialog.Portal,{"data-spark-component":`drawer-portal`,className:(0,r.cx)(e,`z-modal absolute`),...t});w.displayName=`Drawer.Portal`;var T=({className:e,...t})=>(0,a.jsx)(l.Dialog.Title,{"data-spark-component":`drawer-title`,className:(0,r.cx)(`text-headline-2 text-on-surface`,e),...t});T.displayName=`Drawer.Title`;var E=({asChild:e=!1,...t})=>{let r=n.t(e,`button`);return(0,a.jsx)(l.Dialog.Trigger,{"data-spark-component":`drawer-trigger`,render:r,...t})};E.displayName=`Drawer.Trigger`;var D=Object.assign(p,{Trigger:E,Portal:w,Overlay:C,Content:y,Header:S,Body:h,Footer:x,Close:g,CloseButton:_,Title:T,Description:b});D.displayName=`Drawer`,E.displayName=`Drawer.Trigger`,w.displayName=`Drawer.Portal`,C.displayName=`Drawer.Overlay`,y.displayName=`Drawer.Content`,S.displayName=`Drawer.Header`,h.displayName=`Drawer.Body`,x.displayName=`Drawer.Footer`,g.displayName=`Drawer.Close`,_.displayName=`Drawer.CloseButton`,T.displayName=`Drawer.Title`,b.displayName=`Drawer.Description`,exports.Drawer=D;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../icon-CRPcdgYp.js`),t=require(`../icon-button-CTe0v0g7.js`),n=require(`../useRenderSlot-C4UVWhDN.js`);let r=require(`class-variance-authority`),i=require(`react`),a=require(`react/jsx-runtime`),o=require(`@spark-ui/hooks/use-merge-refs`),s=require(`@spark-ui/hooks/use-scroll-overflow`),c=require(`@spark-ui/icons/Close`),l=require(`@base-ui/react/dialog`);var u=(0,i.createContext)(null),d=({children:e,withFade:t=!1})=>(0,a.jsx)(u,{value:{withFade:t},children:e}),f=()=>{let e=(0,i.useContext)(u);if(!e)throw Error(`useDrawer must be used within a Drawer provider`);return e},p=({onOpenChange:e,withFade:t=!1,...n})=>{let r=e?(t,n)=>{e(t)}:void 0;return(0,a.jsx)(d,{withFade:t,children:(0,a.jsx)(l.Dialog.Root,{"data-spark-component":`drawer`,onOpenChange:r,...n})})};p.displayName=`Drawer.Root`;var m=(0,r.cva)([`grow`,`overflow-y-auto`,`outline-hidden`,`focus-visible:u-outline`],{variants:{inset:{true:``,false:`px-xl py-lg`}},defaultVariants:{inset:!1}}),h=({children:e,inset:t=!1,className:n,ref:r,...c})=>{let l=(0,i.useRef)(null),u=(0,o.useMergeRefs)(r,l),{withFade:d}=f(),{overflow:p}=(0,s.useScrollOverflow)(l);return(0,a.jsx)(`div`,{"data-spark-component":`drawer-body`,ref:u,className:m({inset:t,className:n}),style:{...d&&{maskImage:`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))`,maskSize:`100% calc(100% + ${p.top?`0px`:`44px`} + ${p.bottom?`0px`:`44px`})`,maskPosition:`0 ${p.top?`0px`:`-44px`}`}},...c,children:e})};h.displayName=`Drawer.Body`;var g=({asChild:e=!1,...t})=>{let r=n.t(e,`button`);return(0,a.jsx)(l.Dialog.Close,{"data-spark-component":`drawer-close`,render:r,...t})};g.displayName=`Drawer.Close`;var _=({"aria-label":n,className:i,size:o=`md`,intent:s=`neutral`,design:l=`ghost`,children:u=(0,a.jsx)(c.Close,{}),ref:d,...f})=>(0,a.jsx)(g,{"data-spark-component":`drawer-close-button`,ref:d,className:(0,r.cx)([`absolute`,`top-sm`,`right-xl`],i),asChild:!0,...f,children:(0,a.jsx)(t.t,{intent:s,size:o,design:l,"aria-label":n,children:(0,a.jsx)(e.t,{children:u})})});_.displayName=`Drawer.CloseButton`;var v=(0,r.cva)([`fixed z-modal flex flex-col bg-surface shadow-md`,`data-open:animation-duration-400 data-closed:animation-duration-200`,`data-nested-dialog-open:after:pointer-events-none`,`after:bg-transparent`,`after:transition-all`,`after:duration-200`,`data-nested-dialog-open:after:inset-0`,`data-nested-dialog-open:after:absolute`,`data-nested-dialog-open:after:rounded-[inherit]`,`data-nested-dialog-open:after:bg-overlay/dim-3`],{variants:{size:{sm:``,md:``,lg:``,fluid:``,fullscreen:`h-screen w-screen`},side:{right:[`inset-y-0 right-0`,`data-open:animate-slide-in-right `,`data-closed:animate-slide-out-right`],left:[`inset-y-0 left-0`,`data-open:animate-slide-in-left`,`data-closed:animate-slide-out-left`],top:[`top-0 left-0`,`w-screen`,`data-open:animate-slide-in-top`,`data-closed:animate-slide-out-top`],bottom:[`bottom-0 left-0`,`w-screen`,`data-open:animate-slide-in-bottom`,`data-closed:animate-slide-out-bottom`]}},compoundVariants:[{side:[`right`,`left`],size:`sm`,class:[`w-sz-480`,`max-w-full`]},{side:[`right`,`left`],size:`md`,class:[`w-sz-672`,`max-w-full`]},{side:[`right`,`left`],size:`lg`,class:[`w-sz-864`,`max-w-full`]},{side:[`left`,`right`],size:`fluid`,class:[`w-auto`,`max-w-full`]},{side:[`top`,`bottom`],size:`sm`,class:[`h-sz-480`,`max-h-full`]},{side:[`top`,`bottom`],size:`md`,class:[`h-sz-672`,`max-h-full`]},{side:[`top`,`bottom`],size:`lg`,class:[`h-sz-864`,`max-h-full`]},{side:[`top`,`bottom`],size:`fluid`,class:[`h-auto`,`max-h-full`]}],defaultVariants:{side:`right`,size:`md`}}),y=({className:e,size:t=`md`,side:n=`right`,ref:i,...o})=>(0,a.jsx)(l.Dialog.Popup,{ref:i,"data-spark-component":`drawer-content`,role:`dialog`,className:i=>(0,r.cx)(v({size:t,side:n,className:typeof e==`function`?e(i):e})),...o});y.displayName=`Drawer.Content`;var b=e=>(0,a.jsx)(l.Dialog.Description,{"data-spark-component":`drawer-description`,...e});b.displayName=`Drawer.Description`;var x=({className:e,ref:t,...n})=>(0,a.jsx)(`footer`,{"data-spark-component":`drawer-footer`,ref:t,className:(0,r.cx)([`px-xl`,`py-lg`],e),...n});x.displayName=`Drawer.Footer`;var S=({children:e,className:t,ref:n,...i})=>(0,a.jsx)(`header`,{"data-spark-component":`drawer-header`,ref:n,className:(0,r.cx)([`px-xl`,`py-lg`],t),...i,children:e});S.displayName=`Dialog.Header`;var C=({className:e,...t})=>(0,a.jsx)(l.Dialog.Backdrop,{"data-spark-component":`drawer-overlay`,className:t=>(0,r.cx)(`z-overlay fixed top-0 left-0 h-screen w-screen`,`bg-overlay/dim-1`,`data-starting-style:animate-fade-in`,`data-ending-style:animate-fade-out`,typeof e==`function`?e(t):e),...t});C.displayName=`Drawer.Overlay`;var w=({className:e,...t})=>(0,a.jsx)(l.Dialog.Portal,{"data-spark-component":`drawer-portal`,className:(0,r.cx)(e,`z-modal absolute`),...t});w.displayName=`Drawer.Portal`;var T=({className:e,...t})=>(0,a.jsx)(l.Dialog.Title,{"data-spark-component":`drawer-title`,className:(0,r.cx)(`text-headline-2 text-on-surface`,e),...t});T.displayName=`Drawer.Title`;var E=({asChild:e=!1,...t})=>{let r=n.t(e,`button`);return(0,a.jsx)(l.Dialog.Trigger,{"data-spark-component":`drawer-trigger`,render:r,...t})};E.displayName=`Drawer.Trigger`;var D=Object.assign(p,{Trigger:E,Portal:w,Overlay:C,Content:y,Header:S,Body:h,Footer:x,Close:g,CloseButton:_,Title:T,Description:b});D.displayName=`Drawer`,E.displayName=`Drawer.Trigger`,w.displayName=`Drawer.Portal`,C.displayName=`Drawer.Overlay`,y.displayName=`Drawer.Content`,S.displayName=`Drawer.Header`,h.displayName=`Drawer.Body`,x.displayName=`Drawer.Footer`,g.displayName=`Drawer.Close`,_.displayName=`Drawer.CloseButton`,T.displayName=`Drawer.Title`,b.displayName=`Drawer.Description`,exports.Drawer=D;
 //# sourceMappingURL=index.js.map

package/dist/drawer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/drawer/DrawerContext.tsx","../../src/drawer/Drawer.tsx","../../src/drawer/DrawerBody.styles.ts","../../src/drawer/DrawerBody.tsx","../../src/drawer/DrawerClose.tsx","../../src/drawer/DrawerCloseButton.tsx","../../src/drawer/DrawerContent.styles.tsx","../../src/drawer/DrawerContent.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 { 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 { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { ComponentProps, type ReactElement } from 'react'\n\nimport { DrawerProvider } from './DrawerContext'\n\nexport interface DrawerProps extends Omit<\n  ComponentProps<typeof BaseDialog.Root>,\n  'onOpenChange' | 'render'\n> {\n  /**\n   * Specifies if the dialog is open or not.\n   */\n  open?: boolean\n  /**\n   * Default open state.\n   */\n  defaultOpen?: boolean\n  /**\n   * Handler executed on every dialog open state change.\n   */\n  onOpenChange?: (open: boolean) => void\n  /**\n   * Specifies if the dialog is a modal.\n   */\n  modal?: boolean\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   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n}\n\nexport const Drawer = ({ onOpenChange, withFade = false, ...props }: DrawerProps): ReactElement => {\n  const handleOpenChange = onOpenChange\n    ? (open: boolean, _eventDetails: unknown) => {\n        onOpenChange(open)\n      }\n    : undefined\n\n  return (\n    <DrawerProvider withFade={withFade}>\n      <BaseDialog.Root data-spark-component=\"drawer\" onOpenChange={handleOpenChange} {...props} />\n    </DrawerProvider>\n  )\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 { 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\n/**\n * The scrollable body section of the drawer. Renders a <div> element.\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 { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface DrawerCloseProps extends Omit<ComponentProps<typeof BaseDialog.Close>, 'render'> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button that closes the drawer. Renders a <button> element.\n */\nexport const DrawerClose = ({ asChild = false, ...props }: DrawerCloseProps) => {\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return <BaseDialog.Close data-spark-component=\"drawer-close\" render={renderSlot} {...props} />\n}\n\nDrawerClose.displayName = 'Drawer.Close'\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\n/**\n * A styled close button positioned in the drawer header. Renders a <button> element.\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 { cva, VariantProps } from 'class-variance-authority'\n\nexport const drawerContentStyles = cva(\n  [\n    'fixed z-modal flex flex-col bg-surface shadow-md',\n    // Base UI uses data-open and data-closed for transitions\n    'data-open:animation-duration-400 data-closed:animation-duration-200',\n    // Nested dialog effect\n    'data-nested-dialog-open:after:pointer-events-none',\n    'after:bg-transparent',\n    'after:transition-all',\n    'after:duration-200',\n    'data-nested-dialog-open:after:inset-0',\n    'data-nested-dialog-open:after:absolute',\n    'data-nested-dialog-open:after:rounded-[inherit]',\n    'data-nested-dialog-open:after:bg-overlay/dim-3',\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-open:animate-slide-in-right ',\n          'data-closed:animate-slide-out-right',\n        ],\n        left: [\n          'inset-y-0 left-0',\n          'data-open:animate-slide-in-left',\n          'data-closed:animate-slide-out-left',\n        ],\n        top: [\n          'top-0 left-0',\n          'w-screen',\n          'data-open:animate-slide-in-top',\n          'data-closed:animate-slide-out-top',\n        ],\n        bottom: [\n          'bottom-0 left-0',\n          'w-screen',\n          'data-open:animate-slide-in-bottom',\n          'data-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 BaseDialog } from '@base-ui/react/dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nimport { drawerContentStyles, type DrawerContentStylesProps } from './DrawerContent.styles'\n\nexport interface DrawerContentProps\n  extends Omit<ComponentProps<typeof BaseDialog.Popup>, 'render'>, DrawerContentStylesProps {\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The popup element that contains the drawer content. Renders a <div> element.\n */\nexport const DrawerContent = ({\n  className,\n  size = 'md',\n  side = 'right',\n  ref,\n  ...rest\n}: DrawerContentProps) => {\n  return (\n    <BaseDialog.Popup\n      ref={ref}\n      data-spark-component=\"drawer-content\"\n      role=\"dialog\"\n      className={state =>\n        cx(\n          drawerContentStyles({\n            size,\n            side,\n            className: typeof className === 'function' ? className(state) : className,\n          })\n        )\n      }\n      {...rest}\n    />\n  )\n}\n\nDrawerContent.displayName = 'Drawer.Content'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface DrawerDescriptionProps extends Omit<\n  ComponentProps<typeof BaseDialog.Description>,\n  'render'\n> {\n  ref?: Ref<HTMLParagraphElement>\n}\n\n/**\n * A paragraph with additional information about the drawer. Renders a <p> element.\n */\nexport const DrawerDescription = (props: DrawerDescriptionProps) => {\n  return <BaseDialog.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\n/**\n * The footer section of the drawer, typically containing action buttons. Renders a <footer> element.\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\n/**\n * The header section of the drawer. Renders a <header> element.\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 { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface DrawerOverlayProps extends Omit<\n  ComponentProps<typeof BaseDialog.Backdrop>,\n  'render'\n> {\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The backdrop element that dims the rest of the page. Renders a <div> element.\n */\nexport const DrawerOverlay = ({ className, ...props }: DrawerOverlayProps) => {\n  return (\n    <BaseDialog.Backdrop\n      data-spark-component=\"drawer-overlay\"\n      className={state =>\n        cx(\n          'z-overlay fixed top-0 left-0 h-screen w-screen',\n          'bg-overlay/dim-1',\n          // Base UI automatically adds data-[starting-style] and data-[ending-style] attributes\n          'data-starting-style:animate-fade-in',\n          'data-ending-style:animate-fade-out',\n          typeof className === 'function' ? className(state) : className\n        )\n      }\n      {...props}\n    />\n  )\n}\n\nDrawerOverlay.displayName = 'Drawer.Overlay'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps } from 'react'\n\nexport type DrawerPortalProps = ComponentProps<typeof BaseDialog.Portal>\n\n/**\n * A portal that renders the drawer in a different part of the DOM. Renders a <div> element.\n */\nexport const DrawerPortal = ({ className, ...props }: DrawerPortalProps) => {\n  return (\n    <BaseDialog.Portal\n      data-spark-component=\"drawer-portal\"\n      className={cx(className, 'z-modal absolute')}\n      {...props}\n    />\n  )\n}\n\nDrawerPortal.displayName = 'Drawer.Portal'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface DrawerTitleProps extends Omit<ComponentProps<typeof BaseDialog.Title>, 'render'> {\n  ref?: Ref<HTMLHeadingElement>\n}\n\n/**\n * The title of the drawer, announced to assistive technology. Renders an <h2> element.\n */\nexport const DrawerTitle = ({ className, ...props }: DrawerTitleProps) => {\n  return (\n    <BaseDialog.Title\n      data-spark-component=\"drawer-title\"\n      className={cx('text-headline-2 text-on-surface', className)}\n      {...props}\n    />\n  )\n}\n\nDrawerTitle.displayName = 'Drawer.Title'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface DrawerTriggerProps extends Omit<\n  ComponentProps<typeof BaseDialog.Trigger>,\n  'render'\n> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button that opens the drawer. Renders a <button> element.\n */\nexport const DrawerTrigger = ({ asChild = false, ...props }: DrawerTriggerProps) => {\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return <BaseDialog.Trigger data-spark-component=\"drawer-trigger\" render={renderSlot} {...props} />\n}\n\nDrawerTrigger.displayName = 'Drawer.Trigger'\n","import { Drawer as Root } from './Drawer'\nimport { DrawerBody } from './DrawerBody'\nimport { DrawerClose } from './DrawerClose'\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\n/**\n * A panel that slides in from the edge of the screen, typically used for navigation or displaying additional content.\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  Close: typeof DrawerClose\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  Close: DrawerClose,\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'\nDrawerClose.displayName = 'Drawer.Close'\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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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/drawer/DrawerContext.tsx","../../src/drawer/Drawer.tsx","../../src/drawer/DrawerBody.styles.ts","../../src/drawer/DrawerBody.tsx","../../src/drawer/DrawerClose.tsx","../../src/drawer/DrawerCloseButton.tsx","../../src/drawer/DrawerContent.styles.tsx","../../src/drawer/DrawerContent.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 { 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\n      value={{\n        withFade,\n      }}\n    >\n      {childrenProp}\n    </DrawerContext>\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 { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { ComponentProps, type ReactElement } from 'react'\n\nimport { DrawerProvider } from './DrawerContext'\n\nexport interface DrawerProps extends Omit<\n  ComponentProps<typeof BaseDialog.Root>,\n  'onOpenChange' | 'render'\n> {\n  /**\n   * Specifies if the dialog is open or not.\n   */\n  open?: boolean\n  /**\n   * Default open state.\n   */\n  defaultOpen?: boolean\n  /**\n   * Handler executed on every dialog open state change.\n   */\n  onOpenChange?: (open: boolean) => void\n  /**\n   * Specifies if the dialog is a modal.\n   */\n  modal?: boolean\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   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n}\n\nexport const Drawer = ({ onOpenChange, withFade = false, ...props }: DrawerProps): ReactElement => {\n  const handleOpenChange = onOpenChange\n    ? (open: boolean, _eventDetails: unknown) => {\n        onOpenChange(open)\n      }\n    : undefined\n\n  return (\n    <DrawerProvider withFade={withFade}>\n      <BaseDialog.Root data-spark-component=\"drawer\" onOpenChange={handleOpenChange} {...props} />\n    </DrawerProvider>\n  )\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 { 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\n/**\n * The scrollable body section of the drawer. Renders a <div> element.\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 { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface DrawerCloseProps extends Omit<ComponentProps<typeof BaseDialog.Close>, 'render'> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button that closes the drawer. Renders a <button> element.\n */\nexport const DrawerClose = ({ asChild = false, ...props }: DrawerCloseProps) => {\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return <BaseDialog.Close data-spark-component=\"drawer-close\" render={renderSlot} {...props} />\n}\n\nDrawerClose.displayName = 'Drawer.Close'\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\n/**\n * A styled close button positioned in the drawer header. Renders a <button> element.\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 { cva, VariantProps } from 'class-variance-authority'\n\nexport const drawerContentStyles = cva(\n  [\n    'fixed z-modal flex flex-col bg-surface shadow-md',\n    // Base UI uses data-open and data-closed for transitions\n    'data-open:animation-duration-400 data-closed:animation-duration-200',\n    // Nested dialog effect\n    'data-nested-dialog-open:after:pointer-events-none',\n    'after:bg-transparent',\n    'after:transition-all',\n    'after:duration-200',\n    'data-nested-dialog-open:after:inset-0',\n    'data-nested-dialog-open:after:absolute',\n    'data-nested-dialog-open:after:rounded-[inherit]',\n    'data-nested-dialog-open:after:bg-overlay/dim-3',\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-open:animate-slide-in-right ',\n          'data-closed:animate-slide-out-right',\n        ],\n        left: [\n          'inset-y-0 left-0',\n          'data-open:animate-slide-in-left',\n          'data-closed:animate-slide-out-left',\n        ],\n        top: [\n          'top-0 left-0',\n          'w-screen',\n          'data-open:animate-slide-in-top',\n          'data-closed:animate-slide-out-top',\n        ],\n        bottom: [\n          'bottom-0 left-0',\n          'w-screen',\n          'data-open:animate-slide-in-bottom',\n          'data-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 BaseDialog } from '@base-ui/react/dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nimport { drawerContentStyles, type DrawerContentStylesProps } from './DrawerContent.styles'\n\nexport interface DrawerContentProps\n  extends Omit<ComponentProps<typeof BaseDialog.Popup>, 'render'>, DrawerContentStylesProps {\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The popup element that contains the drawer content. Renders a <div> element.\n */\nexport const DrawerContent = ({\n  className,\n  size = 'md',\n  side = 'right',\n  ref,\n  ...rest\n}: DrawerContentProps) => {\n  return (\n    <BaseDialog.Popup\n      ref={ref}\n      data-spark-component=\"drawer-content\"\n      role=\"dialog\"\n      className={state =>\n        cx(\n          drawerContentStyles({\n            size,\n            side,\n            className: typeof className === 'function' ? className(state) : className,\n          })\n        )\n      }\n      {...rest}\n    />\n  )\n}\n\nDrawerContent.displayName = 'Drawer.Content'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface DrawerDescriptionProps extends Omit<\n  ComponentProps<typeof BaseDialog.Description>,\n  'render'\n> {\n  ref?: Ref<HTMLParagraphElement>\n}\n\n/**\n * A paragraph with additional information about the drawer. Renders a <p> element.\n */\nexport const DrawerDescription = (props: DrawerDescriptionProps) => {\n  return <BaseDialog.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\n/**\n * The footer section of the drawer, typically containing action buttons. Renders a <footer> element.\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\n/**\n * The header section of the drawer. Renders a <header> element.\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 { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface DrawerOverlayProps extends Omit<\n  ComponentProps<typeof BaseDialog.Backdrop>,\n  'render'\n> {\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The backdrop element that dims the rest of the page. Renders a <div> element.\n */\nexport const DrawerOverlay = ({ className, ...props }: DrawerOverlayProps) => {\n  return (\n    <BaseDialog.Backdrop\n      data-spark-component=\"drawer-overlay\"\n      className={state =>\n        cx(\n          'z-overlay fixed top-0 left-0 h-screen w-screen',\n          'bg-overlay/dim-1',\n          // Base UI automatically adds data-[starting-style] and data-[ending-style] attributes\n          'data-starting-style:animate-fade-in',\n          'data-ending-style:animate-fade-out',\n          typeof className === 'function' ? className(state) : className\n        )\n      }\n      {...props}\n    />\n  )\n}\n\nDrawerOverlay.displayName = 'Drawer.Overlay'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps } from 'react'\n\nexport type DrawerPortalProps = ComponentProps<typeof BaseDialog.Portal>\n\n/**\n * A portal that renders the drawer in a different part of the DOM. Renders a <div> element.\n */\nexport const DrawerPortal = ({ className, ...props }: DrawerPortalProps) => {\n  return (\n    <BaseDialog.Portal\n      data-spark-component=\"drawer-portal\"\n      className={cx(className, 'z-modal absolute')}\n      {...props}\n    />\n  )\n}\n\nDrawerPortal.displayName = 'Drawer.Portal'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface DrawerTitleProps extends Omit<ComponentProps<typeof BaseDialog.Title>, 'render'> {\n  ref?: Ref<HTMLHeadingElement>\n}\n\n/**\n * The title of the drawer, announced to assistive technology. Renders an <h2> element.\n */\nexport const DrawerTitle = ({ className, ...props }: DrawerTitleProps) => {\n  return (\n    <BaseDialog.Title\n      data-spark-component=\"drawer-title\"\n      className={cx('text-headline-2 text-on-surface', className)}\n      {...props}\n    />\n  )\n}\n\nDrawerTitle.displayName = 'Drawer.Title'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface DrawerTriggerProps extends Omit<\n  ComponentProps<typeof BaseDialog.Trigger>,\n  'render'\n> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button that opens the drawer. Renders a <button> element.\n */\nexport const DrawerTrigger = ({ asChild = false, ...props }: DrawerTriggerProps) => {\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return <BaseDialog.Trigger data-spark-component=\"drawer-trigger\" render={renderSlot} {...props} />\n}\n\nDrawerTrigger.displayName = 'Drawer.Trigger'\n","import { Drawer as Root } from './Drawer'\nimport { DrawerBody } from './DrawerBody'\nimport { DrawerClose } from './DrawerClose'\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\n/**\n * A panel that slides in from the edge of the screen, typically used for navigation or displaying additional content.\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  Close: typeof DrawerClose\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  Close: DrawerClose,\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'\nDrawerClose.displayName = 'Drawer.Close'\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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"}

package/dist/drawer/index.mjs

@@ -9,7 +9,7 @@ import { useScrollOverflow as u } from "@spark-ui/hooks/use-scroll-overflow";
 import { Close as d } from "@spark-ui/icons/Close";
 import { Dialog as f } from "@base-ui/react/dialog";
 //#region src/drawer/DrawerContext.tsx
-var p = a(null), m = ({ children: e, withFade: t = !1 }) => /* @__PURE__ */ c(p.Provider, {
+var p = a(null), m = ({ children: e, withFade: t = !1 }) => /* @__PURE__ */ c(p, {
 	value: { withFade: t },
 	children: e
 }), h = () => {

package/dist/drawer/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/drawer/DrawerContext.tsx","../../src/drawer/Drawer.tsx","../../src/drawer/DrawerBody.styles.ts","../../src/drawer/DrawerBody.tsx","../../src/drawer/DrawerClose.tsx","../../src/drawer/DrawerCloseButton.tsx","../../src/drawer/DrawerContent.styles.tsx","../../src/drawer/DrawerContent.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 { 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 { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { ComponentProps, type ReactElement } from 'react'\n\nimport { DrawerProvider } from './DrawerContext'\n\nexport interface DrawerProps extends Omit<\n  ComponentProps<typeof BaseDialog.Root>,\n  'onOpenChange' | 'render'\n> {\n  /**\n   * Specifies if the dialog is open or not.\n   */\n  open?: boolean\n  /**\n   * Default open state.\n   */\n  defaultOpen?: boolean\n  /**\n   * Handler executed on every dialog open state change.\n   */\n  onOpenChange?: (open: boolean) => void\n  /**\n   * Specifies if the dialog is a modal.\n   */\n  modal?: boolean\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   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n}\n\nexport const Drawer = ({ onOpenChange, withFade = false, ...props }: DrawerProps): ReactElement => {\n  const handleOpenChange = onOpenChange\n    ? (open: boolean, _eventDetails: unknown) => {\n        onOpenChange(open)\n      }\n    : undefined\n\n  return (\n    <DrawerProvider withFade={withFade}>\n      <BaseDialog.Root data-spark-component=\"drawer\" onOpenChange={handleOpenChange} {...props} />\n    </DrawerProvider>\n  )\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 { 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\n/**\n * The scrollable body section of the drawer. Renders a <div> element.\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 { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface DrawerCloseProps extends Omit<ComponentProps<typeof BaseDialog.Close>, 'render'> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button that closes the drawer. Renders a <button> element.\n */\nexport const DrawerClose = ({ asChild = false, ...props }: DrawerCloseProps) => {\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return <BaseDialog.Close data-spark-component=\"drawer-close\" render={renderSlot} {...props} />\n}\n\nDrawerClose.displayName = 'Drawer.Close'\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\n/**\n * A styled close button positioned in the drawer header. Renders a <button> element.\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 { cva, VariantProps } from 'class-variance-authority'\n\nexport const drawerContentStyles = cva(\n  [\n    'fixed z-modal flex flex-col bg-surface shadow-md',\n    // Base UI uses data-open and data-closed for transitions\n    'data-open:animation-duration-400 data-closed:animation-duration-200',\n    // Nested dialog effect\n    'data-nested-dialog-open:after:pointer-events-none',\n    'after:bg-transparent',\n    'after:transition-all',\n    'after:duration-200',\n    'data-nested-dialog-open:after:inset-0',\n    'data-nested-dialog-open:after:absolute',\n    'data-nested-dialog-open:after:rounded-[inherit]',\n    'data-nested-dialog-open:after:bg-overlay/dim-3',\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-open:animate-slide-in-right ',\n          'data-closed:animate-slide-out-right',\n        ],\n        left: [\n          'inset-y-0 left-0',\n          'data-open:animate-slide-in-left',\n          'data-closed:animate-slide-out-left',\n        ],\n        top: [\n          'top-0 left-0',\n          'w-screen',\n          'data-open:animate-slide-in-top',\n          'data-closed:animate-slide-out-top',\n        ],\n        bottom: [\n          'bottom-0 left-0',\n          'w-screen',\n          'data-open:animate-slide-in-bottom',\n          'data-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 BaseDialog } from '@base-ui/react/dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nimport { drawerContentStyles, type DrawerContentStylesProps } from './DrawerContent.styles'\n\nexport interface DrawerContentProps\n  extends Omit<ComponentProps<typeof BaseDialog.Popup>, 'render'>, DrawerContentStylesProps {\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The popup element that contains the drawer content. Renders a <div> element.\n */\nexport const DrawerContent = ({\n  className,\n  size = 'md',\n  side = 'right',\n  ref,\n  ...rest\n}: DrawerContentProps) => {\n  return (\n    <BaseDialog.Popup\n      ref={ref}\n      data-spark-component=\"drawer-content\"\n      role=\"dialog\"\n      className={state =>\n        cx(\n          drawerContentStyles({\n            size,\n            side,\n            className: typeof className === 'function' ? className(state) : className,\n          })\n        )\n      }\n      {...rest}\n    />\n  )\n}\n\nDrawerContent.displayName = 'Drawer.Content'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface DrawerDescriptionProps extends Omit<\n  ComponentProps<typeof BaseDialog.Description>,\n  'render'\n> {\n  ref?: Ref<HTMLParagraphElement>\n}\n\n/**\n * A paragraph with additional information about the drawer. Renders a <p> element.\n */\nexport const DrawerDescription = (props: DrawerDescriptionProps) => {\n  return <BaseDialog.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\n/**\n * The footer section of the drawer, typically containing action buttons. Renders a <footer> element.\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\n/**\n * The header section of the drawer. Renders a <header> element.\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 { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface DrawerOverlayProps extends Omit<\n  ComponentProps<typeof BaseDialog.Backdrop>,\n  'render'\n> {\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The backdrop element that dims the rest of the page. Renders a <div> element.\n */\nexport const DrawerOverlay = ({ className, ...props }: DrawerOverlayProps) => {\n  return (\n    <BaseDialog.Backdrop\n      data-spark-component=\"drawer-overlay\"\n      className={state =>\n        cx(\n          'z-overlay fixed top-0 left-0 h-screen w-screen',\n          'bg-overlay/dim-1',\n          // Base UI automatically adds data-[starting-style] and data-[ending-style] attributes\n          'data-starting-style:animate-fade-in',\n          'data-ending-style:animate-fade-out',\n          typeof className === 'function' ? className(state) : className\n        )\n      }\n      {...props}\n    />\n  )\n}\n\nDrawerOverlay.displayName = 'Drawer.Overlay'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps } from 'react'\n\nexport type DrawerPortalProps = ComponentProps<typeof BaseDialog.Portal>\n\n/**\n * A portal that renders the drawer in a different part of the DOM. Renders a <div> element.\n */\nexport const DrawerPortal = ({ className, ...props }: DrawerPortalProps) => {\n  return (\n    <BaseDialog.Portal\n      data-spark-component=\"drawer-portal\"\n      className={cx(className, 'z-modal absolute')}\n      {...props}\n    />\n  )\n}\n\nDrawerPortal.displayName = 'Drawer.Portal'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface DrawerTitleProps extends Omit<ComponentProps<typeof BaseDialog.Title>, 'render'> {\n  ref?: Ref<HTMLHeadingElement>\n}\n\n/**\n * The title of the drawer, announced to assistive technology. Renders an <h2> element.\n */\nexport const DrawerTitle = ({ className, ...props }: DrawerTitleProps) => {\n  return (\n    <BaseDialog.Title\n      data-spark-component=\"drawer-title\"\n      className={cx('text-headline-2 text-on-surface', className)}\n      {...props}\n    />\n  )\n}\n\nDrawerTitle.displayName = 'Drawer.Title'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface DrawerTriggerProps extends Omit<\n  ComponentProps<typeof BaseDialog.Trigger>,\n  'render'\n> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button that opens the drawer. Renders a <button> element.\n */\nexport const DrawerTrigger = ({ asChild = false, ...props }: DrawerTriggerProps) => {\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return <BaseDialog.Trigger data-spark-component=\"drawer-trigger\" render={renderSlot} {...props} />\n}\n\nDrawerTrigger.displayName = 'Drawer.Trigger'\n","import { Drawer as Root } from './Drawer'\nimport { DrawerBody } from './DrawerBody'\nimport { DrawerClose } from './DrawerClose'\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\n/**\n * A panel that slides in from the edge of the screen, typically used for navigation or displaying additional content.\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  Close: typeof DrawerClose\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  Close: DrawerClose,\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'\nDrawerClose.displayName = 'Drawer.Close'\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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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/drawer/DrawerContext.tsx","../../src/drawer/Drawer.tsx","../../src/drawer/DrawerBody.styles.ts","../../src/drawer/DrawerBody.tsx","../../src/drawer/DrawerClose.tsx","../../src/drawer/DrawerCloseButton.tsx","../../src/drawer/DrawerContent.styles.tsx","../../src/drawer/DrawerContent.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 { 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\n      value={{\n        withFade,\n      }}\n    >\n      {childrenProp}\n    </DrawerContext>\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 { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { ComponentProps, type ReactElement } from 'react'\n\nimport { DrawerProvider } from './DrawerContext'\n\nexport interface DrawerProps extends Omit<\n  ComponentProps<typeof BaseDialog.Root>,\n  'onOpenChange' | 'render'\n> {\n  /**\n   * Specifies if the dialog is open or not.\n   */\n  open?: boolean\n  /**\n   * Default open state.\n   */\n  defaultOpen?: boolean\n  /**\n   * Handler executed on every dialog open state change.\n   */\n  onOpenChange?: (open: boolean) => void\n  /**\n   * Specifies if the dialog is a modal.\n   */\n  modal?: boolean\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   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n}\n\nexport const Drawer = ({ onOpenChange, withFade = false, ...props }: DrawerProps): ReactElement => {\n  const handleOpenChange = onOpenChange\n    ? (open: boolean, _eventDetails: unknown) => {\n        onOpenChange(open)\n      }\n    : undefined\n\n  return (\n    <DrawerProvider withFade={withFade}>\n      <BaseDialog.Root data-spark-component=\"drawer\" onOpenChange={handleOpenChange} {...props} />\n    </DrawerProvider>\n  )\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 { 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\n/**\n * The scrollable body section of the drawer. Renders a <div> element.\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 { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface DrawerCloseProps extends Omit<ComponentProps<typeof BaseDialog.Close>, 'render'> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button that closes the drawer. Renders a <button> element.\n */\nexport const DrawerClose = ({ asChild = false, ...props }: DrawerCloseProps) => {\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return <BaseDialog.Close data-spark-component=\"drawer-close\" render={renderSlot} {...props} />\n}\n\nDrawerClose.displayName = 'Drawer.Close'\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\n/**\n * A styled close button positioned in the drawer header. Renders a <button> element.\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 { cva, VariantProps } from 'class-variance-authority'\n\nexport const drawerContentStyles = cva(\n  [\n    'fixed z-modal flex flex-col bg-surface shadow-md',\n    // Base UI uses data-open and data-closed for transitions\n    'data-open:animation-duration-400 data-closed:animation-duration-200',\n    // Nested dialog effect\n    'data-nested-dialog-open:after:pointer-events-none',\n    'after:bg-transparent',\n    'after:transition-all',\n    'after:duration-200',\n    'data-nested-dialog-open:after:inset-0',\n    'data-nested-dialog-open:after:absolute',\n    'data-nested-dialog-open:after:rounded-[inherit]',\n    'data-nested-dialog-open:after:bg-overlay/dim-3',\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-open:animate-slide-in-right ',\n          'data-closed:animate-slide-out-right',\n        ],\n        left: [\n          'inset-y-0 left-0',\n          'data-open:animate-slide-in-left',\n          'data-closed:animate-slide-out-left',\n        ],\n        top: [\n          'top-0 left-0',\n          'w-screen',\n          'data-open:animate-slide-in-top',\n          'data-closed:animate-slide-out-top',\n        ],\n        bottom: [\n          'bottom-0 left-0',\n          'w-screen',\n          'data-open:animate-slide-in-bottom',\n          'data-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 BaseDialog } from '@base-ui/react/dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nimport { drawerContentStyles, type DrawerContentStylesProps } from './DrawerContent.styles'\n\nexport interface DrawerContentProps\n  extends Omit<ComponentProps<typeof BaseDialog.Popup>, 'render'>, DrawerContentStylesProps {\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The popup element that contains the drawer content. Renders a <div> element.\n */\nexport const DrawerContent = ({\n  className,\n  size = 'md',\n  side = 'right',\n  ref,\n  ...rest\n}: DrawerContentProps) => {\n  return (\n    <BaseDialog.Popup\n      ref={ref}\n      data-spark-component=\"drawer-content\"\n      role=\"dialog\"\n      className={state =>\n        cx(\n          drawerContentStyles({\n            size,\n            side,\n            className: typeof className === 'function' ? className(state) : className,\n          })\n        )\n      }\n      {...rest}\n    />\n  )\n}\n\nDrawerContent.displayName = 'Drawer.Content'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface DrawerDescriptionProps extends Omit<\n  ComponentProps<typeof BaseDialog.Description>,\n  'render'\n> {\n  ref?: Ref<HTMLParagraphElement>\n}\n\n/**\n * A paragraph with additional information about the drawer. Renders a <p> element.\n */\nexport const DrawerDescription = (props: DrawerDescriptionProps) => {\n  return <BaseDialog.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\n/**\n * The footer section of the drawer, typically containing action buttons. Renders a <footer> element.\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\n/**\n * The header section of the drawer. Renders a <header> element.\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 { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface DrawerOverlayProps extends Omit<\n  ComponentProps<typeof BaseDialog.Backdrop>,\n  'render'\n> {\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The backdrop element that dims the rest of the page. Renders a <div> element.\n */\nexport const DrawerOverlay = ({ className, ...props }: DrawerOverlayProps) => {\n  return (\n    <BaseDialog.Backdrop\n      data-spark-component=\"drawer-overlay\"\n      className={state =>\n        cx(\n          'z-overlay fixed top-0 left-0 h-screen w-screen',\n          'bg-overlay/dim-1',\n          // Base UI automatically adds data-[starting-style] and data-[ending-style] attributes\n          'data-starting-style:animate-fade-in',\n          'data-ending-style:animate-fade-out',\n          typeof className === 'function' ? className(state) : className\n        )\n      }\n      {...props}\n    />\n  )\n}\n\nDrawerOverlay.displayName = 'Drawer.Overlay'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps } from 'react'\n\nexport type DrawerPortalProps = ComponentProps<typeof BaseDialog.Portal>\n\n/**\n * A portal that renders the drawer in a different part of the DOM. Renders a <div> element.\n */\nexport const DrawerPortal = ({ className, ...props }: DrawerPortalProps) => {\n  return (\n    <BaseDialog.Portal\n      data-spark-component=\"drawer-portal\"\n      className={cx(className, 'z-modal absolute')}\n      {...props}\n    />\n  )\n}\n\nDrawerPortal.displayName = 'Drawer.Portal'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface DrawerTitleProps extends Omit<ComponentProps<typeof BaseDialog.Title>, 'render'> {\n  ref?: Ref<HTMLHeadingElement>\n}\n\n/**\n * The title of the drawer, announced to assistive technology. Renders an <h2> element.\n */\nexport const DrawerTitle = ({ className, ...props }: DrawerTitleProps) => {\n  return (\n    <BaseDialog.Title\n      data-spark-component=\"drawer-title\"\n      className={cx('text-headline-2 text-on-surface', className)}\n      {...props}\n    />\n  )\n}\n\nDrawerTitle.displayName = 'Drawer.Title'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface DrawerTriggerProps extends Omit<\n  ComponentProps<typeof BaseDialog.Trigger>,\n  'render'\n> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button that opens the drawer. Renders a <button> element.\n */\nexport const DrawerTrigger = ({ asChild = false, ...props }: DrawerTriggerProps) => {\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return <BaseDialog.Trigger data-spark-component=\"drawer-trigger\" render={renderSlot} {...props} />\n}\n\nDrawerTrigger.displayName = 'Drawer.Trigger'\n","import { Drawer as Root } from './Drawer'\nimport { DrawerBody } from './DrawerBody'\nimport { DrawerClose } from './DrawerClose'\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\n/**\n * A panel that slides in from the edge of the screen, typically used for navigation or displaying additional content.\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  Close: typeof DrawerClose\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  Close: DrawerClose,\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'\nDrawerClose.displayName = 'Drawer.Close'\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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"}

package/dist/dropdown/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../visually-hidden/index.js`),t=require(`../icon-CRPcdgYp.js`),n=require(`../popover-q0MDNefk.js`);let r=require(`class-variance-authority`),i=require(`react`),a=require(`react/jsx-runtime`),o=require(`@spark-ui/icons/ArrowHorizontalDown`),s=require(`@spark-ui/hooks/use-merge-refs`),c=require(`@spark-ui/components/form-field`),l=require(`@spark-ui/icons/Check`),u=require(`downshift`);var d=({itemsMap:e,defaultValue:t,value:n,onValueChange:r,open:i,onOpenChange:a,defaultOpen:o,multiple:s,id:c,labelId:l})=>{let d=[...e.values()],f=(0,u.useMultipleSelection)({selectedItems:n!=null&&s?d.filter(e=>s?n.includes(e.value):n===e.value):void 0,initialSelectedItems:t!=null&&s?d.filter(e=>s?t.includes(e.value):t===e.value):void 0,onSelectedItemsChange:({selectedItems:e})=>{e!=null&&s&&r?.(e.map(e=>e.value))}});return{...(0,u.useSelect)({items:d,isItemDisabled:e=>e.disabled,itemToString:e=>e?e.text:``,id:c,labelId:l,isOpen:i,onIsOpenChange:({isOpen:e})=>{e!=null&&a?.(e)},initialIsOpen:o??!1,stateReducer:(e,{changes:t,type:n})=>{if(!s)return t;let{selectedItems:r,removeSelectedItem:i,addSelectedItem:a}=f;switch(n){case u.useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:case u.useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:case u.useSelect.stateChangeTypes.ItemClick:return t.selectedItem!=null&&(r.some(e=>e.value===t.selectedItem?.value)?i(t.selectedItem):a(t.selectedItem)),{...t,isOpen:!0,highlightedIndex:e.highlightedIndex};default:return t}},selectedItem:n!=null&&!s?e.get(n)||null:void 0,initialSelectedItem:(t!=null||n!=null)&&!s?e.get(t)||null:void 0,onSelectedItemChange:({selectedItem:e})=>{e?.value!=null&&!s&&r?.(e?.value)},scrollIntoView:e=>{e&&e.scrollIntoView({block:`nearest`})}}),...f,selectedItems:[...new Set(f.selectedItems)]}};function f(e,t){let n=0;for(let[r]of e.entries()){if(r===t)return n;n++}return-1}var p=(e,t)=>{let n=0;for(let r of e.keys()){if(n===t)return r;n++}},m=(e,t)=>{let n=p(e,t);return n===void 0?void 0:e.get(n)},h=e=>e?e.type.displayName:``,g=(e,t=[])=>(i.Children.forEach(e,e=>{if((0,i.isValidElement)(e)){if(h(e)===`Dropdown.Item`){let n=e.props;t.push({value:n.value,disabled:!!n.disabled,text:_(n.children)})}e.props.children&&g(e.props.children,t)}}),t),_=(e,t=``)=>typeof e==`string`?e:(i.Children.forEach(e,e=>{(0,i.isValidElement)(e)&&(h(e)===`Dropdown.ItemText`&&(t=e.props.children),e.props.children&&_(e.props.children,t))}),t),v=e=>{let t=new Map;return g(e).forEach(e=>{t.set(e.value,e)}),t},y=(e,t)=>i.Children.toArray(e).some(e=>(0,i.isValidElement)(e)?h(e)===t?!0:e.props.children?y(e.props.children,t):!1:!1),b=(0,i.createContext)(null),x=`:dropdown`,S=({children:e,defaultValue:t,value:r,onValueChange:o,open:s,onOpenChange:l,defaultOpen:u,multiple:f=!1,disabled:p=!1,readOnly:h=!1,state:g})=>{let[_,S]=(0,i.useState)(v(e)),[C,w]=(0,i.useState)(y(e,`Dropdown.Popover`)),[T,E]=(0,i.useState)(`mouse`),D=(0,c.useFormFieldControl)(),O=D.state||g,k=`${x}-label-${(0,i.useId)()}`,A=`${x}-input-${(0,i.useId)()}`,j=D.id||A,M=D.labelId||k,N=D.disabled??p,P=D.readOnly??h,F=d({itemsMap:_,defaultValue:t,value:r,onValueChange:o,open:s,onOpenChange:l,defaultOpen:u,multiple:f,id:j,labelId:M});(0,i.useEffect)(()=>{let t=v(e),n=[..._.values()],r=[...t.values()];(n.length!==r.length||n.some((e,t)=>{let n=e.value!==r[t]?.value,i=e.text!==r[t]?.text;return n||i}))&&S(t)},[e]);let[I,L]=C?[n.t,{open:!0}]:[i.Fragment,{}];return(0,a.jsx)(b.Provider,{value:{multiple:f,disabled:N,readOnly:P,...F,itemsMap:_,highlightedItem:m(_,F.highlightedIndex),hasPopover:C,setHasPopover:w,state:O,lastInteractionType:T,setLastInteractionType:E},children:(0,a.jsx)(I,{...L,children:e})})},C=()=>{let e=(0,i.useContext)(b);if(!e)throw Error(`useDropdownContext must be used within a Dropdown provider`);return e},w=({children:e,...t})=>(0,a.jsx)(S,{...t,children:e});w.displayName=`Dropdown`;var T=({className:e,ref:t})=>(0,a.jsx)(`div`,{ref:t,className:(0,r.cx)(`my-md border-b-sm border-outline`,e)});T.displayName=`Dropdown.Divider`;var E=(0,i.createContext)(null),D=({children:e})=>{let t=`${x}-group-label-${(0,i.useId)()}`;return(0,a.jsx)(E.Provider,{value:{labelId:t},children:e})},O=()=>{let e=(0,i.useContext)(E);if(!e)throw Error(`useDropdownGroupContext must be used within a DropdownGroup provider`);return e},k=({children:e,ref:t,...n})=>(0,a.jsx)(D,{children:(0,a.jsx)(A,{ref:t,...n,children:e})}),A=({children:e,className:t,ref:n})=>{let{labelId:i}=O();return(0,a.jsx)(`div`,{ref:n,role:`group`,"aria-labelledby":i,className:(0,r.cx)(t),children:e})};k.displayName=`Dropdown.Group`;var j=(0,i.createContext)(null),M=({value:e,disabled:t=!1,children:n})=>{let{multiple:r,itemsMap:o,selectedItem:s,selectedItems:c}=C(),[l,u]=(0,i.useState)(void 0),d=f(o,e),p={disabled:t,value:e,text:_(n)},m=r?c.some(t=>t.value===e):s?.value===e;return(0,a.jsx)(j.Provider,{value:{textId:l,setTextId:u,isSelected:m,itemData:p,index:d,disabled:t},children:n})},N=()=>{let e=(0,i.useContext)(j);if(!e)throw Error(`useDropdownItemContext must be used within a DropdownItem provider`);return e},P=({children:e,ref:t,...n})=>{let{value:r,disabled:i}=n;return(0,a.jsx)(M,{value:r,disabled:i,children:(0,a.jsx)(I,{ref:t,...n,children:e})})},F=(0,r.cva)(`px-lg py-md text-body-1`,{variants:{selected:{true:`font-bold`},disabled:{true:`opacity-dim-3 cursor-not-allowed`,false:`cursor-pointer`},highlighted:{true:``},interactionType:{mouse:``,keyboard:``}},compoundVariants:[{highlighted:!0,interactionType:`mouse`,class:`bg-surface-hovered`},{highlighted:!0,interactionType:`keyboard`,class:`u-outline`}]}),I=({className:e,disabled:t=!1,value:n,children:i,ref:o})=>{let{getItemProps:c,highlightedItem:l,lastInteractionType:u}=C(),{textId:d,index:f,itemData:p,isSelected:m}=N(),h=l?.value===n,{ref:g,..._}=c({item:p,index:f});return(0,a.jsx)(`li`,{ref:(0,s.useMergeRefs)(o,g),className:(0,r.cx)(F({selected:m,disabled:t,highlighted:h,interactionType:u,className:e})),..._,"aria-selected":m,"aria-labelledby":d,children:i},n)};P.displayName=`Dropdown.Item`;var L=({className:e,children:n,label:i,ref:o})=>{let{disabled:s,isSelected:c}=N(),u=n||(0,a.jsx)(t.t,{size:`sm`,children:(0,a.jsx)(l.Check,{"aria-label":i})});return(0,a.jsx)(`span`,{ref:o,className:(0,r.cx)(`min-h-sz-16 min-w-sz-16 flex`,s&&`opacity-dim-3`,e),children:c&&u})};L.displayName=`Dropdown.ItemIndicator`;var R=({children:e,className:t,ref:n,...o})=>{let{isOpen:c,getMenuProps:l,hasPopover:u,setLastInteractionType:d}=C(),{ref:f,...p}=l({onMouseMove:()=>{d(`mouse`)}}),m=(0,i.useRef)(null),h=(0,s.useMergeRefs)(n,f,m);return(0,i.useLayoutEffect)(()=>{u&&m.current&&m.current.parentElement&&(m.current.parentElement.style.pointerEvents=c?``:`none`,m.current.style.pointerEvents=c?``:`none`)},[c,u]),(0,a.jsx)(`ul`,{ref:h,className:(0,r.cx)(t,`flex flex-col`,c?`pointer-events-auto! block`:`pointer-events-none invisible absolute max-h-0 min-h-0 overflow-hidden opacity-0`,u&&c&&`p-lg`),...o,...p,"data-spark-component":`dropdown-items`,children:e})};R.displayName=`Dropdown.Items`;var z=({children:e,ref:t})=>{let n=`${x}-item-text-${(0,i.useId)()}`,{setTextId:o}=N();return(0,i.useEffect)(()=>(o(n),()=>o(void 0))),(0,a.jsx)(`span`,{id:n,className:(0,r.cx)(`inline`),ref:t,children:e})};z.displayName=`Dropdown.ItemText`;var B=({children:e,className:t,ref:n})=>{let{labelId:i}=O();return(0,a.jsx)(`div`,{ref:n,id:i,className:(0,r.cx)(`px-md py-sm text-body-2 text-neutral italic`,t),children:e})};B.displayName=`Dropdown.Label`;var V=({children:e})=>(0,a.jsx)(t.t,{size:`sm`,className:`shrink-0`,children:e});V.displayName=`Dropdown.LeadingIcon`;var H=({children:e,matchTriggerWidth:t=!0,sideOffset:o=4,className:s,elevation:c=`dropdown`,ref:l,...u})=>{let d=C();return(0,i.useEffect)(()=>(d.setHasPopover(!0),()=>d.setHasPopover(!1)),[]),(0,a.jsx)(n.t.Content,{ref:l,inset:!0,asChild:!0,matchTriggerWidth:t,elevation:c,className:(0,r.cx)(`relative`,s),sideOffset:o,onOpenAutoFocus:e=>{e.preventDefault()},...u,"data-spark-component":`dropdown-popover`,children:e})};H.displayName=`Dropdown.Popover`;var U=({children:e,...t})=>(0,a.jsx)(n.t.Portal,{...t,children:e});U.displayName=`Dropdown.Portal`;var W=(0,r.cva)([`flex w-full items-center justify-between`,`min-h-sz-44 rounded-input bg-surface text-on-surface px-lg`,`text-body-1`,`ring-1 outline-hidden ring-inset focus:ring-2 focus:ring-focus`],{variants:{state:{undefined:`ring-outline`,error:`ring-error`,alert:`ring-alert`,success:`ring-success`},disabled:{true:`disabled:bg-on-surface/dim-5 cursor-not-allowed text-on-surface/dim-3`},readOnly:{true:`disabled:bg-on-surface/dim-5 cursor-not-allowed text-on-surface/dim-3`}},compoundVariants:[{disabled:!1,state:void 0,class:`default:hover:ring-outline-high`}]}),G=({"aria-label":c,children:l,className:u,ref:d})=>{let{getToggleButtonProps:f,getDropdownProps:p,getLabelProps:m,hasPopover:h,disabled:g,readOnly:_,state:v,setLastInteractionType:y,isOpen:b}=C(),[x,S]=h?[n.t.Trigger,{asChild:!0}]:[i.Fragment,{}],{ref:w,...T}=f({...p(),onKeyDown:e=>{y(`keyboard`),e.key===`Escape`&&b&&e.stopPropagation()}}),E=T[`aria-expanded`],D=(0,s.useMergeRefs)(d,w);return(0,a.jsxs)(a.Fragment,{children:[c&&(0,a.jsx)(e.VisuallyHidden,{children:(0,a.jsx)(`label`,{...m(),children:c})}),(0,a.jsx)(x,{...S,children:(0,a.jsxs)(`button`,{type:`button`,ref:D,disabled:g||_,className:W({className:u,state:v,disabled:g,readOnly:_}),...T,"data-spark-component":`dropdown-trigger`,children:[(0,a.jsx)(`span`,{className:`gap-md flex items-center justify-start`,children:l}),(0,a.jsx)(t.t,{className:(0,r.cx)(`ml-md shrink-0 rotate-0 transition duration-100 ease-in`,{"rotate-180":E}),size:`sm`,children:(0,a.jsx)(o.ArrowHorizontalDown,{})})]})})]})};G.displayName=`Dropdown.Trigger`;var K=({children:e,className:t,placeholder:n,ref:i})=>{let{selectedItem:o,multiple:s,selectedItems:c}=C(),l=!!(s?c.length:o),u=s?c[0]?.text:o?.text,d=c.length>1?`, +${c.length-1}`:``;return(0,a.jsxs)(`span`,{ref:i,className:(0,r.cx)(`flex shrink items-center text-left`,t),children:[(0,a.jsx)(`span`,{className:(0,r.cx)(`line-clamp-1 flex-1 overflow-hidden break-all text-ellipsis`,!l&&`text-on-surface/dim-1`),children:l?e||u:n}),d&&(0,a.jsx)(`span`,{children:d})]})};K.displayName=`Dropdown.Value`;var q=Object.assign(w,{Group:k,Item:P,Items:R,ItemText:z,ItemIndicator:L,Label:B,Popover:H,Divider:T,Trigger:G,Value:K,LeadingIcon:V,Portal:U});q.displayName=`Dropdown`,k.displayName=`Dropdown.Group`,R.displayName=`Dropdown.Items`,P.displayName=`Dropdown.Item`,z.displayName=`Dropdown.ItemText`,L.displayName=`Dropdown.ItemIndicator`,B.displayName=`Dropdown.Label`,H.displayName=`Dropdown.Popover`,T.displayName=`Dropdown.Divider`,G.displayName=`Dropdown.Trigger`,K.displayName=`Dropdown.Value`,V.displayName=`Dropdown.LeadingIcon`,U.displayName=`Dropdown.Portal`,exports.Dropdown=q,exports.DropdownProvider=S,exports.useDropdownContext=C;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../visually-hidden/index.js`),t=require(`../icon-CRPcdgYp.js`),n=require(`../popover-Daknmg_Z.js`);let r=require(`class-variance-authority`),i=require(`react`),a=require(`react/jsx-runtime`),o=require(`@spark-ui/icons/ArrowHorizontalDown`),s=require(`@spark-ui/hooks/use-merge-refs`),c=require(`@spark-ui/components/form-field`),l=require(`@spark-ui/icons/Check`),u=require(`downshift`);var d=({itemsMap:e,defaultValue:t,value:n,onValueChange:r,open:i,onOpenChange:a,defaultOpen:o,multiple:s,id:c,labelId:l})=>{let d=[...e.values()],f=(0,u.useMultipleSelection)({selectedItems:n!=null&&s?d.filter(e=>s?n.includes(e.value):n===e.value):void 0,initialSelectedItems:t!=null&&s?d.filter(e=>s?t.includes(e.value):t===e.value):void 0,onSelectedItemsChange:({selectedItems:e})=>{e!=null&&s&&r?.(e.map(e=>e.value))}});return{...(0,u.useSelect)({items:d,isItemDisabled:e=>e.disabled,itemToString:e=>e?e.text:``,id:c,labelId:l,isOpen:i,onIsOpenChange:({isOpen:e})=>{e!=null&&a?.(e)},initialIsOpen:o??!1,stateReducer:(e,{changes:t,type:n})=>{if(!s)return t;let{selectedItems:r,removeSelectedItem:i,addSelectedItem:a}=f;switch(n){case u.useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:case u.useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:case u.useSelect.stateChangeTypes.ItemClick:return t.selectedItem!=null&&(r.some(e=>e.value===t.selectedItem?.value)?i(t.selectedItem):a(t.selectedItem)),{...t,isOpen:!0,highlightedIndex:e.highlightedIndex};default:return t}},selectedItem:n!=null&&!s?e.get(n)||null:void 0,initialSelectedItem:(t!=null||n!=null)&&!s?e.get(t)||null:void 0,onSelectedItemChange:({selectedItem:e})=>{e?.value!=null&&!s&&r?.(e?.value)},scrollIntoView:e=>{e&&e.scrollIntoView({block:`nearest`})}}),...f,selectedItems:[...new Set(f.selectedItems)]}};function f(e,t){let n=0;for(let[r]of e.entries()){if(r===t)return n;n++}return-1}var p=(e,t)=>{let n=0;for(let r of e.keys()){if(n===t)return r;n++}},m=(e,t)=>{let n=p(e,t);return n===void 0?void 0:e.get(n)},h=e=>e?e.type.displayName:``,g=(e,t=[])=>(i.Children.forEach(e,e=>{if((0,i.isValidElement)(e)){if(h(e)===`Dropdown.Item`){let n=e.props;t.push({value:n.value,disabled:!!n.disabled,text:_(n.children)})}e.props.children&&g(e.props.children,t)}}),t),_=(e,t=``)=>typeof e==`string`?e:(i.Children.forEach(e,e=>{(0,i.isValidElement)(e)&&(h(e)===`Dropdown.ItemText`&&(t=e.props.children),e.props.children&&_(e.props.children,t))}),t),v=e=>{let t=new Map;return g(e).forEach(e=>{t.set(e.value,e)}),t},y=(e,t)=>i.Children.toArray(e).some(e=>(0,i.isValidElement)(e)?h(e)===t?!0:e.props.children?y(e.props.children,t):!1:!1),b=(0,i.createContext)(null),x=`:dropdown`,S=({children:e,defaultValue:t,value:r,onValueChange:o,open:s,onOpenChange:l,defaultOpen:u,multiple:f=!1,disabled:p=!1,readOnly:h=!1,state:g})=>{let[_,S]=(0,i.useState)(v(e)),[C,w]=(0,i.useState)(y(e,`Dropdown.Popover`)),[T,E]=(0,i.useState)(`mouse`),D=(0,c.useFormFieldControl)(),O=D.state||g,k=`${x}-label-${(0,i.useId)()}`,A=`${x}-input-${(0,i.useId)()}`,j=D.id||A,M=D.labelId||k,N=D.disabled??p,P=D.readOnly??h,F=d({itemsMap:_,defaultValue:t,value:r,onValueChange:o,open:s,onOpenChange:l,defaultOpen:u,multiple:f,id:j,labelId:M});(0,i.useEffect)(()=>{let t=v(e),n=[..._.values()],r=[...t.values()];(n.length!==r.length||n.some((e,t)=>{let n=e.value!==r[t]?.value,i=e.text!==r[t]?.text;return n||i}))&&S(t)},[e]);let[I,L]=C?[n.t,{open:!0}]:[i.Fragment,{}];return(0,a.jsx)(b,{value:{multiple:f,disabled:N,readOnly:P,...F,itemsMap:_,highlightedItem:m(_,F.highlightedIndex),hasPopover:C,setHasPopover:w,state:O,lastInteractionType:T,setLastInteractionType:E},children:(0,a.jsx)(I,{...L,children:e})})},C=()=>{let e=(0,i.useContext)(b);if(!e)throw Error(`useDropdownContext must be used within a Dropdown provider`);return e},w=({children:e,...t})=>(0,a.jsx)(S,{...t,children:e});w.displayName=`Dropdown`;var T=({className:e,ref:t})=>(0,a.jsx)(`div`,{ref:t,className:(0,r.cx)(`my-md border-b-sm border-outline`,e)});T.displayName=`Dropdown.Divider`;var E=(0,i.createContext)(null),D=({children:e})=>(0,a.jsx)(E,{value:{labelId:`${x}-group-label-${(0,i.useId)()}`},children:e}),O=()=>{let e=(0,i.useContext)(E);if(!e)throw Error(`useDropdownGroupContext must be used within a DropdownGroup provider`);return e},k=({children:e,ref:t,...n})=>(0,a.jsx)(D,{children:(0,a.jsx)(A,{ref:t,...n,children:e})}),A=({children:e,className:t,ref:n})=>{let{labelId:i}=O();return(0,a.jsx)(`div`,{ref:n,role:`group`,"aria-labelledby":i,className:(0,r.cx)(t),children:e})};k.displayName=`Dropdown.Group`;var j=(0,i.createContext)(null),M=({value:e,disabled:t=!1,children:n})=>{let{multiple:r,itemsMap:o,selectedItem:s,selectedItems:c}=C(),[l,u]=(0,i.useState)(void 0),d=f(o,e),p={disabled:t,value:e,text:_(n)};return(0,a.jsx)(j,{value:{textId:l,setTextId:u,isSelected:r?c.some(t=>t.value===e):s?.value===e,itemData:p,index:d,disabled:t},children:n})},N=()=>{let e=(0,i.useContext)(j);if(!e)throw Error(`useDropdownItemContext must be used within a DropdownItem provider`);return e},P=({children:e,ref:t,...n})=>{let{value:r,disabled:i}=n;return(0,a.jsx)(M,{value:r,disabled:i,children:(0,a.jsx)(I,{ref:t,...n,children:e})})},F=(0,r.cva)(`px-lg py-md text-body-1`,{variants:{selected:{true:`font-bold`},disabled:{true:`opacity-dim-3 cursor-not-allowed`,false:`cursor-pointer`},highlighted:{true:``},interactionType:{mouse:``,keyboard:``}},compoundVariants:[{highlighted:!0,interactionType:`mouse`,class:`bg-surface-hovered`},{highlighted:!0,interactionType:`keyboard`,class:`u-outline`}]}),I=({className:e,disabled:t=!1,value:n,children:i,ref:o})=>{let{getItemProps:c,highlightedItem:l,lastInteractionType:u}=C(),{textId:d,index:f,itemData:p,isSelected:m}=N(),h=l?.value===n,{ref:g,..._}=c({item:p,index:f});return(0,a.jsx)(`li`,{ref:(0,s.useMergeRefs)(o,g),className:(0,r.cx)(F({selected:m,disabled:t,highlighted:h,interactionType:u,className:e})),..._,"aria-selected":m,"aria-labelledby":d,children:i},n)};P.displayName=`Dropdown.Item`;var L=({className:e,children:n,label:i,ref:o})=>{let{disabled:s,isSelected:c}=N(),u=n||(0,a.jsx)(t.t,{size:`sm`,children:(0,a.jsx)(l.Check,{"aria-label":i})});return(0,a.jsx)(`span`,{ref:o,className:(0,r.cx)(`min-h-sz-16 min-w-sz-16 flex`,s&&`opacity-dim-3`,e),children:c&&u})};L.displayName=`Dropdown.ItemIndicator`;var R=({children:e,className:t,ref:n,...o})=>{let{isOpen:c,getMenuProps:l,hasPopover:u,setLastInteractionType:d}=C(),{ref:f,...p}=l({onMouseMove:()=>{d(`mouse`)}}),m=(0,i.useRef)(null),h=(0,s.useMergeRefs)(n,f,m);return(0,i.useLayoutEffect)(()=>{u&&m.current&&m.current.parentElement&&(m.current.parentElement.style.pointerEvents=c?``:`none`,m.current.style.pointerEvents=c?``:`none`)},[c,u]),(0,a.jsx)(`ul`,{ref:h,className:(0,r.cx)(t,`flex flex-col`,c?`pointer-events-auto! block`:`pointer-events-none invisible absolute max-h-0 min-h-0 overflow-hidden opacity-0`,u&&c&&`p-lg`),...o,...p,"data-spark-component":`dropdown-items`,children:e})};R.displayName=`Dropdown.Items`;var z=({children:e,ref:t})=>{let n=`${x}-item-text-${(0,i.useId)()}`,{setTextId:o}=N();return(0,i.useEffect)(()=>(o(n),()=>o(void 0))),(0,a.jsx)(`span`,{id:n,className:(0,r.cx)(`inline`),ref:t,children:e})};z.displayName=`Dropdown.ItemText`;var B=({children:e,className:t,ref:n})=>{let{labelId:i}=O();return(0,a.jsx)(`div`,{ref:n,id:i,className:(0,r.cx)(`px-md py-sm text-body-2 text-neutral italic`,t),children:e})};B.displayName=`Dropdown.Label`;var V=({children:e})=>(0,a.jsx)(t.t,{size:`sm`,className:`shrink-0`,children:e});V.displayName=`Dropdown.LeadingIcon`;var H=({children:e,matchTriggerWidth:t=!0,sideOffset:o=4,className:s,elevation:c=`dropdown`,ref:l,...u})=>{let d=C();return(0,i.useEffect)(()=>(d.setHasPopover(!0),()=>d.setHasPopover(!1)),[]),(0,a.jsx)(n.t.Content,{ref:l,inset:!0,asChild:!0,matchTriggerWidth:t,elevation:c,className:(0,r.cx)(`relative`,s),sideOffset:o,onOpenAutoFocus:e=>{e.preventDefault()},...u,"data-spark-component":`dropdown-popover`,children:e})};H.displayName=`Dropdown.Popover`;var U=({children:e,...t})=>(0,a.jsx)(n.t.Portal,{...t,children:e});U.displayName=`Dropdown.Portal`;var W=(0,r.cva)([`flex w-full items-center justify-between`,`min-h-sz-44 rounded-input bg-surface text-on-surface px-lg`,`text-body-1`,`ring-1 outline-hidden ring-inset focus:ring-2 focus:ring-focus`],{variants:{state:{undefined:`ring-outline`,error:`ring-error`,alert:`ring-alert`,success:`ring-success`},disabled:{true:`disabled:bg-on-surface/dim-5 cursor-not-allowed text-on-surface/dim-3`},readOnly:{true:`disabled:bg-on-surface/dim-5 cursor-not-allowed text-on-surface/dim-3`}},compoundVariants:[{disabled:!1,state:void 0,class:`default:hover:ring-outline-high`}]}),G=({"aria-label":c,children:l,className:u,ref:d})=>{let{getToggleButtonProps:f,getDropdownProps:p,getLabelProps:m,hasPopover:h,disabled:g,readOnly:_,state:v,setLastInteractionType:y,isOpen:b}=C(),[x,S]=h?[n.t.Trigger,{asChild:!0}]:[i.Fragment,{}],{ref:w,...T}=f({...p(),onKeyDown:e=>{y(`keyboard`),e.key===`Escape`&&b&&e.stopPropagation()}}),E=T[`aria-expanded`],D=(0,s.useMergeRefs)(d,w);return(0,a.jsxs)(a.Fragment,{children:[c&&(0,a.jsx)(e.VisuallyHidden,{children:(0,a.jsx)(`label`,{...m(),children:c})}),(0,a.jsx)(x,{...S,children:(0,a.jsxs)(`button`,{type:`button`,ref:D,disabled:g||_,className:W({className:u,state:v,disabled:g,readOnly:_}),...T,"data-spark-component":`dropdown-trigger`,children:[(0,a.jsx)(`span`,{className:`gap-md flex items-center justify-start`,children:l}),(0,a.jsx)(t.t,{className:(0,r.cx)(`ml-md shrink-0 rotate-0 transition duration-100 ease-in`,{"rotate-180":E}),size:`sm`,children:(0,a.jsx)(o.ArrowHorizontalDown,{})})]})})]})};G.displayName=`Dropdown.Trigger`;var K=({children:e,className:t,placeholder:n,ref:i})=>{let{selectedItem:o,multiple:s,selectedItems:c}=C(),l=!!(s?c.length:o),u=s?c[0]?.text:o?.text,d=c.length>1?`, +${c.length-1}`:``;return(0,a.jsxs)(`span`,{ref:i,className:(0,r.cx)(`flex shrink items-center text-left`,t),children:[(0,a.jsx)(`span`,{className:(0,r.cx)(`line-clamp-1 flex-1 overflow-hidden break-all text-ellipsis`,!l&&`text-on-surface/dim-1`),children:l?e||u:n}),d&&(0,a.jsx)(`span`,{children:d})]})};K.displayName=`Dropdown.Value`;var q=Object.assign(w,{Group:k,Item:P,Items:R,ItemText:z,ItemIndicator:L,Label:B,Popover:H,Divider:T,Trigger:G,Value:K,LeadingIcon:V,Portal:U});q.displayName=`Dropdown`,k.displayName=`Dropdown.Group`,R.displayName=`Dropdown.Items`,P.displayName=`Dropdown.Item`,z.displayName=`Dropdown.ItemText`,L.displayName=`Dropdown.ItemIndicator`,B.displayName=`Dropdown.Label`,H.displayName=`Dropdown.Popover`,T.displayName=`Dropdown.Divider`,G.displayName=`Dropdown.Trigger`,K.displayName=`Dropdown.Value`,V.displayName=`Dropdown.LeadingIcon`,U.displayName=`Dropdown.Portal`,exports.Dropdown=q,exports.DropdownProvider=S,exports.useDropdownContext=C;
 //# sourceMappingURL=index.js.map