@vkzstudio/muza-ui 1.0.47 → 1.1.0

package/README.md

@@ -1,171 +1,173 @@
-# Muza UI
-
-A modern React component library built with Vite, shadcn/ui, and Tailwind CSS 4.
-
-[View Figma Design System](https://www.figma.com/design/sJ4AkKQznNB0Cj6fHe8edN/M%C3%BAza--Design-system?node-id=9933-6089&m=dev)
-
-## Prerequisites
-
-- Node.js 22 or higher
-- npm or yarn
-
-## Quick Start
-
-1. **Clone and install dependencies:**
-
-   ```bash
-   npm install
-   ```
-
-2. **Start development server:**
-   ```bash
-   npm run dev
-   ```
-   This starts Storybook at [http://localhost:6006](http://localhost:6006)
-
-## Development
-
-### Node.js Version Management
-
-This project requires Node.js 22+. If you're using nvm:
-
-```bash
-nvm use
-```
-
-### Available Scripts
-
-| Script                             | Description                                     |
-| ---------------------------------- | ----------------------------------------------- |
-| `npm run dev`                      | Start Storybook development server on port 6006 |
-| `npm run build`                    | Build the component library for production      |
-| `npm run build-storybook`          | Build Storybook for deployment                  |
-| `npm run typecheck`                | Run TypeScript type checking                    |
-| `npm run lint`                     | Run ESLint                                      |
-| `npm run lint:fix`                 | Run ESLint with auto-fix                        |
-| `npm run add-component <name>`     | Add shadcn/ui component (macOS/Linux)           |
-| `npm run add-component:win <name>` | Add shadcn/ui component (Windows)               |
-| `npm run format`                   | Run Prettier                                    |
-| `npm run chromatic`                | Run Chromatic visual regression tests           |
-
-### Project Structure
-
-```
-src/
-├── components/          # React components
-│   ├── Button/         # Example component
-│   │   ├── Button.tsx
-│   │   ├── Button.stories.tsx
-│   │   └── index.ts
-│   └── index.ts        # Component exports
-├── utils/              # Utility functions
-│   ├── cn.ts          # Class name utility
-│   └── index.ts       # Utility exports
-├── globals.css        # Global Tailwind styles
-└── index.ts          # Main library export
-```
-
-### Adding Components
-
-For automated component installation using shadcn/ui, see: **[Component Installation Guide](docs/components.md)**
-
-#### Manual Component Creation
-
-1. **Create component directory:**
-
-   ```bash
-   mkdir src/components/YourComponent
-   ```
-
-2. **Create component files:**
-   - `YourComponent.tsx` - Main component
-   - `YourComponent.stories.tsx` - Storybook stories
-   - `index.ts` - Export file
-
-3. **Export from main index:**
-   Add to `src/components/index.ts`:
-   ```typescript
-   export * from './YourComponent'
-   ```
-
-### Storybook Development
-
-Components are showcased and developed using Storybook:
-
-- **View components:** `npm run dev` → [http://localhost:6006](http://localhost:6006)
-- **Create stories:** Follow the pattern in `Button.stories.tsx`
-- **Auto-docs:** Stories are automatically documented
-
-## Build Process
-
-### Library Build
-
-```bash
-npm run build
-```
-
-This creates:
-
-- `dist/index.js` - ES module bundle
-- `dist/index.d.ts` - TypeScript declarations
-- `dist/muza-ui.css` - Compiled CSS with all design tokens
-- `dist/components/` - Individual component modules
-- `dist/styles/` - Design system token files
-
-### Storybook Build
-
-```bash
-npm run build-storybook
-```
-
-Creates `storybook-static/` directory for deployment.
-
-## Technologies
-
-- **React 18** - UI framework
-- **Vite** - Build tool and dev server
-- **TypeScript** - Type safety
-- **Tailwind CSS 4** - Utility-first CSS framework
-- **shadcn/ui** - Component patterns and utilities
-- **Storybook** - Component development and documentation
-- **class-variance-authority** - Component variant management
-
-## Library Usage
-
-Install the package:
-
-```bash
-npm install @vkzstudio/muza-ui
-```
-
-**Important:** This library requires Tailwind CSS 4 to be configured in your project.
-
-```typescript
-import { Button } from '@vkzstudio/muza-ui'
-import '@vkzstudio/muza-ui/styles'
-
-function App() {
-  return <Button variant="primary">Click me</Button>
-}
-```
-
-## Styling
-
-- Uses Tailwind CSS 4 with CSS variables
-- Follows shadcn/ui design system patterns
-- Custom utility function `cn()` for class merging
-- Dark mode support built-in
-
-## Quality Assurance
-
-- **TypeScript** - Static type checking
-- **ESLint** - Code linting
-- **Prettier** - Code formatting
-- **Storybook** - Visual testing and documentation
-
-## Contributing
-
-1. Create components following the established patterns
-2. Include comprehensive Storybook stories
-3. Run type checking and linting before committing
-4. Test components in Storybook
+# Muza UI
+
+A modern React component library built with Vite, shadcn/ui, and Tailwind CSS 4.
+
+[View Figma Design System](https://www.figma.com/design/sJ4AkKQznNB0Cj6fHe8edN/M%C3%BAza--Design-system?node-id=9933-6089&m=dev)
+
+## Prerequisites
+
+- Node.js 22 or higher
+- npm or yarn
+
+## Quick Start
+
+1. **Clone and install dependencies:**
+
+   ```bash
+   npm install
+   ```
+
+2. **Start development server:**
+   ```bash
+   npm run dev
+   ```
+   This starts Storybook at [http://localhost:6006](http://localhost:6006)
+
+## Development
+
+### Node.js Version Management
+
+This project requires Node.js 22+. If you're using nvm:
+
+```bash
+nvm use
+```
+
+### Available Scripts
+
+| Script                             | Description                                     |
+| ---------------------------------- | ----------------------------------------------- |
+| `npm run dev`                      | Start Storybook development server on port 6006 |
+| `npm run build`                    | Build the component library for production      |
+| `npm run build-storybook`          | Build Storybook for deployment                  |
+| `npm run typecheck`                | Run TypeScript type checking                    |
+| `npm run lint`                     | Run ESLint                                      |
+| `npm run lint:fix`                 | Run ESLint with auto-fix                        |
+| `npm run add-component <name>`     | Add shadcn/ui component (macOS/Linux)           |
+| `npm run add-component:win <name>` | Add shadcn/ui component (Windows)               |
+| `npm run format`                   | Run Prettier                                    |
+| `npm run chromatic`                | Run Chromatic visual regression tests           |
+
+### Project Structure
+
+```
+src/
+├── components/          # React components
+│   ├── Button/         # Example component
+│   │   ├── Button.tsx
+│   │   ├── Button.stories.tsx
+│   │   └── index.ts
+│   └── index.ts        # Component exports
+├── utils/              # Utility functions
+│   ├── cn.ts          # Class name utility
+│   └── index.ts       # Utility exports
+├── globals.css        # Global Tailwind styles
+└── index.ts          # Main library export
+```
+
+### Adding Components
+
+For automated component installation using shadcn/ui, see: **[Component Installation Guide](docs/components.md)**
+
+#### Manual Component Creation
+
+1. **Create component directory:**
+
+   ```bash
+   mkdir src/components/YourComponent
+   ```
+
+2. **Create component files:**
+   - `YourComponent.tsx` - Main component
+   - `YourComponent.stories.tsx` - Storybook stories
+   - `index.ts` - Export file
+
+3. **Export from main index:**
+   Add to `src/components/index.ts`:
+   ```typescript
+   export * from './YourComponent'
+   ```
+
+### Storybook Development
+
+Components are showcased and developed using Storybook:
+
+- **View components:** `npm run dev` → [http://localhost:6006](http://localhost:6006)
+- **Create stories:** Follow the pattern in `Button.stories.tsx`
+- **Auto-docs:** Stories are automatically documented
+
+## Build Process
+
+### Library Build
+
+```bash
+npm run build
+```
+
+This creates:
+
+- `dist/index.js` - ES module bundle
+- `dist/index.d.ts` - TypeScript declarations
+- `dist/muza-ui.css` - Compiled CSS with all design tokens
+- `dist/components/` - Individual component modules
+- `dist/styles/` - Design system token files
+
+### Storybook Build
+
+```bash
+npm run build-storybook
+```
+
+Creates `storybook-static/` directory for deployment.
+
+## Technologies
+
+- **React 18** - UI framework
+- **Vite** - Build tool and dev server
+- **TypeScript** - Type safety
+- **Tailwind CSS 4** - Utility-first CSS framework
+- **shadcn/ui** - Component patterns and utilities
+- **Storybook** - Component development and documentation
+- **class-variance-authority** - Component variant management
+
+## Library Usage
+
+Install the package:
+
+```bash
+npm install @vkzstudio/muza-ui
+```
+
+> ⚠️ **Pin with tilde, not caret.** muza-ui uses a non-standard version scheme where **breaking changes ship in the minor (`y`) position**, not the major (`x`). Use `"~1.1.0"` so breaking releases don't auto-install; `"^1.1.0"` (caret) will silently pull in breaking changes. If you use Renovate/Dependabot, don't auto-merge minor updates of this package. See [docs/releasing.md](./docs/releasing.md).
+
+**Important:** This library requires Tailwind CSS 4 to be configured in your project.
+
+```typescript
+import { Button } from '@vkzstudio/muza-ui'
+import '@vkzstudio/muza-ui/styles'
+
+function App() {
+  return <Button variant="primary">Click me</Button>
+}
+```
+
+## Styling
+
+- Uses Tailwind CSS 4 with CSS variables
+- Follows shadcn/ui design system patterns
+- Custom utility function `cn()` for class merging
+- Dark mode support built-in
+
+## Quality Assurance
+
+- **TypeScript** - Static type checking
+- **ESLint** - Code linting
+- **Prettier** - Code formatting
+- **Storybook** - Visual testing and documentation
+
+## Contributing
+
+1. Create components following the established patterns
+2. Include comprehensive Storybook stories
+3. Run type checking and linting before committing
+4. Test components in Storybook

package/dist/Muza_BP_logo.svg

@@ -1,26 +1,26 @@
-<svg width="100" height="36" viewBox="0 0 771 277" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M754.1 80.0004V91.9004C744.8 83.2004 732.4 77.9004 718.7 77.9004C690 77.9004 666.6 101.3 666.6 130C666.6 158.7 690 182.1 718.7 182.1C732.4 182.1 744.8 176.8 754.1 168.1V180H770.8V80.0004H754.1ZM718.7 165.4C699.2 165.4 683.3 149.5 683.3 130C683.3 110.5 699.2 94.6004 718.7 94.6004C738.2 94.6004 754.1 110.5 754.1 130C754.1 149.5 738.2 165.4 718.7 165.4Z" fill="white"/>
-<path d="M519 132.1C519 150.5 504 165.4 485.7 165.4C467.4 165.4 452.4 150.4 452.4 132.1V103.7H435.7V132.1C435.7 159.7 458.1 182.1 485.7 182.1C513.3 182.1 535.7 159.7 535.7 132.1V86.4004H519V132.1Z" fill="white"/>
-<path d="M363.3 77.9004C345.9 77.9004 330.6 86.8004 321.6 100.3C312.6 86.8004 297.3 77.9004 279.9 77.9004C267.1 77.9004 255.4 82.8004 246.6 90.7004V80.0004H230V180H246.7V127.9C246.7 109.5 261.7 94.6004 280 94.6004C298.3 94.6004 313.3 109.6 313.3 127.9V180H330V127.9C330 109.5 345 94.6004 363.3 94.6004C381.7 94.6004 396.6 109.6 396.6 127.9V180H413.3V127.9C413.3 100.3 390.9 77.9004 363.3 77.9004Z" fill="white"/>
-<path d="M533.205 49.9889L435.315 67.2646L438.218 83.7108L536.107 66.4351L533.205 49.9889Z" fill="white"/>
-<path d="M639.5 80H557.9V96.7H636.6C634.6 100.9 631.2 104.7 626.7 107.4L575 138.4C562.6 145.9 555.1 158.3 555.1 171.7V180H563.4H573H652.3V163.3H573.6C575.6 159.1 579 155.3 583.5 152.6L635.2 121.6C647.6 114.1 655.1 101.7 655.1 88.3V80H646.8H639.5Z" fill="white"/>
-<path d="M178.6 93.6004L137.4 100.9C149.9 97.3004 161.8 91.5004 172.7 83.8004L152.1 54.7004C134 67.6004 112 72.5004 90.1 68.7004C68.2 64.8004 49.2 52.7004 36.6 34.4004L7.3 54.5004C25.4 80.7004 52.6 98.2004 83.9 103.7C90.8 104.9 97.8 105.5 104.7 105.5C107.2 105.5 109.7 105.4 112.3 105.2L0 125.1C8.7 174.4 55.7 207.4 105.1 198.7C154.4 189.9 187.3 142.9 178.6 93.6004Z" fill="white"/>
-<path d="M79.6001 50C93.4072 50 104.6 38.8071 104.6 25C104.6 11.1929 93.4072 0 79.6001 0C65.793 0 54.6001 11.1929 54.6001 25C54.6001 38.8071 65.793 50 79.6001 50Z" fill="white"/>
-<path d="M265.1 258.9C265.1 269.2 257.8 276.3 247.5 276.3C237.1 276.3 229.9 269.1 229.9 258.9C229.9 248.6 237.1 241.5 247.5 241.5C257.9 241.4 265.1 248.6 265.1 258.9ZM258.3 258.9C258.3 252.3 253.8 247.6 247.6 247.6C241.4 247.6 237 252.3 237 258.9C237 265.5 241.4 270.2 247.6 270.2C253.7 270.1 258.3 265.4 258.3 258.9Z" fill="white"/>
-<path d="M286.2 241.4C291 241.4 295.2 243.5 297.9 247.1V228.1H304.8V275.1H298.1V270.6C295.3 274.2 291.2 276.4 286.2 276.4C276.8 276.4 270 269.1 270 259C269.9 248.8 276.7 241.4 286.2 241.4ZM276.8 258.9C276.8 265.3 281.4 269.9 287.5 269.9C293.7 269.9 298.1 265.3 298.1 258.9C298.1 252.6 293.6 247.9 287.5 247.9C281.3 247.9 276.8 252.6 276.8 258.9Z" fill="white"/>
-<path d="M332.3 275V230H352.7C361.4 230 367.6 235.1 367.6 242.1C367.6 246.5 364.8 250.3 360.9 251.4C365.5 252.5 368.9 257 368.9 262.2C368.9 269.7 362.3 275.1 353 275.1H332.3V275ZM340 236.3V248.5H351.6C356.5 248.5 359.9 246 359.9 242.5C359.9 238.9 356.5 236.4 351.6 236.4H340V236.3ZM351.7 254.4H340V268.7H351.7C357.2 268.7 361.2 265.6 361.2 261.5C361.2 257.4 357.2 254.4 351.7 254.4Z" fill="white"/>
-<path d="M392.3 241.4C402.4 241.4 409.5 248.5 409.5 258.5C409.5 259.3 409.4 260.2 409.4 261L382.1 260.9C382.9 266.6 386.9 270.5 392.2 270.5C396.5 270.5 400.5 268 401.8 264.4L408.3 265.4C406.5 271.8 399.8 276.4 392.4 276.4C382.3 276.4 375 268.9 375 258.6C374.9 248.6 382.2 241.4 392.3 241.4ZM402.2 255.9C401.4 250.8 397.4 247.2 392 247.2C386.8 247.2 383 250.7 382.1 255.9H402.2Z" fill="white"/>
-<path d="M422.6 242.7V246.8C424.9 243.4 428.9 241.4 433.1 241.4C441 241.4 446.2 247.3 446.2 255.3V275H439.3V255.8C439.3 251 436.4 247.6 431.6 247.6C426.8 247.6 422.7 251.3 422.7 256.5V275H415.8V242.7H422.6Z" fill="white"/>
-<path d="M469.2 241.4C479.3 241.4 486.4 248.5 486.4 258.5C486.4 259.3 486.3 260.2 486.3 261L459 260.9C459.8 266.6 463.8 270.5 469.1 270.5C473.4 270.5 477.4 268 478.7 264.4L485.2 265.4C483.4 271.8 476.7 276.4 469.3 276.4C459.2 276.4 451.9 268.9 451.9 258.6C451.9 248.6 459.2 241.4 469.2 241.4ZM479.2 255.9C478.4 250.8 474.4 247.2 469 247.2C463.8 247.2 460 250.7 459.1 255.9H479.2Z" fill="white"/>
-<path d="M503.1 242.7H510.9V248.1H503.1V275H496.2V248.1H491.2V242.7H496.2V237.2C496.2 231 500 226.8 505.5 226.8C507.5 226.8 509.3 227.1 510.9 227.7V233.5C509.8 233.2 508.8 233 507.6 233C504.9 233 503.1 234.9 503.1 237.8V242.7Z" fill="white"/>
-<path d="M516.7 233.2C516.7 230.8 518.5 229.1 521 229.1C523.5 229.1 525.3 230.8 525.3 233.2C525.3 235.7 523.5 237.5 521 237.5C518.5 237.5 516.7 235.7 516.7 233.2ZM524.4 242.7V275H517.5V242.7H524.4Z" fill="white"/>
-<path d="M536 248.1H531V242.7H536.3L537.2 234.9H542.9V242.7H550.8V248.1H542.9V265.5C542.9 268.4 544.7 270.5 547.6 270.5C548.5 270.5 550 270.3 551.2 269.9V275.4C549.5 276 547.3 276.3 545.5 276.3C539.7 276.3 535.9 272.1 535.9 265.9V248.1H536Z" fill="white"/>
-<path d="M584.6 261.3V275H577.2V230H594.6C605.2 230 612.7 236.6 612.7 245.7C612.7 254.8 605.1 261.4 594.5 261.4H584.6V261.3ZM584.6 236.3V255H593.4C600.3 255 605.2 251.1 605.2 245.7C605.2 240.2 600.3 236.3 593.4 236.3H584.6Z" fill="white"/>
-<path d="M626 228.1V275.1H619.1V228.1H626Z" fill="white"/>
-<path d="M656.8 275V270.9C654.6 274.3 650.5 276.3 646.4 276.3C638.4 276.3 633.3 270.4 633.3 262.4V242.7H640.2V261.9C640.2 266.7 643 270.1 647.9 270.1C652.7 270.1 656.8 266.4 656.8 261.2V242.6H663.7V275H656.8Z" fill="white"/>
-<path d="M685.2 276.4C676.7 276.4 670.5 271.2 670.5 264.1H676.9C676.9 267.9 680.4 270.7 685.2 270.7C689.5 270.7 692.7 268.7 692.6 266.1C692.6 262.7 687.6 261.9 684.3 261.5C676.7 260.4 671 259.4 671 251.7C671 245.8 676.7 241.4 684 241.4C692.3 241.4 698.5 246 698.5 252.5H692.1C692 249.3 688.7 247.1 684 247.1C680.5 247.1 677.6 249 677.6 251.6C677.6 254 680 254.8 685.2 255.7C691.4 256.7 699.3 258.1 699.3 265.4C699.3 271.7 693.5 276.4 685.2 276.4Z" fill="white"/>
-</svg>
-
-
-
-
+<svg width="100" height="36" viewBox="0 0 771 277" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M754.1 80.0004V91.9004C744.8 83.2004 732.4 77.9004 718.7 77.9004C690 77.9004 666.6 101.3 666.6 130C666.6 158.7 690 182.1 718.7 182.1C732.4 182.1 744.8 176.8 754.1 168.1V180H770.8V80.0004H754.1ZM718.7 165.4C699.2 165.4 683.3 149.5 683.3 130C683.3 110.5 699.2 94.6004 718.7 94.6004C738.2 94.6004 754.1 110.5 754.1 130C754.1 149.5 738.2 165.4 718.7 165.4Z" fill="white"/>
+<path d="M519 132.1C519 150.5 504 165.4 485.7 165.4C467.4 165.4 452.4 150.4 452.4 132.1V103.7H435.7V132.1C435.7 159.7 458.1 182.1 485.7 182.1C513.3 182.1 535.7 159.7 535.7 132.1V86.4004H519V132.1Z" fill="white"/>
+<path d="M363.3 77.9004C345.9 77.9004 330.6 86.8004 321.6 100.3C312.6 86.8004 297.3 77.9004 279.9 77.9004C267.1 77.9004 255.4 82.8004 246.6 90.7004V80.0004H230V180H246.7V127.9C246.7 109.5 261.7 94.6004 280 94.6004C298.3 94.6004 313.3 109.6 313.3 127.9V180H330V127.9C330 109.5 345 94.6004 363.3 94.6004C381.7 94.6004 396.6 109.6 396.6 127.9V180H413.3V127.9C413.3 100.3 390.9 77.9004 363.3 77.9004Z" fill="white"/>
+<path d="M533.205 49.9889L435.315 67.2646L438.218 83.7108L536.107 66.4351L533.205 49.9889Z" fill="white"/>
+<path d="M639.5 80H557.9V96.7H636.6C634.6 100.9 631.2 104.7 626.7 107.4L575 138.4C562.6 145.9 555.1 158.3 555.1 171.7V180H563.4H573H652.3V163.3H573.6C575.6 159.1 579 155.3 583.5 152.6L635.2 121.6C647.6 114.1 655.1 101.7 655.1 88.3V80H646.8H639.5Z" fill="white"/>
+<path d="M178.6 93.6004L137.4 100.9C149.9 97.3004 161.8 91.5004 172.7 83.8004L152.1 54.7004C134 67.6004 112 72.5004 90.1 68.7004C68.2 64.8004 49.2 52.7004 36.6 34.4004L7.3 54.5004C25.4 80.7004 52.6 98.2004 83.9 103.7C90.8 104.9 97.8 105.5 104.7 105.5C107.2 105.5 109.7 105.4 112.3 105.2L0 125.1C8.7 174.4 55.7 207.4 105.1 198.7C154.4 189.9 187.3 142.9 178.6 93.6004Z" fill="white"/>
+<path d="M79.6001 50C93.4072 50 104.6 38.8071 104.6 25C104.6 11.1929 93.4072 0 79.6001 0C65.793 0 54.6001 11.1929 54.6001 25C54.6001 38.8071 65.793 50 79.6001 50Z" fill="white"/>
+<path d="M265.1 258.9C265.1 269.2 257.8 276.3 247.5 276.3C237.1 276.3 229.9 269.1 229.9 258.9C229.9 248.6 237.1 241.5 247.5 241.5C257.9 241.4 265.1 248.6 265.1 258.9ZM258.3 258.9C258.3 252.3 253.8 247.6 247.6 247.6C241.4 247.6 237 252.3 237 258.9C237 265.5 241.4 270.2 247.6 270.2C253.7 270.1 258.3 265.4 258.3 258.9Z" fill="white"/>
+<path d="M286.2 241.4C291 241.4 295.2 243.5 297.9 247.1V228.1H304.8V275.1H298.1V270.6C295.3 274.2 291.2 276.4 286.2 276.4C276.8 276.4 270 269.1 270 259C269.9 248.8 276.7 241.4 286.2 241.4ZM276.8 258.9C276.8 265.3 281.4 269.9 287.5 269.9C293.7 269.9 298.1 265.3 298.1 258.9C298.1 252.6 293.6 247.9 287.5 247.9C281.3 247.9 276.8 252.6 276.8 258.9Z" fill="white"/>
+<path d="M332.3 275V230H352.7C361.4 230 367.6 235.1 367.6 242.1C367.6 246.5 364.8 250.3 360.9 251.4C365.5 252.5 368.9 257 368.9 262.2C368.9 269.7 362.3 275.1 353 275.1H332.3V275ZM340 236.3V248.5H351.6C356.5 248.5 359.9 246 359.9 242.5C359.9 238.9 356.5 236.4 351.6 236.4H340V236.3ZM351.7 254.4H340V268.7H351.7C357.2 268.7 361.2 265.6 361.2 261.5C361.2 257.4 357.2 254.4 351.7 254.4Z" fill="white"/>
+<path d="M392.3 241.4C402.4 241.4 409.5 248.5 409.5 258.5C409.5 259.3 409.4 260.2 409.4 261L382.1 260.9C382.9 266.6 386.9 270.5 392.2 270.5C396.5 270.5 400.5 268 401.8 264.4L408.3 265.4C406.5 271.8 399.8 276.4 392.4 276.4C382.3 276.4 375 268.9 375 258.6C374.9 248.6 382.2 241.4 392.3 241.4ZM402.2 255.9C401.4 250.8 397.4 247.2 392 247.2C386.8 247.2 383 250.7 382.1 255.9H402.2Z" fill="white"/>
+<path d="M422.6 242.7V246.8C424.9 243.4 428.9 241.4 433.1 241.4C441 241.4 446.2 247.3 446.2 255.3V275H439.3V255.8C439.3 251 436.4 247.6 431.6 247.6C426.8 247.6 422.7 251.3 422.7 256.5V275H415.8V242.7H422.6Z" fill="white"/>
+<path d="M469.2 241.4C479.3 241.4 486.4 248.5 486.4 258.5C486.4 259.3 486.3 260.2 486.3 261L459 260.9C459.8 266.6 463.8 270.5 469.1 270.5C473.4 270.5 477.4 268 478.7 264.4L485.2 265.4C483.4 271.8 476.7 276.4 469.3 276.4C459.2 276.4 451.9 268.9 451.9 258.6C451.9 248.6 459.2 241.4 469.2 241.4ZM479.2 255.9C478.4 250.8 474.4 247.2 469 247.2C463.8 247.2 460 250.7 459.1 255.9H479.2Z" fill="white"/>
+<path d="M503.1 242.7H510.9V248.1H503.1V275H496.2V248.1H491.2V242.7H496.2V237.2C496.2 231 500 226.8 505.5 226.8C507.5 226.8 509.3 227.1 510.9 227.7V233.5C509.8 233.2 508.8 233 507.6 233C504.9 233 503.1 234.9 503.1 237.8V242.7Z" fill="white"/>
+<path d="M516.7 233.2C516.7 230.8 518.5 229.1 521 229.1C523.5 229.1 525.3 230.8 525.3 233.2C525.3 235.7 523.5 237.5 521 237.5C518.5 237.5 516.7 235.7 516.7 233.2ZM524.4 242.7V275H517.5V242.7H524.4Z" fill="white"/>
+<path d="M536 248.1H531V242.7H536.3L537.2 234.9H542.9V242.7H550.8V248.1H542.9V265.5C542.9 268.4 544.7 270.5 547.6 270.5C548.5 270.5 550 270.3 551.2 269.9V275.4C549.5 276 547.3 276.3 545.5 276.3C539.7 276.3 535.9 272.1 535.9 265.9V248.1H536Z" fill="white"/>
+<path d="M584.6 261.3V275H577.2V230H594.6C605.2 230 612.7 236.6 612.7 245.7C612.7 254.8 605.1 261.4 594.5 261.4H584.6V261.3ZM584.6 236.3V255H593.4C600.3 255 605.2 251.1 605.2 245.7C605.2 240.2 600.3 236.3 593.4 236.3H584.6Z" fill="white"/>
+<path d="M626 228.1V275.1H619.1V228.1H626Z" fill="white"/>
+<path d="M656.8 275V270.9C654.6 274.3 650.5 276.3 646.4 276.3C638.4 276.3 633.3 270.4 633.3 262.4V242.7H640.2V261.9C640.2 266.7 643 270.1 647.9 270.1C652.7 270.1 656.8 266.4 656.8 261.2V242.6H663.7V275H656.8Z" fill="white"/>
+<path d="M685.2 276.4C676.7 276.4 670.5 271.2 670.5 264.1H676.9C676.9 267.9 680.4 270.7 685.2 270.7C689.5 270.7 692.7 268.7 692.6 266.1C692.6 262.7 687.6 261.9 684.3 261.5C676.7 260.4 671 259.4 671 251.7C671 245.8 676.7 241.4 684 241.4C692.3 241.4 698.5 246 698.5 252.5H692.1C692 249.3 688.7 247.1 684 247.1C680.5 247.1 677.6 249 677.6 251.6C677.6 254 680 254.8 685.2 255.7C691.4 256.7 699.3 258.1 699.3 265.4C699.3 271.7 693.5 276.4 685.2 276.4Z" fill="white"/>
+</svg>
+
+
+
+

package/dist/components/Accordion/Accordion.d.ts

@@ -1,4 +1,5 @@
 import { AccordionMultipleProps as RadixAccordionMultipleProps, AccordionSingleProps as RadixAccordionSingleProps } from '@radix-ui/react-accordion';
+import { TypographyProps } from '../Typography';
 import * as React from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 /**
@@ -6,8 +7,9 @@ import * as AccordionPrimitive from '@radix-ui/react-accordion';
  * - `'default'` — outlined border, neutral background
  * - `'branded'` — brand-colored fill, no border
  * - `'settings'` — white background with light border, for admin/config panels
+ * - `'inline'` — borderless except for a bottom divider, for stacked list-style sections
  */
-export type AccordionVariant = 'default' | 'branded' | 'settings';
+export type AccordionVariant = 'default' | 'branded' | 'settings' | 'inline';
 /** Props for single mode — only one item can be open at a time. */
 export interface AccordionSingleProps extends RadixAccordionSingleProps {
     /** Single mode — only one item can be open at a time. */
@@ -72,18 +74,18 @@ export interface AccordionItemProps extends React.ComponentProps<typeof Accordio
     /** Prevents interaction with this specific item. @default false */
     disabled?: boolean;
     /**
-     * When true, clicking anywhere on the item (not just the header) toggles the open state.
-     * Set to false for items whose content contains interactive elements (forms, inputs, switches)
-     * so inner clicks don't collapse the section.
+     * When true, clicking anywhere on the item (not just the header trigger)
+     * toggles the open state. Opt-in because interactive content inside
+     * `AccordionContent` (forms, inputs, switches, buttons) would otherwise
+     * bubble clicks up and silently collapse the section. Safe to enable for
+     * items whose content is purely informational text.
      *
-     * @default true
+     * @default false
      * @example
-     * <AccordionItem value="settings" clickableContent={false}>
-     *   <AccordionHeader>Settings</AccordionHeader>
-     *   <AccordionContent>
-     *     <Input />
-     *     <Switch />
-     *   </AccordionContent>
+     * // Pure-text content — enable for a larger click target
+     * <AccordionItem value="faq" clickableContent>
+     *   <AccordionHeader>Question</AccordionHeader>
+     *   <AccordionContent>Answer text</AccordionContent>
      * </AccordionItem>
      */
     clickableContent?: boolean;
@@ -105,26 +107,118 @@ export interface AccordionItemProps extends React.ComponentProps<typeof Accordio
  * Props for the AccordionHeader component.
  * Renders the clickable header area that toggles content visibility.
  * Wraps and behaves as Radix's `Accordion.Header` + `Accordion.Trigger`.
+ *
+ * Extends `HTMLAttributes<HTMLDivElement>` rather than Radix's Header props
+ * so that Radix-specific props (e.g. `asChild`) don't leak onto a plain
+ * `<div>` in the static-item branch of the implementation.
  */
-export type AccordionHeaderProps = React.ComponentProps<typeof AccordionPrimitive.Header>;
+export interface AccordionHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Action node rendered as a sibling of the trigger inside the header. Stays
+     * visible regardless of the open state and is independently clickable —
+     * useful for buttons, icon controls, or status indicators that should not
+     * toggle the accordion when activated.
+     *
+     * Place interactive elements here instead of inside the trigger to avoid
+     * nested `<button>` elements.
+     *
+     * @example
+     * <AccordionHeader headerActions={<Button size="xs" onClick={handleEdit}>Edit</Button>}>
+     *   Section title
+     * </AccordionHeader>
+     */
+    headerActions?: React.ReactNode;
+}
 /**
  * Props for the AccordionContent component.
  * Collapsible content area with built-in slide-up/slide-down animation.
  * Wraps Radix's `Accordion.Content`.
  */
 export type AccordionContentProps = React.ComponentProps<typeof AccordionPrimitive.Content>;
+/**
+ * Props for the AccordionFooter component.
+ *
+ * Renders below the content but stays visible regardless of the open state.
+ * Use for actions (buttons, links) that should be reachable even when the
+ * accordion is collapsed. Clicks inside the footer do not propagate to the
+ * trigger, so the accordion does not toggle when the footer is activated.
+ */
+export type AccordionFooterProps = React.HTMLAttributes<HTMLDivElement>;
+/**
+ * Props for the AccordionTitle component.
+ *
+ * Standardized title slot inside an `AccordionHeader`. Owns the hover
+ * highlight (via `group-hover`) so that hovering the trigger re-colors only
+ * the title, not every text node in the header.
+ *
+ * Wraps {@link Typography} — accepts the same `variant`, `weight`, `size`,
+ * `component`, and `fixY` props. Defaults are tuned for accordion titles:
+ * - `component` defaults to `'span'`
+ * - `variant` defaults to `'title'`
+ * - `weight` defaults to `'medium'`
+ * - `size` defaults to `'base'`
+ * - `fixY` defaults to `true`
+ *
+ * @see Typography
+ */
+export type AccordionTitleProps = Omit<TypographyProps, 'component'> & {
+    /** HTML element to render. @default 'span' */
+    component?: TypographyProps['component'];
+};
 declare const accordionItemVariants: (props?: ({
-    variant?: "default" | "branded" | "settings" | null | undefined;
+    variant?: "default" | "inline" | "branded" | "settings" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const accordionTriggerVariants: (props?: ({
-    variant?: "default" | "branded" | "settings" | null | undefined;
+    variant?: "default" | "inline" | "branded" | "settings" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const accordionTitleVariants: (props?: ({
+    variant?: "default" | "inline" | "branded" | "settings" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const accordionContentInnerVariants: (props?: ({
-    variant?: "default" | "branded" | "settings" | null | undefined;
+    variant?: "default" | "inline" | "branded" | "settings" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const accordionFooterVariants: (props?: ({
+    variant?: "default" | "inline" | "branded" | "settings" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const Accordion: ({ className, variant: variantProp, ...props }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
-declare const AccordionItem: ({ className, children, clickableContent, static: isStatic, value, disabled, ...props }: AccordionItemProps) => import("react/jsx-runtime").JSX.Element;
-declare const AccordionHeader: ({ className, children, ...props }: AccordionHeaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionHeader: ({ className, children, headerActions, ...props }: AccordionHeaderProps) => import("react/jsx-runtime").JSX.Element;
 declare const AccordionContent: ({ className, children, ...props }: AccordionContentProps) => import("react/jsx-runtime").JSX.Element;
-export { Accordion, AccordionContent, AccordionHeader, AccordionItem, accordionItemVariants, accordionTriggerVariants, accordionContentInnerVariants, };
+/**
+ * Standardized title slot for `AccordionHeader`. Owns the hover highlight via
+ * `group-hover` so only the title re-colors on hover — sibling text in the
+ * header (subtitles, badge labels) keeps its own color. Wraps `Typography`.
+ *
+ * @example
+ * <AccordionHeader>
+ *   <AccordionTitle>Personal info</AccordionTitle>
+ * </AccordionHeader>
+ *
+ * @example
+ * // With a subtitle that stays its own color on hover:
+ * <AccordionHeader>
+ *   <div className="flex flex-col">
+ *     <AccordionTitle>Bookings</AccordionTitle>
+ *     <Typography size="sm" className="text-text-dark-secondary">3 upcoming</Typography>
+ *   </div>
+ * </AccordionHeader>
+ */
+declare const AccordionTitle: ({ className, component, variant: typographyVariant, weight, size, fixY, ...props }: AccordionTitleProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders below the content but stays visible regardless of the open state.
+ * Use for actions (buttons, links) that should be reachable even when the
+ * accordion is collapsed. Clicks inside the footer do not propagate to the
+ * trigger.
+ *
+ * @example
+ * <AccordionItem value="item-1">
+ *   <AccordionHeader>Section title</AccordionHeader>
+ *   <AccordionContent>...</AccordionContent>
+ *   <AccordionFooter>
+ *     <Button fullWidth onClick={save}>Save</Button>
+ *   </AccordionFooter>
+ * </AccordionItem>
+ */
+declare const AccordionFooter: ({ className, children, onClick, ...props }: AccordionFooterProps) => import("react/jsx-runtime").JSX.Element;
+export { Accordion, AccordionContent, AccordionFooter, AccordionHeader, AccordionItem, AccordionTitle, accordionItemVariants, accordionTriggerVariants, accordionContentInnerVariants, accordionFooterVariants, accordionTitleVariants, };
 //# sourceMappingURL=Accordion.d.ts.map

package/dist/components/Accordion/Accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAA;AAC/D,OAAO,EACL,KAAK,sBAAsB,IAAI,2BAA2B,EAC1D,KAAK,oBAAoB,IAAI,yBAAyB,EACvD,MAAM,2BAA2B,CAAA;AAKlC;;;;;GAKG;AACH,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAA;AAEjE,mEAAmE;AACnE,MAAM,WAAW,oBAAqB,SAAQ,yBAAyB;IACrE,yDAAyD;IACzD,IAAI,EAAE,QAAQ,CAAA;IACd;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAA;IAC1B,iFAAiF;IACjF,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oDAAoD;IACpD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,2EAA2E;IAC3E,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,gFAAgF;AAChF,MAAM,WAAW,sBAAuB,SAAQ,2BAA2B;IACzE,sEAAsE;IACtE,IAAI,EAAE,UAAU,CAAA;IAChB;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAA;IAC1B,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,qDAAqD;IACrD,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;IACvB,0EAA0E;IAC1E,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACzC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,cAAc,GAAG,oBAAoB,GAAG,sBAAsB,CAAA;AAE1E;;;GAGG;AACH,MAAM,WAAW,kBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC;IAC5D,qGAAqG;IACrG,KAAK,EAAE,MAAM,CAAA;IACb,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;;;;;;;;;OAcG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;;;;;;;;;;OAWG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED;;;;GAIG;AACH,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,cAAc,CACrD,OAAO,kBAAkB,CAAC,MAAM,CACjC,CAAA;AAED;;;;GAIG;AACH,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,cAAc,CACtD,OAAO,kBAAkB,CAAC,OAAO,CAClC,CAAA;AAMD,QAAA,MAAM,qBAAqB;;8EAYzB,CAAA;AAEF,QAAA,MAAM,wBAAwB;;8EAe7B,CAAA;AAED,QAAA,MAAM,6BAA6B;;8EASjC,CAAA;AA8BF,QAAA,MAAM,SAAS,GAAI,+CAIhB,cAAc,4CAahB,CAAA;AAED,QAAA,MAAM,aAAa,GAAI,wFAQpB,kBAAkB,4CAiDpB,CAAA;AAED,QAAA,MAAM,eAAe,GAAI,mCAItB,oBAAoB,4CAsCtB,CAAA;AAED,QAAA,MAAM,gBAAgB,GAAI,mCAIvB,qBAAqB,4CA6BvB,CAAA;AAED,OAAO,EACL,SAAS,EACT,gBAAgB,EAChB,eAAe,EACf,aAAa,EACb,qBAAqB,EACrB,wBAAwB,EACxB,6BAA6B,GAC9B,CAAA"}
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"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"}