Release

README.md

@@ -54,6 +54,7 @@ yarn add addon-ui
 
 This library now ships with dedicated documentation files for each component in the docs/ directory. Start here:
 
+- [Accordion](docs/Accordion.md)
 - [Avatar](docs/Avatar.md)
 - [Button](docs/Button.md)
 - [Checkbox](docs/Checkbox.md)
@@ -70,10 +71,14 @@ This library now ships with dedicated documentation files for each component in
 - [ScrollArea](docs/ScrollArea.md)
 - [SvgSprite](docs/SvgSprite.md)
 - [Switch](docs/Switch.md)
+- [Tabs](docs/Tabs.md) (includes Tabs, TabsList, TabsTrigger, TabsContent)
 - [Tag](docs/Tag.md)
 - [TextArea](docs/TextArea.md)
 - [TextField](docs/TextField.md)
 - [Toast](docs/Toast.md)
+- [Tooltip](docs/Tooltip.md)
+- [Truncate](docs/Truncate.md)
+- [TruncateList](docs/TruncateList.md)
 - [View](docs/View.md)
 - [ViewDrawer](docs/ViewDrawer.md)
 - [ViewModal](docs/ViewModal.md)

docs/Accordion.md

@@ -0,0 +1,136 @@
+### Accordion
+
+Accordion component built on top of `@radix-ui/react-accordion`. It exposes the Radix Root and subcomponents with themeable styles and small conveniences (e.g., `asChild` default on Trigger).
+
+See Radix docs: https://www.radix-ui.com/primitives/docs/components/accordion
+
+#### Import and basic usage
+
+```tsx
+import React from "react";
+import {Accordion, AccordionItem, AccordionHeader, AccordionTrigger, AccordionContent} from "addon-ui";
+
+export function Example() {
+    return (
+        <div style={{display: "grid", gap: 12}}>
+            {/* Single (one panel open at a time) */}
+            <Accordion type="single" collapsible defaultValue="item-1">
+                <AccordionItem value="item-1">
+                    <AccordionHeader>
+                        <AccordionTrigger>General</AccordionTrigger>
+                    </AccordionHeader>
+                    <AccordionContent>
+                        <div style={{padding: 12}}>General content</div>
+                    </AccordionContent>
+                </AccordionItem>
+
+                <AccordionItem value="item-2">
+                    <AccordionHeader>
+                        <AccordionTrigger>Advanced</AccordionTrigger>
+                    </AccordionHeader>
+                    <AccordionContent>
+                        <div style={{padding: 12}}>Advanced content</div>
+                    </AccordionContent>
+                </AccordionItem>
+            </Accordion>
+
+            {/* Multiple (several panels can be open) */}
+            <Accordion type="multiple" defaultValue={["a"]}>
+                <AccordionItem value="a">
+                    <AccordionHeader>
+                        <AccordionTrigger>Section A</AccordionTrigger>
+                    </AccordionHeader>
+                    <AccordionContent>
+                        <div style={{padding: 12}}>A content</div>
+                    </AccordionContent>
+                </AccordionItem>
+                <AccordionItem value="b">
+                    <AccordionHeader>
+                        <AccordionTrigger>Section B</AccordionTrigger>
+                    </AccordionHeader>
+                    <AccordionContent>
+                        <div style={{padding: 12}}>B content</div>
+                    </AccordionContent>
+                </AccordionItem>
+            </Accordion>
+        </div>
+    );
+}
+```
+
+---
+
+#### Props: Accordion (root)
+
+Only the prop name, type, and default are listed below.
+
+| Prop             | Type                                             | Default |
+| ---------------- | ------------------------------------------------ | ------- |
+| Radix Root props | `AccordionSingleProps \| AccordionMultipleProps` | —       |
+
+Notes:
+
+- The root component is a thin wrapper around Radix `Root` and accepts all Radix props for single or multiple mode.
+
+#### Props: AccordionItem
+
+| Prop             | Type                 | Default |
+| ---------------- | -------------------- | ------- |
+| Radix Item props | `AccordionItemProps` | —       |
+
+#### Props: AccordionHeader
+
+| Prop               | Type                   | Default |
+| ------------------ | ---------------------- | ------- |
+| Radix Header props | `AccordionHeaderProps` | —       |
+
+#### Props: AccordionTrigger
+
+| Prop                | Type                    | Default |
+| ------------------- | ----------------------- | ------- |
+| `asChild`           | `boolean`               | `true`  |
+| Radix Trigger props | `AccordionTriggerProps` | —       |
+
+#### Props: AccordionContent
+
+| Prop                | Type                    | Default |
+| ------------------- | ----------------------- | ------- |
+| Radix Content props | `AccordionContentProps` | —       |
+
+---
+
+### CSS variables for Accordion
+
+Only variables actually referenced in `src/components/Accordion/accordion.module.scss` are listed, with their exact fallback chains. Variables provided by Radix are noted separately.
+
+| Variable                             | Fallback chain                                                           |
+| ------------------------------------ | ------------------------------------------------------------------------ |
+| `--accordion-header-pading`          | `var(--accordion-header-pading)` (none)                                  |
+| `--accordion-header-bg-color`        | `var(--accordion-header-bg-color, var(--bg-primary-color))`              |
+| `--accordion-header-hover-bg-color`  | `var(--accordion-header-hover-bg-color)` (none)                          |
+| `--accordion-content-bg-color`       | `var(--accordion-content-bg-color)` (none)                               |
+| `--accordion-speed-bg`               | `var(--accordion-speed-bg, var(--speed-color))`                          |
+| `--accordion-speed-animation`        | `var(--accordion-speed-animation, var(--speed-sm))`                      |
+| `--radix-collapsible-content-height` | `var(--radix-collapsible-content-height)` (provided by Radix at runtime) |
+
+Notes:
+
+- The variable name `--accordion-header-pading` is intentionally spelled exactly as in the stylesheet.
+- Transitions and animations use component-scoped speed variables (`--accordion-speed-*`) with fallbacks to global tokens like `--speed-sm` and `--speed-color`.
+
+---
+
+### Accessibility (A11y)
+
+- Built on Radix Accordion, inheriting correct roles, aria attributes, and keyboard interaction (Arrow Up/Down to move focus, Enter/Space to toggle).
+- Use `type="single"` with `collapsible` to allow closing the currently open item; without `collapsible`, one item stays open at all times.
+
+Radix reference: https://www.radix-ui.com/primitives/docs/components/accordion
+
+---
+
+### Usage notes
+
+- Header background/hover styles are controlled with `--accordion-header-bg-color` and `--accordion-header-hover-bg-color`.
+- Content open/close uses CSS keyframe animations that rely on Radix’s `--radix-collapsible-content-height` variable.
+- You can wrap your own element as the trigger thanks to `asChild` defaulting to `true` on `AccordionTrigger`.

docs/Checkbox.md

@@ -114,12 +114,14 @@ Only variables actually referenced in `src/components/Checkbox/checkbox.module.s
 | `--checkbox-size-lg`              | `var(--checkbox-size-lg, 22px)`                          |
 | `--checkbox-border-radius-sm`     | `var(--checkbox-border-radius-sm, 2px)`                  |
 | `--checkbox-border-radius-lg`     | `var(--checkbox-border-radius-lg, 6px)`                  |
+| `--checkbox-speed-bg`             | `var(--checkbox-speed-bg, var(--speed-color))`           |
+| `--checkbox-speed-color`          | `var(--checkbox-speed-color, var(--speed-color))`        |
 
 Notes:
 
 - `--checkbox-checked-bg-color` falls back to the theme color token `--primary-color`.
 - `--checkbox-soft-bg-color` falls back to `--secondary-color`.
-- `--transition-speed-sm` is expected from the theme (no local fallback).
+- Transitions use component-scoped `--checkbox-speed-*` variables with fallbacks to global `--speed-*` tokens.
 
 ### Theming and global configuration
 

docs/Dialog.md

@@ -79,15 +79,19 @@ https://www.radix-ui.com/primitives/docs/components/dialog
 
 Only variables actually referenced in `src/components/Dialog/dialog.module.scss` are listed, with their exact fallback chains. If a variable has no explicit fallback in the stylesheet, it is marked as “none (define in theme)”.
 
-| Variable                             | Fallback chain                                 |
-| ------------------------------------ | ---------------------------------------------- |
-| `--dialog-overlay-bg-color`          | `var(--dialog-overlay-bg-color, #111)`         |
-| `--dialog-animation-overlay-opacity` | `var(--dialog-animation-overlay-opacity, 0.9)` |
+| Variable                             | Fallback chain                                   |
+| ------------------------------------ | ------------------------------------------------ |
+| `--dialog-overlay-bg-color`          | `var(--dialog-overlay-bg-color, #111)`           |
+| `--dialog-animation-overlay-opacity` | `var(--dialog-animation-overlay-opacity, 0.9)`   |
+| `--dialog-speed-bg`                  | `var(--dialog-speed-bg, var(--speed-color))`     |
+| `--dialog-speed-transform`           | `var(--dialog-speed-transform, var(--speed-sm))` |
+| `--dialog-speed-opacity`             | `var(--dialog-speed-opacity, var(--speed-sm))`   |
+| `--dialog-speed-color`               | `var(--dialog-speed-color, var(--speed-color))`  |
 
 Notes:
 
 - `speed` prop controls inline `animation-duration` on overlay and content; it is not a CSS variable.
-- Transitions for the content use `--transition-speed-sm` from the theme.
+- Content transitions use component-scoped `--dialog-speed-*` variables with fallbacks to global `--speed-*` tokens.
 
 ### Theming and global configuration
 

docs/Header.md

@@ -59,23 +59,24 @@ Note: Defaults may also be provided globally via theme/config (`UIProvider`, `ui
 
 Only variables actually referenced in `src/components/Header/header.module.scss` are listed, with their exact fallback chains. If a variable has no explicit fallback in the stylesheet, it is marked as “none (define in theme)”.
 
-| Variable                          | Fallback chain                                                       |
-| --------------------------------- | -------------------------------------------------------------------- |
-| `--header-gap`                    | `var(--header-gap, 10px)`                                            |
-| `--header-padding`                | `var(--header-padding, var(--side-padding-sm))`                      |
-| `--header-wrap-gap`               | `var(--header-wrap-gap, 10px)`                                       |
-| `--header-title-gap`              | `var(--header-title-gap, 12px)`                                      |
-| `--header-title-color`            | `var(--header-title-color, var(--text-primary-color))`               |
-| `--header-title-font-size`        | `var(--header-title-font-size, 25px)`                                |
-| `--header-title-font-family`      | `var(--header-title-font-family, var(--font-family)), sans-serif`    |
-| `--header-title-font-weight`      | `var(--header-title-font-weight, 700)`                               |
-| `--header-title-line-height`      | `var(--header-title-line-height, 120%)`                              |
-| `--header-title-transition-speed` | `var(--header-title-transition-speed, var(--transition-speed-md))`   |
-| `--header-subtitle-color`         | `var(--header-subtitle-color, var(--text-secondary-color))`          |
-| `--header-subtitle-font-size`     | `var(--header-subtitle-font-size, 14px)`                             |
-| `--header-subtitle-font-family`   | `var(--header-subtitle-font-family, var(--font-family)), sans-serif` |
-| `--header-subtitle-font-weight`   | `var(--header-subtitle-font-weight, 400)`                            |
-| `--header-subtitle-line-height`   | `var(--header-subtitle-line-height, 120%)`                           |
+| Variable                        | Fallback chain                                                       |
+| ------------------------------- | -------------------------------------------------------------------- |
+| `--header-gap`                  | `var(--header-gap, 10px)`                                            |
+| `--header-padding`              | `var(--header-padding, var(--side-padding-sm))`                      |
+| `--header-wrap-gap`             | `var(--header-wrap-gap, 10px)`                                       |
+| `--header-title-gap`            | `var(--header-title-gap, 12px)`                                      |
+| `--header-title-color`          | `var(--header-title-color, var(--text-primary-color))`               |
+| `--header-title-font-size`      | `var(--header-title-font-size, 25px)`                                |
+| `--header-title-font-family`    | `var(--header-title-font-family, var(--font-family)), sans-serif`    |
+| `--header-title-font-weight`    | `var(--header-title-font-weight, 700)`                               |
+| `--header-title-line-height`    | `var(--header-title-line-height, 120%)`                              |
+| `--header-subtitle-color`       | `var(--header-subtitle-color, var(--text-secondary-color))`          |
+| `--header-subtitle-font-size`   | `var(--header-subtitle-font-size, 14px)`                             |
+| `--header-subtitle-font-family` | `var(--header-subtitle-font-family, var(--font-family)), sans-serif` |
+| `--header-subtitle-font-weight` | `var(--header-subtitle-font-weight, 400)`                            |
+| `--header-subtitle-line-height` | `var(--header-subtitle-line-height, 120%)`                           |
+| `--header-speed-bg`             | `var(--header-speed-bg, var(--speed-color))`                         |
+| `--header-speed-color`          | `var(--header-speed-color, var(--speed-color))`                      |
 
 ### Theming and global configuration
 

docs/Modal.md

@@ -94,6 +94,10 @@ Only variables actually referenced in `src/components/Modal/modal.module.scss` a
 | `--modal-border-radius-sm`        | Contextual defaults: `5px` (small), `15px` (medium), `20px` (large)   |
 | `--modal-close-offset`            | `var(--modal-close-offset, 5px)`                                      |
 | `--modal-animation-content-scale` | `var(--modal-animation-content-scale, 0.96)`                          |
+| `--modal-speed-bg`                | `var(--modal-speed-bg, var(--speed-color))`                           |
+| `--modal-speed-transform`         | `var(--modal-speed-transform, var(--speed-sm))`                       |
+| `--modal-speed-opacity`           | `var(--modal-speed-opacity, var(--speed-sm))`                         |
+| `--modal-speed-color`             | `var(--modal-speed-color, var(--speed-color))`                        |
 
 Notes:
 

docs/Odometer.md

@@ -82,7 +82,7 @@ Only variables actually referenced in `src/components/Odometer/odometer.module.s
 Notes:
 
 - The component sets `--speed` inline based on the `duration` prop: `style={{"--speed": `${duration}ms`}}`.
-- Other theme tokens used in fallbacks (like `--text-primary-color`, `--font-family`, `--transition-speed-sm`) should be defined in your theme.
+- Other theme tokens used in fallbacks (like `--text-primary-color`, `--font-family`) should be defined in your theme. Global timing tokens are now `--speed-*` (e.g., `--speed-sm`, `--speed-md`).
 
 ### Theming and global configuration
 

docs/Switch.md

@@ -64,18 +64,20 @@ Only variables actually referenced in `src/components/Switch/switch.module.scss`
 | `--switch-height`           | `var(--switch-height, 22px)`                          |
 | `--switch-border-radius`    | `var(--switch-border-radius, 9999px)`                 |
 | `--switch-bg-color`         | `var(--switch-bg-color, #bbb)`                        |
-| `--transition-speed-sm`     | `var(--transition-speed-sm)` (none)                   |
 | `--switch-cheked-bg-color`  | `var(--switch-cheked-bg-color, var(--primary-color))` |
 | `--primary-color`           | `var(--primary-color)` (none)                         |
 | `--switch-disabled-opacity` | `var(--switch-disabled-opacity, 0.6)`                 |
 | `--switch-thumb-width`      | `var(--switch-thumb-width, 18px)`                     |
 | `--switch-thumb-height`     | `var(--switch-thumb-height, 18px)`                    |
 | `--switch-thumb-bg-color`   | `var(--switch-thumb-bg-color, white)`                 |
+| `--switch-speed-bg`         | `var(--switch-speed-bg, var(--speed-color))`          |
+| `--switch-speed-transform`  | `var(--switch-speed-transform, var(--speed-sm))`      |
 
 Notes:
 
 - The thumb transform distance is calculated from the width/height variables; adjusting `--switch-width`, `--switch-height`, `--switch-thumb-width`, and `--switch-thumb-height` will keep the motion consistent.
 - The variable name `--switch-cheked-bg-color` is intentionally spelled as in the stylesheet.
+- Transitions use component-scoped `--switch-speed-*` variables with fallbacks to global `--speed-*` tokens.
 
 ### Theming and global configuration