@forthtilliath/forth-ui 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Forthtilliath
+
+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.

package/README.md

@@ -0,0 +1,279 @@
+# @forthtilliath/forth-ui
+
+Higher-level, opinionated React components built on top of
+[`@forthtilliath/shadcn-ui`](../shadcn-ui) primitives. Where shadcn-ui gives
+you the building blocks (`Button`, `Popover`, `Command`, ...), forth-ui
+assembles them into complete, batteries-included patterns — a `Combobox`
+built from `Popover` + `Command`, a `PasswordInput` with a strength meter, a
+`Dropdrawer` that's a `DropdownMenu` on desktop and a `Drawer` on mobile —
+so you don't have to wire the same recipe from scratch in every project.
+
+58 components across 8 categories, styled with Tailwind CSS and
+`class-variance-authority`, fully typed, and browsable in Storybook
+(`pnpm run dev:sb` from the repo root).
+
+## Table of contents
+
+- [Why forth-ui](#why-forth-ui)
+- [Installation](#installation)
+- [Usage](#usage)
+- [Components](#components)
+- [Conventions](#conventions)
+- [Theming](#theming)
+- [Development](#development)
+- [License](#license)
+
+## Why forth-ui
+
+- **Complete patterns, not just primitives.** Every component solves a
+  whole problem — form field wiring (`Field`), file upload with previews
+  (`Dropzone`, `ImageInput`), an imperative confirm dialog
+  (`useConfirm`) — instead of leaving the composition to each consumer.
+- **Consistent variants.** Every component that has visual variants uses
+  the same `class-variance-authority` shape (`variant`, `size`, `look`,
+  `shape`, ...), so once you've learned one component's API, the others
+  feel familiar.
+- **One folder, one subpath import.** No barrel file dragging in the whole
+  library — `import { Combobox } from "@forthtilliath/forth-ui/components/combobox"`
+  pulls in exactly that component's code.
+- **Distributable like shadcn.** Every component (but `Grid`, see
+  [Registry](#registry)) is also published as a
+  [shadcn-compatible registry item](../../../apps/shadweb/registry/forth-ui),
+  so it can be vendored source-first into a consuming project instead of
+  installed as an opaque `node_modules` dependency.
+
+## Installation
+
+### As a workspace package (this monorepo)
+
+`forth-ui` is `private: true` and consumed internally via the pnpm
+workspace:
+
+```json
+{
+  "dependencies": {
+    "@forthtilliath/forth-ui": "workspace:*"
+  }
+}
+```
+
+Import the compiled stylesheet once, alongside your component imports:
+
+```ts
+import "@forthtilliath/forth-ui/styles/globals.css";
+```
+
+Components are built to `dist/` (`./components/*` →
+`./dist/components/*/index.js`), so run `pnpm run build` (or `dev`) in
+this package after source changes for consumers to pick them up.
+
+### Via the shadcn registry
+
+Every component also ships as a
+[shadcn registry item](https://ui.shadcn.com/docs/registry) — the source
+files land directly in _your_ project (`components/forth-ui/<name>/`),
+import-rewritten to your own `components.json` aliases, exactly like
+`npx shadcn add button` does for the official shadcn/ui components:
+
+```bash
+npx shadcn add <registry-url>/combobox.json
+```
+
+Add `forth-ui` as a named registry in your `components.json` to use the
+short form instead:
+
+```json
+{
+  "registries": {
+    "@forth-ui": "<registry-url>/{name}.json"
+  }
+}
+```
+
+```bash
+npx shadcn add @forth-ui/combobox
+```
+
+Cross-component dependencies (e.g. `Combobox` depending on another
+forth-ui component) and shadcn primitives (e.g. `Popover`) are declared as
+`registryDependencies` and resolve automatically — `shadcn add` cascades
+and installs everything the component needs. See
+[apps/shadweb](../../../apps/shadweb) for how the registry itself is built.
+
+## Usage
+
+```tsx
+import { Field } from "@forthtilliath/forth-ui/components/field";
+import { Combobox } from "@forthtilliath/forth-ui/components/combobox";
+
+function Example() {
+  return (
+    <Field label="Framework" description="Pick the one you use most.">
+      <Combobox
+        options={[
+          { value: "react", label: "React" },
+          { value: "vue", label: "Vue" },
+        ]}
+        placeholder="Select a framework..."
+      />
+    </Field>
+  );
+}
+```
+
+## Components
+
+Grouped the same way as the Storybook sidebar (`forth-ui/<Category>/...`).
+
+### Layout
+
+| Component           | Import                       | Description                                                                   |
+| ------------------- | ---------------------------- | ----------------------------------------------------------------------------- |
+| `Accordion`         | `components/accordion`       | A vertically stacked set of interactive headings that each reveal a section.  |
+| `BentoGrid`         | `components/bento-grid`      | A CSS-grid layout for unevenly-sized cards ("bento box" layouts).             |
+| `Collapsible`       | `components/collapsible`     | An interactive component which expands/collapses a single panel.              |
+| `Grid`, `Grid.Item` | `components/grid`            | CSS-grid layout helpers with a built-in debug overlay.                        |
+| `InfiniteScroll`    | `components/infinite-scroll` | Calls `onLoadMore` once a sentinel scrolls into view.                         |
+| `Marquee`           | `components/marquee`         | Infinitely scrolls its children (a logo wall, a ticker).                      |
+| `Reparent`          | `components/reparent`        | Moves children between different container elements at different breakpoints. |
+| `Repeat`            | `components/repeat`          | Repeats a component a specified number of times.                              |
+| `ScrollShadow`      | `components/scroll-shadow`   | A vertically-scrollable container with fade-out edge shadows.                 |
+| `Separator`         | `components/separator`       | Visually or semantically separates content.                                   |
+| `Spacer`            | `components/spacer`          | Adds space between components — a flexible filler or a fixed gap.             |
+| `Stepper`           | `components/stepper`         | A numbered sequence of steps for a multi-stage flow.                          |
+
+### Navigation
+
+| Component                    | Import                  | Description                                                               |
+| ---------------------------- | ----------------------- | ------------------------------------------------------------------------- |
+| `Breadcrumb`                 | `components/breadcrumb` | Displays the path to the current resource using a hierarchy of links.     |
+| `Link`, `LinkPreview`        | `components/link`       | A styled hyperlink, plus a hover-triggered metadata preview card.         |
+| `Navbar`                     | `components/navbar`     | A fixed, floating page header that shrinks on scroll, plus a mobile menu. |
+| `Pagination`                 | `components/pagination` | Navigates between pages, computing visible page numbers and ellipses.     |
+| `Scrollspy` (`useScrollspy`) | `components/scrollspy`  | Tracks which element id is currently scrolled into view.                  |
+
+### Buttons & Actions
+
+| Component               | Import              | Description                                                                    |
+| ----------------------- | ------------------- | ------------------------------------------------------------------------------ |
+| `Button`, `ButtonGroup` | `components/button` | A button, or a component that looks like one, plus joined button rows/columns. |
+| `Chip`                  | `components/chip`   | A compact, interactive element for status, categories, or filters.             |
+
+### Forms
+
+| Component                 | Import                      | Description                                                              |
+| ------------------------- | --------------------------- | ------------------------------------------------------------------------ |
+| `CheckboxGroup`           | `components/checkbox`       | A group of checkboxes sharing a single array value.                      |
+| `ColorPicker`             | `components/color-picker`   | A color swatch + hex input, synced with the native color picker.         |
+| `Combobox`, `MultiSelect` | `components/combobox`       | An autocomplete/searchable select, and its multi-value variant.          |
+| `DatePicker`              | `components/date-picker`    | A single-date picker built on a `Popover` + `Calendar` recipe.           |
+| `Dropzone`                | `components/dropzone`       | A drag-and-drop file upload zone, listing accepted files below.          |
+| `Field`                   | `components/field`          | Wires a label, description and error message to a single form control.   |
+| `ImageInput`              | `components/image-input`    | A click-to-upload image picker with a live preview.                      |
+| `NumberInput`             | `components/number-input`   | A numeric input with increment/decrement stepper buttons.                |
+| `PasswordInput`           | `components/password-input` | A password `Input` with a show/hide toggle, plus a strength meter.       |
+| `RadioCard`               | `components/radio`          | A card-style `RadioGroup` item — the whole card is the clickable target. |
+| `Rating`                  | `components/rating`         | A star rating control with keyboard navigation and hover preview.        |
+| `SubmitButton`            | `components/submit-button`  | A submit `Button` that shows its own loading state via `useFormStatus`.  |
+| `TagsInput`               | `components/tags-input`     | A flexible input for adding/removing multiple tags.                      |
+
+### Feedback
+
+| Component            | Import                           | Description                                                             |
+| -------------------- | -------------------------------- | ----------------------------------------------------------------------- |
+| `Alert`              | `components/alert`               | Displays a callout for user attention.                                  |
+| `Badge`              | `components/badge`               | Displays a badge or a component that looks like a badge.                |
+| `Banner`             | `components/banner`              | A full-width, page-level announcement bar.                              |
+| `CountAnimation`     | `components/count-animation`     | Animates a number counting up (or down) to a value whenever it changes. |
+| `MultiStepLoader`    | `components/multi-step-loader`   | A full-screen overlay stepping through loading messages.                |
+| `NotificationCenter` | `components/notification-center` | A bell-icon trigger with an unread badge, opening a notification list.  |
+| `Progress`           | `components/progress`            | Displays an indicator showing the completion progress of a task.        |
+| `ScrollProgress`     | `components/scroll-progress`     | A fixed bar tracking scroll percentage of the page or a container.      |
+| `Spinner`            | `components/spinner`             | An accessible loading indicator, in one of a few visual styles.         |
+
+### Overlays
+
+| Component        | Import                       | Description                                                                         |
+| ---------------- | ---------------------------- | ----------------------------------------------------------------------------------- |
+| `CommandPalette` | `components/command-palette` | A global command menu (Cmd/Ctrl+K to open).                                         |
+| `useConfirm`     | `components/confirm-dialog`  | An imperative `await confirm({...})` alternative to hand-wiring an `AlertDialog`.   |
+| `Dropdrawer`     | `components/dropdrawer`      | A menu that renders as a `DropdownMenu` on desktop and a bottom `Drawer` on mobile. |
+
+### Data Display
+
+| Component               | Import                        | Description                                                              |
+| ----------------------- | ----------------------------- | ------------------------------------------------------------------------ |
+| `Avatar`, `AvatarGroup` | `components/avatar`           | An image with a fallback, status/badge indicators, and stacked grouping. |
+| `DescriptionList`       | `components/description-list` | A description list, with terms and descriptions.                         |
+| `FileList`              | `components/file-list`        | Displays a list of files with name, size, and upload progress.           |
+| `Kbd`                   | `components/kbd`              | Displays which key or combination of keys performs a given action.       |
+| `QrCode`                | `components/qr-code`          | Generates a QR code from a string, rendered as inline SVG.               |
+| `RelativeTime`          | `components/relative-time`    | Displays a live-updating time, defaulting to the local timezone.         |
+| `Sortable`              | `components/sortable`         | A drag-to-reorder list built on native HTML5 drag events.                |
+| `Timeline`              | `components/timeline`         | A vertical sequence of dated events, connected by a line.                |
+| `Tree`                  | `components/tree`             | A hierarchical, expandable/collapsible list of nodes.                    |
+
+### Code & Content
+
+| Component   | Import                  | Description                                                      |
+| ----------- | ----------------------- | ---------------------------------------------------------------- |
+| `CodeBlock` | `components/code-block` | A syntax-highlighted code block with a copy-to-clipboard button. |
+| `Snippet`   | `components/snippet`    | Displays and copies code in a tabbed interface.                  |
+
+## Conventions
+
+- **One folder per component**, matching the `exports: "./components/*"`
+  map — folders that export more than one related component (`Avatar` +
+  `AvatarGroup`, `Combobox` + `MultiSelect`, `Button` + `ButtonGroup`,
+  `Link` + `LinkPreview`) still ship as a single import path.
+- **Variants via `class-variance-authority`.** Components with visual
+  variants keep them in a co-located `variants.ts`, exporting both the
+  `cva()` call and its `VariantProps` type (e.g. `BadgeVariants`).
+- **Multi-part `className`.** Components with more than one internal
+  element accept `className` as an object instead of a string, keyed by
+  part (`{ root?, trigger?, content?, ... }`), so you can target exactly
+  the part you need without fighting specificity.
+- **`fallback`/`children`-first fallbacks**, not silent empty states —
+  e.g. `Avatar`'s `fallback` prop is required, not optional.
+
+## Theming
+
+forth-ui has no styles of its own beyond Tailwind utility classes and the
+CSS variables (`--primary`, `--muted`, `--border`, ...) already defined by
+[`@forthtilliath/shadcn-ui`](../shadcn-ui)'s theme. Theming forth-ui means
+theming shadcn-ui — swap the CSS variables (or the whole theme preset) and
+every forth-ui component follows.
+
+## Development
+
+```bash
+pnpm run dev            # concurrently: tsc --watch + tailwind --watch
+pnpm run build          # tsc + tailwind build -> dist/
+pnpm run check-types    # tsc --noEmit
+pnpm run lint           # eslint
+```
+
+Every component has a matching Storybook story under
+[`apps/react-sb/src/stories/forth-ui`](../../../apps/react-sb/src/stories/forth-ui) —
+run `pnpm run dev:sb` from the repo root to browse them all, organized into
+the same 8 categories as this README.
+
+### Registry
+
+[`apps/shadweb/scripts/generate-forth-ui-registry.ts`](../../../apps/shadweb/scripts/generate-forth-ui-registry.ts)
+regenerates the registry from this package's source — never hand-edit
+`apps/shadweb/registry/forth-ui/**` directly. From `apps/shadweb`:
+
+```bash
+pnpm run registry:generate  # source -> apps/shadweb/registry/forth-ui + registry.json
+pnpm run registry:build     # registry.json -> public/r/*.json (shadcn build)
+pnpm run registry:sync      # both, in order
+```
+
+`Grid` is intentionally excluded — it depends on two private, unpublished
+monorepo packages (`@forthtilliath/react-hooks`, `@forthtilliath/types`)
+that aren't inlined into the registry item yet.
+
+## License
+
+MIT

package/dist/components/accordion/accordion-items.d.ts

@@ -0,0 +1,3 @@
+import type { AccordionProps } from "./types";
+export declare function Items({ hideChevron, chevronAlignment, customChevron, items, icon, classNameItem, classNameTrigger, classNameContent, variant, size, generateId, }: Omit<AccordionProps, "multiple" | "className">): import("react").JSX.Element[];
+//# sourceMappingURL=accordion-items.d.ts.map

package/dist/components/accordion/accordion-items.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-items.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/accordion-items.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAO9C,wBAAgB,KAAK,CAAC,EACpB,WAAW,EACX,gBAAgB,EAChB,aAAa,EACb,KAAK,EACL,IAAI,EACJ,aAAa,EACb,gBAAgB,EAChB,gBAAgB,EAChB,OAAO,EACP,IAAI,EACJ,UAA+C,GAChD,EAAE,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,WAAW,CAAC,iCAuEhD"}

package/dist/components/accordion/accordion-items.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AccordionContent, AccordionItem, AccordionTrigger, } from "@forthtilliath/shadcn-ui/components/accordion";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+import { accordionContentVariants, accordionItemVariants, accordionTriggerVariants, } from "./variants";
+export function Items({ hideChevron, chevronAlignment, customChevron, items, icon, classNameItem, classNameTrigger, classNameContent, variant, size, generateId = (index) => `item-${String(index)}`, }) {
+    return items.map(({ title, subtitle, content, disabled, ...props }, index) => {
+        let iconItem = icon;
+        if ("icon" in props)
+            iconItem = props.icon;
+        const triggerItem = (_jsxs("div", { className: "flex-1 flex flex-col text-start", children: [_jsx("span", { "data-slot": "title", className: "group-hover:underline [&_svg]:-order-1", children: title }), !!subtitle && (_jsx("span", { "data-slot": "subtitle", className: "text-muted-foreground font-normal", children: subtitle }))] }));
+        return (_jsxs(AccordionItem, { value: generateId(index), className: cn(accordionItemVariants({ variant, size }), classNameItem), children: [_jsx(AccordionTrigger, { disabled: disabled, hideChevron: hideChevron, customChevron: customChevron, className: cn(accordionTriggerVariants({
+                        variant,
+                        size,
+                        disabled,
+                        chevronAlignment,
+                    }), classNameTrigger), children: iconItem ? (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { "data-slot": "icon", className: "shrink-0", children: iconItem }), triggerItem] })) : (triggerItem) }), _jsx(AccordionContent, { className: cn(accordionContentVariants({ variant, size }), classNameContent), children: content })] }, generateId(index)));
+    });
+}

package/dist/components/accordion/accordion-multiple.d.ts

@@ -0,0 +1,3 @@
+import type { MultipleProps } from "./types";
+export declare function AccordionMultiple({ className, variant, size, hideChevron, chevronAlignment, customChevron, items, icon, classNameItem, classNameTrigger, classNameContent, generateId, ...props }: MultipleProps): import("react").JSX.Element;
+//# sourceMappingURL=accordion-multiple.d.ts.map

package/dist/components/accordion/accordion-multiple.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-multiple.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/accordion-multiple.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAG7C,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,OAAO,EACP,IAAI,EACJ,WAAW,EACX,gBAAgB,EAChB,aAAa,EACb,KAAK,EACL,IAAI,EACJ,aAAa,EACb,gBAAgB,EAChB,gBAAgB,EAChB,UAAU,EACV,GAAG,KAAK,EACT,EAAE,aAAa,+BAsBf"}

package/dist/components/accordion/accordion-multiple.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Accordion as AccordionPrimitive } from "@forthtilliath/shadcn-ui/components/accordion";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+import { Items } from "./accordion-items";
+import { accordionRootVariants } from "./variants";
+export function AccordionMultiple({ className, variant, size, hideChevron, chevronAlignment, customChevron, items, icon, classNameItem, classNameTrigger, classNameContent, generateId, ...props }) {
+    return (_jsx(AccordionPrimitive, { type: "multiple", className: cn(accordionRootVariants({ variant, size }), className), ...props, children: _jsx(Items, { variant: variant, size: size, hideChevron: hideChevron, chevronAlignment: chevronAlignment, customChevron: customChevron, items: items, icon: icon, classNameItem: classNameItem, classNameTrigger: classNameTrigger, classNameContent: classNameContent, generateId: generateId }) }));
+}

package/dist/components/accordion/accordion-single.d.ts

@@ -0,0 +1,3 @@
+import type { SingleProps } from "./types";
+export declare function AccordionSingle({ className, variant, size, hideChevron, chevronAlignment, customChevron, items, icon, classNameItem, classNameTrigger, classNameContent, generateId, ...props }: SingleProps): import("react").JSX.Element;
+//# sourceMappingURL=accordion-single.d.ts.map

package/dist/components/accordion/accordion-single.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-single.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/accordion-single.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAG3C,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,OAAO,EACP,IAAI,EACJ,WAAW,EACX,gBAAgB,EAChB,aAAa,EACb,KAAK,EACL,IAAI,EACJ,aAAa,EACb,gBAAgB,EAChB,gBAAgB,EAChB,UAAU,EACV,GAAG,KAAK,EACT,EAAE,WAAW,+BAsBb"}

package/dist/components/accordion/accordion-single.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Accordion as AccordionPrimitive } from "@forthtilliath/shadcn-ui/components/accordion";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+import { Items } from "./accordion-items";
+import { accordionRootVariants } from "./variants";
+export function AccordionSingle({ className, variant, size, hideChevron, chevronAlignment, customChevron, items, icon, classNameItem, classNameTrigger, classNameContent, generateId, ...props }) {
+    return (_jsx(AccordionPrimitive, { type: "single", className: cn(accordionRootVariants({ variant, size }), className), ...props, children: _jsx(Items, { variant: variant, size: size, hideChevron: hideChevron, chevronAlignment: chevronAlignment, customChevron: customChevron, items: items, icon: icon, classNameItem: classNameItem, classNameTrigger: classNameTrigger, classNameContent: classNameContent, generateId: generateId }) }));
+}

package/dist/components/accordion/accordion.d.ts

@@ -0,0 +1,17 @@
+import type { AccordionProps } from "./types";
+/**
+ * A vertically stacked set of interactive headings that each reveal a section of content.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2025 Forth
+ *
+ * @see https://ui.shadcn.com/docs/components/accordion
+ * @see https://motion-primitives.com/docs/accordion
+ * @see https://originui.com/accordion
+ * @see https://www.hextaui.com/docs/ui/components/accordion
+ * @see https://www.shadcnui-blocks.com/components/accordion
+ */
+export declare function Accordion({ multiple, ...props }: AccordionProps): import("react").JSX.Element;
+//# sourceMappingURL=accordion.d.ts.map

package/dist/components/accordion/accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/accordion.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAA8B,MAAM,SAAS,CAAC;AAE1E;;;;;;;;;;;;;GAaG;AACH,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,+BAU/D"}

package/dist/components/accordion/accordion.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AccordionMultiple } from "./accordion-multiple";
+import { AccordionSingle } from "./accordion-single";
+/**
+ * A vertically stacked set of interactive headings that each reveal a section of content.
+ *
+ * _Inspired from multiple sources, to make a consistent and reusable component._
+ * @version 0.1.0
+ * @author Forth
+ * @copyright 2025 Forth
+ *
+ * @see https://ui.shadcn.com/docs/components/accordion
+ * @see https://motion-primitives.com/docs/accordion
+ * @see https://originui.com/accordion
+ * @see https://www.hextaui.com/docs/ui/components/accordion
+ * @see https://www.shadcnui-blocks.com/components/accordion
+ */
+export function Accordion({ multiple, ...props }) {
+    if (props.icon && props.items.some((item) => "icon" in item && item.icon)) {
+        throw new Error("You can't use both icon and items.icon");
+    }
+    return multiple ? (_jsx(AccordionMultiple, { ...props })) : (_jsx(AccordionSingle, { ...props }));
+}

package/dist/components/accordion/index.d.ts

@@ -0,0 +1,2 @@
+export { Accordion } from "./accordion";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/accordion/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/accordion/index.js

@@ -0,0 +1 @@
+export { Accordion } from "./accordion";

package/dist/components/accordion/types.d.ts

@@ -0,0 +1,100 @@
+import type React from "react";
+import { type AccordionMultipleProps, type AccordionSingleProps } from "@radix-ui/react-accordion";
+import type { LucideProps } from "lucide-react";
+import type { AccordionTriggerVariants } from "./variants";
+type AccordionVariantType = "default" | "outline" | "box" | "contained" | "box-contained" | "tabs" | "highlight-active";
+type AccordionSizeType = "sm" | "default" | "lg";
+interface Item {
+    title: React.ReactNode;
+    subtitle?: React.ReactNode;
+    content: React.ReactNode;
+    disabled?: boolean;
+}
+interface ItemWithIcon extends Item {
+    icon: React.ReactNode;
+}
+interface BaseProps {
+    /**
+     * The items to render in the accordion.
+     */
+    items: Item[] | ItemWithIcon[];
+    /**
+     * The icon displayed next to the title is the same for all items.
+     *
+     * Additionally, using both ItemWithIcon and icon will throw an error.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Hide the chevron icon.
+     * @default false
+     */
+    hideChevron?: boolean;
+    /**
+     * The alignment of the chevron icon.
+     * @default "right"
+     */
+    chevronAlignment?: AccordionTriggerVariants["chevronAlignment"];
+    /**
+     * Custom chevron icon.
+     */
+    customChevron?: React.ReactElement<LucideProps>;
+    /**
+     * Style the accordion.
+     */
+    className?: string;
+    /**
+     * Style the accordion item.
+     */
+    classNameItem?: string;
+    /**
+     * Style the accordion trigger.
+     */
+    classNameTrigger?: string;
+    /**
+     * Style the accordion content.
+     */
+    classNameContent?: string;
+    /**
+     * The variant of the accordion.
+     * @default "default"
+     */
+    variant?: AccordionVariantType;
+    /**
+     * The size of the accordion.
+     * @default "default"
+     */
+    size?: AccordionSizeType;
+    /**
+     * Generate a unique id for each item.
+     * @default `item-{index}`
+     */
+    generateId?: (index: number) => string;
+}
+type OmittedProps = "type" | "defaultValue" | "collapsible";
+export type SingleProps = BaseProps & Omit<AccordionSingleProps, OmittedProps> & {
+    /**
+     * Set the ``type`` prop to ``multiple`` to enable opening multiple items at once.
+     * @default false
+     */
+    multiple?: false;
+    /** Set the default open item */
+    defaultValue?: string;
+    /**
+     * Use the ``collapsible`` prop to allow all items to close.
+     * @default false
+     */
+    collapsible?: boolean;
+};
+export type MultipleProps = BaseProps & Omit<AccordionMultipleProps, OmittedProps> & {
+    multiple: true;
+    /** Set the default open items */
+    defaultValue?: string[];
+    /**
+     * Use the ``collapsible`` prop to allow all items to close.
+     * @default true
+     */
+    collapsible?: true;
+};
+export type AccordionProps = SingleProps | MultipleProps;
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/components/accordion/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,KAAK,sBAAsB,EAC3B,KAAK,oBAAoB,EAC1B,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEhD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,YAAY,CAAC;AAE3D,KAAK,oBAAoB,GACrB,SAAS,GACT,SAAS,GACT,KAAK,GACL,WAAW,GACX,eAAe,GACf,MAAM,GACN,kBAAkB,CAAC;AAEvB,KAAK,iBAAiB,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,CAAC;AAEjD,UAAU,IAAI;IACZ,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,YAAa,SAAQ,IAAI;IACjC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;CACvB;AAED,UAAU,SAAS;IACjB;;OAEG;IACH,KAAK,EAAE,IAAI,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/B;;;;OAIG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,wBAAwB,CAAC,kBAAkB,CAAC,CAAC;IAChE;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;IAChD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B;;;OAGG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACxC;AAGD,KAAK,YAAY,GAAG,MAAM,GAAG,cAAc,GAAG,aAAa,CAAC;AAC5D,MAAM,MAAM,WAAW,GAAG,SAAS,GACjC,IAAI,CAAC,oBAAoB,EAAE,YAAY,CAAC,GAAG;IACzC;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,gCAAgC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AACJ,MAAM,MAAM,aAAa,GAAG,SAAS,GACnC,IAAI,CAAC,sBAAsB,EAAE,YAAY,CAAC,GAAG;IAC3C,QAAQ,EAAE,IAAI,CAAC;IACf,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB;;;OAGG;IACH,WAAW,CAAC,EAAE,IAAI,CAAC;CACpB,CAAC;AAEJ,MAAM,MAAM,cAAc,GAAG,WAAW,GAAG,aAAa,CAAC"}

package/dist/components/accordion/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/accordion/variants.d.ts

@@ -0,0 +1,25 @@
+import type { VariantProps } from "class-variance-authority";
+export declare const accordionRootVariants: (props?: ({
+    variant?: "default" | "outline" | "box" | "contained" | "box-contained" | "tabs" | "highlight-active" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const accordionItemVariants: (props?: ({
+    variant?: "default" | "outline" | "box" | "contained" | "box-contained" | "tabs" | "highlight-active" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const accordionTriggerVariants: (props?: ({
+    variant?: "default" | "outline" | "box" | "contained" | "box-contained" | "tabs" | "highlight-active" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+    disabled?: boolean | null | undefined;
+    chevronAlignment?: "right" | "left" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const accordionContentVariants: (props?: ({
+    variant?: "default" | "outline" | "box" | "contained" | "box-contained" | "tabs" | "highlight-active" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type AccordionVariants = VariantProps<typeof accordionRootVariants>;
+type AccordionItemVariants = VariantProps<typeof accordionItemVariants>;
+type AccordionTriggerVariants = VariantProps<typeof accordionTriggerVariants>;
+type AccordionContentVariants = VariantProps<typeof accordionContentVariants>;
+export type { AccordionContentVariants, AccordionItemVariants, AccordionTriggerVariants, AccordionVariants, };
+//# sourceMappingURL=variants.d.ts.map

package/dist/components/accordion/variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/variants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAG7D,eAAO,MAAM,qBAAqB;;;8EAwBjC,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;8EAwBhC,CAAC;AAEH,eAAO,MAAM,wBAAwB;;;;;8EAmCpC,CAAC;AAEF,eAAO,MAAM,wBAAwB;;;8EAkBnC,CAAC;AAEH,KAAK,iBAAiB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACpE,KAAK,qBAAqB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACxE,KAAK,wBAAwB,GAAG,YAAY,CAAC,OAAO,wBAAwB,CAAC,CAAC;AAC9E,KAAK,wBAAwB,GAAG,YAAY,CAAC,OAAO,wBAAwB,CAAC,CAAC;AAE9E,YAAY,EACV,wBAAwB,EACxB,qBAAqB,EACrB,wBAAwB,EACxB,iBAAiB,GAClB,CAAC"}