fix(accordion): add accordionItemComponent prop to support multiple

Author: maiieul

packages/kit-headless/src/components/accordion/accordion-inline.tsx

@@ -1,6 +1,6 @@
 import { Component, JSXNode, PropsOf, QRL, Signal } from '@builder.io/qwik';
-import { HAccordionItem } from './accordion-item';
 import { HAccordionRootImpl } from './accordion-root';
+import { Accordion } from '@qwik-ui/headless';
 
 export type AccordionRootProps = PropsOf<'div'> & {
   /** If true, multiple items can be open at the same time. */
@@ -34,17 +34,20 @@ export type AccordionRootProps = PropsOf<'div'> & {
 
   /** If true, the accordion is animated. */
   animated?: boolean;
+
+  accordionItemComponent: typeof Accordion.Item;
 };
 
 export const HAccordionRoot: Component<AccordionRootProps> = (
   props: AccordionRootProps,
 ) => {
-  const { children: accordionChildren, ...rest } = props;
+  const { children: accordionChildren, accordionItemComponent, ...rest } = props;
 
   let currItemIndex = 0;
   let initialIndex = null;
   const itemsMap = new Map();
 
+  const InternalItemComponent = accordionItemComponent || Accordion.Item;
   const childrenToProcess = (
     Array.isArray(accordionChildren) ? [...accordionChildren] : [accordionChildren]
   ) as Array<JSXNode>;
@@ -62,7 +65,7 @@ export const HAccordionRoot: Component<AccordionRootProps> = (
     }
 
     switch (child.type) {
-      case HAccordionItem: {
+      case InternalItemComponent: {
         child.props._index = currItemIndex;
         if (props.value !== undefined && props.value === child.props.value) {
           initialIndex = currItemIndex;

packages/kit-styled/src/components/accordion/accordion.tsx

@@ -5,11 +5,11 @@ import { cn } from '@qwik-ui/utils';
 
 import { LuChevronDown } from '@qwikest/icons/lucide';
 
-const Root = component$<PropsOf<typeof HeadlessAccordion.Root>>((props) => (
-  <HeadlessAccordion.Root animated {...props}>
-    <Slot />
+const Root = (props: PropsOf<typeof HeadlessAccordion.Root>) => (
+  <HeadlessAccordion.Root {...props} accordionItemComponent={Item} animated>
+    {props.children}
   </HeadlessAccordion.Root>
-));
+);
 
 const Item = component$<PropsOf<typeof HeadlessAccordion.Item>>((props) => {
   return (