feat: Add Accordion component

apps/www/src/content/docs/components/accordion/demo.ts

@@ -0,0 +1,161 @@
+'use client';
+
+import { getPropsString } from '@/lib/utils';
+
+export const getCode = (props: Record<string, unknown>) => {
+  return `<Accordion${getPropsString(props)}>
+        <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.Item value="item-2">
+          <Accordion.Trigger>Is it styled?</Accordion.Trigger>
+          <Accordion.Content>
+            Yes. It comes with default styles that matches the other components.
+          </Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item value="item-3">
+          <Accordion.Trigger>Is it animated?</Accordion.Trigger>
+          <Accordion.Content>
+            Yes. It's animated by default, but you can disable it if you prefer.
+          </Accordion.Content>
+        </Accordion.Item>
+      </Accordion>`;
+};
+
+export const playground = {
+  type: 'playground',
+  controls: {
+    type: {
+      type: 'select',
+      options: ['single', 'multiple'],
+      defaultValue: 'single'
+    }
+  },
+  getCode
+};
+
+export const typeDemo = {
+  type: 'code',
+  tabs: [
+    {
+      name: 'Single',
+      code: `
+<Accordion type="single" collapsible>
+  <Accordion.Item value="item-1">
+    <Accordion.Trigger>What is Apsara?</Accordion.Trigger>
+    <Accordion.Content>
+      Apsara is a modern design system and component library built with React and TypeScript.
+    </Accordion.Content>
+  </Accordion.Item>
+  <Accordion.Item value="item-2">
+    <Accordion.Trigger>How do I get started?</Accordion.Trigger>
+    <Accordion.Content>
+      You can install Apsara using your preferred package manager and start building your application.
+    </Accordion.Content>
+  </Accordion.Item>
+  <Accordion.Item value="item-3">
+    <Accordion.Trigger>Is it customizable?</Accordion.Trigger>
+    <Accordion.Content>
+      Yes, Apsara provides extensive customization options through CSS variables and component props.
+    </Accordion.Content>
+  </Accordion.Item>
+</Accordion>`
+    },
+    {
+      name: 'Multiple',
+      code: `
+<Accordion type="multiple">
+  <Accordion.Item value="item-1">
+    <Accordion.Trigger>What is Apsara?</Accordion.Trigger>
+    <Accordion.Content>
+      Apsara is a modern design system and component library built with React and TypeScript.
+    </Accordion.Content>
+  </Accordion.Item>
+  <Accordion.Item value="item-2">
+    <Accordion.Trigger>How do I get started?</Accordion.Trigger>
+    <Accordion.Content>
+      You can install Apsara using your preferred package manager and start building your application.
+    </Accordion.Content>
+  </Accordion.Item>
+  <Accordion.Item value="item-3">
+    <Accordion.Trigger>Is it customizable?</Accordion.Trigger>
+    <Accordion.Content>
+      Yes, Apsara provides extensive customization options through CSS variables and component props.
+    </Accordion.Content>
+  </Accordion.Item>
+</Accordion>`
+    }
+  ]
+};
+export const controlledDemo = {
+  type: 'code',
+  code: `
+  function ControlledAccordion() {
+  const [value, setValue] = React.useState('item-1');
+
+  return (
+    <Accordion value={value} onValueChange={setValue}>
+      <Accordion.Item value="item-1">
+        <Accordion.Trigger>Item 1</Accordion.Trigger>
+        <Accordion.Content>Content for item 1</Accordion.Content>
+      </Accordion.Item>
+      <Accordion.Item value="item-2">
+        <Accordion.Trigger>Item 2</Accordion.Trigger>
+        <Accordion.Content>Content for item 2</Accordion.Content>
+      </Accordion.Item>
+    </Accordion>
+  );
+}`
+};
+
+export const disabledDemo = {
+  type: 'code',
+  code: `
+<Accordion>
+  <Accordion.Item value="item-1">
+    <Accordion.Trigger>Enabled Item</Accordion.Trigger>
+    <Accordion.Content>This item is enabled and can be toggled.</Accordion.Content>
+  </Accordion.Item>
+  <Accordion.Item value="item-2" disabled>
+    <Accordion.Trigger>Disabled Item</Accordion.Trigger>
+    <Accordion.Content>This item is disabled and cannot be toggled.</Accordion.Content>
+  </Accordion.Item>
+  <Accordion.Item value="item-3">
+    <Accordion.Trigger>Another Enabled Item</Accordion.Trigger>
+    <Accordion.Content>This item is also enabled.</Accordion.Content>
+  </Accordion.Item>
+</Accordion>`
+};
+
+export const customContentDemo = {
+  type: 'code',
+  code: `
+<Accordion>
+  <Accordion.Item value="item-1">
+    <Accordion.Trigger>Product Features</Accordion.Trigger>
+    <Accordion.Content>
+      <div style={{ padding: '16px' }}>
+        <h4>Key Features</h4>
+        <ul>
+          <li>Responsive design</li>
+          <li>Accessible components</li>
+          <li>TypeScript support</li>
+          <li>Customizable themes</li>
+        </ul>
+      </div>
+    </Accordion.Content>
+  </Accordion.Item>
+  <Accordion.Item value="item-2">
+    <Accordion.Trigger>Documentation</Accordion.Trigger>
+    <Accordion.Content>
+      <div style={{ padding: '16px' }}>
+        <p>Comprehensive documentation with examples and API references.</p>
+        <a href="/docs">View Documentation</a>
+      </div>
+    </Accordion.Content>
+  </Accordion.Item>
+</Accordion>`
+};

apps/www/src/content/docs/components/accordion/index.mdx

@@ -0,0 +1,83 @@
+---
+title: Accordion
+description: A vertically stacked set of interactive headings that each reveal a section of content.
+tag: new
+---
+
+import {
+  playground,
+  typeDemo,
+  controlledDemo,
+  disabledDemo,
+  customContentDemo,
+} from "./demo.ts";
+
+<Demo data={playground} />
+
+## Usage
+
+```tsx
+import { Accordion } from '@raystack/apsara'
+```
+
+## Accordion Props
+
+<auto-type-table path="./props.ts" name="AccordionRootProps" />
+
+### Accordion.Item Props
+
+<auto-type-table path="./props.ts" name="AccordionItemProps" />
+
+### Accordion.Trigger Props
+
+<auto-type-table path="./props.ts" name="AccordionTriggerProps" />
+
+### Accordion.Content Props
+
+<auto-type-table path="./props.ts" name="AccordionContentProps" />
+
+## Examples
+
+### Single vs Multiple
+
+The Accordion component supports two types of behavior:
+
+- **Single**: Only one item can be open at a time
+- **Multiple**: Multiple items can be open simultaneously
+
+<Demo data={typeDemo} />
+
+### Controlled
+
+You can control the accordion's state by providing `value` and `onValueChange` props.
+
+<Demo data={controlledDemo} />
+
+### Disabled Items
+
+Individual accordion items can be disabled using the `disabled` prop.
+
+<Demo data={disabledDemo} />
+
+### Custom Content
+
+The accordion content can contain any React elements, allowing for rich layouts and complex content.
+
+<Demo data={customContentDemo} />
+
+## Accessibility
+
+The Accordion component is built on top of [Radix UI's Accordion primitive](https://www.radix-ui.com/primitives/docs/components/accordion) and follows the WAI-ARIA design pattern for accordions. It includes:
+
+- Proper ARIA attributes for screen readers
+- Keyboard navigation support
+- Focus management
+- Semantic HTML structure
+
+## Keyboard Navigation
+
+- **Space** or **Enter**: Toggle the focused accordion item
+- **Arrow Down**: Move focus to the next accordion item
+- **Arrow Up**: Move focus to the previous accordion item
+- **Home**: Move focus to the first accordion item
+- **End**: Move focus to the last accordion item

apps/www/src/content/docs/components/accordion/props.ts

@@ -0,0 +1,83 @@
+export interface AccordionRootProps {
+  /**
+   * Controls how many accordion items can be open at once.
+   * - "single": Only one item can be open at a time
+   * - "multiple": Multiple items can be open simultaneously
+   * @defaultValue "single"
+   */
+  type?: 'single' | 'multiple';
+
+  /**
+   * The controlled value of the accordion
+   */
+  value?: string | string[];
+
+  /**
+   * The default value of the accordion
+   */
+  defaultValue?: string | string[];
+
+  /**
+   * Event handler called when the value changes
+   */
+  onValueChange?: (value: string | string[]) => void;
+
+  /**
+   * Whether the accordion is collapsible when type is single
+   * @defaultValue true
+   */
+  collapsible?: boolean;
+
+  /**
+   * Whether the accordion is disabled
+   * @defaultValue false
+   */
+  disabled?: boolean;
+
+  /**
+   * The orientation of the accordion
+   * @defaultValue "vertical"
+   */
+  orientation?: 'horizontal' | 'vertical';
+
+  /**
+   * The direction of the accordion
+   * @defaultValue "ltr"
+   */
+  dir?: 'ltr' | 'rtl';
+
+  /** Custom CSS class names */
+  className?: string;
+}
+
+export interface AccordionItemProps {
+  /**
+   * A unique value for the item
+   */
+  value: string;
+
+  /**
+   * Whether the item is disabled
+   * @defaultValue false
+   */
+  disabled?: boolean;
+
+  /** Custom CSS class names */
+  className?: string;
+}
+
+export interface AccordionTriggerProps {
+  /** Custom CSS class names */
+  className?: string;
+}
+
+export interface AccordionContentProps {
+  /**
+   * Whether the content is force mounted
+   * @defaultValue false
+   */
+  forceMount?: boolean;
+
+  /** Custom CSS class names */
+  className?: string;
+}