@ahrowe/ui 0.7.1 → 0.9.0

package/docs/RadioGroup.md

@@ -0,0 +1,76 @@
+# RadioGroup
+
+**When to use:** 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. Prefer `Dropdown` when the list is long, and `OptionPicker` for a compact segmented control.
+
+**Import:** `import { RadioGroup, RadioGroupOrientation } from '@ahrowe/ui'`
+**Types:** `import type { RadioOption, RadioGroupProps, RadioValue } from '@ahrowe/ui'`
+
+Follows the ARIA `radiogroup` pattern: one roving tab stop, arrow keys move focus **and** selection (skipping disabled options and wrapping around), Space/Enter selects the focused option.
+
+```tsx
+import { RadioGroup, RadioGroupOrientation, FormValidator } from '@ahrowe/ui';
+import type { RadioOption } from '@ahrowe/ui';
+
+const options: RadioOption[] = [
+  { value: 'free', label: 'Free' },
+  { value: 'pro', label: 'Pro' },
+  { value: 'team', label: 'Team', disabled: true },
+];
+
+// Controlled
+<RadioGroup options={options} value={plan} onChange={(v) => setPlan(v as string)} />
+
+// Uncontrolled with an initial value
+<RadioGroup options={options} defaultValue="free" />
+
+// Horizontal layout
+<RadioGroup options={options} value={plan} onChange={setPlan} orientation={RadioGroupOrientation.Horizontal} />
+
+// Per-option descriptions
+<RadioGroup
+  options={[
+    { value: 'standard', label: 'Standard', description: '3–5 business days, free' },
+    { value: 'express', label: 'Express', description: 'Next business day, €9.90' },
+  ]}
+  value={shipping}
+  onChange={setShipping}
+/>
+
+// With FormValidator
+const planValidator = new FormValidator<string | null>(null, [Validators.required()]);
+<RadioGroup options={options} formValidator={planValidator} />
+```
+
+**RadioGroupOrientation enum:** `RadioGroupOrientation.Vertical` (default) | `RadioGroupOrientation.Horizontal`
+
+**RadioOption:**
+
+```ts
+interface RadioOption {
+  value: string | number;
+  label?: ReactNode;        // falls back to `value`
+  description?: ReactNode;  // secondary text under the label
+  disabled?: boolean;       // disable just this option
+}
+```
+
+**Key props:**
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `options` | `RadioOption[]` | The selectable options |
+| `value` | `string \| number` | Controlled selected value |
+| `defaultValue` | `string \| number` | Initial value when uncontrolled |
+| `onChange` | `(value, event?) => void` | Fires with the newly selected value |
+| `orientation` | `RadioGroupOrientation` | Layout direction (default `Vertical`) |
+| `disabled` | `boolean` | Disable the whole group |
+| `size` | `string` | Diameter of the radio circle (default `'18px'`) |
+| `formValidator` | `FormValidator` | Connects to form validation |
+| `errorMessage` | `string` | Manual error message (when not using a `formValidator`) |
+| `isValid` | `boolean` | Manual valid state (default `true`) |
+
+**Validation:** like `Input`, an errored group shows an error `Tooltip` and turns its unselected circles red. With a `formValidator` the error surfaces only after the field is *touched* (focus leaves the group), then on focus or hover; requires `<div id="bodyEnd"></div>` at the app root for the tooltip portal.
+
+**Global defaults:** adopts `ConfigProvider` — e.g. `defaultProps={{ RadioGroup: { orientation: RadioGroupOrientation.Horizontal } }}`. See [ConfigProvider.md](ConfigProvider.md).
+
+**Slots:** `root` `option` `radio` `dot` `label` `description`

package/docs/Sticky.md

@@ -26,10 +26,21 @@ import { Sticky } from '@ahrowe/ui';
 <Sticky disabled={isEditing}>
   <Header />
 </Sticky>
+
+// Two Stickies that overlap horizontally automatically stack — the second
+// pins below the first's height instead of on top of it
+<Sticky offsetTop={0}>
+  <TopBar />
+</Sticky>
+<Sticky offsetTop={0}>
+  <FilterBar />
+</Sticky>
 ```
 
 **How it works:** while stuck, the content switches to `position: fixed` (measured to keep the same width and horizontal position) and a placeholder of the same height takes its place in the flow. It tracks scroll on the window *and* any ancestor scroll container, so it works inside scrollable panels too — it always pins to the top of the viewport (offset by `offsetTop`).
 
+**Stacking:** every mounted `Sticky` coordinates automatically, no extra markup needed. When more than one is stuck at the same time, a later one (in DOM order) that horizontally overlaps an earlier stuck one pins below it — `offsetTop` plus the overlapping ones' heights — instead of both landing on the same spot. Stickies that don't overlap horizontally (e.g. two half-width ones side by side under a full-width one) land at the same `top`, next to each other, rather than pushing each other down.
+
 **Key props:**
 
 | Prop | Type | Description |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ahrowe/ui",
-  "version": "0.7.1",
+  "version": "0.9.0",
   "publishConfig": {
     "access": "public"
   },
@@ -50,6 +50,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
+    "build:demo": "vite build --base=/packages/ui/demo/ --outDir dist-demo",
     "build:lib": "vite build --config vite.lib.config.ts",
     "build:mcp": "vite build --config vite.mcp.config.ts",
     "preview": "vite preview",