@rarui/components 1.30.0 → 1.30.2

package/src/navigation/SideNavigation/README.md

@@ -1,87 +0,0 @@
-# `@rarui/side-navigation`
-
-The SideNavigation component provides collapsible navigation functionality with support for nested items, leading elements, and active states.
-
-## Installation
-
-```sh
-$ yarn add @rarui/side-navigation
-# or
-$ npm install @rarui/side-navigation
-```
-
-## Usage
-
-### Basic SideNavigation
-```html
-<rarui-side-navigation name="Dashboard" description="Main dashboard">
-  <rarui-side-navigation-item>Reports</rarui-side-navigation-item>
-  <rarui-side-navigation-item>Analytics</rarui-side-navigation-item>
-</rarui-side-navigation>
-```
-
-### SideNavigation with Leading Elements
-```html
-<rarui-side-navigation name="Settings" description="System configuration">
-  <!-- Custom icon at start -->
-  <rarui-icon slot="leading-start" name="folder-outlined" size="medium"></rarui-icon>
-  
-  <!-- Custom icon at end (replaces default arrow) -->
-  <rarui-icon slot="leading-end" name="chevron-down" size="medium"></rarui-icon>
-  
-  <!-- Nested items -->
-  <rarui-side-navigation-item>Profile</rarui-side-navigation-item>
-  <rarui-side-navigation-item>Permissions</rarui-side-navigation-item>
-</rarui-side-navigation>
-```
-
-### Active State
-```html
-<rarui-side-navigation name="Dashboard" active>
-  <rarui-side-navigation-item active>Current Page</rarui-side-navigation-item>
-  <rarui-side-navigation-item>Other Page</rarui-side-navigation-item>
-</rarui-side-navigation>
-```
-
-### Multi-level Navigation
-```html
-<rarui-side-navigation name="Administration">
-  <rarui-side-navigation-item level="0">Users</rarui-side-navigation-item>
-  <rarui-side-navigation-item level="1">Permissions</rarui-side-navigation-item>
-  <rarui-side-navigation-item level="1">Roles</rarui-side-navigation-item>
-</rarui-side-navigation>
-```
-
-## Components
-
-- `rarui-side-navigation` - Main navigation component with collapsible content
-- `rarui-side-navigation-item` - Individual navigation items with support for nesting levels
-
-## Slots
-
-### rarui-side-navigation
-- **Default slot**: Content for nested navigation items
-- **leading-start**: Content to display at the start (e.g., icons)
-- **leading-end**: Content to display at the end (e.g., custom icons)
-
-### rarui-side-navigation-item
-- **Default slot**: Content for the navigation item
-
-## Behavior
-
-### Arrow Icon
-- Navigation items **always display an arrow icon** by default
-- The arrow rotates between up/down states when toggling
-- Use `leading-end` slot to provide a custom icon that replaces the default arrow
-- Arrow shows `arrow-up` when expanded, `arrow-down` when collapsed
-
-### Boolean Attributes
-- Use `active` instead of `active="true"` for cleaner HTML
-- Use `disabled` instead of `disabled="true"` 
-- Supports string values like `active="false"` for dynamic binding
-
-## Events
-
-- `toggle` - Fired when the navigation item is toggled (opened/closed)
-
-View docs [here]().

package/src/navigation/Tabs/README.md

@@ -1,9 +0,0 @@
-# `@rarui/tabs`
-
-Tabs are used to switch between different display modes or pages.
-
-## Installation
-
-## Usage
-
-View docs [here]().

package/src/stylization/ThemeProvider/README.md

@@ -1,56 +0,0 @@
-# ThemeProvider Web Component
-
-Componente para gerenciamento global de temas na aplicação.
-
-## Instalação
-
-```bash
-npm install @rarui/theme-provider
-```
-
-## Uso Básico
-
-```html
-<rarui-theme-provider theme="dark">
-  <rarui-button>Botão com tema aplicado</rarui-button>
-</rarui-theme-provider>
-```
-
-## API Global
-
-```javascript
-// Alternar tema
-window.raruiTheme.setTheme('dark');
-
-// Obter tema atual
-const currentTheme = window.raruiTheme.getTheme();
-
-// Escutar mudanças de tema
-const unsubscribe = window.raruiTheme.subscribe((theme) => {
-  console.log('Tema mudou para:', theme);
-});
-
-// Evento global
-document.addEventListener('rarui-theme-change', (event) => {
-  console.log('Novo tema:', event.detail.theme);
-});
-```
-
-## Utilitários
-
-```javascript
-import { toggleTheme, isDarkTheme, onThemeChange } from '@rarui/theme-provider';
-
-// Alternar entre temas
-toggleTheme();
-
-// Verificar se está no tema escuro
-if (isDarkTheme()) {
-  console.log('Tema escuro ativo');
-}
-
-// Escutar mudanças
-const unsubscribe = onThemeChange((theme) => {
-  console.log('Tema atual:', theme);
-});
-```

package/src/surface/Accordion/README.md

@@ -1,93 +0,0 @@
-# Accordion
-
-The Accordion component displays a list of expandable sections that users can toggle open or closed. It provides an organized way to present large amounts of content in a compact format.
-
-## Installation
-
-```bash
-yarn add @rarui/accordion
-```
-
-## Usage
-
-```html
-<rarui-accordion selected-default="item-1">
-  <rarui-accordion-item index="item-1">
-    <rarui-accordion-header title="First Item" size="medium">
-    </rarui-accordion-header>
-    <rarui-accordion-body padding="base">
-      Content of the first accordion item.
-    </rarui-accordion-body>
-  </rarui-accordion-item>
-  
-  <rarui-accordion-item index="item-2">
-    <rarui-accordion-header title="Second Item" subtitle="With subtitle">
-    </rarui-accordion-header>
-    <rarui-accordion-body>
-      Content of the second accordion item.
-    </rarui-accordion-body>
-  </rarui-accordion-item>
-</rarui-accordion>
-```
-
-## Custom Content
-
-```html
-<rarui-accordion>
-  <rarui-accordion-item index="custom">
-    <rarui-accordion-header>
-      <my-icon slot="icon"></my-icon>
-      Custom header content
-    </rarui-accordion-header>
-    <rarui-accordion-body>
-      Custom body content
-    </rarui-accordion-body>
-  </rarui-accordion-item>
-</rarui-accordion>
-```
-
-## API
-
-### rarui-accordion
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `selected-default` | `string` | `""` | Index of the item that should be open by default |
-| `disabled` | `boolean` | `false` | Disables the entire accordion |
-
-### rarui-accordion-item
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `index` | `string` | `""` | Unique identifier for this item |
-
-### rarui-accordion-header
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `title` | `string` | `""` | Main title text |
-| `subtitle` | `string` | `""` | Secondary subtitle text |
-| `size` | `"small" \| "medium" \| "large"` | `"medium"` | Size variant |
-| `no-icon-toggle` | `boolean` | `false` | Hide the toggle arrow icon |
-| `disabled` | `boolean` | `false` | Disable this specific header |
-
-#### Slots
-- `icon` - Custom icon element
-- `default` - Custom header content (when not using title/subtitle)
-
-### rarui-accordion-body
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `padding` | `"none" \| "base"` | `"base"` | Internal padding of the body |
-
-#### Slots
-- `default` - Body content
-
-## Events
-
-### rarui-accordion
-
-| Event | Detail | Description |
-|-------|--------|-------------|
-| `accordion-change` | `{ selected: string }` | Fired when an item is expanded or collapsed |

package/src/surface/Banner/README.md

@@ -1,15 +0,0 @@
-# `@rarui/banner`
-
-The Banner component is used to display general messages for the user
-
-## Installation
-
-```sh
-$ yarn add @rarui/banner
-# or
-$ npm install @rarui/banner
-```
-
-## Usage
-
-View docs [here]().

package/src/surface/Card/README.md

@@ -1,15 +0,0 @@
-# `@rarui/checkbox`
-
-The Card component contains textual content, images, and actions about a topic.
-
-## Installation
-
-```sh
-$ yarn add @rarui/checkbox
-# or
-$ npm install @rarui/checkbox
-```
-
-## Usage
-
-View docs [here]().

package/src/surface/Modal/README.md

@@ -1,15 +0,0 @@
-# `@rarui/modal`
-
-The modal component provides a base for popovers, suspended forms, tutorials, or any other content above the UI main surface.
-
-## Installation
-
-```sh
-$ yarn add @rarui/modal
-# or
-$ npm install @rarui/modal
-```
-
-## Usage
-
-View docs [here]().

package/src/types/README.md

@@ -1,73 +0,0 @@
-# Web Components Type Utilities
-
-Shared TypeScript utilities for Rarui Web Components that automatically convert React component props to web component attributes with camelCase to kebab-case conversion.
-
-## Installation
-
-This package is part of the Rarui monorepo and is used internally by web components.
-
-```typescript
-import { WebComponentProperties } from "@rarui/web-components-types";
-```
-
-## Usage
-
-### Basic Usage
-
-```typescript
-import { SidebarProps } from "@rarui/typings";
-import { WebComponentProperties } from "@rarui/web-components-types";
-
-export type SidebarProperties = WebComponentProperties<
-  SidebarProps,
-  "onRemove" // Exclude callback properties
->;
-```
-
-### Available Types
-
-#### `WebComponentProperties<TReactProps, TExclude>`
-Main utility for creating web component properties from React props.
-
-- Converts camelCase to kebab-case
-- Excludes common React props (`children`, `className`, `style`, `ref`, `key`)
-- Allows additional exclusions
-
-#### `ExtendedWebComponentProperties<TReactProps, TExclude>`
-Extended version that also automatically excludes all callback properties (`onXxx`).
-
-#### `CamelToKebab<T>` and `CamelToKebabKeys<T>`
-Low-level utilities for string and object key conversion.
-
-### Conversion Examples
-
-| React Prop (camelCase) | Web Component Attribute (kebab-case) |
-|----------------------|-----------------------------------|
-| `maxWidth` | `max-width` |
-| `portalId` | `portal-id` |
-| `backgroundColor` | `background-color` |
-| `onRemove` | excluded (callback) |
-| `children` | excluded (React-only) |
-
-### Implementation Pattern
-
-```typescript
-// 1. Define types
-export type ComponentProperties = WebComponentProperties<
-  ReactComponentProps,
-  "specificCallbackToExclude"
->;
-
-// 2. Use in component
-@property({ type: String, attribute: "max-width" })
-maxWidth: ComponentProperties["max-width"] = "375px";
-```
-
-## Features
-
-- ✅ **Type Safety**: Full TypeScript support with IntelliSense
-- ✅ **Automatic Conversion**: camelCase → kebab-case
-- ✅ **Smart Exclusions**: Removes React-only properties
-- ✅ **Callback Handling**: Option to exclude callback properties
-- ✅ **Inheritance**: Inherit all properties from React components
-- ✅ **Extensible**: Easy to add custom exclusions