@rarui/components 1.30.1 → 1.30.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rarui/components",
-  "version": "1.30.1",
+  "version": "1.30.3",
   "license": "MIT",
   "main": "dist/index.js",
   "type": "module",
@@ -32,7 +32,7 @@
   "dependencies": {
     "@lit/context": "^1.1.6",
     "@rarui/icons": "^1.3.0",
-    "@rarui/styles": "^3.2.2",
+    "@rarui/styles": "^3.2.3",
     "@rarui/typings": "^2.4.0"
   },
   "devDependencies": {

package/src/exhibition/Avatar/README.md

@@ -1,15 +0,0 @@
-# `@rarui/avatar`
-
-The Avatar component is typically used to display user profile pictures.
-
-## Installation
-
-```sh
-$ yarn add @rarui/avatar
-# or
-$ npm install @rarui/avatar
-```
-
-## Usage
-
-View docs [here]().

package/src/exhibition/Badge/README.md

@@ -1,15 +0,0 @@
-# `@rarui/text`
-
-Text is a basic component that allows us to write blocks of text and give it formatting to use within other components, sections and pages of our application or website.
-
-## Installation
-
-```sh
-$ yarn add @rarui/text
-# or
-$ npm install @rarui/text
-```
-
-## Usage
-
-View docs [here]().

package/src/exhibition/Divider/README.md

@@ -1,15 +0,0 @@
-# `@rarui/divider`
-
-A Divider is a thin line used to separate or group content into lists and layouts.
-
-## Installation
-
-```sh
-$ yarn add @rarui/divider
-# or
-$ npm install @rarui/divider
-```
-
-## Usage
-
-View docs [here]().

package/src/exhibition/Icon/README.md

@@ -1,15 +0,0 @@
-# `@rarui/icon`
-
-Icons are used to visually communicate core parts of the product and available actions. They can act as wayfinding tools to help merchants more easily understand where they are in the product, and common interaction patterns that are available.
-
-## Installation
-
-```sh
-$ yarn add @rarui/icon
-# or
-$ npm install @rarui/icon
-```
-
-## Usage
-
-View docs [here]().

package/src/exhibition/Label/README.md

@@ -1,15 +0,0 @@
-# `@rarui/label`
-
-The label component allows us to name elements within a form.
-
-## Installation
-
-```sh
-$ yarn add @rarui/label
-# or
-$ npm install @rarui/label
-```
-
-## Usage
-
-View docs [here]().

package/src/exhibition/Stepper/README.md

@@ -1,15 +0,0 @@
-# `@rarui/stepper`
-
-The Stepper component facilitates the sequential navigation of multi-step forms by visually representing each step's progression.
-
-## Installation
-
-```sh
-$ yarn add @rarui/stepper
-# or
-$ npm install @rarui/stepper
-```
-
-## Usage
-
-View docs [here]().

package/src/exhibition/Text/README.md

@@ -1,15 +0,0 @@
-# `@rarui/text`
-
-Text is a basic component that allows us to write blocks of text and give it formatting to use within other components, sections and pages of our application or website.
-
-## Installation
-
-```sh
-$ yarn add @rarui/text
-# or
-$ npm install @rarui/text
-```
-
-## Usage
-
-View docs [here]().

package/src/exhibition/Title/README.md

@@ -1,15 +0,0 @@
-# `@rarui/title`
-
-Tilte is a basic component that allows you to give titles and more hierarchy to blocks of text for sections or header components.
-
-## Installation
-
-```sh
-$ yarn add @rarui/title
-# or
-$ npm install @rarui/title
-```
-
-## Usage
-
-View docs [here]().

package/src/exhibition/Tooltip/README.md

@@ -1,15 +0,0 @@
-# `@rarui/tooltip`
-
-Tooltip are informative, specific, and action -oriented text labels that provide contextual support.
-
-## Installation
-
-```sh
-$ yarn add @rarui/tooltip
-# or
-$ npm install @rarui/tooltip
-```
-
-## Usage
-
-View docs [here]().

package/src/feedback/Progress/README.md

@@ -1,15 +0,0 @@
-# `@rarui/progress`
-
-Progress indicators express an unspecified waiting time or display the duration of a process.
-
-## Installation
-
-```sh
-$ yarn add @rarui/progress
-# or
-$ npm install @rarui/progress
-```
-
-## Usage
-
-View docs [here]().

package/src/feedback/Skeleton/README.md

@@ -1,15 +0,0 @@
-# `@rarui/skeleton`
-
-The Skeleton component allows us to visually communicate the loading of other components.
-
-## Installation
-
-```sh
-$ yarn add @rarui/skeleton
-# or
-$ npm install @rarui/skeleton
-```
-
-## Usage
-
-View docs [here]().

package/src/feedback/Status/README.md

@@ -1,15 +0,0 @@
-# `@rarui/status`
-
-Status are used to indicate the current state of a process.
-
-## Installation
-
-```sh
-$ yarn add @rarui/status
-# or
-$ npm install @rarui/status
-```
-
-## Usage
-
-View docs [here]().

package/src/input/Button/README.md

@@ -1,15 +0,0 @@
-# `@rarui/button`
-
-The Button component allows us to initiate actions, make state or page changes.
-
-## Installation
-
-```sh
-$ yarn add @rarui/button
-# or
-$ npm install @rarui/button
-```
-
-## Usage
-
-View docs [here]().

package/src/input/Checkbox/README.md

@@ -1,15 +0,0 @@
-# `@rarui/checkbox`
-
-The Checkbox allows users to select one or more items from a set and can be used to enable or disable an option.
-
-## Installation
-
-```sh
-$ yarn add @rarui/checkbox
-# or
-$ npm install @rarui/checkbox
-```
-
-## Usage
-
-View docs [here]().

package/src/input/Chip/README.md

@@ -1,15 +0,0 @@
-# `@rarui/chip`
-
-Chip is a small component used to make selections, filter content, or trigger actions.
-
-## Installation
-
-```sh
-$ yarn add @rarui/chip
-# or
-$ npm install @rarui/chip
-```
-
-## Usage
-
-View docs [here]().

package/src/input/Dropdown/README.md

@@ -1,15 +0,0 @@
-# `@rarui/dropdown`
-
-Dropdown are informative, specific, and action -oriented text labels that provide contextual support.
-
-## Installation
-
-```sh
-$ yarn add @rarui/dropdown
-# or
-$ npm install @rarui/dropdown
-```
-
-## Usage
-
-View docs [here]().

package/src/input/IconButton/README.md

@@ -1,15 +0,0 @@
-# `@rarui/icon-button`
-
-The IconButton component allows us to initiate actions, make state or page changes.
-
-## Installation
-
-```sh
-$ yarn add @rarui/icon-button
-# or
-$ npm install @rarui/icon-button
-```
-
-## Usage
-
-View docs [here]().

package/src/input/Input/README.md

@@ -1,44 +0,0 @@
-# `@rarui/input`
-
-The Input component provides text input functionality with support for leading elements, different sizes, appearances, and specialized variants like password and search inputs.
-
-## Installation
-
-```sh
-$ yarn add @rarui/input
-# or
-$ npm install @rarui/input
-```
-
-## Usage
-
-### Basic Input
-```html
-<rarui-input placeholder="Digite seu nome"></rarui-input>
-```
-
-### Input with Leading Elements
-```html
-<rarui-input placeholder="Digite seu nome">
-  <rarui-icon slot="leading-start" name="user_filled"></rarui-icon>
-  <rarui-icon slot="leading-end" name="check"></rarui-icon>
-</rarui-input>
-```
-
-### Password Input
-```html
-<rarui-input-password placeholder="Digite sua senha"></rarui-input-password>
-```
-
-### Search Input
-```html
-<rarui-input-search placeholder="Buscar..."></rarui-input-search>
-```
-
-## Components
-
-- `rarui-input` - Base input component with slot support
-- `rarui-input-password` - Password input with show/hide toggle
-- `rarui-input-search` - Search input with built-in search icon
-
-View docs [here]().

package/src/input/RadioButton/README.md

@@ -1,15 +0,0 @@
-# `@rarui/radio-button`
-
-The Radio Button allows users to select an option from a set. They are a selection control that usually appears when users are asked to make decisions or select an option from options.
-
-## Installation
-
-```sh
-$ yarn add @rarui/radio-button
-# or
-$ npm install @rarui/radio-button
-```
-
-## Usage
-
-View docs [here]().

package/src/input/Select/README.md

@@ -1,13 +0,0 @@
-# Select
-
-Select component for choosing options from a dropdown menu with support for single and multiple selection.
-
-## Features
-
-- **Single Selection**: Choose one option from the list
-- **Multiple Selection**: Choose multiple options with checkboxes  
-- **Custom Content**: Support for slot-based custom content and filtering
-- **Accessibility**: Full keyboard navigation with ESC key support
-- **Controlled Behavior**: Uses internal web components (Dropdown, Checkbox, Text, Box, Chip, Icon)
-
-See [complete documentation](https://rarui.rarolabs.com.br/docs/components-web-components/input/select) for more details.

package/src/input/Textarea/README.md

@@ -1,15 +0,0 @@
-# `@rarui/textarea`
-
-Textarea is a basic component that allows us to write blocks of text and give it formatting to use within other components, sections and pages of our application or website.
-
-## Installation
-
-```sh
-$ yarn add @rarui/textarea
-# or
-$ npm install @rarui/textarea
-```
-
-## Usage
-
-View docs [here]().

package/src/input/Toggle/README.md

@@ -1,15 +0,0 @@
-# `@rarui/toggle`
-
-Toggle switches enable or disable the state of a single item.
-
-## Installation
-
-```sh
-$ yarn add @rarui/toggle
-# or
-$ npm install @rarui/toggle
-```
-
-## Usage
-
-View docs [here]().

package/src/layout/Box/README.md

@@ -1,15 +0,0 @@
-# `@rarui/box`
-
-A low-level utility component that accepts styled system props to enable custom theme-aware styling
-
-## Installation
-
-```sh
-$ yarn add @rarui/box
-# or
-$ npm install @rarui/box
-```
-
-## Usage
-
-View docs [here]().

package/src/layout/Sidebar/README.md

@@ -1,109 +0,0 @@
-# Rarui Sidebar
-
-A sidebar component that slides in from the left or right side of the screen, with intelligent positioning for responsive behavior.
-
-## Installation
-
-```bash
-npm install @rarui/sidebar
-# or
-yarn add @rarui/sidebar
-```
-
-## Usage
-
-```html
-<rarui-sidebar open="true" position="right" max-width="375px" padding="$small">
-  <div>Your sidebar content here</div>
-</rarui-sidebar>
-```
-
-## Features
-
-- ✨ **Floating-UI Integration**: Intelligent positioning with automatic viewport adjustments using floating-ui
-- 📱 **Responsive**: Adapts to different screen sizes automatically
-- 🎭 **CSS Transitions**: Smooth slide animations with proper transition support
-- ♿ **Accessible**: Full keyboard navigation and screen reader support
-- 🎯 **Position Control**: Left or right positioning options
-- 🔒 **Focus Management**: Automatic focus trapping and restoration
-- 🎨 **Themeable**: Works with Rarui design tokens
-
-## Properties
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `open` | `boolean` | `false` | Whether the sidebar is open or not |
-| `position` | `'left' \| 'right'` | `'right'` | The position of the sidebar |
-| `max-width` | `string` | `'375px'` | Maximum width of the sidebar |
-| `padding` | `string` | `'$small'` | Padding inside the sidebar |
-| `portal-id` | `string` | - | ID of the portal element for rendering |
-
-> **Note**: Properties inherit from `SidebarProps` and are automatically converted from camelCase to kebab-case for web component attributes (e.g., `maxWidth` → `max-width`, `portalId` → `portal-id`).
-
-## Events
-
-| Event | Detail | Description |
-|-------|--------|-------------|
-| `sidebar-open-changed` | `{ open: boolean }` | Dispatched when the sidebar open state changes |
-
-## Examples
-
-### Basic Sidebar
-
-```html
-<rarui-sidebar open="true">
-  <div>Basic sidebar content</div>
-</rarui-sidebar>
-```
-
-### Left Positioned Sidebar
-
-```html
-<rarui-sidebar open="true" position="left" max-width="300px">
-  <nav>
-    <ul>
-      <li>Home</li>
-      <li>About</li>
-      <li>Contact</li>
-    </ul>
-  </nav>
-</rarui-sidebar>
-```
-
-### Custom Width and Padding
-
-```html
-<rarui-sidebar open="true" max-width="500px" padding="$large">
-  <div>Wide sidebar with custom padding</div>
-</rarui-sidebar>
-```
-
-## Differences from React Version
-
-### Enhanced Features
-- **Floating-UI Integration**: Unlike the React version that uses basic floating-ui hooks, the web component version uses advanced virtual references for optimal sidebar positioning
-- **Smooth Transitions**: Always renders allowing CSS transitions to work properly
-- **Automatic Viewport Adaptation**: Content automatically adjusts to viewport constraints using floating-ui middleware
-- **Better Performance**: Native web APIs with optimized floating-ui integration
-
-### Positioning Intelligence
-The web component version provides superior positioning capabilities:
-- Virtual reference system optimized for sidebar edges
-- Responsive width adjustments via floating-ui size middleware
-- Intelligent overflow prevention with shift middleware
-- Automatic repositioning on viewport changes
-
-## Browser Support
-
-This component works in all modern browsers that support:
-- Web Components
-- ES2017+ features
-- CSS Custom Properties
-
-## Development
-
-Built with:
-- **LitElement** for the component base
-- **Floating-UI** for advanced positioning with virtual references
-- **TypeScript** for type safety
-- **Rarui Design System** for styling

package/src/navigation/Breadcrumb/README.md

@@ -1,56 +0,0 @@
-# Breadcrumb
-
-O componente Breadcrumb permite a navegação hierárquica através de uma estrutura de páginas, indicando a localização atual do usuário e fornecendo links para as páginas anteriores.
-
-## Quando usar
-
-- Para mostrar a localização atual do usuário na hierarquia do site
-- Para permitir navegação rápida para níveis anteriores da estrutura
-- Em sistemas com estrutura hierárquica profunda (mais de 3 níveis)
-
-## Estrutura
-
-O componente é formado por:
-
-- `rarui-breadcrumb`: Container principal que gerencia a lógica de truncamento
-- `rarui-breadcrumb-item`: Item individual do breadcrumb
-
-## Uso básico
-
-```html
-<rarui-breadcrumb>
-  <rarui-breadcrumb-item href="/">Home</rarui-breadcrumb-item>
-  <rarui-breadcrumb-item href="/category">Category</rarui-breadcrumb-item>
-  <rarui-breadcrumb-item href="/subcategory">Subcategory</rarui-breadcrumb-item>
-  <rarui-breadcrumb-item active>Current Page</rarui-breadcrumb-item>
-</rarui-breadcrumb>
-```
-
-## Com truncamento
-
-```html
-<rarui-breadcrumb items-after-truncate="2">
-  <rarui-breadcrumb-item href="/">Home</rarui-breadcrumb-item>
-  <rarui-breadcrumb-item href="/level1">Level 1</rarui-breadcrumb-item>
-  <rarui-breadcrumb-item href="/level2">Level 2</rarui-breadcrumb-item>
-  <rarui-breadcrumb-item href="/level3">Level 3</rarui-breadcrumb-item>
-  <rarui-breadcrumb-item href="/level4">Level 4</rarui-breadcrumb-item>
-  <rarui-breadcrumb-item active>Current</rarui-breadcrumb-item>
-</rarui-breadcrumb>
-```
-
-## Com ícones
-
-```html
-<rarui-breadcrumb>
-  <rarui-breadcrumb-item href="/">
-    <rarui-icon slot="icon" name="home"></rarui-icon>
-    Home
-  </rarui-breadcrumb-item>
-  <rarui-breadcrumb-item href="/dashboard">
-    <rarui-icon slot="icon" name="dashboard"></rarui-icon>
-    Dashboard
-  </rarui-breadcrumb-item>
-  <rarui-breadcrumb-item active>Settings</rarui-breadcrumb-item>
-</rarui-breadcrumb>
-```

package/src/navigation/Link/README.md

@@ -1,15 +0,0 @@
-# `@rarui/link`
-
-The Link component allows us to navigate to external addresses.
-
-## Installation
-
-```sh
-$ yarn add @rarui/link
-# or
-$ npm install @rarui/link
-```
-
-## Usage
-
-View docs [here]().

package/src/navigation/Pagination/README.md

@@ -1,15 +0,0 @@
-# `@rarui/pagination`
-
-The pagination component allows the user to select a specific page in a page range.
-
-## Installation
-
-```sh
-$ yarn add @rarui/pagination
-# or
-$ npm install @rarui/pagination
-```
-
-## Usage
-
-View docs [here]().