@kubit-ui-web/react-components 1.17.3 → 2.0.0-beta.10

package/README.md

@@ -7,16 +7,20 @@
   </a>
 </p>
 
-<div align='center'>
-  
-<a href='#'>
-<img src='./assets/version.png' width="150px">
-</a>
-  
-<a href='#'>
-<img src='./assets/license.png' width="230px">
-</a>
-  
+<div align="center">
+
+[![NPM Version](https://img.shields.io/npm/v/@kubit-ui-web/react-components?style=for-the-badge&logo=npm&color=CB3837)](https://www.npmjs.com/package/@kubit-ui-web/react-components)
+[![NPM Downloads](https://img.shields.io/npm/dm/@kubit-ui-web/react-components?style=for-the-badge&logo=npm&color=CB3837)](https://www.npmjs.com/package/@kubit-ui-web/react-components)
+[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@kubit-ui-web/react-components?style=for-the-badge&logo=webpack&color=8DD6F9)](https://bundlephobia.com/package/@kubit-ui-web/react-components)
+
+[![License](https://img.shields.io/github/license/kubit-ui/kubit-react-components?style=for-the-badge&color=blue)](./LICENSE.md)
+[![GitHub Stars](https://img.shields.io/github/stars/kubit-ui/kubit-react-components?style=for-the-badge&logo=github&color=yellow)](https://github.com/kubit-ui/kubit-react-components/stargazers)
+[![GitHub Issues](https://img.shields.io/github/issues/kubit-ui/kubit-react-components?style=for-the-badge&logo=github&color=red)](https://github.com/kubit-ui/kubit-react-components/issues)
+
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.9-blue?style=for-the-badge&logo=typescript)](https://www.typescriptlang.org/)
+[![React](https://img.shields.io/badge/React-18.3-61DAFB?style=for-the-badge&logo=react)](https://reactjs.org/)
+[![Storybook](https://img.shields.io/badge/Storybook-10.1-FF4785?style=for-the-badge&logo=storybook)](https://storybook.js.org/)
+
 </div>
 
 <br />
@@ -27,9 +31,23 @@
 
 # Getting Started
 
+> **Kubit React Components** is a customizable, accessible library of React web components, designed to enhance your application's user experience with production-ready components.
+
+## 📋 Table of Contents
+
+- [Installation](#installation)
+- [Quick Start](#quick-start)
+- [Usage](#usage)
+- [Documentation](#documentation)
+- [Storybook](#storybook)
+- [Features](#features)
+- [Browser Support](#browser-support)
+- [Contributing](#contributing)
+- [License](#license)
+
 ## Installation
 
-To install the package, run the following command:
+Install the package using your preferred package manager:
 
 ### npm
 
@@ -43,16 +61,33 @@ npm install @kubit-ui-web/react-components
 yarn add @kubit-ui-web/react-components
 ```
 
-This will install the package and its dependencies. Now you can import the components and use them in your application.
+### pnpm
 
-## Usage
+```bash
+pnpm add @kubit-ui-web/react-components
+```
+
+**Package Info:**
+
+- 📦 Size: ~235 KB (gzipped)
+- 🎯 Tree-shakeable: Yes
+- 📘 TypeScript: Full support
+- ⚛️ React: 17+ and 18+
 
-To use the components, import them from the package and use them in your application.
+## Quick Start
+
+Import and use components in your application:
+
+## Quick Start
+
+Import and use components in your application:
 
 ```tsx
-import { Button, KubitProvider } from '@kubit-ui-web/react-components';
 import React from 'react';
 
+import { Button, KubitProvider } from '@kubit-ui-web/react-components';
+import '@kubit-ui-web/react-components/styles/default/default.min.css';
+
 const App = () => {
   return (
     <KubitProvider>
@@ -66,209 +101,313 @@ const App = () => {
 export default App;
 ```
 
-This will render the button with the default styles and functionality.
+> **Note:** The `KubitProvider` is required to use the components. It provides the theme and other context.
 
-> Note: The `KubitProvider` is required to use the components. It provides the theme and other context to the components.
+## Usage
 
-You can foud more information about change the theme and other options in the [Customize theme](https://kubit-ui.com)
+### Basic Components
 
-## Documentation
+```tsx
+import {
+  Button,
+  Input,
+  KubitProvider,
+  Modal,
+  Tooltip,
+} from '@kubit-ui-web/react-components';
+
+function MyApp() {
+  return (
+    <KubitProvider>
+      <Input label="Email" placeholder="Enter your email" type="email" />
+
+      <Button variant="PRIMARY" onClick={handleClick}>
+        Submit
+      </Button>
 
-You can find the documentation for the web components in the [Kubit UI website](https://kubit-ui.com)
+      <Tooltip content="Helpful information">
+        <span>Hover me</span>
+      </Tooltip>
+    </KubitProvider>
+  );
+}
+```
 
-## Storybook
+### Custom Theme
 
-To run the storybook, first of all clone the repository and install the dependencies. Then run the following command:
+Customize the theme to match your brand:
 
-```bash
-npm run storybook
+```tsx
+import { KubitProvider } from '@kubit-ui-web/react-components';
 
-yarn storybook
+const customTheme = {
+  colors: {
+    primary: '#your-color',
+    secondary: '#your-secondary',
+  },
+};
+
+function App() {
+  return (
+    <KubitProvider theme={customTheme}>{/* Your components */}</KubitProvider>
+  );
+}
 ```
 
-This will start the storybook server and you can see the components in action.
+For more information about theme customization, visit [Kubit UI Documentation](https://kubit-ui.com).
 
-## Tests
+## Features
 
-To run the tests, you can use the following command:
+✨ **50+ Production-Ready Components**
 
-```bash
-npm run test
+- Buttons, Inputs, Modals, Tooltips, and more
+- Fully customizable and themeable
 
-yarn test
-```
+♿ **Accessible by Default**
 
-This will run the tests and show the results in the terminal.
+- WCAG 2.1 AA compliant
+- Keyboard navigation support
+- Screen reader friendly
 
-## Contributing
+🎨 **Design System Integration**
 
-We are open to contributions. If you want to contribute to the project, please follow the steps below:
+- Built with design tokens
+- CSS variables for easy customization
+- Bernova CSS generation
 
-### Development Workflow
+📦 **Developer Experience**
 
-1. **Fork the Repository**: Click the "Fork" button in the upper right corner of the repository's page on GitHub. This will create a copy of the repository in your account.
+- Full TypeScript support
+- Tree-shakeable exports
+- Comprehensive documentation
+- Rich Storybook examples
 
-2. **Clone the Repository**: Use `git clone` to clone the repository to your local machine.
+🚀 **Performance Optimized**
 
-   ```sh
-   git clone https://github.com/your-username/kubit-react-components.git
-   ```
+- Small bundle size (~235 KB gzipped)
+- Code splitting ready
+- Minimal runtime overhead
 
-3. **Create a Branch**: Use proper branch naming conventions for automatic version detection.
+## Browser Support
 
-   ```sh
-   git checkout -b <branch-type>/<branch-name>
-   ```
+| Browser | Version         |
+| ------- | --------------- |
+| Chrome  | Last 2 versions |
+| Firefox | Last 2 versions |
+| Safari  | Last 2 versions |
+| Edge    | Last 2 versions |
 
-4. **Make Changes**: Make any necessary changes to the codebase and **test** the changes thoroughly.
+## Documentation
 
-5. **Commit Changes**: Use conventional commit messages when possible.
+You can find comprehensive documentation for all components at:
 
-   ```sh
-   git commit -m "feat: add new component feature"
-   ```
+🌐 **[Kubit UI Website](https://kubit-ui.com)**
 
-6. **Push Changes**: Use `git push` to push your changes to your forked repository.
+- Component API documentation
+- Interactive examples
+- Design guidelines
+- Migration guides
 
-   ```sh
-   git push origin <branch-name>
-   ```
+## Storybook
 
-7. **Open a Pull Request**: Go to the original repository on GitHub and click the "New pull request" button. Fill out the form with details about your changes and submit the pull request.
+Explore all components interactively in Storybook.
 
-### Branch Naming & Automatic Publishing
+### View Online
 
-This repository uses an **automatic publishing system** that determines the version bump based on your branch name and PR content. When your PR is merged, the package will be automatically published to NPM.
+🎭 **[View Storybook](https://kubit-ui.com/storybook)** - Browse all components online
 
-#### Branch Naming Patterns
+### Run Locally
 
-Use these branch prefixes to ensure automatic publishing works correctly:
+To run Storybook locally:
 
-| Branch Pattern | Version Bump | Example | Description |
-|----------------|--------------|---------|-------------|
-| `feat/` or `feature/` | **MINOR** | `feat/add-tooltip` | New features or enhancements |
-| `fix/` or `bugfix/` | **PATCH** | `fix/button-hover-state` | Bug fixes |
-| `break/` or `breaking/` | **MAJOR** | `break/remove-old-api` | Breaking changes |
-| `hotfix/` | **PATCH** | `hotfix/critical-security-fix` | Urgent fixes |
-| `chore/` | **PATCH** | `chore/update-dependencies` | Maintenance tasks |
+1. Clone the repository:
 
-#### Advanced Version Detection
+   ```bash
+   git clone https://github.com/kubit-ui/kubit-react-components.git
+   cd kubit-react-components
+   ```
 
-The system also analyzes your **PR title** and **description** for more precise version detection:
+2. Install dependencies:
 
-##### MAJOR (Breaking Changes)
-- `BREAKING CHANGE:` in PR description
-- `!` in PR title (e.g., `feat!: redesign button API`)
-- `[breaking]` tag in PR title
-- Conventional commits with `!` (e.g., `feat(api)!: change interface`)
+   ```bash
+   npm install
+   # or
+   yarn install
+   ```
 
-##### MINOR (New Features)
-- PR titles starting with `feat:` or `feature:`
-- `[feature]` tag in PR title
-- Conventional commits like `feat(ui): add dark mode`
+3. Start Storybook:
+   ```bash
+   npm run storybook
+   # or
+   yarn storybook
+   ```
 
-##### PATCH (Bug Fixes & Others)
-- PR titles starting with `fix:` or `bugfix:`
-- All other changes (default behavior)
-- Conventional commits like `fix(button): hover state`
+This will start the Storybook server at `http://localhost:6006` where you can see all components in action.
 
-#### Examples
+## Tests
 
-**Adding a new feature:**
-```sh
-git checkout -b feat/dark-mode-support
-# Make your changes
-git commit -m "feat(theme): add dark mode support for all components"
-# Create PR with title: "feat(theme): add dark mode support"
-# Result: MINOR version bump (e.g., 1.0.0 → 1.1.0)
-```
+Run the test suite to ensure everything works correctly:
 
-**Fixing a bug:**
-```sh
-git checkout -b fix/button-accessibility
-# Make your changes  
-git commit -m "fix(button): improve keyboard navigation"
-# Create PR with title: "fix(button): improve keyboard navigation"
-# Result: PATCH version bump (e.g., 1.0.0 → 1.0.1)
-```
+```bash
+# Run all tests
+npm run test
+# or
+yarn test
+
+# Watch mode (for development)
+npm run test:watch
+# or
+yarn test:watch
 
-**Breaking changes:**
-```sh
-git checkout -b break/remove-deprecated-props
-# Make your changes
-git commit -m "feat!: remove deprecated size prop from Button"
-# Create PR with title: "feat!: remove deprecated size prop"
-# PR description: "BREAKING CHANGE: The 'size' prop has been removed..."
-# Result: MAJOR version bump (e.g., 1.0.0 → 2.0.0)
+# Coverage report
+npm run test:coverage
+# or
+yarn test:coverage
 ```
 
-### Quality Assurance
+**Test Stack:**
+
+- ✅ Vitest - Fast unit testing
+- 🧪 Testing Library - Component testing
+- ♿ vitest-axe - Accessibility testing
 
-Before publishing, the system automatically runs:
+## Contributing
 
-- ✅ **Linting** - Code style validation
-- ✅ **Type Checking** - TypeScript validation  
-- ✅ **Tests** - Full test suite execution
-- ✅ **Build** - Package compilation
-- ✅ **Integration Tests** - Component functionality validation
+We welcome contributions from the community! Here's how you can help:
 
-### Publishing Process
+### Ways to Contribute
 
-When your PR is merged:
+- 🐛 Report bugs
+- 💡 Suggest new features
+- 📝 Improve documentation
+- 🔧 Submit pull requests
+- ⭐ Star the repository
 
-1. **Automatic Analysis** - System analyzes branch name, PR title, and description
-2. **Version Calculation** - Determines MAJOR/MINOR/PATCH version bump
-3. **Quality Checks** - Runs all tests and validations
-4. **NPM Publication** - Publishes to NPM with appropriate version
-5. **GitHub Release** - Creates GitHub release with changelog
-6. **Notifications** - Posts success/failure status in PR comments
+### Contribution Steps
 
-### Manual Override
+1. **Fork the Repository**: Click the "Fork" button in the upper right corner of the [repository's page](https://github.com/kubit-ui/kubit-react-components) on GitHub.
 
-If you need to override the automatic version detection, you can:
+2. **Clone the Repository**: Clone your fork to your local machine.
 
-1. Use explicit markers in your PR description:
+   ```bash
+   git clone https://github.com/YOUR_USERNAME/kubit-react-components.git
+   cd kubit-react-components
    ```
-   BREAKING CHANGE: This removes the old authentication API
+
+3. **Create a Branch**: Create a new branch for your changes.
+
+   ```bash
+   git checkout -b feature/your-feature-name
    ```
 
-2. Use conventional commit format in PR title:
+4. **Install Dependencies**:
+
+   ```bash
+   yarn install
    ```
-   feat!: redesign component API structure
+
+5. **Make Changes**: Make your changes and test them thoroughly.
+
+   ```bash
+   yarn test
+   yarn lint
+   yarn typecheck
    ```
 
-3. Add tags to PR title:
+6. **Commit Changes**: Use conventional commits for your messages.
+
+   ```bash
+   git commit -m "feat: add new component feature"
    ```
-   [breaking] Update component props interface
+
+   **Commit Types:**
+   - `feat:` - New feature
+   - `fix:` - Bug fix
+   - `docs:` - Documentation changes
+   - `style:` - Code style changes (formatting)
+   - `refactor:` - Code refactoring
+   - `test:` - Adding or updating tests
+   - `chore:` - Maintenance tasks
+
+7. **Push Changes**: Push your changes to your fork.
+
+   ```bash
+   git push origin feature/your-feature-name
    ```
 
-### Testing Your Changes
+8. **Open a Pull Request**: Go to the original repository and click "New pull request". Fill out the PR template with details about your changes.
 
-Before submitting a PR, make sure to:
+### Development Commands
 
 ```bash
-# Install dependencies
-yarn install
+# Start development server
+yarn dev
 
-# Run linter
-yarn lint
+# Run Storybook
+yarn storybook
 
-# Run type checking
-yarn type-check
+# Build library
+yarn dist
 
 # Run tests
 yarn test
 
-# Build the package
-yarn build
+# Lint code
+yarn lint
+
+# Type check
+yarn typecheck
+
+# Check package size
+yarn pack:size
+```
+
+For more detailed information, please refer to the [CONTRIBUTING.md](./CONTRIBUTING.md) file.
+
+## Community & Support
+
+- 💬 [GitHub Discussions](https://github.com/kubit-ui/kubit-react-components/discussions) - Ask questions and share ideas
+- 🐛 [Issue Tracker](https://github.com/kubit-ui/kubit-react-components/issues) - Report bugs and request features
+- 📧 [Email](mailto:kubit@opendigitalservices.com) - Contact the team
+- 🐦 [Twitter](https://twitter.com/kubit_ui) - Follow for updates
+
+## Related Projects
+
+- [Kubit Design System](https://kubit-ui.com) - Complete design system documentation
+- [Kubit Figma Kit](https://figma.com/@kubit) - Design files and components
+
+## Changelog
+
+See [CHANGELOG.md](./CHANGELOG.md) for a list of changes and migration guides.
+
+## Migration Guides
+
+- [v1.x to v2.0.0](./MIGRATION_GUIDE.md) - Complete migration guide for major version
+
+## License
+
+This project is licensed under the **Apache License 2.0** - see the [LICENSE.md](./LICENSE.md) file for details.
+
+```
+Copyright 2025 Kubit
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
 ```
 
-### Getting Help
+---
+
+<div align="center">
+
+**Made with ❤️ by the Kubit Team**
 
-If you have questions about contributing or the automatic publishing system:
+[![GitHub](https://img.shields.io/badge/GitHub-kubit--ui-181717?style=for-the-badge&logo=github)](https://github.com/kubit-ui/kubit-react-components)
+[![NPM](https://img.shields.io/badge/NPM-%40kubit--ui--web%2Freact--components-CB3837?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@kubit-ui-web/react-components)
+[![Website](https://img.shields.io/badge/Website-kubit--ui.com-4A90E2?style=for-the-badge&logo=google-chrome&logoColor=white)](https://kubit-ui.com)
 
-- Check existing [GitHub Issues](https://github.com/kubit-ui/kubit-react-components/issues)
-- Review [GitHub Discussions](https://github.com/kubit-ui/kubit-react-components/discussions)
-- Read the full `CONTRIBUTING.md` file
+If you find this project useful, please consider giving it a ⭐️!
 
-Once your pull request has been submitted, a maintainer will review your changes and provide feedback. If everything looks good, your pull request will be merged and your changes will be automatically published to NPM!
+</div>

package/dist/cjs/_virtual/jsx-runtime.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var e=require("../node_modules/react/jsx-runtime.js").__require();exports.jsxRuntimeExports=e;

package/dist/cjs/_virtual/jsx-runtime2.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});exports.__module={exports:{}};

package/dist/cjs/_virtual/react-jsx-runtime.production.min.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});exports.__exports={};

package/dist/cjs/components/accordion/accordionControlled.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../_virtual/jsx-runtime.js"),r=require("react"),n=require("../../lib/hooks/useClassName/useClassName.js"),o=require("./accordionStandAlone.js"),s=require("./hooks/useAccordionContentOverflow.js"),t=require("./hooks/useAccordionInertContent.js"),a=r.forwardRef(({additionalClasses:a,children:i,expanded:d,variant:c,...l},u)=>{const C=n.useClassName({additionalClassNames:a,component:"ACCORDION",variant:c}),p=r.useRef(null);return r.useImperativeHandle(u,()=>p.current,[]),s.useAccordionContentOverflow({expanded:d,ref:p}),t.useAccordionInertContent({expanded:d,ref:p}),e.jsxRuntimeExports.jsx(o.AccordionStandAlone,{ref:p,cssClasses:C,expanded:d,...l,children:i})});exports.AccordionControlled=a;

package/dist/cjs/components/accordion/accordionStandAlone.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../_virtual/jsx-runtime.js"),e=require("react"),n=require("../../lib/components/customComponent/customComponent.js"),o=require("../../lib/utils/pickCustomAttributes/pickCustomAttributes.js"),s=require("./types/state.js"),r=e.forwardRef(({children:r,component:i="div",cssClasses:a,dataTestId:c="accordion",expanded:d,header:u,headerComponent:m="h3",onHeaderClick:p},l)=>{const x=`${`accordion-${e.useId().replace(/:/g,"")}`}-content`,j={"data-state":d?s.STATE.EXPANDED:s.STATE.COLLAPSED},C=o.pickCustomAttributes(j);return t.jsxRuntimeExports.jsx(n.CustomComponent,{ref:l,className:a?.accordion,component:i,"data-testid":c,...C,children:t.jsxRuntimeExports.jsxs("div",{children:[t.jsxRuntimeExports.jsx(n.CustomComponent,{className:a?.header,component:m,...C,children:t.jsxRuntimeExports.jsx("button",{"aria-controls":x,"aria-expanded":d,className:a?.headerbutton,"data-testid":`${c}-header`,type:"button",onClick:p,...C,children:u})}),t.jsxRuntimeExports.jsx("div",{className:a?.content,"data-kbt-accordion-content":!0,"data-testid":`${c}-content`,id:x,...C,children:t.jsxRuntimeExports.jsx("div",{className:a?.innercontent,"data-kbt-accordion-content-inner":!0,...C,children:r})})]})})});exports.AccordionStandAlone=r;

package/dist/cjs/components/accordion/accordionUnControlled.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../_virtual/jsx-runtime.js"),r=require("react"),o=require("./accordionControlled.js"),t=r.forwardRef(({children:t,defaultExpanded:n=!1,onExpandCollapse:d,...i},c)=>{const[l,s]=r.useState(n);return e.jsxRuntimeExports.jsx(o.AccordionControlled,{ref:c,...i,expanded:l,onHeaderClick:e=>{s(!l),d?.(!l,e)},children:t})});exports.Accordion=t;

package/dist/cjs/components/accordion/hooks/useAccordionContentOverflow.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react");exports.useAccordionContentOverflow=({expanded:t,ref:n})=>{const r=e.useRef(t);e.useEffect(()=>{const e=n.current?.querySelector("[data-kbt-accordion-content]"),o=e?.querySelector("[data-kbt-accordion-content-inner]");if(e instanceof HTMLElement&&o instanceof HTMLElement){if(r.current===t){const n=t?"visible":"hidden";return e.style.overflow=n,void(o.style.overflow=n)}r.current=t,e.style.overflow="hidden",o.style.overflow="hidden"}},[t]),e.useEffect(()=>{const e=e=>{const t=n.current?.querySelector("[data-kbt-accordion-content]"),o=t?.querySelector("[data-kbt-accordion-content-inner]");t instanceof HTMLElement&&o instanceof HTMLElement&&e.target===t&&r.current&&(t.style.overflow="visible",o.style.overflow="visible")};return n.current?.addEventListener("transitionend",e),()=>{n.current?.removeEventListener("transitionend",e)}},[])};

package/dist/cjs/components/accordion/hooks/useAccordionInertContent.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react");exports.useAccordionInertContent=({expanded:t,ref:r})=>{e.useEffect(()=>{const e=r.current?.querySelector("[data-kbt-accordion-content]");e instanceof HTMLElement&&(t?e.removeAttribute("inert"):e.setAttribute("inert",""))},[t])};

package/dist/cjs/components/accordion/index.js

@@ -0,0 +1,4 @@
+const { AccordionControlled } = require('./accordionControlled.js');
+module.exports = { ...module.exports, AccordionControlled };
+const { Accordion } = require('./accordionUnControlled.js');
+module.exports = { ...module.exports, Accordion };

package/dist/cjs/components/accordion/types/state.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});exports.STATE={COLLAPSED:"collapsed",EXPANDED:"expanded"};

package/dist/cjs/components/avatar/avatar.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../_virtual/jsx-runtime.js"),i=require("react"),s=require("../../lib/hooks/useClassName/useClassName.js"),r=require("../../lib/provider/genericComponentsProvider/genericComponentsProvider.js"),t=require("./avatarStandAlone.js"),a=i.forwardRef(({additionalClasses:i,icon:a,image:n,initials:o,size:l,...u},m)=>{const{LINK:c}=r.useGenericComponents(),d=s.useClassName({additionalClassNames:i,component:"AVATAR",variant:l}),p=n?"with-images":o?"with-initials":"with-icon";return e.jsxRuntimeExports.jsx(t.AvatarStandAlone,{...u,ref:m,contentType:p,cssClasses:d,icon:a,image:n,initials:o,linkComponent:c})});exports.Avatar=a;

package/dist/cjs/components/avatar/avatarStandAlone.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../_virtual/jsx-runtime.js"),e=require("react"),s=require("../../lib/utils/pickCustomAttributes/pickCustomAttributes.js"),n=require("../../lib/components/customComponent/customComponent.js"),o=require("./fragments/drawContent.js"),a=e.forwardRef(({backgroundColor:e="color-default",contentType:a,cssClasses:i,dot:r,icon:u,image:c,initials:l,link:m,linkComponent:p="a",maxLengthInitials:d=2,onClick:C,...x},b)=>{const j={"data-background-type":e,"data-content-type":a},g=s.pickCustomAttributes({...x,...j}),k=c?{backgroundImage:`url(${c})`}:void 0;return m?t.jsxRuntimeExports.jsx(n.CustomComponent,{ref:b,className:i?.avatar,component:p,"data-testid":"avatar",style:k,...g,...m,children:t.jsxRuntimeExports.jsx(o.DrawContent,{contentType:a,cssClasses:i,customAttributes:j,dot:r,icon:u,initials:l,maxLengthInitials:d})}):t.jsxRuntimeExports.jsx(n.CustomComponent,{ref:b,className:i?.avatar,component:C?"button":"div","data-testid":"avatar",style:k,type:C&&"button",onClick:C,...g,children:t.jsxRuntimeExports.jsx(o.DrawContent,{contentType:a,cssClasses:i,customAttributes:j,dot:r,icon:u,initials:l,maxLengthInitials:d})})});exports.AvatarStandAlone=a;

package/dist/cjs/components/avatar/fragments/drawContent.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../../../_virtual/jsx-runtime.js"),e=require("../../dot/dot.js"),t=require("../../text/text.js"),r=require("../../../lib/components/elementOrIcon/elementOrIcon.js"),o=require("../../../lib/utils/process/processIcon/processIcon.js"),i=require("../../../lib/utils/process/processText/processText.js");exports.DrawContent=({contentType:n,cssClasses:c,customAttributes:x,dot:u,icon:l,initials:p,maxLengthInitials:a})=>s.jsxRuntimeExports.jsxs(s.jsxRuntimeExports.Fragment,{children:[!!u?.number&&s.jsxRuntimeExports.jsx("span",{className:c?.dot,children:s.jsxRuntimeExports.jsx(e.Dot,{...u})}),"with-icon"===n&&s.jsxRuntimeExports.jsx(r.ElementOrIcon,{className:c?.icon,customAttributes:x,...o.processIcon(l)}),"with-initials"===n&&s.jsxRuntimeExports.jsx(t.Text,{additionalClasses:{},"aria-hidden":!0,component:"span",customAttributes:x,...i.processText(p,a)})]});

package/dist/cjs/components/avatar/index.js

@@ -0,0 +1,2 @@
+const { Avatar } = require('./avatar.js');
+module.exports = { ...module.exports, Avatar };

package/dist/cjs/components/badge/badge.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../_virtual/jsx-runtime.js"),s=require("react"),a=require("../../lib/hooks/useClassName/useClassName.js"),t=require("./badgeStandAlone.js"),r=s.forwardRef(({additionalSizeClasses:r,additionalVariantClasses:n,hasDot:i=!0,onClick:o,size:l,variant:u,...c},d)=>{const[C,m]=s.useState(!1),g=a.useClassName({component:"BADGE",variant:u}),j=a.useClassName({component:"BADGE",variant:l});return e.jsxRuntimeExports.jsx(t.BadgeStandAlone,{...c,ref:d,active:C,cssSizeClasses:j,cssVariantClasses:g,hasDot:i,onBadgeBlur:e=>{e.currentTarget.contains(e.relatedTarget)||m(!1)},onClick:e=>{o?.(e),m(e=>!e)}})});exports.Badge=r;

package/dist/cjs/components/badge/badgeStandAlone.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../_virtual/jsx-runtime.js"),s=require("react"),t=require("../dot/dot.js"),r=require("../text/text.js"),i=require("../../lib/components/elementOrIcon/elementOrIcon.js"),o=require("../../lib/utils/pickCustomAttributes/pickCustomAttributes.js"),n=require("../../lib/utils/process/processIcon/processIcon.js"),a=require("../../lib/utils/process/processText/processText.js"),c=s.forwardRef(({active:c,ariaLiveText:l,cssSizeClasses:u,cssVariantClasses:x,dot:d,hasDot:p,icon:m,label:j,labelIcon:b,onBadgeBlur:R,onClick:E,role:C,...I},g)=>{const h=s.useRef(null),A=s.useRef(null),k={"data-active":!!c},q=o.pickCustomAttributes({...I,customAttributes:k}),v=o.pickCustomAttributes(k),f=q["data-testid"]||"badge";s.useImperativeHandle(g,()=>A.current,[]);const N=s.useCallback(e=>{R?.(e)},[R]),$=s.useCallback(e=>{E?.(e)},[E]);return e.jsxRuntimeExports.jsx("div",{ref:A,className:`${x?.badge} ${u?.badge}`,"data-testid":`${f}-container`,...v,children:e.jsxRuntimeExports.jsxs("button",{ref:h,className:x?.button,"data-testid":f,role:C,type:"button",onBlur:N,onClick:$,...q,children:[e.jsxRuntimeExports.jsxs("span",{className:x?.dotcontainer,children:[!!d&&!!p&&e.jsxRuntimeExports.jsx("span",{"aria-hidden":!0,className:x?.dot,children:e.jsxRuntimeExports.jsx(t.Dot,{...d})}),e.jsxRuntimeExports.jsx(i.ElementOrIcon,{className:`${x?.icon} ${u?.icon}`,...n.processIcon(m),customAttributes:k})]}),!!j&&e.jsxRuntimeExports.jsxs("span",{"aria-hidden":!0,className:x?.labelcontainer,children:[e.jsxRuntimeExports.jsx(r.Text,{additionalClasses:{text:`${u?.label} ${x?.label}`},component:"span",...a.processText(j),customAttributes:k}),e.jsxRuntimeExports.jsx(i.ElementOrIcon,{className:x?.labelicon,rotate:c?"180deg":"0deg",transitionDuration:"0.2s",...n.processIcon(b),customAttributes:k})]}),e.jsxRuntimeExports.jsx("screen-reader-only",{"aria-live":"polite",children:l})]})})});exports.BadgeStandAlone=c;

package/dist/cjs/components/badge/index.js

@@ -0,0 +1,2 @@
+const { Badge } = require('./badge.js');
+module.exports = { ...module.exports, Badge };

package/dist/cjs/components/breadcrumbs/breadcrumbs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../_virtual/jsx-runtime.js"),s=require("react"),r=require("../../lib/hooks/useClassName/useClassName.js"),a=require("./breadcrumbsStandAlone.js"),t=s.forwardRef(({additionalClasses:s,variant:t,...o},i)=>{const n=r.useClassName({additionalClassNames:s,component:"BREADCRUMBS",variant:t});return e.jsxRuntimeExports.jsx(a.BreadcrumbsStandAlone,{...o,ref:i,cssClasses:n})});exports.BreadCrumbs=t;

package/dist/cjs/components/breadcrumbs/breadcrumbsStandAlone.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../_virtual/jsx-runtime.js"),r=require("react"),s=require("../../lib/utils/pickCustomAttributes/pickCustomAttributes.js"),t=require("./components/crumbStandAlone/crumbStandAlone.js"),i=require("./hooks/useIsOverflow/useIsOverflow.js"),a=require("./utils/crumbMaxCharName/crumbMaxCharName.js"),u=r.forwardRef(({crumbs:r,cssClasses:u,dividerIcon:n,id:o,lastOneCrumbComponent:l,link:m,minCharLimit:c=20,...d},b)=>{const{innerRef:x,isOverflow:j}=i.useIsOverflow(),C=s.pickCustomAttributes(d),p=d["data-testid"]||"breadcrumbs";return e.jsxRuntimeExports.jsx("div",{...C,ref:b,"aria-label":void 0,"data-testid":p,id:o,children:e.jsxRuntimeExports.jsx("nav",{ref:x,"aria-label":d["aria-label"],children:e.jsxRuntimeExports.jsx("ol",{className:u?.breadcrumbs,children:r?.map((s,i)=>{const o=i+1===r.length;return e.jsxRuntimeExports.jsx(t.CrumbStandAlone,{crumb:a.crumbMaxCharName(s,c,j,o),cssClasses:u,"data-testid":`${p}-${i}`,dividerIcon:n,lastCrumb:o,lastOneCrumbComponent:l,link:m},s.name)})})})})});exports.BreadcrumbsStandAlone=u;

package/dist/cjs/components/breadcrumbs/components/crumbStandAlone/crumbStandAlone.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../../_virtual/jsx-runtime.js"),t=require("../../../link/link.js"),s=require("../../../text/text.js"),i=require("../../../../lib/components/elementOrIcon/elementOrIcon.js"),r=require("../../../../lib/hooks/useManageState/useManageState.js"),a=require("../../../../lib/types/states/states.js"),n=require("../../../../lib/utils/pickCustomAttributes/pickCustomAttributes.js");exports.CrumbStandAlone=({crumb:l,cssClasses:o,dividerIcon:u,lastCrumb:c,lastOneCrumbComponent:d="span",link:m,...x})=>{const{setRef:j}=r.useManageState({active:c,states:Object.values(a.STATES)}),b=n.pickCustomAttributes(x);return e.jsxRuntimeExports.jsxs("li",{ref:j,"aria-current":c?"page":void 0,className:o?.crumb,"data-testid":x["data-testid"],children:[!!c&&e.jsxRuntimeExports.jsx(s.Text,{additionalClasses:{text:o?.lastonecrumb},component:d,"data-testid":"last-breadcrumb",id:l.id,children:l.name}),!c&&e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[!!m&&e.jsxRuntimeExports.jsx("div",{className:o?.linkcontainer,children:e.jsxRuntimeExports.jsx(t.Link,{...b,action:"navigation",additionalTextClasses:{text:o?.link},"aria-label":l.ariaLabel,"data-testid":"breadcrumb-link",disabled:c,id:l.id,url:l.url,...m,onClick:e=>l.onClick?.(l.url,e),children:l.name})}),e.jsxRuntimeExports.jsx("div",{className:o?.icondividercontainer,children:e.jsxRuntimeExports.jsx(i.ElementOrIcon,{className:o?.icondivider,...u})})]})]})};

package/dist/cjs/components/breadcrumbs/hooks/useIsOverflow/useIsOverflow.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react");exports.useIsOverflow=()=>{const[t,r]=e.useState(!1),n=e.useRef(null);return e.useEffect(()=>{const e=n.current;if(!e)return()=>null;const t=()=>{const t=e.offsetWidth>window.innerWidth;r(t)};return t(),window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)},[]),{innerRef:n,isOverflow:t}};

package/dist/cjs/components/breadcrumbs/index.js

@@ -0,0 +1,2 @@
+const { BreadCrumbs } = require('./breadcrumbs.js');
+module.exports = { ...module.exports, BreadCrumbs };

package/dist/cjs/components/breadcrumbs/utils/crumbMaxCharName/crumbMaxCharName.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),exports.crumbMaxCharName=function(e,t,n,r){const a=!r||r&&n;return e.name.length>t&&a?{...e,name:e.name.slice(0,t)+"..."}:e};