refactor: update accordion demo

Author: mertsincan

apps/showcase/demo/styled/accordion/basic-demo.tsx

@@ -14,7 +14,7 @@ export default function BasicDemo() {
                 <Accordion.Content>
                     <p className="text-sm">
                         This service helps you manage your projects more efficiently by offering real-time collaboration, task tracking, and powerful
-                        analytics. Whether you’re working solo or in a team, it’s built to scale with your needs.
+                        analytics.
                     </p>
                 </Accordion.Content>
             </Accordion.Panel>

apps/showcase/demo/styled/accordion/with-radiobutton-demo.tsx

@@ -1,5 +1,5 @@
 'use client';
-import type { useAccordionChangeEvent } from '@primereact/types/shared/accordion';
+import type { AccordionRootValueChangeEvent } from '@primereact/types/shared/accordion';
 import type { RadioButtonGroupValueChangeEvent } from '@primereact/types/shared/radiobuttongroup';
 import { Accordion } from '@primereact/ui/accordion';
 import { Button } from '@primereact/ui/button';
@@ -41,22 +41,26 @@ export default function WithRadioButtonDemo() {
                 >
                     <Accordion.Root
                         value={selected}
-                        onChange={(e: useAccordionChangeEvent) => setSelected(e.value as string)}
+                        onValueChange={(e: AccordionRootValueChangeEvent) => setSelected(e.value as string)}
                         className="w-full border border-surface-200 dark:border-surface-700 rounded-md divide-y divide-surface-200 dark:divide-surface-700"
                     >
                         {items.map((item) => (
-                            <Accordion.Panel key={item.value} value={item.value} className="last:border-none transition-all ease-out">
+                            <Accordion.Panel key={item.value} value={item.value} className="last:border-none">
                                 <Accordion.Header
                                     onClick={() => setSelected(item.value)}
-                                    className="flex items-center justify-between bg-transparent py-3"
+                                    className="flex items-center justify-between bg-transparent px-4 py-3"
                                 >
                                     <span className="flex items-center gap-4">
-                                        <RadioButton.Root inputId={`radio-${item.value}`} name="price" value={item.value} />
+                                        <RadioButton.Root inputId={`radio-${item.value}`} name="price" value={item.value}>
+                                            <RadioButton.Box>
+                                                <RadioButton.Indicator match="checked" />
+                                            </RadioButton.Box>
+                                        </RadioButton.Root>
                                         <span className="font-semibold text-base">{item.label}</span>
                                     </span>
                                     <span className="font-semibold text-base">{item.price}</span>
                                 </Accordion.Header>
-                                <Accordion.Content className="bg-transparent px-4 pb-3.5 leading-6 pl-12.5">
+                                <Accordion.Content className="bg-transparent px-4 leading-6 pl-12.5">
                                     <p className="text-sm">{item.description}</p>
                                 </Accordion.Content>
                             </Accordion.Panel>