feat(v2)/accordion

apps/web/src/routes/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import * as Accordion from '@repo/ui/accordion'
   import { Button } from '@repo/ui/button'
   import { Chip } from '@repo/ui/chip'
   import { CourseCard } from '@repo/ui/course-card'
@@ -41,3 +42,12 @@
 
 <h1>RecommendedTag</h1>
 <RecommendedTag />
+
+<Accordion.Root>
+  <Accordion.Item value="item-1">
+    <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
+    <Accordion.Content>
+      Yes. It adheres to the WAI-ARIA design pattern.
+    </Accordion.Content>
+  </Accordion.Item>
+</Accordion.Root>

packages/ui/package.json

@@ -27,7 +27,7 @@
     "vitest": "^2.1.8"
   },
   "dependencies": {
-    "bits-ui": "^0.21.16",
+    "bits-ui": "^0.22.0",
     "clsx": "^2.1.1",
     "lucide-svelte": "^0.468.0",
     "tailwind-merge": "^2.5.5",

packages/ui/src/components/accordion/accordion-content.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { Accordion as AccordionPrimitive } from 'bits-ui'
+  import { slide } from 'svelte/transition'
+
+  import { cn } from '../../utils'
+
+  type $$Props = AccordionPrimitive.ContentProps
+
+  let className: $$Props['class'] = undefined
+  export let transition: $$Props['transition'] = slide
+  export let transitionConfig: $$Props['transitionConfig'] = {
+    duration: 200,
+  }
+  export { className as class }
+</script>
+
+<AccordionPrimitive.Content
+  class="{cn('overflow-hidden text-sm transition-all', className)}"
+  {transition}
+  {transitionConfig}
+  {...$$restProps}
+>
+  <div class="pb-4 pt-0">
+    <slot />
+  </div>
+</AccordionPrimitive.Content>

packages/ui/src/components/accordion/accordion-item.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { Accordion as AccordionPrimitive } from 'bits-ui'
+
+  import { cn } from '../../utils'
+
+  type $$Props = AccordionPrimitive.ItemProps
+
+  let className: $$Props['class'] = undefined
+  export let value: $$Props['value']
+  export { className as class }
+</script>
+
+<AccordionPrimitive.Item {value} class="{cn('', className)}" {...$$restProps}>
+  <slot />
+</AccordionPrimitive.Item>

packages/ui/src/components/accordion/accordion-trigger.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { Accordion as AccordionPrimitive } from 'bits-ui'
+  import { ChevronDown } from 'lucide-svelte'
+
+  import { cn } from '../../utils'
+
+  type $$Props = AccordionPrimitive.TriggerProps
+  type $$Events = AccordionPrimitive.TriggerEvents
+
+  let className: $$Props['class'] = undefined
+  export let level: AccordionPrimitive.HeaderProps['level'] = 3
+  export { className as class }
+</script>
+
+<AccordionPrimitive.Header {level} class="flex">
+  <AccordionPrimitive.Trigger
+    class="{cn(
+      'flex flex-1 items-center justify-between py-4 font-medium transition-all [&[data-state=open]>svg]:rotate-180 px-2',
+      className,
+    )}"
+    {...$$restProps}
+    on:click
+  >
+    <slot />
+    <ChevronDown class="h-6 w-6 transition-transform duration-200" />
+  </AccordionPrimitive.Trigger>
+</AccordionPrimitive.Header>

packages/ui/src/components/accordion/accordion.stories.svelte

@@ -0,0 +1,116 @@
+<script context="module" lang="ts">
+  import type { Meta } from '@storybook/svelte'
+
+  import * as Accordion from './index.js'
+
+  export const meta = {
+    title: 'Atom/Accordion',
+
+    tags: ['autodocs'],
+    parameters: {
+      docs: {
+        description: {
+          component: `
+The **Accordion** component is used to organize content into expandable and collapsible sections. It is ideal for displaying structured data in a concise and interactive way.
+
+This example demonstrates the use of each sub-component:
+- **Accordion.Root**: The root container for the Accordion, which manages the overall state and behavior of the component.
+- **Accordion.Item**: Represents an individual section within the Accordion. Each item can be expanded or collapsed independently.
+- **Accordion.Trigger**: The clickable element that toggles the visibility of the corresponding content.
+- **Accordion.Content**: The content displayed when the associated Accordion.Item is expanded.
+
+You can use this component to improve content accessibility and maintain a clean UI design.
+          `,
+        },
+      },
+    },
+    argTypes: {},
+  } satisfies Meta<typeof Accordion.Root>
+</script>
+
+<script lang="ts">
+  import { Story } from '@storybook/addon-svelte-csf'
+</script>
+
+<!-- 👇 Example story using the Accordion component -->
+<Story name="Normal Accordion">
+  <Accordion.Root class="w-full sm:max-w-[70%]">
+    <Accordion.Item value="item-1">
+      <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
+      <Accordion.Content>
+        Yes. It adheres to the WAI-ARIA design pattern, ensuring accessibility
+        for users with assistive technologies.
+      </Accordion.Content>
+    </Accordion.Item>
+    <Accordion.Item value="item-2">
+      <Accordion.Trigger>Is it styled?</Accordion.Trigger>
+      <Accordion.Content>
+        Yes. It comes with default styles that align with the aesthetic of other
+        components, but you can customize it as needed.
+      </Accordion.Content>
+    </Accordion.Item>
+    <Accordion.Item value="item-3">
+      <Accordion.Trigger>Is it animated?</Accordion.Trigger>
+      <Accordion.Content>
+        Yes. The component includes smooth animations by default. However, you
+        can disable animations if you prefer a simpler interaction.
+      </Accordion.Content>
+    </Accordion.Item>
+  </Accordion.Root>
+</Story>
+
+<Story name="Root Example">
+  <Accordion.Root class="bg-gray-50 border border-gray-200 rounded-lg p-6">
+    <Accordion.Item value="item-1">
+      <Accordion.Trigger>What is the purpose of Root?</Accordion.Trigger>
+      <Accordion.Content>
+        The Root component serves as the container for all Accordion items. It
+        manages the state and controls the behavior of the entire Accordion.
+      </Accordion.Content>
+    </Accordion.Item>
+  </Accordion.Root>
+</Story>
+
+<Story name="Item Example">
+  <Accordion.Root>
+    <Accordion.Item value="item-1">
+      <Accordion.Trigger>What is an Item?</Accordion.Trigger>
+      <Accordion.Content>
+        The Item component represents an individual section in the Accordion.
+        Each Item has its own value and can be expanded or collapsed
+        independently.
+      </Accordion.Content>
+    </Accordion.Item>
+    <Accordion.Item value="item-2">
+      <Accordion.Trigger>Can multiple Items exist?</Accordion.Trigger>
+      <Accordion.Content>
+        Yes, multiple Items can exist within a single Accordion. Each Item is
+        treated as an independent section.
+      </Accordion.Content>
+    </Accordion.Item>
+  </Accordion.Root>
+</Story>
+
+<Story name="Trigger Example">
+  <Accordion.Root>
+    <Accordion.Item value="item-1">
+      <Accordion.Trigger>What is a Trigger?</Accordion.Trigger>
+      <Accordion.Content>
+        The Trigger component is the interactive element that toggles the
+        visibility of its associated Content.
+      </Accordion.Content>
+    </Accordion.Item>
+  </Accordion.Root>
+</Story>
+
+<Story name="Content Example">
+  <Accordion.Root>
+    <Accordion.Item value="item-1">
+      <Accordion.Trigger>What is Content?</Accordion.Trigger>
+      <Accordion.Content>
+        The Content component holds the information or elements that are
+        revealed when the Item is expanded.
+      </Accordion.Content>
+    </Accordion.Item>
+  </Accordion.Root>
+</Story>

packages/ui/src/components/accordion/index.ts

@@ -0,0 +1,18 @@
+import { Accordion as AccordionPrimitive } from 'bits-ui'
+
+import Content from './accordion-content.svelte'
+import Item from './accordion-item.svelte'
+import Trigger from './accordion-trigger.svelte'
+const Root = AccordionPrimitive.Root
+
+export {
+  //
+  Root as Accordion,
+  Content as AccordionContent,
+  Item as AccordionItem,
+  Trigger as AccordionTrigger,
+  Content,
+  Item,
+  Root,
+  Trigger,
+}