@ahrowe/ui 0.42.0 → 0.44.0

package/docs/Skeleton.md

@@ -1,6 +1,6 @@
 # Skeleton
 
-**When to use:** Content-shaped loading placeholder, shown while real content is being fetched — more polished than a spinner for content-heavy pages (lists, cards, profile headers). Pick the `variant` that matches the shape of what's loading.
+**When to use:** Content-shaped loading placeholder, shown while real content is being fetched — more polished than a [Loader](Loader.md) for content-heavy pages (lists, cards, profile headers). Pick the `variant` that matches the shape of what's loading.
 
 **Keywords:** shimmer placeholder, content placeholder
 

package/docs/SplitButton.md

@@ -9,7 +9,7 @@
 **Enums:** `import { PopoverAlign } from '@ahrowe/ui'` for `align`.
 
 ```tsx
-import { SplitButton } from '@ahrowe/ui';
+import { SplitButton, ThemeColor } from '@ahrowe/ui';
 import type { SplitButtonAction } from '@ahrowe/ui';
 
 const actions: SplitButtonAction[] = [
@@ -21,12 +21,12 @@ const actions: SplitButtonAction[] = [
   Save
 </SplitButton>
 
-// Destructive style, matching Button's own style variants
+// Destructive, with Button's own style and colour
 import { ButtonStyleType } from '@ahrowe/ui';
 
 <SplitButton
   actions={[{ id: 'archive', label: 'Archive instead', onClick: () => archive() }]}
-  styleType={ButtonStyleType.Delete}
+  color={ThemeColor.Error}
   onClick={() => deleteItem()}
 >
   Delete
@@ -68,7 +68,8 @@ import { ButtonStyleType } from '@ahrowe/ui';
 | `children` | `ReactNode` | The primary button's label |
 | `onClick` | `(event) => void \| Promise<void>` | The primary button's click handler |
 | `actions` | `SplitButtonAction[]` | Secondary actions shown in the dropdown |
-| `styleType` | `ButtonStyleType` | Visual variant, shared by both the primary and trigger button (default `Primary`) |
+| `styleType` | `ButtonStyleType` | Shared by both the primary and trigger button (default `Filled`) |
+| `color` | `ColorValue` | Shared by both buttons (default `Primary`); or any CSS colour, as on Button |
 | `size` | `ButtonSize` | Size variant, shared by both buttons |
 | `disabled` | `boolean` | Disables both the primary and trigger button |
 | `isLoading` | `boolean` | Shows a spinner on the primary button (same as `Button`'s own `isLoading`) |
@@ -76,7 +77,7 @@ import { ButtonStyleType } from '@ahrowe/ui';
 
 **`isLoading` vs. `disabled`:** `isLoading` only affects the primary button — the trigger and its menu stay usable while the primary action is in flight, e.g. to cancel via a menu action. To lock the whole control during the async action instead, pass both: `isLoading={isSaving} disabled={isSaving}`. Setting `disabled` also closes the menu if it happened to be open already, and blocks any in-flight click on a menu action.
 
-**Global defaults:** adopts `ConfigProvider`, e.g. `defaultProps={{ SplitButton: { styleType: ButtonStyleType.Default } }}`. See [ConfigProvider.md](ConfigProvider.md).
+**Global defaults:** adopts `ConfigProvider`, e.g. `defaultProps={{ SplitButton: { styleType: ButtonStyleType.Outlined } }}`. See [ConfigProvider.md](ConfigProvider.md).
 
 **Keyboard:** the list is a [Menu](Menu.md), so it behaves like one: `↓` `↑` move between actions and skip disabled ones, `Home` and `End` jump to either end, typing a letter jumps to the action that starts with it, `Enter` and `Space` run the focused action, and `Escape` closes and hands the focus back. A click opens the menu without taking the focus, so nothing is marked until you point at an action or press an arrow key; opening with the keyboard focuses the first action straight away. The trigger announces itself as a menu button.
 

package/docs/ThemeColor.md

@@ -0,0 +1,103 @@
+# ThemeColor
+
+**When to use:** The `color` prop of every component that takes one: the theme's named colours, or any CSS colour of your own.
+
+**Keywords:** colour, palette, tone, variant, status, semantic, danger, destructive, brand, custom
+
+**Import:** `import { ThemeColor } from '@ahrowe/ui'`
+**Types:** `import type { ColorValue } from '@ahrowe/ui'`
+
+Every `color` prop in the library takes the same `ColorValue`: one of the six `ThemeColor`s, or
+any CSS colour. A component's **style** (how much it stands out) is a separate prop, `styleType`,
+so any style works in any colour.
+
+```tsx
+import { Badge, Button, ButtonStyleType, ThemeColor, showToast } from '@ahrowe/ui';
+
+<Button styleType={ButtonStyleType.Filled} color={ThemeColor.Error}>Delete</Button>
+<Badge count={3} color={ThemeColor.Success} />
+showToast('Saved', { color: ThemeColor.Success });
+
+// Any CSS colour, a theme variable included
+<Button color="var(--brand)">Upgrade</Button>
+<Badge content="Beta" color="#7c3aed" />
+```
+
+**Enums:**
+
+- `ThemeColor`: `Primary` | `Neutral` | `Success` | `Info` | `Warn` | `Error`
+
+| Colour | Reads | Notes |
+|--------|-------|-------|
+| `Primary` | `--primary-color`, `--text-on-primary`, `--primary-gradient` | The fill paints the gradient when the theme sets one |
+| `Neutral` | the surrounding text colour, `--border-color` | Takes the colour of what it sits on: a close button on an Alert, a toolbar on a primary header. Its fill and tint are see-through mixes of that colour |
+| `Success` | `--success-color` | |
+| `Info` | `--info-color` | |
+| `Warn` | `--warn-color` | |
+| `Error` | `--error-color`, `--text-on-delete` | For destructive actions |
+
+**Where it applies:** Button, ActionIcon, CopyButton, SplitButton, ActionButtons (`submitButtonColor`,
+`cancelButtonColor`), Card and its actions, Badge, Chip, Accordion, Alert, Toast, Timeline items, Calendar
+events, ProgressBar segments, Loader and AnimatedLogo.
+
+**Styles share their names:** where two components offer the same look, it has the same name in
+each one's own `styleType` enum. Each component offers only the ones it can draw.
+
+| Style | Looks like | Offered by |
+|-------|------------|------------|
+| `Filled` | a solid fill, text in a contrasting colour | Button, Badge, Chip |
+| `Light` | a light tint of the colour, text in the colour | Button, Badge, Chip, Accordion (its header), Card (its surface, text unchanged) |
+| `Outlined` | a border and text in the colour | Button, Badge, Chip, Accordion, Card (its border, text unchanged) |
+| `Plain` | text in the colour only | Button, ActionIcon, Accordion |
+
+Alert, Toast and Timeline have a single look, so they take a `color` and no style.
+
+**Which style to use.** Every component offers the same few, so the choice is about emphasis,
+and a page stays consistent when each one means the same everywhere:
+
+- `Filled`: the one main action of a region, and counts. At most one `Filled` per region.
+- `Light`: status labels, a selected filter, secondary emphasis.
+- `Outlined`: secondary actions and grouped content. The default for Button and Accordion.
+- `Plain`: tertiary and toolbar actions, close buttons, a disclosure inside text.
+
+**How each is drawn.** `Light` is a 22% see-through tint of the colour (8% of the text colour for
+`Neutral`), the same for every colour. Text in the colour (`Light`, `Outlined`, `Plain`) is the
+colour moved a third of the way toward the page's text colour in lightness, keeping its
+saturation: the pure colour is often too faint to read as text, dark red on a dark theme most of
+all. Borders, bars, dots and icons keep the pure colour. Text on a fill is black or white, see
+below.
+
+## A colour of your own
+
+Pass any CSS colour. It replaces the theme's colour everywhere the component uses one, including
+the hover tint and the gradient, which a colour of your own does not get:
+
+```tsx
+<Button styleType={ButtonStyleType.Filled} color="var(--brand)">Upgrade</Button>
+```
+
+**Text on a fill** is white wherever it reaches a contrast of 3:1 on the colour, otherwise black,
+which then has at least 7:1: `color="#fde047"` gets black text and `color="#7c3aed"` white. On a
+mid-tone blue that keeps white, which reads better there than black, though it can fall short of
+WCAG's 4.5:1 for small text. It is worked out in CSS from the colour's relative luminance with
+relative colour syntax, so a `var()` that changes with the theme changes its text with it.
+A browser older than Chrome 119 or Firefox 128 gets `--text-on-primary` instead. To choose the
+text yourself, set `color` in the component's `style` or a class. A built-in colour keeps the theme's own `--text-on-primary` or
+`--text-on-delete`; a theme without them gets the same automatic choice.
+
+**A value that can never be a colour** (`color="eror"`) logs a warning in development. A `var()`
+cannot be checked until it renders.
+
+**For a whole section or the app**, set the default rather than repeating it:
+`defaultProps={{ Button: { color: 'var(--brand)' } }}` on `AhroweProvider`, or on a
+`ConfigProvider` around the section ([ConfigProvider.md](ConfigProvider.md)). A default prop does
+not change with the theme; for a colour that does, give each theme a variable of your own and
+pass that: `color: 'var(--app-button)'`.
+
+**A preset**, a fixed mix of props you use repeatedly, is a component in your app:
+
+```tsx
+export function DeleteIconButton(props: ActionIconProps) {
+  return <ActionIcon color={ThemeColor.Error} icon={faTrash} {...props} />;
+}
+```

package/docs/ThemeProvider.md

@@ -148,16 +148,16 @@ Surfaces that honour it:
 
 | Component | Surface |
 |-----------|---------|
-| `Button` | primary style |
-| `Chip` | primary style |
+| `Button` | `Filled` `Primary` |
+| `Chip` | `Filled` `Primary` |
 | `ProgressBar` | fill |
 | `Switch` | checked track |
 | `Slider` | filled range |
 | `Pagination` | active page |
 | `OptionPicker` | selected option |
-| `Badge` | primary style, except the `dot` variant |
-| `Alert` | default-style accent border |
-| `Toast` | default-style accent border |
+| `Badge` | `Filled` `Primary`, except a `dot` |
+| `Alert` | `Primary` accent border |
+| `Toast` | `Primary` accent border |
 | `TabHeader` | active tab indicator |
 
 Everything else stays flat: focus rings, outlines, icons, primary-coloured text, and small marks

package/docs/Timeline.md

@@ -1,25 +1,24 @@
 # Timeline
 
-**When to use:** A vertical list of dated events, connected by a line, for audit logs, activity feeds, order status history, and deploy logs. Each entry can carry a title, timestamp, description, an icon or status colour, and arbitrary extra content.
+**When to use:** A vertical list of dated events, connected by a line, for audit logs, activity feeds, order status history, and deploy logs. Each entry can carry a title, timestamp, description, an icon or a colour, and arbitrary extra content.
 
 **Keywords:** history log
 
-**Import:** `import { Timeline, TimelineAlignment, TimelineItemStatus } from '@ahrowe/ui'`
+**Import:** `import { Timeline, TimelineAlignment, ThemeColor } from '@ahrowe/ui'`
 **Types:** `import type { TimelineItem, TimelineProps } from '@ahrowe/ui'`
 
 **Enums:**
 - `TimelineAlignment`: `Left` (default) | `Right` | `Alternate`
-- `TimelineItemStatus`: `Default` (default) | `Primary` | `Success` | `Warn` | `Error`
 
 ```tsx
-import { Timeline, TimelineItemStatus } from '@ahrowe/ui';
+import { Timeline, ThemeColor } from '@ahrowe/ui';
 import type { TimelineItem } from '@ahrowe/ui';
 
 const items: TimelineItem[] = [
   { title: 'Invoice created', description: 'by Jane Doe', timestamp: '09:12' },
   { title: 'Invoice sent to client', description: 'via email', timestamp: '09:15' },
-  { title: 'Payment received', status: TimelineItemStatus.Success, timestamp: '2 days later' },
-  { title: 'Invoice closed', status: TimelineItemStatus.Success, timestamp: 'Today' },
+  { title: 'Payment received', color: ThemeColor.Success, timestamp: '2 days later' },
+  { title: 'Invoice closed', color: ThemeColor.Success, timestamp: 'Today' },
 ];
 
 // Default: left-aligned line and markers, content to the right
@@ -30,7 +29,7 @@ import { faUserPlus, faCheck } from '@fortawesome/free-solid-svg-icons';
 <Timeline
   items={[
     { title: 'Account created', icon: faUserPlus, timestamp: 'Mon' },
-    { title: 'Email verified', icon: faCheck, status: TimelineItemStatus.Success, timestamp: 'Wed' },
+    { title: 'Email verified', icon: faCheck, color: ThemeColor.Success, timestamp: 'Wed' },
   ]}
 />
 
@@ -88,7 +87,7 @@ function AuditLog() {
 | `description` | `ReactNode` | Secondary line under the title |
 | `timestamp` | `ReactNode` | Rendered next to the title, e.g. a date or relative time ("2 hours ago") |
 | `icon` | `IconDefinition \| ReactElement` | Icon shown in the marker instead of a plain dot — FontAwesome icon or any React element |
-| `status` | `TimelineItemStatus` | Semantic marker colour (default `Default`) |
+| `color` | `ColorValue` | The marker's colour: a `ThemeColor` or any CSS colour, see [ThemeColor.md](ThemeColor.md). Unset, it is `--timeline-dot-color` |
 | `content` | `ReactNode` | Extra content rendered under the description, e.g. a diff, an attachment, an actor avatar |
 | `onClick` | `(event: MouseEvent<HTMLDivElement>) => void` | Makes the whole entry clickable, rendering it as an accessible button (`role="button"`, focusable, click and Enter both fire it). Omit to render a plain, non-interactive row |
 | `disabled` | `boolean` | Disables the entry: never clickable, dimmed. Only relevant alongside `onClick` |
@@ -113,7 +112,7 @@ function AuditLog() {
 | `--timeline-item-gap` | `20px` (vertical gap between entries) |
 | `--timeline-icon-dot-size` | `28px` (marker size when an entry has `icon`) |
 
-`TimelineItemStatus` values other than `Default` resolve directly to the matching theme colour (`--primary-color`, `--success-color`, `--warn-color`, `--error-color`) rather than a dedicated `--timeline-*` variable, so they always match the rest of the app's semantic colours.
+An entry's `color` replaces `--timeline-dot-color` for that marker, and an icon in it is black or white, whichever reads on the colour. A `ThemeColor` reads the theme's own colour, so it always matches the rest of the app.
 
 ```tsx
 // Theme-wide, via ThemeProvider: thicker line, larger dots
@@ -127,3 +126,13 @@ const theme: Theme = {
 ```
 
 **Slots:** `root` `item` `marker` `dot` `connector` `content` `title` `description` `timestamp`
+
+## Migration from `status`
+
+Before 0.43 an entry's marker colour was `status`, typed `TimelineItemStatus`. It is now `color`,
+typed `ColorValue`, and `TimelineItemStatus` is gone:
+
+| Before | After |
+|--------|-------|
+| `status: TimelineItemStatus.Default` | nothing: an unset `color` is `--timeline-dot-color` |
+| `status: TimelineItemStatus.Success` (and `Primary`, `Warn`, `Error`) | `color: ThemeColor.Success` |

package/docs/Toast.md

@@ -4,8 +4,8 @@
 
 **Keywords:** snackbar, notification popup
 
-**Import:** `import { showToast } from '@ahrowe/ui'`  
-**Types:** `import type { ToastOptions, ToastContextConfig, ToastLabels, ToastType, ToastPosition } from '@ahrowe/ui'`
+**Import:** `import { showToast, ThemeColor } from '@ahrowe/ui'`  
+**Types:** `import type { ToastOptions, ToastContextConfig, ToastLabels, ToastPosition, ColorValue } from '@ahrowe/ui'`
 
 **Setup:** [AhroweProvider](AhroweProvider.md) shows the toasts. Its `toast` prop sets the defaults for all of them:
 
@@ -22,16 +22,16 @@ import { AhroweProvider } from '@ahrowe/ui';
 **Usage:** Call `showToast` anywhere — no component hierarchy required:
 
 ```tsx
-import { showToast } from '@ahrowe/ui';
+import { showToast, ThemeColor } from '@ahrowe/ui';
 
-// Simple message
+// Simple message, in the primary colour
 showToast('Profile saved!');
 
-// With type
-showToast('Something went wrong.', { type: 'error' });
-showToast('3 items updated.', { type: 'info' });
-showToast('Your changes were saved.', { type: 'success' });
-showToast('Disk space is low.', { type: 'warn' });
+// Semantic colours, each with its own icon
+showToast('Something went wrong.', { color: ThemeColor.Error });
+showToast('3 items updated.', { color: ThemeColor.Info });
+showToast('Your changes were saved.', { color: ThemeColor.Success });
+showToast('Disk space is low.', { color: ThemeColor.Warn });
 
 // Persistent (no auto-dismiss)
 showToast('Processing…', { duration: 0, showCloseButton: true });
@@ -50,7 +50,7 @@ showToast('Copied!', { position: 'top-center', duration: 1500 });
 
 // With slot overrides
 showToast('Done', {
-  type: 'info',
+  color: ThemeColor.Info,
   classNames: { root: 'my-toast' },
   styles: { progressBar: { backgroundColor: '#6200ea' } },
 });
@@ -72,7 +72,7 @@ showToast('Done', {
 
 **ToastPosition:** `'top-left'` `'top-center'` `'top-right'` `'bottom-left'` `'bottom-center'` `'bottom-right'`
 
-**ToastType:** `'default'` `'info'` `'success'` `'error'` `'warn'`
+**color:** a `ThemeColor` (default `Primary`) or any CSS colour, see [ThemeColor.md](ThemeColor.md). A `ThemeColor` also picks the icon: a bell for `Primary` and `Neutral`, then info, check, warning and cross; any other colour shows the bell.
 
 **Slots:** `root` `icon` `content` `closeButton` `progressBar`
 
@@ -83,3 +83,17 @@ showToast('Done', {
 A toast is sized and spaced by its font: the padding, the gap, the body copy, the icon, the close button, the variant accent bar and the progress bar all scale with the theme's text, as does the gap between stacked toasts.
 
 Its `min-width` and `max-width` are `em` rather than pixels, so they bound the *measure* — roughly how many characters fit on a line — instead of a fixed width that would grow cramped as the text got larger.
+
+## Migration from `type`
+
+Before 0.43 a toast's colour was `type`, a string: `showToast('Saved', { type: 'success' })`. It
+is now `color`, and `ToastType` is gone:
+
+| Before | After |
+|--------|-------|
+| `{ type: 'default' }` | nothing: `Primary` is the default, with the same bell |
+| `{ type: 'success' }` (and `'info'`, `'warn'`, `'error'`) | `{ color: ThemeColor.Success }` |
+
+The string still works as a value, `{ color: 'success' }`, since a `ThemeColor` is that string.
+`type` itself does not: TypeScript reports it, and in plain JavaScript the toast falls back to the
+primary colour.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ahrowe/ui",
-  "version": "0.42.0",
+  "version": "0.44.0",
   "description": "A React UI component library with theming, CSS Modules, and TypeScript support",
   "keywords": [
     "agent",
@@ -32,7 +32,8 @@
   },
   "files": [
     "dist",
-    "docs"
+    "docs",
+    "CHANGELOG.md"
   ],
   "type": "module",
   "sideEffects": false,

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

@@ -1 +0,0 @@
-export { default as SpinnerLoading } from './spinnerLoading/index.js';

package/dist/cjs-types/common/loading/spinnerLoading/index.d.ts

@@ -1,2 +0,0 @@
-import { default as SpinnerLoading } from './spinnerLoading.js';
-export default SpinnerLoading;

package/dist/cjs-types/common/loading/spinnerLoading/spinnerLoading.d.ts

@@ -1,6 +0,0 @@
-import { ReactElement } from 'react';
-interface Properties {
-    className?: string | undefined;
-}
-declare function SpinnerLoading({ className }: Properties): ReactElement;
-export default SpinnerLoading;

package/dist/esm/common/accordion/accordion.plain.module.mjs

@@ -1,2 +0,0 @@
-"use client";var e=`accordion_wkZJf`,t=`accordion-title_-qwNy`,n=`accordion-active_t9-a2`,r=`accordion-header_-oST6`,i=`accordion-header-active_UvKis`,a=`accordion-body_ZagrJ`,o=`accordion-body-inner_HE7PL`,s=`accordion-icon_kHxym`,c=`accordion-icon-active_-L8BH`,l={accordion:e,"accordion-title":`accordion-title_-qwNy`,accordionTitle:t,"accordion-active":`accordion-active_t9-a2`,accordionActive:n,"accordion-header":`accordion-header_-oST6`,accordionHeader:r,"accordion-header-active":`accordion-header-active_UvKis`,accordionHeaderActive:i,"accordion-body":`accordion-body_ZagrJ`,accordionBody:a,"accordion-body-inner":`accordion-body-inner_HE7PL`,accordionBodyInner:o,"accordion-icon":`accordion-icon_kHxym`,accordionIcon:s,"accordion-icon-active":`accordion-icon-active_-L8BH`,accordionIconActive:c};export{e as accordion,n as accordionActive,a as accordionBody,o as accordionBodyInner,r as accordionHeader,i as accordionHeaderActive,s as accordionIcon,c as accordionIconActive,t as accordionTitle,l as default};
-//# sourceMappingURL=accordion.plain.module.mjs.map

package/dist/esm/common/accordion/accordion.plain.module.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"accordion.plain.module.mjs","names":[],"sources":["../../../../package/common/accordion/accordion.plain.module.pcss"],"sourcesContent":[".accordion {\n  transition: margin 0.2s;\n  margin: -1px;\n\n  &-title {\n    width: 100%;\n  }\n\n  &-active {\n    margin: 0.625em 0;\n  }\n\n  &-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n    border-radius: var(--default-border-radius);\n    font-size: var(--default-font-size);\n    font-weight: 400;\n    transition: all 0.2s;\n\n    &-active {\n      border-radius: var(--default-border-radius) var(--default-border-radius) 0 0;\n    }\n  }\n\n  &-body {\n    overflow: hidden;\n    transition: all 0.2s ease;\n    position: relative;\n    border-radius: 0 0 var(--default-border-radius) var(--default-border-radius);\n\n    &-inner {\n      padding: 0;\n    }\n  }\n\n  &-icon {\n    transition: transform 0.2s;\n    transform: rotate(0deg);\n    flex-shrink: 0;\n    width: 1em;\n    height: 1em;\n    color: var(--primary-color);\n\n    &-active {\n      transform: rotate(180deg);\n    }\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .accordion,\n  .accordion-header,\n  .accordion-body,\n  .accordion-icon {\n    transition: none;\n  }\n}\n"],"mappings":""}

package/dist/esm/common/accordion/accordion.primary.module.mjs

@@ -1,2 +0,0 @@
-"use client";var e=`accordion_X64Nz`,t=`accordion-title_2q-FF`,n=`accordion-active_72VwY`,r=`accordion-header_XuGF6`,i=`accordion-header-active_xf8Ch`,a=`accordion-body_0Jsco`,o=`accordion-body-inner_0UBPf`,s=`accordion-body-active_XFSy1`,c=`accordion-icon_W1mz5`,l=`accordion-icon-active_LI98q`,u={accordion:e,"accordion-title":`accordion-title_2q-FF`,accordionTitle:t,"accordion-active":`accordion-active_72VwY`,accordionActive:n,"accordion-header":`accordion-header_XuGF6`,accordionHeader:r,"accordion-header-active":`accordion-header-active_xf8Ch`,accordionHeaderActive:i,"accordion-body":`accordion-body_0Jsco`,accordionBody:a,"accordion-body-inner":`accordion-body-inner_0UBPf`,accordionBodyInner:o,"accordion-body-active":`accordion-body-active_XFSy1`,accordionBodyActive:s,"accordion-icon":`accordion-icon_W1mz5`,accordionIcon:c,"accordion-icon-active":`accordion-icon-active_LI98q`,accordionIconActive:l};export{e as accordion,n as accordionActive,a as accordionBody,s as accordionBodyActive,o as accordionBodyInner,r as accordionHeader,i as accordionHeaderActive,c as accordionIcon,l as accordionIconActive,t as accordionTitle,u as default};
-//# sourceMappingURL=accordion.primary.module.mjs.map

package/dist/esm/common/accordion/accordion.primary.module.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"accordion.primary.module.mjs","names":[],"sources":["../../../../package/common/accordion/accordion.primary.module.pcss"],"sourcesContent":[".accordion {\n  transition: margin 0.2s;\n  margin: -1px;\n\n  &-title {\n    width: 100%;\n  }\n\n  &-active {\n    margin: 0.625em 0;\n    border: 2px solid var(--primary-color);\n    border-radius: var(--default-border-radius);\n  }\n\n  &-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    /* There is no fixed height any more: the header is this padding plus the title's line. */\n    padding: 0.75em 1em;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n    background: var(--background);\n    border-radius: var(--default-border-radius);\n    font-size: var(--default-font-size);\n    font-weight: 400;\n    transition: all 0.2s;\n\n    &-active {\n      background: var(--background-accent);\n      border-radius: var(--default-border-radius) var(--default-border-radius) 0 0;\n    }\n  }\n\n  &-body {\n    overflow: hidden;\n    transition: all 0.2s ease;\n    position: relative;\n    border-radius: 0 0 var(--default-border-radius) var(--default-border-radius);\n    border-top: none;\n    border-bottom: none;\n\n    &-inner {\n      padding: 1em;\n    }\n\n    &-active {\n      border-top: none;\n    }\n  }\n\n  &-icon {\n    transition: transform 0.2s;\n    transform: rotate(0deg);\n    flex-shrink: 0;\n    width: 1em;\n    height: 1em;\n    color: var(--primary-color);\n\n    &-active {\n      transform: rotate(180deg);\n    }\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .accordion,\n  .accordion-header,\n  .accordion-body,\n  .accordion-icon {\n    transition: none;\n  }\n}\n"],"mappings":""}

package/dist/esm/common/alert/alert.types.mjs

@@ -1,2 +0,0 @@
-"use client";var e=function(e){return e.Default=`default`,e.Info=`info`,e.Success=`success`,e.Warn=`warn`,e.Error=`error`,e}({});export{e as AlertStyleType};
-//# sourceMappingURL=alert.types.mjs.map

package/dist/esm/common/alert/alert.types.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"alert.types.mjs","names":[],"sources":["../../../../package/common/alert/alert.types.ts"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport type { IconContent } from '../types/icon.types';\nimport type { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';\n\nexport enum AlertStyleType {\n  Default = 'default',\n  Info = 'info',\n  Success = 'success',\n  Warn = 'warn',\n  Error = 'error',\n}\n\nexport type AlertSlots = 'root' | 'icon' | 'content' | 'title' | 'description' | 'closeButton';\n\n/** Text Alert renders of its own, for translating it. */\nexport interface AlertLabels {\n  /** Close button, read out by screen readers. */\n  dismiss?: string;\n}\n\nexport interface AlertProps extends Omit<HtmlProps, 'title'> {\n  title?: ReactNode;\n  children?: ReactNode;\n  styleType?: AlertStyleType;\n  icon?: IconContent;\n  hideIcon?: boolean;\n  onClose?: () => void;\n  className?: string;\n  style?: CSSProperties;\n  classNames?: SlotClassNames<AlertSlots>;\n  styles?: SlotStyles<AlertSlots>;\n  /** Overrides the text Alert renders of its own. Merged per key. */\n  labels?: AlertLabels;\n}\n"],"mappings":"aAIA,IAAY,EAAL,SAAA,EAAA,OACL,GAAA,QAAA,UACA,EAAA,KAAA,OACA,EAAA,QAAA,UACA,EAAA,KAAA,OACA,EAAA,MAAA,SACF,EAAA,CAAA,CAAA"}

package/dist/esm/common/loading/spinnerLoading/index.mjs

@@ -1,2 +0,0 @@
-"use client";import e from"./spinnerLoading.mjs";var t=e;export{t as default};
-//# sourceMappingURL=index.mjs.map

package/dist/esm/common/loading/spinnerLoading/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../package/common/loading/spinnerLoading/index.ts"],"sourcesContent":["import SpinnerLoading from './spinnerLoading';\n\nexport default SpinnerLoading;\n"],"mappings":"iDAEA,IAAA,EAAe"}

package/dist/esm/common/loading/spinnerLoading/spinnerLoading.mjs

@@ -1,2 +0,0 @@
-"use client";import e from"./spinnerLoading.module.mjs";import t from"classnames";import{jsx as n}from"react/jsx-runtime";function r({className:r}){return n(`svg`,{"data-testid":`spinner`,className:t(e.spinnerLoading,r),xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 100 100`,fill:`none`,stroke:`var(--primary-color)`,children:n(`circle`,{cx:`50`,cy:`50`,r:`45`,strokeWidth:`10`})})}export{r as default};
-//# sourceMappingURL=spinnerLoading.mjs.map

package/dist/esm/common/loading/spinnerLoading/spinnerLoading.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"spinnerLoading.mjs","names":[],"sources":["../../../../../package/common/loading/spinnerLoading/spinnerLoading.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport cx from 'classnames';\n\nimport styles from './spinnerLoading.module.pcss';\n\ninterface Properties {\n  className?: string | undefined;\n}\n\nfunction SpinnerLoading({ className }: Properties): ReactElement {\n  return (\n    <svg\n      data-testid='spinner'\n      className={cx(styles.spinnerLoading, className)}\n      xmlns='http://www.w3.org/2000/svg'\n      viewBox='0 0 100 100'\n      fill='none'\n      stroke='var(--primary-color)'\n    >\n      <circle cx='50' cy='50' r='45' strokeWidth='10' />\n    </svg>\n  );\n}\n\nexport default SpinnerLoading;\n"],"mappings":"0HASA,SAAS,EAAe,CAAE,aAAuC,CAC/D,OACE,EAAC,MAAD,CACE,cAAY,UACZ,UAAW,EAAG,EAAO,eAAgB,CAAS,EAC9C,MAAM,6BACN,QAAQ,cACR,KAAK,OACL,OAAO,uBAEP,SAAA,EAAC,SAAD,CAAQ,GAAG,KAAK,GAAG,KAAK,EAAE,KAAK,YAAY,IAAM,CAAA,CAC9C,CAAA,CAET"}

package/dist/esm/common/loading/spinnerLoading/spinnerLoading.module.mjs

@@ -1,2 +0,0 @@
-"use client";var e=`spinner-loading_qbxX-`,t=`animate-spinner_6HoVF`,n=`spin_axdh6`,r={"spinner-loading":`spinner-loading_qbxX-`,spinnerLoading:e,"animate-spinner":`animate-spinner_6HoVF`,animateSpinner:t,spin:n};export{t as animateSpinner,r as default,n as spin,e as spinnerLoading};
-//# sourceMappingURL=spinnerLoading.module.mjs.map

package/dist/esm/common/loading/spinnerLoading/spinnerLoading.module.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"spinnerLoading.module.mjs","names":[],"sources":["../../../../../package/common/loading/spinnerLoading/spinnerLoading.module.pcss"],"sourcesContent":[".spinner-loading {\n  width: 70px;\n  height: 70px;\n\n  circle {\n    stroke-dasharray: 283;\n    stroke-dashoffset: 281;\n    stroke-linecap: round;\n    animation:\n      animate-spinner 2s cubic-bezier(0.89, 0.01, 0.12, 1) infinite,\n      spin 3s linear infinite;\n    transform-origin: center;\n  }\n\n  @keyframes animate-spinner {\n    0% {\n      stroke-dashoffset: 281;\n    }\n\n    50% {\n      stroke-dashoffset: 0;\n    }\n\n    100% {\n      stroke-dashoffset: -281;\n    }\n  }\n\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n}\n"],"mappings":""}

package/dist/types/common/loading/index.d.ts

@@ -1 +0,0 @@
-export { default as SpinnerLoading } from './spinnerLoading/index.js';

package/dist/types/common/loading/spinnerLoading/index.d.ts

@@ -1,2 +0,0 @@
-import { default as SpinnerLoading } from './spinnerLoading.js';
-export default SpinnerLoading;

package/dist/types/common/loading/spinnerLoading/spinnerLoading.d.ts

@@ -1,6 +0,0 @@
-import { ReactElement } from 'react';
-interface Properties {
-    className?: string | undefined;
-}
-declare function SpinnerLoading({ className }: Properties): ReactElement;
-export default SpinnerLoading;

package/docs/Loading.md

@@ -1,68 +0,0 @@
-# Loading (SpinnerLoading)
-
-**When to use:** A loading indicator for async operations: page loads, data fetching, or covering a region while it refreshes. For a button use `Button`'s built-in `isLoading`, and for placeholder content that mirrors the shape of what is coming use [Skeleton.md](Skeleton.md).
-
-**Keywords:** busy, waiting, activity indicator, throbber, progress, async, fetching, overlay
-
-**Import:** `import { SpinnerLoading } from '@ahrowe/ui'`
-
-```tsx
-import { SpinnerLoading } from '@ahrowe/ui';
-
-// Default: a 70x70 circular spinner stroked in var(--primary-color)
-{isLoading && <SpinnerLoading />}
-
-// Sized through className
-<SpinnerLoading className="my-spinner" />
-```
-
-```css
-.my-spinner {
-  width: 24px;
-  height: 24px;
-}
-```
-
-**Key props:**
-
-| Prop | Type | Description |
-|------|------|-------------|
-| `className` | `string` | Root `svg` element. This is also how you size it |
-
-## Covering a region while it loads
-
-`SpinnerLoading` is the indicator only. To overlay it on content, centre it in a positioned parent:
-
-```tsx
-<div className="panel">
-  <YourContent />
-  {isLoading && (
-    <div className="panel-overlay">
-      <SpinnerLoading className="my-spinner" />
-    </div>
-  )}
-</div>
-```
-
-```css
-.panel {
-  position: relative;
-}
-
-.panel-overlay {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  pointer-events: none;
-}
-```
-
-Drop the `pointer-events: none` if the overlay should also block interaction with what is underneath, and add a translucent `background` if it should dim it.
-
-For a branded loading screen rather than a generic spinner, [AnimatedLogo.md](AnimatedLogo.md) draws an SVG mark and sits in the same overlay.
-
-**Note:** the spinner animates continuously even under `prefers-reduced-motion`. A frozen spinner would say the app has hung, which is the opposite of what it is there to communicate.
-
-**Slots:** none. The root `svg` takes `className`.