@vitinnczk/onyx-ui 0.0.0-stage → 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @vitinnczk/onyx-ui
+
+## 0.1.0
+
+### Minor Changes
+
+- 035c571: First public release: design tokens, light and dark themes with `ThemeProvider`, hooks and 35 accessible components (primitives, forms, feedback, overlays, navigation and data display), shipped as tree-shakeable ESM with type declarations and a single `styles.css`.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Vítor Mello
+
+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

@@ -1,3 +1,331 @@
-# Temporary Holding Version
+# Onyx UI
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A React + TypeScript component library and design system, built with accessibility, theming and developer experience as first-class concerns.
+
+[![npm](https://img.shields.io/npm/v/@vitinnczk/onyx-ui)](https://www.npmjs.com/package/@vitinnczk/onyx-ui)
+[![CI](https://github.com/VitinnCZK/onyx-ui/actions/workflows/ci.yml/badge.svg)](https://github.com/VitinnCZK/onyx-ui/actions/workflows/ci.yml)
+[![Release](https://github.com/VitinnCZK/onyx-ui/actions/workflows/release.yml/badge.svg)](https://github.com/VitinnCZK/onyx-ui/actions/workflows/release.yml)
+[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](./LICENSE)
+
+**[Live docs (Storybook)](https://vitinnczk.github.io/onyx-ui/)** · **[npm package](https://www.npmjs.com/package/@vitinnczk/onyx-ui)** · **[Changelog](./CHANGELOG.md)** · **[Roadmap](./docs/roadmap.md)**
+
+## Contents
+
+- [Features](#features)
+- [Installation](#installation)
+- [Quick start](#quick-start)
+- [Components](#components)
+- [Theming](#theming)
+- [Design tokens](#design-tokens)
+- [Hooks and utilities](#hooks-and-utilities)
+- [Accessibility](#accessibility)
+- [Browser and framework support](#browser-and-framework-support)
+- [Development](#development)
+- [Contributing](#contributing)
+- [Releasing](#releasing)
+- [Design principles](#design-principles)
+- [License](#license)
+
+## Features
+
+- **35 accessible components**: primitives, forms, feedback, overlays, navigation and data display, following the WAI-ARIA Authoring Practices for keyboard support, focus management and ARIA.
+- **Themeable**: every visual decision is a design token exposed as a CSS custom property, with light, dark and system modes that meet WCAG AA contrast.
+- **Fully typed**: strict TypeScript, including polymorphic components that render as another element with `as`.
+- **Zero runtime styling**: plain CSS Modules and CSS variables, no CSS-in-JS overhead.
+- **Tree-shakeable ESM**: one module per source file, so importing one component leaves the rest out of your bundle.
+- **Server components friendly**: components ship marked with `'use client'`.
+- **Documented and tested**: every component has Storybook docs, unit tests and automated accessibility checks (axe, keyboard, focus and 200% zoom).
+
+## Installation
+
+```bash
+npm install @vitinnczk/onyx-ui
+```
+
+```bash
+pnpm add @vitinnczk/onyx-ui
+```
+
+```bash
+yarn add @vitinnczk/onyx-ui
+```
+
+`react` and `react-dom` (v18 or newer) are peer dependencies. The package is ESM-only and its only runtime dependency is [Floating UI](https://floating-ui.com), used to position overlays.
+
+## Quick start
+
+Import the stylesheet once, at the entry point of your app, and wrap the app in `ThemeProvider` (and `ToastProvider` if you use toasts):
+
+```tsx
+import '@vitinnczk/onyx-ui/styles.css';
+import { createRoot } from 'react-dom/client';
+import { ThemeProvider, ToastProvider } from '@vitinnczk/onyx-ui';
+import { App } from './App';
+
+createRoot(document.getElementById('root')!).render(
+  <ThemeProvider defaultTheme="system">
+    <ToastProvider>
+      <App />
+    </ToastProvider>
+  </ThemeProvider>,
+);
+```
+
+Then import the components you need:
+
+```tsx
+import { Button, FormField, Input, useToast } from '@vitinnczk/onyx-ui';
+
+export function NewsletterForm() {
+  const { toast } = useToast();
+
+  return (
+    <form
+      onSubmit={(event) => {
+        event.preventDefault();
+        toast({ intent: 'success', title: 'You are subscribed' });
+      }}
+    >
+      <FormField label="Email" helperText="One email a month, no spam." required>
+        <Input type="email" autoComplete="email" />
+      </FormField>
+      <Button type="submit">Subscribe</Button>
+    </form>
+  );
+}
+```
+
+`styles.css` holds the reset, the base styles, the tokens and both themes. Your own CSS can use the same tokens, so it follows the theme too:
+
+```css
+.sidebar {
+  padding: var(--space-4);
+  background: var(--color-surface);
+  border-inline-end: var(--border-width-thin) solid var(--color-border);
+}
+```
+
+### Next.js App Router
+
+Components are marked with `'use client'`, so they can be rendered straight from server components such as `layout.tsx`. Hooks like `useToast` and `useTheme` still need a client component. To avoid a flash of the wrong theme before React hydrates, see **Server rendering and the first paint** in the [Theming guide](https://vitinnczk.github.io/onyx-ui/?path=/docs/theming-guide--docs).
+
+## Components
+
+Every component forwards its `ref`, accepts `className` and the native props of the element it renders, and has a Docs page in [Storybook](https://vitinnczk.github.io/onyx-ui/) with usage guidelines, live examples and a props table.
+
+| Group            | Components                                                                                                                    |
+| ---------------- | ----------------------------------------------------------------------------------------------------------------------------- |
+| **Primitives**   | `Button`, `IconButton`, `Link`, `Text`, `Heading`, `Icon` (plus 16 ready-made icons), `Spinner`, `Badge`, `Avatar`, `Divider` |
+| **Forms**        | `Label`, `Input`, `Textarea`, `Select`, `Checkbox`, `RadioGroup` / `Radio`, `Switch`, `Slider`, `FormField`                   |
+| **Feedback**     | `Alert`, `Toast` (`ToastProvider` + `useToast`), `Progress`, `Skeleton`, `Tooltip`                                            |
+| **Overlays**     | `Modal`, `Drawer`, `Popover`, `DropdownMenu`                                                                                  |
+| **Navigation**   | `Tabs`, `Accordion`, `Breadcrumb`, `Pagination`                                                                               |
+| **Data display** | `Card`, `Table`, `EmptyState`                                                                                                 |
+| **Foundations**  | `ThemeProvider`, `Portal`, `VisuallyHidden`                                                                                   |
+
+`FormField` wires the label, helper text and error message to its control with `aria-describedby` and `aria-invalid`, so form controls are accessible without extra props:
+
+```tsx
+<FormField label="Password" error={errors.password}>
+  <Input type="password" autoComplete="new-password" />
+</FormField>
+```
+
+Compound components keep each part small and composable:
+
+```tsx
+<Tabs defaultValue="account">
+  <TabList aria-label="Settings">
+    <Tab value="account">Account</Tab>
+    <Tab value="billing">Billing</Tab>
+  </TabList>
+  <TabPanel value="account">…</TabPanel>
+  <TabPanel value="billing">…</TabPanel>
+</Tabs>
+```
+
+## Theming
+
+`ThemeProvider` supports `light`, `dark` and `system` (follows `prefers-color-scheme`) and remembers the user's choice in `localStorage` under `storageKey` (`'onyx-theme'` by default). Read and change it with `useTheme`:
+
+```tsx
+import { Button, useTheme } from '@vitinnczk/onyx-ui';
+
+function ThemeToggle() {
+  const { resolvedTheme, setTheme } = useTheme();
+  return (
+    <Button
+      variant="secondary"
+      onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}
+    >
+      Toggle theme
+    </Button>
+  );
+}
+```
+
+To create your own theme, override the tokens under a `data-theme` selector, load that CSS after `styles.css` and select it by name:
+
+```css
+[data-theme='brand'] {
+  /* Semantic colors point at the palette, so override the steps they use (or the whole scale) */
+  --color-primary-500: #8b5cf6;
+  --color-primary-600: #7c3aed;
+  --color-primary-700: #6d28d9;
+  --radius-md: 4px;
+  --font-family-base: 'Inter', system-ui, sans-serif;
+}
+```
+
+```tsx
+<ThemeProvider defaultTheme="brand">…</ThemeProvider>
+```
+
+The [Theming guide](https://vitinnczk.github.io/onyx-ui/?path=/docs/theming-guide--docs) covers dark-based themes, scoped themes, reduced motion, contrast checks and server rendering.
+
+## Design tokens
+
+Tokens are available as CSS custom properties and as JavaScript objects with the same values, for charts, canvas or tests:
+
+| Category   | CSS variables                                                            | JavaScript                                                            |
+| ---------- | ------------------------------------------------------------------------ | --------------------------------------------------------------------- |
+| Color      | `--color-primary-500`, `--color-surface`, `--color-text`…                | `palette`, `baseColors`, `lightColors`, `darkColors`                  |
+| Typography | `--font-family-*`, `--font-size-*`, `--font-weight-*`, `--line-height-*` | `fontFamily`, `fontSize`, `fontWeight`, `lineHeight`, `letterSpacing` |
+| Spacing    | `--space-*` (4px grid)                                                   | `spacing`                                                             |
+| Shape      | `--radius-*`, `--border-width-*`, `--size-*`                             | `radius`, `borderWidth`, `sizes`                                      |
+| Elevation  | `--shadow-*`, `--z-index-*`                                              | `shadows`, `zIndex`                                                   |
+| Motion     | `--duration-*`, `--easing-*`                                             | `duration`, `easing`                                                  |
+| Layout     | `--breakpoint-*`                                                         | `breakpoints`                                                         |
+
+```ts
+import { palette, spacing, themes } from '@vitinnczk/onyx-ui';
+```
+
+Components only use semantic colors, never the palette directly, so a theme only needs to redefine the semantic layer. See them all in [Foundations / Tokens](https://vitinnczk.github.io/onyx-ui/?path=/docs/foundations-tokens--docs).
+
+## Hooks and utilities
+
+The building blocks the components are made of are exported too:
+
+| Export                 | What it does                                                                 |
+| ---------------------- | ---------------------------------------------------------------------------- |
+| `useControllableState` | State that works both controlled (`value`) and uncontrolled (`defaultValue`) |
+| `useFocusTrap`         | Keeps focus inside a container and returns it on close                       |
+| `useClickOutside`      | Calls a handler on pointer down outside one or more elements                 |
+| `useEscapeKey`         | Calls a handler when Escape is pressed                                       |
+| `useScrollLock`        | Locks page scroll while an overlay is open                                   |
+| `cn`                   | Merges class names, skipping falsy values                                    |
+| `Polymorphic*` types   | Types for components with an `as` prop                                       |
+
+## Accessibility
+
+Accessibility is part of the definition of done, not a later pass:
+
+- Keyboard interaction for every widget follows the [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/) (arrow keys, Home/End, typeahead, Escape).
+- Overlays trap focus, lock scroll and return focus to the trigger when they close.
+- Every text and UI color pair meets WCAG AA contrast in both themes, checked by unit tests.
+- Animations respect `prefers-reduced-motion`; primary controls have a touch target of at least 44px.
+- Each component's unit tests include an axe check, and a Playwright suite runs axe, keyboard, focus-order and 200% zoom checks on every Storybook story in Chromium.
+
+A manual screen reader pass is tracked in the [screen reader checklist](./docs/screen-reader-checklist.md).
+
+## Browser and framework support
+
+- React 18 and 19, with or without server components (Next.js App Router, Vite).
+- Evergreen browsers (Chrome, Edge, Firefox and Safari) — the styles use modern CSS such as logical properties and `:focus-visible`.
+
+## Development
+
+Requires Node.js 24 (the version used in CI) and npm.
+
+```bash
+git clone https://github.com/VitinnCZK/onyx-ui.git
+cd onyx-ui
+npm install
+npm run dev
+```
+
+`npm run dev` starts Storybook on <http://localhost:6006>.
+
+| Script                    | Description                                                                 |
+| ------------------------- | --------------------------------------------------------------------------- |
+| `npm run dev`             | Start Storybook                                                             |
+| `npm run build`           | Build the library into `dist/`                                              |
+| `npm run build:storybook` | Build the static Storybook into `storybook-static/`                         |
+| `npm test`                | Run the unit and axe tests with Vitest                                      |
+| `npm run test:watch`      | Run Vitest in watch mode                                                    |
+| `npm run test:a11y`       | Keyboard, focus, 200% zoom and axe checks on every story in Chromium        |
+| `npm run lint`            | Lint with ESLint and typecheck                                              |
+| `npm run typecheck`       | Typecheck only                                                              |
+| `npm run format`          | Format with Prettier (`format:check` only checks)                           |
+| `npm run check:package`   | Validate the packed package with publint and arethetypeswrong (after build) |
+| `npm run check:bundle`    | Check that importing one component tree-shakes the rest (after build)       |
+| `npm run changeset`       | Describe a change for the next release                                      |
+
+`test:a11y` starts Storybook on its own (or reuses one already running on port 6006). Install its browser once with `npx playwright install chromium`.
+
+### Project structure
+
+```
+src/
+  tokens/          # design tokens as CSS variables and TypeScript objects
+  styles/          # reset, base styles, themes and shared CSS modules
+  components/
+    Button/
+      Button.tsx
+      Button.module.css
+      Button.stories.tsx
+      Button.test.tsx
+      index.ts
+  hooks/           # shared hooks (useControllableState, useFocusTrap...)
+  utils/           # helpers (cn, polymorphic types, floating positioning...)
+  index.ts         # public API
+a11y/              # Playwright accessibility suite that runs against Storybook
+docs/              # roadmap and screen reader checklist
+scripts/           # build checks (bundle size / tree-shaking)
+```
+
+### Tech stack
+
+| Area        | Tool                                |
+| ----------- | ----------------------------------- |
+| Framework   | React 18+, TypeScript               |
+| Build       | Vite (library mode)                 |
+| Styling     | CSS Modules + CSS variables         |
+| Positioning | Floating UI                         |
+| Docs        | Storybook                           |
+| Tests       | Vitest, Testing Library, vitest-axe |
+| A11y tests  | Playwright, axe-core                |
+| Quality     | ESLint, Prettier, Commitlint, Husky |
+| Release     | Changesets, GitHub Actions          |
+
+## Contributing
+
+Issues and pull requests are welcome.
+
+1. Fork the repository and create a branch from `main`.
+2. Make your change with stories and tests. A new component follows the folder layout above and is exported from `src/index.ts`.
+3. Run `npm run lint`, `npm test` and, for visual or interactive changes, `npm run test:a11y`.
+4. Run `npm run changeset` if the change affects the published package.
+5. Commit using [Conventional Commits](https://www.conventionalcommits.org) (`feat:`, `fix:`, `docs:`…) — Commitlint checks the message on commit — and open a pull request.
+
+## Releasing
+
+Versions and the changelog are managed with [Changesets](https://changesets.dev):
+
+1. Run `npm run changeset` in the pull request that changes the library, pick the bump (patch, minor or major) and describe the change.
+2. When it reaches `main`, the **Release** workflow opens (or updates) a "Version Packages" pull request with the new version and `CHANGELOG.md`.
+3. Merging that pull request publishes the package to npm through trusted publishing, with provenance, and creates the git tag and GitHub release.
+
+Every push and pull request runs the **CI** workflow (lint, typecheck, formatting, unit tests, build, package checks, Storybook build and the Playwright accessibility tests). On `main`, the Storybook is deployed to GitHub Pages once CI passes.
+
+## Design principles
+
+1. **Accessible first.** If it can't be used with a keyboard or a screen reader, it isn't done.
+2. **Tokens over hardcoded values.** No component uses a raw color, size or spacing value.
+3. **Composable APIs.** Small components that combine well beat large components with dozens of props.
+4. **Predictable behavior.** Interaction patterns follow established standards instead of reinventing them.
+
+## License
+
+[MIT](./LICENSE) © Vítor Mello

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,42 @@
+import { ButtonHTMLAttributes, HTMLAttributes } from 'react';
+type HeadingLevel = 2 | 3 | 4 | 5 | 6;
+export interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {
+    /**
+     * `single` keeps at most one section open; `multiple` lets any number stay open.
+     * @default 'single'
+     */
+    type?: 'single' | 'multiple';
+    /** Values of the open sections, for a controlled accordion. */
+    value?: string[];
+    /** Values of the sections open at first, for an uncontrolled accordion. */
+    defaultValue?: string[];
+    /** Called with the values of the open sections. */
+    onValueChange?: (value: string[]) => void;
+    /**
+     * In `single` mode, lets the open section close so that none is open.
+     * @default true
+     */
+    collapsible?: boolean;
+    /**
+     * Level of the heading that wraps each trigger. Match it to the outline of the page.
+     * @default 3
+     */
+    headingLevel?: HeadingLevel;
+}
+/** Stack of sections whose content expands and collapses. */
+export declare const Accordion: import('react').ForwardRefExoticComponent<AccordionProps & import('react').RefAttributes<HTMLDivElement>>;
+export interface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {
+    /** Identifies the section in `value`. */
+    value: string;
+    /** @default false */
+    disabled?: boolean;
+}
+/** One section: an `AccordionTrigger` followed by its `AccordionContent`. */
+export declare const AccordionItem: import('react').ForwardRefExoticComponent<AccordionItemProps & import('react').RefAttributes<HTMLDivElement>>;
+export type AccordionTriggerProps = ButtonHTMLAttributes<HTMLButtonElement>;
+/** Heading button that expands and collapses its section. */
+export declare const AccordionTrigger: import('react').ForwardRefExoticComponent<AccordionTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
+export type AccordionContentProps = HTMLAttributes<HTMLDivElement>;
+/** Content of a section, hidden while it is collapsed. */
+export declare const AccordionContent: import('react').ForwardRefExoticComponent<AccordionContentProps & import('react').RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,105 @@
+"use client";
+import { useControllableState as e } from "../../hooks/useControllableState.js";
+import { cn as t } from "../../utils/cn.js";
+import { ChevronDownIcon as n } from "../Icon/icons.js";
+import r from "./Accordion.module.js";
+import { createContext as i, forwardRef as a, useContext as o, useId as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+// src/components/Accordion/Accordion.tsx
+var u = i(null), d = i(null);
+function f(e, t) {
+	let n = o(e);
+	if (!n) throw Error(t);
+	return n;
+}
+var p = a(function({ type: n = "single", value: i, defaultValue: a = [], onValueChange: o, collapsible: s = !0, headingLevel: l = 3, className: d, children: f, ...p }, m) {
+	let [h, g] = e({
+		value: i,
+		defaultValue: a,
+		onChange: o
+	}), _ = (e) => n === "multiple" || s || !h.includes(e), v = (e) => {
+		h.includes(e) ? _(e) && g(h.filter((t) => t !== e)) : g(n === "single" ? [e] : [...h, e]);
+	};
+	return /* @__PURE__ */ c("div", {
+		ref: m,
+		"data-accordion": "",
+		className: t(r.accordion, d),
+		...p,
+		children: /* @__PURE__ */ c(u.Provider, {
+			value: {
+				expanded: h,
+				toggle: v,
+				canCollapse: _,
+				headingLevel: l
+			},
+			children: f
+		})
+	});
+}), m = a(function({ value: e, disabled: n = !1, className: i, children: a, ...o }, l) {
+	let { expanded: p } = f(u, "AccordionItem must be rendered inside an Accordion."), m = s(), h = p.includes(e);
+	return /* @__PURE__ */ c("div", {
+		ref: l,
+		"data-state": h ? "open" : "closed",
+		className: t(r.item, i),
+		...o,
+		children: /* @__PURE__ */ c(d.Provider, {
+			value: {
+				value: e,
+				open: h,
+				disabled: n,
+				triggerId: `${m}-trigger`,
+				contentId: `${m}-content`
+			},
+			children: a
+		})
+	});
+}), h = a(function({ className: e, children: i, onClick: a, onKeyDown: o, ...s }, p) {
+	let m = f(u, "AccordionTrigger must be rendered inside an Accordion."), h = f(d, "AccordionTrigger must be rendered inside an AccordionItem."), g = `h${m.headingLevel}`, _ = h.open && !m.canCollapse(h.value);
+	return /* @__PURE__ */ c(g, {
+		className: r.heading,
+		children: /* @__PURE__ */ l("button", {
+			ref: p,
+			type: "button",
+			id: h.triggerId,
+			"aria-expanded": h.open,
+			"aria-controls": h.contentId,
+			"aria-disabled": _ || void 0,
+			disabled: h.disabled,
+			"data-accordion-trigger": "",
+			className: t(r.trigger, e),
+			onClick: (e) => {
+				a?.(e), e.defaultPrevented || m.toggle(h.value);
+			},
+			onKeyDown: (e) => {
+				o?.(e);
+				let t = e.currentTarget.closest("[data-accordion]");
+				if (e.defaultPrevented || !t) return;
+				let n = [...t.querySelectorAll("[data-accordion-trigger]:not(:disabled)")].filter((e) => e.closest("[data-accordion]") === t), r = n.indexOf(e.currentTarget), i;
+				e.key === "ArrowDown" ? i = n[(r + 1) % n.length] : e.key === "ArrowUp" ? i = n.at(r - 1) : e.key === "Home" ? i = n[0] : e.key === "End" && (i = n.at(-1)), i && (e.preventDefault(), i.focus());
+			},
+			...s,
+			children: [/* @__PURE__ */ c("span", {
+				className: r.label,
+				children: i
+			}), /* @__PURE__ */ c(n, { className: r.chevron })]
+		})
+	});
+}), g = a(function({ className: e, children: n, ...i }, a) {
+	let o = f(d, "AccordionContent must be rendered inside an AccordionItem.");
+	return /* @__PURE__ */ c("div", {
+		ref: a,
+		id: o.contentId,
+		role: "region",
+		"aria-labelledby": o.triggerId,
+		hidden: !o.open,
+		className: t(r.content, e),
+		...i,
+		children: /* @__PURE__ */ c("div", {
+			className: r.inner,
+			children: n
+		})
+	});
+});
+export { p as Accordion, g as AccordionContent, m as AccordionItem, h as AccordionTrigger };
+
+//# sourceMappingURL=Accordion.js.map

package/dist/components/Accordion/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","names":["styles","Accordion_module_default","AccordionContext","createContext","ItemContext","useRequiredContext","value","useContext","context","message","Accordion","forwardRef","props","expanded","setExpanded","useControllableState","onValueChange","canCollapse","type","collapsible","item","toggle","open","cn","className","AccordionItem","id","useId","AccordionTrigger","accordion","Heading","locked","onClick","event","root","triggers","trigger","index","target","ChevronDownIcon","AccordionContent"],"sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import {\n  createContext,\n  forwardRef,\n  useContext,\n  useId,\n  type ButtonHTMLAttributes,\n  type Context,\n  type HTMLAttributes,\n  type KeyboardEvent,\n} from 'react';\nimport { useControllableState } from '@/hooks/useControllableState';\nimport { cn } from '@/utils/cn';\nimport { ChevronDownIcon } from '../Icon';\nimport styles from './Accordion.module.css';\n\ntype HeadingLevel = 2 | 3 | 4 | 5 | 6;\n\ninterface AccordionContextValue {\n  expanded: string[];\n  toggle: (value: string) => void;\n  canCollapse: (value: string) => boolean;\n  headingLevel: HeadingLevel;\n}\n\ninterface ItemContextValue {\n  value: string;\n  open: boolean;\n  disabled: boolean;\n  triggerId: string;\n  contentId: string;\n}\n\nconst AccordionContext = createContext<AccordionContextValue | null>(null);\nconst ItemContext = createContext<ItemContextValue | null>(null);\n\nfunction useRequiredContext<T>(context: Context<T | null>, message: string): T {\n  const value = useContext(context);\n  if (!value) throw new Error(message);\n  return value;\n}\n\nexport interface AccordionProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'defaultValue' | 'onChange'\n> {\n  /**\n   * `single` keeps at most one section open; `multiple` lets any number stay open.\n   * @default 'single'\n   */\n  type?: 'single' | 'multiple';\n  /** Values of the open sections, for a controlled accordion. */\n  value?: string[];\n  /** Values of the sections open at first, for an uncontrolled accordion. */\n  defaultValue?: string[];\n  /** Called with the values of the open sections. */\n  onValueChange?: (value: string[]) => void;\n  /**\n   * In `single` mode, lets the open section close so that none is open.\n   * @default true\n   */\n  collapsible?: boolean;\n  /**\n   * Level of the heading that wraps each trigger. Match it to the outline of the page.\n   * @default 3\n   */\n  headingLevel?: HeadingLevel;\n}\n\n/** Stack of sections whose content expands and collapses. */\nexport const Accordion = forwardRef<HTMLDivElement, AccordionProps>(function Accordion(\n  {\n    type = 'single',\n    value,\n    defaultValue = [],\n    onValueChange,\n    collapsible = true,\n    headingLevel = 3,\n    className,\n    children,\n    ...props\n  },\n  ref,\n) {\n  const [expanded, setExpanded] = useControllableState({\n    value,\n    defaultValue,\n    onChange: onValueChange,\n  });\n\n  const canCollapse = (item: string) =>\n    type === 'multiple' || collapsible || !expanded.includes(item);\n\n  const toggle = (item: string) => {\n    if (expanded.includes(item)) {\n      if (canCollapse(item)) setExpanded(expanded.filter((open) => open !== item));\n    } else {\n      setExpanded(type === 'single' ? [item] : [...expanded, item]);\n    }\n  };\n\n  return (\n    <div ref={ref} data-accordion=\"\" className={cn(styles.accordion, className)} {...props}>\n      <AccordionContext.Provider value={{ expanded, toggle, canCollapse, headingLevel }}>\n        {children}\n      </AccordionContext.Provider>\n    </div>\n  );\n});\n\nexport interface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {\n  /** Identifies the section in `value`. */\n  value: string;\n  /** @default false */\n  disabled?: boolean;\n}\n\n/** One section: an `AccordionTrigger` followed by its `AccordionContent`. */\nexport const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(function AccordionItem(\n  { value, disabled = false, className, children, ...props },\n  ref,\n) {\n  const { expanded } = useRequiredContext(\n    AccordionContext,\n    'AccordionItem must be rendered inside an Accordion.',\n  );\n  const id = useId();\n  const open = expanded.includes(value);\n\n  return (\n    <div\n      ref={ref}\n      data-state={open ? 'open' : 'closed'}\n      className={cn(styles.item, className)}\n      {...props}\n    >\n      <ItemContext.Provider\n        value={{\n          value,\n          open,\n          disabled,\n          triggerId: `${id}-trigger`,\n          contentId: `${id}-content`,\n        }}\n      >\n        {children}\n      </ItemContext.Provider>\n    </div>\n  );\n});\n\nexport type AccordionTriggerProps = ButtonHTMLAttributes<HTMLButtonElement>;\n\n/** Heading button that expands and collapses its section. */\nexport const AccordionTrigger = forwardRef<HTMLButtonElement, AccordionTriggerProps>(\n  function AccordionTrigger({ className, children, onClick, onKeyDown, ...props }, ref) {\n    const accordion = useRequiredContext(\n      AccordionContext,\n      'AccordionTrigger must be rendered inside an Accordion.',\n    );\n    const item = useRequiredContext(\n      ItemContext,\n      'AccordionTrigger must be rendered inside an AccordionItem.',\n    );\n    const Heading = `h${accordion.headingLevel}` as const;\n    const locked = item.open && !accordion.canCollapse(item.value);\n\n    const onTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n      onKeyDown?.(event);\n      const root = event.currentTarget.closest('[data-accordion]');\n      if (event.defaultPrevented || !root) return;\n\n      const triggers = [\n        ...root.querySelectorAll<HTMLButtonElement>('[data-accordion-trigger]:not(:disabled)'),\n      ].filter((trigger) => trigger.closest('[data-accordion]') === root);\n      const index = triggers.indexOf(event.currentTarget);\n\n      let target: HTMLButtonElement | undefined;\n      if (event.key === 'ArrowDown') target = triggers[(index + 1) % triggers.length];\n      else if (event.key === 'ArrowUp') target = triggers.at(index - 1);\n      else if (event.key === 'Home') target = triggers[0];\n      else if (event.key === 'End') target = triggers.at(-1);\n      if (!target) return;\n\n      event.preventDefault();\n      target.focus();\n    };\n\n    return (\n      <Heading className={styles.heading}>\n        <button\n          ref={ref}\n          type=\"button\"\n          id={item.triggerId}\n          aria-expanded={item.open}\n          aria-controls={item.contentId}\n          aria-disabled={locked || undefined}\n          disabled={item.disabled}\n          data-accordion-trigger=\"\"\n          className={cn(styles.trigger, className)}\n          onClick={(event) => {\n            onClick?.(event);\n            if (!event.defaultPrevented) accordion.toggle(item.value);\n          }}\n          onKeyDown={onTriggerKeyDown}\n          {...props}\n        >\n          <span className={styles.label}>{children}</span>\n          <ChevronDownIcon className={styles.chevron} />\n        </button>\n      </Heading>\n    );\n  },\n);\n\nexport type AccordionContentProps = HTMLAttributes<HTMLDivElement>;\n\n/** Content of a section, hidden while it is collapsed. */\nexport const AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps>(\n  function AccordionContent({ className, children, ...props }, ref) {\n    const item = useRequiredContext(\n      ItemContext,\n      'AccordionContent must be rendered inside an AccordionItem.',\n    );\n\n    return (\n      <div\n        ref={ref}\n        id={item.contentId}\n        role=\"region\"\n        aria-labelledby={item.triggerId}\n        hidden={!item.open}\n        className={cn(styles.content, className)}\n        {...props}\n      >\n        <div className={styles.inner}>{children}</div>\n      </div>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/components/Accordion/Accordion.module.js

@@ -0,0 +1,14 @@
+// src/components/Accordion/Accordion.module.css
+var e = "onyx-accordion-LVhhv", t = "onyx-item-7ryVk", n = "onyx-heading-6PDIo", r = "onyx-trigger-9BYFY onyx-focusRing-qmcYD", i = "onyx-label-Ss7uW", a = "onyx-chevron-i-HVZ", o = "onyx-inner-fuFSv", s = "onyx-content-in-0q8Ku", c = {
+	accordion: e,
+	item: t,
+	heading: n,
+	trigger: r,
+	label: i,
+	chevron: a,
+	inner: o,
+	contentIn: s
+};
+export { e as accordion, a as chevron, s as contentIn, c as default, n as heading, o as inner, t as item, i as label, r as trigger };
+
+//# sourceMappingURL=Accordion.module.js.map

package/dist/components/Accordion/Accordion.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.module.js","names":["accordion","item","heading","trigger","label","chevron","inner","contentIn","Accordion_module_default"],"sources":["../../../src/components/Accordion/Accordion.module.css"],"sourcesContent":[".accordion {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  border-block: var(--border-width-thin) solid var(--color-border);\n}\n\n.item + .item {\n  border-top: var(--border-width-thin) solid var(--color-border);\n}\n\n.heading {\n  margin: 0;\n  font-size: inherit;\n  font-weight: inherit;\n}\n\n.trigger {\n  composes: focusRing from '../../styles/focus-ring.module.css';\n  --focus-ring-offset: calc(var(--focus-ring-width) * -1);\n\n  display: flex;\n  gap: var(--space-3);\n  align-items: center;\n  width: 100%;\n  min-height: var(--size-control-lg);\n  padding: var(--space-3) var(--space-2);\n  font: inherit;\n  font-weight: var(--font-weight-medium);\n  color: var(--color-text);\n  text-align: start;\n  cursor: pointer;\n  background: transparent;\n  border: 0;\n  border-radius: var(--radius-md);\n  transition: background-color var(--duration-fast) var(--easing-standard);\n}\n\n.trigger:hover:not(:disabled) {\n  background-color: var(--color-state-hover);\n}\n\n.trigger:active:not(:disabled, [aria-disabled='true']) {\n  background-color: var(--color-state-active);\n}\n\n.trigger[aria-disabled='true'] {\n  cursor: default;\n}\n\n.trigger:disabled {\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n}\n\n.label {\n  flex: 1;\n  min-width: 0;\n}\n\n.chevron {\n  flex-shrink: 0;\n  font-size: var(--size-icon-md);\n  color: var(--color-text-muted);\n  transition: rotate var(--duration-normal) var(--easing-standard);\n}\n\n.trigger[aria-expanded='true'] .chevron {\n  rotate: 180deg;\n}\n\n.trigger:disabled .chevron {\n  color: inherit;\n}\n\n.inner {\n  padding: 0 var(--space-2) var(--space-4);\n  font-size: var(--font-size-sm);\n  line-height: var(--line-height-normal);\n  color: var(--color-text-muted);\n  animation: content-in var(--duration-normal) var(--easing-enter);\n}\n\n@keyframes content-in {\n  from {\n    opacity: 0;\n    translate: 0 calc(var(--space-1) * -1);\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,2 @@
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './Accordion.js';
+export type { AccordionContentProps, AccordionItemProps, AccordionProps, AccordionTriggerProps, } from './Accordion.js';

package/dist/components/Alert/Alert.d.ts

@@ -0,0 +1,26 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type AlertIntent = 'info' | 'success' | 'warning' | 'danger';
+export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** @default 'info' */
+    intent?: AlertIntent;
+    /** @default 'subtle' */
+    variant?: 'subtle' | 'solid';
+    /** Short summary shown in bold above the content. */
+    title?: ReactNode;
+    /** Replaces the intent icon. `false` hides it. */
+    icon?: ReactNode;
+    /** Controls placed after the content, such as a button or a link. */
+    action?: ReactNode;
+    /** Shows a dismiss button that calls this function. */
+    onDismiss?: () => void;
+    /**
+     * Accessible name of the dismiss button.
+     * @default 'Dismiss'
+     */
+    dismissLabel?: string;
+}
+/**
+ * Highlighted message about the page or a task. Warnings and errors use `role="alert"`, so they
+ * are announced as soon as they appear; the others use `role="status"`. Override with `role`.
+ */
+export declare const Alert: import('react').ForwardRefExoticComponent<AlertProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Alert/Alert.js

@@ -0,0 +1,58 @@
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import { CloseIcon as t, ErrorIcon as n, InfoIcon as r, SuccessIcon as i, WarningIcon as a } from "../Icon/icons.js";
+import { IconButton as o } from "../IconButton/IconButton.js";
+import s from "./Alert.module.js";
+import { forwardRef as c, useId as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+// src/components/Alert/Alert.tsx
+var f = {
+	info: /* @__PURE__ */ u(r, {}),
+	success: /* @__PURE__ */ u(i, {}),
+	warning: /* @__PURE__ */ u(a, {}),
+	danger: /* @__PURE__ */ u(n, {})
+}, p = c(function({ intent: n = "info", variant: r = "subtle", title: i, icon: a, action: c, onDismiss: p, dismissLabel: m = "Dismiss", className: h, children: g, ..._ }, v) {
+	let y = l(), b = i != null;
+	return /* @__PURE__ */ d("div", {
+		ref: v,
+		role: n === "warning" || n === "danger" ? "alert" : "status",
+		"aria-labelledby": b ? y : void 0,
+		className: e(s.alert, s[n], s[r], h),
+		..._,
+		children: [
+			a !== !1 && /* @__PURE__ */ u("span", {
+				className: s.icon,
+				"aria-hidden": "true",
+				children: a ?? f[n]
+			}),
+			/* @__PURE__ */ d("div", {
+				className: s.content,
+				children: [
+					b && /* @__PURE__ */ u("p", {
+						id: y,
+						className: s.title,
+						children: i
+					}),
+					g !== void 0 && /* @__PURE__ */ u("div", {
+						className: s.description,
+						children: g
+					}),
+					c !== void 0 && /* @__PURE__ */ u("div", {
+						className: s.action,
+						children: c
+					})
+				]
+			}),
+			p && /* @__PURE__ */ u(o, {
+				label: m,
+				size: "sm",
+				className: s.dismiss,
+				onClick: p,
+				children: /* @__PURE__ */ u(t, {})
+			})
+		]
+	});
+});
+export { p as Alert };
+
+//# sourceMappingURL=Alert.js.map