@spark-ui/components 17.4.1 → 17.5.0

package/dist/accordion/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/accordion/useRenderSlot.tsx","../../src/accordion/Accordion.tsx","../../src/accordion/AccordionItem.tsx","../../src/accordion/AccordionItemContent.tsx","../../src/accordion/AccordionItemHeader.tsx","../../src/accordion/AccordionItemTrigger.tsx","../../src/accordion/index.ts"],"sourcesContent":["import { Slot } from '../slot'\n\nexport function useRenderSlot(asChild: boolean, defaultTag: string) {\n  const Component = asChild ? Slot : defaultTag\n\n  return asChild ? ({ ...props }) => <Component {...props} /> : undefined\n}\n","import { Accordion as BaseAccordion } from '@base-ui/react/accordion'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, createContext, Ref, useContext } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\ntype ExtentedZagInterface = Omit<ComponentProps<typeof BaseAccordion.Root>, 'multiple' | 'render'>\n\nexport interface AccordionProps extends ExtentedZagInterface {\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   * Whether the accordion items are disabled\n   */\n  disabled?: boolean\n  /**\n   * Whether multiple items can be open at the same time.\n   */\n  multiple?: boolean\n  design?: 'filled' | 'outlined'\n  ref?: Ref<HTMLDivElement>\n}\n\nconst AccordionContext = createContext<{\n  design: 'filled' | 'outlined'\n} | null>(null)\n\nexport const Accordion = ({\n  asChild = false,\n  children,\n  design = 'outlined',\n  hiddenUntilFound = true,\n  multiple = false,\n  className,\n  ref,\n  ...props\n}: AccordionProps) => {\n  const renderSlot = useRenderSlot(asChild, 'div')\n\n  return (\n    <AccordionContext.Provider value={{ design }}>\n      <BaseAccordion.Root\n        data-spark-component=\"accordion\"\n        ref={ref}\n        multiple={multiple}\n        hiddenUntilFound={hiddenUntilFound}\n        className={cx('bg-surface h-fit rounded-lg', className)}\n        render={renderSlot}\n        {...props}\n      >\n        {children}\n      </BaseAccordion.Root>\n    </AccordionContext.Provider>\n  )\n}\n\nAccordion.displayName = 'Accordion'\n\nexport const useAccordionContext = () => {\n  const context = useContext(AccordionContext)\n\n  if (!context) {\n    throw Error('useAccordionContext must be used within a Accordion provider')\n  }\n\n  return context\n}\n","import { Accordion as BaseAccordion } from '@base-ui/react/accordion'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { useAccordionContext } from './Accordion'\nimport { useRenderSlot } from './useRenderSlot'\n\ntype ExtentedZagInterface = Omit<ComponentProps<typeof BaseAccordion.Item>, 'render'>\n\nexport interface AccordionItemProps extends ExtentedZagInterface {\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Item = ({\n  asChild = false,\n  className,\n  children,\n  ref,\n  ...props\n}: AccordionItemProps) => {\n  const accordion = useAccordionContext()\n\n  const renderSlot = useRenderSlot(asChild, 'div')\n\n  return (\n    <BaseAccordion.Item\n      ref={ref}\n      data-spark-component=\"accordion-item\"\n      render={renderSlot}\n      className={cx(\n        'relative first:rounded-t-lg last:rounded-b-lg',\n        'not-last:border-b-0',\n        { 'border-sm border-outline': accordion.design === 'outlined' },\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </BaseAccordion.Item>\n  )\n}\n\nItem.displayName = 'Accordion.Item'\n","import { Accordion as BaseAccordion } from '@base-ui/react/accordion'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\ntype ExtentedZagInterface = Omit<ComponentProps<typeof BaseAccordion.Panel>, 'render'>\n\nexport interface AccordionItemContentProps extends ExtentedZagInterface {\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const ItemContent = ({\n  asChild = false,\n  className,\n  children,\n  ref,\n  ...props\n}: AccordionItemContentProps) => {\n  const renderSlot = useRenderSlot(asChild, 'div')\n\n  return (\n    <BaseAccordion.Panel\n      ref={ref}\n      data-spark-component=\"accordion-item-content\"\n      className={cx(\n        '[&>:first-child]:p-lg overflow-hidden',\n        'h-[var(--accordion-panel-height)] transition-all duration-200 data-[ending-style]:h-0 data-[starting-style]:h-0',\n        'text-body-1 text-on-surface',\n        className\n      )}\n      render={renderSlot}\n      {...props}\n    >\n      {children}\n    </BaseAccordion.Panel>\n  )\n}\n\nItemContent.displayName = 'Accordion.ItemContent'\n","import { cx } from 'class-variance-authority'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { Slot } from '../slot'\n\nexport interface AccordionItemHeaderProps extends ComponentProps<'h3'> {\n  asChild?: boolean\n  ref?: Ref<HTMLHeadingElement>\n}\n\nexport const ItemHeader = ({\n  asChild = false,\n  children,\n  className,\n  ref,\n}: AccordionItemHeaderProps) => {\n  const Component = asChild ? Slot : 'h3'\n\n  return (\n    <Component\n      ref={ref}\n      data-spark-component=\"accordion-item-header\"\n      className={cx('rounded-[inherit]', className)}\n    >\n      {children}\n    </Component>\n  )\n}\n\nItemHeader.displayName = 'Accordion.ItemHeader'\n","import { Accordion as BaseAccordion } from '@base-ui/react/accordion'\nimport { ArrowHorizontalDown } from '@spark-ui/icons/ArrowHorizontalDown'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { useRenderSlot } from './useRenderSlot'\n\ntype ExtentedZagInterface = Omit<ComponentProps<typeof BaseAccordion.Trigger>, 'render'>\n\nexport interface AccordionItemTriggerProps extends ExtentedZagInterface {\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const ItemTrigger = ({\n  asChild = false,\n  children,\n  className,\n  ref,\n  ...props\n}: AccordionItemTriggerProps) => {\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return (\n    <BaseAccordion.Trigger\n      ref={ref}\n      data-spark-component=\"accordion-item-trigger\"\n      render={renderSlot}\n      className={cx(\n        'group',\n        'gap-lg min-h-sz-48 relative flex items-center justify-between',\n        'px-lg py-md text-headline-2 text-on-surface data-[panel-open]:rounded-b-0 w-full rounded-[inherit] text-left',\n        'hover:enabled:bg-surface-hovered focus:bg-surface-hovered',\n        'focus-visible:u-outline focus-visible:z-raised focus-visible:outline-hidden',\n        'disabled:opacity-dim-3 cursor-pointer disabled:cursor-not-allowed',\n        className\n      )}\n      {...props}\n    >\n      <div className=\"gap-lg flex grow items-center\">{children}</div>\n      <Icon\n        intent=\"neutral\"\n        className={cx(\n          'shrink-0 rotate-0 duration-100 ease-in motion-reduce:transition-none',\n          'group-data-[panel-open]:rotate-180'\n        )}\n        size=\"sm\"\n      >\n        <ArrowHorizontalDown />\n      </Icon>\n    </BaseAccordion.Trigger>\n  )\n}\n\nItemTrigger.displayName = 'Accordion.ItemTrigger'\n","import { Accordion as Root } from './Accordion'\nimport { Item } from './AccordionItem'\nimport { ItemContent } from './AccordionItemContent'\nimport { ItemHeader } from './AccordionItemHeader'\nimport { ItemTrigger } from './AccordionItemTrigger'\n\nexport const Accordion: typeof Root & {\n  Item: typeof Item\n  ItemHeader: typeof ItemHeader\n  ItemTrigger: typeof ItemTrigger\n  ItemContent: typeof ItemContent\n} = Object.assign(Root, {\n  Item,\n  ItemHeader,\n  ItemTrigger,\n  ItemContent,\n})\n\nAccordion.displayName = 'Accordion'\nItem.displayName = 'Item'\nItemHeader.displayName = 'ItemHeader'\nItemTrigger.displayName = 'Accordion.Trigger'\nItemContent.displayName = 'Accordion.Content'\n\nexport { type AccordionProps } from './Accordion'\nexport { type AccordionItemHeaderProps } from './AccordionItemHeader'\nexport { type AccordionItemContentProps } from './AccordionItemContent'\nexport { type AccordionItemTriggerProps } from './AccordionItemTrigger'\n"],"mappings":"2VAEA,SAAgB,EAAc,EAAkB,EAAoB,CAClE,IAAM,EAAY,EAAU,EAAA,KAAO,EAEnC,OAAO,GAAW,CAAE,GAAG,MAAY,EAAA,EAAA,KAAC,EAAD,CAAW,GAAI,EAAS,CAAA,CAAG,IAAA,GCoBhE,IAAM,GAAA,EAAA,EAAA,eAEI,KAAK,CAEF,GAAa,CACxB,UAAU,GACV,WACA,SAAS,WACT,mBAAmB,GACnB,WAAW,GACX,YACA,MACA,GAAG,KACiB,CACpB,IAAM,EAAa,EAAc,EAAS,MAAM,CAEhD,OACE,EAAA,EAAA,KAAC,EAAiB,SAAlB,CAA2B,MAAO,CAAE,SAAQ,WAC1C,EAAA,EAAA,KAAC,EAAA,UAAc,KAAf,CACE,uBAAqB,YAChB,MACK,WACQ,mBAClB,WAAA,EAAA,EAAA,IAAc,8BAA+B,EAAU,CACvD,OAAQ,EACR,GAAI,EAEH,WACkB,CAAA,CACK,CAAA,EAIhC,EAAU,YAAc,YAExB,IAAa,MAA4B,CACvC,IAAM,GAAA,EAAA,EAAA,YAAqB,EAAiB,CAE5C,GAAI,CAAC,EACH,MAAM,MAAM,+DAA+D,CAG7E,OAAO,GCrDI,GAAQ,CACnB,UAAU,GACV,YACA,WACA,MACA,GAAG,KACqB,CACxB,IAAM,EAAY,GAAqB,CAEjC,EAAa,EAAc,EAAS,MAAM,CAEhD,OACE,EAAA,EAAA,KAAC,EAAA,UAAc,KAAf,CACO,MACL,uBAAqB,iBACrB,OAAQ,EACR,WAAA,EAAA,EAAA,IACE,gDACA,sBACA,CAAE,2BAA4B,EAAU,SAAW,WAAY,CAC/D,EACD,CACD,GAAI,EAEH,WACkB,CAAA,EAIzB,EAAK,YAAc,iBC9BnB,IAAa,GAAe,CAC1B,UAAU,GACV,YACA,WACA,MACA,GAAG,KAC4B,CAC/B,IAAM,EAAa,EAAc,EAAS,MAAM,CAEhD,OACE,EAAA,EAAA,KAAC,EAAA,UAAc,MAAf,CACO,MACL,uBAAqB,yBACrB,WAAA,EAAA,EAAA,IACE,wCACA,kHACA,8BACA,EACD,CACD,OAAQ,EACR,GAAI,EAEH,WACmB,CAAA,EAI1B,EAAY,YAAc,wBC9B1B,IAAa,GAAc,CACzB,UAAU,GACV,WACA,YACA,UAKE,EAAA,EAAA,KAHgB,EAAU,EAAA,KAAO,KAGjC,CACO,MACL,uBAAqB,wBACrB,WAAA,EAAA,EAAA,IAAc,oBAAqB,EAAU,CAE5C,WACS,CAAA,CAIhB,EAAW,YAAc,uBCdzB,IAAa,GAAe,CAC1B,UAAU,GACV,WACA,YACA,MACA,GAAG,KAC4B,CAC/B,IAAM,EAAa,EAAc,EAAS,SAAS,CAEnD,OACE,EAAA,EAAA,MAAC,EAAA,UAAc,QAAf,CACO,MACL,uBAAqB,yBACrB,OAAQ,EACR,WAAA,EAAA,EAAA,IACE,QACA,gEACA,+GACA,4DACA,8EACA,oEACA,EACD,CACD,GAAI,WAbN,EAeE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,gCAAiC,WAAe,CAAA,EAC/D,EAAA,EAAA,KAAC,EAAA,EAAD,CACE,OAAO,UACP,WAAA,EAAA,EAAA,IACE,uEACA,qCACD,CACD,KAAK,eAEL,EAAA,EAAA,KAAC,EAAA,oBAAD,EAAuB,CAAA,CAClB,CAAA,CACe,IAI5B,EAAY,YAAc,wBCjD1B,IAAa,EAKT,OAAO,OAAO,EAAM,CACtB,OACA,aACA,cACA,cACD,CAAC,CAEF,EAAU,YAAc,YACxB,EAAK,YAAc,OACnB,EAAW,YAAc,aACzB,EAAY,YAAc,oBAC1B,EAAY,YAAc"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/accordion/useRenderSlot.tsx","../../src/accordion/Accordion.tsx","../../src/accordion/AccordionItem.tsx","../../src/accordion/AccordionItemContent.tsx","../../src/accordion/AccordionItemHeader.tsx","../../src/accordion/AccordionItemTrigger.tsx","../../src/accordion/index.ts"],"sourcesContent":["import { Slot } from '../slot'\n\nexport function useRenderSlot(asChild: boolean, defaultTag: string) {\n  const Component = asChild ? Slot : defaultTag\n\n  return asChild ? ({ ...props }) => <Component {...props} /> : undefined\n}\n","import { Accordion as BaseAccordion } from '@base-ui/react/accordion'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, createContext, Ref, useContext } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\ntype ExtentedZagInterface = Omit<ComponentProps<typeof BaseAccordion.Root>, 'multiple' | 'render'>\n\nexport interface AccordionProps extends ExtentedZagInterface {\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   * Whether the accordion items are disabled\n   */\n  disabled?: boolean\n  /**\n   * Whether multiple items can be open at the same time.\n   */\n  multiple?: boolean\n  design?: 'filled' | 'outlined'\n  ref?: Ref<HTMLDivElement>\n}\n\nconst AccordionContext = createContext<{\n  design: 'filled' | 'outlined'\n} | null>(null)\n\nexport const Accordion = ({\n  asChild = false,\n  children,\n  design = 'outlined',\n  hiddenUntilFound = true,\n  multiple = false,\n  className,\n  ref,\n  ...props\n}: AccordionProps) => {\n  const renderSlot = useRenderSlot(asChild, 'div')\n\n  return (\n    <AccordionContext.Provider value={{ design }}>\n      <BaseAccordion.Root\n        data-spark-component=\"accordion\"\n        ref={ref}\n        multiple={multiple}\n        hiddenUntilFound={hiddenUntilFound}\n        className={cx('bg-surface h-fit rounded-lg', className)}\n        render={renderSlot}\n        {...props}\n      >\n        {children}\n      </BaseAccordion.Root>\n    </AccordionContext.Provider>\n  )\n}\n\nAccordion.displayName = 'Accordion'\n\nexport const useAccordionContext = () => {\n  const context = useContext(AccordionContext)\n\n  if (!context) {\n    throw Error('useAccordionContext must be used within a Accordion provider')\n  }\n\n  return context\n}\n","import { Accordion as BaseAccordion } from '@base-ui/react/accordion'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { useAccordionContext } from './Accordion'\nimport { useRenderSlot } from './useRenderSlot'\n\ntype ExtentedZagInterface = Omit<ComponentProps<typeof BaseAccordion.Item>, 'render'>\n\nexport interface AccordionItemProps extends ExtentedZagInterface {\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Item = ({\n  asChild = false,\n  className,\n  children,\n  ref,\n  ...props\n}: AccordionItemProps) => {\n  const accordion = useAccordionContext()\n\n  const renderSlot = useRenderSlot(asChild, 'div')\n\n  return (\n    <BaseAccordion.Item\n      ref={ref}\n      data-spark-component=\"accordion-item\"\n      render={renderSlot}\n      className={cx(\n        'relative first:rounded-t-lg last:rounded-b-lg',\n        'not-last:border-b-0',\n        { 'border-sm border-outline': accordion.design === 'outlined' },\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </BaseAccordion.Item>\n  )\n}\n\nItem.displayName = 'Accordion.Item'\n","import { Accordion as BaseAccordion } from '@base-ui/react/accordion'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\ntype ExtentedZagInterface = Omit<ComponentProps<typeof BaseAccordion.Panel>, 'render'>\n\nexport interface AccordionItemContentProps extends ExtentedZagInterface {\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const ItemContent = ({\n  asChild = false,\n  className,\n  children,\n  ref,\n  ...props\n}: AccordionItemContentProps) => {\n  const renderSlot = useRenderSlot(asChild, 'div')\n\n  return (\n    <BaseAccordion.Panel\n      ref={ref}\n      data-spark-component=\"accordion-item-content\"\n      className={cx(\n        '[&>:first-child]:p-lg overflow-hidden',\n        'h-[var(--accordion-panel-height)] transition-all duration-200 data-[ending-style]:h-0 data-[starting-style]:h-0',\n        'text-body-1 text-on-surface',\n        className\n      )}\n      render={renderSlot}\n      {...props}\n    >\n      {children}\n    </BaseAccordion.Panel>\n  )\n}\n\nItemContent.displayName = 'Accordion.ItemContent'\n","import { cx } from 'class-variance-authority'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { Slot } from '../slot'\n\nexport interface AccordionItemHeaderProps extends ComponentProps<'h3'> {\n  asChild?: boolean\n  ref?: Ref<HTMLHeadingElement>\n}\n\nexport const ItemHeader = ({\n  asChild = false,\n  children,\n  className,\n  ref,\n}: AccordionItemHeaderProps) => {\n  const Component = asChild ? Slot : 'h3'\n\n  return (\n    <Component\n      ref={ref}\n      data-spark-component=\"accordion-item-header\"\n      className={cx('rounded-[inherit]', className)}\n    >\n      {children}\n    </Component>\n  )\n}\n\nItemHeader.displayName = 'Accordion.ItemHeader'\n","import { Accordion as BaseAccordion } from '@base-ui/react/accordion'\nimport { ArrowHorizontalDown } from '@spark-ui/icons/ArrowHorizontalDown'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { useRenderSlot } from './useRenderSlot'\n\ntype ExtentedZagInterface = Omit<ComponentProps<typeof BaseAccordion.Trigger>, 'render'>\n\nexport interface AccordionItemTriggerProps extends ExtentedZagInterface {\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const ItemTrigger = ({\n  asChild = false,\n  children,\n  className,\n  ref,\n  ...props\n}: AccordionItemTriggerProps) => {\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return (\n    <BaseAccordion.Trigger\n      ref={ref}\n      data-spark-component=\"accordion-item-trigger\"\n      render={renderSlot}\n      className={cx(\n        'group',\n        'gap-lg min-h-sz-48 relative flex items-center justify-between',\n        'px-lg py-md text-headline-2 text-on-surface data-[panel-open]:rounded-b-0 w-full rounded-[inherit] text-left',\n        'hover:enabled:bg-surface-hovered focus:bg-surface-hovered',\n        'focus-visible:u-outline focus-visible:z-raised focus-visible:outline-hidden',\n        'disabled:opacity-dim-3 cursor-pointer disabled:cursor-not-allowed',\n        className\n      )}\n      {...props}\n    >\n      <div className=\"gap-lg flex grow items-center\">{children}</div>\n      <Icon\n        intent=\"neutral\"\n        className={cx(\n          'shrink-0 rotate-0 duration-100 ease-in motion-reduce:transition-none',\n          'group-data-[panel-open]:rotate-180'\n        )}\n        size=\"sm\"\n      >\n        <ArrowHorizontalDown />\n      </Icon>\n    </BaseAccordion.Trigger>\n  )\n}\n\nItemTrigger.displayName = 'Accordion.ItemTrigger'\n","import { Accordion as Root } from './Accordion'\nimport { Item } from './AccordionItem'\nimport { ItemContent } from './AccordionItemContent'\nimport { ItemHeader } from './AccordionItemHeader'\nimport { ItemTrigger } from './AccordionItemTrigger'\n\n/**\n * A vertically stacked set of expandable sections that allow users to show and hide content.\n */\nexport const Accordion: typeof Root & {\n  Item: typeof Item\n  ItemHeader: typeof ItemHeader\n  ItemTrigger: typeof ItemTrigger\n  ItemContent: typeof ItemContent\n} = Object.assign(Root, {\n  Item,\n  ItemHeader,\n  ItemTrigger,\n  ItemContent,\n})\n\nAccordion.displayName = 'Accordion'\nItem.displayName = 'Item'\nItemHeader.displayName = 'ItemHeader'\nItemTrigger.displayName = 'Accordion.Trigger'\nItemContent.displayName = 'Accordion.Content'\n\nexport { type AccordionProps } from './Accordion'\nexport { type AccordionItemHeaderProps } from './AccordionItemHeader'\nexport { type AccordionItemContentProps } from './AccordionItemContent'\nexport { type AccordionItemTriggerProps } from './AccordionItemTrigger'\n"],"mappings":"2VAEA,SAAgB,EAAc,EAAkB,EAAoB,CAClE,IAAM,EAAY,EAAU,EAAA,KAAO,EAEnC,OAAO,GAAW,CAAE,GAAG,MAAY,EAAA,EAAA,KAAC,EAAD,CAAW,GAAI,EAAS,CAAA,CAAG,IAAA,GCoBhE,IAAM,GAAA,EAAA,EAAA,eAEI,KAAK,CAEF,GAAa,CACxB,UAAU,GACV,WACA,SAAS,WACT,mBAAmB,GACnB,WAAW,GACX,YACA,MACA,GAAG,KACiB,CACpB,IAAM,EAAa,EAAc,EAAS,MAAM,CAEhD,OACE,EAAA,EAAA,KAAC,EAAiB,SAAlB,CAA2B,MAAO,CAAE,SAAQ,WAC1C,EAAA,EAAA,KAAC,EAAA,UAAc,KAAf,CACE,uBAAqB,YAChB,MACK,WACQ,mBAClB,WAAA,EAAA,EAAA,IAAc,8BAA+B,EAAU,CACvD,OAAQ,EACR,GAAI,EAEH,WACkB,CAAA,CACK,CAAA,EAIhC,EAAU,YAAc,YAExB,IAAa,MAA4B,CACvC,IAAM,GAAA,EAAA,EAAA,YAAqB,EAAiB,CAE5C,GAAI,CAAC,EACH,MAAM,MAAM,+DAA+D,CAG7E,OAAO,GCrDI,GAAQ,CACnB,UAAU,GACV,YACA,WACA,MACA,GAAG,KACqB,CACxB,IAAM,EAAY,GAAqB,CAEjC,EAAa,EAAc,EAAS,MAAM,CAEhD,OACE,EAAA,EAAA,KAAC,EAAA,UAAc,KAAf,CACO,MACL,uBAAqB,iBACrB,OAAQ,EACR,WAAA,EAAA,EAAA,IACE,gDACA,sBACA,CAAE,2BAA4B,EAAU,SAAW,WAAY,CAC/D,EACD,CACD,GAAI,EAEH,WACkB,CAAA,EAIzB,EAAK,YAAc,iBC9BnB,IAAa,GAAe,CAC1B,UAAU,GACV,YACA,WACA,MACA,GAAG,KAC4B,CAC/B,IAAM,EAAa,EAAc,EAAS,MAAM,CAEhD,OACE,EAAA,EAAA,KAAC,EAAA,UAAc,MAAf,CACO,MACL,uBAAqB,yBACrB,WAAA,EAAA,EAAA,IACE,wCACA,kHACA,8BACA,EACD,CACD,OAAQ,EACR,GAAI,EAEH,WACmB,CAAA,EAI1B,EAAY,YAAc,wBC9B1B,IAAa,GAAc,CACzB,UAAU,GACV,WACA,YACA,UAKE,EAAA,EAAA,KAHgB,EAAU,EAAA,KAAO,KAGjC,CACO,MACL,uBAAqB,wBACrB,WAAA,EAAA,EAAA,IAAc,oBAAqB,EAAU,CAE5C,WACS,CAAA,CAIhB,EAAW,YAAc,uBCdzB,IAAa,GAAe,CAC1B,UAAU,GACV,WACA,YACA,MACA,GAAG,KAC4B,CAC/B,IAAM,EAAa,EAAc,EAAS,SAAS,CAEnD,OACE,EAAA,EAAA,MAAC,EAAA,UAAc,QAAf,CACO,MACL,uBAAqB,yBACrB,OAAQ,EACR,WAAA,EAAA,EAAA,IACE,QACA,gEACA,+GACA,4DACA,8EACA,oEACA,EACD,CACD,GAAI,WAbN,EAeE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,gCAAiC,WAAe,CAAA,EAC/D,EAAA,EAAA,KAAC,EAAA,EAAD,CACE,OAAO,UACP,WAAA,EAAA,EAAA,IACE,uEACA,qCACD,CACD,KAAK,eAEL,EAAA,EAAA,KAAC,EAAA,oBAAD,EAAuB,CAAA,CAClB,CAAA,CACe,IAI5B,EAAY,YAAc,wBC9C1B,IAAa,EAKT,OAAO,OAAO,EAAM,CACtB,OACA,aACA,cACA,cACD,CAAC,CAEF,EAAU,YAAc,YACxB,EAAK,YAAc,OACnB,EAAW,YAAc,aACzB,EAAY,YAAc,oBAC1B,EAAY,YAAc"}

package/dist/accordion/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/accordion/useRenderSlot.tsx","../../src/accordion/Accordion.tsx","../../src/accordion/AccordionItem.tsx","../../src/accordion/AccordionItemContent.tsx","../../src/accordion/AccordionItemHeader.tsx","../../src/accordion/AccordionItemTrigger.tsx","../../src/accordion/index.ts"],"sourcesContent":["import { Slot } from '../slot'\n\nexport function useRenderSlot(asChild: boolean, defaultTag: string) {\n  const Component = asChild ? Slot : defaultTag\n\n  return asChild ? ({ ...props }) => <Component {...props} /> : undefined\n}\n","import { Accordion as BaseAccordion } from '@base-ui/react/accordion'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, createContext, Ref, useContext } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\ntype ExtentedZagInterface = Omit<ComponentProps<typeof BaseAccordion.Root>, 'multiple' | 'render'>\n\nexport interface AccordionProps extends ExtentedZagInterface {\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   * Whether the accordion items are disabled\n   */\n  disabled?: boolean\n  /**\n   * Whether multiple items can be open at the same time.\n   */\n  multiple?: boolean\n  design?: 'filled' | 'outlined'\n  ref?: Ref<HTMLDivElement>\n}\n\nconst AccordionContext = createContext<{\n  design: 'filled' | 'outlined'\n} | null>(null)\n\nexport const Accordion = ({\n  asChild = false,\n  children,\n  design = 'outlined',\n  hiddenUntilFound = true,\n  multiple = false,\n  className,\n  ref,\n  ...props\n}: AccordionProps) => {\n  const renderSlot = useRenderSlot(asChild, 'div')\n\n  return (\n    <AccordionContext.Provider value={{ design }}>\n      <BaseAccordion.Root\n        data-spark-component=\"accordion\"\n        ref={ref}\n        multiple={multiple}\n        hiddenUntilFound={hiddenUntilFound}\n        className={cx('bg-surface h-fit rounded-lg', className)}\n        render={renderSlot}\n        {...props}\n      >\n        {children}\n      </BaseAccordion.Root>\n    </AccordionContext.Provider>\n  )\n}\n\nAccordion.displayName = 'Accordion'\n\nexport const useAccordionContext = () => {\n  const context = useContext(AccordionContext)\n\n  if (!context) {\n    throw Error('useAccordionContext must be used within a Accordion provider')\n  }\n\n  return context\n}\n","import { Accordion as BaseAccordion } from '@base-ui/react/accordion'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { useAccordionContext } from './Accordion'\nimport { useRenderSlot } from './useRenderSlot'\n\ntype ExtentedZagInterface = Omit<ComponentProps<typeof BaseAccordion.Item>, 'render'>\n\nexport interface AccordionItemProps extends ExtentedZagInterface {\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Item = ({\n  asChild = false,\n  className,\n  children,\n  ref,\n  ...props\n}: AccordionItemProps) => {\n  const accordion = useAccordionContext()\n\n  const renderSlot = useRenderSlot(asChild, 'div')\n\n  return (\n    <BaseAccordion.Item\n      ref={ref}\n      data-spark-component=\"accordion-item\"\n      render={renderSlot}\n      className={cx(\n        'relative first:rounded-t-lg last:rounded-b-lg',\n        'not-last:border-b-0',\n        { 'border-sm border-outline': accordion.design === 'outlined' },\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </BaseAccordion.Item>\n  )\n}\n\nItem.displayName = 'Accordion.Item'\n","import { Accordion as BaseAccordion } from '@base-ui/react/accordion'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\ntype ExtentedZagInterface = Omit<ComponentProps<typeof BaseAccordion.Panel>, 'render'>\n\nexport interface AccordionItemContentProps extends ExtentedZagInterface {\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const ItemContent = ({\n  asChild = false,\n  className,\n  children,\n  ref,\n  ...props\n}: AccordionItemContentProps) => {\n  const renderSlot = useRenderSlot(asChild, 'div')\n\n  return (\n    <BaseAccordion.Panel\n      ref={ref}\n      data-spark-component=\"accordion-item-content\"\n      className={cx(\n        '[&>:first-child]:p-lg overflow-hidden',\n        'h-[var(--accordion-panel-height)] transition-all duration-200 data-[ending-style]:h-0 data-[starting-style]:h-0',\n        'text-body-1 text-on-surface',\n        className\n      )}\n      render={renderSlot}\n      {...props}\n    >\n      {children}\n    </BaseAccordion.Panel>\n  )\n}\n\nItemContent.displayName = 'Accordion.ItemContent'\n","import { cx } from 'class-variance-authority'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { Slot } from '../slot'\n\nexport interface AccordionItemHeaderProps extends ComponentProps<'h3'> {\n  asChild?: boolean\n  ref?: Ref<HTMLHeadingElement>\n}\n\nexport const ItemHeader = ({\n  asChild = false,\n  children,\n  className,\n  ref,\n}: AccordionItemHeaderProps) => {\n  const Component = asChild ? Slot : 'h3'\n\n  return (\n    <Component\n      ref={ref}\n      data-spark-component=\"accordion-item-header\"\n      className={cx('rounded-[inherit]', className)}\n    >\n      {children}\n    </Component>\n  )\n}\n\nItemHeader.displayName = 'Accordion.ItemHeader'\n","import { Accordion as BaseAccordion } from '@base-ui/react/accordion'\nimport { ArrowHorizontalDown } from '@spark-ui/icons/ArrowHorizontalDown'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { useRenderSlot } from './useRenderSlot'\n\ntype ExtentedZagInterface = Omit<ComponentProps<typeof BaseAccordion.Trigger>, 'render'>\n\nexport interface AccordionItemTriggerProps extends ExtentedZagInterface {\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const ItemTrigger = ({\n  asChild = false,\n  children,\n  className,\n  ref,\n  ...props\n}: AccordionItemTriggerProps) => {\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return (\n    <BaseAccordion.Trigger\n      ref={ref}\n      data-spark-component=\"accordion-item-trigger\"\n      render={renderSlot}\n      className={cx(\n        'group',\n        'gap-lg min-h-sz-48 relative flex items-center justify-between',\n        'px-lg py-md text-headline-2 text-on-surface data-[panel-open]:rounded-b-0 w-full rounded-[inherit] text-left',\n        'hover:enabled:bg-surface-hovered focus:bg-surface-hovered',\n        'focus-visible:u-outline focus-visible:z-raised focus-visible:outline-hidden',\n        'disabled:opacity-dim-3 cursor-pointer disabled:cursor-not-allowed',\n        className\n      )}\n      {...props}\n    >\n      <div className=\"gap-lg flex grow items-center\">{children}</div>\n      <Icon\n        intent=\"neutral\"\n        className={cx(\n          'shrink-0 rotate-0 duration-100 ease-in motion-reduce:transition-none',\n          'group-data-[panel-open]:rotate-180'\n        )}\n        size=\"sm\"\n      >\n        <ArrowHorizontalDown />\n      </Icon>\n    </BaseAccordion.Trigger>\n  )\n}\n\nItemTrigger.displayName = 'Accordion.ItemTrigger'\n","import { Accordion as Root } from './Accordion'\nimport { Item } from './AccordionItem'\nimport { ItemContent } from './AccordionItemContent'\nimport { ItemHeader } from './AccordionItemHeader'\nimport { ItemTrigger } from './AccordionItemTrigger'\n\nexport const Accordion: typeof Root & {\n  Item: typeof Item\n  ItemHeader: typeof ItemHeader\n  ItemTrigger: typeof ItemTrigger\n  ItemContent: typeof ItemContent\n} = Object.assign(Root, {\n  Item,\n  ItemHeader,\n  ItemTrigger,\n  ItemContent,\n})\n\nAccordion.displayName = 'Accordion'\nItem.displayName = 'Item'\nItemHeader.displayName = 'ItemHeader'\nItemTrigger.displayName = 'Accordion.Trigger'\nItemContent.displayName = 'Accordion.Content'\n\nexport { type AccordionProps } from './Accordion'\nexport { type AccordionItemHeaderProps } from './AccordionItemHeader'\nexport { type AccordionItemContentProps } from './AccordionItemContent'\nexport { type AccordionItemTriggerProps } from './AccordionItemTrigger'\n"],"mappings":";;;;;;;;AAEA,SAAgB,EAAc,GAAkB,GAAoB;CAClE,IAAM,IAAY,IAAU,IAAO;AAEnC,QAAO,KAAW,EAAE,GAAG,QAAY,kBAAC,GAAD,EAAW,GAAI,GAAS,CAAA,GAAG,KAAA;;;;ACoBhE,IAAM,IAAmB,EAEf,KAAK,EAEF,KAAa,EACxB,aAAU,IACV,aACA,YAAS,YACT,sBAAmB,IACnB,cAAW,IACX,cACA,QACA,GAAG,QACiB;CACpB,IAAM,IAAa,EAAc,GAAS,MAAM;AAEhD,QACE,kBAAC,EAAiB,UAAlB;EAA2B,OAAO,EAAE,WAAQ;YAC1C,kBAAC,EAAc,MAAf;GACE,wBAAqB;GAChB;GACK;GACQ;GAClB,WAAW,EAAG,+BAA+B,EAAU;GACvD,QAAQ;GACR,GAAI;GAEH;GACkB,CAAA;EACK,CAAA;;AAIhC,EAAU,cAAc;AAExB,IAAa,UAA4B;CACvC,IAAM,IAAU,EAAW,EAAiB;AAE5C,KAAI,CAAC,EACH,OAAM,MAAM,+DAA+D;AAG7E,QAAO;GCrDI,KAAQ,EACnB,aAAU,IACV,cACA,aACA,QACA,GAAG,QACqB;CACxB,IAAM,IAAY,GAAqB,EAEjC,IAAa,EAAc,GAAS,MAAM;AAEhD,QACE,kBAAC,EAAc,MAAf;EACO;EACL,wBAAqB;EACrB,QAAQ;EACR,WAAW,EACT,iDACA,uBACA,EAAE,4BAA4B,EAAU,WAAW,YAAY,EAC/D,EACD;EACD,GAAI;EAEH;EACkB,CAAA;;AAIzB,EAAK,cAAc;;;AC9BnB,IAAa,KAAe,EAC1B,aAAU,IACV,cACA,aACA,QACA,GAAG,QAC4B;CAC/B,IAAM,IAAa,EAAc,GAAS,MAAM;AAEhD,QACE,kBAAC,EAAc,OAAf;EACO;EACL,wBAAqB;EACrB,WAAW,EACT,yCACA,mHACA,+BACA,EACD;EACD,QAAQ;EACR,GAAI;EAEH;EACmB,CAAA;;AAI1B,EAAY,cAAc;;;AC9B1B,IAAa,KAAc,EACzB,aAAU,IACV,aACA,cACA,aAKE,kBAHgB,IAAU,IAAO,MAGjC;CACO;CACL,wBAAqB;CACrB,WAAW,EAAG,qBAAqB,EAAU;CAE5C;CACS,CAAA;AAIhB,EAAW,cAAc;;;ACdzB,IAAa,KAAe,EAC1B,aAAU,IACV,aACA,cACA,QACA,GAAG,QAC4B;CAC/B,IAAM,IAAa,EAAc,GAAS,SAAS;AAEnD,QACE,kBAAC,EAAc,SAAf;EACO;EACL,wBAAqB;EACrB,QAAQ;EACR,WAAW,EACT,SACA,iEACA,gHACA,6DACA,+EACA,qEACA,EACD;EACD,GAAI;YAbN,CAeE,kBAAC,OAAD;GAAK,WAAU;GAAiC;GAAe,CAAA,EAC/D,kBAAC,GAAD;GACE,QAAO;GACP,WAAW,EACT,wEACA,qCACD;GACD,MAAK;aAEL,kBAAC,GAAD,EAAuB,CAAA;GAClB,CAAA,CACe;;;AAI5B,EAAY,cAAc;;;ACjD1B,IAAa,IAKT,OAAO,OAAO,GAAM;CACtB;CACA;CACA;CACA;CACD,CAAC;AAEF,EAAU,cAAc,aACxB,EAAK,cAAc,QACnB,EAAW,cAAc,cACzB,EAAY,cAAc,qBAC1B,EAAY,cAAc"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/accordion/useRenderSlot.tsx","../../src/accordion/Accordion.tsx","../../src/accordion/AccordionItem.tsx","../../src/accordion/AccordionItemContent.tsx","../../src/accordion/AccordionItemHeader.tsx","../../src/accordion/AccordionItemTrigger.tsx","../../src/accordion/index.ts"],"sourcesContent":["import { Slot } from '../slot'\n\nexport function useRenderSlot(asChild: boolean, defaultTag: string) {\n  const Component = asChild ? Slot : defaultTag\n\n  return asChild ? ({ ...props }) => <Component {...props} /> : undefined\n}\n","import { Accordion as BaseAccordion } from '@base-ui/react/accordion'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, createContext, Ref, useContext } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\ntype ExtentedZagInterface = Omit<ComponentProps<typeof BaseAccordion.Root>, 'multiple' | 'render'>\n\nexport interface AccordionProps extends ExtentedZagInterface {\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   * Whether the accordion items are disabled\n   */\n  disabled?: boolean\n  /**\n   * Whether multiple items can be open at the same time.\n   */\n  multiple?: boolean\n  design?: 'filled' | 'outlined'\n  ref?: Ref<HTMLDivElement>\n}\n\nconst AccordionContext = createContext<{\n  design: 'filled' | 'outlined'\n} | null>(null)\n\nexport const Accordion = ({\n  asChild = false,\n  children,\n  design = 'outlined',\n  hiddenUntilFound = true,\n  multiple = false,\n  className,\n  ref,\n  ...props\n}: AccordionProps) => {\n  const renderSlot = useRenderSlot(asChild, 'div')\n\n  return (\n    <AccordionContext.Provider value={{ design }}>\n      <BaseAccordion.Root\n        data-spark-component=\"accordion\"\n        ref={ref}\n        multiple={multiple}\n        hiddenUntilFound={hiddenUntilFound}\n        className={cx('bg-surface h-fit rounded-lg', className)}\n        render={renderSlot}\n        {...props}\n      >\n        {children}\n      </BaseAccordion.Root>\n    </AccordionContext.Provider>\n  )\n}\n\nAccordion.displayName = 'Accordion'\n\nexport const useAccordionContext = () => {\n  const context = useContext(AccordionContext)\n\n  if (!context) {\n    throw Error('useAccordionContext must be used within a Accordion provider')\n  }\n\n  return context\n}\n","import { Accordion as BaseAccordion } from '@base-ui/react/accordion'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { useAccordionContext } from './Accordion'\nimport { useRenderSlot } from './useRenderSlot'\n\ntype ExtentedZagInterface = Omit<ComponentProps<typeof BaseAccordion.Item>, 'render'>\n\nexport interface AccordionItemProps extends ExtentedZagInterface {\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Item = ({\n  asChild = false,\n  className,\n  children,\n  ref,\n  ...props\n}: AccordionItemProps) => {\n  const accordion = useAccordionContext()\n\n  const renderSlot = useRenderSlot(asChild, 'div')\n\n  return (\n    <BaseAccordion.Item\n      ref={ref}\n      data-spark-component=\"accordion-item\"\n      render={renderSlot}\n      className={cx(\n        'relative first:rounded-t-lg last:rounded-b-lg',\n        'not-last:border-b-0',\n        { 'border-sm border-outline': accordion.design === 'outlined' },\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </BaseAccordion.Item>\n  )\n}\n\nItem.displayName = 'Accordion.Item'\n","import { Accordion as BaseAccordion } from '@base-ui/react/accordion'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\ntype ExtentedZagInterface = Omit<ComponentProps<typeof BaseAccordion.Panel>, 'render'>\n\nexport interface AccordionItemContentProps extends ExtentedZagInterface {\n  asChild?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const ItemContent = ({\n  asChild = false,\n  className,\n  children,\n  ref,\n  ...props\n}: AccordionItemContentProps) => {\n  const renderSlot = useRenderSlot(asChild, 'div')\n\n  return (\n    <BaseAccordion.Panel\n      ref={ref}\n      data-spark-component=\"accordion-item-content\"\n      className={cx(\n        '[&>:first-child]:p-lg overflow-hidden',\n        'h-[var(--accordion-panel-height)] transition-all duration-200 data-[ending-style]:h-0 data-[starting-style]:h-0',\n        'text-body-1 text-on-surface',\n        className\n      )}\n      render={renderSlot}\n      {...props}\n    >\n      {children}\n    </BaseAccordion.Panel>\n  )\n}\n\nItemContent.displayName = 'Accordion.ItemContent'\n","import { cx } from 'class-variance-authority'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { Slot } from '../slot'\n\nexport interface AccordionItemHeaderProps extends ComponentProps<'h3'> {\n  asChild?: boolean\n  ref?: Ref<HTMLHeadingElement>\n}\n\nexport const ItemHeader = ({\n  asChild = false,\n  children,\n  className,\n  ref,\n}: AccordionItemHeaderProps) => {\n  const Component = asChild ? Slot : 'h3'\n\n  return (\n    <Component\n      ref={ref}\n      data-spark-component=\"accordion-item-header\"\n      className={cx('rounded-[inherit]', className)}\n    >\n      {children}\n    </Component>\n  )\n}\n\nItemHeader.displayName = 'Accordion.ItemHeader'\n","import { Accordion as BaseAccordion } from '@base-ui/react/accordion'\nimport { ArrowHorizontalDown } from '@spark-ui/icons/ArrowHorizontalDown'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { useRenderSlot } from './useRenderSlot'\n\ntype ExtentedZagInterface = Omit<ComponentProps<typeof BaseAccordion.Trigger>, 'render'>\n\nexport interface AccordionItemTriggerProps extends ExtentedZagInterface {\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const ItemTrigger = ({\n  asChild = false,\n  children,\n  className,\n  ref,\n  ...props\n}: AccordionItemTriggerProps) => {\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return (\n    <BaseAccordion.Trigger\n      ref={ref}\n      data-spark-component=\"accordion-item-trigger\"\n      render={renderSlot}\n      className={cx(\n        'group',\n        'gap-lg min-h-sz-48 relative flex items-center justify-between',\n        'px-lg py-md text-headline-2 text-on-surface data-[panel-open]:rounded-b-0 w-full rounded-[inherit] text-left',\n        'hover:enabled:bg-surface-hovered focus:bg-surface-hovered',\n        'focus-visible:u-outline focus-visible:z-raised focus-visible:outline-hidden',\n        'disabled:opacity-dim-3 cursor-pointer disabled:cursor-not-allowed',\n        className\n      )}\n      {...props}\n    >\n      <div className=\"gap-lg flex grow items-center\">{children}</div>\n      <Icon\n        intent=\"neutral\"\n        className={cx(\n          'shrink-0 rotate-0 duration-100 ease-in motion-reduce:transition-none',\n          'group-data-[panel-open]:rotate-180'\n        )}\n        size=\"sm\"\n      >\n        <ArrowHorizontalDown />\n      </Icon>\n    </BaseAccordion.Trigger>\n  )\n}\n\nItemTrigger.displayName = 'Accordion.ItemTrigger'\n","import { Accordion as Root } from './Accordion'\nimport { Item } from './AccordionItem'\nimport { ItemContent } from './AccordionItemContent'\nimport { ItemHeader } from './AccordionItemHeader'\nimport { ItemTrigger } from './AccordionItemTrigger'\n\n/**\n * A vertically stacked set of expandable sections that allow users to show and hide content.\n */\nexport const Accordion: typeof Root & {\n  Item: typeof Item\n  ItemHeader: typeof ItemHeader\n  ItemTrigger: typeof ItemTrigger\n  ItemContent: typeof ItemContent\n} = Object.assign(Root, {\n  Item,\n  ItemHeader,\n  ItemTrigger,\n  ItemContent,\n})\n\nAccordion.displayName = 'Accordion'\nItem.displayName = 'Item'\nItemHeader.displayName = 'ItemHeader'\nItemTrigger.displayName = 'Accordion.Trigger'\nItemContent.displayName = 'Accordion.Content'\n\nexport { type AccordionProps } from './Accordion'\nexport { type AccordionItemHeaderProps } from './AccordionItemHeader'\nexport { type AccordionItemContentProps } from './AccordionItemContent'\nexport { type AccordionItemTriggerProps } from './AccordionItemTrigger'\n"],"mappings":";;;;;;;;AAEA,SAAgB,EAAc,GAAkB,GAAoB;CAClE,IAAM,IAAY,IAAU,IAAO;AAEnC,QAAO,KAAW,EAAE,GAAG,QAAY,kBAAC,GAAD,EAAW,GAAI,GAAS,CAAA,GAAG,KAAA;;;;ACoBhE,IAAM,IAAmB,EAEf,KAAK,EAEF,KAAa,EACxB,aAAU,IACV,aACA,YAAS,YACT,sBAAmB,IACnB,cAAW,IACX,cACA,QACA,GAAG,QACiB;CACpB,IAAM,IAAa,EAAc,GAAS,MAAM;AAEhD,QACE,kBAAC,EAAiB,UAAlB;EAA2B,OAAO,EAAE,WAAQ;YAC1C,kBAAC,EAAc,MAAf;GACE,wBAAqB;GAChB;GACK;GACQ;GAClB,WAAW,EAAG,+BAA+B,EAAU;GACvD,QAAQ;GACR,GAAI;GAEH;GACkB,CAAA;EACK,CAAA;;AAIhC,EAAU,cAAc;AAExB,IAAa,UAA4B;CACvC,IAAM,IAAU,EAAW,EAAiB;AAE5C,KAAI,CAAC,EACH,OAAM,MAAM,+DAA+D;AAG7E,QAAO;GCrDI,KAAQ,EACnB,aAAU,IACV,cACA,aACA,QACA,GAAG,QACqB;CACxB,IAAM,IAAY,GAAqB,EAEjC,IAAa,EAAc,GAAS,MAAM;AAEhD,QACE,kBAAC,EAAc,MAAf;EACO;EACL,wBAAqB;EACrB,QAAQ;EACR,WAAW,EACT,iDACA,uBACA,EAAE,4BAA4B,EAAU,WAAW,YAAY,EAC/D,EACD;EACD,GAAI;EAEH;EACkB,CAAA;;AAIzB,EAAK,cAAc;;;AC9BnB,IAAa,KAAe,EAC1B,aAAU,IACV,cACA,aACA,QACA,GAAG,QAC4B;CAC/B,IAAM,IAAa,EAAc,GAAS,MAAM;AAEhD,QACE,kBAAC,EAAc,OAAf;EACO;EACL,wBAAqB;EACrB,WAAW,EACT,yCACA,mHACA,+BACA,EACD;EACD,QAAQ;EACR,GAAI;EAEH;EACmB,CAAA;;AAI1B,EAAY,cAAc;;;AC9B1B,IAAa,KAAc,EACzB,aAAU,IACV,aACA,cACA,aAKE,kBAHgB,IAAU,IAAO,MAGjC;CACO;CACL,wBAAqB;CACrB,WAAW,EAAG,qBAAqB,EAAU;CAE5C;CACS,CAAA;AAIhB,EAAW,cAAc;;;ACdzB,IAAa,KAAe,EAC1B,aAAU,IACV,aACA,cACA,QACA,GAAG,QAC4B;CAC/B,IAAM,IAAa,EAAc,GAAS,SAAS;AAEnD,QACE,kBAAC,EAAc,SAAf;EACO;EACL,wBAAqB;EACrB,QAAQ;EACR,WAAW,EACT,SACA,iEACA,gHACA,6DACA,+EACA,qEACA,EACD;EACD,GAAI;YAbN,CAeE,kBAAC,OAAD;GAAK,WAAU;GAAiC;GAAe,CAAA,EAC/D,kBAAC,GAAD;GACE,QAAO;GACP,WAAW,EACT,wEACA,qCACD;GACD,MAAK;aAEL,kBAAC,GAAD,EAAuB,CAAA;GAClB,CAAA,CACe;;;AAI5B,EAAY,cAAc;;;AC9C1B,IAAa,IAKT,OAAO,OAAO,GAAM;CACtB;CACA;CACA;CACA;CACD,CAAC;AAEF,EAAU,cAAc,aACxB,EAAK,cAAc,QACnB,EAAW,cAAc,cACzB,EAAY,cAAc,qBAC1B,EAAY,cAAc"}

package/dist/alert-dialog/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/alert-dialog/AlertDialogContext.tsx","../../src/alert-dialog/AlertDialog.tsx","../../src/alert-dialog/useRenderSlot.tsx","../../src/alert-dialog/AlertDialogAction.tsx","../../src/alert-dialog/AlertDialogBody.tsx","../../src/alert-dialog/AlertDialogCancel.tsx","../../src/alert-dialog/AlertDialogContent.tsx","../../src/alert-dialog/AlertDialogDescription.tsx","../../src/alert-dialog/AlertDialogFooter.tsx","../../src/alert-dialog/AlertDialogHeader.tsx","../../src/alert-dialog/AlertDialogOverlay.tsx","../../src/alert-dialog/AlertDialogPortal.tsx","../../src/alert-dialog/AlertDialogTitle.tsx","../../src/alert-dialog/AlertDialogTrigger.tsx","../../src/alert-dialog/index.ts"],"sourcesContent":["import { createContext, MutableRefObject, type ReactNode, useContext } from 'react'\n\nexport interface AlertDialogContextValue {\n  cancelRef: MutableRefObject<HTMLButtonElement | null>\n  withFade: boolean\n}\n\nexport const AlertDialogContext = createContext<AlertDialogContextValue | null>(null)\n\nexport const AlertDialogProvider = ({\n  children,\n  withFade = false,\n  cancelRef,\n}: {\n  children: ReactNode\n  withFade?: boolean\n  cancelRef: MutableRefObject<HTMLButtonElement | null>\n}) => {\n  return (\n    <AlertDialogContext.Provider\n      value={{\n        cancelRef,\n        withFade,\n      }}\n    >\n      {children}\n    </AlertDialogContext.Provider>\n  )\n}\n\nexport const useAlertDialog = () => {\n  const context = useContext(AlertDialogContext)\n\n  if (!context) {\n    throw Error('useAlertDialog must be used within an AlertDialog provider')\n  }\n\n  return context\n}\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { ComponentProps, Ref, useRef } from 'react'\n\nimport { AlertDialogProvider } from './AlertDialogContext'\n\nexport interface AlertDialogProps extends Omit<\n  ComponentProps<typeof BaseAlertDialog.Root>,\n  'onOpenChange' | 'render'\n> {\n  /**\n   * Specifies if the dialog is open or not.\n   */\n  open?: boolean\n  /**\n   * Default open state.\n   */\n  defaultOpen?: boolean\n  /**\n   * Handler executed on every dialog open state change.\n   */\n  onOpenChange?: (open: boolean) => void\n  /**\n   * Specifies if the dialog 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  ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialog = ({ onOpenChange, withFade = false, ...props }: AlertDialogProps) => {\n  const cancelRef = useRef<HTMLButtonElement | null>(null)\n\n  const handleOpenChange = onOpenChange\n    ? (open: boolean, _eventDetails: unknown) => {\n        onOpenChange(open)\n      }\n    : undefined\n\n  return (\n    <AlertDialogProvider withFade={withFade} cancelRef={cancelRef}>\n      <BaseAlertDialog.Root\n        data-spark-component=\"alert-dialog\"\n        onOpenChange={handleOpenChange}\n        {...props}\n      />\n    </AlertDialogProvider>\n  )\n}\n\nAlertDialog.displayName = 'AlertDialog'\n","import { Slot } from '../slot'\n\nexport function useRenderSlot(asChild: boolean, defaultTag: string) {\n  const Component = asChild ? Slot : defaultTag\n\n  return asChild ? ({ ...props }) => <Component {...props} /> : undefined\n}\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface AlertDialogActionProps extends Omit<\n  ComponentProps<typeof BaseAlertDialog.Close>,\n  'render'\n> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const AlertDialogAction = ({ asChild = false, ...props }: AlertDialogActionProps) => {\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return (\n    <BaseAlertDialog.Close\n      data-spark-component=\"alert-dialog-action\"\n      render={renderSlot}\n      {...props}\n    />\n  )\n}\n\nAlertDialogAction.displayName = 'AlertDialog.Action'\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 { useAlertDialog } from './AlertDialogContext'\n\nexport interface AlertDialogBodyProps {\n  children: ReactNode\n  className?: string\n  tabIndex?: number\n  ref?: Ref<HTMLDivElement>\n  inset?: boolean\n}\n\nexport const AlertDialogBody = ({\n  children,\n  className,\n  inset = false,\n  ref: forwardedRef,\n  ...rest\n}: AlertDialogBodyProps): ReactElement => {\n  const scrollAreaRef = useRef<HTMLDivElement>(null)\n  const ref = useMergeRefs(forwardedRef, scrollAreaRef)\n\n  const { withFade } = useAlertDialog()\n  const { overflow } = useScrollOverflow(scrollAreaRef)\n\n  return (\n    <div\n      data-spark-component=\"alert-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\nAlertDialogBody.displayName = 'AlertDialog.Body'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useAlertDialog } from './AlertDialogContext'\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface AlertDialogCancelProps extends Omit<\n  ComponentProps<typeof BaseAlertDialog.Close>,\n  'render'\n> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const AlertDialogCancel = ({\n  asChild = false,\n  ref: forwardedRef,\n  ...props\n}: AlertDialogCancelProps) => {\n  const { cancelRef } = useAlertDialog()\n  const ref = useMergeRefs(forwardedRef, cancelRef)\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return (\n    <BaseAlertDialog.Close\n      ref={ref}\n      data-spark-component=\"alert-dialog-cancel\"\n      render={renderSlot}\n      {...props}\n    />\n  )\n}\n\nAlertDialogCancel.displayName = 'AlertDialog.Cancel'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nimport { dialogContentStyles } from '../dialog/DialogContent.styles'\nimport { useAlertDialog } from './AlertDialogContext'\n\nexport interface AlertDialogContentProps extends Omit<\n  ComponentProps<typeof BaseAlertDialog.Popup>,\n  'render'\n> {\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialogContent = ({\n  className,\n  ref,\n  initialFocus,\n  ...others\n}: AlertDialogContentProps) => {\n  const { cancelRef } = useAlertDialog()\n\n  // Default: focus the cancel button when dialog opens\n  // Users can override by passing their own initialFocus prop (RefObject, false, true, or function)\n  const handleInitialFocus = initialFocus !== undefined ? initialFocus : () => cancelRef.current\n\n  return (\n    <BaseAlertDialog.Popup\n      ref={ref}\n      data-spark-component=\"alert-dialog-content\"\n      role=\"alertdialog\"\n      className={state =>\n        cx(\n          dialogContentStyles({ size: 'md', isNarrow: true }),\n          'min-w-[min(288px,calc(100vw-2rem))]',\n          // Base UI automatically adds data-[starting-style] and data-[ending-style] attributes\n          // Transition with opacity and scale for smooth open/close animations\n          'transition-all duration-150',\n          'data-starting-style:scale-90 data-starting-style:opacity-0',\n          'data-ending-style:scale-90 data-ending-style:opacity-0',\n          typeof className === 'function' ? className(state) : className\n        )\n      }\n      initialFocus={handleInitialFocus}\n      {...others}\n    />\n  )\n}\n\nAlertDialogContent.displayName = 'AlertDialog.Content'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface AlertDialogDescriptionProps extends Omit<\n  ComponentProps<typeof BaseAlertDialog.Description>,\n  'render'\n> {\n  ref?: Ref<HTMLParagraphElement>\n}\n\nexport const AlertDialogDescription = (props: AlertDialogDescriptionProps) => {\n  return <BaseAlertDialog.Description data-spark-component=\"alert-dialog-description\" {...props} />\n}\n\nAlertDialogDescription.displayName = 'AlertDialog.Description'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface AlertDialogFooterProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialogFooter = ({\n  children,\n  className,\n  ref,\n  ...rest\n}: AlertDialogFooterProps): ReactElement => (\n  <footer\n    data-spark-component=\"alert-dialog-footer\"\n    ref={ref}\n    className={cx(className, ['px-xl', 'py-lg'])}\n    {...rest}\n  >\n    {children}\n  </footer>\n)\n\nAlertDialogFooter.displayName = 'AlertDialog.Footer'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface AlertDialogHeaderProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialogHeader = ({\n  children,\n  className,\n  ref,\n  ...rest\n}: AlertDialogHeaderProps): ReactElement => (\n  <header\n    data-spark-component=\"alert-dialog-header\"\n    ref={ref}\n    className={cx(className, ['px-xl', 'py-lg'])}\n    {...rest}\n  >\n    {children}\n  </header>\n)\n\nAlertDialogHeader.displayName = 'AlertDialog.Header'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface AlertDialogOverlayProps extends Omit<\n  ComponentProps<typeof BaseAlertDialog.Backdrop>,\n  'render'\n> {\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialogOverlay = ({ className, ...props }: AlertDialogOverlayProps) => {\n  return (\n    <BaseAlertDialog.Backdrop\n      data-spark-component=\"alert-dialog-overlay\"\n      className={state =>\n        cx(\n          'z-overlay fixed top-0 left-0 h-screen w-screen',\n          'bg-overlay/dim-1',\n          // Base UI automatically adds data-[starting-style] and data-[ending-style] attributes\n          'data-starting-style:animate-fade-in',\n          'data-ending-style:animate-fade-out',\n          typeof className === 'function' ? className(state) : className\n        )\n      }\n      {...props}\n    />\n  )\n}\n\nAlertDialogOverlay.displayName = 'AlertDialog.Overlay'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps } from 'react'\n\nexport type AlertDialogPortalProps = ComponentProps<typeof BaseAlertDialog.Portal>\n\nexport const AlertDialogPortal = ({ className, ...props }: AlertDialogPortalProps) => {\n  return (\n    <BaseAlertDialog.Portal\n      data-spark-component=\"alert-dialog-portal\"\n      className={cx(className, 'z-modal absolute')}\n      {...props}\n    />\n  )\n}\n\nAlertDialogPortal.displayName = 'AlertDialog.Portal'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface AlertDialogTitleProps extends Omit<\n  ComponentProps<typeof BaseAlertDialog.Title>,\n  'render'\n> {\n  ref?: Ref<HTMLHeadingElement>\n}\n\nexport const AlertDialogTitle = ({ className, ...props }: AlertDialogTitleProps) => {\n  return (\n    <BaseAlertDialog.Title\n      data-spark-component=\"alert-dialog-title\"\n      className={cx('text-headline-1 text-on-surface', className)}\n      {...props}\n    />\n  )\n}\n\nAlertDialogTitle.displayName = 'AlertDialog.Title'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface AlertDialogTriggerProps extends Omit<\n  ComponentProps<typeof BaseAlertDialog.Trigger>,\n  'render'\n> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const AlertDialogTrigger = ({ asChild = false, ...props }: AlertDialogTriggerProps) => {\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return (\n    <BaseAlertDialog.Trigger\n      data-spark-component=\"alert-dialog-trigger\"\n      render={renderSlot}\n      {...props}\n    />\n  )\n}\n\nAlertDialogTrigger.displayName = 'AlertDialog.Trigger'\n","import { AlertDialog as Root } from './AlertDialog'\nimport { AlertDialogAction } from './AlertDialogAction'\nimport { AlertDialogBody } from './AlertDialogBody'\nimport { AlertDialogCancel } from './AlertDialogCancel'\nimport { AlertDialogContent } from './AlertDialogContent'\nimport { AlertDialogDescription } from './AlertDialogDescription'\nimport { AlertDialogFooter } from './AlertDialogFooter'\nimport { AlertDialogHeader } from './AlertDialogHeader'\nimport { AlertDialogOverlay } from './AlertDialogOverlay'\nimport { AlertDialogPortal } from './AlertDialogPortal'\nimport { AlertDialogTitle } from './AlertDialogTitle'\nimport { AlertDialogTrigger } from './AlertDialogTrigger'\n\nexport * from './AlertDialog'\nexport { useAlertDialog } from './AlertDialogContext'\nexport { type AlertDialogActionProps } from './AlertDialogAction'\nexport { type AlertDialogBodyProps } from './AlertDialogBody'\nexport { type AlertDialogCancelProps } from './AlertDialogCancel'\nexport { type AlertDialogContentProps } from './AlertDialogContent'\nexport { type AlertDialogDescriptionProps } from './AlertDialogDescription'\nexport { type AlertDialogFooterProps } from './AlertDialogFooter'\nexport { type AlertDialogHeaderProps } from './AlertDialogHeader'\nexport { type AlertDialogOverlayProps } from './AlertDialogOverlay'\nexport { type AlertDialogPortalProps } from './AlertDialogPortal'\nexport { type AlertDialogTitleProps } from './AlertDialogTitle'\nexport { type AlertDialogTriggerProps } from './AlertDialogTrigger'\n\nexport const AlertDialog: typeof Root & {\n  Action: typeof AlertDialogAction\n  Body: typeof AlertDialogBody\n  Cancel: typeof AlertDialogCancel\n  Content: typeof AlertDialogContent\n  Description: typeof AlertDialogDescription\n  Footer: typeof AlertDialogFooter\n  Header: typeof AlertDialogHeader\n  Overlay: typeof AlertDialogOverlay\n  Portal: typeof AlertDialogPortal\n  Title: typeof AlertDialogTitle\n  Trigger: typeof AlertDialogTrigger\n} = Object.assign(Root, {\n  Action: AlertDialogAction,\n  Body: AlertDialogBody,\n  Cancel: AlertDialogCancel,\n  Content: AlertDialogContent,\n  Description: AlertDialogDescription,\n  Footer: AlertDialogFooter,\n  Header: AlertDialogHeader,\n  Overlay: AlertDialogOverlay,\n  Portal: AlertDialogPortal,\n  Title: AlertDialogTitle,\n  Trigger: AlertDialogTrigger,\n})\n\nAlertDialog.displayName = 'AlertDialog'\nAlertDialog.Action.displayName = 'AlertDialog.Action'\nAlertDialog.Body.displayName = 'AlertDialog.Body'\nAlertDialog.Cancel.displayName = 'AlertDialog.Cancel'\nAlertDialog.Content.displayName = 'AlertDialog.Content'\nAlertDialog.Description.displayName = 'AlertDialog.Description'\nAlertDialog.Footer.displayName = 'AlertDialog.Footer'\nAlertDialog.Header.displayName = 'AlertDialog.Header'\nAlertDialog.Overlay.displayName = 'AlertDialog.Overlay'\nAlertDialog.Portal.displayName = 'AlertDialog.Portal'\nAlertDialog.Title.displayName = 'AlertDialog.Title'\nAlertDialog.Trigger.displayName = 'AlertDialog.Trigger'\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/alert-dialog/AlertDialogContext.tsx","../../src/alert-dialog/AlertDialog.tsx","../../src/alert-dialog/useRenderSlot.tsx","../../src/alert-dialog/AlertDialogAction.tsx","../../src/alert-dialog/AlertDialogBody.tsx","../../src/alert-dialog/AlertDialogCancel.tsx","../../src/alert-dialog/AlertDialogContent.tsx","../../src/alert-dialog/AlertDialogDescription.tsx","../../src/alert-dialog/AlertDialogFooter.tsx","../../src/alert-dialog/AlertDialogHeader.tsx","../../src/alert-dialog/AlertDialogOverlay.tsx","../../src/alert-dialog/AlertDialogPortal.tsx","../../src/alert-dialog/AlertDialogTitle.tsx","../../src/alert-dialog/AlertDialogTrigger.tsx","../../src/alert-dialog/index.ts"],"sourcesContent":["import { createContext, MutableRefObject, type ReactNode, useContext } from 'react'\n\nexport interface AlertDialogContextValue {\n  cancelRef: MutableRefObject<HTMLButtonElement | null>\n  withFade: boolean\n}\n\nexport const AlertDialogContext = createContext<AlertDialogContextValue | null>(null)\n\nexport const AlertDialogProvider = ({\n  children,\n  withFade = false,\n  cancelRef,\n}: {\n  children: ReactNode\n  withFade?: boolean\n  cancelRef: MutableRefObject<HTMLButtonElement | null>\n}) => {\n  return (\n    <AlertDialogContext.Provider\n      value={{\n        cancelRef,\n        withFade,\n      }}\n    >\n      {children}\n    </AlertDialogContext.Provider>\n  )\n}\n\nexport const useAlertDialog = () => {\n  const context = useContext(AlertDialogContext)\n\n  if (!context) {\n    throw Error('useAlertDialog must be used within an AlertDialog provider')\n  }\n\n  return context\n}\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { ComponentProps, Ref, useRef } from 'react'\n\nimport { AlertDialogProvider } from './AlertDialogContext'\n\nexport interface AlertDialogProps extends Omit<\n  ComponentProps<typeof BaseAlertDialog.Root>,\n  'onOpenChange' | 'render'\n> {\n  /**\n   * Specifies if the dialog is open or not.\n   */\n  open?: boolean\n  /**\n   * Default open state.\n   */\n  defaultOpen?: boolean\n  /**\n   * Handler executed on every dialog open state change.\n   */\n  onOpenChange?: (open: boolean) => void\n  /**\n   * Specifies if the dialog 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  ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialog = ({ onOpenChange, withFade = false, ...props }: AlertDialogProps) => {\n  const cancelRef = useRef<HTMLButtonElement | null>(null)\n\n  const handleOpenChange = onOpenChange\n    ? (open: boolean, _eventDetails: unknown) => {\n        onOpenChange(open)\n      }\n    : undefined\n\n  return (\n    <AlertDialogProvider withFade={withFade} cancelRef={cancelRef}>\n      <BaseAlertDialog.Root\n        data-spark-component=\"alert-dialog\"\n        onOpenChange={handleOpenChange}\n        {...props}\n      />\n    </AlertDialogProvider>\n  )\n}\n\nAlertDialog.displayName = 'AlertDialog'\n","import { Slot } from '../slot'\n\nexport function useRenderSlot(asChild: boolean, defaultTag: string) {\n  const Component = asChild ? Slot : defaultTag\n\n  return asChild ? ({ ...props }) => <Component {...props} /> : undefined\n}\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface AlertDialogActionProps extends Omit<\n  ComponentProps<typeof BaseAlertDialog.Close>,\n  'render'\n> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const AlertDialogAction = ({ asChild = false, ...props }: AlertDialogActionProps) => {\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return (\n    <BaseAlertDialog.Close\n      data-spark-component=\"alert-dialog-action\"\n      render={renderSlot}\n      {...props}\n    />\n  )\n}\n\nAlertDialogAction.displayName = 'AlertDialog.Action'\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 { useAlertDialog } from './AlertDialogContext'\n\nexport interface AlertDialogBodyProps {\n  children: ReactNode\n  className?: string\n  tabIndex?: number\n  ref?: Ref<HTMLDivElement>\n  inset?: boolean\n}\n\nexport const AlertDialogBody = ({\n  children,\n  className,\n  inset = false,\n  ref: forwardedRef,\n  ...rest\n}: AlertDialogBodyProps): ReactElement => {\n  const scrollAreaRef = useRef<HTMLDivElement>(null)\n  const ref = useMergeRefs(forwardedRef, scrollAreaRef)\n\n  const { withFade } = useAlertDialog()\n  const { overflow } = useScrollOverflow(scrollAreaRef)\n\n  return (\n    <div\n      data-spark-component=\"alert-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\nAlertDialogBody.displayName = 'AlertDialog.Body'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useAlertDialog } from './AlertDialogContext'\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface AlertDialogCancelProps extends Omit<\n  ComponentProps<typeof BaseAlertDialog.Close>,\n  'render'\n> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const AlertDialogCancel = ({\n  asChild = false,\n  ref: forwardedRef,\n  ...props\n}: AlertDialogCancelProps) => {\n  const { cancelRef } = useAlertDialog()\n  const ref = useMergeRefs(forwardedRef, cancelRef)\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return (\n    <BaseAlertDialog.Close\n      ref={ref}\n      data-spark-component=\"alert-dialog-cancel\"\n      render={renderSlot}\n      {...props}\n    />\n  )\n}\n\nAlertDialogCancel.displayName = 'AlertDialog.Cancel'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nimport { dialogContentStyles } from '../dialog/DialogContent.styles'\nimport { useAlertDialog } from './AlertDialogContext'\n\nexport interface AlertDialogContentProps extends Omit<\n  ComponentProps<typeof BaseAlertDialog.Popup>,\n  'render'\n> {\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialogContent = ({\n  className,\n  ref,\n  initialFocus,\n  ...others\n}: AlertDialogContentProps) => {\n  const { cancelRef } = useAlertDialog()\n\n  // Default: focus the cancel button when dialog opens\n  // Users can override by passing their own initialFocus prop (RefObject, false, true, or function)\n  const handleInitialFocus = initialFocus !== undefined ? initialFocus : () => cancelRef.current\n\n  return (\n    <BaseAlertDialog.Popup\n      ref={ref}\n      data-spark-component=\"alert-dialog-content\"\n      role=\"alertdialog\"\n      className={state =>\n        cx(\n          dialogContentStyles({ size: 'md', isNarrow: true }),\n          'min-w-[min(288px,calc(100vw-2rem))]',\n          // Base UI automatically adds data-[starting-style] and data-[ending-style] attributes\n          // Transition with opacity and scale for smooth open/close animations\n          'transition-all duration-150',\n          'data-starting-style:scale-90 data-starting-style:opacity-0',\n          'data-ending-style:scale-90 data-ending-style:opacity-0',\n          typeof className === 'function' ? className(state) : className\n        )\n      }\n      initialFocus={handleInitialFocus}\n      {...others}\n    />\n  )\n}\n\nAlertDialogContent.displayName = 'AlertDialog.Content'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface AlertDialogDescriptionProps extends Omit<\n  ComponentProps<typeof BaseAlertDialog.Description>,\n  'render'\n> {\n  ref?: Ref<HTMLParagraphElement>\n}\n\nexport const AlertDialogDescription = (props: AlertDialogDescriptionProps) => {\n  return <BaseAlertDialog.Description data-spark-component=\"alert-dialog-description\" {...props} />\n}\n\nAlertDialogDescription.displayName = 'AlertDialog.Description'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface AlertDialogFooterProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialogFooter = ({\n  children,\n  className,\n  ref,\n  ...rest\n}: AlertDialogFooterProps): ReactElement => (\n  <footer\n    data-spark-component=\"alert-dialog-footer\"\n    ref={ref}\n    className={cx(className, ['px-xl', 'py-lg'])}\n    {...rest}\n  >\n    {children}\n  </footer>\n)\n\nAlertDialogFooter.displayName = 'AlertDialog.Footer'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface AlertDialogHeaderProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialogHeader = ({\n  children,\n  className,\n  ref,\n  ...rest\n}: AlertDialogHeaderProps): ReactElement => (\n  <header\n    data-spark-component=\"alert-dialog-header\"\n    ref={ref}\n    className={cx(className, ['px-xl', 'py-lg'])}\n    {...rest}\n  >\n    {children}\n  </header>\n)\n\nAlertDialogHeader.displayName = 'AlertDialog.Header'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface AlertDialogOverlayProps extends Omit<\n  ComponentProps<typeof BaseAlertDialog.Backdrop>,\n  'render'\n> {\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialogOverlay = ({ className, ...props }: AlertDialogOverlayProps) => {\n  return (\n    <BaseAlertDialog.Backdrop\n      data-spark-component=\"alert-dialog-overlay\"\n      className={state =>\n        cx(\n          'z-overlay fixed top-0 left-0 h-screen w-screen',\n          'bg-overlay/dim-1',\n          // Base UI automatically adds data-[starting-style] and data-[ending-style] attributes\n          'data-starting-style:animate-fade-in',\n          'data-ending-style:animate-fade-out',\n          typeof className === 'function' ? className(state) : className\n        )\n      }\n      {...props}\n    />\n  )\n}\n\nAlertDialogOverlay.displayName = 'AlertDialog.Overlay'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps } from 'react'\n\nexport type AlertDialogPortalProps = ComponentProps<typeof BaseAlertDialog.Portal>\n\nexport const AlertDialogPortal = ({ className, ...props }: AlertDialogPortalProps) => {\n  return (\n    <BaseAlertDialog.Portal\n      data-spark-component=\"alert-dialog-portal\"\n      className={cx(className, 'z-modal absolute')}\n      {...props}\n    />\n  )\n}\n\nAlertDialogPortal.displayName = 'AlertDialog.Portal'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface AlertDialogTitleProps extends Omit<\n  ComponentProps<typeof BaseAlertDialog.Title>,\n  'render'\n> {\n  ref?: Ref<HTMLHeadingElement>\n}\n\nexport const AlertDialogTitle = ({ className, ...props }: AlertDialogTitleProps) => {\n  return (\n    <BaseAlertDialog.Title\n      data-spark-component=\"alert-dialog-title\"\n      className={cx('text-headline-1 text-on-surface', className)}\n      {...props}\n    />\n  )\n}\n\nAlertDialogTitle.displayName = 'AlertDialog.Title'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface AlertDialogTriggerProps extends Omit<\n  ComponentProps<typeof BaseAlertDialog.Trigger>,\n  'render'\n> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const AlertDialogTrigger = ({ asChild = false, ...props }: AlertDialogTriggerProps) => {\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return (\n    <BaseAlertDialog.Trigger\n      data-spark-component=\"alert-dialog-trigger\"\n      render={renderSlot}\n      {...props}\n    />\n  )\n}\n\nAlertDialogTrigger.displayName = 'AlertDialog.Trigger'\n","import { AlertDialog as Root } from './AlertDialog'\nimport { AlertDialogAction } from './AlertDialogAction'\nimport { AlertDialogBody } from './AlertDialogBody'\nimport { AlertDialogCancel } from './AlertDialogCancel'\nimport { AlertDialogContent } from './AlertDialogContent'\nimport { AlertDialogDescription } from './AlertDialogDescription'\nimport { AlertDialogFooter } from './AlertDialogFooter'\nimport { AlertDialogHeader } from './AlertDialogHeader'\nimport { AlertDialogOverlay } from './AlertDialogOverlay'\nimport { AlertDialogPortal } from './AlertDialogPortal'\nimport { AlertDialogTitle } from './AlertDialogTitle'\nimport { AlertDialogTrigger } from './AlertDialogTrigger'\n\nexport * from './AlertDialog'\nexport { useAlertDialog } from './AlertDialogContext'\nexport { type AlertDialogActionProps } from './AlertDialogAction'\nexport { type AlertDialogBodyProps } from './AlertDialogBody'\nexport { type AlertDialogCancelProps } from './AlertDialogCancel'\nexport { type AlertDialogContentProps } from './AlertDialogContent'\nexport { type AlertDialogDescriptionProps } from './AlertDialogDescription'\nexport { type AlertDialogFooterProps } from './AlertDialogFooter'\nexport { type AlertDialogHeaderProps } from './AlertDialogHeader'\nexport { type AlertDialogOverlayProps } from './AlertDialogOverlay'\nexport { type AlertDialogPortalProps } from './AlertDialogPortal'\nexport { type AlertDialogTitleProps } from './AlertDialogTitle'\nexport { type AlertDialogTriggerProps } from './AlertDialogTrigger'\n\n/**\n * A modal dialog that interrupts the user with important content and requires a response.\n */\nexport const AlertDialog: typeof Root & {\n  Action: typeof AlertDialogAction\n  Body: typeof AlertDialogBody\n  Cancel: typeof AlertDialogCancel\n  Content: typeof AlertDialogContent\n  Description: typeof AlertDialogDescription\n  Footer: typeof AlertDialogFooter\n  Header: typeof AlertDialogHeader\n  Overlay: typeof AlertDialogOverlay\n  Portal: typeof AlertDialogPortal\n  Title: typeof AlertDialogTitle\n  Trigger: typeof AlertDialogTrigger\n} = Object.assign(Root, {\n  Action: AlertDialogAction,\n  Body: AlertDialogBody,\n  Cancel: AlertDialogCancel,\n  Content: AlertDialogContent,\n  Description: AlertDialogDescription,\n  Footer: AlertDialogFooter,\n  Header: AlertDialogHeader,\n  Overlay: AlertDialogOverlay,\n  Portal: AlertDialogPortal,\n  Title: AlertDialogTitle,\n  Trigger: AlertDialogTrigger,\n})\n\nAlertDialog.displayName = 'AlertDialog'\nAlertDialog.Action.displayName = 'AlertDialog.Action'\nAlertDialog.Body.displayName = 'AlertDialog.Body'\nAlertDialog.Cancel.displayName = 'AlertDialog.Cancel'\nAlertDialog.Content.displayName = 'AlertDialog.Content'\nAlertDialog.Description.displayName = 'AlertDialog.Description'\nAlertDialog.Footer.displayName = 'AlertDialog.Footer'\nAlertDialog.Header.displayName = 'AlertDialog.Header'\nAlertDialog.Overlay.displayName = 'AlertDialog.Overlay'\nAlertDialog.Portal.displayName = 'AlertDialog.Portal'\nAlertDialog.Title.displayName = 'AlertDialog.Title'\nAlertDialog.Trigger.displayName = 'AlertDialog.Trigger'\n"],"mappings":"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"}

package/dist/alert-dialog/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/alert-dialog/AlertDialogContext.tsx","../../src/alert-dialog/AlertDialog.tsx","../../src/alert-dialog/useRenderSlot.tsx","../../src/alert-dialog/AlertDialogAction.tsx","../../src/alert-dialog/AlertDialogBody.tsx","../../src/alert-dialog/AlertDialogCancel.tsx","../../src/alert-dialog/AlertDialogContent.tsx","../../src/alert-dialog/AlertDialogDescription.tsx","../../src/alert-dialog/AlertDialogFooter.tsx","../../src/alert-dialog/AlertDialogHeader.tsx","../../src/alert-dialog/AlertDialogOverlay.tsx","../../src/alert-dialog/AlertDialogPortal.tsx","../../src/alert-dialog/AlertDialogTitle.tsx","../../src/alert-dialog/AlertDialogTrigger.tsx","../../src/alert-dialog/index.ts"],"sourcesContent":["import { createContext, MutableRefObject, type ReactNode, useContext } from 'react'\n\nexport interface AlertDialogContextValue {\n  cancelRef: MutableRefObject<HTMLButtonElement | null>\n  withFade: boolean\n}\n\nexport const AlertDialogContext = createContext<AlertDialogContextValue | null>(null)\n\nexport const AlertDialogProvider = ({\n  children,\n  withFade = false,\n  cancelRef,\n}: {\n  children: ReactNode\n  withFade?: boolean\n  cancelRef: MutableRefObject<HTMLButtonElement | null>\n}) => {\n  return (\n    <AlertDialogContext.Provider\n      value={{\n        cancelRef,\n        withFade,\n      }}\n    >\n      {children}\n    </AlertDialogContext.Provider>\n  )\n}\n\nexport const useAlertDialog = () => {\n  const context = useContext(AlertDialogContext)\n\n  if (!context) {\n    throw Error('useAlertDialog must be used within an AlertDialog provider')\n  }\n\n  return context\n}\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { ComponentProps, Ref, useRef } from 'react'\n\nimport { AlertDialogProvider } from './AlertDialogContext'\n\nexport interface AlertDialogProps extends Omit<\n  ComponentProps<typeof BaseAlertDialog.Root>,\n  'onOpenChange' | 'render'\n> {\n  /**\n   * Specifies if the dialog is open or not.\n   */\n  open?: boolean\n  /**\n   * Default open state.\n   */\n  defaultOpen?: boolean\n  /**\n   * Handler executed on every dialog open state change.\n   */\n  onOpenChange?: (open: boolean) => void\n  /**\n   * Specifies if the dialog 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  ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialog = ({ onOpenChange, withFade = false, ...props }: AlertDialogProps) => {\n  const cancelRef = useRef<HTMLButtonElement | null>(null)\n\n  const handleOpenChange = onOpenChange\n    ? (open: boolean, _eventDetails: unknown) => {\n        onOpenChange(open)\n      }\n    : undefined\n\n  return (\n    <AlertDialogProvider withFade={withFade} cancelRef={cancelRef}>\n      <BaseAlertDialog.Root\n        data-spark-component=\"alert-dialog\"\n        onOpenChange={handleOpenChange}\n        {...props}\n      />\n    </AlertDialogProvider>\n  )\n}\n\nAlertDialog.displayName = 'AlertDialog'\n","import { Slot } from '../slot'\n\nexport function useRenderSlot(asChild: boolean, defaultTag: string) {\n  const Component = asChild ? Slot : defaultTag\n\n  return asChild ? ({ ...props }) => <Component {...props} /> : undefined\n}\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface AlertDialogActionProps extends Omit<\n  ComponentProps<typeof BaseAlertDialog.Close>,\n  'render'\n> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const AlertDialogAction = ({ asChild = false, ...props }: AlertDialogActionProps) => {\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return (\n    <BaseAlertDialog.Close\n      data-spark-component=\"alert-dialog-action\"\n      render={renderSlot}\n      {...props}\n    />\n  )\n}\n\nAlertDialogAction.displayName = 'AlertDialog.Action'\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 { useAlertDialog } from './AlertDialogContext'\n\nexport interface AlertDialogBodyProps {\n  children: ReactNode\n  className?: string\n  tabIndex?: number\n  ref?: Ref<HTMLDivElement>\n  inset?: boolean\n}\n\nexport const AlertDialogBody = ({\n  children,\n  className,\n  inset = false,\n  ref: forwardedRef,\n  ...rest\n}: AlertDialogBodyProps): ReactElement => {\n  const scrollAreaRef = useRef<HTMLDivElement>(null)\n  const ref = useMergeRefs(forwardedRef, scrollAreaRef)\n\n  const { withFade } = useAlertDialog()\n  const { overflow } = useScrollOverflow(scrollAreaRef)\n\n  return (\n    <div\n      data-spark-component=\"alert-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\nAlertDialogBody.displayName = 'AlertDialog.Body'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useAlertDialog } from './AlertDialogContext'\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface AlertDialogCancelProps extends Omit<\n  ComponentProps<typeof BaseAlertDialog.Close>,\n  'render'\n> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const AlertDialogCancel = ({\n  asChild = false,\n  ref: forwardedRef,\n  ...props\n}: AlertDialogCancelProps) => {\n  const { cancelRef } = useAlertDialog()\n  const ref = useMergeRefs(forwardedRef, cancelRef)\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return (\n    <BaseAlertDialog.Close\n      ref={ref}\n      data-spark-component=\"alert-dialog-cancel\"\n      render={renderSlot}\n      {...props}\n    />\n  )\n}\n\nAlertDialogCancel.displayName = 'AlertDialog.Cancel'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nimport { dialogContentStyles } from '../dialog/DialogContent.styles'\nimport { useAlertDialog } from './AlertDialogContext'\n\nexport interface AlertDialogContentProps extends Omit<\n  ComponentProps<typeof BaseAlertDialog.Popup>,\n  'render'\n> {\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialogContent = ({\n  className,\n  ref,\n  initialFocus,\n  ...others\n}: AlertDialogContentProps) => {\n  const { cancelRef } = useAlertDialog()\n\n  // Default: focus the cancel button when dialog opens\n  // Users can override by passing their own initialFocus prop (RefObject, false, true, or function)\n  const handleInitialFocus = initialFocus !== undefined ? initialFocus : () => cancelRef.current\n\n  return (\n    <BaseAlertDialog.Popup\n      ref={ref}\n      data-spark-component=\"alert-dialog-content\"\n      role=\"alertdialog\"\n      className={state =>\n        cx(\n          dialogContentStyles({ size: 'md', isNarrow: true }),\n          'min-w-[min(288px,calc(100vw-2rem))]',\n          // Base UI automatically adds data-[starting-style] and data-[ending-style] attributes\n          // Transition with opacity and scale for smooth open/close animations\n          'transition-all duration-150',\n          'data-starting-style:scale-90 data-starting-style:opacity-0',\n          'data-ending-style:scale-90 data-ending-style:opacity-0',\n          typeof className === 'function' ? className(state) : className\n        )\n      }\n      initialFocus={handleInitialFocus}\n      {...others}\n    />\n  )\n}\n\nAlertDialogContent.displayName = 'AlertDialog.Content'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface AlertDialogDescriptionProps extends Omit<\n  ComponentProps<typeof BaseAlertDialog.Description>,\n  'render'\n> {\n  ref?: Ref<HTMLParagraphElement>\n}\n\nexport const AlertDialogDescription = (props: AlertDialogDescriptionProps) => {\n  return <BaseAlertDialog.Description data-spark-component=\"alert-dialog-description\" {...props} />\n}\n\nAlertDialogDescription.displayName = 'AlertDialog.Description'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface AlertDialogFooterProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialogFooter = ({\n  children,\n  className,\n  ref,\n  ...rest\n}: AlertDialogFooterProps): ReactElement => (\n  <footer\n    data-spark-component=\"alert-dialog-footer\"\n    ref={ref}\n    className={cx(className, ['px-xl', 'py-lg'])}\n    {...rest}\n  >\n    {children}\n  </footer>\n)\n\nAlertDialogFooter.displayName = 'AlertDialog.Footer'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface AlertDialogHeaderProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialogHeader = ({\n  children,\n  className,\n  ref,\n  ...rest\n}: AlertDialogHeaderProps): ReactElement => (\n  <header\n    data-spark-component=\"alert-dialog-header\"\n    ref={ref}\n    className={cx(className, ['px-xl', 'py-lg'])}\n    {...rest}\n  >\n    {children}\n  </header>\n)\n\nAlertDialogHeader.displayName = 'AlertDialog.Header'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface AlertDialogOverlayProps extends Omit<\n  ComponentProps<typeof BaseAlertDialog.Backdrop>,\n  'render'\n> {\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialogOverlay = ({ className, ...props }: AlertDialogOverlayProps) => {\n  return (\n    <BaseAlertDialog.Backdrop\n      data-spark-component=\"alert-dialog-overlay\"\n      className={state =>\n        cx(\n          'z-overlay fixed top-0 left-0 h-screen w-screen',\n          'bg-overlay/dim-1',\n          // Base UI automatically adds data-[starting-style] and data-[ending-style] attributes\n          'data-starting-style:animate-fade-in',\n          'data-ending-style:animate-fade-out',\n          typeof className === 'function' ? className(state) : className\n        )\n      }\n      {...props}\n    />\n  )\n}\n\nAlertDialogOverlay.displayName = 'AlertDialog.Overlay'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps } from 'react'\n\nexport type AlertDialogPortalProps = ComponentProps<typeof BaseAlertDialog.Portal>\n\nexport const AlertDialogPortal = ({ className, ...props }: AlertDialogPortalProps) => {\n  return (\n    <BaseAlertDialog.Portal\n      data-spark-component=\"alert-dialog-portal\"\n      className={cx(className, 'z-modal absolute')}\n      {...props}\n    />\n  )\n}\n\nAlertDialogPortal.displayName = 'AlertDialog.Portal'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface AlertDialogTitleProps extends Omit<\n  ComponentProps<typeof BaseAlertDialog.Title>,\n  'render'\n> {\n  ref?: Ref<HTMLHeadingElement>\n}\n\nexport const AlertDialogTitle = ({ className, ...props }: AlertDialogTitleProps) => {\n  return (\n    <BaseAlertDialog.Title\n      data-spark-component=\"alert-dialog-title\"\n      className={cx('text-headline-1 text-on-surface', className)}\n      {...props}\n    />\n  )\n}\n\nAlertDialogTitle.displayName = 'AlertDialog.Title'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface AlertDialogTriggerProps extends Omit<\n  ComponentProps<typeof BaseAlertDialog.Trigger>,\n  'render'\n> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const AlertDialogTrigger = ({ asChild = false, ...props }: AlertDialogTriggerProps) => {\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return (\n    <BaseAlertDialog.Trigger\n      data-spark-component=\"alert-dialog-trigger\"\n      render={renderSlot}\n      {...props}\n    />\n  )\n}\n\nAlertDialogTrigger.displayName = 'AlertDialog.Trigger'\n","import { AlertDialog as Root } from './AlertDialog'\nimport { AlertDialogAction } from './AlertDialogAction'\nimport { AlertDialogBody } from './AlertDialogBody'\nimport { AlertDialogCancel } from './AlertDialogCancel'\nimport { AlertDialogContent } from './AlertDialogContent'\nimport { AlertDialogDescription } from './AlertDialogDescription'\nimport { AlertDialogFooter } from './AlertDialogFooter'\nimport { AlertDialogHeader } from './AlertDialogHeader'\nimport { AlertDialogOverlay } from './AlertDialogOverlay'\nimport { AlertDialogPortal } from './AlertDialogPortal'\nimport { AlertDialogTitle } from './AlertDialogTitle'\nimport { AlertDialogTrigger } from './AlertDialogTrigger'\n\nexport * from './AlertDialog'\nexport { useAlertDialog } from './AlertDialogContext'\nexport { type AlertDialogActionProps } from './AlertDialogAction'\nexport { type AlertDialogBodyProps } from './AlertDialogBody'\nexport { type AlertDialogCancelProps } from './AlertDialogCancel'\nexport { type AlertDialogContentProps } from './AlertDialogContent'\nexport { type AlertDialogDescriptionProps } from './AlertDialogDescription'\nexport { type AlertDialogFooterProps } from './AlertDialogFooter'\nexport { type AlertDialogHeaderProps } from './AlertDialogHeader'\nexport { type AlertDialogOverlayProps } from './AlertDialogOverlay'\nexport { type AlertDialogPortalProps } from './AlertDialogPortal'\nexport { type AlertDialogTitleProps } from './AlertDialogTitle'\nexport { type AlertDialogTriggerProps } from './AlertDialogTrigger'\n\nexport const AlertDialog: typeof Root & {\n  Action: typeof AlertDialogAction\n  Body: typeof AlertDialogBody\n  Cancel: typeof AlertDialogCancel\n  Content: typeof AlertDialogContent\n  Description: typeof AlertDialogDescription\n  Footer: typeof AlertDialogFooter\n  Header: typeof AlertDialogHeader\n  Overlay: typeof AlertDialogOverlay\n  Portal: typeof AlertDialogPortal\n  Title: typeof AlertDialogTitle\n  Trigger: typeof AlertDialogTrigger\n} = Object.assign(Root, {\n  Action: AlertDialogAction,\n  Body: AlertDialogBody,\n  Cancel: AlertDialogCancel,\n  Content: AlertDialogContent,\n  Description: AlertDialogDescription,\n  Footer: AlertDialogFooter,\n  Header: AlertDialogHeader,\n  Overlay: AlertDialogOverlay,\n  Portal: AlertDialogPortal,\n  Title: AlertDialogTitle,\n  Trigger: AlertDialogTrigger,\n})\n\nAlertDialog.displayName = 'AlertDialog'\nAlertDialog.Action.displayName = 'AlertDialog.Action'\nAlertDialog.Body.displayName = 'AlertDialog.Body'\nAlertDialog.Cancel.displayName = 'AlertDialog.Cancel'\nAlertDialog.Content.displayName = 'AlertDialog.Content'\nAlertDialog.Description.displayName = 'AlertDialog.Description'\nAlertDialog.Footer.displayName = 'AlertDialog.Footer'\nAlertDialog.Header.displayName = 'AlertDialog.Header'\nAlertDialog.Overlay.displayName = 'AlertDialog.Overlay'\nAlertDialog.Portal.displayName = 'AlertDialog.Portal'\nAlertDialog.Title.displayName = 'AlertDialog.Title'\nAlertDialog.Trigger.displayName = 'AlertDialog.Trigger'\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/alert-dialog/AlertDialogContext.tsx","../../src/alert-dialog/AlertDialog.tsx","../../src/alert-dialog/useRenderSlot.tsx","../../src/alert-dialog/AlertDialogAction.tsx","../../src/alert-dialog/AlertDialogBody.tsx","../../src/alert-dialog/AlertDialogCancel.tsx","../../src/alert-dialog/AlertDialogContent.tsx","../../src/alert-dialog/AlertDialogDescription.tsx","../../src/alert-dialog/AlertDialogFooter.tsx","../../src/alert-dialog/AlertDialogHeader.tsx","../../src/alert-dialog/AlertDialogOverlay.tsx","../../src/alert-dialog/AlertDialogPortal.tsx","../../src/alert-dialog/AlertDialogTitle.tsx","../../src/alert-dialog/AlertDialogTrigger.tsx","../../src/alert-dialog/index.ts"],"sourcesContent":["import { createContext, MutableRefObject, type ReactNode, useContext } from 'react'\n\nexport interface AlertDialogContextValue {\n  cancelRef: MutableRefObject<HTMLButtonElement | null>\n  withFade: boolean\n}\n\nexport const AlertDialogContext = createContext<AlertDialogContextValue | null>(null)\n\nexport const AlertDialogProvider = ({\n  children,\n  withFade = false,\n  cancelRef,\n}: {\n  children: ReactNode\n  withFade?: boolean\n  cancelRef: MutableRefObject<HTMLButtonElement | null>\n}) => {\n  return (\n    <AlertDialogContext.Provider\n      value={{\n        cancelRef,\n        withFade,\n      }}\n    >\n      {children}\n    </AlertDialogContext.Provider>\n  )\n}\n\nexport const useAlertDialog = () => {\n  const context = useContext(AlertDialogContext)\n\n  if (!context) {\n    throw Error('useAlertDialog must be used within an AlertDialog provider')\n  }\n\n  return context\n}\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { ComponentProps, Ref, useRef } from 'react'\n\nimport { AlertDialogProvider } from './AlertDialogContext'\n\nexport interface AlertDialogProps extends Omit<\n  ComponentProps<typeof BaseAlertDialog.Root>,\n  'onOpenChange' | 'render'\n> {\n  /**\n   * Specifies if the dialog is open or not.\n   */\n  open?: boolean\n  /**\n   * Default open state.\n   */\n  defaultOpen?: boolean\n  /**\n   * Handler executed on every dialog open state change.\n   */\n  onOpenChange?: (open: boolean) => void\n  /**\n   * Specifies if the dialog 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  ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialog = ({ onOpenChange, withFade = false, ...props }: AlertDialogProps) => {\n  const cancelRef = useRef<HTMLButtonElement | null>(null)\n\n  const handleOpenChange = onOpenChange\n    ? (open: boolean, _eventDetails: unknown) => {\n        onOpenChange(open)\n      }\n    : undefined\n\n  return (\n    <AlertDialogProvider withFade={withFade} cancelRef={cancelRef}>\n      <BaseAlertDialog.Root\n        data-spark-component=\"alert-dialog\"\n        onOpenChange={handleOpenChange}\n        {...props}\n      />\n    </AlertDialogProvider>\n  )\n}\n\nAlertDialog.displayName = 'AlertDialog'\n","import { Slot } from '../slot'\n\nexport function useRenderSlot(asChild: boolean, defaultTag: string) {\n  const Component = asChild ? Slot : defaultTag\n\n  return asChild ? ({ ...props }) => <Component {...props} /> : undefined\n}\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface AlertDialogActionProps extends Omit<\n  ComponentProps<typeof BaseAlertDialog.Close>,\n  'render'\n> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const AlertDialogAction = ({ asChild = false, ...props }: AlertDialogActionProps) => {\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return (\n    <BaseAlertDialog.Close\n      data-spark-component=\"alert-dialog-action\"\n      render={renderSlot}\n      {...props}\n    />\n  )\n}\n\nAlertDialogAction.displayName = 'AlertDialog.Action'\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 { useAlertDialog } from './AlertDialogContext'\n\nexport interface AlertDialogBodyProps {\n  children: ReactNode\n  className?: string\n  tabIndex?: number\n  ref?: Ref<HTMLDivElement>\n  inset?: boolean\n}\n\nexport const AlertDialogBody = ({\n  children,\n  className,\n  inset = false,\n  ref: forwardedRef,\n  ...rest\n}: AlertDialogBodyProps): ReactElement => {\n  const scrollAreaRef = useRef<HTMLDivElement>(null)\n  const ref = useMergeRefs(forwardedRef, scrollAreaRef)\n\n  const { withFade } = useAlertDialog()\n  const { overflow } = useScrollOverflow(scrollAreaRef)\n\n  return (\n    <div\n      data-spark-component=\"alert-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\nAlertDialogBody.displayName = 'AlertDialog.Body'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useAlertDialog } from './AlertDialogContext'\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface AlertDialogCancelProps extends Omit<\n  ComponentProps<typeof BaseAlertDialog.Close>,\n  'render'\n> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const AlertDialogCancel = ({\n  asChild = false,\n  ref: forwardedRef,\n  ...props\n}: AlertDialogCancelProps) => {\n  const { cancelRef } = useAlertDialog()\n  const ref = useMergeRefs(forwardedRef, cancelRef)\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return (\n    <BaseAlertDialog.Close\n      ref={ref}\n      data-spark-component=\"alert-dialog-cancel\"\n      render={renderSlot}\n      {...props}\n    />\n  )\n}\n\nAlertDialogCancel.displayName = 'AlertDialog.Cancel'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nimport { dialogContentStyles } from '../dialog/DialogContent.styles'\nimport { useAlertDialog } from './AlertDialogContext'\n\nexport interface AlertDialogContentProps extends Omit<\n  ComponentProps<typeof BaseAlertDialog.Popup>,\n  'render'\n> {\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialogContent = ({\n  className,\n  ref,\n  initialFocus,\n  ...others\n}: AlertDialogContentProps) => {\n  const { cancelRef } = useAlertDialog()\n\n  // Default: focus the cancel button when dialog opens\n  // Users can override by passing their own initialFocus prop (RefObject, false, true, or function)\n  const handleInitialFocus = initialFocus !== undefined ? initialFocus : () => cancelRef.current\n\n  return (\n    <BaseAlertDialog.Popup\n      ref={ref}\n      data-spark-component=\"alert-dialog-content\"\n      role=\"alertdialog\"\n      className={state =>\n        cx(\n          dialogContentStyles({ size: 'md', isNarrow: true }),\n          'min-w-[min(288px,calc(100vw-2rem))]',\n          // Base UI automatically adds data-[starting-style] and data-[ending-style] attributes\n          // Transition with opacity and scale for smooth open/close animations\n          'transition-all duration-150',\n          'data-starting-style:scale-90 data-starting-style:opacity-0',\n          'data-ending-style:scale-90 data-ending-style:opacity-0',\n          typeof className === 'function' ? className(state) : className\n        )\n      }\n      initialFocus={handleInitialFocus}\n      {...others}\n    />\n  )\n}\n\nAlertDialogContent.displayName = 'AlertDialog.Content'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface AlertDialogDescriptionProps extends Omit<\n  ComponentProps<typeof BaseAlertDialog.Description>,\n  'render'\n> {\n  ref?: Ref<HTMLParagraphElement>\n}\n\nexport const AlertDialogDescription = (props: AlertDialogDescriptionProps) => {\n  return <BaseAlertDialog.Description data-spark-component=\"alert-dialog-description\" {...props} />\n}\n\nAlertDialogDescription.displayName = 'AlertDialog.Description'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface AlertDialogFooterProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialogFooter = ({\n  children,\n  className,\n  ref,\n  ...rest\n}: AlertDialogFooterProps): ReactElement => (\n  <footer\n    data-spark-component=\"alert-dialog-footer\"\n    ref={ref}\n    className={cx(className, ['px-xl', 'py-lg'])}\n    {...rest}\n  >\n    {children}\n  </footer>\n)\n\nAlertDialogFooter.displayName = 'AlertDialog.Footer'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface AlertDialogHeaderProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialogHeader = ({\n  children,\n  className,\n  ref,\n  ...rest\n}: AlertDialogHeaderProps): ReactElement => (\n  <header\n    data-spark-component=\"alert-dialog-header\"\n    ref={ref}\n    className={cx(className, ['px-xl', 'py-lg'])}\n    {...rest}\n  >\n    {children}\n  </header>\n)\n\nAlertDialogHeader.displayName = 'AlertDialog.Header'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface AlertDialogOverlayProps extends Omit<\n  ComponentProps<typeof BaseAlertDialog.Backdrop>,\n  'render'\n> {\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const AlertDialogOverlay = ({ className, ...props }: AlertDialogOverlayProps) => {\n  return (\n    <BaseAlertDialog.Backdrop\n      data-spark-component=\"alert-dialog-overlay\"\n      className={state =>\n        cx(\n          'z-overlay fixed top-0 left-0 h-screen w-screen',\n          'bg-overlay/dim-1',\n          // Base UI automatically adds data-[starting-style] and data-[ending-style] attributes\n          'data-starting-style:animate-fade-in',\n          'data-ending-style:animate-fade-out',\n          typeof className === 'function' ? className(state) : className\n        )\n      }\n      {...props}\n    />\n  )\n}\n\nAlertDialogOverlay.displayName = 'AlertDialog.Overlay'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps } from 'react'\n\nexport type AlertDialogPortalProps = ComponentProps<typeof BaseAlertDialog.Portal>\n\nexport const AlertDialogPortal = ({ className, ...props }: AlertDialogPortalProps) => {\n  return (\n    <BaseAlertDialog.Portal\n      data-spark-component=\"alert-dialog-portal\"\n      className={cx(className, 'z-modal absolute')}\n      {...props}\n    />\n  )\n}\n\nAlertDialogPortal.displayName = 'AlertDialog.Portal'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface AlertDialogTitleProps extends Omit<\n  ComponentProps<typeof BaseAlertDialog.Title>,\n  'render'\n> {\n  ref?: Ref<HTMLHeadingElement>\n}\n\nexport const AlertDialogTitle = ({ className, ...props }: AlertDialogTitleProps) => {\n  return (\n    <BaseAlertDialog.Title\n      data-spark-component=\"alert-dialog-title\"\n      className={cx('text-headline-1 text-on-surface', className)}\n      {...props}\n    />\n  )\n}\n\nAlertDialogTitle.displayName = 'AlertDialog.Title'\n","import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface AlertDialogTriggerProps extends Omit<\n  ComponentProps<typeof BaseAlertDialog.Trigger>,\n  'render'\n> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const AlertDialogTrigger = ({ asChild = false, ...props }: AlertDialogTriggerProps) => {\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return (\n    <BaseAlertDialog.Trigger\n      data-spark-component=\"alert-dialog-trigger\"\n      render={renderSlot}\n      {...props}\n    />\n  )\n}\n\nAlertDialogTrigger.displayName = 'AlertDialog.Trigger'\n","import { AlertDialog as Root } from './AlertDialog'\nimport { AlertDialogAction } from './AlertDialogAction'\nimport { AlertDialogBody } from './AlertDialogBody'\nimport { AlertDialogCancel } from './AlertDialogCancel'\nimport { AlertDialogContent } from './AlertDialogContent'\nimport { AlertDialogDescription } from './AlertDialogDescription'\nimport { AlertDialogFooter } from './AlertDialogFooter'\nimport { AlertDialogHeader } from './AlertDialogHeader'\nimport { AlertDialogOverlay } from './AlertDialogOverlay'\nimport { AlertDialogPortal } from './AlertDialogPortal'\nimport { AlertDialogTitle } from './AlertDialogTitle'\nimport { AlertDialogTrigger } from './AlertDialogTrigger'\n\nexport * from './AlertDialog'\nexport { useAlertDialog } from './AlertDialogContext'\nexport { type AlertDialogActionProps } from './AlertDialogAction'\nexport { type AlertDialogBodyProps } from './AlertDialogBody'\nexport { type AlertDialogCancelProps } from './AlertDialogCancel'\nexport { type AlertDialogContentProps } from './AlertDialogContent'\nexport { type AlertDialogDescriptionProps } from './AlertDialogDescription'\nexport { type AlertDialogFooterProps } from './AlertDialogFooter'\nexport { type AlertDialogHeaderProps } from './AlertDialogHeader'\nexport { type AlertDialogOverlayProps } from './AlertDialogOverlay'\nexport { type AlertDialogPortalProps } from './AlertDialogPortal'\nexport { type AlertDialogTitleProps } from './AlertDialogTitle'\nexport { type AlertDialogTriggerProps } from './AlertDialogTrigger'\n\n/**\n * A modal dialog that interrupts the user with important content and requires a response.\n */\nexport const AlertDialog: typeof Root & {\n  Action: typeof AlertDialogAction\n  Body: typeof AlertDialogBody\n  Cancel: typeof AlertDialogCancel\n  Content: typeof AlertDialogContent\n  Description: typeof AlertDialogDescription\n  Footer: typeof AlertDialogFooter\n  Header: typeof AlertDialogHeader\n  Overlay: typeof AlertDialogOverlay\n  Portal: typeof AlertDialogPortal\n  Title: typeof AlertDialogTitle\n  Trigger: typeof AlertDialogTrigger\n} = Object.assign(Root, {\n  Action: AlertDialogAction,\n  Body: AlertDialogBody,\n  Cancel: AlertDialogCancel,\n  Content: AlertDialogContent,\n  Description: AlertDialogDescription,\n  Footer: AlertDialogFooter,\n  Header: AlertDialogHeader,\n  Overlay: AlertDialogOverlay,\n  Portal: AlertDialogPortal,\n  Title: AlertDialogTitle,\n  Trigger: AlertDialogTrigger,\n})\n\nAlertDialog.displayName = 'AlertDialog'\nAlertDialog.Action.displayName = 'AlertDialog.Action'\nAlertDialog.Body.displayName = 'AlertDialog.Body'\nAlertDialog.Cancel.displayName = 'AlertDialog.Cancel'\nAlertDialog.Content.displayName = 'AlertDialog.Content'\nAlertDialog.Description.displayName = 'AlertDialog.Description'\nAlertDialog.Footer.displayName = 'AlertDialog.Footer'\nAlertDialog.Header.displayName = 'AlertDialog.Header'\nAlertDialog.Overlay.displayName = 'AlertDialog.Overlay'\nAlertDialog.Portal.displayName = 'AlertDialog.Portal'\nAlertDialog.Title.displayName = 'AlertDialog.Title'\nAlertDialog.Trigger.displayName = 'AlertDialog.Trigger'\n"],"mappings":"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"}

package/dist/avatar/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../chunk-C91j1N6u.js`),t=require(`../slot/index.js`),n=require(`../icon-CRPcdgYp.js`),r=require(`../icon-button-CYz_Fitz.js`);let i=require(`class-variance-authority`),a=require(`react`);a=e.t(a);let o=require(`react/jsx-runtime`),s=require(`@spark-ui/icons/PenOutline`);var c=a.createContext(void 0),l=()=>{let e=a.useContext(c);if(!e)throw Error(`useAvatarContext must be used within an Avatar component`);return e},u={xs:24,sm:32,md:40,lg:56,xl:64,"2xl":96},d=a.forwardRef(({className:e,size:n=`xl`,isOnline:r=!1,onlineText:s,username:l,asChild:d,children:f,shape:p=`circle`,...m},h)=>{let g=d?t.Slot:`div`,_=a.useMemo(()=>({size:n,isOnline:r,onlineText:s,username:l,shape:p,pixelSize:u[n]}),[n,r,l,p,s]);return(0,o.jsx)(c.Provider,{value:_,children:(0,o.jsx)(g,{ref:h,style:{width:u[n],height:u[n]},"data-spark-component":`avatar`,className:(0,i.cx)(`relative inline-flex items-center justify-center`,e),...m,children:f})})});d.displayName=`Avatar`;var f=({className:e,children:a,asChild:c,angle:u=135,ariaLabel:d,...f})=>{let p=c?t.Slot:r.t,{pixelSize:m,shape:h}=l();function g(e){let t=(90-u)*Math.PI/180,n=e/2;return{x:n+n*Math.cos(t),y:n-n*Math.sin(t)}}let _=g(m),v=c;return(0,o.jsx)(p,{"data-spark-component":`avatar-action`,style:{position:`absolute`,...h===`circle`?{left:`${_.x}px`,top:`${_.y}px`}:{},...h===`square`?{right:`0px`,bottom:`0px`}:{}},className:(0,i.cx)(`z-raised`,h===`circle`?`-translate-x-1/2 -translate-y-1/2`:`translate-x-1/4 translate-y-1/4`,{"shadow-sm":!v},e),"aria-label":d,title:d,...v?{}:{size:`sm`,intent:`support`,design:`contrast`},...f,children:a||(0,o.jsx)(n.t,{size:`sm`,children:(0,o.jsx)(s.PenOutline,{})})})};f.displayName=`AvatarAction`;var p=({className:e,asChild:n,src:r,onLoad:s,onError:c,...u})=>{let{username:d,isOnline:f,onlineText:p}=l(),m=n?t.Slot:`img`,[h,g]=(0,a.useState)(!1),_=f&&p?`${d} (${p})`:d;if((0,a.useEffect)(()=>{g(!1)},[r]),!r)return null;let v=e=>{g(!0),s?.(e)},y=e=>{g(!1),c?.(e)};return(0,o.jsx)(m,{"aria-hidden":!0,className:(0,i.cx)(`absolute inset-0 size-full`,`object-cover`,{"transition-all duration-300 group-hover:scale-120":u.onClick},`focus-visible:u-outline`,h?`block`:`hidden`,e),alt:_,src:r,onLoad:v,onError:y,...u})};p.displayName=`AvatarImage`;var m=({angle:e=135,...t})=>{let{isOnline:n,pixelSize:r,shape:a,onlineText:s,size:c}=l();if(!n)return null;function u(t){let n=(90-e)*Math.PI/180,r=t/2;return{x:r+r*Math.cos(n),y:r-r*Math.sin(n)}}let d=u(r);return(0,o.jsx)(`div`,{"data-spark-component":`avatar-online-badge`,role:`status`,"aria-label":s,style:{...a===`circle`?{left:`${d.x}px`,top:`${d.y}px`}:{right:`0px`,bottom:`0px`}},className:(0,i.cx)(`bg-success outline-surface absolute rounded-full`,a===`circle`?`-translate-x-1/2 -translate-y-1/2`:`translate-x-1/4 translate-y-1/4`,[`lg`,`xl`,`2xl`].includes(c)?(0,i.cx)(`size-sz-12 outline-4`):(0,i.cx)(`size-sz-8 outline-2`)),...t})};m.displayName=`AvatarOnlineBadge`;var h=({className:e,children:t,...n})=>{let{size:r,username:a}=l(),s=a?.charAt(0);return(0,o.jsx)(`div`,{"aria-hidden":!0,className:(0,i.cx)(`absolute inset-0 flex size-full items-center justify-center`,`default:bg-neutral default:text-on-neutral`,{"text-display-1":r===`2xl`,"text-display-2":[`xl`,`lg`].includes(r),"text-display-3":r===`md`,"text-headline-2":r===`sm`,"text-body-2 font-bold":r===`xs`},e),...n,children:t||s})};h.displayName=`AvatarPlaceholder`;var g=({asChild:e,children:n,className:r,...a})=>{let{shape:s,isOnline:c,onlineText:u,username:d}=l(),f=e?t.Slot:`div`,p=c&&u?`${d} (${u})`:d;return(0,o.jsx)(f,{...!e&&{role:`img`},"aria-label":p,title:p,className:(0,i.cx)(`group default:border-outline relative size-full overflow-hidden`,`focus-visible:u-outline`,{"default:rounded-full":s===`circle`,"default:rounded-md":s===`square`,"hover:opacity-dim-1 cursor-pointer":e||a.onClick},r),...a,children:n})};g.displayName=`AvatarUser`;var _=d;_.Image=p,_.Action=f,_.OnlineBadge=m,_.User=g,_.Placeholder=h,exports.Avatar=_;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../chunk-C91j1N6u.js`),t=require(`../slot/index.js`),n=require(`../icon-CRPcdgYp.js`),r=require(`../icon-button-CYz_Fitz.js`);let i=require(`class-variance-authority`),a=require(`react`);a=e.t(a);let o=require(`react/jsx-runtime`),s=require(`@spark-ui/icons/PenOutline`);var c=a.createContext(void 0),l=()=>{let e=a.useContext(c);if(!e)throw Error(`useAvatarContext must be used within an Avatar component`);return e},u={xs:24,sm:32,md:40,lg:56,xl:64,"2xl":96},d=a.forwardRef(({className:e,size:n=`xl`,isOnline:r=!1,onlineText:s,username:l,asChild:d,children:f,shape:p=`circle`,...m},h)=>{let g=d?t.Slot:`div`,_=a.useMemo(()=>({size:n,isOnline:r,onlineText:s,username:l,shape:p,pixelSize:u[n]}),[n,r,l,p,s]);return(0,o.jsx)(c.Provider,{value:_,children:(0,o.jsx)(g,{ref:h,style:{width:u[n],height:u[n]},"data-spark-component":`avatar`,className:(0,i.cx)(`relative inline-flex items-center justify-center`,e),...m,children:f})})});d.displayName=`Avatar`;var f=({className:e,children:a,asChild:c,angle:u=135,ariaLabel:d,...f})=>{let p=c?t.Slot:r.t,{pixelSize:m,shape:h}=l();function g(e){let t=(90-u)*Math.PI/180,n=e/2;return{x:n+n*Math.cos(t),y:n-n*Math.sin(t)}}let _=g(m),v=c;return(0,o.jsx)(p,{"data-spark-component":`avatar-action`,style:{position:`absolute`,...h===`circle`?{left:`${_.x}px`,top:`${_.y}px`}:{},...h===`square`?{right:`0px`,bottom:`0px`}:{}},className:(0,i.cx)(`z-raised`,h===`circle`?`-translate-x-1/2 -translate-y-1/2`:`translate-x-1/4 translate-y-1/4`,{"shadow-sm":!v},e),"aria-label":d,title:d,...v?{}:{size:`sm`,intent:`support`,design:`contrast`},...f,children:a||(0,o.jsx)(n.t,{size:`sm`,children:(0,o.jsx)(s.PenOutline,{})})})};f.displayName=`AvatarAction`;var p=({className:e,asChild:n,src:r,onLoad:s,onError:c,...u})=>{let{username:d,isOnline:f,onlineText:p}=l(),m=n?t.Slot:`img`,[h,g]=(0,a.useState)(!1),_=f&&p?`${d} (${p})`:d;if((0,a.useEffect)(()=>{g(!1)},[r]),!r)return null;let v=e=>{g(!0),s?.(e)},y=e=>{g(!1),c?.(e)};return(0,o.jsx)(m,{"aria-hidden":!0,className:(0,i.cx)(`absolute inset-0 size-full`,`object-cover`,{"transition-all duration-300 group-hover:scale-120":u.onClick},`focus-visible:u-outline`,h?`block`:`hidden`,e),alt:_,src:r,onLoad:v,onError:y,...u})};p.displayName=`AvatarImage`;var m=({angle:e=135,...t})=>{let{isOnline:n,pixelSize:r,shape:a,onlineText:s,size:c}=l();if(!n)return null;function u(t){let n=(90-e)*Math.PI/180,r=t/2;return{x:r+r*Math.cos(n),y:r-r*Math.sin(n)}}let d=u(r);return(0,o.jsx)(`div`,{"data-spark-component":`avatar-online-badge`,role:`status`,"aria-label":s,style:{...a===`circle`?{left:`${d.x}px`,top:`${d.y}px`}:{right:`0px`,bottom:`0px`}},className:(0,i.cx)(`bg-success outline-surface absolute rounded-full`,a===`circle`?`-translate-x-1/2 -translate-y-1/2`:`translate-x-1/4 translate-y-1/4`,[`lg`,`xl`,`2xl`].includes(c)?(0,i.cx)(`size-sz-12 outline-4`):(0,i.cx)(`size-sz-8 outline-2`)),...t})};m.displayName=`AvatarOnlineBadge`;var h=({className:e,children:t,...n})=>{let{size:r,username:a}=l(),s=a?.charAt(0);return(0,o.jsx)(`div`,{"aria-hidden":!0,className:(0,i.cx)(`absolute inset-0 flex size-full items-center justify-center`,`default:bg-neutral default:text-on-neutral`,{"text-display-1":r===`2xl`,"text-display-2":[`xl`,`lg`].includes(r),"text-display-3":r===`md`,"text-headline-2":r===`sm`,"text-body-2 font-bold":r===`xs`},e),...n,children:t||s})};h.displayName=`AvatarPlaceholder`;var g=({asChild:e,children:n,className:r,...a})=>{let{shape:s,isOnline:c,onlineText:u,username:d}=l(),f=e?t.Slot:`div`,p=c&&u?`${d} (${u})`:d;return(0,o.jsx)(f,{...!e&&{role:`img`},"aria-label":p,title:p,className:(0,i.cx)(`group default:border-outline relative size-full overflow-hidden`,`focus-visible:u-outline`,{"default:rounded-full":s===`circle`,"default:rounded-md":s===`square`,"hover:opacity-dim-1 cursor-pointer":e||a.onClick},r),...a,children:n})};g.displayName=`AvatarUser`;var _=Object.assign(d,{Image:p,Action:f,OnlineBadge:m,User:g,Placeholder:h});_.displayName=`Avatar`,p.displayName=`Avatar.Image`,f.displayName=`Avatar.Action`,m.displayName=`Avatar.OnlineBadge`,g.displayName=`Avatar.User`,h.displayName=`Avatar.Placeholder`,exports.Avatar=_;
 //# sourceMappingURL=index.js.map

package/dist/avatar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/avatar/context.ts","../../src/avatar/Avatar.tsx","../../src/avatar/AvatarAction.tsx","../../src/avatar/AvatarImage.tsx","../../src/avatar/AvatarOnlineBadge.tsx","../../src/avatar/AvatarPlaceholder.tsx","../../src/avatar/AvatarUser.tsx","../../src/avatar/index.ts"],"sourcesContent":["import * as React from 'react'\n\nimport type { AvatarContextValue } from './types'\n\nconst AvatarContext = React.createContext<AvatarContextValue | undefined>(undefined)\n\nexport const useAvatarContext = () => {\n  const context = React.useContext(AvatarContext)\n  if (!context) {\n    throw new Error('useAvatarContext must be used within an Avatar component')\n  }\n  return context\n}\n\nexport { AvatarContext }\n","import { cx } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { Slot } from '../slot'\nimport { AvatarContext } from './context'\nimport type { AvatarProps } from './types'\n\nconst sizeMap = {\n  xs: 24,\n  sm: 32,\n  md: 40,\n  lg: 56,\n  xl: 64, // default\n  '2xl': 96,\n}\n\nexport const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(\n  (\n    {\n      className,\n      size = 'xl',\n      isOnline = false,\n      onlineText,\n      username,\n      asChild,\n      children,\n      shape = 'circle',\n      ...props\n    },\n    ref\n  ) => {\n    const Comp = asChild ? Slot : 'div'\n    const contextValue = React.useMemo(\n      () => ({\n        size,\n        isOnline,\n        onlineText,\n        username,\n        shape,\n        pixelSize: sizeMap[size],\n      }),\n      [size, isOnline, username, shape, onlineText]\n    )\n\n    return (\n      <AvatarContext.Provider value={contextValue}>\n        <Comp\n          ref={ref}\n          style={{\n            width: sizeMap[size],\n            height: sizeMap[size],\n          }}\n          data-spark-component=\"avatar\"\n          className={cx('relative inline-flex items-center justify-center', className)}\n          {...props}\n        >\n          {children}\n        </Comp>\n      </AvatarContext.Provider>\n    )\n  }\n)\n\nAvatar.displayName = 'Avatar'\n","import { PenOutline } from '@spark-ui/icons/PenOutline'\nimport { cx } from 'class-variance-authority'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { Slot } from '../slot'\nimport { useAvatarContext } from './context'\n\nexport interface AvatarActionProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  asChild?: boolean\n  angle?: number\n  ariaLabel: string\n}\n\nexport const AvatarAction = ({\n  className,\n  children,\n  asChild,\n  angle = 135,\n  ariaLabel,\n  ...props\n}: AvatarActionProps) => {\n  const Comp = asChild ? Slot : IconButton\n  const { pixelSize, shape } = useAvatarContext()\n\n  function getBadgePosition(circleSize: number) {\n    const angleRad = ((90 - angle) * Math.PI) / 180\n    const circleRadius = circleSize / 2\n\n    return {\n      x: circleRadius + circleRadius * Math.cos(angleRad),\n      y: circleRadius - circleRadius * Math.sin(angleRad),\n    }\n  }\n\n  const position = getBadgePosition(pixelSize)\n\n  const isCustomElement = asChild\n\n  return (\n    <Comp\n      data-spark-component=\"avatar-action\"\n      style={{\n        position: 'absolute',\n        ...(shape === 'circle' ? { left: `${position.x}px`, top: `${position.y}px` } : {}),\n        ...(shape === 'square' ? { right: '0px', bottom: '0px' } : {}),\n      }}\n      className={cx(\n        'z-raised',\n        shape === 'circle'\n          ? '-translate-x-1/2 -translate-y-1/2'\n          : 'translate-x-1/4 translate-y-1/4',\n        { 'shadow-sm': !isCustomElement },\n        className\n      )}\n      aria-label={ariaLabel}\n      title={ariaLabel}\n      {...(!isCustomElement ? { size: 'sm', intent: 'support', design: 'contrast' } : {})}\n      {...props}\n    >\n      {children || (\n        <Icon size=\"sm\">\n          <PenOutline />\n        </Icon>\n      )}\n    </Comp>\n  )\n}\n\nAvatarAction.displayName = 'AvatarAction'\n","import { cx } from 'class-variance-authority'\nimport { useEffect, useState } from 'react'\n\nimport { Slot } from '../slot'\nimport { useAvatarContext } from './context'\n\nexport interface AvatarImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n  asChild?: boolean\n}\n\nexport const AvatarImage = ({\n  className,\n  asChild,\n  src,\n  onLoad,\n  onError,\n  ...props\n}: AvatarImageProps) => {\n  const { username, isOnline, onlineText } = useAvatarContext()\n  const Comp = asChild ? Slot : 'img'\n\n  const [isVisible, setIsVisible] = useState(false)\n\n  const accessibleName = isOnline && onlineText ? `${username} (${onlineText})` : username\n\n  // Reset visibility when src changes\n  useEffect(() => {\n    setIsVisible(false)\n  }, [src])\n\n  // Don't render the image if src is undefined or null\n  if (!src) {\n    return null\n  }\n\n  const handleLoad = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {\n    setIsVisible(true)\n    onLoad?.(event)\n  }\n\n  const handleError = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {\n    setIsVisible(false)\n    onError?.(event)\n  }\n\n  return (\n    <Comp\n      aria-hidden\n      className={cx(\n        'absolute inset-0 size-full',\n        'object-cover',\n        { 'transition-all duration-300 group-hover:scale-120': props.onClick },\n        'focus-visible:u-outline',\n        isVisible ? 'block' : 'hidden',\n        className\n      )}\n      alt={accessibleName}\n      src={src}\n      onLoad={handleLoad}\n      onError={handleError}\n      {...props}\n    />\n  )\n}\n\nAvatarImage.displayName = 'AvatarImage'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef } from 'react'\n\nimport { useAvatarContext } from './context'\n\ninterface AvatarOnlineBadgeProps extends ComponentPropsWithoutRef<'div'> {\n  angle?: number\n}\n\nexport const AvatarOnlineBadge = ({ angle = 135, ...props }: AvatarOnlineBadgeProps) => {\n  const { isOnline, pixelSize, shape, onlineText, size } = useAvatarContext()\n\n  if (!isOnline) return null\n\n  function getBadgePosition(circleSize: number) {\n    const angleRad = ((90 - angle) * Math.PI) / 180\n    const circleRadius = circleSize / 2\n\n    return {\n      x: circleRadius + circleRadius * Math.cos(angleRad),\n      y: circleRadius - circleRadius * Math.sin(angleRad),\n    }\n  }\n\n  const badgePosition = getBadgePosition(pixelSize)\n\n  return (\n    <div\n      data-spark-component=\"avatar-online-badge\"\n      role=\"status\"\n      aria-label={onlineText}\n      style={{\n        ...(shape === 'circle'\n          ? { left: `${badgePosition.x}px`, top: `${badgePosition.y}px` }\n          : { right: '0px', bottom: '0px' }),\n      }}\n      className={cx(\n        'bg-success outline-surface absolute rounded-full',\n        shape === 'circle'\n          ? '-translate-x-1/2 -translate-y-1/2'\n          : 'translate-x-1/4 translate-y-1/4',\n        ['lg', 'xl', '2xl'].includes(size) ? cx('size-sz-12 outline-4') : cx('size-sz-8 outline-2')\n      )}\n      {...props}\n    />\n  )\n}\n\nAvatarOnlineBadge.displayName = 'AvatarOnlineBadge'\n","import { cx } from 'class-variance-authority'\n\nimport { useAvatarContext } from './context'\n\nexport interface AvatarPlaceholderProps extends React.ImgHTMLAttributes<HTMLDivElement> {\n  className?: string\n  children?: React.ReactNode\n}\n\nexport const AvatarPlaceholder = ({ className, children, ...props }: AvatarPlaceholderProps) => {\n  const { size, username } = useAvatarContext()\n\n  const firstLetter = username?.charAt(0)\n\n  return (\n    <div\n      aria-hidden\n      className={cx(\n        'absolute inset-0 flex size-full items-center justify-center',\n        'default:bg-neutral default:text-on-neutral',\n        {\n          'text-display-1': size === '2xl',\n          'text-display-2': ['xl', 'lg'].includes(size),\n          'text-display-3': size === 'md',\n          'text-headline-2': size === 'sm',\n          'text-body-2 font-bold': size === 'xs',\n        },\n        className\n      )}\n      {...props}\n    >\n      {children || firstLetter}\n    </div>\n  )\n}\n\nAvatarPlaceholder.displayName = 'AvatarPlaceholder'\n","import { cx } from 'class-variance-authority'\n\nimport { Slot } from '../slot'\nimport { useAvatarContext } from './context'\n\nexport interface AvatarImageProps extends React.ImgHTMLAttributes<HTMLDivElement> {\n  asChild?: boolean\n}\n\nexport const AvatarUser = ({ asChild, children, className, ...props }: AvatarImageProps) => {\n  const { shape, isOnline, onlineText, username } = useAvatarContext()\n  const Comp = asChild ? Slot : 'div'\n\n  const accessibleName = isOnline && onlineText ? `${username} (${onlineText})` : username\n\n  return (\n    <Comp\n      {...(!asChild && { role: 'img' })}\n      aria-label={accessibleName}\n      title={accessibleName}\n      className={cx(\n        'group default:border-outline relative size-full overflow-hidden',\n        'focus-visible:u-outline',\n        {\n          'default:rounded-full': shape === 'circle',\n          'default:rounded-md': shape === 'square',\n          'hover:opacity-dim-1 cursor-pointer': asChild || props.onClick,\n        },\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </Comp>\n  )\n}\n\nAvatarUser.displayName = 'AvatarUser'\n","import { Avatar } from './Avatar'\nimport { AvatarAction } from './AvatarAction'\nimport { AvatarImage } from './AvatarImage'\nimport { AvatarOnlineBadge } from './AvatarOnlineBadge'\nimport { AvatarPlaceholder } from './AvatarPlaceholder'\nimport { AvatarUser } from './AvatarUser'\nimport type { AvatarProps } from './types'\n\nexport interface AvatarComponent extends React.ForwardRefExoticComponent<\n  AvatarProps & React.RefAttributes<HTMLDivElement>\n> {\n  Image: typeof AvatarImage\n  Action: typeof AvatarAction\n  OnlineBadge: typeof AvatarOnlineBadge\n  User: typeof AvatarUser\n  Placeholder: typeof AvatarPlaceholder\n}\n\nconst AvatarComponent = Avatar as AvatarComponent\n\nAvatarComponent.Image = AvatarImage\nAvatarComponent.Action = AvatarAction\nAvatarComponent.OnlineBadge = AvatarOnlineBadge\nAvatarComponent.User = AvatarUser\nAvatarComponent.Placeholder = AvatarPlaceholder\nexport { AvatarComponent as Avatar }\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/avatar/context.ts","../../src/avatar/Avatar.tsx","../../src/avatar/AvatarAction.tsx","../../src/avatar/AvatarImage.tsx","../../src/avatar/AvatarOnlineBadge.tsx","../../src/avatar/AvatarPlaceholder.tsx","../../src/avatar/AvatarUser.tsx","../../src/avatar/index.ts"],"sourcesContent":["import * as React from 'react'\n\nimport type { AvatarContextValue } from './types'\n\nconst AvatarContext = React.createContext<AvatarContextValue | undefined>(undefined)\n\nexport const useAvatarContext = () => {\n  const context = React.useContext(AvatarContext)\n  if (!context) {\n    throw new Error('useAvatarContext must be used within an Avatar component')\n  }\n  return context\n}\n\nexport { AvatarContext }\n","import { cx } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { Slot } from '../slot'\nimport { AvatarContext } from './context'\nimport type { AvatarProps } from './types'\n\nconst sizeMap = {\n  xs: 24,\n  sm: 32,\n  md: 40,\n  lg: 56,\n  xl: 64, // default\n  '2xl': 96,\n}\n\nexport const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(\n  (\n    {\n      className,\n      size = 'xl',\n      isOnline = false,\n      onlineText,\n      username,\n      asChild,\n      children,\n      shape = 'circle',\n      ...props\n    },\n    ref\n  ) => {\n    const Comp = asChild ? Slot : 'div'\n    const contextValue = React.useMemo(\n      () => ({\n        size,\n        isOnline,\n        onlineText,\n        username,\n        shape,\n        pixelSize: sizeMap[size],\n      }),\n      [size, isOnline, username, shape, onlineText]\n    )\n\n    return (\n      <AvatarContext.Provider value={contextValue}>\n        <Comp\n          ref={ref}\n          style={{\n            width: sizeMap[size],\n            height: sizeMap[size],\n          }}\n          data-spark-component=\"avatar\"\n          className={cx('relative inline-flex items-center justify-center', className)}\n          {...props}\n        >\n          {children}\n        </Comp>\n      </AvatarContext.Provider>\n    )\n  }\n)\n\nAvatar.displayName = 'Avatar'\n","import { PenOutline } from '@spark-ui/icons/PenOutline'\nimport { cx } from 'class-variance-authority'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { Slot } from '../slot'\nimport { useAvatarContext } from './context'\n\nexport interface AvatarActionProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  asChild?: boolean\n  angle?: number\n  ariaLabel: string\n}\n\nexport const AvatarAction = ({\n  className,\n  children,\n  asChild,\n  angle = 135,\n  ariaLabel,\n  ...props\n}: AvatarActionProps) => {\n  const Comp = asChild ? Slot : IconButton\n  const { pixelSize, shape } = useAvatarContext()\n\n  function getBadgePosition(circleSize: number) {\n    const angleRad = ((90 - angle) * Math.PI) / 180\n    const circleRadius = circleSize / 2\n\n    return {\n      x: circleRadius + circleRadius * Math.cos(angleRad),\n      y: circleRadius - circleRadius * Math.sin(angleRad),\n    }\n  }\n\n  const position = getBadgePosition(pixelSize)\n\n  const isCustomElement = asChild\n\n  return (\n    <Comp\n      data-spark-component=\"avatar-action\"\n      style={{\n        position: 'absolute',\n        ...(shape === 'circle' ? { left: `${position.x}px`, top: `${position.y}px` } : {}),\n        ...(shape === 'square' ? { right: '0px', bottom: '0px' } : {}),\n      }}\n      className={cx(\n        'z-raised',\n        shape === 'circle'\n          ? '-translate-x-1/2 -translate-y-1/2'\n          : 'translate-x-1/4 translate-y-1/4',\n        { 'shadow-sm': !isCustomElement },\n        className\n      )}\n      aria-label={ariaLabel}\n      title={ariaLabel}\n      {...(!isCustomElement ? { size: 'sm', intent: 'support', design: 'contrast' } : {})}\n      {...props}\n    >\n      {children || (\n        <Icon size=\"sm\">\n          <PenOutline />\n        </Icon>\n      )}\n    </Comp>\n  )\n}\n\nAvatarAction.displayName = 'AvatarAction'\n","import { cx } from 'class-variance-authority'\nimport { useEffect, useState } from 'react'\n\nimport { Slot } from '../slot'\nimport { useAvatarContext } from './context'\n\nexport interface AvatarImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n  asChild?: boolean\n}\n\nexport const AvatarImage = ({\n  className,\n  asChild,\n  src,\n  onLoad,\n  onError,\n  ...props\n}: AvatarImageProps) => {\n  const { username, isOnline, onlineText } = useAvatarContext()\n  const Comp = asChild ? Slot : 'img'\n\n  const [isVisible, setIsVisible] = useState(false)\n\n  const accessibleName = isOnline && onlineText ? `${username} (${onlineText})` : username\n\n  // Reset visibility when src changes\n  useEffect(() => {\n    setIsVisible(false)\n  }, [src])\n\n  // Don't render the image if src is undefined or null\n  if (!src) {\n    return null\n  }\n\n  const handleLoad = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {\n    setIsVisible(true)\n    onLoad?.(event)\n  }\n\n  const handleError = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {\n    setIsVisible(false)\n    onError?.(event)\n  }\n\n  return (\n    <Comp\n      aria-hidden\n      className={cx(\n        'absolute inset-0 size-full',\n        'object-cover',\n        { 'transition-all duration-300 group-hover:scale-120': props.onClick },\n        'focus-visible:u-outline',\n        isVisible ? 'block' : 'hidden',\n        className\n      )}\n      alt={accessibleName}\n      src={src}\n      onLoad={handleLoad}\n      onError={handleError}\n      {...props}\n    />\n  )\n}\n\nAvatarImage.displayName = 'AvatarImage'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef } from 'react'\n\nimport { useAvatarContext } from './context'\n\ninterface AvatarOnlineBadgeProps extends ComponentPropsWithoutRef<'div'> {\n  angle?: number\n}\n\nexport const AvatarOnlineBadge = ({ angle = 135, ...props }: AvatarOnlineBadgeProps) => {\n  const { isOnline, pixelSize, shape, onlineText, size } = useAvatarContext()\n\n  if (!isOnline) return null\n\n  function getBadgePosition(circleSize: number) {\n    const angleRad = ((90 - angle) * Math.PI) / 180\n    const circleRadius = circleSize / 2\n\n    return {\n      x: circleRadius + circleRadius * Math.cos(angleRad),\n      y: circleRadius - circleRadius * Math.sin(angleRad),\n    }\n  }\n\n  const badgePosition = getBadgePosition(pixelSize)\n\n  return (\n    <div\n      data-spark-component=\"avatar-online-badge\"\n      role=\"status\"\n      aria-label={onlineText}\n      style={{\n        ...(shape === 'circle'\n          ? { left: `${badgePosition.x}px`, top: `${badgePosition.y}px` }\n          : { right: '0px', bottom: '0px' }),\n      }}\n      className={cx(\n        'bg-success outline-surface absolute rounded-full',\n        shape === 'circle'\n          ? '-translate-x-1/2 -translate-y-1/2'\n          : 'translate-x-1/4 translate-y-1/4',\n        ['lg', 'xl', '2xl'].includes(size) ? cx('size-sz-12 outline-4') : cx('size-sz-8 outline-2')\n      )}\n      {...props}\n    />\n  )\n}\n\nAvatarOnlineBadge.displayName = 'AvatarOnlineBadge'\n","import { cx } from 'class-variance-authority'\n\nimport { useAvatarContext } from './context'\n\nexport interface AvatarPlaceholderProps extends React.ImgHTMLAttributes<HTMLDivElement> {\n  className?: string\n  children?: React.ReactNode\n}\n\nexport const AvatarPlaceholder = ({ className, children, ...props }: AvatarPlaceholderProps) => {\n  const { size, username } = useAvatarContext()\n\n  const firstLetter = username?.charAt(0)\n\n  return (\n    <div\n      aria-hidden\n      className={cx(\n        'absolute inset-0 flex size-full items-center justify-center',\n        'default:bg-neutral default:text-on-neutral',\n        {\n          'text-display-1': size === '2xl',\n          'text-display-2': ['xl', 'lg'].includes(size),\n          'text-display-3': size === 'md',\n          'text-headline-2': size === 'sm',\n          'text-body-2 font-bold': size === 'xs',\n        },\n        className\n      )}\n      {...props}\n    >\n      {children || firstLetter}\n    </div>\n  )\n}\n\nAvatarPlaceholder.displayName = 'AvatarPlaceholder'\n","import { cx } from 'class-variance-authority'\n\nimport { Slot } from '../slot'\nimport { useAvatarContext } from './context'\n\nexport interface AvatarImageProps extends React.ImgHTMLAttributes<HTMLDivElement> {\n  asChild?: boolean\n}\n\nexport const AvatarUser = ({ asChild, children, className, ...props }: AvatarImageProps) => {\n  const { shape, isOnline, onlineText, username } = useAvatarContext()\n  const Comp = asChild ? Slot : 'div'\n\n  const accessibleName = isOnline && onlineText ? `${username} (${onlineText})` : username\n\n  return (\n    <Comp\n      {...(!asChild && { role: 'img' })}\n      aria-label={accessibleName}\n      title={accessibleName}\n      className={cx(\n        'group default:border-outline relative size-full overflow-hidden',\n        'focus-visible:u-outline',\n        {\n          'default:rounded-full': shape === 'circle',\n          'default:rounded-md': shape === 'square',\n          'hover:opacity-dim-1 cursor-pointer': asChild || props.onClick,\n        },\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </Comp>\n  )\n}\n\nAvatarUser.displayName = 'AvatarUser'\n","import { Avatar as Root } from './Avatar'\nimport { AvatarAction } from './AvatarAction'\nimport { AvatarImage } from './AvatarImage'\nimport { AvatarOnlineBadge } from './AvatarOnlineBadge'\nimport { AvatarPlaceholder } from './AvatarPlaceholder'\nimport { AvatarUser } from './AvatarUser'\n\n/**\n * A graphical representation of a user, typically displaying an image, initials, or icon.\n */\nexport const Avatar: typeof Root & {\n  Image: typeof AvatarImage\n  Action: typeof AvatarAction\n  OnlineBadge: typeof AvatarOnlineBadge\n  User: typeof AvatarUser\n  Placeholder: typeof AvatarPlaceholder\n} = Object.assign(Root, {\n  Image: AvatarImage,\n  Action: AvatarAction,\n  OnlineBadge: AvatarOnlineBadge,\n  User: AvatarUser,\n  Placeholder: AvatarPlaceholder,\n})\n\nAvatar.displayName = 'Avatar'\nAvatarImage.displayName = 'Avatar.Image'\nAvatarAction.displayName = 'Avatar.Action'\nAvatarOnlineBadge.displayName = 'Avatar.OnlineBadge'\nAvatarUser.displayName = 'Avatar.User'\nAvatarPlaceholder.displayName = 'Avatar.Placeholder'\n\nexport type { AvatarProps } from './types'\n"],"mappings":"mWAIA,IAAM,EAAgB,EAAM,cAA8C,IAAA,GAAU,CAEvE,MAAyB,CACpC,IAAM,EAAU,EAAM,WAAW,EAAc,CAC/C,GAAI,CAAC,EACH,MAAU,MAAM,2DAA2D,CAE7E,OAAO,GCJH,EAAU,CACd,GAAI,GACJ,GAAI,GACJ,GAAI,GACJ,GAAI,GACJ,GAAI,GACJ,MAAO,GACR,CAEY,EAAS,EAAM,YAExB,CACE,YACA,OAAO,KACP,WAAW,GACX,aACA,WACA,UACA,WACA,QAAQ,SACR,GAAG,GAEL,IACG,CACH,IAAM,EAAO,EAAU,EAAA,KAAO,MACxB,EAAe,EAAM,aAClB,CACL,OACA,WACA,aACA,WACA,QACA,UAAW,EAAQ,GACpB,EACD,CAAC,EAAM,EAAU,EAAU,EAAO,EAAW,CAC9C,CAED,OACE,EAAA,EAAA,KAAC,EAAc,SAAf,CAAwB,MAAO,YAC7B,EAAA,EAAA,KAAC,EAAD,CACO,MACL,MAAO,CACL,MAAO,EAAQ,GACf,OAAQ,EAAQ,GACjB,CACD,uBAAqB,SACrB,WAAA,EAAA,EAAA,IAAc,mDAAoD,EAAU,CAC5E,GAAI,EAEH,WACI,CAAA,CACgB,CAAA,EAG9B,CAED,EAAO,YAAc,SCjDrB,IAAa,GAAgB,CAC3B,YACA,WACA,UACA,QAAQ,IACR,YACA,GAAG,KACoB,CACvB,IAAM,EAAO,EAAU,EAAA,KAAO,EAAA,EACxB,CAAE,YAAW,SAAU,GAAkB,CAE/C,SAAS,EAAiB,EAAoB,CAC5C,IAAM,GAAa,GAAK,GAAS,KAAK,GAAM,IACtC,EAAe,EAAa,EAElC,MAAO,CACL,EAAG,EAAe,EAAe,KAAK,IAAI,EAAS,CACnD,EAAG,EAAe,EAAe,KAAK,IAAI,EAAS,CACpD,CAGH,IAAM,EAAW,EAAiB,EAAU,CAEtC,EAAkB,EAExB,OACE,EAAA,EAAA,KAAC,EAAD,CACE,uBAAqB,gBACrB,MAAO,CACL,SAAU,WACV,GAAI,IAAU,SAAW,CAAE,KAAM,GAAG,EAAS,EAAE,IAAK,IAAK,GAAG,EAAS,EAAE,IAAK,CAAG,EAAE,CACjF,GAAI,IAAU,SAAW,CAAE,MAAO,MAAO,OAAQ,MAAO,CAAG,EAAE,CAC9D,CACD,WAAA,EAAA,EAAA,IACE,WACA,IAAU,SACN,oCACA,kCACJ,CAAE,YAAa,CAAC,EAAiB,CACjC,EACD,CACD,aAAY,EACZ,MAAO,EACP,GAAM,EAA0E,EAAE,CAA1D,CAAE,KAAM,KAAM,OAAQ,UAAW,OAAQ,WAAY,CAC7E,GAAI,WAEH,IACC,EAAA,EAAA,KAAC,EAAA,EAAD,CAAM,KAAK,eACT,EAAA,EAAA,KAAC,EAAA,WAAD,EAAc,CAAA,CACT,CAAA,CAEJ,CAAA,EAIX,EAAa,YAAc,eC3D3B,IAAa,GAAe,CAC1B,YACA,UACA,MACA,SACA,UACA,GAAG,KACmB,CACtB,GAAM,CAAE,WAAU,WAAU,cAAe,GAAkB,CACvD,EAAO,EAAU,EAAA,KAAO,MAExB,CAAC,EAAW,IAAA,EAAA,EAAA,UAAyB,GAAM,CAE3C,EAAiB,GAAY,EAAa,GAAG,EAAS,IAAI,EAAW,GAAK,EAQhF,IALA,EAAA,EAAA,eAAgB,CACd,EAAa,GAAM,EAClB,CAAC,EAAI,CAAC,CAGL,CAAC,EACH,OAAO,KAGT,IAAM,EAAc,GAAyD,CAC3E,EAAa,GAAK,CAClB,IAAS,EAAM,EAGX,EAAe,GAAyD,CAC5E,EAAa,GAAM,CACnB,IAAU,EAAM,EAGlB,OACE,EAAA,EAAA,KAAC,EAAD,CACE,cAAA,GACA,WAAA,EAAA,EAAA,IACE,6BACA,eACA,CAAE,oDAAqD,EAAM,QAAS,CACtE,0BACA,EAAY,QAAU,SACtB,EACD,CACD,IAAK,EACA,MACL,OAAQ,EACR,QAAS,EACT,GAAI,EACJ,CAAA,EAIN,EAAY,YAAc,cCxD1B,IAAa,GAAqB,CAAE,QAAQ,IAAK,GAAG,KAAoC,CACtF,GAAM,CAAE,WAAU,YAAW,QAAO,aAAY,QAAS,GAAkB,CAE3E,GAAI,CAAC,EAAU,OAAO,KAEtB,SAAS,EAAiB,EAAoB,CAC5C,IAAM,GAAa,GAAK,GAAS,KAAK,GAAM,IACtC,EAAe,EAAa,EAElC,MAAO,CACL,EAAG,EAAe,EAAe,KAAK,IAAI,EAAS,CACnD,EAAG,EAAe,EAAe,KAAK,IAAI,EAAS,CACpD,CAGH,IAAM,EAAgB,EAAiB,EAAU,CAEjD,OACE,EAAA,EAAA,KAAC,MAAD,CACE,uBAAqB,sBACrB,KAAK,SACL,aAAY,EACZ,MAAO,CACL,GAAI,IAAU,SACV,CAAE,KAAM,GAAG,EAAc,EAAE,IAAK,IAAK,GAAG,EAAc,EAAE,IAAK,CAC7D,CAAE,MAAO,MAAO,OAAQ,MAAO,CACpC,CACD,WAAA,EAAA,EAAA,IACE,mDACA,IAAU,SACN,oCACA,kCACJ,CAAC,KAAM,KAAM,MAAM,CAAC,SAAS,EAAK,EAAA,EAAA,EAAA,IAAM,uBAAuB,EAAA,EAAA,EAAA,IAAM,sBAAsB,CAC5F,CACD,GAAI,EACJ,CAAA,EAIN,EAAkB,YAAc,oBCvChC,IAAa,GAAqB,CAAE,YAAW,WAAU,GAAG,KAAoC,CAC9F,GAAM,CAAE,OAAM,YAAa,GAAkB,CAEvC,EAAc,GAAU,OAAO,EAAE,CAEvC,OACE,EAAA,EAAA,KAAC,MAAD,CACE,cAAA,GACA,WAAA,EAAA,EAAA,IACE,8DACA,6CACA,CACE,iBAAkB,IAAS,MAC3B,iBAAkB,CAAC,KAAM,KAAK,CAAC,SAAS,EAAK,CAC7C,iBAAkB,IAAS,KAC3B,kBAAmB,IAAS,KAC5B,wBAAyB,IAAS,KACnC,CACD,EACD,CACD,GAAI,WAEH,GAAY,EACT,CAAA,EAIV,EAAkB,YAAc,oBC3BhC,IAAa,GAAc,CAAE,UAAS,WAAU,YAAW,GAAG,KAA8B,CAC1F,GAAM,CAAE,QAAO,WAAU,aAAY,YAAa,GAAkB,CAC9D,EAAO,EAAU,EAAA,KAAO,MAExB,EAAiB,GAAY,EAAa,GAAG,EAAS,IAAI,EAAW,GAAK,EAEhF,OACE,EAAA,EAAA,KAAC,EAAD,CACE,GAAK,CAAC,GAAW,CAAE,KAAM,MAAO,CAChC,aAAY,EACZ,MAAO,EACP,WAAA,EAAA,EAAA,IACE,kEACA,0BACA,CACE,uBAAwB,IAAU,SAClC,qBAAsB,IAAU,SAChC,qCAAsC,GAAW,EAAM,QACxD,CACD,EACD,CACD,GAAI,EAEH,WACI,CAAA,EAIX,EAAW,YAAc,aC3BzB,IAAa,EAMT,OAAO,OAAO,EAAM,CACtB,MAAO,EACP,OAAQ,EACR,YAAa,EACb,KAAM,EACN,YAAa,EACd,CAAC,CAEF,EAAO,YAAc,SACrB,EAAY,YAAc,eAC1B,EAAa,YAAc,gBAC3B,EAAkB,YAAc,qBAChC,EAAW,YAAc,cACzB,EAAkB,YAAc"}

package/dist/avatar/index.mjs

@@ -184,8 +184,14 @@ var _ = ({ asChild: t, children: n, className: i, ...a }) => {
 _.displayName = "AvatarUser";
 //#endregion
 //#region src/avatar/index.ts
-var v = f;
-v.Image = m, v.Action = p, v.OnlineBadge = h, v.User = _, v.Placeholder = g;
+var v = Object.assign(f, {
+	Image: m,
+	Action: p,
+	OnlineBadge: h,
+	User: _,
+	Placeholder: g
+});
+v.displayName = "Avatar", m.displayName = "Avatar.Image", p.displayName = "Avatar.Action", h.displayName = "Avatar.OnlineBadge", _.displayName = "Avatar.User", g.displayName = "Avatar.Placeholder";
 //#endregion
 export { v as Avatar };
 

package/dist/avatar/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/avatar/context.ts","../../src/avatar/Avatar.tsx","../../src/avatar/AvatarAction.tsx","../../src/avatar/AvatarImage.tsx","../../src/avatar/AvatarOnlineBadge.tsx","../../src/avatar/AvatarPlaceholder.tsx","../../src/avatar/AvatarUser.tsx","../../src/avatar/index.ts"],"sourcesContent":["import * as React from 'react'\n\nimport type { AvatarContextValue } from './types'\n\nconst AvatarContext = React.createContext<AvatarContextValue | undefined>(undefined)\n\nexport const useAvatarContext = () => {\n  const context = React.useContext(AvatarContext)\n  if (!context) {\n    throw new Error('useAvatarContext must be used within an Avatar component')\n  }\n  return context\n}\n\nexport { AvatarContext }\n","import { cx } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { Slot } from '../slot'\nimport { AvatarContext } from './context'\nimport type { AvatarProps } from './types'\n\nconst sizeMap = {\n  xs: 24,\n  sm: 32,\n  md: 40,\n  lg: 56,\n  xl: 64, // default\n  '2xl': 96,\n}\n\nexport const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(\n  (\n    {\n      className,\n      size = 'xl',\n      isOnline = false,\n      onlineText,\n      username,\n      asChild,\n      children,\n      shape = 'circle',\n      ...props\n    },\n    ref\n  ) => {\n    const Comp = asChild ? Slot : 'div'\n    const contextValue = React.useMemo(\n      () => ({\n        size,\n        isOnline,\n        onlineText,\n        username,\n        shape,\n        pixelSize: sizeMap[size],\n      }),\n      [size, isOnline, username, shape, onlineText]\n    )\n\n    return (\n      <AvatarContext.Provider value={contextValue}>\n        <Comp\n          ref={ref}\n          style={{\n            width: sizeMap[size],\n            height: sizeMap[size],\n          }}\n          data-spark-component=\"avatar\"\n          className={cx('relative inline-flex items-center justify-center', className)}\n          {...props}\n        >\n          {children}\n        </Comp>\n      </AvatarContext.Provider>\n    )\n  }\n)\n\nAvatar.displayName = 'Avatar'\n","import { PenOutline } from '@spark-ui/icons/PenOutline'\nimport { cx } from 'class-variance-authority'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { Slot } from '../slot'\nimport { useAvatarContext } from './context'\n\nexport interface AvatarActionProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  asChild?: boolean\n  angle?: number\n  ariaLabel: string\n}\n\nexport const AvatarAction = ({\n  className,\n  children,\n  asChild,\n  angle = 135,\n  ariaLabel,\n  ...props\n}: AvatarActionProps) => {\n  const Comp = asChild ? Slot : IconButton\n  const { pixelSize, shape } = useAvatarContext()\n\n  function getBadgePosition(circleSize: number) {\n    const angleRad = ((90 - angle) * Math.PI) / 180\n    const circleRadius = circleSize / 2\n\n    return {\n      x: circleRadius + circleRadius * Math.cos(angleRad),\n      y: circleRadius - circleRadius * Math.sin(angleRad),\n    }\n  }\n\n  const position = getBadgePosition(pixelSize)\n\n  const isCustomElement = asChild\n\n  return (\n    <Comp\n      data-spark-component=\"avatar-action\"\n      style={{\n        position: 'absolute',\n        ...(shape === 'circle' ? { left: `${position.x}px`, top: `${position.y}px` } : {}),\n        ...(shape === 'square' ? { right: '0px', bottom: '0px' } : {}),\n      }}\n      className={cx(\n        'z-raised',\n        shape === 'circle'\n          ? '-translate-x-1/2 -translate-y-1/2'\n          : 'translate-x-1/4 translate-y-1/4',\n        { 'shadow-sm': !isCustomElement },\n        className\n      )}\n      aria-label={ariaLabel}\n      title={ariaLabel}\n      {...(!isCustomElement ? { size: 'sm', intent: 'support', design: 'contrast' } : {})}\n      {...props}\n    >\n      {children || (\n        <Icon size=\"sm\">\n          <PenOutline />\n        </Icon>\n      )}\n    </Comp>\n  )\n}\n\nAvatarAction.displayName = 'AvatarAction'\n","import { cx } from 'class-variance-authority'\nimport { useEffect, useState } from 'react'\n\nimport { Slot } from '../slot'\nimport { useAvatarContext } from './context'\n\nexport interface AvatarImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n  asChild?: boolean\n}\n\nexport const AvatarImage = ({\n  className,\n  asChild,\n  src,\n  onLoad,\n  onError,\n  ...props\n}: AvatarImageProps) => {\n  const { username, isOnline, onlineText } = useAvatarContext()\n  const Comp = asChild ? Slot : 'img'\n\n  const [isVisible, setIsVisible] = useState(false)\n\n  const accessibleName = isOnline && onlineText ? `${username} (${onlineText})` : username\n\n  // Reset visibility when src changes\n  useEffect(() => {\n    setIsVisible(false)\n  }, [src])\n\n  // Don't render the image if src is undefined or null\n  if (!src) {\n    return null\n  }\n\n  const handleLoad = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {\n    setIsVisible(true)\n    onLoad?.(event)\n  }\n\n  const handleError = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {\n    setIsVisible(false)\n    onError?.(event)\n  }\n\n  return (\n    <Comp\n      aria-hidden\n      className={cx(\n        'absolute inset-0 size-full',\n        'object-cover',\n        { 'transition-all duration-300 group-hover:scale-120': props.onClick },\n        'focus-visible:u-outline',\n        isVisible ? 'block' : 'hidden',\n        className\n      )}\n      alt={accessibleName}\n      src={src}\n      onLoad={handleLoad}\n      onError={handleError}\n      {...props}\n    />\n  )\n}\n\nAvatarImage.displayName = 'AvatarImage'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef } from 'react'\n\nimport { useAvatarContext } from './context'\n\ninterface AvatarOnlineBadgeProps extends ComponentPropsWithoutRef<'div'> {\n  angle?: number\n}\n\nexport const AvatarOnlineBadge = ({ angle = 135, ...props }: AvatarOnlineBadgeProps) => {\n  const { isOnline, pixelSize, shape, onlineText, size } = useAvatarContext()\n\n  if (!isOnline) return null\n\n  function getBadgePosition(circleSize: number) {\n    const angleRad = ((90 - angle) * Math.PI) / 180\n    const circleRadius = circleSize / 2\n\n    return {\n      x: circleRadius + circleRadius * Math.cos(angleRad),\n      y: circleRadius - circleRadius * Math.sin(angleRad),\n    }\n  }\n\n  const badgePosition = getBadgePosition(pixelSize)\n\n  return (\n    <div\n      data-spark-component=\"avatar-online-badge\"\n      role=\"status\"\n      aria-label={onlineText}\n      style={{\n        ...(shape === 'circle'\n          ? { left: `${badgePosition.x}px`, top: `${badgePosition.y}px` }\n          : { right: '0px', bottom: '0px' }),\n      }}\n      className={cx(\n        'bg-success outline-surface absolute rounded-full',\n        shape === 'circle'\n          ? '-translate-x-1/2 -translate-y-1/2'\n          : 'translate-x-1/4 translate-y-1/4',\n        ['lg', 'xl', '2xl'].includes(size) ? cx('size-sz-12 outline-4') : cx('size-sz-8 outline-2')\n      )}\n      {...props}\n    />\n  )\n}\n\nAvatarOnlineBadge.displayName = 'AvatarOnlineBadge'\n","import { cx } from 'class-variance-authority'\n\nimport { useAvatarContext } from './context'\n\nexport interface AvatarPlaceholderProps extends React.ImgHTMLAttributes<HTMLDivElement> {\n  className?: string\n  children?: React.ReactNode\n}\n\nexport const AvatarPlaceholder = ({ className, children, ...props }: AvatarPlaceholderProps) => {\n  const { size, username } = useAvatarContext()\n\n  const firstLetter = username?.charAt(0)\n\n  return (\n    <div\n      aria-hidden\n      className={cx(\n        'absolute inset-0 flex size-full items-center justify-center',\n        'default:bg-neutral default:text-on-neutral',\n        {\n          'text-display-1': size === '2xl',\n          'text-display-2': ['xl', 'lg'].includes(size),\n          'text-display-3': size === 'md',\n          'text-headline-2': size === 'sm',\n          'text-body-2 font-bold': size === 'xs',\n        },\n        className\n      )}\n      {...props}\n    >\n      {children || firstLetter}\n    </div>\n  )\n}\n\nAvatarPlaceholder.displayName = 'AvatarPlaceholder'\n","import { cx } from 'class-variance-authority'\n\nimport { Slot } from '../slot'\nimport { useAvatarContext } from './context'\n\nexport interface AvatarImageProps extends React.ImgHTMLAttributes<HTMLDivElement> {\n  asChild?: boolean\n}\n\nexport const AvatarUser = ({ asChild, children, className, ...props }: AvatarImageProps) => {\n  const { shape, isOnline, onlineText, username } = useAvatarContext()\n  const Comp = asChild ? Slot : 'div'\n\n  const accessibleName = isOnline && onlineText ? `${username} (${onlineText})` : username\n\n  return (\n    <Comp\n      {...(!asChild && { role: 'img' })}\n      aria-label={accessibleName}\n      title={accessibleName}\n      className={cx(\n        'group default:border-outline relative size-full overflow-hidden',\n        'focus-visible:u-outline',\n        {\n          'default:rounded-full': shape === 'circle',\n          'default:rounded-md': shape === 'square',\n          'hover:opacity-dim-1 cursor-pointer': asChild || props.onClick,\n        },\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </Comp>\n  )\n}\n\nAvatarUser.displayName = 'AvatarUser'\n","import { Avatar } from './Avatar'\nimport { AvatarAction } from './AvatarAction'\nimport { AvatarImage } from './AvatarImage'\nimport { AvatarOnlineBadge } from './AvatarOnlineBadge'\nimport { AvatarPlaceholder } from './AvatarPlaceholder'\nimport { AvatarUser } from './AvatarUser'\nimport type { AvatarProps } from './types'\n\nexport interface AvatarComponent extends React.ForwardRefExoticComponent<\n  AvatarProps & React.RefAttributes<HTMLDivElement>\n> {\n  Image: typeof AvatarImage\n  Action: typeof AvatarAction\n  OnlineBadge: typeof AvatarOnlineBadge\n  User: typeof AvatarUser\n  Placeholder: typeof AvatarPlaceholder\n}\n\nconst AvatarComponent = Avatar as AvatarComponent\n\nAvatarComponent.Image = AvatarImage\nAvatarComponent.Action = AvatarAction\nAvatarComponent.OnlineBadge = AvatarOnlineBadge\nAvatarComponent.User = AvatarUser\nAvatarComponent.Placeholder = AvatarPlaceholder\nexport { AvatarComponent as Avatar }\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/avatar/context.ts","../../src/avatar/Avatar.tsx","../../src/avatar/AvatarAction.tsx","../../src/avatar/AvatarImage.tsx","../../src/avatar/AvatarOnlineBadge.tsx","../../src/avatar/AvatarPlaceholder.tsx","../../src/avatar/AvatarUser.tsx","../../src/avatar/index.ts"],"sourcesContent":["import * as React from 'react'\n\nimport type { AvatarContextValue } from './types'\n\nconst AvatarContext = React.createContext<AvatarContextValue | undefined>(undefined)\n\nexport const useAvatarContext = () => {\n  const context = React.useContext(AvatarContext)\n  if (!context) {\n    throw new Error('useAvatarContext must be used within an Avatar component')\n  }\n  return context\n}\n\nexport { AvatarContext }\n","import { cx } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { Slot } from '../slot'\nimport { AvatarContext } from './context'\nimport type { AvatarProps } from './types'\n\nconst sizeMap = {\n  xs: 24,\n  sm: 32,\n  md: 40,\n  lg: 56,\n  xl: 64, // default\n  '2xl': 96,\n}\n\nexport const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(\n  (\n    {\n      className,\n      size = 'xl',\n      isOnline = false,\n      onlineText,\n      username,\n      asChild,\n      children,\n      shape = 'circle',\n      ...props\n    },\n    ref\n  ) => {\n    const Comp = asChild ? Slot : 'div'\n    const contextValue = React.useMemo(\n      () => ({\n        size,\n        isOnline,\n        onlineText,\n        username,\n        shape,\n        pixelSize: sizeMap[size],\n      }),\n      [size, isOnline, username, shape, onlineText]\n    )\n\n    return (\n      <AvatarContext.Provider value={contextValue}>\n        <Comp\n          ref={ref}\n          style={{\n            width: sizeMap[size],\n            height: sizeMap[size],\n          }}\n          data-spark-component=\"avatar\"\n          className={cx('relative inline-flex items-center justify-center', className)}\n          {...props}\n        >\n          {children}\n        </Comp>\n      </AvatarContext.Provider>\n    )\n  }\n)\n\nAvatar.displayName = 'Avatar'\n","import { PenOutline } from '@spark-ui/icons/PenOutline'\nimport { cx } from 'class-variance-authority'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { Slot } from '../slot'\nimport { useAvatarContext } from './context'\n\nexport interface AvatarActionProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  asChild?: boolean\n  angle?: number\n  ariaLabel: string\n}\n\nexport const AvatarAction = ({\n  className,\n  children,\n  asChild,\n  angle = 135,\n  ariaLabel,\n  ...props\n}: AvatarActionProps) => {\n  const Comp = asChild ? Slot : IconButton\n  const { pixelSize, shape } = useAvatarContext()\n\n  function getBadgePosition(circleSize: number) {\n    const angleRad = ((90 - angle) * Math.PI) / 180\n    const circleRadius = circleSize / 2\n\n    return {\n      x: circleRadius + circleRadius * Math.cos(angleRad),\n      y: circleRadius - circleRadius * Math.sin(angleRad),\n    }\n  }\n\n  const position = getBadgePosition(pixelSize)\n\n  const isCustomElement = asChild\n\n  return (\n    <Comp\n      data-spark-component=\"avatar-action\"\n      style={{\n        position: 'absolute',\n        ...(shape === 'circle' ? { left: `${position.x}px`, top: `${position.y}px` } : {}),\n        ...(shape === 'square' ? { right: '0px', bottom: '0px' } : {}),\n      }}\n      className={cx(\n        'z-raised',\n        shape === 'circle'\n          ? '-translate-x-1/2 -translate-y-1/2'\n          : 'translate-x-1/4 translate-y-1/4',\n        { 'shadow-sm': !isCustomElement },\n        className\n      )}\n      aria-label={ariaLabel}\n      title={ariaLabel}\n      {...(!isCustomElement ? { size: 'sm', intent: 'support', design: 'contrast' } : {})}\n      {...props}\n    >\n      {children || (\n        <Icon size=\"sm\">\n          <PenOutline />\n        </Icon>\n      )}\n    </Comp>\n  )\n}\n\nAvatarAction.displayName = 'AvatarAction'\n","import { cx } from 'class-variance-authority'\nimport { useEffect, useState } from 'react'\n\nimport { Slot } from '../slot'\nimport { useAvatarContext } from './context'\n\nexport interface AvatarImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n  asChild?: boolean\n}\n\nexport const AvatarImage = ({\n  className,\n  asChild,\n  src,\n  onLoad,\n  onError,\n  ...props\n}: AvatarImageProps) => {\n  const { username, isOnline, onlineText } = useAvatarContext()\n  const Comp = asChild ? Slot : 'img'\n\n  const [isVisible, setIsVisible] = useState(false)\n\n  const accessibleName = isOnline && onlineText ? `${username} (${onlineText})` : username\n\n  // Reset visibility when src changes\n  useEffect(() => {\n    setIsVisible(false)\n  }, [src])\n\n  // Don't render the image if src is undefined or null\n  if (!src) {\n    return null\n  }\n\n  const handleLoad = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {\n    setIsVisible(true)\n    onLoad?.(event)\n  }\n\n  const handleError = (event: React.SyntheticEvent<HTMLImageElement, Event>) => {\n    setIsVisible(false)\n    onError?.(event)\n  }\n\n  return (\n    <Comp\n      aria-hidden\n      className={cx(\n        'absolute inset-0 size-full',\n        'object-cover',\n        { 'transition-all duration-300 group-hover:scale-120': props.onClick },\n        'focus-visible:u-outline',\n        isVisible ? 'block' : 'hidden',\n        className\n      )}\n      alt={accessibleName}\n      src={src}\n      onLoad={handleLoad}\n      onError={handleError}\n      {...props}\n    />\n  )\n}\n\nAvatarImage.displayName = 'AvatarImage'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef } from 'react'\n\nimport { useAvatarContext } from './context'\n\ninterface AvatarOnlineBadgeProps extends ComponentPropsWithoutRef<'div'> {\n  angle?: number\n}\n\nexport const AvatarOnlineBadge = ({ angle = 135, ...props }: AvatarOnlineBadgeProps) => {\n  const { isOnline, pixelSize, shape, onlineText, size } = useAvatarContext()\n\n  if (!isOnline) return null\n\n  function getBadgePosition(circleSize: number) {\n    const angleRad = ((90 - angle) * Math.PI) / 180\n    const circleRadius = circleSize / 2\n\n    return {\n      x: circleRadius + circleRadius * Math.cos(angleRad),\n      y: circleRadius - circleRadius * Math.sin(angleRad),\n    }\n  }\n\n  const badgePosition = getBadgePosition(pixelSize)\n\n  return (\n    <div\n      data-spark-component=\"avatar-online-badge\"\n      role=\"status\"\n      aria-label={onlineText}\n      style={{\n        ...(shape === 'circle'\n          ? { left: `${badgePosition.x}px`, top: `${badgePosition.y}px` }\n          : { right: '0px', bottom: '0px' }),\n      }}\n      className={cx(\n        'bg-success outline-surface absolute rounded-full',\n        shape === 'circle'\n          ? '-translate-x-1/2 -translate-y-1/2'\n          : 'translate-x-1/4 translate-y-1/4',\n        ['lg', 'xl', '2xl'].includes(size) ? cx('size-sz-12 outline-4') : cx('size-sz-8 outline-2')\n      )}\n      {...props}\n    />\n  )\n}\n\nAvatarOnlineBadge.displayName = 'AvatarOnlineBadge'\n","import { cx } from 'class-variance-authority'\n\nimport { useAvatarContext } from './context'\n\nexport interface AvatarPlaceholderProps extends React.ImgHTMLAttributes<HTMLDivElement> {\n  className?: string\n  children?: React.ReactNode\n}\n\nexport const AvatarPlaceholder = ({ className, children, ...props }: AvatarPlaceholderProps) => {\n  const { size, username } = useAvatarContext()\n\n  const firstLetter = username?.charAt(0)\n\n  return (\n    <div\n      aria-hidden\n      className={cx(\n        'absolute inset-0 flex size-full items-center justify-center',\n        'default:bg-neutral default:text-on-neutral',\n        {\n          'text-display-1': size === '2xl',\n          'text-display-2': ['xl', 'lg'].includes(size),\n          'text-display-3': size === 'md',\n          'text-headline-2': size === 'sm',\n          'text-body-2 font-bold': size === 'xs',\n        },\n        className\n      )}\n      {...props}\n    >\n      {children || firstLetter}\n    </div>\n  )\n}\n\nAvatarPlaceholder.displayName = 'AvatarPlaceholder'\n","import { cx } from 'class-variance-authority'\n\nimport { Slot } from '../slot'\nimport { useAvatarContext } from './context'\n\nexport interface AvatarImageProps extends React.ImgHTMLAttributes<HTMLDivElement> {\n  asChild?: boolean\n}\n\nexport const AvatarUser = ({ asChild, children, className, ...props }: AvatarImageProps) => {\n  const { shape, isOnline, onlineText, username } = useAvatarContext()\n  const Comp = asChild ? Slot : 'div'\n\n  const accessibleName = isOnline && onlineText ? `${username} (${onlineText})` : username\n\n  return (\n    <Comp\n      {...(!asChild && { role: 'img' })}\n      aria-label={accessibleName}\n      title={accessibleName}\n      className={cx(\n        'group default:border-outline relative size-full overflow-hidden',\n        'focus-visible:u-outline',\n        {\n          'default:rounded-full': shape === 'circle',\n          'default:rounded-md': shape === 'square',\n          'hover:opacity-dim-1 cursor-pointer': asChild || props.onClick,\n        },\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </Comp>\n  )\n}\n\nAvatarUser.displayName = 'AvatarUser'\n","import { Avatar as Root } from './Avatar'\nimport { AvatarAction } from './AvatarAction'\nimport { AvatarImage } from './AvatarImage'\nimport { AvatarOnlineBadge } from './AvatarOnlineBadge'\nimport { AvatarPlaceholder } from './AvatarPlaceholder'\nimport { AvatarUser } from './AvatarUser'\n\n/**\n * A graphical representation of a user, typically displaying an image, initials, or icon.\n */\nexport const Avatar: typeof Root & {\n  Image: typeof AvatarImage\n  Action: typeof AvatarAction\n  OnlineBadge: typeof AvatarOnlineBadge\n  User: typeof AvatarUser\n  Placeholder: typeof AvatarPlaceholder\n} = Object.assign(Root, {\n  Image: AvatarImage,\n  Action: AvatarAction,\n  OnlineBadge: AvatarOnlineBadge,\n  User: AvatarUser,\n  Placeholder: AvatarPlaceholder,\n})\n\nAvatar.displayName = 'Avatar'\nAvatarImage.displayName = 'Avatar.Image'\nAvatarAction.displayName = 'Avatar.Action'\nAvatarOnlineBadge.displayName = 'Avatar.OnlineBadge'\nAvatarUser.displayName = 'Avatar.User'\nAvatarPlaceholder.displayName = 'Avatar.Placeholder'\n\nexport type { AvatarProps } from './types'\n"],"mappings":"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"}

package/dist/badge/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/badge/BadgeItem.styles.tsx","../../src/badge/BadgeItem.tsx","../../src/badge/Badge.tsx"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const styles = cva(\n  ['inline-flex h-fit', 'empty:p-0', 'text-center font-bold', 'rounded-full box-content'],\n  {\n    variants: {\n      /**\n       * Visual color appearance of the component.\n       * @default 'danger'\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'danger', 'info', 'neutral', 'surface']\n      >({\n        main: ['bg-main', 'text-on-main', 'border-surface'],\n        support: ['bg-support', 'text-on-support', 'border-surface'],\n        accent: ['bg-accent', 'text-on-accent', 'border-surface'],\n        success: ['bg-success', 'text-on-success', 'border-surface'],\n        alert: ['bg-alert', 'text-on-alert', 'border-surface'],\n        danger: ['bg-error', 'text-on-error', 'border-surface'],\n        info: ['bg-info', 'text-on-info', 'border-surface'],\n        neutral: ['bg-neutral', 'text-on-neutral', 'border-surface'],\n        surface: ['bg-surface', 'text-on-surface', 'border-surface'],\n      }),\n      /**\n       * Size of the component.\n       * @default 'md'\n       */\n      size: makeVariants<'size', ['sm', 'md']>({\n        sm: ['text-small', 'px-[var(--spacing-sz-6)] py-[var(--spacing-sz-2)]', 'empty:size-sz-8'],\n        md: ['text-caption', 'px-md py-sm', 'empty:size-sz-16'],\n      }),\n      /**\n       * Type of the component.\n       * @default 'relative'\n       */\n      type: {\n        relative: ['absolute right-0 border-md', 'translate-x-1/2 -translate-y-1/2'],\n        standalone: [],\n      },\n    },\n    defaultVariants: {\n      intent: 'danger',\n      size: 'md',\n      type: 'relative',\n    },\n  }\n)\n\nexport type StylesProps = VariantProps<typeof styles>\n","import { HTMLAttributes, Ref } from 'react'\n\nimport { styles, type StylesProps } from './BadgeItem.styles'\n\nexport interface BadgeItemProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, 'aria-label'>, StylesProps {\n  /**\n   * Numeric value used as indicator inside the component.\n   */\n  count?: number\n  /**\n   * Maximum numeric value to be dispayed as a count value.\n   * @default 99\n   */\n  overflowCount?: number\n  /**\n   * A custom label for accessibility purposes. It can also be defined as a builder function\n   * to handle dynamic inner data to create a custom label.\n   */\n  'aria-label'?:\n    | string\n    | (({ count, overflowCount }: { count?: number; overflowCount?: number }) => string)\n  /**\n   * Describes the way the component is displayed: relative to another element or just standalone.\n   * @default 'relative'\n   */\n  type?: 'relative' | 'standalone'\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const BadgeItem = ({\n  intent = 'danger',\n  size = 'md',\n  type = 'relative',\n  count,\n  overflowCount = 99,\n  'aria-label': label,\n  className,\n  ...others\n}: BadgeItemProps) => {\n  const hasOverflow = count && count > overflowCount\n  const ariaLabel = typeof label === 'function' ? label({ count, overflowCount }) : label\n  const props = { ...others, 'aria-label': ariaLabel }\n\n  return (\n    <span\n      data-spark-component=\"badge\"\n      role=\"status\"\n      className={styles({\n        intent,\n        size,\n        type,\n        className,\n      })}\n      {...props}\n    >\n      {hasOverflow ? `${overflowCount}+` : count}\n    </span>\n  )\n}\n\nBadgeItem.displayName = 'BadgeItem'\n","import { PropsWithChildren, Ref } from 'react'\n\nimport { BadgeItem, BadgeItemProps } from './BadgeItem'\n\nexport type BadgeProps = PropsWithChildren<Omit<BadgeItemProps, 'type'>> & {\n  ref?: Ref<HTMLElement>\n}\n\nexport const Badge = ({ children, ...props }: BadgeProps) => {\n  const isStandalone = !children\n\n  return isStandalone ? (\n    <BadgeItem type=\"standalone\" {...props} />\n  ) : (\n    <div className=\"relative inline-flex\">\n      {children}\n      <BadgeItem {...props} />\n    </div>\n  )\n}\n\nBadge.displayName = 'Badge'\n"],"mappings":"kNAGA,IAAa,GAAA,EAAA,EAAA,KACX,CAAC,oBAAqB,YAAa,wBAAyB,2BAA2B,CACvF,CACE,SAAU,CAKR,QAAA,EAAA,EAAA,cAGE,CACA,KAAM,CAAC,UAAW,eAAgB,iBAAiB,CACnD,QAAS,CAAC,aAAc,kBAAmB,iBAAiB,CAC5D,OAAQ,CAAC,YAAa,iBAAkB,iBAAiB,CACzD,QAAS,CAAC,aAAc,kBAAmB,iBAAiB,CAC5D,MAAO,CAAC,WAAY,gBAAiB,iBAAiB,CACtD,OAAQ,CAAC,WAAY,gBAAiB,iBAAiB,CACvD,KAAM,CAAC,UAAW,eAAgB,iBAAiB,CACnD,QAAS,CAAC,aAAc,kBAAmB,iBAAiB,CAC5D,QAAS,CAAC,aAAc,kBAAmB,iBAAiB,CAC7D,CAAC,CAKF,MAAA,EAAA,EAAA,cAAyC,CACvC,GAAI,CAAC,aAAc,oDAAqD,kBAAkB,CAC1F,GAAI,CAAC,eAAgB,cAAe,mBAAmB,CACxD,CAAC,CAKF,KAAM,CACJ,SAAU,CAAC,6BAA8B,mCAAmC,CAC5E,WAAY,EAAE,CACf,CACF,CACD,gBAAiB,CACf,OAAQ,SACR,KAAM,KACN,KAAM,WACP,CACF,CACF,CClBY,GAAa,CACxB,SAAS,SACT,OAAO,KACP,OAAO,WACP,QACA,gBAAgB,GAChB,aAAc,EACd,YACA,GAAG,KACiB,CACpB,IAAM,EAAc,GAAS,EAAQ,EAC/B,EAAY,OAAO,GAAU,WAAa,EAAM,CAAE,QAAO,gBAAe,CAAC,CAAG,EAC5E,EAAQ,CAAE,GAAG,EAAQ,aAAc,EAAW,CAEpD,OACE,EAAA,EAAA,KAAC,OAAD,CACE,uBAAqB,QACrB,KAAK,SACL,UAAW,EAAO,CAChB,SACA,OACA,OACA,YACD,CAAC,CACF,GAAI,WAEH,EAAc,GAAG,EAAc,GAAK,EAChC,CAAA,EAIX,EAAU,YAAc,YCrDxB,IAAa,GAAS,CAAE,WAAU,GAAG,KACb,GAKpB,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,gCAAf,CACG,GACD,EAAA,EAAA,KAAC,EAAD,CAAW,GAAI,EAAS,CAAA,CACpB,IALN,EAAA,EAAA,KAAC,EAAD,CAAW,KAAK,aAAa,GAAI,EAAS,CAAA,CAS9C,EAAM,YAAc"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/badge/BadgeItem.styles.tsx","../../src/badge/BadgeItem.tsx","../../src/badge/Badge.tsx"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const styles = cva(\n  ['inline-flex h-fit', 'empty:p-0', 'text-center font-bold', 'rounded-full box-content'],\n  {\n    variants: {\n      /**\n       * Visual color appearance of the component.\n       * @default 'danger'\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'danger', 'info', 'neutral', 'surface']\n      >({\n        main: ['bg-main', 'text-on-main', 'border-surface'],\n        support: ['bg-support', 'text-on-support', 'border-surface'],\n        accent: ['bg-accent', 'text-on-accent', 'border-surface'],\n        success: ['bg-success', 'text-on-success', 'border-surface'],\n        alert: ['bg-alert', 'text-on-alert', 'border-surface'],\n        danger: ['bg-error', 'text-on-error', 'border-surface'],\n        info: ['bg-info', 'text-on-info', 'border-surface'],\n        neutral: ['bg-neutral', 'text-on-neutral', 'border-surface'],\n        surface: ['bg-surface', 'text-on-surface', 'border-surface'],\n      }),\n      /**\n       * Size of the component.\n       * @default 'md'\n       */\n      size: makeVariants<'size', ['sm', 'md']>({\n        sm: ['text-small', 'px-[var(--spacing-sz-6)] py-[var(--spacing-sz-2)]', 'empty:size-sz-8'],\n        md: ['text-caption', 'px-md py-sm', 'empty:size-sz-16'],\n      }),\n      /**\n       * Type of the component.\n       * @default 'relative'\n       */\n      type: {\n        relative: ['absolute right-0 border-md', 'translate-x-1/2 -translate-y-1/2'],\n        standalone: [],\n      },\n    },\n    defaultVariants: {\n      intent: 'danger',\n      size: 'md',\n      type: 'relative',\n    },\n  }\n)\n\nexport type StylesProps = VariantProps<typeof styles>\n","import { HTMLAttributes, Ref } from 'react'\n\nimport { styles, type StylesProps } from './BadgeItem.styles'\n\nexport interface BadgeItemProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, 'aria-label'>, StylesProps {\n  /**\n   * Numeric value used as indicator inside the component.\n   */\n  count?: number\n  /**\n   * Maximum numeric value to be dispayed as a count value.\n   * @default 99\n   */\n  overflowCount?: number\n  /**\n   * A custom label for accessibility purposes. It can also be defined as a builder function\n   * to handle dynamic inner data to create a custom label.\n   */\n  'aria-label'?:\n    | string\n    | (({ count, overflowCount }: { count?: number; overflowCount?: number }) => string)\n  /**\n   * Describes the way the component is displayed: relative to another element or just standalone.\n   * @default 'relative'\n   */\n  type?: 'relative' | 'standalone'\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const BadgeItem = ({\n  intent = 'danger',\n  size = 'md',\n  type = 'relative',\n  count,\n  overflowCount = 99,\n  'aria-label': label,\n  className,\n  ...others\n}: BadgeItemProps) => {\n  const hasOverflow = count && count > overflowCount\n  const ariaLabel = typeof label === 'function' ? label({ count, overflowCount }) : label\n  const props = { ...others, 'aria-label': ariaLabel }\n\n  return (\n    <span\n      data-spark-component=\"badge\"\n      role=\"status\"\n      className={styles({\n        intent,\n        size,\n        type,\n        className,\n      })}\n      {...props}\n    >\n      {hasOverflow ? `${overflowCount}+` : count}\n    </span>\n  )\n}\n\nBadgeItem.displayName = 'BadgeItem'\n","import { PropsWithChildren, Ref } from 'react'\n\nimport { BadgeItem, BadgeItemProps } from './BadgeItem'\n\nexport type BadgeProps = PropsWithChildren<Omit<BadgeItemProps, 'type'>> & {\n  ref?: Ref<HTMLElement>\n}\n\n/**\n * A visual indicator that displays a count or status, typically positioned on top of another element.\n */\nexport const Badge = ({ children, ...props }: BadgeProps) => {\n  const isStandalone = !children\n\n  return isStandalone ? (\n    <BadgeItem type=\"standalone\" {...props} />\n  ) : (\n    <div className=\"relative inline-flex\">\n      {children}\n      <BadgeItem {...props} />\n    </div>\n  )\n}\n\nBadge.displayName = 'Badge'\n"],"mappings":"kNAGA,IAAa,GAAA,EAAA,EAAA,KACX,CAAC,oBAAqB,YAAa,wBAAyB,2BAA2B,CACvF,CACE,SAAU,CAKR,QAAA,EAAA,EAAA,cAGE,CACA,KAAM,CAAC,UAAW,eAAgB,iBAAiB,CACnD,QAAS,CAAC,aAAc,kBAAmB,iBAAiB,CAC5D,OAAQ,CAAC,YAAa,iBAAkB,iBAAiB,CACzD,QAAS,CAAC,aAAc,kBAAmB,iBAAiB,CAC5D,MAAO,CAAC,WAAY,gBAAiB,iBAAiB,CACtD,OAAQ,CAAC,WAAY,gBAAiB,iBAAiB,CACvD,KAAM,CAAC,UAAW,eAAgB,iBAAiB,CACnD,QAAS,CAAC,aAAc,kBAAmB,iBAAiB,CAC5D,QAAS,CAAC,aAAc,kBAAmB,iBAAiB,CAC7D,CAAC,CAKF,MAAA,EAAA,EAAA,cAAyC,CACvC,GAAI,CAAC,aAAc,oDAAqD,kBAAkB,CAC1F,GAAI,CAAC,eAAgB,cAAe,mBAAmB,CACxD,CAAC,CAKF,KAAM,CACJ,SAAU,CAAC,6BAA8B,mCAAmC,CAC5E,WAAY,EAAE,CACf,CACF,CACD,gBAAiB,CACf,OAAQ,SACR,KAAM,KACN,KAAM,WACP,CACF,CACF,CClBY,GAAa,CACxB,SAAS,SACT,OAAO,KACP,OAAO,WACP,QACA,gBAAgB,GAChB,aAAc,EACd,YACA,GAAG,KACiB,CACpB,IAAM,EAAc,GAAS,EAAQ,EAC/B,EAAY,OAAO,GAAU,WAAa,EAAM,CAAE,QAAO,gBAAe,CAAC,CAAG,EAC5E,EAAQ,CAAE,GAAG,EAAQ,aAAc,EAAW,CAEpD,OACE,EAAA,EAAA,KAAC,OAAD,CACE,uBAAqB,QACrB,KAAK,SACL,UAAW,EAAO,CAChB,SACA,OACA,OACA,YACD,CAAC,CACF,GAAI,WAEH,EAAc,GAAG,EAAc,GAAK,EAChC,CAAA,EAIX,EAAU,YAAc,YClDxB,IAAa,GAAS,CAAE,WAAU,GAAG,KACb,GAKpB,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,gCAAf,CACG,GACD,EAAA,EAAA,KAAC,EAAD,CAAW,GAAI,EAAS,CAAA,CACpB,IALN,EAAA,EAAA,KAAC,EAAD,CAAW,KAAK,aAAa,GAAI,EAAS,CAAA,CAS9C,EAAM,YAAc"}