feat(accordion): accordion component

packages/components/accordion/.npmignore

@@ -0,0 +1,2 @@
+src
+**/*.stories.*

packages/components/accordion/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Adevinta ASA.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/components/accordion/README.md

@@ -0,0 +1,13 @@
+# Accordion
+> @spark-ui/accordion
+
+[![storybook](https://img.shields.io/badge/storybook-black?logo=storybook)](https://sparkui.vercel.app/?path=/docs/components-accordion--docs)
+[![documentation](https://img.shields.io/badge/documentation-black?logo=googledocs)](https://sparkui-adv.vercel.app/docs/components/accordion)
+[![issue](https://img.shields.io/badge/report%20a%20bug-black?logo=openbugbounty&logoColor=red)](https://github.com/adevinta/spark/issues/new?&projects=4&template=bug-report.yml&assignees=&labels=component,accordion)
+[![npm](https://img.shields.io/npm/dt/%40spark-ui/accordion?logo=npm&labelColor=black)](https://www.npmjs.com/package/@spark-ui/accordion)
+
+
+This package is part of the [`@spark-ui`](https://github.com/adevinta/spark) react-js user interface component library project.
+
+[![Issues open](https://img.shields.io/github/issues-search/adevinta/spark?query=is%3Aopen%20label%3Acomponent%20label%3Aaccordion&logo=openbugbounty&logoColor=red&label=issues%20open&color=red)](https://github.com/adevinta/spark/issues?q=is%3Aopen+label%3Acomponent+label%3Aaccordion)
+[![NPM](https://img.shields.io/npm/l/%40spark-ui%2Faccordion)](https://github.com/adevinta/spark/blob/main/packages/components/accordion/LICENSE.md)

packages/components/accordion/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@spark-ui/accordion",
+  "version": "0.0.0",
+  "description": "An accordion is a vertically stacked set of interactive headings containing a title, content snippet, or thumbnail representing a section of content.",
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "@spark-ui",
+    "react",
+    "component",
+    "accessible",
+    "accessibility",
+    "wai-aria",
+    "aria",
+    "a11y",
+    "accordion",
+    "disclosure"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "vite build"
+  },
+  "peerDependencies": {
+    "@spark-ui/theme-utils": "^4.0.0",
+    "react": "^18.0 || ^19.0",
+    "react-dom": "^18.0 || ^19.0",
+    "tailwindcss": "^3.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/adevinta/spark.git",
+    "directory": "packages/components/accordion"
+  },
+  "config": {
+    "title": "accordion",
+    "category": "components"
+  },
+  "bugs": {
+    "url": "https://github.com/adevinta/spark/issues?q=is%3Aopen+label%3A%22Component%3A+accordion%22"
+  },
+  "homepage": "https://sparkui.vercel.app",
+  "license": "MIT",
+  "dependencies": {
+    "@spark-ui/slot": "^1.7.1",
+    "@zag-js/accordion": "^0.56.1",
+    "@zag-js/react": "^0.56.1",
+    "@spark-ui/icon": "^2.1.5",
+    "@spark-ui/icons": "^1.21.10"
+  }
+}

packages/components/accordion/src/Accordion.doc.mdx

@@ -0,0 +1,97 @@
+import { Meta, Canvas } from '@storybook/addon-docs'
+import { ArgTypes } from '@docs/helpers/ArgTypes'
+import { Kbd } from '@spark-ui/kbd'
+
+import { Accordion } from '.'
+
+import * as stories from './Accordion.stories'
+
+<Meta of={stories} />
+
+# Accordion
+
+An accordion is a vertically stacked set of interactive headings containing a title, content snippet, or thumbnail representing a section of content.
+
+## Install
+
+```sh
+npm install @spark-ui/accordion
+```
+
+## Import
+
+```tsx
+import { Accordion } from '@spark-ui/accordion'
+```
+
+## Props
+
+<ArgTypes
+  of={Accordion}
+  description="Contains all the parts of an accordion."
+  subcomponents={{
+    'Accordion.Item': {
+      of: Accordion.Item,
+      description: 'Contains all the parts of a collapsible section..',
+    },
+    'Accordion.ItemTrigger': {
+      of: Accordion.ItemTrigger,
+      description: 'Toggles the collapsed state of its associated item.',
+    },
+    'Accordion.ItemContent': {
+      of: Accordion.ItemContent,
+      description: 'Contains the collapsible content for an item.',
+    },
+  }}
+/>
+
+## Usage
+
+### Default
+
+A `Accordion` is closed by default. Interacting with its trigger will open the associated content.
+
+<Canvas of={stories.Default} />
+
+### Controlled
+
+Use `value` to control which panels are opened.
+
+<Canvas of={stories.Controlled} />
+
+### Disabled
+
+Use `disabled` to disabled the full `Accordion`.
+
+<Canvas of={stories.Disabled} />
+
+### Disabled item
+
+Use `disabled` on `Accordion.Item` to disabled a single panel.
+
+<Canvas of={stories.DisabledItem} />
+
+### Multiple
+
+Use `multiple` to allow multiple panels to be opened at the same time.
+
+Use `defaultValue` to pass an array of panels values to open by default.
+
+<Canvas of={stories.Multiple} />
+
+## Accessibility
+
+Adheres to the [Disclosure (Show/Hide) Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/).
+
+### Keyboard Interactions
+
+- <Kbd>Enter</Kbd> - activates the disclosure control and toggles the visibility of the disclosure
+  content.
+- <Kbd>Space</Kbd> - activates the disclosure control and toggles the visibility of the disclosure
+  content.
+
+### WAI-ARIA Roles, States, and Properties
+
+- The element that shows and hides the content has role [button](https://w3c.github.io/aria/#button).
+- When the content is visible, the element with role button has [aria-expanded](https://w3c.github.io/aria/#aria-expanded) set to `true`. When the content area is hidden, it is set to `false`.
+- Optionally, the element with role button has a value specified for [aria-controls](https://w3c.github.io/aria/#aria-controls) that refers to the element that contains all the content that is shown or hidden.