@ahrowe/ui 0.43.0 → 0.44.0

package/dist/types/common/configProvider/configProvider.types.d.ts

@@ -26,6 +26,8 @@ import { ChipProps } from '../chip/chip.types.js';
 import { CardProps } from '../card/card.types.js';
 import { SectionHeaderProps } from '../sectionHeader/sectionHeader.types.js';
 import { SkeletonProps } from '../skeleton/skeleton.types.js';
+import { LoaderProps } from '../loader/loader.types.js';
+import { LoadingOverlayProps } from '../loadingOverlay/loadingOverlay.types.js';
 import { AccordionProps } from '../accordion/accordion.types.js';
 import { DividerProps } from '../divider/divider.types.js';
 import { AlertProps } from '../alert/alert.types.js';
@@ -105,6 +107,8 @@ export interface ComponentDefaults {
     Card?: Partial<CardProps>;
     SectionHeader?: Partial<SectionHeaderProps>;
     Skeleton?: Partial<SkeletonProps>;
+    Loader?: Partial<LoaderProps>;
+    LoadingOverlay?: Partial<LoadingOverlayProps>;
     Accordion?: Partial<AccordionProps>;
     Divider?: Partial<DividerProps>;
     Alert?: Partial<AlertProps>;

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

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

package/dist/types/common/loader/loader.d.ts

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

package/dist/types/common/loader/loader.types.d.ts

@@ -0,0 +1,31 @@
+import { CSSProperties } from 'react';
+import { HtmlProps } from '../types/slots.types.js';
+import { ColorValue } from '../themeProvider/color.types.js';
+export declare enum LoaderType {
+    /** An arc that grows and shrinks on a faint track. The default, and the one that reads at any size. */
+    Spinner = "spinner",
+    /** A glowing head trailing a fading tail round a ring. For a hero spot: a page, a panel, an overlay. */
+    Comet = "comet",
+    /** Three dots in a wave. For a line of text or a chat reply being written. */
+    Dots = "dots",
+    /** Bars rising and falling like an equaliser. For media, uploads and data being processed. */
+    Bars = "bars",
+    /** Rings rippling out from a core. For waiting on something outside the app: a device, a connection, a search. */
+    Pulse = "pulse"
+}
+export interface LoaderLabels {
+    /** The loader's accessible name. */
+    loading?: string;
+}
+export interface LoaderProps extends HtmlProps<HTMLSpanElement> {
+    /** The animation. Defaults to `LoaderType.Spinner`. */
+    type?: LoaderType;
+    /** Width and height: any CSS length, or a number of pixels. Defaults to `'2.5em'`, so it follows the font size around it. */
+    size?: number | string;
+    /** A `ThemeColor` or any CSS colour. Defaults to `ThemeColor.Primary`; `ThemeColor.Neutral` takes the colour of the text around it. */
+    color?: ColorValue;
+    /** Text the loader produces itself. See `LoaderLabels`. */
+    labels?: LoaderLabels;
+    className?: string;
+    style?: CSSProperties;
+}

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

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

package/dist/types/common/loadingOverlay/loadingOverlay.d.ts

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

package/dist/types/common/loadingOverlay/loadingOverlay.types.d.ts

@@ -0,0 +1,21 @@
+import { CSSProperties, ReactNode } from 'react';
+import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
+export type LoadingOverlaySlots = 'content' | 'backdrop' | 'panel' | 'message';
+export interface LoadingOverlayProps extends HtmlProps<HTMLDivElement> {
+    /** Covers the content, blocks the pointer and marks it `aria-busy`. Defaults to `false`. */
+    isLoading?: boolean;
+    /** What the overlay covers. */
+    children?: ReactNode;
+    /** Shown in place of the default `Loader`: a `Loader` of another type, an `AnimatedLogo`, anything. */
+    loader?: ReactNode;
+    /** Text under the loader, with a highlight sweeping across it. Also the default loader's accessible name. */
+    message?: ReactNode;
+    /** Milliseconds `isLoading` has to stay true before the overlay shows, so a fast load never flashes it. Once shown, it stays at least 400ms. Defaults to `200`. */
+    delay?: number;
+    className?: string;
+    style?: CSSProperties;
+    /** Classes for the inner elements. See `LoadingOverlaySlots`. */
+    classNames?: SlotClassNames<LoadingOverlaySlots>;
+    /** Inline styles for the inner elements. See `LoadingOverlaySlots`. */
+    styles?: SlotStyles<LoadingOverlaySlots>;
+}

package/dist/types/common/themeProvider/theme.types.d.ts

@@ -232,6 +232,10 @@ export interface ThemeVariables {
     /** Width a column collapses to once it has no cards (see `collapseEmptyColumns`). Falls back to 140px. */
     '--kanban-empty-column-width'?: string;
     '--option-picker-padding'?: string;
+    /** Veil over the content while it loads. Falls back to --background at 50%. */
+    '--loading-overlay-background'?: string;
+    /** How far the content under the veil is blurred. Falls back to 4px; 0px turns the blur off. */
+    '--loading-overlay-blur'?: string;
     /** Track (unfilled) background colour. Falls back to --background-accent. */
     '--progress-bar-track-color'?: string;
     /** Canvas behind the plan. Falls back to --background. */

package/dist/types/index.d.ts

@@ -76,7 +76,10 @@ export { default as KanbanBoard } from './common/kanbanBoard/index.js';
 export * from './common/kanbanBoard/index.js';
 export { default as KlipyPicker } from './common/klipyPicker/index.js';
 export * from './common/klipyPicker/index.js';
-export * from './common/loading/index.js';
+export { default as Loader } from './common/loader/index.js';
+export * from './common/loader/index.js';
+export { default as LoadingOverlay } from './common/loadingOverlay/index.js';
+export * from './common/loadingOverlay/index.js';
 export { default as Menu } from './common/menu/index.js';
 export * from './common/menu/index.js';
 export { default as Modal } from './common/modal/index.js';

package/docs/Button.md

@@ -81,7 +81,7 @@ import { faPlus, faSave, faTrash, faXmark } from '@fortawesome/free-solid-svg-ic
 | `size` | `ButtonSize` | Size variant. `Icon` strips all padding, inherits the surrounding text size, and centres a lone icon — set the width/height yourself |
 | `type` | `ButtonType` | HTML button type |
 | `icon` | `IconDefinition \| ReactElement` | FontAwesome icon or any React element, shown before label |
-| `isLoading` | `boolean` | Replaces content with a spinner. Blocks clicks like `disabled` but keeps full colour |
+| `isLoading` | `boolean` | Replaces content with a [Loader](Loader.md) in the button's text colour. Blocks clicks like `disabled` but keeps full colour |
 | `disabled` | `boolean` | Fades the button to half opacity |
 | `onClick` | `(e: MouseEvent) => void \| Promise<void>` | |
 

package/docs/CLAUDE.md

@@ -103,7 +103,8 @@ enums and slot names. Do not infer props from a component's name.
 | InteractableDiv.md | InteractableDiv | Accessible `<div>` that behaves like a button — click and keyboard (Enter/Space) events, with proper ARIA semantics |
 | KanbanBoard.md | KanbanBoard, KanbanColumn | Drag-and-drop board with columns — task management, workflow stages, status boards (e.g. Todo / In Progress / Done) |
 | KlipyPicker.md | KlipyPicker | GIF picker backed by the Klipy API — chat reactions, message composers, content authoring tools |
-| Loading.md | SpinnerLoading | A loading indicator for async operations: page loads, data fetching, or covering a region while it refreshes |
+| Loader.md | Loader, LoaderType, ThemeColor | A loading indicator for something in progress with no known end: a fetch, a save, a connection |
+| LoadingOverlay.md | LoadingOverlay, Loader, LoaderType | Covering content while it reloads: a table refreshing, a form saving, a panel fetching its next page |
 | Menu.md | Menu, menuHotkeys | A list of actions hanging off a trigger — a row's "more" button, a toolbar overflow, a context menu on a card |
 | Modal.md | Modal | Full overlay dialog — forms, detail views, confirmations, wizards that need to block the rest of the UI |
 | MultiSelect.md | MultiSelect | Pick several options from a list |
@@ -124,7 +125,7 @@ enums and slot names. Do not infer props from a component's name.
 | ScrollbarProvider.md | ScrollbarProvider | Applies custom scrollbar styling to a scrollable region — use to keep scrollbar appearance consistent with the theme |
 | SearchInput.md | SearchInput | Search field with built-in debouncing and an optional result count line — list filters, search-as-you-type pages |
 | SectionHeader.md | 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.md | 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) |
+| Skeleton.md | Skeleton, SkeletonVariant, SkeletonAnimation | Content-shaped loading placeholder, shown while real content is being fetched — more polished than a Loader for content-heavy pages (lists, cards, profile headers) |
 | Slider.md | 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.md | 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.md | Stepper | Step progress indicator for multi-step forms, onboarding flows, and checkout wizards |

package/docs/Checkbox.md

@@ -33,7 +33,7 @@ const agreedValidator = new FormValidator(false, [Validators.required()]);
 | `onToggle` | `(isToggled: boolean, event?) => void` | Change handler |
 | `formValidator` | `FormValidator` | Connects to form validation |
 | `disabled` | `boolean` | |
-| `isLoading` | `boolean` | Shows skeleton state |
+| `isLoading` | `boolean` | Shows a [Loader](Loader.md) in place of the box and ignores clicks |
 | `children` | `ReactNode` | Custom label content |
 | `cursorDefault` | `boolean` | Use default cursor instead of pointer |
 | `ref` | `Ref<HTMLDivElement>` | Ref to the root element |

package/docs/ConfigProvider.md

@@ -95,7 +95,7 @@ A nested provider inherits it unless it sets its own, the same way `defaultProps
 Each entry is a `Partial<...Props>`, so any of that component's props can be defaulted:
 
 - **Form inputs:** `Input` · `Textarea` · `NumberInput` · `Dropdown` · `InputDropdown` · `Checkbox` · `Switch` · `RadioGroup` · `DatePicker` · `OptionPicker` · `OtpInput`
-- **Display:** `Button` · `CopyButton` · `ActionButtons` · `Badge` · `Chip` · `Card` · `SectionHeader` · `Skeleton` · `Accordion` · `Divider` · `Timer` · `WeatherIcon`
+- **Display:** `Button` · `CopyButton` · `ActionButtons` · `Badge` · `Chip` · `Card` · `SectionHeader` · `Skeleton` · `Loader` · `LoadingOverlay` · `Accordion` · `Divider` · `Timer` · `WeatherIcon`
 - **Overlays:** `ConfirmModal` · `Modal` · `CommandPalette` · `Popover`
 - **Editors:** `RoomDrawer`, `RoomViewer`
 - **Scheduling:** `Calendar`, for `labels`, `locale`, `weekStartsOn`, `slotMinutes`, `views`, `hiddenDays`, `scrollToHour`, `workingHours` and `showWeekNumbers` only (see below)

package/docs/Loader.md

@@ -0,0 +1,95 @@
+# Loader
+
+**When to use:** A loading indicator for something in progress with no known end: a fetch, a save, a connection. To cover content while it reloads use [LoadingOverlay.md](LoadingOverlay.md), for a button use `Button`'s own `isLoading`, and for content not there yet a [Skeleton.md](Skeleton.md) in its shape reads better. For progress you can measure, use [ProgressBar.md](ProgressBar.md).
+
+**Keywords:** busy, waiting, activity indicator, throbber, async, fetching, typing indicator, equalizer, radar, ripple
+
+**Import:** `import { Loader, LoaderType, ThemeColor } from '@ahrowe/ui'`  
+**Types:** `import type { LoaderProps, LoaderLabels } from '@ahrowe/ui'`
+
+**Enums:** `LoaderType.Spinner` (default) | `LoaderType.Comet` | `LoaderType.Dots` | `LoaderType.Bars` | `LoaderType.Pulse`
+
+- `Spinner`: an arc that grows and shrinks on a faint track. Reads at any size, down to 16px
+- `Comet`: a glowing head trailing a tapering tail round a ring. For a hero spot: a page, a panel, an overlay
+- `Dots`: three dots in a wave. For a line of text or a reply being written
+- `Bars`: bars rising and falling like an equaliser. For media, uploads and data being processed
+- `Pulse`: rings rippling out from a core. For waiting on something outside the app: a device, a connection, a search
+
+```tsx
+import { Loader, LoaderType, ThemeColor } from '@ahrowe/ui';
+
+// Default: a Spinner in --primary-color, 2.5em square
+{isLoading && <Loader />}
+
+<Loader type={LoaderType.Comet} size='4em' />
+<Loader type={LoaderType.Pulse} color={ThemeColor.Success} />
+<Loader type={LoaderType.Bars} color='#e879f9' size={24} />
+
+// In a line of text: Neutral takes the text's own colour, 1em its size. Dots rest on the
+// baseline like an ellipsis; the round types sit centred on the text like an icon
+<p>Ava is typing <Loader type={LoaderType.Dots} size='1em' color={ThemeColor.Neutral} /></p>
+```
+
+**Sizing:** `size` sets width and height, which are always equal. It is `2.5em` by default, so a
+loader follows the font size of what it sits in; pass any CSS length, or a number of pixels. Size it
+with `size` rather than a `width` in a class: the stylesheet reads `size`, and a class would tie with
+it on specificity.
+
+**Colour:** `color` takes a `ThemeColor` (default `Primary`) or any CSS colour, see
+[ThemeColor.md](ThemeColor.md). `ThemeColor.Neutral` takes the colour of the text around it, which
+is what a loader on a coloured surface wants.
+
+## One type for the whole app
+
+Every component with a loading state draws it with this `Loader`: `Button` (and so `SplitButton`,
+`ActionButtons` and `ConfirmModal`), `Checkbox`, `VirtualList`, `Dropdown`, `KanbanBoard` and
+`LoadingOverlay`. A default set once reaches all of them:
+
+```tsx
+<AhroweProvider defaultProps={{ Loader: { type: LoaderType.Dots } }}>
+  <App />
+</AhroweProvider>
+```
+
+An app-wide `type` and `labels` reach all of them. `color` reaches all but Button's, which keeps
+the button's text colour. `size` reaches only `LoadingOverlay`'s default loader and the ones you
+place yourself; the others size theirs to fit.
+
+**Accessibility:** the root is a `role="progressbar"` with no value, which is how an indeterminate
+progress indicator is announced, named "Loading" (`labels.loading`). Pass `aria-labelledby` to name
+it after visible text instead, as `LoadingOverlay` does with its `message`. Inside something whose
+name comes from its content (a custom checkbox) or that may only hold its own items (a list), pass
+`aria-hidden` and mark the container `aria-busy` instead, as `Checkbox` and `VirtualList` do.
+
+**Note:** a loader keeps moving under `prefers-reduced-motion`. One that stands still says the app
+has hung, which is the opposite of what it is there to say.
+
+**Key props:**
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `type` | `LoaderType` | The animation (default `Spinner`) |
+| `size` | `number \| string` | Width and height, any CSS length or a number of pixels (default `'2.5em'`) |
+| `color` | `ColorValue` | A `ThemeColor` or any CSS colour (default `ThemeColor.Primary`) |
+| `labels` | `LoaderLabels` | Text the loader produces itself, see below |
+| `className` / `style` | | Root `span` |
+
+**Labels:** `loading`, the accessible name. Pass `labels` to override it, on the component or app-wide through `ConfigProvider`; keys merge individually. Type: `LoaderLabels`.
+
+## Migration from `SpinnerLoading`
+
+`SpinnerLoading` was removed in favour of `Loader`, whose default type is the same kind of spinner.
+
+```tsx
+// Before
+<SpinnerLoading className="my-spinner" />   // .my-spinner { width: 24px; height: 24px }
+
+// After
+<Loader size={24} />
+```
+
+It used to be 70px by default and is `2.5em` now (40px at a 16px base), and it is a `span` rather
+than an `svg`. It is announced as a progressbar named "Loading", where `SpinnerLoading` was not
+announced at all.
+
+**Slots:** none. The root `span` takes `className` and `style`.

package/docs/LoadingOverlay.md

@@ -0,0 +1,85 @@
+# LoadingOverlay
+
+**When to use:** Covering content while it reloads: a table refreshing, a form saving, a panel fetching its next page. It frosts over what it wraps and keeps its shape in view. For content not there yet a [Skeleton.md](Skeleton.md) in its shape reads better, and a lone indicator with nothing to cover is a [Loader.md](Loader.md).
+
+**Keywords:** spinner, frosted glass, scrim, dim, disable interaction, pending, mask
+
+**Import:** `import { LoadingOverlay, Loader, LoaderType } from '@ahrowe/ui'`  
+**Types:** `import type { LoadingOverlayProps } from '@ahrowe/ui'`
+
+```tsx
+import { LoadingOverlay, Loader, LoaderType, AnimatedLogo, ThemeColor } from '@ahrowe/ui';
+
+// Wrap what is loading. It needs no positioned parent: it is one
+<LoadingOverlay isLoading={isFetching}>
+  <InvoiceTable rows={rows} />
+</LoadingOverlay>
+
+// A message under the loader, with a highlight sweeping across it
+<LoadingOverlay isLoading={isSaving} message="Saving changes…">
+  <ProfileForm />
+</LoadingOverlay>
+
+// Any loader in place of the default one
+<LoadingOverlay
+  isLoading={isConnecting}
+  message="Connecting to the printer…"
+  loader={<Loader type={LoaderType.Pulse} color={ThemeColor.Success} size="3.5em" />}
+>
+  <PrinterPanel />
+</LoadingOverlay>
+
+// A branded one
+<LoadingOverlay isLoading={isBooting} loader={<AnimatedLogo size="4em" />}>
+  <Dashboard />
+</LoadingOverlay>
+```
+
+## Timing
+
+The overlay waits `delay` (200ms) after `isLoading` turns true before it shows, so a load that
+finishes faster never flashes it. Once shown it stays at least 400ms, so one that finishes just
+after it appeared does not flash it either, then fades out. Loading again while it fades brings it
+straight back. `delay={0}` shows it at once, from the first render on.
+
+The content is marked `aria-busy` the moment `isLoading` is true, delay or not.
+
+## What it blocks
+
+The backdrop takes every pointer event over the content and shows a `progress` cursor. It does not
+take the focus or block the keyboard: making the content `inert` would drop the focus of whoever
+pressed the button that started the load. An action that must not run twice should still check its
+own loading state.
+
+**Wrapping:** the root is a `div` with `position: relative`, and the content sits in a `div` of its
+own, so anything inside with a `z-index` (a sticky header) stays under the backdrop. The backdrop
+takes the root's `border-radius`, so a `className` that rounds the root rounds the overlay too.
+Content taller than the screen keeps the loader in view rather than at its middle.
+
+**Scrolling content:** give the scrolling to `classNames.content` (its `overflow` and its height
+limit), not to the root. The backdrop covers the root's box, so in a root that scrolls it would
+scroll away with the content and leave the rest uncovered.
+
+**Theme variables:** `--loading-overlay-background` (the veil, default `--background` at 50%) and
+`--loading-overlay-blur` (default `4px`, `0px` turns the blur off). See
+[ThemeProvider.md](ThemeProvider.md).
+
+**App-wide:** `LoadingOverlay` takes `defaultProps` like any other component, so one
+`AhroweProvider` can give every overlay the same `loader` or `delay`. Its default loader is a
+`Loader`, which follows `defaultProps.Loader` as well.
+
+**Key props:**
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `isLoading` | `boolean` | Covers the content, blocks the pointer and marks it `aria-busy` (default `false`) |
+| `children` | `ReactNode` | What the overlay covers |
+| `message` | `ReactNode` | Text under the loader. Also the default loader's accessible name |
+| `loader` | `ReactNode` | Shown in place of the default `<Loader />` |
+| `delay` | `number` | Milliseconds before it shows (default `200`) |
+| `className` / `style` | | Root `div` |
+
+**Note:** under `prefers-reduced-motion` the panel fades in without rising and the message stands
+still. The loader itself keeps moving, see [Loader.md](Loader.md).
+
+**Slots:** `content` (the `div` around `children`) `backdrop` (the veil over it) `panel` (the column holding the loader and the message, for a card behind them) `message`

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/ThemeColor.md

@@ -38,7 +38,7 @@ showToast('Saved', { color: ThemeColor.Success });
 
 **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 and AnimatedLogo.
+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.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ahrowe/ui",
-  "version": "0.43.0",
+  "version": "0.44.0",
   "description": "A React UI component library with theming, CSS Modules, and TypeScript support",
   "keywords": [
     "agent",

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/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`.