@financedistrict/apps-ui 0.1.0

package/LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2026 First Digital Trust Limited ("FD"). All rights reserved.
+
+This software and the accompanying files (the "Software") are proprietary and
+confidential to FD. The Software is published to a public package registry
+solely to allow installation and use by FD's own applications and by prototypes
+authorized in writing by FD. Publication to that registry does NOT place the
+Software in the public domain and does NOT grant any license under FD's
+copyright or other rights.
+
+Except as expressly permitted by a separate written agreement with FD, no
+person or entity may use, copy, reproduce, modify, adapt, merge, publish,
+redistribute, sublicense, or sell the Software or any portion of it, or create
+derivative works from it.
+
+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 FD BE LIABLE
+FOR ANY CLAIM, DAMAGES, OR OTHER LIABILITY ARISING FROM, OUT OF, OR IN
+CONNECTION WITH THE SOFTWARE OR ITS USE.

package/README.md

@@ -0,0 +1,119 @@
+# @financedistrict/apps-ui
+
+The **single shared base-component library** for all FD apps (Button, Input, Modal, DataTable, etc.). App-specific _semantic_ components do NOT live here — they live in each app.
+
+**React + Tailwind v4** (ADR-0001), styled via Tailwind utility classes — semantic tokens from `@financedistrict/apps-tokens` where a value is meant to be shared, plain Tailwind utilities and arbitrary values for everything component-specific (see Authoring rules below). Components are authored RSC-safe **unless they measure their own geometry** — anything with a cut corner (`clip-path` measured via `useLayoutEffect`/`ResizeObserver`) is `"use client"` (a standard RSC opt-out, not a framework-specific API). See ADR-0009.
+
+## Components
+
+### Button (`@financedistrict/apps-ui/button`)
+
+`cva` variant table + `cn`, bound to the `--button-*` semantic tokens (ADR-0009). Cut corners via `@financedistrict/apps-ui/cut-corner`.
+
+```tsx
+import { Button } from "@financedistrict/apps-ui/button";
+import { PlusIcon } from "@phosphor-icons/react";
+
+<Button variation="primary" size="lg" onClick={...}>Save</Button>
+<Button variation="secondary" leftSlot={<PlusIcon />}>Add</Button>
+<Button variation="brand" loading>Submitting</Button>
+<Button variation="ghost" iconOnly aria-label="More"><PlusIcon /></Button>
+<Button asChild variation="primary"><a href="/x">Link</a></Button>
+```
+
+- **`variation`**: `primary` (black) · `secondary` (outline) · `brand` (purple) · `ghost` · `destructive`. **`size`**: `sm` · `lg`. Plus `iconOnly`, `loading`, `asChild`, `leftSlot`/`rightSlot`.
+- Cut corners on every variation except `ghost`; the `secondary` border follows the chamfer as an SVG stroke.
+
+## Storybook
+
+Local authoring environment (never a CI gate):
+
+```bash
+npm run storybook            # from the repo root (or this package) — http://localhost:6006
+```
+
+- **Framework: `@storybook/nextjs-vite`** (Vite under the hood). **Preview = an app's CSS entry:** `.storybook/preview.css` runs Tailwind v4 and imports `@financedistrict/apps-ui/fonts.css` + `@financedistrict/apps-tokens/theme.css`, so Archivo / Chakra Petch resolve through the portable `@fontsource` default (ADR-0008) exactly as in an app.
+- **Theme toolbar** toggles the `light`/`dark` ancestor class — the same mechanism apps use, so stories need no `dark:` variants.
+- Stories are colocated: `src/<component>/<Component>.stories.tsx`.
+
+## Fonts
+
+This package doesn't own font _loading_ — only `@financedistrict/apps-tokens`
+`theme.css`'s CSS variable contract (`--font-archivo`, `--font-chakra-petch`), which
+is all it actually reads (see [ADR-0008](../../docs/adr/0008-framework-agnostic-fonts.md)).
+`fonts.css` is one _optional_ way to satisfy that contract, using
+[`@fontsource`](https://fontsource.org/) — self-hosted `@font-face` rules, no
+compiler-specific transform, so it works identically under Vite, Next, a UMD build,
+or a plain static HTML file with no build step.
+
+```css
+/* app's main CSS entry */
+@import "@financedistrict/apps-ui/fonts.css";
+@import "@financedistrict/apps-tokens/theme.css";
+```
+
+That's it — no JS wrapper, no root-element `className` to apply. Importing the CSS
+registers the `@font-face` rules and defines the two variables globally.
+
+Any app is free to load these fonts a different way instead — a plain Google Fonts
+`<link>` tag (what zero-build CDN prototypes already do), `next/font/google` in a
+Next app's own root layout, whatever fits — as long as it ends up defining the same
+two variable names.
+
+## Icons
+
+Phosphor only — see `.claude/rules/icons.md` (regular + fill weights, no inline SVG).
+
+## Authoring rules
+
+This package ships two builds from one source (see
+[`docs/guides/standalone-prototype-consumption.md`](../../docs/guides/standalone-prototype-consumption.md))
+— a normal ESM/CJS build for the four apps, and a UMD bundle for zero-build CDN
+prototypes. A few rules exist specifically so both builds stay possible from the same
+component code:
+
+- **Style entirely through Tailwind utility classes in `className` — not through a
+  separate CSS file or CSS-in-JS.** This is _not_ "everything must be a shared
+  token." Three tiers, all fine, all just utility classes:
+  1. Shared semantic tokens for values that repeat across components/apps and need
+     to change consistently (`bg-card-background`, `text-focus`) — these come from
+     `@financedistrict/apps-tokens`.
+  2. Plain Tailwind utilities that aren't tokens at all (`flex`, `gap-2`,
+     `items-center`, `rounded-md`) — completely normal for a component's own layout,
+     nothing to promote anywhere.
+  3. A genuine one-off value that isn't worth sharing — use Tailwind's arbitrary-value
+     syntax (`top-[3px]`, `mt-[7px]`) directly in the component. Still just a utility
+     class, still lives entirely in that one component.
+     Never primitives (`--purple-500`) or raw inline hex/pixel `style` props — anything
+     expressible as a class should be one, from whichever of the three tiers actually
+     fits.
+- **What's actually disallowed: a standalone CSS file or CSS-in-JS
+  (`Button.module.css`, styled-components, emotion, `<style jsx>`).** Not because
+  components can't have their own styling (they can, extensively — see above) but
+  because the CDN path has exactly one CSS delivery mechanism: `dist/tokens.css`,
+  produced by scanning every component's utility classes (see the content-scan
+  requirement in the consumption guide). A separate stylesheet or runtime-injected
+  styles has no way to reach a prototype that only ever loads that one file.
+- **Never `import` `@financedistrict/apps-tokens`'s CSS from inside component
+  source**, for the same reason — the CSS gets loaded separately by whoever consumes
+  the component (an app importing `theme.css` itself, or a prototype linking
+  `dist/tokens.css` itself). A component should never assume it's responsible for
+  loading its own tokens.
+- **No framework-specific APIs.** Nothing that only runs under Next.js, nothing that
+  assumes RSC. Components must render correctly in a plain client-rendered
+  environment, since the CDN path is exactly that and the four real apps are Vite,
+  not Next. This is the rule `next/font/google` violated (see
+  [ADR-0008](../../docs/adr/0008-framework-agnostic-fonts.md)) — fixed by not
+  repeating the mistake with a different framework-specific API later.
+- **Don't assume a specific React renderer wiring beyond the `react`/`react-dom` peer
+  dependencies.** The UMD build declares both external — it will not bundle its own
+  copy of React. Relying on anything Next- or Vite-specific breaks that assumption.
+
+## Consuming from a zero-build prototype (CDN)
+
+This README covers the normal `npm install` + `import` path, used by the four real
+apps. Standalone HTML/JSX prototypes (Metacarbon's screen deliveries) consume a
+different build of this same package — a UMD bundle loaded via `<script src>`, no
+bundler involved. See
+[`docs/guides/standalone-prototype-consumption.md`](../../docs/guides/standalone-prototype-consumption.md)
+for the exact `index.html` shape and the global variable name (`window.FDAppsUI`).

package/dist/Radio-BYWz1n7p.d.cts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+
+interface RadioProps extends Omit<React.ComponentProps<"input">, "type" | "size"> {
+    /**
+     * Convenience change callback with the next checked state already
+     * extracted. Fires alongside (not instead of) the native `onChange`.
+     * Radio semantics: the platform fires `change` only when this radio
+     * BECOMES checked (never on deselection by a sibling), so the payload is
+     * `true` in practice — the boolean type keeps the ADR-0010 `on<Value>Change`
+     * contract shared with Checkbox. Controlled/uncontrolled usage is the
+     * standard input contract: `defaultChecked` (uncontrolled, the default) or
+     * `checked` + a change handler (controlled).
+     */
+    onCheckedChange?: (checked: boolean) => void;
+    /** Class names for the outer wrapper span (positions the ● indicator). */
+    wrapperClassName?: string;
+}
+/**
+ * Radio control — the Figma `radio-control` set (node 5117:5677), rendered as
+ * a real `<input type="radio">` so grouping (`name`), keyboard behavior
+ * (arrow keys move selection within a group; only the checked radio is in the
+ * tab order), forms, and label association all come from the platform. There
+ * is no RadioGroup wrapper: give radios the same `name` and wrap the set in a
+ * `<fieldset>` with a `<legend>` for a group label.
+ *
+ * Ships without a label (the Figma set is the bare 20×20 control): associate
+ * one by wrapping in a `<label>` or via `htmlFor`/`id`; icon-style usages
+ * need an `aria-label`.
+ */
+declare function Radio({ className, wrapperClassName, onChange, onCheckedChange, ...props }: RadioProps): React.JSX.Element;
+
+export { Radio as R, type RadioProps as a };

package/dist/Radio-BYWz1n7p.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+
+interface RadioProps extends Omit<React.ComponentProps<"input">, "type" | "size"> {
+    /**
+     * Convenience change callback with the next checked state already
+     * extracted. Fires alongside (not instead of) the native `onChange`.
+     * Radio semantics: the platform fires `change` only when this radio
+     * BECOMES checked (never on deselection by a sibling), so the payload is
+     * `true` in practice — the boolean type keeps the ADR-0010 `on<Value>Change`
+     * contract shared with Checkbox. Controlled/uncontrolled usage is the
+     * standard input contract: `defaultChecked` (uncontrolled, the default) or
+     * `checked` + a change handler (controlled).
+     */
+    onCheckedChange?: (checked: boolean) => void;
+    /** Class names for the outer wrapper span (positions the ● indicator). */
+    wrapperClassName?: string;
+}
+/**
+ * Radio control — the Figma `radio-control` set (node 5117:5677), rendered as
+ * a real `<input type="radio">` so grouping (`name`), keyboard behavior
+ * (arrow keys move selection within a group; only the checked radio is in the
+ * tab order), forms, and label association all come from the platform. There
+ * is no RadioGroup wrapper: give radios the same `name` and wrap the set in a
+ * `<fieldset>` with a `<legend>` for a group label.
+ *
+ * Ships without a label (the Figma set is the bare 20×20 control): associate
+ * one by wrapping in a `<label>` or via `htmlFor`/`id`; icon-style usages
+ * need an `aria-label`.
+ */
+declare function Radio({ className, wrapperClassName, onChange, onCheckedChange, ...props }: RadioProps): React.JSX.Element;
+
+export { Radio as R, type RadioProps as a };

package/dist/SelectTrigger-By0iPBI3.d.cts

@@ -0,0 +1,78 @@
+import * as React from 'react';
+
+/** A selectable option. `disabled` rows render but are skipped by keyboard nav. */
+type SelectOption = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    /**
+     * Optional adornment before the label (usually a 16px Phosphor icon). In
+     * multi mode it sits after the checkbox (checkbox → leading → label). Purely
+     * decorative — rendered `aria-hidden`, and it inherits the row's text colour
+     * (so it recolours to the brand foreground on the single-select selected row).
+     */
+    leadingSlot?: React.ReactNode;
+    /**
+     * Optional adornment after the label (usually a 16px Phosphor icon), pinned to
+     * the trailing edge of the row. Decorative + colour-inheriting, like
+     * `leadingSlot`.
+     */
+    trailingSlot?: React.ReactNode;
+};
+/**
+ * Pure value-display helper — decides what the trigger shows for a given
+ * selection. Kept free of React so it is unit-testable in isolation:
+ * - `[]`  → the placeholder (`isPlaceholder: true`)
+ * - one   → that option's label
+ * - many  → `"${n} selected"` (never overflows the single lg line)
+ *
+ * A selected value with no matching option is ignored for the single-label case
+ * (it can't be labelled); the count path still counts it.
+ */
+declare function selectTriggerLabel(options: SelectOption[], selected: string[], placeholder: string): {
+    text: string;
+    isPlaceholder: boolean;
+};
+interface SelectTriggerProps extends Omit<React.ComponentProps<"button">, "value"> {
+    /** `field` (bordered box) | `line` (bottom border only). */
+    variation?: "field" | "line";
+    /** Error state — destructive border/label/hint (out-ranks the focus border). */
+    error?: boolean;
+    /** LINE-only: hide the resting bottom line (still shows on focus/error). */
+    showBottomLine?: boolean;
+    /** Whether the listbox is currently open (flips the caret + `aria-expanded`). */
+    open?: boolean;
+    /** Resolved display text (from `selectTriggerLabel`). */
+    displayText: string;
+    /** Whether `displayText` is the placeholder (muted) vs a real value (accent). */
+    isPlaceholder: boolean;
+    /** Uppercase label above the field; omitted → no label row. */
+    label?: React.ReactNode;
+    /** Helper text below the field; destructive when `error`. */
+    hint?: React.ReactNode;
+    /** Leading adornment (decorative — kept out of the a11y tree via `aria-hidden`). */
+    leadingSlot?: React.ReactNode;
+    /** id of the field `<button>` (label association + `aria-labelledby` target). */
+    id: string;
+    /** id of the hint node, linked via `aria-describedby` when a hint is present. */
+    hintId?: string;
+    /** Class names for the outer wrapper (the label/field/hint stack). */
+    wrapperClassName?: string;
+    /** Class names for the field row (the trigger button), not the wrapper. */
+    fieldClassName?: string;
+}
+/**
+ * The Select trigger — a `<button type="button">` styled as an input field
+ * (reusing `inputVariants`), with an optional uppercase label above and a hint
+ * below (both owned by the component, mirroring `Input`). It renders a leading
+ * slot, the current value (or placeholder), and a trailing caret that flips
+ * when `open`.
+ *
+ * This is a presentational leaf: all open/selection/keyboard orchestration and
+ * the ARIA popup wiring (`aria-haspopup`/`aria-expanded`/`aria-controls`/
+ * `aria-activedescendant`) live in `Select`, which spreads them through
+ * `...props`. `ref` is a normal React 19 prop, forwarded to the button.
+ */
+declare function SelectTrigger({ variation, error, showBottomLine, open, displayText, isPlaceholder, label, hint, leadingSlot, id, hintId, disabled, className, wrapperClassName, fieldClassName, ref, ...props }: SelectTriggerProps): React.JSX.Element;
+
+export { type SelectOption as S, SelectTrigger as a, type SelectTriggerProps as b, selectTriggerLabel as s };

package/dist/SelectTrigger-By0iPBI3.d.ts

@@ -0,0 +1,78 @@
+import * as React from 'react';
+
+/** A selectable option. `disabled` rows render but are skipped by keyboard nav. */
+type SelectOption = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    /**
+     * Optional adornment before the label (usually a 16px Phosphor icon). In
+     * multi mode it sits after the checkbox (checkbox → leading → label). Purely
+     * decorative — rendered `aria-hidden`, and it inherits the row's text colour
+     * (so it recolours to the brand foreground on the single-select selected row).
+     */
+    leadingSlot?: React.ReactNode;
+    /**
+     * Optional adornment after the label (usually a 16px Phosphor icon), pinned to
+     * the trailing edge of the row. Decorative + colour-inheriting, like
+     * `leadingSlot`.
+     */
+    trailingSlot?: React.ReactNode;
+};
+/**
+ * Pure value-display helper — decides what the trigger shows for a given
+ * selection. Kept free of React so it is unit-testable in isolation:
+ * - `[]`  → the placeholder (`isPlaceholder: true`)
+ * - one   → that option's label
+ * - many  → `"${n} selected"` (never overflows the single lg line)
+ *
+ * A selected value with no matching option is ignored for the single-label case
+ * (it can't be labelled); the count path still counts it.
+ */
+declare function selectTriggerLabel(options: SelectOption[], selected: string[], placeholder: string): {
+    text: string;
+    isPlaceholder: boolean;
+};
+interface SelectTriggerProps extends Omit<React.ComponentProps<"button">, "value"> {
+    /** `field` (bordered box) | `line` (bottom border only). */
+    variation?: "field" | "line";
+    /** Error state — destructive border/label/hint (out-ranks the focus border). */
+    error?: boolean;
+    /** LINE-only: hide the resting bottom line (still shows on focus/error). */
+    showBottomLine?: boolean;
+    /** Whether the listbox is currently open (flips the caret + `aria-expanded`). */
+    open?: boolean;
+    /** Resolved display text (from `selectTriggerLabel`). */
+    displayText: string;
+    /** Whether `displayText` is the placeholder (muted) vs a real value (accent). */
+    isPlaceholder: boolean;
+    /** Uppercase label above the field; omitted → no label row. */
+    label?: React.ReactNode;
+    /** Helper text below the field; destructive when `error`. */
+    hint?: React.ReactNode;
+    /** Leading adornment (decorative — kept out of the a11y tree via `aria-hidden`). */
+    leadingSlot?: React.ReactNode;
+    /** id of the field `<button>` (label association + `aria-labelledby` target). */
+    id: string;
+    /** id of the hint node, linked via `aria-describedby` when a hint is present. */
+    hintId?: string;
+    /** Class names for the outer wrapper (the label/field/hint stack). */
+    wrapperClassName?: string;
+    /** Class names for the field row (the trigger button), not the wrapper. */
+    fieldClassName?: string;
+}
+/**
+ * The Select trigger — a `<button type="button">` styled as an input field
+ * (reusing `inputVariants`), with an optional uppercase label above and a hint
+ * below (both owned by the component, mirroring `Input`). It renders a leading
+ * slot, the current value (or placeholder), and a trailing caret that flips
+ * when `open`.
+ *
+ * This is a presentational leaf: all open/selection/keyboard orchestration and
+ * the ARIA popup wiring (`aria-haspopup`/`aria-expanded`/`aria-controls`/
+ * `aria-activedescendant`) live in `Select`, which spreads them through
+ * `...props`. `ref` is a normal React 19 prop, forwarded to the button.
+ */
+declare function SelectTrigger({ variation, error, showBottomLine, open, displayText, isPlaceholder, label, hint, leadingSlot, id, hintId, disabled, className, wrapperClassName, fieldClassName, ref, ...props }: SelectTriggerProps): React.JSX.Element;
+
+export { type SelectOption as S, SelectTrigger as a, type SelectTriggerProps as b, selectTriggerLabel as s };

package/dist/accordion.cjs

@@ -0,0 +1,322 @@
+'use strict';
+
+var React = require('react');
+var react = require('@phosphor-icons/react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/accordion/Accordion.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var accordionRootVariants = classVarianceAuthority.cva(["flex flex-col"]);
+var accordionItemVariants = classVarianceAuthority.cva(["border-b border-card-border"], {
+  variants: {
+    disabled: {
+      true: "opacity-60",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    disabled: false
+  }
+});
+var accordionTriggerVariants = classVarianceAuthority.cva(
+  [
+    "group flex w-full cursor-pointer items-start gap-4 pt-3 text-left",
+    "outline-none focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus",
+    "disabled:cursor-not-allowed"
+  ],
+  {
+    variants: {
+      open: {
+        true: "pb-2",
+        false: "pb-3"
+      }
+    },
+    defaultVariants: {
+      open: false
+    }
+  }
+);
+var accordionTriggerTitleVariants = classVarianceAuthority.cva([
+  "body-02-medium min-w-0 flex-1 break-words text-card-foreground"
+]);
+var accordionTriggerIconVariants = classVarianceAuthority.cva([
+  "flex shrink-0 items-center text-card-foreground-muted transition-colors",
+  "group-hover:text-card-foreground",
+  "[&_svg]:size-4 [&_svg]:shrink-0"
+]);
+var accordionContentVariants = classVarianceAuthority.cva([
+  "body-03 pb-3 text-card-foreground-muted"
+]);
+var AccordionContext = React__namespace.createContext(
+  null
+);
+function useAccordionContext(part) {
+  const context = React__namespace.useContext(AccordionContext);
+  if (context === null) {
+    throw new Error(`${part} must be used within <Accordion.Root>`);
+  }
+  return context;
+}
+var AccordionItemContext = React__namespace.createContext(null);
+function useAccordionItemContext(part) {
+  const context = React__namespace.useContext(AccordionItemContext);
+  if (context === null) {
+    throw new Error(`${part} must be used within <Accordion.Item>`);
+  }
+  return context;
+}
+function setRef(ref, node) {
+  if (typeof ref === "function") ref(node);
+  else if (ref) ref.current = node;
+}
+function AccordionRoot({
+  type = "single",
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  collapsible = true,
+  className,
+  children,
+  ref,
+  ...props
+}) {
+  const isMultiple = type === "multiple";
+  const isControlled = valueProp !== void 0;
+  const [uncontrolledValue, setUncontrolledValue] = React__namespace.useState(
+    () => defaultValue !== void 0 ? defaultValue : isMultiple ? [] : null
+  );
+  const openModel = isControlled ? valueProp : uncontrolledValue;
+  const commit = (next) => {
+    if (!isControlled) setUncontrolledValue(next);
+    onValueChange?.(next);
+  };
+  const isOpen = (itemValue) => isMultiple ? Array.isArray(openModel) && openModel.includes(itemValue) : openModel === itemValue;
+  const toggle = (itemValue) => {
+    if (isMultiple) {
+      const current2 = Array.isArray(openModel) ? openModel : [];
+      commit(
+        current2.includes(itemValue) ? current2.filter((v) => v !== itemValue) : [...current2, itemValue]
+      );
+      return;
+    }
+    const current = Array.isArray(openModel) ? null : openModel;
+    if (current === itemValue) {
+      commit(collapsible ? null : itemValue);
+    } else {
+      commit(itemValue);
+    }
+  };
+  const triggersRef = React__namespace.useRef(/* @__PURE__ */ new Set());
+  const registerTrigger = React__namespace.useCallback((node) => {
+    triggersRef.current.add(node);
+  }, []);
+  const unregisterTrigger = React__namespace.useCallback((node) => {
+    triggersRef.current.delete(node);
+  }, []);
+  const onTriggerKeyDown = (event) => {
+    if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) return;
+    const triggers = Array.from(triggersRef.current).filter((el) => !el.disabled).sort(
+      (a, b) => a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1
+    );
+    if (triggers.length === 0) return;
+    const currentIndex = triggers.indexOf(event.currentTarget);
+    if (currentIndex === -1) return;
+    event.preventDefault();
+    let nextIndex = currentIndex;
+    switch (event.key) {
+      case "ArrowDown":
+        nextIndex = (currentIndex + 1) % triggers.length;
+        break;
+      case "ArrowUp":
+        nextIndex = (currentIndex - 1 + triggers.length) % triggers.length;
+        break;
+      case "Home":
+        nextIndex = 0;
+        break;
+      case "End":
+        nextIndex = triggers.length - 1;
+        break;
+    }
+    triggers[nextIndex]?.focus();
+  };
+  const contextValue = {
+    type,
+    isOpen,
+    toggle,
+    registerTrigger,
+    unregisterTrigger,
+    onTriggerKeyDown
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(AccordionContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "accordion",
+      className: cn(accordionRootVariants(), className),
+      ...props,
+      children
+    }
+  ) });
+}
+function AccordionItem({
+  value,
+  disabled = false,
+  className,
+  children,
+  ref,
+  ...props
+}) {
+  const { isOpen } = useAccordionContext("Accordion.Item");
+  const open = isOpen(value);
+  const reactId = React__namespace.useId();
+  const triggerId = `${reactId}-trigger`;
+  const contentId = `${reactId}-content`;
+  const itemContext = {
+    value,
+    open,
+    disabled,
+    triggerId,
+    contentId
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(AccordionItemContext.Provider, { value: itemContext, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "accordion-item",
+      "data-state": open ? "open" : "closed",
+      "data-disabled": disabled || void 0,
+      className: cn(accordionItemVariants({ disabled }), className),
+      ...props,
+      children
+    }
+  ) });
+}
+function AccordionTrigger({
+  className,
+  children,
+  onClick,
+  onKeyDown,
+  ref,
+  ...props
+}) {
+  const { toggle, registerTrigger, unregisterTrigger, onTriggerKeyDown } = useAccordionContext("Accordion.Trigger");
+  const { value, open, disabled, triggerId, contentId } = useAccordionItemContext("Accordion.Trigger");
+  const buttonRef = React__namespace.useRef(null);
+  const setButtonRef = (node) => {
+    buttonRef.current = node;
+    setRef(ref, node);
+  };
+  React__namespace.useEffect(() => {
+    const node = buttonRef.current;
+    if (!node) return;
+    registerTrigger(node);
+    return () => unregisterTrigger(node);
+  }, [registerTrigger, unregisterTrigger]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      ...props,
+      ref: setButtonRef,
+      type: "button",
+      id: triggerId,
+      "data-slot": "accordion-trigger",
+      "aria-expanded": open,
+      "aria-controls": open ? contentId : void 0,
+      disabled,
+      className: cn(accordionTriggerVariants({ open }), className),
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) toggle(value);
+      },
+      onKeyDown: (event) => {
+        onKeyDown?.(event);
+        if (!event.defaultPrevented) onTriggerKeyDown(event);
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "data-slot": "accordion-trigger-title",
+            className: accordionTriggerTitleVariants(),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "data-slot": "accordion-trigger-icon",
+            "aria-hidden": "true",
+            className: accordionTriggerIconVariants(),
+            children: open ? /* @__PURE__ */ jsxRuntime.jsx(react.MinusIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(react.PlusIcon, {})
+          }
+        )
+      ]
+    }
+  );
+}
+function AccordionContent({
+  className,
+  children,
+  ref,
+  ...props
+}) {
+  const { open, triggerId, contentId } = useAccordionItemContext("Accordion.Content");
+  if (!open) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      role: "region",
+      id: contentId,
+      "aria-labelledby": triggerId,
+      "data-slot": "accordion-content",
+      "data-state": "open",
+      className: cn(accordionContentVariants(), className),
+      ...props,
+      children
+    }
+  );
+}
+var Accordion = {
+  Root: AccordionRoot,
+  Item: AccordionItem,
+  Trigger: AccordionTrigger,
+  Content: AccordionContent
+};
+
+exports.Accordion = Accordion;
+exports.AccordionContent = AccordionContent;
+exports.AccordionItem = AccordionItem;
+exports.AccordionRoot = AccordionRoot;
+exports.AccordionTrigger = AccordionTrigger;
+exports.accordionContentVariants = accordionContentVariants;
+exports.accordionItemVariants = accordionItemVariants;
+exports.accordionRootVariants = accordionRootVariants;
+exports.accordionTriggerIconVariants = accordionTriggerIconVariants;
+exports.accordionTriggerTitleVariants = accordionTriggerTitleVariants;
+exports.accordionTriggerVariants = accordionTriggerVariants;