@spark-ui/components 17.13.0 → 17.13.1

package/dist/accordion/Accordion.d.ts

@@ -1,7 +1,8 @@
 import { Accordion as BaseAccordion } from '@base-ui/react/accordion';
 import { ComponentProps, Ref } from 'react';
-type ExtentedZagInterface = Omit<ComponentProps<typeof BaseAccordion.Root>, 'multiple' | 'render'>;
-export interface AccordionProps extends ExtentedZagInterface {
+type BaseAccordionRootProps = ComponentProps<typeof BaseAccordion.Root<string | string[]>>;
+type ExtentedBaseUIInterface = Omit<BaseAccordionRootProps, 'multiple' | 'render' | 'value' | 'defaultValue' | 'onValueChange'>;
+export interface AccordionProps extends ExtentedBaseUIInterface {
     /**
      * Change the default rendered element for the one passed as a child, merging their props and behavior.
      */
@@ -16,11 +17,23 @@ export interface AccordionProps extends ExtentedZagInterface {
     multiple?: boolean;
     design?: 'filled' | 'outlined';
     ref?: Ref<HTMLDivElement>;
+    /**
+     * The controlled value (always an array of strings)
+     */
+    value?: string[];
+    /**
+     * The default value (always an array of strings)
+     */
+    defaultValue?: string[];
+    /**
+     * Callback when the value changes (always receives an array of strings)
+     */
+    onValueChange?: (value: string[]) => void;
+}
+export declare function Accordion({ asChild, children, design, hiddenUntilFound, multiple, className, ref, value, defaultValue, onValueChange, ...props }: AccordionProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Accordion {
+    var displayName: string;
 }
-export declare const Accordion: {
-    ({ asChild, children, design, hiddenUntilFound, multiple, className, ref, ...props }: AccordionProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
 export declare const useAccordionContext: () => {
     design: "filled" | "outlined";
 };

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,{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);function l({asChild:e=!1,children:t,design:i=`outlined`,hiddenUntilFound:o=!0,multiple:l=!1,className:u,ref:d,value:f,defaultValue:p,onValueChange:m,...h}){let g=s(e,`div`),_=m?e=>{m(Array.isArray(e)?e:[e])}:void 0;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:g,value:f,defaultValue:p,onValueChange:_,...h,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 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"}
+{"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 BaseAccordionRootProps = ComponentProps<typeof BaseAccordion.Root<string | string[]>>\n\ntype ExtentedBaseUIInterface = Omit<\n  BaseAccordionRootProps,\n  'multiple' | 'render' | 'value' | 'defaultValue' | 'onValueChange'\n>\n\nexport interface AccordionProps extends ExtentedBaseUIInterface {\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   * The controlled value (always an array of strings)\n   */\n  value?: string[]\n  /**\n   * The default value (always an array of strings)\n   */\n  defaultValue?: string[]\n  /**\n   * Callback when the value changes (always receives an array of strings)\n   */\n  onValueChange?: (value: string[]) => void\n}\n\nconst AccordionContext = createContext<{\n  design: 'filled' | 'outlined'\n} | null>(null)\n\nexport function Accordion({\n  asChild = false,\n  children,\n  design = 'outlined',\n  hiddenUntilFound = true,\n  multiple = false,\n  className,\n  ref,\n  value,\n  defaultValue,\n  onValueChange,\n  ...props\n}: AccordionProps) {\n  const renderSlot = useRenderSlot(asChild, 'div')\n\n  // Wrap the onValueChange to always provide string[]\n  const handleValueChange = onValueChange\n    ? (newValue: string | string[]) => {\n        // Base UI returns string when multiple=false, string[] when multiple=true\n        // We normalize to always return string[]\n        const normalizedValue = Array.isArray(newValue) ? newValue : [newValue]\n        onValueChange(normalizedValue)\n      }\n    : undefined\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        value={value as any}\n        defaultValue={defaultValue as any}\n        onValueChange={handleValueChange as any}\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,GCqChE,IAAM,GAAA,EAAA,EAAA,eAEI,KAAK,CAEf,SAAgB,EAAU,CACxB,UAAU,GACV,WACA,SAAS,WACT,mBAAmB,GACnB,WAAW,GACX,YACA,MACA,QACA,eACA,gBACA,GAAG,GACc,CACjB,IAAM,EAAa,EAAc,EAAS,MAAM,CAG1C,EAAoB,EACrB,GAAgC,CAI/B,EADwB,MAAM,QAAQ,EAAS,CAAG,EAAW,CAAC,EAAS,CACzC,EAEhC,IAAA,GAEJ,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,EACD,QACO,eACd,cAAe,EACf,GAAI,EAEH,WACkB,CAAA,CACJ,CAAA,CAIvB,EAAU,YAAc,YAExB,IAAa,MAA4B,CACvC,IAAM,GAAA,EAAA,EAAA,YAAqB,EAAiB,CAE5C,GAAI,CAAC,EACH,MAAM,MAAM,+DAA+D,CAG7E,OAAO,GCnFI,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

@@ -12,8 +12,11 @@ function l(t, n) {
 }
 //#endregion
 //#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");
+var u = i(null);
+function d({ asChild: e = !1, children: t, design: i = "outlined", hiddenUntilFound: a = !0, multiple: s = !1, className: c, ref: d, value: f, defaultValue: p, onValueChange: m, ...h }) {
+	let g = l(e, "div"), _ = m ? (e) => {
+		m(Array.isArray(e) ? e : [e]);
+	} : void 0;
 	return /* @__PURE__ */ o(u, {
 		value: { design: i },
 		children: /* @__PURE__ */ o(n.Root, {
@@ -22,12 +25,15 @@ var u = i(null), d = ({ asChild: e = !1, children: t, design: i = "outlined", hi
 			multiple: s,
 			hiddenUntilFound: a,
 			className: r("bg-surface h-fit rounded-lg", c),
-			render: p,
-			...f,
+			render: g,
+			value: f,
+			defaultValue: p,
+			onValueChange: _,
+			...h,
 			children: t
 		})
 	});
-};
+}
 d.displayName = "Accordion";
 var f = () => {
 	let e = a(u);

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 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"}
+{"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 BaseAccordionRootProps = ComponentProps<typeof BaseAccordion.Root<string | string[]>>\n\ntype ExtentedBaseUIInterface = Omit<\n  BaseAccordionRootProps,\n  'multiple' | 'render' | 'value' | 'defaultValue' | 'onValueChange'\n>\n\nexport interface AccordionProps extends ExtentedBaseUIInterface {\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   * The controlled value (always an array of strings)\n   */\n  value?: string[]\n  /**\n   * The default value (always an array of strings)\n   */\n  defaultValue?: string[]\n  /**\n   * Callback when the value changes (always receives an array of strings)\n   */\n  onValueChange?: (value: string[]) => void\n}\n\nconst AccordionContext = createContext<{\n  design: 'filled' | 'outlined'\n} | null>(null)\n\nexport function Accordion({\n  asChild = false,\n  children,\n  design = 'outlined',\n  hiddenUntilFound = true,\n  multiple = false,\n  className,\n  ref,\n  value,\n  defaultValue,\n  onValueChange,\n  ...props\n}: AccordionProps) {\n  const renderSlot = useRenderSlot(asChild, 'div')\n\n  // Wrap the onValueChange to always provide string[]\n  const handleValueChange = onValueChange\n    ? (newValue: string | string[]) => {\n        // Base UI returns string when multiple=false, string[] when multiple=true\n        // We normalize to always return string[]\n        const normalizedValue = Array.isArray(newValue) ? newValue : [newValue]\n        onValueChange(normalizedValue)\n      }\n    : undefined\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        value={value as any}\n        defaultValue={defaultValue as any}\n        onValueChange={handleValueChange as any}\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;;;;ACqChE,IAAM,IAAmB,EAEf,KAAK;AAEf,SAAgB,EAAU,EACxB,aAAU,IACV,aACA,YAAS,YACT,sBAAmB,IACnB,cAAW,IACX,cACA,QACA,UACA,iBACA,kBACA,GAAG,KACc;CACjB,IAAM,IAAa,EAAc,GAAS,MAAM,EAG1C,IAAoB,KACrB,MAAgC;AAI/B,IADwB,MAAM,QAAQ,EAAS,GAAG,IAAW,CAAC,EAAS,CACzC;KAEhC,KAAA;AAEJ,QACE,kBAAC,GAAD;EAAkB,OAAO,EAAE,WAAQ;YACjC,kBAAC,EAAc,MAAf;GACE,wBAAqB;GAChB;GACK;GACQ;GAClB,WAAW,EAAG,+BAA+B,EAAU;GACvD,QAAQ;GACD;GACO;GACd,eAAe;GACf,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;GCnFI,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/components",
-  "version": "17.13.0",
+  "version": "17.13.1",
   "license": "MIT",
   "description": "Spark (Leboncoin design system) components.",
   "exports": {
@@ -48,9 +48,9 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.5.0",
-    "@spark-ui/hooks": "17.13.0",
-    "@spark-ui/icons": "17.13.0",
-    "@spark-ui/internal-utils": "17.13.0",
+    "@spark-ui/hooks": "17.13.1",
+    "@spark-ui/icons": "17.13.1",
+    "@spark-ui/internal-utils": "17.13.1",
     "@zag-js/pagination": "1.30.0",
     "@zag-js/react": "1.30.0",
     "class-variance-authority": "0.7.1",
@@ -62,7 +62,7 @@
     "react-snap-carousel": "0.5.1"
   },
   "peerDependencies": {
-    "@spark-ui/theme-utils": "17.13.0",
+    "@spark-ui/theme-utils": "17.13.1",
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "tailwindcss": "4.1.18"