@spark-ui/components 17.11.0 → 17.11.1

package/dist/accordion/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../slot/index.js`),t=require(`../icon-CRPcdgYp.js`);let n=require(`@base-ui/react/accordion`),r=require(`class-variance-authority`),i=require(`react`),a=require(`react/jsx-runtime`),o=require(`@spark-ui/icons/ArrowHorizontalDown`);function s(t,n){let r=t?e.Slot:n;return t?({...e})=>(0,a.jsx)(r,{...e}):void 0}var c=(0,i.createContext)(null),l=({asChild:e=!1,children:t,design:i=`outlined`,hiddenUntilFound:o=!0,multiple:l=!1,className:u,ref:d,...f})=>{let p=s(e,`div`);return(0,a.jsx)(c.Provider,{value:{design:i},children:(0,a.jsx)(n.Accordion.Root,{"data-spark-component":`accordion`,ref:d,multiple:l,hiddenUntilFound:o,className:(0,r.cx)(`bg-surface h-fit rounded-lg`,u),render:p,...f,children:t})})};l.displayName=`Accordion`;var u=()=>{let e=(0,i.useContext)(c);if(!e)throw Error(`useAccordionContext must be used within a Accordion provider`);return e},d=({asChild:e=!1,className:t,children:i,ref:o,...c})=>{let l=u(),d=s(e,`div`);return(0,a.jsx)(n.Accordion.Item,{ref:o,"data-spark-component":`accordion-item`,render:d,className:(0,r.cx)(`relative first:rounded-t-lg last:rounded-b-lg`,`not-last:border-b-0`,{"border-sm border-outline":l.design===`outlined`},t),...c,children:i})};d.displayName=`Accordion.Item`;var f=({asChild:e=!1,className:t,children:i,ref:o,...c})=>{let l=s(e,`div`);return(0,a.jsx)(n.Accordion.Panel,{ref:o,"data-spark-component":`accordion-item-content`,className:(0,r.cx)(`[&>:first-child]:p-lg overflow-hidden`,`h-[var(--accordion-panel-height)] transition-all duration-200 data-[ending-style]:h-0 data-[starting-style]:h-0`,`text-body-1 text-on-surface`,t),render:l,...c,children:i})};f.displayName=`Accordion.ItemContent`;var p=({asChild:t=!1,children:n,className:i,ref:o})=>(0,a.jsx)(t?e.Slot:`h3`,{ref:o,"data-spark-component":`accordion-item-header`,className:(0,r.cx)(`rounded-[inherit]`,i),children:n});p.displayName=`Accordion.ItemHeader`;var m=({asChild:e=!1,children:i,className:c,ref:l,...u})=>{let d=s(e,`button`);return(0,a.jsxs)(n.Accordion.Trigger,{ref:l,"data-spark-component":`accordion-item-trigger`,render:d,className:(0,r.cx)(`group`,`gap-lg min-h-sz-48 relative flex items-center justify-between`,`px-lg py-md text-headline-2 text-on-surface data-[panel-open]:rounded-b-0 w-full rounded-[inherit] text-left`,`hover:enabled:bg-surface-hovered focus:bg-surface-hovered`,`focus-visible:u-outline focus-visible:z-raised focus-visible:outline-hidden`,`disabled:opacity-dim-3 cursor-pointer disabled:cursor-not-allowed`,c),...u,children:[(0,a.jsx)(`div`,{className:`gap-lg flex grow items-center`,children:i}),(0,a.jsx)(t.t,{intent:`neutral`,className:(0,r.cx)(`shrink-0 rotate-0 duration-100 ease-in motion-reduce:transition-none`,`group-data-[panel-open]:rotate-180`),size:`sm`,children:(0,a.jsx)(o.ArrowHorizontalDown,{})})]})};m.displayName=`Accordion.ItemTrigger`;var h=Object.assign(l,{Item:d,ItemHeader:p,ItemTrigger:m,ItemContent:f});h.displayName=`Accordion`,d.displayName=`Item`,p.displayName=`ItemHeader`,m.displayName=`Accordion.Trigger`,f.displayName=`Accordion.Content`,exports.Accordion=h;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../slot/index.js`),t=require(`../icon-CRPcdgYp.js`);let n=require(`@base-ui/react/accordion`),r=require(`class-variance-authority`),i=require(`react`),a=require(`react/jsx-runtime`),o=require(`@spark-ui/icons/ArrowHorizontalDown`);function s(t,n){let r=t?e.Slot:n;return t?({...e})=>(0,a.jsx)(r,{...e}):void 0}var c=(0,i.createContext)(null),l=({asChild:e=!1,children:t,design:i=`outlined`,hiddenUntilFound:o=!0,multiple:l=!1,className:u,ref:d,...f})=>{let p=s(e,`div`);return(0,a.jsx)(c,{value:{design:i},children:(0,a.jsx)(n.Accordion.Root,{"data-spark-component":`accordion`,ref:d,multiple:l,hiddenUntilFound:o,className:(0,r.cx)(`bg-surface h-fit rounded-lg`,u),render:p,...f,children:t})})};l.displayName=`Accordion`;var u=()=>{let e=(0,i.useContext)(c);if(!e)throw Error(`useAccordionContext must be used within a Accordion provider`);return e},d=({asChild:e=!1,className:t,children:i,ref:o,...c})=>{let l=u(),d=s(e,`div`);return(0,a.jsx)(n.Accordion.Item,{ref:o,"data-spark-component":`accordion-item`,render:d,className:(0,r.cx)(`relative first:rounded-t-lg last:rounded-b-lg`,`not-last:border-b-0`,{"border-sm border-outline":l.design===`outlined`},t),...c,children:i})};d.displayName=`Accordion.Item`;var f=({asChild:e=!1,className:t,children:i,ref:o,...c})=>{let l=s(e,`div`);return(0,a.jsx)(n.Accordion.Panel,{ref:o,"data-spark-component":`accordion-item-content`,className:(0,r.cx)(`[&>:first-child]:p-lg overflow-hidden`,`h-[var(--accordion-panel-height)] transition-all duration-200 data-[ending-style]:h-0 data-[starting-style]:h-0`,`text-body-1 text-on-surface`,t),render:l,...c,children:i})};f.displayName=`Accordion.ItemContent`;var p=({asChild:t=!1,children:n,className:i,ref:o})=>(0,a.jsx)(t?e.Slot:`h3`,{ref:o,"data-spark-component":`accordion-item-header`,className:(0,r.cx)(`rounded-[inherit]`,i),children:n});p.displayName=`Accordion.ItemHeader`;var m=({asChild:e=!1,children:i,className:c,ref:l,...u})=>{let d=s(e,`button`);return(0,a.jsxs)(n.Accordion.Trigger,{ref:l,"data-spark-component":`accordion-item-trigger`,render:d,className:(0,r.cx)(`group`,`gap-lg min-h-sz-48 relative flex items-center justify-between`,`px-lg py-md text-headline-2 text-on-surface data-[panel-open]:rounded-b-0 w-full rounded-[inherit] text-left`,`hover:enabled:bg-surface-hovered focus:bg-surface-hovered`,`focus-visible:u-outline focus-visible:z-raised focus-visible:outline-hidden`,`disabled:opacity-dim-3 cursor-pointer disabled:cursor-not-allowed`,c),...u,children:[(0,a.jsx)(`div`,{className:`gap-lg flex grow items-center`,children:i}),(0,a.jsx)(t.t,{intent:`neutral`,className:(0,r.cx)(`shrink-0 rotate-0 duration-100 ease-in motion-reduce:transition-none`,`group-data-[panel-open]:rotate-180`),size:`sm`,children:(0,a.jsx)(o.ArrowHorizontalDown,{})})]})};m.displayName=`Accordion.ItemTrigger`;var h=Object.assign(l,{Item:d,ItemHeader:p,ItemTrigger:m,ItemContent:f});h.displayName=`Accordion`,d.displayName=`Item`,p.displayName=`ItemHeader`,m.displayName=`Accordion.Trigger`,f.displayName=`Accordion.Content`,exports.Accordion=h;
 //# sourceMappingURL=index.js.map

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\n/**\n * Groups an accordion header with the corresponding panel. Renders a <div> element.\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,GClDI,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,iBCjCnB,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"}
+{"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 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>\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\n/**\n * Groups an accordion header with the corresponding panel. Renders a <div> element.\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,EAAD,CAAkB,MAAO,CAAE,SAAQ,WACjC,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,CACJ,CAAA,EAIvB,EAAU,YAAc,YAExB,IAAa,MAA4B,CACvC,IAAM,GAAA,EAAA,EAAA,YAAqB,EAAiB,CAE5C,GAAI,CAAC,EACH,MAAM,MAAM,+DAA+D,CAG7E,OAAO,GClDI,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,iBCjCnB,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

@@ -14,7 +14,7 @@ function l(t, n) {
 //#region src/accordion/Accordion.tsx
 var u = i(null), d = ({ asChild: e = !1, children: t, design: i = "outlined", hiddenUntilFound: a = !0, multiple: s = !1, className: c, ref: d, ...f }) => {
 	let p = l(e, "div");
-	return /* @__PURE__ */ o(u.Provider, {
+	return /* @__PURE__ */ o(u, {
 		value: { design: i },
 		children: /* @__PURE__ */ o(n.Root, {
 			"data-spark-component": "accordion",

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\n/**\n * Groups an accordion header with the corresponding panel. Renders a <div> element.\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;GClDI,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;;;ACjCnB,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"}
+{"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 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>\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\n/**\n * Groups an accordion header with the corresponding panel. Renders a <div> element.\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,GAAD;EAAkB,OAAO,EAAE,WAAQ;YACjC,kBAAC,EAAc,MAAf;GACE,wBAAqB;GAChB;GACK;GACQ;GAClB,WAAW,EAAG,+BAA+B,EAAU;GACvD,QAAQ;GACR,GAAI;GAEH;GACkB,CAAA;EACJ,CAAA;;AAIvB,EAAU,cAAc;AAExB,IAAa,UAA4B;CACvC,IAAM,IAAU,EAAW,EAAiB;AAE5C,KAAI,CAAC,EACH,OAAM,MAAM,+DAA+D;AAG7E,QAAO;GClDI,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;;;ACjCnB,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

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../slot/index.js`),t=require(`../DialogContent.styles-CAhJtUud.js`);let n=require(`class-variance-authority`),r=require(`react`),i=require(`react/jsx-runtime`),a=require(`@base-ui/react/alert-dialog`),o=require(`@spark-ui/hooks/use-merge-refs`),s=require(`@spark-ui/hooks/use-scroll-overflow`);var c=(0,r.createContext)(null),l=({children:e,withFade:t=!1,cancelRef:n})=>(0,i.jsx)(c.Provider,{value:{cancelRef:n,withFade:t},children:e}),u=()=>{let e=(0,r.useContext)(c);if(!e)throw Error(`useAlertDialog must be used within an AlertDialog provider`);return e},d=({onOpenChange:e,withFade:t=!1,...n})=>{let o=(0,r.useRef)(null),s=e?(t,n)=>{e(t)}:void 0;return(0,i.jsx)(l,{withFade:t,cancelRef:o,children:(0,i.jsx)(a.AlertDialog.Root,{"data-spark-component":`alert-dialog`,onOpenChange:s,...n})})};d.displayName=`AlertDialog`;function f(t,n){let r=t?e.Slot:n;return t?({...e})=>(0,i.jsx)(r,{...e}):void 0}var p=({asChild:e=!1,...t})=>{let n=f(e,`button`);return(0,i.jsx)(a.AlertDialog.Close,{"data-spark-component":`alert-dialog-action`,render:n,...t})};p.displayName=`AlertDialog.Action`;var m=({children:e,className:t,inset:a=!1,ref:c,...l})=>{let d=(0,r.useRef)(null),f=(0,o.useMergeRefs)(c,d),{withFade:p}=u(),{overflow:m}=(0,s.useScrollOverflow)(d);return(0,i.jsx)(`div`,{"data-spark-component":`alert-dialog-body`,ref:f,className:(0,n.cx)(`focus-visible:u-outline relative grow overflow-y-auto outline-hidden`,`transition-all duration-300`,{"px-xl py-lg":!a},t),style:{...p&&{maskImage:`linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))`,maskSize:`100% calc(100% + ${m.top?`0px`:`44px`} + ${m.bottom?`0px`:`44px`})`,maskPosition:`0 ${m.top?`0px`:`-44px`}`}},...l,children:e})};m.displayName=`AlertDialog.Body`;var h=({asChild:e=!1,ref:t,...n})=>{let{cancelRef:r}=u(),s=(0,o.useMergeRefs)(t,r),c=f(e,`button`);return(0,i.jsx)(a.AlertDialog.Close,{ref:s,"data-spark-component":`alert-dialog-cancel`,render:c,...n})};h.displayName=`AlertDialog.Cancel`;var g=({className:e,ref:r,initialFocus:o,...s})=>{let{cancelRef:c}=u(),l=o===void 0?()=>c.current:o;return(0,i.jsx)(a.AlertDialog.Popup,{ref:r,"data-spark-component":`alert-dialog-content`,role:`alertdialog`,className:r=>(0,n.cx)(t.t({size:`md`,isNarrow:!0}),`min-w-[min(288px,calc(100vw-2rem))]`,`transition-all duration-150`,`data-starting-style:scale-90 data-starting-style:opacity-0`,`data-ending-style:scale-90 data-ending-style:opacity-0`,typeof e==`function`?e(r):e),initialFocus:l,...s})};g.displayName=`AlertDialog.Content`;var _=e=>(0,i.jsx)(a.AlertDialog.Description,{"data-spark-component":`alert-dialog-description`,...e});_.displayName=`AlertDialog.Description`;var v=({children:e,className:t,ref:r,...a})=>(0,i.jsx)(`footer`,{"data-spark-component":`alert-dialog-footer`,ref:r,className:(0,n.cx)(t,[`px-xl`,`py-lg`]),...a,children:e});v.displayName=`AlertDialog.Footer`;var y=({children:e,className:t,ref:r,...a})=>(0,i.jsx)(`header`,{"data-spark-component":`alert-dialog-header`,ref:r,className:(0,n.cx)(t,[`px-xl`,`py-lg`]),...a,children:e});y.displayName=`AlertDialog.Header`;var b=({className:e,...t})=>(0,i.jsx)(a.AlertDialog.Backdrop,{"data-spark-component":`alert-dialog-overlay`,className:t=>(0,n.cx)(`z-overlay fixed top-0 left-0 h-screen w-screen`,`bg-overlay/dim-1`,`data-starting-style:animate-fade-in`,`data-ending-style:animate-fade-out`,typeof e==`function`?e(t):e),...t});b.displayName=`AlertDialog.Overlay`;var x=({className:e,...t})=>(0,i.jsx)(a.AlertDialog.Portal,{"data-spark-component":`alert-dialog-portal`,className:(0,n.cx)(e,`z-modal absolute`),...t});x.displayName=`AlertDialog.Portal`;var S=({className:e,...t})=>(0,i.jsx)(a.AlertDialog.Title,{"data-spark-component":`alert-dialog-title`,className:(0,n.cx)(`text-headline-1 text-on-surface`,e),...t});S.displayName=`AlertDialog.Title`;var C=({asChild:e=!1,...t})=>{let n=f(e,`button`);return(0,i.jsx)(a.AlertDialog.Trigger,{"data-spark-component":`alert-dialog-trigger`,render:n,...t})};C.displayName=`AlertDialog.Trigger`;var w=Object.assign(d,{Action:p,Body:m,Cancel:h,Content:g,Description:_,Footer:v,Header:y,Overlay:b,Portal:x,Title:S,Trigger:C});w.displayName=`AlertDialog`,w.Action.displayName=`AlertDialog.Action`,w.Body.displayName=`AlertDialog.Body`,w.Cancel.displayName=`AlertDialog.Cancel`,w.Content.displayName=`AlertDialog.Content`,w.Description.displayName=`AlertDialog.Description`,w.Footer.displayName=`AlertDialog.Footer`,w.Header.displayName=`AlertDialog.Header`,w.Overlay.displayName=`AlertDialog.Overlay`,w.Portal.displayName=`AlertDialog.Portal`,w.Title.displayName=`AlertDialog.Title`,w.Trigger.displayName=`AlertDialog.Trigger`,exports.AlertDialog=w,exports.useAlertDialog=u;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../slot/index.js`),t=require(`../DialogContent.styles-CAhJtUud.js`);let n=require(`class-variance-authority`),r=require(`react`),i=require(`react/jsx-runtime`),a=require(`@base-ui/react/alert-dialog`),o=require(`@spark-ui/hooks/use-merge-refs`),s=require(`@spark-ui/hooks/use-scroll-overflow`);var c=(0,r.createContext)(null),l=({children:e,withFade:t=!1,cancelRef:n})=>(0,i.jsx)(c,{value:{cancelRef:n,withFade:t},children:e}),u=()=>{let e=(0,r.useContext)(c);if(!e)throw Error(`useAlertDialog must be used within an AlertDialog provider`);return e},d=({onOpenChange:e,withFade:t=!1,...n})=>{let o=(0,r.useRef)(null),s=e?(t,n)=>{e(t)}:void 0;return(0,i.jsx)(l,{withFade:t,cancelRef:o,children:(0,i.jsx)(a.AlertDialog.Root,{"data-spark-component":`alert-dialog`,onOpenChange:s,...n})})};d.displayName=`AlertDialog`;function f(t,n){let r=t?e.Slot:n;return t?({...e})=>(0,i.jsx)(r,{...e}):void 0}var p=({asChild:e=!1,...t})=>{let n=f(e,`button`);return(0,i.jsx)(a.AlertDialog.Close,{"data-spark-component":`alert-dialog-action`,render:n,...t})};p.displayName=`AlertDialog.Action`;var m=({children:e,className:t,inset:a=!1,ref:c,...l})=>{let d=(0,r.useRef)(null),f=(0,o.useMergeRefs)(c,d),{withFade:p}=u(),{overflow:m}=(0,s.useScrollOverflow)(d);return(0,i.jsx)(`div`,{"data-spark-component":`alert-dialog-body`,ref:f,className:(0,n.cx)(`focus-visible:u-outline relative grow overflow-y-auto outline-hidden`,`transition-all duration-300`,{"px-xl py-lg":!a},t),style:{...p&&{maskImage:`linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))`,maskSize:`100% calc(100% + ${m.top?`0px`:`44px`} + ${m.bottom?`0px`:`44px`})`,maskPosition:`0 ${m.top?`0px`:`-44px`}`}},...l,children:e})};m.displayName=`AlertDialog.Body`;var h=({asChild:e=!1,ref:t,...n})=>{let{cancelRef:r}=u(),s=(0,o.useMergeRefs)(t,r),c=f(e,`button`);return(0,i.jsx)(a.AlertDialog.Close,{ref:s,"data-spark-component":`alert-dialog-cancel`,render:c,...n})};h.displayName=`AlertDialog.Cancel`;var g=({className:e,ref:r,initialFocus:o,...s})=>{let{cancelRef:c}=u(),l=o===void 0?()=>c.current:o;return(0,i.jsx)(a.AlertDialog.Popup,{ref:r,"data-spark-component":`alert-dialog-content`,role:`alertdialog`,className:r=>(0,n.cx)(t.t({size:`md`,isNarrow:!0}),`min-w-[min(288px,calc(100vw-2rem))]`,`transition-all duration-150`,`data-starting-style:scale-90 data-starting-style:opacity-0`,`data-ending-style:scale-90 data-ending-style:opacity-0`,typeof e==`function`?e(r):e),initialFocus:l,...s})};g.displayName=`AlertDialog.Content`;var _=e=>(0,i.jsx)(a.AlertDialog.Description,{"data-spark-component":`alert-dialog-description`,...e});_.displayName=`AlertDialog.Description`;var v=({children:e,className:t,ref:r,...a})=>(0,i.jsx)(`footer`,{"data-spark-component":`alert-dialog-footer`,ref:r,className:(0,n.cx)(t,[`px-xl`,`py-lg`]),...a,children:e});v.displayName=`AlertDialog.Footer`;var y=({children:e,className:t,ref:r,...a})=>(0,i.jsx)(`header`,{"data-spark-component":`alert-dialog-header`,ref:r,className:(0,n.cx)(t,[`px-xl`,`py-lg`]),...a,children:e});y.displayName=`AlertDialog.Header`;var b=({className:e,...t})=>(0,i.jsx)(a.AlertDialog.Backdrop,{"data-spark-component":`alert-dialog-overlay`,className:t=>(0,n.cx)(`z-overlay fixed top-0 left-0 h-screen w-screen`,`bg-overlay/dim-1`,`data-starting-style:animate-fade-in`,`data-ending-style:animate-fade-out`,typeof e==`function`?e(t):e),...t});b.displayName=`AlertDialog.Overlay`;var x=({className:e,...t})=>(0,i.jsx)(a.AlertDialog.Portal,{"data-spark-component":`alert-dialog-portal`,className:(0,n.cx)(e,`z-modal absolute`),...t});x.displayName=`AlertDialog.Portal`;var S=({className:e,...t})=>(0,i.jsx)(a.AlertDialog.Title,{"data-spark-component":`alert-dialog-title`,className:(0,n.cx)(`text-headline-1 text-on-surface`,e),...t});S.displayName=`AlertDialog.Title`;var C=({asChild:e=!1,...t})=>{let n=f(e,`button`);return(0,i.jsx)(a.AlertDialog.Trigger,{"data-spark-component":`alert-dialog-trigger`,render:n,...t})};C.displayName=`AlertDialog.Trigger`;var w=Object.assign(d,{Action:p,Body:m,Cancel:h,Content:g,Description:_,Footer:v,Header:y,Overlay:b,Portal:x,Title:S,Trigger:C});w.displayName=`AlertDialog`,w.Action.displayName=`AlertDialog.Action`,w.Body.displayName=`AlertDialog.Body`,w.Cancel.displayName=`AlertDialog.Cancel`,w.Content.displayName=`AlertDialog.Content`,w.Description.displayName=`AlertDialog.Description`,w.Footer.displayName=`AlertDialog.Footer`,w.Header.displayName=`AlertDialog.Header`,w.Overlay.displayName=`AlertDialog.Overlay`,w.Portal.displayName=`AlertDialog.Portal`,w.Title.displayName=`AlertDialog.Title`,w.Trigger.displayName=`AlertDialog.Trigger`,exports.AlertDialog=w,exports.useAlertDialog=u;
 //# sourceMappingURL=index.js.map

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\n/**\n * A button that closes the dialog and confirms the action. Renders a <button> element.\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\n/**\n * The scrollable body section of the alert dialog. Renders a <div> element.\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\n/**\n * A button that closes the dialog without confirming the action. Renders a <button> element.\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\n/**\n * The popup element that contains the alert dialog content. Renders a <div> element.\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\n/**\n * A paragraph with additional information about the dialog. Renders a <p> element.\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\n/**\n * The footer section of the alert dialog, typically containing action buttons. Renders a <footer> element.\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\n/**\n * The header section of the alert dialog. Renders a <header> element.\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\n/**\n * The backdrop element that dims the rest of the page. Renders a <div> element.\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\n/**\n * A portal that renders the dialog in a different part of the DOM. Renders a <div> element.\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\n/**\n * The title of the alert dialog, announced to assistive technology. Renders an <h2> element.\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\n/**\n * A button that opens the alert dialog. Renders a <button> element.\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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"}
+{"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\n      value={{\n        cancelRef,\n        withFade,\n      }}\n    >\n      {children}\n    </AlertDialogContext>\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\n/**\n * A button that closes the dialog and confirms the action. Renders a <button> element.\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\n/**\n * The scrollable body section of the alert dialog. Renders a <div> element.\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\n/**\n * A button that closes the dialog without confirming the action. Renders a <button> element.\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\n/**\n * The popup element that contains the alert dialog content. Renders a <div> element.\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\n/**\n * A paragraph with additional information about the dialog. Renders a <p> element.\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\n/**\n * The footer section of the alert dialog, typically containing action buttons. Renders a <footer> element.\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\n/**\n * The header section of the alert dialog. Renders a <header> element.\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\n/**\n * The backdrop element that dims the rest of the page. Renders a <div> element.\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\n/**\n * A portal that renders the dialog in a different part of the DOM. Renders a <div> element.\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\n/**\n * The title of the alert dialog, announced to assistive technology. Renders an <h2> element.\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\n/**\n * A button that opens the alert dialog. Renders a <button> element.\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

@@ -7,7 +7,7 @@ import { AlertDialog as s } from "@base-ui/react/alert-dialog";
 import { useMergeRefs as c } from "@spark-ui/hooks/use-merge-refs";
 import { useScrollOverflow as l } from "@spark-ui/hooks/use-scroll-overflow";
 //#region src/alert-dialog/AlertDialogContext.tsx
-var u = r(null), d = ({ children: e, withFade: t = !1, cancelRef: n }) => /* @__PURE__ */ o(u.Provider, {
+var u = r(null), d = ({ children: e, withFade: t = !1, cancelRef: n }) => /* @__PURE__ */ o(u, {
 	value: {
 		cancelRef: n,
 		withFade: t

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\n/**\n * A button that closes the dialog and confirms the action. Renders a <button> element.\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\n/**\n * The scrollable body section of the alert dialog. Renders a <div> element.\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\n/**\n * A button that closes the dialog without confirming the action. Renders a <button> element.\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\n/**\n * The popup element that contains the alert dialog content. Renders a <div> element.\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\n/**\n * A paragraph with additional information about the dialog. Renders a <p> element.\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\n/**\n * The footer section of the alert dialog, typically containing action buttons. Renders a <footer> element.\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\n/**\n * The header section of the alert dialog. Renders a <header> element.\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\n/**\n * The backdrop element that dims the rest of the page. Renders a <div> element.\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\n/**\n * A portal that renders the dialog in a different part of the DOM. Renders a <div> element.\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\n/**\n * The title of the alert dialog, announced to assistive technology. Renders an <h2> element.\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\n/**\n * A button that opens the alert dialog. Renders a <button> element.\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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"}
+{"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\n      value={{\n        cancelRef,\n        withFade,\n      }}\n    >\n      {children}\n    </AlertDialogContext>\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\n/**\n * A button that closes the dialog and confirms the action. Renders a <button> element.\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\n/**\n * The scrollable body section of the alert dialog. Renders a <div> element.\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\n/**\n * A button that closes the dialog without confirming the action. Renders a <button> element.\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\n/**\n * The popup element that contains the alert dialog content. Renders a <div> element.\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\n/**\n * A paragraph with additional information about the dialog. Renders a <p> element.\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\n/**\n * The footer section of the alert dialog, typically containing action buttons. Renders a <footer> element.\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\n/**\n * The header section of the alert dialog. Renders a <header> element.\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\n/**\n * The backdrop element that dims the rest of the page. Renders a <div> element.\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\n/**\n * A portal that renders the dialog in a different part of the DOM. Renders a <div> element.\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\n/**\n * The title of the alert dialog, announced to assistive technology. Renders an <h2> element.\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\n/**\n * A button that opens the alert dialog. Renders a <button> element.\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-CTe0v0g7.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;return(0,a.useEffect)(()=>{g(!1)},[r]),r?(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:e=>{g(!0),s?.(e)},onError:e=>{g(!1),c?.(e)},...u}):null};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-highlight":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=_;
+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-CTe0v0g7.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`;return(0,o.jsx)(c,{value:a.useMemo(()=>({size:n,isOnline:r,onlineText:s,username:l,shape:p,pixelSize:u[n]}),[n,r,l,p,s]),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;return(0,a.useEffect)(()=>{g(!1)},[r]),r?(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:e=>{g(!0),s?.(e)},onError:e=>{g(!1),c?.(e)},...u}):null};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-highlight":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\n/**\n * An action button positioned on the avatar, typically for editing. Renders a <button> element.\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\n/**\n * The avatar's image content. Renders an <img> element.\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\n/**\n * A badge indicator showing the user's online status. Renders a <div> element.\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\n/**\n * A placeholder shown when no image is available, typically displaying the user's initial. Renders a <div> element.\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-highlight': 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\n/**\n * The user container that wraps avatar content. Renders a <div> element.\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,SC9CrB,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,EAsBhF,OAnBA,EAAA,EAAA,eAAgB,CACd,EAAa,GAAM,EAClB,CAAC,EAAI,CAAC,CAGJ,GAeH,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,OAvBgB,GAAyD,CAC3E,EAAa,GAAK,CAClB,IAAS,EAAM,EAsBb,QAnBiB,GAAyD,CAC5E,EAAa,GAAM,CACnB,IAAU,EAAM,EAkBd,GAAI,EACJ,CAAA,CA7BK,MAiCX,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,aC9BzB,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"}
+{"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 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>\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\n/**\n * An action button positioned on the avatar, typically for editing. Renders a <button> element.\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\n/**\n * The avatar's image content. Renders an <img> element.\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\n/**\n * A badge indicator showing the user's online status. Renders a <div> element.\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\n/**\n * A placeholder shown when no image is available, typically displaying the user's initial. Renders a <div> element.\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-highlight': 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\n/**\n * The user container that wraps avatar content. Renders a <div> element.\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/avatar/index.mjs

@@ -19,22 +19,22 @@ var l = i.createContext(void 0), u = () => {
 	xl: 64,
 	"2xl": 96
 }, f = i.forwardRef(({ className: t, size: n = "xl", isOnline: a = !1, onlineText: o, username: c, asChild: u, children: f, shape: p = "circle", ...m }, h) => {
-	let g = u ? e : "div", _ = i.useMemo(() => ({
-		size: n,
-		isOnline: a,
-		onlineText: o,
-		username: c,
-		shape: p,
-		pixelSize: d[n]
-	}), [
-		n,
-		a,
-		c,
-		p,
-		o
-	]);
-	return /* @__PURE__ */ s(l.Provider, {
-		value: _,
+	let g = u ? e : "div";
+	return /* @__PURE__ */ s(l, {
+		value: i.useMemo(() => ({
+			size: n,
+			isOnline: a,
+			onlineText: o,
+			username: c,
+			shape: p,
+			pixelSize: d[n]
+		}), [
+			n,
+			a,
+			c,
+			p,
+			o
+		]),
 		children: /* @__PURE__ */ s(g, {
 			ref: h,
 			style: {