@ahrowe/ui 0.4.2 → 0.4.4

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

@@ -1,4 +1,4 @@
 import { ReactElement } from 'react';
 import { SkeletonProps } from './skeleton.types';
-declare function Skeleton({ variant, animation, lines, className, style, classNames, styles: slotStyles, ...rest }: SkeletonProps): ReactElement;
+declare function Skeleton(props: SkeletonProps): ReactElement;
 export default Skeleton;

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

@@ -1,4 +1,4 @@
 import { ReactElement } from 'react';
 import { SwitchProps } from './switch.types';
-declare function Switch({ label, selected, onToggle, className, style, disabled, title, tabIndex, formValidator, children, classNames, styles: slotStyles, ...rest }: SwitchProps): ReactElement;
+declare function Switch(props: SwitchProps): ReactElement;
 export default Switch;

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

@@ -53,6 +53,8 @@ export interface ThemeVariables {
     '--input-background'?: string;
     '--input-icon-color'?: string;
     '--error-border-color'?: string;
+    '--input-label-resting-color'?: string;
+    '--input-label-floating-color'?: string;
     '--default-border-radius'?: string;
     '--padding-sides'?: string;
     '--margin-top'?: string;

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

@@ -0,0 +1,7 @@
+import { IconDefinition } from '@fortawesome/free-solid-svg-icons';
+/** A single icon-triggered action, rendered as an `ActionIcon` */
+export interface IconAction {
+    title?: string;
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    icon: IconDefinition;
+}

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

@@ -19,10 +19,14 @@ export { default as Chip } from './common/chip';
 export * from './common/chip';
 export { default as ColorPicker } from './common/colorPicker';
 export * from './common/colorPicker';
+export { default as ConfigProvider } from './common/configProvider';
+export * from './common/configProvider';
 export { default as ConfirmModal } from './common/confirmModal';
 export * from './common/confirmModal';
 export { default as DatePicker } from './common/datePicker';
 export * from './common/datePicker';
+export { default as Divider } from './common/divider';
+export * from './common/divider';
 export { default as Drawer } from './common/drawer';
 export * from './common/drawer';
 export { default as DropZone } from './common/dropZone';
@@ -72,6 +76,8 @@ export { default as ScrollbarProvider } from './common/scrollbarProvider';
 export * from './common/scrollbarProvider';
 export { default as SearchInput } from './common/searchInput';
 export * from './common/searchInput';
+export { default as SectionHeader } from './common/sectionHeader';
+export * from './common/sectionHeader';
 export { default as Skeleton } from './common/skeleton';
 export * from './common/skeleton';
 export { default as Stepper } from './common/stepper';

package/docs/CLAUDE.md

@@ -103,8 +103,10 @@ Slot keys per component are documented in each component's doc file below.
 @Checkbox.md
 @Chip.md
 @ColorPicker.md
+@ConfigProvider.md
 @ConfirmModal.md
 @DatePicker.md
+@Divider.md
 @Drawer.md
 @Dropdown.md
 @DropZone.md
@@ -132,6 +134,7 @@ Slot keys per component are documented in each component's doc file below.
 @RoomViewer.md
 @ScrollbarProvider.md
 @SearchInput.md
+@SectionHeader.md
 @Skeleton.md
 @Stepper.md
 @Sticky.md

package/docs/ConfigProvider.md

@@ -0,0 +1,81 @@
+# ConfigProvider
+
+**When to use:** Set global **default props** for library components once, near the root of your app, instead of repeating the same prop on every instance. If your app always wants floating labels, set `Input.alwaysFloatLabel` here and every `Input` picks it up.
+
+**Import:** `import { ConfigProvider } from '@ahrowe/ui'`
+**Types:** `import type { ComponentDefaults, ConfigProviderProps } from '@ahrowe/ui'`
+
+Place it inside `ThemeProvider` (it's a separate concern from theming — theme = CSS variables, config = default props):
+
+```tsx
+import { ThemeProvider, ConfigProvider } from '@ahrowe/ui';
+
+<ThemeProvider>
+  <ConfigProvider defaultProps={{ Input: { alwaysFloatLabel: true } }}>
+    <App />
+  </ConfigProvider>
+</ThemeProvider>
+```
+
+## How defaults resolve
+
+For each prop, the value is chosen in this order (first that's set wins):
+
+1. The prop **explicitly passed** to the component instance
+2. The matching **global default** from the nearest `ConfigProvider`
+3. The component's own **built-in default**
+
+So a global default only fills in props a given instance left out — any instance can still override it:
+
+```tsx
+<ConfigProvider defaultProps={{ Input: { alwaysFloatLabel: true } }}>
+  <Input label="Name" />                        {/* floats — inherits the global default */}
+  <Input label="Note" alwaysFloatLabel={false} />{/* opts out — explicit prop wins        */}
+</ConfigProvider>
+```
+
+## Nesting
+
+`ConfigProvider`s compose. A nested provider extends the outer one per component, overriding only the keys it sets:
+
+```tsx
+<ConfigProvider defaultProps={{ Input: { alwaysFloatLabel: true, useMatLabelStyle: true } }}>
+  {/* Inputs here float and use the material label */}
+  <ConfigProvider defaultProps={{ Input: { alwaysFloatLabel: false } }}>
+    {/* Inputs here don't float, but still use the material label from the outer provider */}
+  </ConfigProvider>
+</ConfigProvider>
+```
+
+## Key props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `defaultProps` | `ComponentDefaults` | Default props keyed by component name, e.g. `{ Input: { alwaysFloatLabel: true } }` |
+| `children` | `ReactNode` | Your app content |
+
+## Supported components
+
+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` · `DatePicker`
+- **Display:** `Button` · `ActionButtons` · `Badge` · `Chip` · `Card` · `SectionHeader` · `Skeleton` · `Accordion` · `Divider`
+
+```tsx
+<ConfigProvider
+  defaultProps={{
+    Input: { alwaysFloatLabel: true },
+    Dropdown: { useMatLabelStyle: true },
+    NumberInput: { decimalScale: 2, thousandSeparator: '.' },
+    Button: { styleType: ButtonStyleType.Primary },
+    Card: { styleType: CardStyleType.Outlined },
+    Skeleton: { animation: SkeletonAnimation.Pulse },
+  }}
+>
+  <App />
+</ConfigProvider>
+```
+
+`Textarea`, `NumberInput`, and `DatePicker` are built on top of `Input`, so they **also** inherit `Input` defaults for the props they forward to it. Their own component-keyed defaults take precedence for props they handle themselves. Example: with `Input: { alwaysFloatLabel: true }` set, every `Textarea` / `NumberInput` / `DatePicker` floats its label too, without needing a separate entry.
+
+The `ComponentDefaults` type is the source of truth for which keys are currently supported — more components adopt it over time.

package/docs/Divider.md

@@ -0,0 +1,33 @@
+# Divider
+
+**When to use:** A horizontal rule that fills the width of its parent — separating sections of content. Optionally label it with text (e.g. "OR", a date, a section name); the line splits around the text, leaving a gap for it.
+
+**Import:** `import { Divider, DividerTextPosition } from '@ahrowe/ui'`
+
+**Text position:** `DividerTextPosition.Left` | `DividerTextPosition.Center` (default) | `DividerTextPosition.Right`
+
+```tsx
+import { Divider, DividerTextPosition } from '@ahrowe/ui';
+
+// Plain line
+<Divider />
+
+// Centered text (default)
+<Divider text="OR" />
+
+// Text near the left edge
+<Divider text="Section title" textPosition={DividerTextPosition.Left} />
+
+// Text near the right edge
+<Divider text="March 2026" textPosition={DividerTextPosition.Right} />
+```
+
+**Key props:**
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `text` | `ReactNode` | Text (or any node) rendered on the line. Omit for a plain full-width line |
+| `textPosition` | `DividerTextPosition` | Where `text` sits along the line (default `Center`) |
+| `className` / `style` | | Root element |
+
+**Slots:** `root` `line` (the line segment(s) either side of `text`) `content` (the `text` wrapper)

package/docs/Dropdown.md

@@ -53,5 +53,6 @@ const statusValidator = new FormValidator('', [Validators.required()]);
 | `placeholder` | `string` | Placeholder when no selection |
 | `onScroll` | `() => Promise<void>` | Load more on list scroll |
 | `useMatLabelStyle` | `boolean` | Material-style floating label |
+| `alwaysFloatLabel` | `boolean` | Keep the material label floated in the border notch even when nothing is selected, so an empty dropdown reads as blank instead of showing the label as if it were the selected value. Only applies with `useMatLabelStyle` (default) |
 
 The list is rendered through a portal and tracks the trigger across scroll, so it always escapes clipping ancestors (cards, scroll containers, virtualized lists). It flips to open upward automatically when there's no room below, and hides (without closing) if the trigger itself scrolls behind a clipping ancestor, reappearing once it's back in view.

package/docs/Input.md

@@ -66,6 +66,7 @@ const emailValidator = new FormValidator('', [Validators.required(), Validators.
 | `onClearClicked` | `() => void` | Clear button handler |
 | `isRow` | `boolean` | Horizontal layout |
 | `labelInBorder` | `boolean` | Label inside fieldset border |
+| `alwaysFloatLabel` | `boolean` | Keep the material label floated in the border notch even when empty and unfocused, so an empty field reads as blank instead of showing the label as if it were a value. Only applies with `useMatLabelStyle` (default) |
 | `readOnly` | `boolean` | |
 | `autoFocus` | `boolean` | |
 | `placeholder` | `string` | |

package/docs/SectionHeader.md

@@ -0,0 +1,90 @@
+# SectionHeader
+
+**When to use:** 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. Use it wherever you'd otherwise hand-roll a `<h2>` + subtitle + buttons row. Inside a `Card`, the card-scoped `CardHeader` remains available; `SectionHeader` is the standalone, fully slot-customisable version.
+
+**Import:** `import { SectionHeader, SectionHeaderSize } from '@ahrowe/ui'`
+**Types:** `import type { SectionHeaderProps, SectionHeaderAction } from '@ahrowe/ui'`
+
+**Style variants:** `SectionHeaderSize.Small` | `SectionHeaderSize.Medium` (default) | `SectionHeaderSize.Large`
+
+```tsx
+import { SectionHeader, SectionHeaderSize } from '@ahrowe/ui';
+import { faFolder, faPen, faTrash } from '@fortawesome/free-solid-svg-icons';
+
+// Title + subtitle
+<SectionHeader title="Account settings" subtitle="Manage your profile and preferences" />
+
+// Leading icon
+<SectionHeader icon={faFolder} title="Documents" subtitle="12 files" />
+
+// Leading thumbnail (URL → background image; any other ReactNode → rendered inside)
+<SectionHeader thumbnail="https://example.com/avatar.jpg" title="Jane Doe" subtitle="Designer" />
+
+// Trailing actions — array renders ActionIcons, or pass any ReactNode
+<SectionHeader
+  title="Integrations"
+  actions={[
+    { title: 'Edit', icon: faPen, onClick: handleEdit },
+    { title: 'Delete', icon: faTrash, onClick: handleDelete },
+  ]}
+/>
+<SectionHeader title="Reports" actions={<Button>Export</Button>} />
+
+// Larger scale, a bottom divider, and a semantic heading level for a11y
+<SectionHeader
+  size={SectionHeaderSize.Large}
+  level={1}
+  divider
+  title="Dashboard"
+  subtitle="Your workspace at a glance"
+/>
+
+// left / center — the title stays fixed to the left; everything else (left,
+// center, actions) lives in a separate trailing block laid out with
+// space-between, so `center` is centered within that block, not the whole header
+<SectionHeader
+  title="Team members"
+  left={<Chip text="12 active" />}
+  center={<SearchInput value={query} onChange={setQuery} />}
+  actions={[{ title: 'Invite', icon: faPlus, onClick: handleInvite }]}
+/>
+```
+
+**Enums:**
+
+- `SectionHeaderSize`: `Small` | `Medium` (default) | `Large`
+
+**Key props:**
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `title` | `ReactNode` | Main heading |
+| `subtitle` | `ReactNode` | Secondary text below the title |
+| `icon` | `IconDefinition` | FontAwesome icon shown on the left; ignored when `thumbnail` is set |
+| `thumbnail` | `string \| ReactNode` | URL → background image; any other ReactNode → rendered inside the leading circle |
+| `left` | `ReactNode` | Leftmost content of the trailing block (title stays fixed to the left of it) |
+| `center` | `ReactNode` | Center content of the trailing block, e.g. a search box or tabs |
+| `actions` | `SectionHeaderAction[] \| ReactNode` | Rightmost content of the trailing block: array → `ActionIcon`s; ReactNode → rendered as-is |
+| `level` | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | Semantic heading level for the title element (default `2`) |
+| `size` | `SectionHeaderSize` | Visual scale (default `Medium`) |
+| `divider` | `boolean` | Render a `Divider` below the header (default `false`) |
+
+**SectionHeaderAction:**
+
+```ts
+interface SectionHeaderAction {
+  title?: string;
+  icon: IconDefinition;
+  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+}
+```
+
+**Global defaults:** adopts `ConfigProvider` — set defaults app-wide via `defaultProps={{ SectionHeader: { size: SectionHeaderSize.Large } }}`. See [ConfigProvider.md](ConfigProvider.md).
+
+**Theming:** title size/weight per `size` variant come from the theme, with local fallbacks — `SectionHeaderSize.Large` uses `--header-font-size` (falls back `24px`), `Medium` uses `--header-medium-font-size` (falls back `18px`), `Small` uses `--header-small-font-size` (falls back `16px`); all three use `--header-font-weight` for the title's font weight (falls back `600`). The leading icon/thumbnail is sized at `2.2×` the title size, so it scales automatically with the theme; the subtitle size is fixed per `size` variant (not derived), since it doesn't track the title proportionally at the `Large` size. See [ThemeProvider.md](ThemeProvider.md).
+
+**Layout:** the title (with its leading icon/thumbnail) is fixed to the left and only takes the width its content needs. Everything after it — `left`, `center`, `actions` — lives in a separate `trailing` flex block laid out with `space-between`, so `center` is centered within that block (not the whole header) regardless of how wide `left`/`actions` are.
+
+**Responsive:** the header wraps — if `trailing` (`left`/`center`/`actions`) doesn't fit next to the title, it drops to its own row; if `trailing` itself doesn't fit as one row, its own children wrap too. Below `640px` viewport width, `center` additionally takes a full-width row of its own, so a wide `center` element (e.g. a `SearchInput`) isn't squeezed alongside `left`/`actions` on small screens.
+
+**Slots:** `root` `leading` `titles` `title` `subtitle` `trailing` `left` `center` `actions`

package/docs/ThemeProvider.md

@@ -70,6 +70,8 @@ interface Theme {
 | `--error-color` / `--success-color` / `--warn-color` / `--info-color` | Semantic colours |
 | `--default-border-radius` | Border radii |
 | `--avatar-radius` | `Avatar` corner radius — falls back to `--default-border-radius` when unset (set to `50%` theme-wide for fully circular avatars) |
+| `--input-label-resting-color` | Resting (not-floated) material label colour for `Input` & `Dropdown` — falls back to `--text-light` when unset |
+| `--input-label-floating-color` | Floating (active) material label colour for `Input` & `Dropdown` — falls back to `--text-color` when unset |
 | `--card-shadow` | Elevation shadows |
 
 **Key props:**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ahrowe/ui",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "publishConfig": {
     "access": "public"
   },
@@ -55,6 +55,7 @@
     "preview": "vite preview",
     "gen-barrel": "tsx scripts/gen-barrel.ts",
     "gc": "bash src/scripts/generateComponent.sh $INIT_CWD process.argv",
+    "changeset": "changeset",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "format": "prettier --write .",
@@ -86,6 +87,7 @@
     "zod": "^4.4.3"
   },
   "devDependencies": {
+    "@changesets/cli": "^2.31.0",
     "@eslint/js": "^9.39.4",
     "@fortawesome/fontawesome-svg-core": "^7.2.0",
     "@fortawesome/free-solid-svg-icons": "^7.2.0",