@ahrowe/ui 0.34.0 → 0.36.0

package/README.md

@@ -2,6 +2,8 @@
 
 A React UI component library with theming, form validation, and a full component suite.
 
+**[Browse the components](https://ahrowe.com/packages/ui/demo/)**, with live props and a theme editor.
+
 ## Install
 
 ```bash
@@ -12,100 +14,188 @@ npm install @ahrowe/ui
 
 ```tsx
 import '@ahrowe/ui/style.css';
+import { ThemeProvider } from '@ahrowe/ui';
 
 function App() {
   return (
     <ThemeProvider>
       App content here
+      {/* Modal, Tooltip, Popover, Toast and Menu portal render into this. */}
+      <div id="bodyEnd" />
     </ThemeProvider>
   );
 }
 ```
 
-## Claude Code Integration
+`ThemeProvider` is required. It injects the CSS variables the components paint with, so without it
+they render unstyled. Two themes ship, `defaultTheme` (dark) and `lightTheme`. Pass your own to
+`themes` to replace them.
 
-Add one line to your project's `CLAUDE.md` and Claude will have full awareness of all components, props, and usage patterns:
+## Before you install
 
-```
-@node_modules/@ahrowe/ui/docs/CLAUDE.md
-```
+Things that might rule the package out.
+
+- **React 19 or newer.** Refs are plain props here, no `forwardRef`, and that only works from 19 on.
+- **Modern browsers.** Chrome and Edge 111, Firefox 114, Safari 16.4. Nothing is transpiled below
+  that and no polyfill ships. Two details want a newer Firefox: ScrollFade's edge fade eases from
+  128 and snaps before it, and OptionPicker rings the whole group from 121. Both still work either
+  way. CI only runs Chromium.
+- **One stylesheet.** `@ahrowe/ui/style.css` is 138 KB, 26 KB gzipped, and covers everything. There
+  is no per-component CSS. It sits in `@layer ahrowe-ui`, so your own unlayered CSS wins no matter
+  which loads first.
+- **No right to left.** The stylesheets use `margin-left` and friends rather than logical
+  properties, so nothing mirrors.
+- **0.x.** A minor can break something, a patch does not. The changelog is written by hand and says
+  what to change. 1.0 waits until the API stops moving, so pin the minor if that matters to you.
+- **Server components.** Every module is `'use client'`. Nothing renders on the server, but you can
+  import it into an RSC app without a wrapper.
+
+### Accessibility
+
+Native elements where they exist, ARIA roles and state where they do not. Everything works from
+the keyboard. Groups that act as one control (RadioGroup, OptionPicker, Menu, Tree) take a single
+tab stop and move with the arrow keys, and `:focus-visible` keeps a ring off mouse clicks.
 
-Claude will know:
-- All available components and when to use each one
-- Full prop APIs with TypeScript types
-- ThemeProvider setup and CSS variable system
-- FormValidator integration for form components
-- Slot customisation (`classNames` / `styles` props)
+Modal traps focus, closes on Escape and hands focus back. Popover does not trap, on purpose, but
+Escape still returns you to the trigger. Stack overlays and only the top one hears Escape.
 
-### MCP Server (advanced)
+Animation respects `prefers-reduced-motion`. The loading spinners and Toast's countdown bar keep
+moving, because a frozen one would be lying.
 
-For richer integration — component search, dynamic docs — add the MCP server to your `.claude/settings.json`:
+None of this is audited. No axe run in CI, no screen reader matrix, and contrast comes from the
+theme you pass rather than from the library.
+
+## Claude Code
+
+The docs ship inside the package and Claude reads them out of `node_modules`. Three ways in.
+
+**The plugin** installs a skill and the MCP server together. The skill costs one line of context
+until Claude actually works on UI.
+
+```bash
+/plugin marketplace add AndreasWeinzierl/ahrowe-ui
+/plugin install ahrowe-ui@ahrowe
+```
+
+For a whole team at once, commit this to the project's `.claude/settings.json` instead:
 
 ```json
 {
-  "mcpServers": {
-    "ahrowe-ui": {
-      "command": "npx",
-      "args": ["ahrowe-ui-mcp"]
-    }
-  }
+  "extraKnownMarketplaces": {
+    "ahrowe": { "source": { "source": "github", "repo": "AndreasWeinzierl/ahrowe-ui" } }
+  },
+  "enabledPlugins": [{ "name": "ahrowe-ui", "marketplace": "ahrowe" }]
 }
 ```
 
-This gives Claude three tools: `list_components`, `get_component_docs`, and `search_components`.
+**The docs index** is one line in your own `CLAUDE.md`:
+
+```
+@node_modules/@ahrowe/ui/docs/CLAUDE.md
+```
+
+It holds the rules common to every component and a table pointing at `docs/<Name>.md`, which
+Claude opens when it needs one. This one loads in every session, where the plugin's skill only
+wakes up for UI work.
+
+**The MCP server** on its own:
+
+```bash
+claude mcp add --transport stdio ahrowe-ui --scope project -- npx --no ahrowe-ui-mcp
+```
+
+`search_components` finds a component from a description, `get_component_docs` returns one doc and
+`list_components` lists them all. Each doc is a resource too, so you can drop one in yourself with
+`@ahrowe-ui:ahrowe-ui://docs/Button`. The `ahrowe-ui-mcp` bin comes with the package, so it only
+runs where `@ahrowe/ui` is installed.
 
 ## Components
 
+<!-- components:start -->
+
 | Component | Description |
 |-----------|-------------|
-| `Accordion` | Collapsible sections |
-| `ActionButtons` | Submit / Cancel button pair |
-| `ActionIcon` | Icon-only button |
-| `Avatar` + `AvatarGroup` | User/entity image with initials/icon fallback and status dot, stackable |
-| `Badge` | Count or status indicator, standalone or overlaid on another element |
-| `BodyEnd` | Portal renderer to `#bodyEnd` |
-| `Button` | Primary action button with loading state |
-| `Card` + `CardHeader` + `CardMedia` + `CardContent` + `CardActions` | Surface container |
-| `Checkbox` | Boolean toggle input |
-| `Chip` + `ChipContainer` | Compact tag / filter token |
-| `ColorPicker` | Hex colour selector |
-| `ConfirmModal` | Destructive action confirmation dialog |
-| `Dropdown` | Single-value select |
-| `EmptyState` | Placeholder for empty lists / search results |
-| `Fab` | Floating action button with speed dial |
-| `FloatingMenu` | Contextual popover |
-| `Icon` | Built-in SVG icons |
-| `IconLoading` + `SpinnerLoading` | Loading indicators |
-| `IdleManager` | User inactivity detection |
-| `InfiniteBlock` | Infinite scroll container |
-| `Input` | Floating-label text input (text, email, password, phone, search…) |
-| `InteractableDiv` | Accessible clickable container |
-| `KanbanBoard` + `KanbanColumn` | Drag-and-drop kanban board |
-| `KlipyPicker` | GIF picker backed by the Klipy API |
-| `Modal` | Full overlay dialog |
-| `NumberInput` | Formatted numeric input |
-| `OptionPicker` | Segmented single-choice control |
-| `Overscroll` | Mobile-style collapsing header on scroll |
-| `ProgressBar` | Single or stacked progress bar |
-| `Ripple` | Material ink ripple effect |
-| `RoomDrawer` | Interactive floor-plan canvas |
-| `ScrollbarProvider` | Custom scrollbar styling wrapper |
-| `SearchInput` | Debounced search field with optional result count |
-| `Skeleton` | Content-shaped loading placeholder (text/circle/rectangular) |
-| `Stepper` | Step progress indicator |
-| `Switch` | Sliding boolean toggle |
-| `Textarea` | Multiline text input |
-| `ThemeProvider` + `useTheme` | Theme context and CSS variables |
-| `Tooltip` | Info / error / details tooltip |
-| `Wizard` | Animated multi-step container |
+| `Accordion` | Collapsible sections for progressive disclosure — FAQs, settings panels, long-form content that users expand on demand |
+| `ActionButtons` | Standardised Submit / Cancel button pair for forms, dialogs, and drawer footers |
+| `ActionIcon` | Clickable icon button without a label — toolbar actions, table row actions, icon-only controls |
+| `Alert`, `AlertStyleType` | A persistent inline status message, used for form-level errors, page/section banners, empty-config warnings, and "here's what changed" notices |
+| `AnimatedLogo` | A self-drawing SVG mark for splash/loading screens, empty states, or anywhere a brand or icon mark should feel alive rather than static |
+| `AnimatedText`, `AnimatedTextVariant`, `AnimatedTextUnit` | Decorative text entrance or emphasis effect, for hero headlines, empty-state messages, "premium"/"new" callouts, loading/decoding states |
+| `Avatar`, `AvatarGroup` | User or entity image — profile pictures, comment authors, member lists |
+| `Badge`, `BadgeStyleType`, `BadgePosition` | Small count or status indicator — unread counts, notification dots, "new" markers |
+| `BodyEnd` | Renders children via a React portal into a `#bodyEnd` DOM node |
+| `Breadcrumb` | A trail showing the current page's position within a hierarchy, with links back to each ancestor, such as a file browser path, a category/subcategory drill-down, or a multi-level settings page |
+| `Button`, `ButtonStyleType`, `ButtonSize`, `ButtonType` | Primary interactive action trigger |
+| `ButtonGroup`, `ButtonGroupOrientation` | Joins a row (or column) of buttons into a single seamless control, merging their borders and rounding only the outer corners |
+| `Card`, `CardStyleType`, `CardHeader`, `CardMedia`, `CardContent`, `CardActions` | Surface container for grouping related content — list items, profile cards, dashboard tiles, product listings |
+| `Carousel` | A slide track for stepping through a set of items one at a time, with arrows, dots, and drag/swipe support, plus optional autoplay |
+| `Checkbox` | Boolean toggle input — settings, multi-select lists, accept terms, feature flags |
+| `Chip`, `ChipContainer`, `ChipStyleType` | Compact tag, label, or filter token — selected items, applied filters, category badges, user avatars with remove |
+| `ColorPicker` | Hex colour selection — theme editors, annotation tools, customisation panels |
+| `ConfigProvider` | Set global **default props** for library components once, near the root of your app, instead of repeating the same prop on every instance |
+| `ConfirmModal` | Confirmation dialog before destructive or irreversible actions — delete, archive, send, overwrite |
+| `DatePicker` | Date selection input — booking forms, birth date fields, date range pickers, deadline selectors |
+| `Divider`, `DividerTextPosition`, `DividerOrientation` | A rule that separates sections of content — horizontal by default, filling the width of its parent |
+| `Drawer` | Inline horizontal panel that collapses and expands by animating its width — side panels, navigation rails, detail/filter panes that slide open beside the main content |
+| `DropZone`, `DropZoneReturnType`, `DropZoneStatus` | Drag-and-drop file upload area, optionally click-to-open the native picker |
+| `Dropdown` | Single-value selection from a list — country pickers, status selectors, category filters, any select-style input |
+| `EmptyState` | Placeholder shown when a list, table, or search result has no items — empty inboxes, no search matches, freshly-created sections |
+| `ErrorBoundary` | Wrap any subtree whose render errors shouldn't take down the rest of the app — a widget, a route, a third-party embed, a list row |
+| `Fab` | Floating action button — primary screen action (create, add, compose), optionally with a speed-dial sub-menu |
+| `Flip` | Flip a front/back pair of content 180°, like a physical playing card |
+| `emptyFloorPlan`, `addWall`, `derivePlan` | The shared data model behind `RoomDrawer` and `RoomViewer` |
+| `FormValidator`, `Validators`, `useFormValidator` | Track and validate a single form field's value, dirty/touched state, and errors |
+| `useFormValidatorGroup`, `FormValidatorGroup`, `FormValidator`, `Validators` | Manage a whole form — multiple fields, a single submit handler, validate-on-submit, dirty/touched tracking across the form, and mapping server-side errors back onto the right fields |
+| `IconPicker` | Pick one item from a visual icon/image grid — category selectors, emoji-style pickers, avatar selectors, anything where each option is best represented by an icon or image rather than text alone |
+| `IdleManager` | Show something only once the user has stopped interacting — a screen saver, a session-timeout warning, an "are you still there?" prompt, an idle dashboard view |
+| `Input`, `InputType` | Text input with floating label, validation state, and type variants |
+| `InputDropdown` | Combobox-style input — the user can type to filter and also pick from a dropdown list |
+| `InteractableDiv` | Accessible `<div>` that behaves like a button — click and keyboard (Enter/Space) events, with proper ARIA semantics |
+| `KanbanBoard`, `KanbanColumn` | Drag-and-drop board with columns — task management, workflow stages, status boards (e.g. Todo / In Progress / Done) |
+| `KlipyPicker` | GIF picker backed by the Klipy API — chat reactions, message composers, content authoring tools |
+| `IconLoading`, `SpinnerLoading` | Loading indicators for async operations — page loads, data fetching, button actions (when not using Button's built-in `isLoading`) |
+| `Menu` | A list of actions hanging off a trigger — a row's "more" button, a toolbar overflow, a context menu on a card |
+| `Modal` | Full overlay dialog — forms, detail views, confirmations, wizards that need to block the rest of the UI |
+| `MultiSelect` | Pick several options from a list |
+| `NumberInput` | Numeric input with formatting — prices, quantities, percentages, phone numbers with separators |
+| `OptionPicker` | Segmented control for picking exactly one option from a small set — view modes, sort directions, simple tab-like switches |
+| `OtpInput`, `OtpInputCharset` | A one-time-passcode / verification-code input, rendered as one box per character |
+| `Overscroll` | Mobile-style collapsing header that shrinks as the user scrolls — profile pages, detail screens, anywhere a large hero area should yield space to content on scroll |
+| `Pagination` | Move through server-paged results a page at a time — a results list, an admin table, a report |
+| `Popover` | Any panel anchored to a trigger: profile cards, quick forms, action menus, pickers, filter dropdowns |
+| `ProgressBar` | Visual progress indicator — file uploads, multi-step completion, storage usage, stacked stats (e.g. budget breakdown) |
+| `RadioGroup`, `RadioGroupOrientation` | Single-choice selection from a small, always-visible set of options — plan pickers, shipping methods, yes/no/maybe, settings with 2–5 mutually exclusive choices |
+| `Rating` | A star rating input or display, for review scores, feedback prompts, and quality indicators |
+| `RevealLens` | A two-layer reveal/magnifier effect — an `overlay` covers a `background` by default, and moving the pointer over the component uncovers the `background` in an area around the cursor |
+| `Ripple` | Material-style ink ripple effect on any interactive element — buttons, list items, cards, tiles |
+| `RoomDrawer` | An interactive floor plan editor |
+| `RoomViewer` | Shows a floor plan someone can look at and click, without letting them change it — a building directory, a booking screen, a dashboard beside a room list |
+| `ScrollFade`, `ScrollFadeAxis` | A scrollable box whose content dissolves at the edge it is scrolling past, instead of being cut off mid-line against it |
+| `ScrollbarProvider` | Applies custom scrollbar styling to a scrollable region — use to keep scrollbar appearance consistent with the theme |
+| `SearchInput` | Search field with built-in debouncing and an optional result count line — list filters, search-as-you-type pages |
+| `SectionHeader`, `SectionHeaderSize` | A reusable heading block for the top of a page, panel, card, or any section — a title with an optional subtitle, a leading icon or thumbnail, and a trailing actions area |
+| `Skeleton`, `SkeletonVariant`, `SkeletonAnimation` | Content-shaped loading placeholder, shown while real content is being fetched — more polished than a spinner for content-heavy pages (lists, cards, profile headers) |
+| `Slider` | Let the user pick a number from a continuous or stepped range by dragging a thumb: volume, brightness, price ranges, zoom, quality presets |
+| `SplitButton` | A primary action button with a small attached dropdown for closely related secondary actions, e.g. "Save ▾" opening "Save as draft" / "Save and close" |
+| `Stepper` | Step progress indicator for multi-step forms, onboarding flows, and checkout wizards |
+| `Sticky` | Pin a piece of content to the top of the viewport once the page scrolls past it — section headers, toolbars, filter bars, table headers |
+| `Switch` | Sliding boolean toggle — settings panels, feature flags, preference lists |
+| `TabHeader` | A horizontal row of tabs to switch between sibling views or sections — settings panels, dashboards, detail pages |
+| `Textarea` | Multiline text input — comments, descriptions, notes, code snippets, long-form content |
+| `ThemeProvider` | Required wrapper for the entire component library |
+| `Tilt`, `TiltGroup` | Wrap content that should tilt toward the cursor in 3D |
+| `TimeInput` | Time-of-day selection — appointment times, opening hours, shift starts, reminders |
+| `Timeline`, `TimelineAlignment`, `TimelineItemStatus` | A vertical list of dated events, connected by a line, for audit logs, activity feeds, order status history, and deploy logs |
+| `Timer` | A countdown timer with a depleting ring, add/remove-time and pause/cancel controls, and an imperative ref API |
+| `ToastProvider`, `showToast` | Non-blocking notifications — save confirmations, error alerts, info messages, warnings |
+| `Tooltip` | Contextual help, info icons, field explanations, error pointers |
+| `Tree`, `flattenTree` | A hierarchical list the user can expand, collapse and pick from: categories, nested locations, folder structures, org charts |
+| `VirtualList` | Efficiently render large lists or tables — thousands of rows rendered with a virtualised scroll window so only visible rows are in the DOM |
+| `Wizard` | Animated step container for multi-step forms and flows |
+
+<!-- components:end -->
 
 ## Services
 
-| Export | Description |
-|--------|-------------|
-| `FormValidator` | Per-field validation state |
-| `FormValidatorGroup` | Group of validators |
-| `Validators` | Built-in validator functions |
-| `useFormValidator` | Hook for FormValidator |
-| `useFormValidatorGroup` | Hook for FormValidatorGroup |
-| `mapLocale`, `setLocale`, `getLocale` | Localisation helpers |
+Localisation helpers `mapLocale`, `setLocale` and `getLocale` are exported alongside the components.
+`FormValidator`, `FormValidatorGroup` and `Validators` are in the table above.

package/dist/cjs-types/common/accordion/accordion.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import { AccordionProps } from './accordion.types.js';
+declare function Accordion(props: AccordionProps): ReactElement;
+export default Accordion;

package/dist/cjs-types/common/accordion/accordion.types.d.ts

@@ -0,0 +1,21 @@
+import { CSSProperties, ReactNode } from 'react';
+import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
+export declare enum AccordionStyleType {
+    Default = "default",
+    Primary = "primary",
+    Plain = "plain"
+}
+export type AccordionSlots = 'root' | 'header' | 'title' | 'icon' | 'body' | 'bodyInner';
+export interface AccordionProps extends HtmlProps {
+    title?: string;
+    children?: ReactNode;
+    expanded?: boolean | null;
+    onHeaderClicked?: (id: string, isExpanded: boolean) => void;
+    styleType?: AccordionStyleType;
+    startOpen?: boolean;
+    hideHeader?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    classNames?: SlotClassNames<AccordionSlots>;
+    styles?: SlotStyles<AccordionSlots>;
+}

package/dist/cjs-types/common/accordion/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './accordion.js';
+export * from './accordion.types.js';

package/dist/cjs-types/common/actionButtons/actionButtons.d.ts

@@ -0,0 +1,2 @@
+import { ActionButtonsProps } from './actionButtons.types.js';
+export default function ActionButtons(props: ActionButtonsProps): import("react").JSX.Element;

package/dist/cjs-types/common/actionButtons/actionButtons.types.d.ts

@@ -0,0 +1,34 @@
+import { CSSProperties, ReactElement } from 'react';
+import { ButtonStyleType } from '../button/index.js';
+import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
+import { IconContent } from '../types/icon.types.js';
+export type ActionButtonsSlots = 'root' | 'submitButton' | 'cancelButton';
+/** Text ActionButtons renders of its own, for translating it. */
+export interface ActionButtonsLabels {
+    /** The confirming button (default `Save`). */
+    submit?: ReactElement | number | string;
+    /** The dismissing button (default `Cancel`). */
+    cancel?: ReactElement | number | string;
+}
+export interface ActionButtonsProps extends HtmlProps {
+    onSubmit?: () => void;
+    onClose?: () => void;
+    submitButtonStyle?: ButtonStyleType;
+    isSubmitButtonLoading?: boolean;
+    isSubmitButtonDisabled?: boolean;
+    submitButtonIcon?: IconContent;
+    cancelButtonStyle?: ButtonStyleType;
+    isCancelButtonLoading?: boolean;
+    isCancelButtonDisabled?: boolean;
+    cancelButtonIcon?: IconContent;
+    hidePrimaryButton?: boolean;
+    hideSecondaryButton?: boolean;
+    noMargin?: boolean;
+    stackButtons?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    classNames?: SlotClassNames<ActionButtonsSlots>;
+    styles?: SlotStyles<ActionButtonsSlots>;
+    /** Overrides the text ActionButtons renders of its own. Merged per key. */
+    labels?: ActionButtonsLabels;
+}

package/dist/cjs-types/common/actionButtons/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ActionButtons } from './actionButtons.js';
+export * from './actionButtons.types.js';

package/dist/cjs-types/common/actionIcon/actionIcon.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import { ActionIconProps } from './actionIcon.types.js';
+declare function ActionIcon({ icon, className, style, title, onClick, classNames, styles: slotStyles, ...rest }: ActionIconProps): ReactElement;
+export default ActionIcon;

package/dist/cjs-types/common/actionIcon/actionIcon.types.d.ts

@@ -0,0 +1,15 @@
+import { default as React, CSSProperties } from 'react';
+import { IconContent } from '../types/icon.types.js';
+import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
+export type ActionIconSlots = 'root' | 'icon';
+export interface ActionIconProps extends HtmlProps {
+    icon: IconContent;
+    className?: string;
+    style?: CSSProperties;
+    title?: string;
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    /** Ref to the root element. */
+    ref?: React.Ref<HTMLDivElement>;
+    classNames?: SlotClassNames<ActionIconSlots>;
+    styles?: SlotStyles<ActionIconSlots>;
+}

package/dist/cjs-types/common/actionIcon/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './actionIcon.js';
+export * from './actionIcon.types.js';

package/dist/cjs-types/common/alert/alert.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import { AlertProps } from './alert.types.js';
+declare function Alert(props: AlertProps): ReactElement;
+export default Alert;

package/dist/cjs-types/common/alert/alert.types.d.ts

@@ -0,0 +1,30 @@
+import { CSSProperties, ReactNode } from 'react';
+import { IconContent } from '../types/icon.types.js';
+import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
+export declare enum AlertStyleType {
+    Default = "default",
+    Info = "info",
+    Success = "success",
+    Warn = "warn",
+    Error = "error"
+}
+export type AlertSlots = 'root' | 'icon' | 'content' | 'title' | 'description' | 'closeButton';
+/** Text Alert renders of its own, for translating it. */
+export interface AlertLabels {
+    /** Close button, read out by screen readers. */
+    dismiss?: string;
+}
+export interface AlertProps extends Omit<HtmlProps, 'title'> {
+    title?: ReactNode;
+    children?: ReactNode;
+    styleType?: AlertStyleType;
+    icon?: IconContent;
+    hideIcon?: boolean;
+    onClose?: () => void;
+    className?: string;
+    style?: CSSProperties;
+    classNames?: SlotClassNames<AlertSlots>;
+    styles?: SlotStyles<AlertSlots>;
+    /** Overrides the text Alert renders of its own. Merged per key. */
+    labels?: AlertLabels;
+}

package/dist/cjs-types/common/alert/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './alert.js';
+export * from './alert.types.js';

package/dist/cjs-types/common/animatedIcon/animatedIcon.d.ts

@@ -0,0 +1,3 @@
+import { AnimatedIconProps } from './animatedIcon.types.js';
+declare function AnimatedIcon({ icon, duration, spin, className, style, onClick, onMouseEnter, onMouseLeave, classNames, styles: slotStyles, ...rest }: AnimatedIconProps): import("react").JSX.Element;
+export default AnimatedIcon;

package/dist/cjs-types/common/animatedIcon/animatedIcon.types.d.ts

@@ -0,0 +1,25 @@
+import { CSSProperties, MouseEvent } from 'react';
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
+export type AnimatedIconSlots = 'root' | 'icon';
+export interface AnimatedIconProps extends HtmlProps {
+    /** The icon to display. Changing this crossfades from whatever icon was showing before. */
+    icon: IconDefinition;
+    /** Transition duration in ms (default `200`) */
+    duration?: number;
+    /**
+     * Swaps icons by rotating the whole icon a further 360° each change and crossfading, the
+     * style originally built for `Fab`'s open/close icon, instead of the default of each icon
+     * individually rotating in from the opposite direction. Reads as more energetic/"spinny" —
+     * good for a toggle a user taps repeatedly (open/close, play/pause), less so for something
+     * that swaps only once in a while (default `false`).
+     */
+    spin?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    onClick?: (event: MouseEvent<HTMLSpanElement>) => void;
+    onMouseEnter?: (event: MouseEvent<HTMLSpanElement>) => void;
+    onMouseLeave?: (event: MouseEvent<HTMLSpanElement>) => void;
+    classNames?: SlotClassNames<AnimatedIconSlots>;
+    styles?: SlotStyles<AnimatedIconSlots>;
+}

package/dist/cjs-types/common/animatedIcon/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './animatedIcon.js';
+export * from './animatedIcon.types.js';

package/dist/cjs-types/common/animatedLogo/animatedLogo.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import { AnimatedLogoProps } from './animatedLogo.types.js';
+declare function AnimatedLogo(props: AnimatedLogoProps): ReactElement;
+export default AnimatedLogo;

package/dist/cjs-types/common/animatedLogo/animatedLogo.types.d.ts

@@ -0,0 +1,35 @@
+import { CSSProperties, SVGAttributes } from 'react';
+import { SlotClassNames, SlotStyles, DataProps } from '../types/slots.types.js';
+export type AnimatedLogoSlots = 'path';
+/**
+ * The root here is an `<svg>`, not an HTML element, so the native attributes come from
+ * `SVGAttributes` rather than `HtmlProps` — `data-*` still has to be added separately.
+ *
+ * `color`, `scale`, `path` and `fill` are omitted from that set: all four are real SVG
+ * presentation attributes, and all four are used here with a different meaning or type
+ * (`fill` is a boolean toggle, `path` is the `d` data, `scale` is an animation flag).
+ */
+export interface AnimatedLogoProps extends DataProps, Omit<SVGAttributes<SVGSVGElement>, 'color' | 'scale' | 'path' | 'fill'> {
+    /** SVG path `d` data to draw and fill. Defaults to the AhroweUI mark. */
+    path?: string;
+    /** `viewBox` matching the coordinate space of `path`. Defaults to the AhroweUI mark's viewBox. */
+    viewBox?: string;
+    /** Width/height of the SVG (any valid CSS size). Defaults to `96`. */
+    size?: number | string;
+    /** Overrides the stroke/fill colour. Defaults to `var(--primary-color)`. */
+    color?: string;
+    /** Length of one draw-fill cycle, in seconds. Defaults to `4.2`. */
+    duration?: number;
+    /** Repeats the draw-fill-retract cycle forever. When `false`, plays once and holds filled. Defaults to `true`. */
+    loop?: boolean;
+    /** Fills the interior once the outline is drawn. When `false`, only the stroke draws (and, with `loop`, retracts) — the interior is never filled. Defaults to `true`. */
+    fill?: boolean;
+    /** Spins the mark from 180° to 0° while the outline draws, then fills afterward. Defaults to `false`. */
+    spin?: boolean;
+    /** Scales the mark from 0 to 1 while the outline draws, then fills afterward. Defaults to `false`. */
+    scale?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    classNames?: SlotClassNames<AnimatedLogoSlots>;
+    styles?: SlotStyles<AnimatedLogoSlots>;
+}

package/dist/cjs-types/common/animatedLogo/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './animatedLogo.js';
+export * from './animatedLogo.types.js';

package/dist/cjs-types/common/animatedText/animatedText.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import { AnimatedTextProps } from './animatedText.types.js';
+declare function AnimatedText({ text, variant, unit, staggerDelay, duration, triggerOnView, className, style, classNames, styles: slotStyles, ...rest }: AnimatedTextProps): ReactElement;
+export default AnimatedText;

package/dist/cjs-types/common/animatedText/animatedText.types.d.ts

@@ -0,0 +1,65 @@
+import { CSSProperties } from 'react';
+import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
+/** Which animation plays across the text. */
+export declare enum AnimatedTextVariant {
+    /** Each unit rises up from below its baseline, staggered left to right. */
+    RiseUp = "rise-up",
+    /** Each unit fades in from a blur, staggered left to right. */
+    BlurIn = "blur-in",
+    /** Each unit drops in from above with a spring overshoot, staggered left to right. */
+    Bounce = "bounce",
+    /** Each unit pops in in order, like it's being typed, with a blinking cursor at the end. */
+    Typewriter = "typewriter",
+    /** Each unit resolves from random characters to its real value, staggered left to right. */
+    Scramble = "scramble",
+    /** Each unit briefly RGB-splits and jitters before settling, staggered left to right. */
+    Glitch = "glitch",
+    /** Every unit continuously bobs up and down in a travelling wave, on a loop. */
+    Wave = "wave",
+    /** A highlight sweeps across the text, left to right, on a loop. */
+    Shine = "shine",
+    /** A marker-style highlight block wipes in behind the whole string, once, left to right. */
+    Highlight = "highlight"
+}
+/**
+ * What gets staggered and animated as one entrance unit. Applies to every variant except
+ * `Shine` and `Highlight`, which always animate the whole string as a single run.
+ */
+export declare enum AnimatedTextUnit {
+    /** Every letter animates on its own. */
+    Letter = "letter",
+    /** Every word animates as a whole block. */
+    Word = "word"
+}
+export type AnimatedTextSlots = 'letter' | 'cursor';
+export interface AnimatedTextProps extends HtmlProps {
+    /** The text to animate. Split and animated one unit at a time for every variant but `Shine`/`Highlight`. */
+    text: string;
+    /** Which animation plays (default `RiseUp`). */
+    variant?: AnimatedTextVariant;
+    /** Whether entrance/loop variants stagger by letter or by word (default `Letter`). Ignored by `Shine`/`Highlight`. */
+    unit?: AnimatedTextUnit;
+    /**
+     * Delay in ms between each unit's animation start. Applies to every variant except `Shine`
+     * and `Highlight`, which animate as a single run (default `40`).
+     */
+    staggerDelay?: number;
+    /**
+     * Duration in ms of one animation cycle: a single unit's entrance for `RiseUp`/`BlurIn`/
+     * `Bounce`/`Glitch` (default `500`), one bob cycle for `Wave` (default `1200`), one sweep of
+     * the highlight for `Shine` (default `2000`), or the one-shot wipe-in for `Highlight` (default
+     * `600`). Ignored by `Typewriter` and `Scramble`, since each unit resolves instantly; use
+     * `staggerDelay` to control their pacing.
+     */
+    duration?: number;
+    /**
+     * When `true` (default), the animation doesn't start until the component first scrolls into
+     * the viewport. Set to `false` to play immediately on mount, e.g. for text already in view
+     * above the fold.
+     */
+    triggerOnView?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    classNames?: SlotClassNames<AnimatedTextSlots>;
+    styles?: SlotStyles<AnimatedTextSlots>;
+}

package/dist/cjs-types/common/animatedText/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './animatedText.js';
+export * from './animatedText.types.js';

package/dist/cjs-types/common/avatar/avatar.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import { AvatarProps } from './avatar.types.js';
+declare function Avatar({ src, alt, name, icon, content, status, className, style, classNames, styles: slotStyles, ...rest }: AvatarProps): ReactElement;
+export default Avatar;

package/dist/cjs-types/common/avatar/avatar.types.d.ts

@@ -0,0 +1,26 @@
+import { CSSProperties, ReactNode } from 'react';
+import { IconContent } from '../types/icon.types.js';
+import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
+export type AvatarStatus = 'online' | 'away' | 'busy' | 'offline';
+export type AvatarSlots = 'image' | 'fallback' | 'status';
+export interface AvatarProps extends Omit<HtmlProps, 'content'> {
+    src?: string;
+    alt?: string;
+    name?: string;
+    icon?: IconContent;
+    content?: ReactNode;
+    status?: AvatarStatus;
+    className?: string;
+    style?: CSSProperties;
+    classNames?: SlotClassNames<AvatarSlots>;
+    styles?: SlotStyles<AvatarSlots>;
+}
+export type AvatarGroupSlots = 'item' | 'overflow';
+export interface AvatarGroupProps extends HtmlProps {
+    children?: ReactNode;
+    max?: number;
+    className?: string;
+    style?: CSSProperties;
+    classNames?: SlotClassNames<AvatarGroupSlots>;
+    styles?: SlotStyles<AvatarGroupSlots>;
+}

package/dist/cjs-types/common/avatar/avatarGroup.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import { AvatarGroupProps } from './avatar.types.js';
+declare function AvatarGroup({ children, max, className, style, classNames, styles: slotStyles, ...rest }: AvatarGroupProps): ReactElement;
+export default AvatarGroup;

package/dist/cjs-types/common/avatar/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './avatar.js';
+export { default as AvatarGroup } from './avatarGroup.js';
+export * from './avatar.types.js';