@spark-ui/components 15.0.0 → 16.0.0

package/dist/dialog/Dialog.d.ts

@@ -28,5 +28,6 @@ export interface DialogProps extends Omit<ComponentProps<typeof BaseDialog.Root>
 }
 export declare const Dialog: {
     ({ withFade, onOpenChange, ...props }: DialogProps): ReactElement;
+    createHandle: typeof BaseDialog.createHandle;
     displayName: string;
 };

package/dist/dialog/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),r=require("@base-ui/react/dialog"),d=require("react"),w=require("@spark-ui/hooks/use-merge-refs"),B=require("@spark-ui/hooks/use-scroll-overflow"),n=require("class-variance-authority"),p=require("../useRenderSlot-DATwjgpo.js"),O=require("@spark-ui/icons/Close"),P=require("../Icon-CF0W0LKr.js"),I=require("../IconButton-D3g86WpZ.js"),T=require("../DialogContent.styles-CziMQtYr.js"),x=d.createContext(null),F=({children:e,withFade:o=!1})=>{const[t,s]=d.useState(!1);return a.jsx(x.Provider,{value:{isFullScreen:t,setIsFullScreen:s,withFade:o},children:e})},m=()=>{const e=d.useContext(x);if(!e)throw Error("useDialog must be used within a Dialog provider");return e},f=({withFade:e=!1,onOpenChange:o,...t})=>{const s=o?(i,l)=>{o(i)}:void 0;return a.jsx(F,{withFade:e,children:a.jsx(r.Dialog.Root,{"data-spark-component":"dialog",onOpenChange:s,...t})})};f.displayName="Dialog.Root";const y=({children:e,className:o,inset:t=!1,ref:s,...i})=>{const l=d.useRef(null),c=w.useMergeRefs(s,l),{withFade:g}=m(),{overflow:u}=B.useScrollOverflow(l);return a.jsx("div",{"data-spark-component":"dialog-body",ref:c,className:n.cx("focus-visible:u-outline relative grow overflow-y-auto outline-hidden","transition-all duration-300",{"px-xl py-lg":!t},o),style:{...g&&{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% + ${u.top?"0px":"44px"} + ${u.bottom?"0px":"44px"})`,maskPosition:`0 ${u.top?"0px":"-44px"}`}},...i,children:e})};y.displayName="Dialog.Body";const D=({asChild:e=!1,...o})=>{const t=p.useRenderSlot(e,"button");return a.jsx(r.Dialog.Close,{"data-spark-component":"dialog-close",render:t,...o})},b=({"aria-label":e,className:o,size:t="md",intent:s="neutral",design:i="ghost",children:l=a.jsx(O.Close,{}),ref:c,...g})=>a.jsx(D,{"data-spark-component":"dialog-close-button","data-part":"close",ref:c,className:n.cx(["absolute","top-md","right-xl"],o),asChild:!0,...g,children:a.jsx(I.IconButton,{intent:s,size:t,design:i,"aria-label":e,children:a.jsx(P.Icon,{children:l})})}),$=Object.assign(b,{id:"CloseButton"});b.displayName="Dialog.CloseButton";const j=({className:e,isNarrow:o=!1,size:t="md",ref:s,...i})=>{const{setIsFullScreen:l}=m();return d.useEffect(()=>(t==="fullscreen"&&l(!0),()=>l(!1)),[l,t]),a.jsx(r.Dialog.Popup,{ref:s,"data-spark-component":"dialog-content",role:"dialog",className:c=>n.cx(T.dialogContentStyles({isNarrow:o,size:t,className:typeof e=="function"?e(c):e})),...i})};j.displayName="Dialog.Content";const h=e=>a.jsx(r.Dialog.Description,{"data-spark-component":"dialog-description",...e});h.displayName="Dialog.Description";const v=({children:e,className:o,ref:t,...s})=>a.jsx("footer",{"data-spark-component":"dialog-footer",ref:t,className:n.cx(o,["px-xl","py-lg"]),...s,children:e});v.displayName="Dialog.Footer";const N=({children:e,className:o,ref:t,...s})=>a.jsx("header",{"data-spark-component":"dialog-header",ref:t,className:n.cx(o,["px-xl","py-lg"]),...s,children:e});N.displayName="Dialog.Header";const k=({className:e,...o})=>a.jsx(r.Dialog.Backdrop,{"data-spark-component":"dialog-overlay",className:t=>n.cx("z-overlay size-screen fixed inset-0","bg-overlay/dim-1","data-starting-style:animate-fade-in","data-ending-style:animate-fade-out",typeof e=="function"?e(t):e),...o});k.displayName="Dialog.Overlay";const C=({className:e,...o})=>a.jsx(r.Dialog.Portal,{"data-spark-component":"dialog-portal",className:n.cx(e,"z-modal absolute"),...o});C.displayName="Dialog.Portal";const S=({className:e,ref:o,...t})=>a.jsx(r.Dialog.Title,{"data-spark-component":"dialog-title",ref:o,className:n.cx("text-headline-1 text-on-surface","group-has-data-[part=close]:pr-3xl",e),...t});S.displayName="Dialog.Title";const R=({asChild:e=!1,...o})=>{const t=p.useRenderSlot(e,"button");return a.jsx(r.Dialog.Trigger,{"data-spark-component":"dialog-trigger",render:t,...o})};R.displayName="Dialog.Trigger";const q=Object.assign(f,{Trigger:R,Portal:C,Overlay:k,Content:j,Header:N,Body:y,Footer:v,Close:D,CloseButton:$,Title:S,Description:h});q.displayName="Dialog";exports.Dialog=q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),r=require("@base-ui/react/dialog"),d=require("react"),w=require("@spark-ui/hooks/use-merge-refs"),B=require("@spark-ui/hooks/use-scroll-overflow"),n=require("class-variance-authority"),x=require("../useRenderSlot-DATwjgpo.js"),O=require("@spark-ui/icons/Close"),P=require("../Icon-CF0W0LKr.js"),I=require("../IconButton-D3g86WpZ.js"),T=require("../DialogContent.styles-CziMQtYr.js"),m=d.createContext(null),F=({children:e,withFade:o=!1})=>{const[t,l]=d.useState(!1);return a.jsx(m.Provider,{value:{isFullScreen:t,setIsFullScreen:l,withFade:o},children:e})},f=()=>{const e=d.useContext(m);if(!e)throw Error("useDialog must be used within a Dialog provider");return e},p=({withFade:e=!1,onOpenChange:o,...t})=>{const l=o?(i,s)=>{o(i)}:void 0;return a.jsx(F,{withFade:e,children:a.jsx(r.Dialog.Root,{"data-spark-component":"dialog",onOpenChange:l,...t})})};p.createHandle=r.Dialog.createHandle;p.displayName="Dialog.Root";const y=({children:e,className:o,inset:t=!1,ref:l,...i})=>{const s=d.useRef(null),c=w.useMergeRefs(l,s),{withFade:g}=f(),{overflow:u}=B.useScrollOverflow(s);return a.jsx("div",{"data-spark-component":"dialog-body",ref:c,className:n.cx("focus-visible:u-outline relative grow overflow-y-auto outline-hidden","transition-all duration-300",{"px-xl py-lg":!t},o),style:{...g&&{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% + ${u.top?"0px":"44px"} + ${u.bottom?"0px":"44px"})`,maskPosition:`0 ${u.top?"0px":"-44px"}`}},...i,children:e})};y.displayName="Dialog.Body";const D=({asChild:e=!1,...o})=>{const t=x.useRenderSlot(e,"button");return a.jsx(r.Dialog.Close,{"data-spark-component":"dialog-close",render:t,...o})},b=({"aria-label":e,className:o,size:t="md",intent:l="neutral",design:i="ghost",children:s=a.jsx(O.Close,{}),ref:c,...g})=>a.jsx(D,{"data-spark-component":"dialog-close-button","data-part":"close",ref:c,className:n.cx(["absolute","top-md","right-xl"],o),asChild:!0,...g,children:a.jsx(I.IconButton,{intent:l,size:t,design:i,"aria-label":e,children:a.jsx(P.Icon,{children:s})})}),$=Object.assign(b,{id:"CloseButton"});b.displayName="Dialog.CloseButton";const j=({className:e,isNarrow:o=!1,size:t="md",ref:l,...i})=>{const{setIsFullScreen:s}=f();return d.useEffect(()=>(t==="fullscreen"&&s(!0),()=>s(!1)),[s,t]),a.jsx(r.Dialog.Popup,{ref:l,"data-spark-component":"dialog-content",role:"dialog",className:c=>n.cx(T.dialogContentStyles({isNarrow:o,size:t,className:typeof e=="function"?e(c):e})),...i})};j.displayName="Dialog.Content";const h=e=>a.jsx(r.Dialog.Description,{"data-spark-component":"dialog-description",...e});h.displayName="Dialog.Description";const v=({children:e,className:o,ref:t,...l})=>a.jsx("footer",{"data-spark-component":"dialog-footer",ref:t,className:n.cx(o,["px-xl","py-lg"]),...l,children:e});v.displayName="Dialog.Footer";const N=({children:e,className:o,ref:t,...l})=>a.jsx("header",{"data-spark-component":"dialog-header",ref:t,className:n.cx(o,["px-xl","py-lg"]),...l,children:e});N.displayName="Dialog.Header";const k=({className:e,...o})=>a.jsx(r.Dialog.Backdrop,{"data-spark-component":"dialog-overlay",className:t=>n.cx("z-overlay size-screen fixed inset-0","bg-overlay/dim-1","data-starting-style:animate-fade-in","data-ending-style:animate-fade-out",typeof e=="function"?e(t):e),...o});k.displayName="Dialog.Overlay";const C=({className:e,...o})=>a.jsx(r.Dialog.Portal,{"data-spark-component":"dialog-portal",className:n.cx(e,"z-modal absolute"),...o});C.displayName="Dialog.Portal";const S=({className:e,ref:o,...t})=>a.jsx(r.Dialog.Title,{"data-spark-component":"dialog-title",ref:o,className:n.cx("text-headline-1 text-on-surface","group-has-data-[part=close]:pr-3xl",e),...t});S.displayName="Dialog.Title";const R=({asChild:e=!1,...o})=>{const t=x.useRenderSlot(e,"button");return a.jsx(r.Dialog.Trigger,{"data-spark-component":"dialog-trigger",render:t,...o})};R.displayName="Dialog.Trigger";const q=Object.assign(p,{Trigger:R,Portal:C,Overlay:k,Content:j,Header:N,Body:y,Footer:v,Close:D,CloseButton:$,Title:S,Description:h});q.displayName="Dialog";exports.Dialog=q;
 //# sourceMappingURL=index.js.map

package/dist/dialog/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","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\n  extends Omit<ComponentProps<typeof BaseDialog.Root>, 'onOpenChange' | 'render'> {\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.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\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\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\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'>,\n    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\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\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\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\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\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\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\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\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\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"],"names":["DialogContext","createContext","DialogProvider","childrenProp","withFade","isFullScreen","setIsFullScreen","useState","jsx","useDialog","context","useContext","Dialog","onOpenChange","props","handleOpenChange","open","_eventDetails","BaseDialog","Body","children","className","inset","forwardedRef","rest","scrollAreaRef","useRef","ref","useMergeRefs","overflow","useScrollOverflow","cx","Close","asChild","renderSlot","useRenderSlot","Root","ariaLabel","size","intent","design","CloseSVG","IconButton","Icon","CloseButton","Content","isNarrow","useEffect","state","dialogContentStyles","Description","Footer","Header","Overlay","Portal","Title","others","Trigger"],"mappings":"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"}
+{"version":3,"file":"index.js","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\n  extends Omit<ComponentProps<typeof BaseDialog.Root>, 'onOpenChange' | 'render'> {\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\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\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\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'>,\n    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\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\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\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\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\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\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\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\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\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"],"names":["DialogContext","createContext","DialogProvider","childrenProp","withFade","isFullScreen","setIsFullScreen","useState","jsx","useDialog","context","useContext","Dialog","onOpenChange","props","handleOpenChange","open","_eventDetails","BaseDialog","Body","children","className","inset","forwardedRef","rest","scrollAreaRef","useRef","ref","useMergeRefs","overflow","useScrollOverflow","cx","Close","asChild","renderSlot","useRenderSlot","Root","ariaLabel","size","intent","design","CloseSVG","IconButton","Icon","CloseButton","Content","isNarrow","useEffect","state","dialogContentStyles","Description","Footer","Header","Overlay","Portal","Title","others","Trigger"],"mappings":"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"}

package/dist/dialog/index.mjs

@@ -4,18 +4,18 @@ import { createContext as B, useState as I, useContext as P, useRef as R, useEff
 import { useMergeRefs as O } from "@spark-ui/hooks/use-merge-refs";
 import { useScrollOverflow as T } from "@spark-ui/hooks/use-scroll-overflow";
 import { cx as s } from "class-variance-authority";
-import { u as m } from "../useRenderSlot-LwWj8QbC.mjs";
+import { u as g } from "../useRenderSlot-LwWj8QbC.mjs";
 import { Close as $ } from "@spark-ui/icons/Close";
-import { I as j } from "../Icon-Ck-dhfLd.mjs";
-import { I as z } from "../IconButton-C62-axzv.mjs";
-import { d as E } from "../DialogContent.styles-Du7_Dkde.mjs";
-const g = B(null), H = ({
+import { I as H } from "../Icon-Ck-dhfLd.mjs";
+import { I as j } from "../IconButton-C62-axzv.mjs";
+import { d as z } from "../DialogContent.styles-Du7_Dkde.mjs";
+const u = B(null), E = ({
   children: o,
   withFade: e = !1
 }) => {
   const [a, r] = I(!1);
   return /* @__PURE__ */ t(
-    g.Provider,
+    u.Provider,
     {
       value: {
         isFullScreen: a,
@@ -25,18 +25,19 @@ const g = B(null), H = ({
       children: o
     }
   );
-}, u = () => {
-  const o = P(g);
+}, f = () => {
+  const o = P(u);
   if (!o)
     throw Error("useDialog must be used within a Dialog provider");
   return o;
-}, f = ({ withFade: o = !1, onOpenChange: e, ...a }) => {
+}, m = ({ withFade: o = !1, onOpenChange: e, ...a }) => {
   const r = e ? (i, l) => {
     e(i);
   } : void 0;
-  return /* @__PURE__ */ t(H, { withFade: o, children: /* @__PURE__ */ t(n.Root, { "data-spark-component": "dialog", onOpenChange: r, ...a }) });
+  return /* @__PURE__ */ t(E, { withFade: o, children: /* @__PURE__ */ t(n.Root, { "data-spark-component": "dialog", onOpenChange: r, ...a }) });
 };
-f.displayName = "Dialog.Root";
+m.createHandle = n.createHandle;
+m.displayName = "Dialog.Root";
 const y = ({
   children: o,
   className: e,
@@ -44,7 +45,7 @@ const y = ({
   ref: r,
   ...i
 }) => {
-  const l = R(null), d = O(r, l), { withFade: c } = u(), { overflow: p } = T(l);
+  const l = R(null), d = O(r, l), { withFade: c } = f(), { overflow: p } = T(l);
   return /* @__PURE__ */ t(
     "div",
     {
@@ -72,7 +73,7 @@ const y = ({
 };
 y.displayName = "Dialog.Body";
 const x = ({ asChild: o = !1, ...e }) => {
-  const a = m(o, "button");
+  const a = g(o, "button");
   return /* @__PURE__ */ t(n.Close, { "data-spark-component": "dialog-close", render: a, ...e });
 }, D = ({
   "aria-label": o,
@@ -92,7 +93,7 @@ const x = ({ asChild: o = !1, ...e }) => {
     className: s(["absolute", "top-md", "right-xl"], e),
     asChild: !0,
     ...c,
-    children: /* @__PURE__ */ t(z, { intent: r, size: a, design: i, "aria-label": o, children: /* @__PURE__ */ t(j, { children: l }) })
+    children: /* @__PURE__ */ t(j, { intent: r, size: a, design: i, "aria-label": o, children: /* @__PURE__ */ t(H, { children: l }) })
   }
 ), A = Object.assign(D, {
   id: "CloseButton"
@@ -105,7 +106,7 @@ const b = ({
   ref: r,
   ...i
 }) => {
-  const { setIsFullScreen: l } = u();
+  const { setIsFullScreen: l } = f();
   return F(() => (a === "fullscreen" && l(!0), () => l(!1)), [l, a]), /* @__PURE__ */ t(
     n.Popup,
     {
@@ -113,7 +114,7 @@ const b = ({
       "data-spark-component": "dialog-content",
       role: "dialog",
       className: (d) => s(
-        E({
+        z({
           isNarrow: e,
           size: a,
           className: typeof o == "function" ? o(d) : o
@@ -187,11 +188,11 @@ const S = ({ className: o, ref: e, ...a }) => /* @__PURE__ */ t(
 );
 S.displayName = "Dialog.Title";
 const w = ({ asChild: o = !1, ...e }) => {
-  const a = m(o, "button");
+  const a = g(o, "button");
   return /* @__PURE__ */ t(n.Trigger, { "data-spark-component": "dialog-trigger", render: a, ...e });
 };
 w.displayName = "Dialog.Trigger";
-const M = Object.assign(f, {
+const M = Object.assign(m, {
   Trigger: w,
   Portal: C,
   Overlay: k,

package/dist/dialog/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","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\n  extends Omit<ComponentProps<typeof BaseDialog.Root>, 'onOpenChange' | 'render'> {\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.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\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\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\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'>,\n    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\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\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\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\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\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\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\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\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\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"],"names":["DialogContext","createContext","DialogProvider","childrenProp","withFade","isFullScreen","setIsFullScreen","useState","jsx","useDialog","context","useContext","Dialog","onOpenChange","props","handleOpenChange","open","_eventDetails","BaseDialog","Body","children","className","inset","forwardedRef","rest","scrollAreaRef","useRef","ref","useMergeRefs","overflow","useScrollOverflow","cx","Close","asChild","renderSlot","useRenderSlot","Root","ariaLabel","size","intent","design","CloseSVG","IconButton","Icon","CloseButton","Content","isNarrow","useEffect","state","dialogContentStyles","Description","Footer","Header","Overlay","Portal","Title","others","Trigger"],"mappings":"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"}
+{"version":3,"file":"index.mjs","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\n  extends Omit<ComponentProps<typeof BaseDialog.Root>, 'onOpenChange' | 'render'> {\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\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\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\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'>,\n    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\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\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\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\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\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\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\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\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\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"],"names":["DialogContext","createContext","DialogProvider","childrenProp","withFade","isFullScreen","setIsFullScreen","useState","jsx","useDialog","context","useContext","Dialog","onOpenChange","props","handleOpenChange","open","_eventDetails","BaseDialog","Body","children","className","inset","forwardedRef","rest","scrollAreaRef","useRef","ref","useMergeRefs","overflow","useScrollOverflow","cx","Close","asChild","renderSlot","useRenderSlot","Root","ariaLabel","size","intent","design","CloseSVG","IconButton","Icon","CloseButton","Content","isNarrow","useEffect","state","dialogContentStyles","Description","Footer","Header","Overlay","Portal","Title","others","Trigger"],"mappings":"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"}

package/dist/rating/Rating.d.ts

@@ -1,23 +1,23 @@
 import { ComponentPropsWithRef, PropsWithChildren } from 'react';
-import { RatingStarProps } from './RatingStar';
+import { RatingValue } from './types';
 export interface RatingProps extends PropsWithChildren<ComponentPropsWithRef<'div'>> {
     /**
      * Use the `defaultValue` prop to set the default value of the input, on a from 0 to 5.
      *
      * Use this when you want to use it in an uncontrolled manner
      */
-    defaultValue?: number;
+    defaultValue?: RatingValue;
     /**
      * The value is the number of the rating selected, on a scale from 0 to 5.
      *
      * Use this when you want to use it in a controlled manner,
      * in conjunction with the `onValueChange` prop
      */
-    value?: number;
+    value?: RatingValue;
     /**
      * Event handler called when the value changes.
      */
-    onValueChange?: (value: number) => void;
+    onValueChange?: (value: RatingValue) => void;
     /**
      * Sets the component as interactive or not.
      * @default undefined
@@ -29,24 +29,29 @@ export interface RatingProps extends PropsWithChildren<ComponentPropsWithRef<'di
      */
     disabled?: boolean;
     /**
-     * Sets the size of the stars.
-     * @default 'md'
+     * When true, indicates that the user must select a rating before form submission.
+     * @default false
      */
-    size?: RatingStarProps['size'];
+    required?: boolean;
     /**
-     * Name of the underlying input.
+     * Name of the underlying hidden input (for form submission).
      * @default undefined
      */
     name?: string;
     /**
-     * id of the underlying input.
+     * id of the underlying hidden input.
      * @default undefined
      */
     id?: string;
     /**
-     * aria-label of the underlying input.
+     * aria-label of the radiogroup.
      * @default undefined
      */
-    'aria-label': string;
+    'aria-label'?: string;
+    /**
+     * Returns the aria-label applied to each radio star.
+     * Defaults to `${aria-label} ${index + 1}`.
+     */
+    getStarLabel?: (index: number) => string;
 }
-export declare const Rating: ({ defaultValue, value: propValue, onValueChange, size, disabled, readOnly, name, id, "aria-label": ariaLabel, ref, ...rest }: RatingProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Rating: ({ defaultValue, value: propValue, onValueChange, disabled, readOnly, required: requiredProp, name, id, "aria-label": ariaLabel, getStarLabel, ref, ...rest }: RatingProps) => import("react/jsx-runtime").JSX.Element;

package/dist/rating/RatingStar.d.ts

@@ -1,10 +1,19 @@
-import { MouseEvent, Ref } from 'react';
+import { KeyboardEvent, MouseEvent, PropsWithChildren, Ref } from 'react';
 import { RatingStarIconStylesProps, RatingStarstylesProps } from './RatingStar.styles';
 import { StarValue } from './types';
-export interface RatingStarProps extends RatingStarstylesProps, RatingStarIconStylesProps {
+export interface RatingStarProps extends PropsWithChildren<RatingStarstylesProps>, RatingStarIconStylesProps {
     value: StarValue;
+    /** Whether this radio option is selected (for radiogroup pattern). */
+    checked?: boolean;
+    /** Accessible name for the radio (e.g. "one star", "two stars"). */
+    ariaLabel?: string;
+    /** Accessible ids used to compose the radio name. */
+    ariaLabelledBy?: string;
+    /** Tab index for roving tabindex (0 or -1). */
+    tabIndex?: number;
     onClick?: (event: MouseEvent<HTMLDivElement>) => void;
+    onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void;
     onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void;
     ref?: Ref<HTMLDivElement>;
 }
-export declare const RatingStar: ({ value, size, disabled, readOnly, onClick, onMouseEnter, ref: forwardedRef, }: RatingStarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RatingStar: ({ value, size, disabled, readOnly, checked, ariaLabel, ariaLabelledBy, tabIndex, onClick, onKeyDown, onMouseEnter, children, ref: forwardedRef, }: RatingStarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/rating/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),O=require("@spark-ui/hooks/use-combined-state"),o=require("class-variance-authority"),p=require("react"),P=require("@spark-ui/icons/StarFill"),D=require("@spark-ui/icons/StarOutline"),S=require("../Icon-CF0W0LKr.js"),_=o.cx("[&_>_div]:peer-hover:w-0!"),F=o.cva(["peer","after:inset-0","group","relative","after:block after:absolute"],{variants:{disabled:{true:"opacity-dim-3",false:""},readOnly:{true:"",false:""},gap:{sm:["after:w-[calc(100%+(var(--spacing-sm)))]","last-of-type:after:content-none"],md:["after:w-[calc(100%+(var(--spacing-md)))]","last-of-type:after:content-none"]}},compoundVariants:[{readOnly:!1,disabled:!1,className:o.cx(_,"cursor-pointer")}],defaultVariants:{disabled:!1,readOnly:!1,gap:"sm"}}),y=o.cva("",{variants:{size:{sm:"text-caption-link",md:"text-body-1",lg:"text-display-1"},design:{filled:["text-main-variant","group-[[data-part=star][data-hovered]]:text-main-variant-hovered"],outlined:["text-on-surface/dim-3"]}}}),H=({value:e,size:a,disabled:s,readOnly:n,onClick:c,onMouseEnter:i,ref:m})=>r.jsxs("div",{"data-spark-component":"rating-star",ref:m,onMouseEnter:i,className:F({gap:a==="lg"?"md":"sm",disabled:s,readOnly:n}),"data-part":"star",onClick:c,children:[r.jsx("div",{className:o.cx("z-raised absolute overflow-hidden","group-[[data-part=star][data-hovered]]:overflow-visible"),style:{width:e*100+"%"},children:r.jsx(S.Icon,{className:y({size:a,design:"filled"}),children:r.jsx(P.StarFill,{})})}),r.jsx(S.Icon,{className:y({size:a,design:"outlined"}),children:r.jsx(D.StarOutline,{})})]});function R(e){return Math.round(e/.5)*.5}function L({value:e,index:a}){if(e===void 0)return 0;const s=a+1,n=R(e);return Math.ceil(n)<s?0:n>=s?1:.5}function B(e,a){const s=e.slice(0,a),n=e.slice(a);return[s,n]}const T=({defaultValue:e,value:a,onValueChange:s,size:n="md",disabled:c,readOnly:i,name:m,id:N,"aria-label":j,ref:k,...A})=>{const u=p.useRef(null),f=p.useRef([]),[v,b]=O.useCombinedState(a,e,s),g=p.useRef(v),h=!(c||i);function I(t){u.current&&(b(t+1),g.current=t+1,u.current.focus(),u.current.setAttribute("data-clicked",""))}function w(t){g.current===Number(t.target.value)||Number(t.target.value)===0||(g.current=Number(t.target.value),b(Number(t.target.value)))}function C({currentTarget:t}){const l=f.current.findIndex(d=>d===t),[x,E]=B(f.current,l+1);x.forEach(d=>d.setAttribute("data-hovered","")),E.forEach(d=>d.removeAttribute("data-hovered"))}const q=p.useCallback(t=>{t&&f.current.push(t)},[]);function M(){u.current?.removeAttribute("data-clicked")}function V(){f.current.forEach(t=>t.removeAttribute("data-hovered"))}return r.jsxs("div",{className:"relative inline-flex",ref:k,"data-spark-component":"rating",...A,onMouseLeave:V,children:[r.jsx("input",{name:m,id:N,"aria-label":j,ref:u,"data-part":"input",className:"peer absolute inset-0 opacity-0",type:"range",min:"0",max:"5",step:i?.5:1,disabled:c,readOnly:i,value:R(v??0),onChange:t=>h&&w(t),onBlur:M}),r.jsx("div",{className:o.cx(n==="lg"?"gap-x-md":"gap-x-sm","flex","peer-focus-visible:u-outline peer-[[data-part=input][data-clicked]]:shadow-none"),children:Array.from({length:5}).map((t,l)=>r.jsx(H,{disabled:c,readOnly:i,size:n,onClick:()=>h&&I(l),onMouseEnter:x=>h&&C(x),ref:q,value:L({index:l,value:v})},l))})]})};exports.Rating=T;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),G=require("@spark-ui/hooks/use-combined-state"),f=require("class-variance-authority"),u=require("react"),Q=require("../form-field/index.js"),W=require("@spark-ui/icons/StarFill"),X=require("@spark-ui/icons/StarOutline"),V=require("../Icon-CF0W0LKr.js"),Y=f.cx("[&_>_div]:peer-hover:w-0!"),Z=f.cva(["peer after:inset-0 group relative after:block after:absolute"],{variants:{disabled:{true:"opacity-dim-3",false:""},readOnly:{true:"",false:""},gap:{sm:["after:w-[calc(100%+(var(--spacing-sm)))]","last-of-type:after:content-none"],md:["after:w-[calc(100%+(var(--spacing-md)))]","last-of-type:after:content-none"]}},compoundVariants:[{readOnly:!1,disabled:!1,className:f.cx(Y,"cursor-pointer transition-all duration-200 scale-100","hover:scale-150 focus-visible:scale-150","[&[data-suppress-scale]]:hover:scale-100 [&[data-suppress-scale]]:focus-visible:scale-100")}],defaultVariants:{disabled:!1,readOnly:!1,gap:"sm"}}),H=f.cva("",{variants:{size:{sm:"text-caption-link",md:"text-body-1",lg:"text-display-1"},design:{filled:["text-main-variant","group-[[data-part=star][data-hovered]]:text-main-variant-hovered"],outlined:["text-on-surface/dim-3"]}}}),ee=({value:e,size:t,disabled:r,readOnly:o,checked:i=!1,ariaLabel:l,ariaLabelledBy:c,tabIndex:I,onClick:v,onKeyDown:h,onMouseEnter:k,children:w,ref:p})=>{const g=!r&&!o,[j,y]=u.useState(!1),C=R=>{v?.(R),g&&y(!0)},S=()=>y(!1);return n.jsxs("div",{ref:p,role:"radio","aria-checked":i,"aria-label":l,"aria-labelledby":c,tabIndex:I,"data-spark-component":"rating-star","data-part":"star",...g&&j&&{"data-suppress-scale":""},className:Z({gap:t==="lg"?"md":"sm",disabled:r,readOnly:o}),onClick:C,onKeyDown:h,onMouseEnter:k,onMouseLeave:S,onMouseMove:S,children:[n.jsx("div",{className:f.cx("z-raised absolute overflow-hidden","group-[[data-part=star][data-hovered]]:overflow-visible"),style:{width:e*100+"%"},children:n.jsx(V.Icon,{className:H({size:t,design:"filled"}),children:n.jsx(W.StarFill,{})})}),n.jsx(V.Icon,{className:H({size:t,design:"outlined"}),children:n.jsx(X.StarOutline,{})}),w]})};function ae({value:e,index:t}){if(e===void 0)return 0;const r=t+1;return e>=r?1:0}function te(e,t){const r=e.slice(0,t),o=e.slice(t);return[r,o]}const re=e=>e===void 0||!Number.isInteger(e)||e<1?0:Math.min(5,Math.max(1,e));function se(e,t,r,o){return i=>{if(o)switch(i.key){case"ArrowRight":case"ArrowDown":i.preventDefault();const l=Math.min(4,e+1);r(l+1),t.current[l]?.focus();break;case"ArrowLeft":case"ArrowUp":i.preventDefault();const c=Math.max(0,e-1);r(c+1),t.current[c]?.focus();break;case" ":i.preventDefault(),r(e+1);break}}}function ne(e,t){return t>=1?t-1===e?0:-1:e===0?0:-1}const oe=({defaultValue:e,value:t,onValueChange:r,disabled:o,readOnly:i,required:l,name:c,id:I,"aria-label":v,getStarLabel:h,ref:k,...w})=>{const{labelId:p,isInvalid:g,isRequired:j,description:y,name:C,disabled:S,readOnly:R}=Q.useFormFieldControl(),d=u.useRef([]),N=u.useId(),[D,O]=u.useState(null),[K,q]=G.useCombinedState(t,e,r),x=re(K??0),F=o??S,$=i??R,L=l!==void 0?l:j,E=c??C,m=!(F||$),A=h!==void 0||v!==void 0,_=D!==null?D+1:x;function J(s){if(!m)return;const a=s+1;q(a),d.current[s]?.focus()}const P=u.useCallback(s=>se(s,d,q,m),[m,q]);function T({currentTarget:s}){const a=d.current.findIndex(b=>b===s);O(a>=0?a:null);const[M,U]=te(d.current,a+1);M.forEach(b=>b?.setAttribute("data-hovered","")),U.forEach(b=>b?.removeAttribute("data-hovered"))}const z=u.useCallback(s=>a=>{d.current[s]=a},[]);function B(){O(null),d.current.forEach(s=>s?.removeAttribute("data-hovered"))}return n.jsxs("div",{ref:k,id:I,role:"radiogroup","aria-label":v,"aria-labelledby":p,"aria-invalid":g,"aria-required":L,"aria-describedby":y,className:"relative inline-flex","data-spark-component":"rating",...w,onMouseLeave:B,children:[E!==void 0&&n.jsx("input",{type:"hidden",name:E,value:x,"aria-hidden":!0,"data-part":"input"}),n.jsx("div",{className:f.cx("gap-x-md","flex"),children:Array.from({length:5}).map((s,a)=>n.jsx(ee,{ref:z(a),disabled:F,readOnly:$,size:"lg",value:ae({index:a,value:_}),checked:x===a+1,ariaLabel:A?h?.(a)??`${v} ${a+1}`:void 0,ariaLabelledBy:!A&&p?`${p} ${N}-star-${a+1}`:void 0,tabIndex:m?ne(a,x):-1,onClick:()=>J(a),onKeyDown:P(a),onMouseEnter:M=>m&&T(M),children:!A&&n.jsx("span",{id:`${N}-star-${a+1}`,className:"sr-only",children:a+1})},a))})]})};exports.Rating=oe;
 //# sourceMappingURL=index.js.map

package/dist/rating/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/rating/RatingStar.styles.ts","../../src/rating/RatingStar.tsx","../../src/rating/utils.ts","../../src/rating/Rating.tsx"],"sourcesContent":["import { cva, cx, VariantProps } from 'class-variance-authority'\n\nconst emptyRemainingStarsOnHoverClass = cx('[&_>_div]:peer-hover:w-0!')\n\nconst ratingStarStyles = cva(\n  ['peer', 'after:inset-0', 'group', 'relative', 'after:block after:absolute'],\n  {\n    variants: {\n      disabled: {\n        true: 'opacity-dim-3',\n        false: '',\n      },\n      readOnly: {\n        true: '',\n        false: '',\n      },\n      gap: {\n        sm: ['after:w-[calc(100%+(var(--spacing-sm)))]', 'last-of-type:after:content-none'],\n        md: ['after:w-[calc(100%+(var(--spacing-md)))]', 'last-of-type:after:content-none'],\n      },\n    },\n    compoundVariants: [\n      {\n        readOnly: false,\n        disabled: false,\n        className: cx(emptyRemainingStarsOnHoverClass, 'cursor-pointer'),\n      },\n    ],\n    defaultVariants: {\n      disabled: false,\n      readOnly: false,\n      gap: 'sm',\n    },\n  }\n)\n\nconst ratingStarIconStyles = cva('', {\n  variants: {\n    size: {\n      sm: 'text-caption-link',\n      md: 'text-body-1',\n      lg: 'text-display-1',\n    },\n    design: {\n      filled: [\n        'text-main-variant',\n        'group-[[data-part=star][data-hovered]]:text-main-variant-hovered',\n      ],\n      outlined: ['text-on-surface/dim-3'],\n    },\n  },\n})\n\ntype RatingStarstylesProps = Omit<VariantProps<typeof ratingStarStyles>, 'gap'>\ntype RatingStarIconStylesProps = Omit<VariantProps<typeof ratingStarIconStyles>, 'design'>\n\nexport { ratingStarStyles, ratingStarIconStyles }\nexport type { RatingStarstylesProps, RatingStarIconStylesProps }\n","import { StarFill } from '@spark-ui/icons/StarFill'\nimport { StarOutline } from '@spark-ui/icons/StarOutline'\nimport { cx } from 'class-variance-authority'\nimport { type MouseEvent, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport {\n  ratingStarIconStyles,\n  type RatingStarIconStylesProps,\n  ratingStarStyles,\n  type RatingStarstylesProps,\n} from './RatingStar.styles'\nimport type { StarValue } from './types'\n\nexport interface RatingStarProps extends RatingStarstylesProps, RatingStarIconStylesProps {\n  value: StarValue\n  onClick?: (event: MouseEvent<HTMLDivElement>) => void\n  onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const RatingStar = ({\n  value,\n  size,\n  disabled,\n  readOnly,\n  onClick,\n  onMouseEnter,\n  ref: forwardedRef,\n}: RatingStarProps) => {\n  return (\n    <div\n      data-spark-component=\"rating-star\"\n      ref={forwardedRef}\n      onMouseEnter={onMouseEnter}\n      className={ratingStarStyles({\n        gap: size === 'lg' ? 'md' : 'sm',\n        disabled,\n        readOnly,\n      })}\n      data-part=\"star\"\n      onClick={onClick}\n    >\n      <div\n        className={cx(\n          'z-raised absolute overflow-hidden',\n          'group-[[data-part=star][data-hovered]]:overflow-visible'\n        )}\n        style={{ width: value * 100 + '%' }}\n      >\n        <Icon\n          className={ratingStarIconStyles({\n            size,\n            design: 'filled',\n          })}\n        >\n          <StarFill />\n        </Icon>\n      </div>\n\n      <Icon className={ratingStarIconStyles({ size, design: 'outlined' })}>\n        <StarOutline />\n      </Icon>\n    </div>\n  )\n}\n","import { type StarValue } from './types'\n\nfunction getNearestHalfDecimal(num: number): number {\n  return Math.round(num / 0.5) * 0.5\n}\n\nfunction getStarValue({ value, index }: { value?: number; index: number }): StarValue {\n  if (value === undefined) return 0\n\n  const starPosition = index + 1\n  const formattedValue = getNearestHalfDecimal(value)\n\n  if (Math.ceil(formattedValue) < starPosition) return 0\n\n  return formattedValue >= starPosition ? 1 : 0.5\n}\n\nfunction splitAt<T>(arr: T[], index: number): [T[], T[]] {\n  const prev = arr.slice(0, index)\n  const next = arr.slice(index)\n\n  return [prev, next]\n}\n\nexport { getNearestHalfDecimal, getStarValue, splitAt }\n","import { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { cx } from 'class-variance-authority'\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithRef,\n  type MouseEvent,\n  type PropsWithChildren,\n  useCallback,\n  useRef,\n} from 'react'\n\nimport { RatingStar, type RatingStarProps } from './RatingStar'\nimport { getNearestHalfDecimal, getStarValue, splitAt } from './utils'\n\nexport interface RatingProps extends PropsWithChildren<ComponentPropsWithRef<'div'>> {\n  /**\n   * Use the `defaultValue` prop to set the default value of the input, on a from 0 to 5.\n   *\n   * Use this when you want to use it in an uncontrolled manner\n   */\n  defaultValue?: number\n  /**\n   * The value is the number of the rating selected, on a scale from 0 to 5.\n   *\n   * Use this when you want to use it in a controlled manner,\n   * in conjunction with the `onValueChange` prop\n   */\n  value?: number\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: number) => void\n  /**\n   * Sets the component as interactive or not.\n   * @default undefined\n   */\n  readOnly?: boolean\n  /**\n   * When `true`, prevents the user from interacting.\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Sets the size of the stars.\n   * @default 'md'\n   */\n  size?: RatingStarProps['size']\n  /**\n   * Name of the underlying input.\n   * @default undefined\n   */\n  name?: string\n  /**\n   * id of the underlying input.\n   * @default undefined\n   */\n  id?: string\n  /**\n   * aria-label of the underlying input.\n   * @default undefined\n   */\n  'aria-label': string\n}\n\nexport const Rating = ({\n  defaultValue,\n  value: propValue,\n  onValueChange,\n  size = 'md',\n  disabled,\n  readOnly,\n  name,\n  id,\n  'aria-label': ariaLabel,\n  ref,\n  ...rest\n}: RatingProps) => {\n  const inputRef = useRef<HTMLInputElement>(null)\n  const starRefList = useRef<HTMLDivElement[]>([])\n\n  const [value, setRatingValue] = useCombinedState(propValue, defaultValue, onValueChange)\n\n  const valueRef = useRef(value)\n  const isInteractive = !(disabled || readOnly)\n\n  function onStarClick(index: number) {\n    if (!inputRef.current) return\n\n    setRatingValue(index + 1)\n    valueRef.current = index + 1\n\n    inputRef.current.focus()\n    inputRef.current.setAttribute('data-clicked', '')\n  }\n\n  function onInputChange(event: ChangeEvent<HTMLInputElement>) {\n    // 1. Avoiding unnecessary calls to onValueChange prop if value doesn't change\n    // 2. Preventing value to be resetted to 0\n    if (valueRef.current === Number(event.target.value) || Number(event.target.value) === 0) {\n      return\n    }\n    valueRef.current = Number(event.target.value)\n\n    setRatingValue(Number(event.target.value))\n  }\n\n  function onStarMouseEnter({ currentTarget }: MouseEvent<HTMLDivElement>) {\n    const currentStarIndex = starRefList.current.findIndex(star => star === currentTarget)\n\n    const [previousStars, followingStars] = splitAt(starRefList.current, currentStarIndex + 1)\n\n    previousStars.forEach(star => star.setAttribute('data-hovered', ''))\n    followingStars.forEach(star => star.removeAttribute('data-hovered'))\n  }\n\n  const handleStarRef = useCallback((elm: HTMLDivElement | null) => {\n    if (!elm) return\n    starRefList.current.push(elm)\n  }, [])\n\n  function resetDataPartInputAttr() {\n    inputRef.current?.removeAttribute('data-clicked')\n  }\n\n  function resetDataPartStarAttr() {\n    starRefList.current.forEach(star => star.removeAttribute('data-hovered'))\n  }\n\n  return (\n    <div\n      className=\"relative inline-flex\"\n      ref={ref}\n      data-spark-component=\"rating\"\n      {...rest}\n      onMouseLeave={resetDataPartStarAttr}\n    >\n      <input\n        name={name}\n        id={id}\n        aria-label={ariaLabel}\n        ref={inputRef}\n        data-part=\"input\"\n        className=\"peer absolute inset-0 opacity-0\"\n        type=\"range\"\n        min=\"0\"\n        max=\"5\"\n        step={readOnly ? 0.5 : 1}\n        disabled={disabled}\n        readOnly={readOnly}\n        value={getNearestHalfDecimal(value ?? 0)}\n        onChange={event => isInteractive && onInputChange(event)}\n        onBlur={resetDataPartInputAttr}\n      />\n      <div\n        className={cx(\n          size === 'lg' ? 'gap-x-md' : 'gap-x-sm',\n          'flex',\n          'peer-focus-visible:u-outline peer-[[data-part=input][data-clicked]]:shadow-none'\n        )}\n      >\n        {Array.from({ length: 5 }).map((_, index) => (\n          <RatingStar\n            disabled={disabled}\n            readOnly={readOnly}\n            size={size}\n            onClick={() => isInteractive && onStarClick(index)}\n            onMouseEnter={event => isInteractive && onStarMouseEnter(event)}\n            ref={handleStarRef}\n            key={index}\n            value={getStarValue({ index, value })}\n          />\n        ))}\n      </div>\n    </div>\n  )\n}\n"],"names":["emptyRemainingStarsOnHoverClass","cx","ratingStarStyles","cva","ratingStarIconStyles","RatingStar","value","size","disabled","readOnly","onClick","onMouseEnter","forwardedRef","jsxs","jsx","Icon","StarFill","StarOutline","getNearestHalfDecimal","num","getStarValue","index","starPosition","formattedValue","splitAt","arr","prev","next","Rating","defaultValue","propValue","onValueChange","name","id","ariaLabel","ref","rest","inputRef","useRef","starRefList","setRatingValue","useCombinedState","valueRef","isInteractive","onStarClick","onInputChange","event","onStarMouseEnter","currentTarget","currentStarIndex","star","previousStars","followingStars","handleStarRef","useCallback","elm","resetDataPartInputAttr","resetDataPartStarAttr","_"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/rating/RatingStar.styles.ts","../../src/rating/RatingStar.tsx","../../src/rating/utils.ts","../../src/rating/Rating.tsx"],"sourcesContent":["import { cva, cx, VariantProps } from 'class-variance-authority'\n\nconst emptyRemainingStarsOnHoverClass = cx('[&_>_div]:peer-hover:w-0!')\n\nconst ratingStarStyles = cva(['peer after:inset-0 group relative after:block after:absolute'], {\n  variants: {\n    disabled: {\n      true: 'opacity-dim-3',\n      false: '',\n    },\n    readOnly: {\n      true: '',\n      false: '',\n    },\n    gap: {\n      sm: ['after:w-[calc(100%+(var(--spacing-sm)))]', 'last-of-type:after:content-none'],\n      md: ['after:w-[calc(100%+(var(--spacing-md)))]', 'last-of-type:after:content-none'],\n    },\n  },\n  compoundVariants: [\n    {\n      readOnly: false,\n      disabled: false,\n      className: cx(\n        emptyRemainingStarsOnHoverClass,\n        'cursor-pointer transition-all duration-200 scale-100',\n        /* mouseOver / focusIn => scale 150 */\n        'hover:scale-150 focus-visible:scale-150',\n        /* mouseOut / focusOut / selection (click) => no scale; mouseMove clears selection => scale again */\n        '[&[data-suppress-scale]]:hover:scale-100 [&[data-suppress-scale]]:focus-visible:scale-100'\n      ),\n    },\n  ],\n  defaultVariants: {\n    disabled: false,\n    readOnly: false,\n    gap: 'sm',\n  },\n})\n\nconst ratingStarIconStyles = cva('', {\n  variants: {\n    size: {\n      sm: 'text-caption-link',\n      md: 'text-body-1',\n      lg: 'text-display-1',\n    },\n    design: {\n      filled: [\n        'text-main-variant',\n        'group-[[data-part=star][data-hovered]]:text-main-variant-hovered',\n      ],\n      outlined: ['text-on-surface/dim-3'],\n    },\n  },\n})\n\ntype RatingStarstylesProps = Omit<VariantProps<typeof ratingStarStyles>, 'gap'>\ntype RatingStarIconStylesProps = Omit<VariantProps<typeof ratingStarIconStyles>, 'design'>\n\nexport { ratingStarStyles, ratingStarIconStyles }\nexport type { RatingStarstylesProps, RatingStarIconStylesProps }\n","import { StarFill } from '@spark-ui/icons/StarFill'\nimport { StarOutline } from '@spark-ui/icons/StarOutline'\nimport { cx } from 'class-variance-authority'\nimport { type KeyboardEvent, type MouseEvent, type PropsWithChildren, Ref, useState } from 'react'\n\nimport { Icon } from '../icon'\nimport {\n  ratingStarIconStyles,\n  type RatingStarIconStylesProps,\n  ratingStarStyles,\n  type RatingStarstylesProps,\n} from './RatingStar.styles'\nimport type { StarValue } from './types'\n\nexport interface RatingStarProps\n  extends PropsWithChildren<RatingStarstylesProps>,\n    RatingStarIconStylesProps {\n  value: StarValue\n  /** Whether this radio option is selected (for radiogroup pattern). */\n  checked?: boolean\n  /** Accessible name for the radio (e.g. \"one star\", \"two stars\"). */\n  ariaLabel?: string\n  /** Accessible ids used to compose the radio name. */\n  ariaLabelledBy?: string\n  /** Tab index for roving tabindex (0 or -1). */\n  tabIndex?: number\n  onClick?: (event: MouseEvent<HTMLDivElement>) => void\n  onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void\n  onMouseEnter?: (event: MouseEvent<HTMLDivElement>) => void\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const RatingStar = ({\n  value,\n  size,\n  disabled,\n  readOnly,\n  checked = false,\n  ariaLabel,\n  ariaLabelledBy,\n  tabIndex,\n  onClick,\n  onKeyDown,\n  onMouseEnter,\n  children,\n  ref: forwardedRef,\n}: RatingStarProps) => {\n  const isInteractive = !disabled && !readOnly\n  const [justClicked, setJustClicked] = useState(false)\n\n  const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n    onClick?.(event)\n    if (isInteractive) setJustClicked(true)\n  }\n\n  const clearJustClicked = () => setJustClicked(false)\n\n  return (\n    <div\n      ref={forwardedRef}\n      role=\"radio\"\n      aria-checked={checked}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      tabIndex={tabIndex}\n      data-spark-component=\"rating-star\"\n      data-part=\"star\"\n      {...(isInteractive && justClicked && { 'data-suppress-scale': '' })}\n      className={ratingStarStyles({\n        gap: size === 'lg' ? 'md' : 'sm',\n        disabled,\n        readOnly,\n      })}\n      onClick={handleClick}\n      onKeyDown={onKeyDown}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={clearJustClicked}\n      onMouseMove={clearJustClicked}\n    >\n      <div\n        className={cx(\n          'z-raised absolute overflow-hidden',\n          'group-[[data-part=star][data-hovered]]:overflow-visible'\n        )}\n        style={{ width: value * 100 + '%' }}\n      >\n        <Icon\n          className={ratingStarIconStyles({\n            size,\n            design: 'filled',\n          })}\n        >\n          <StarFill />\n        </Icon>\n      </div>\n\n      <Icon className={ratingStarIconStyles({ size, design: 'outlined' })}>\n        <StarOutline />\n      </Icon>\n      {children}\n    </div>\n  )\n}\n","import { type StarValue } from './types'\n\nfunction getStarValue({ value, index }: { value?: number; index: number }): StarValue {\n  if (value === undefined) return 0\n\n  const starPosition = index + 1\n\n  return value >= starPosition ? 1 : 0\n}\n\nfunction splitAt<T>(arr: T[], index: number): [T[], T[]] {\n  const prev = arr.slice(0, index)\n  const next = arr.slice(index)\n\n  return [prev, next]\n}\n\nexport { getStarValue, splitAt }\n","/* eslint-disable max-lines-per-function */\nimport { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { cx } from 'class-variance-authority'\nimport {\n  type ComponentPropsWithRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  type PropsWithChildren,\n  type RefObject,\n  useCallback,\n  useId,\n  useRef,\n  useState,\n} from 'react'\n\nimport { useFormFieldControl } from '../form-field'\nimport { RatingStar } from './RatingStar'\nimport type { RatingValue } from './types'\nimport { getStarValue, splitAt } from './utils'\n\nconst getRatingInteger = (value: number | undefined): RatingValue => {\n  if (value === undefined || !Number.isInteger(value) || value < 1) {\n    return 0\n  }\n\n  return Math.min(5, Math.max(1, value)) as RatingValue\n}\n\nfunction createStarKeyDownHandler(\n  index: number,\n  starRefList: RefObject<(HTMLDivElement | null)[]>,\n  setRatingValue: (value: RatingValue) => void,\n  isInteractive: boolean\n) {\n  return (event: KeyboardEvent<HTMLDivElement>) => {\n    if (!isInteractive) return\n\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        event.preventDefault()\n        const nextIndex = Math.min(4, index + 1)\n        setRatingValue((nextIndex + 1) as RatingValue)\n        starRefList.current[nextIndex]?.focus()\n        break\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        event.preventDefault()\n        const prevIndex = Math.max(0, index - 1)\n        setRatingValue((prevIndex + 1) as RatingValue)\n        starRefList.current[prevIndex]?.focus()\n        break\n      case ' ':\n        event.preventDefault()\n        setRatingValue((index + 1) as RatingValue)\n        break\n      default:\n        break\n    }\n  }\n}\n\nfunction getStarTabIndex(index: number, ratingValue: RatingValue): number {\n  if (ratingValue >= 1) {\n    return ratingValue - 1 === index ? 0 : -1\n  }\n\n  return index === 0 ? 0 : -1\n}\n\nexport interface RatingProps extends PropsWithChildren<ComponentPropsWithRef<'div'>> {\n  /**\n   * Use the `defaultValue` prop to set the default value of the input, on a from 0 to 5.\n   *\n   * Use this when you want to use it in an uncontrolled manner\n   */\n  defaultValue?: RatingValue\n  /**\n   * The value is the number of the rating selected, on a scale from 0 to 5.\n   *\n   * Use this when you want to use it in a controlled manner,\n   * in conjunction with the `onValueChange` prop\n   */\n  value?: RatingValue\n  /**\n   * Event handler called when the value changes.\n   */\n  onValueChange?: (value: RatingValue) => void\n  /**\n   * Sets the component as interactive or not.\n   * @default undefined\n   */\n  readOnly?: boolean\n  /**\n   * When `true`, prevents the user from interacting.\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * When true, indicates that the user must select a rating before form submission.\n   * @default false\n   */\n  required?: boolean\n  /**\n   * Name of the underlying hidden input (for form submission).\n   * @default undefined\n   */\n  name?: string\n  /**\n   * id of the underlying hidden input.\n   * @default undefined\n   */\n  id?: string\n  /**\n   * aria-label of the radiogroup.\n   * @default undefined\n   */\n  'aria-label'?: string\n  /**\n   * Returns the aria-label applied to each radio star.\n   * Defaults to `${aria-label} ${index + 1}`.\n   */\n  getStarLabel?: (index: number) => string\n}\n\nexport const Rating = ({\n  defaultValue,\n  value: propValue,\n  onValueChange,\n  disabled,\n  readOnly,\n  required: requiredProp,\n  name,\n  id,\n  'aria-label': ariaLabel,\n  getStarLabel,\n  ref,\n  ...rest\n}: RatingProps) => {\n  const {\n    labelId,\n    isInvalid,\n    isRequired,\n    description,\n    name: formFieldName,\n    disabled: formFieldDisabled,\n    readOnly: formFieldReadOnly,\n  } = useFormFieldControl()\n  const starRefList = useRef<(HTMLDivElement | null)[]>([])\n  const ratingId = useId()\n  const [hoveredStarIndex, setHoveredStarIndex] = useState<number | null>(null)\n  const [value, setRatingValue] = useCombinedState(propValue, defaultValue, onValueChange)\n  const ratingValue = getRatingInteger(value ?? 0)\n  const resolvedDisabled = disabled ?? formFieldDisabled\n  const resolvedReadOnly = readOnly ?? formFieldReadOnly\n  const required = requiredProp !== undefined ? requiredProp : isRequired\n  const groupName = name ?? formFieldName\n  const isInteractive = !(resolvedDisabled || resolvedReadOnly)\n  const hasExplicitStarLabel = getStarLabel !== undefined || ariaLabel !== undefined\n  const displayValue = hoveredStarIndex !== null ? hoveredStarIndex + 1 : ratingValue\n\n  function onStarClick(index: number) {\n    if (!isInteractive) return\n\n    const newValue = (index + 1) as RatingValue\n    setRatingValue(newValue)\n    starRefList.current[index]?.focus()\n  }\n\n  const onStarKeyDown = useCallback(\n    (index: number) => createStarKeyDownHandler(index, starRefList, setRatingValue, isInteractive),\n    [isInteractive, setRatingValue]\n  )\n\n  function onStarMouseEnter({ currentTarget }: MouseEvent<HTMLDivElement>) {\n    const currentStarIndex = starRefList.current.findIndex(star => star === currentTarget)\n    setHoveredStarIndex(currentStarIndex >= 0 ? currentStarIndex : null)\n    const [previousStars, followingStars] = splitAt(starRefList.current, currentStarIndex + 1)\n    previousStars.forEach(star => star?.setAttribute('data-hovered', ''))\n    followingStars.forEach(star => star?.removeAttribute('data-hovered'))\n  }\n\n  const handleStarRef = useCallback(\n    (index: number) => (elm: HTMLDivElement | null) => {\n      starRefList.current[index] = elm\n    },\n    []\n  )\n\n  function resetDataPartStarAttr() {\n    setHoveredStarIndex(null)\n    starRefList.current.forEach(star => star?.removeAttribute('data-hovered'))\n  }\n\n  return (\n    <div\n      ref={ref}\n      id={id}\n      role=\"radiogroup\"\n      aria-label={ariaLabel}\n      aria-labelledby={labelId}\n      aria-invalid={isInvalid}\n      aria-required={required}\n      aria-describedby={description}\n      className=\"relative inline-flex\"\n      data-spark-component=\"rating\"\n      {...rest}\n      onMouseLeave={resetDataPartStarAttr}\n    >\n      {groupName !== undefined && (\n        <input type=\"hidden\" name={groupName} value={ratingValue} aria-hidden data-part=\"input\" />\n      )}\n      <div className={cx('gap-x-md', 'flex')}>\n        {Array.from({ length: 5 }).map((_, index) => (\n          <RatingStar\n            ref={handleStarRef(index)}\n            key={index}\n            disabled={resolvedDisabled}\n            readOnly={resolvedReadOnly}\n            size=\"lg\"\n            value={getStarValue({ index, value: displayValue })}\n            checked={ratingValue === index + 1}\n            ariaLabel={\n              hasExplicitStarLabel\n                ? (getStarLabel?.(index) ?? `${ariaLabel} ${index + 1}`)\n                : undefined\n            }\n            ariaLabelledBy={\n              !hasExplicitStarLabel && labelId\n                ? `${labelId} ${ratingId}-star-${index + 1}`\n                : undefined\n            }\n            tabIndex={isInteractive ? getStarTabIndex(index, ratingValue) : -1}\n            onClick={() => onStarClick(index)}\n            onKeyDown={onStarKeyDown(index)}\n            onMouseEnter={event => isInteractive && onStarMouseEnter(event)}\n          >\n            {!hasExplicitStarLabel && (\n              <span id={`${ratingId}-star-${index + 1}`} className=\"sr-only\">\n                {index + 1}\n              </span>\n            )}\n          </RatingStar>\n        ))}\n      </div>\n    </div>\n  )\n}\n"],"names":["emptyRemainingStarsOnHoverClass","cx","ratingStarStyles","cva","ratingStarIconStyles","RatingStar","value","size","disabled","readOnly","checked","ariaLabel","ariaLabelledBy","tabIndex","onClick","onKeyDown","onMouseEnter","children","forwardedRef","isInteractive","justClicked","setJustClicked","useState","handleClick","event","clearJustClicked","jsxs","jsx","Icon","StarFill","StarOutline","getStarValue","index","starPosition","splitAt","arr","prev","next","getRatingInteger","createStarKeyDownHandler","starRefList","setRatingValue","nextIndex","prevIndex","getStarTabIndex","ratingValue","Rating","defaultValue","propValue","onValueChange","requiredProp","name","id","getStarLabel","ref","rest","labelId","isInvalid","isRequired","description","formFieldName","formFieldDisabled","formFieldReadOnly","useFormFieldControl","useRef","ratingId","useId","hoveredStarIndex","setHoveredStarIndex","useCombinedState","resolvedDisabled","resolvedReadOnly","required","groupName","hasExplicitStarLabel","displayValue","onStarClick","newValue","onStarKeyDown","useCallback","onStarMouseEnter","currentTarget","currentStarIndex","star","previousStars","followingStars","handleStarRef","elm","resetDataPartStarAttr","_"],"mappings":"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"}