xertica-ui 2.2.1 → 2.4.0

package/docs/components/simple-map.md

@@ -1,51 +1,51 @@
-# SimpleMap
-
-A simplified wrapper for common map use cases where you only need a single marker and basic configuration.
-
----
-
-## Import
-
-```tsx
-import { SimpleMap } from 'xertica-ui';
-```
-
----
-
-## Usage
-
-### Map with Marker and Info
-
-```tsx
-<SimpleMap
-  center={{ lat: -23.5505, lng: -46.6333 }}
-  markerTitle="Head Office"
-  markerInfo="Paulista Avenue, 1000"
-  zoom={15}
-/>
-```
-
----
-
-## Props
-
-The `SimpleMap` component extends all non-advanced props from the base `<Map>` component.
-
-| Prop          | Type                           | Default      | Description                                                   |
-| ------------- | ------------------------------ | ------------ | ------------------------------------------------------------- |
-| `center`      | `{ lat: number, lng: number }` | _(required)_ | The coordinates where the map is centered.                    |
-| `address`     | `string`                       | —            | Shortcut for setting both the `markerTitle` and `markerInfo`. |
-| `markerTitle` | `string`                       | —            | The title tooltip of the marker pin.                          |
-| `markerInfo`  | `string`                       | —            | The HTML-safe string shown in the InfoWindow when clicked.    |
-| `showMarker`  | `boolean`                      | `true`       | Whether to display the location marker at the center.         |
-| `zoom`        | `number`                       | `15`         | Initial zoom level.                                           |
-| `height`      | `string`                       | `"350px"`    | The height of the map container.                              |
-
----
-
-## AI Rules
-
-> [!IMPORTANT]
->
-> - **Center Requirement**: Always provide a valid `center` object with `lat` and `lng`.
-> - **Simplicity first**: Use `SimpleMap` for 90% of business use cases (contact pages, single store locations). Use the base `Map` only if you need polygons, circles, or multiple dynamic markers.
+# SimpleMap
+
+A simplified wrapper for common map use cases where you only need a single marker and basic configuration.
+
+---
+
+## Import
+
+```tsx
+import { SimpleMap } from 'xertica-ui';
+```
+
+---
+
+## Usage
+
+### Map with Marker and Info
+
+```tsx
+<SimpleMap
+  center={{ lat: -23.5505, lng: -46.6333 }}
+  markerTitle="Head Office"
+  markerInfo="Paulista Avenue, 1000"
+  zoom={15}
+/>
+```
+
+---
+
+## Props
+
+The `SimpleMap` component extends all non-advanced props from the base `<Map>` component.
+
+| Prop          | Type                           | Default      | Description                                                   |
+| ------------- | ------------------------------ | ------------ | ------------------------------------------------------------- |
+| `center`      | `{ lat: number, lng: number }` | _(required)_ | The coordinates where the map is centered.                    |
+| `address`     | `string`                       | —            | Shortcut for setting both the `markerTitle` and `markerInfo`. |
+| `markerTitle` | `string`                       | —            | The title tooltip of the marker pin.                          |
+| `markerInfo`  | `string`                       | —            | The HTML-safe string shown in the InfoWindow when clicked.    |
+| `showMarker`  | `boolean`                      | `true`       | Whether to display the location marker at the center.         |
+| `zoom`        | `number`                       | `15`         | Initial zoom level.                                           |
+| `height`      | `string`                       | `"350px"`    | The height of the map container.                              |
+
+---
+
+## AI Rules
+
+> [!IMPORTANT]
+>
+> - **Center Requirement**: Always provide a valid `center` object with `lat` and `lng`.
+> - **Simplicity first**: Use `SimpleMap` for 90% of business use cases (contact pages, single store locations). Use the base `Map` only if you need polygons, circles, or multiple dynamic markers.

package/docs/components/skeleton.md

@@ -1,99 +1,99 @@
-# Skeleton
-
-## Overview
-
-A loading placeholder that mimics the shape and dimensions of content while it's being fetched. Use it to provide visual continuity and reduce perceived load time — never leave blank white space while content is loading.
-
----
-
-## When to Use
-
-- While data is being fetched asynchronously
-- As a content placeholder in cards, tables, and profile areas
-- For any content that takes more than ~300ms to appear
-
-## When NOT to Use
-
-- Full-page loading states — use a page-level skeleton layout instead of a single `Skeleton`.
-- For error states — show an `<Alert>` or `<Empty>` after failure.
-- Do not use spinner-only indicators when structural content (cards, tables) will appear — use Skeleton instead.
-
----
-
-## Props
-
-| Prop        | Type     | Description                                                                                     |
-| ----------- | -------- | ----------------------------------------------------------------------------------------------- |
-| `className` | `string` | **Required** — sets width, height, and shape. The component renders nothing visible without it. |
-
----
-
-## Examples
-
-### Card Loading Skeleton
-
-```tsx
-import { Skeleton, Card, CardContent, CardHeader } from 'xertica-ui/ui';
-
-<Card>
-  <CardHeader>
-    <Skeleton className="h-5 w-[200px]" />
-    <Skeleton className="h-4 w-[150px] mt-2" />
-  </CardHeader>
-  <CardContent className="space-y-3">
-    <Skeleton className="h-4 w-full" />
-    <Skeleton className="h-4 w-full" />
-    <Skeleton className="h-4 w-4/5" />
-  </CardContent>
-</Card>;
-```
-
-### Profile Skeleton
-
-```tsx
-<div className="flex items-center space-x-4">
-  <Skeleton className="h-12 w-12 rounded-full" />
-  <div className="space-y-2">
-    <Skeleton className="h-4 w-[200px]" />
-    <Skeleton className="h-4 w-[150px]" />
-  </div>
-</div>
-```
-
-### Table Row Skeletons
-
-```tsx
-{
-  isLoading
-    ? Array.from({ length: 5 }).map((_, i) => (
-        <TableRow key={i}>
-          <TableCell>
-            <Skeleton className="h-4 w-[100px]" />
-          </TableCell>
-          <TableCell>
-            <Skeleton className="h-4 w-[150px]" />
-          </TableCell>
-          <TableCell>
-            <Skeleton className="h-4 w-[80px]" />
-          </TableCell>
-        </TableRow>
-      ))
-    : records.map(record => <RecordRow key={record.id} record={record} />);
-}
-```
-
----
-
-## AI Rules
-
-- **Always specify dimensions** via `className` — `Skeleton` renders as a pulse animation box sized by what you give it.
-- For avatar/circle placeholders: `className="h-12 w-12 rounded-full"`.
-- For text lines: `className="h-4 w-full"` or any width fraction (`w-3/4`, `w-1/2`).
-- Always match the approximate shape of the content it replaces (same height, similar width).
-
----
-
-## Related Components
-
-- [`Empty`](./empty.md) — For zero-state views (after loading completes with no results)
-- [`Card`](./card.md) — Most common Skeleton context
+# Skeleton
+
+## Overview
+
+A loading placeholder that mimics the shape and dimensions of content while it's being fetched. Use it to provide visual continuity and reduce perceived load time — never leave blank white space while content is loading.
+
+---
+
+## When to Use
+
+- While data is being fetched asynchronously
+- As a content placeholder in cards, tables, and profile areas
+- For any content that takes more than ~300ms to appear
+
+## When NOT to Use
+
+- Full-page loading states — use a page-level skeleton layout instead of a single `Skeleton`.
+- For error states — show an `<Alert>` or `<Empty>` after failure.
+- Do not use spinner-only indicators when structural content (cards, tables) will appear — use Skeleton instead.
+
+---
+
+## Props
+
+| Prop        | Type     | Description                                                                                     |
+| ----------- | -------- | ----------------------------------------------------------------------------------------------- |
+| `className` | `string` | **Required** — sets width, height, and shape. The component renders nothing visible without it. |
+
+---
+
+## Examples
+
+### Card Loading Skeleton
+
+```tsx
+import { Skeleton, Card, CardContent, CardHeader } from 'xertica-ui/ui';
+
+<Card>
+  <CardHeader>
+    <Skeleton className="h-5 w-[200px]" />
+    <Skeleton className="h-4 w-[150px] mt-2" />
+  </CardHeader>
+  <CardContent className="space-y-3">
+    <Skeleton className="h-4 w-full" />
+    <Skeleton className="h-4 w-full" />
+    <Skeleton className="h-4 w-4/5" />
+  </CardContent>
+</Card>;
+```
+
+### Profile Skeleton
+
+```tsx
+<div className="flex items-center space-x-4">
+  <Skeleton className="h-12 w-12 rounded-full" />
+  <div className="space-y-2">
+    <Skeleton className="h-4 w-[200px]" />
+    <Skeleton className="h-4 w-[150px]" />
+  </div>
+</div>
+```
+
+### Table Row Skeletons
+
+```tsx
+{
+  isLoading
+    ? Array.from({ length: 5 }).map((_, i) => (
+        <TableRow key={i}>
+          <TableCell>
+            <Skeleton className="h-4 w-[100px]" />
+          </TableCell>
+          <TableCell>
+            <Skeleton className="h-4 w-[150px]" />
+          </TableCell>
+          <TableCell>
+            <Skeleton className="h-4 w-[80px]" />
+          </TableCell>
+        </TableRow>
+      ))
+    : records.map(record => <RecordRow key={record.id} record={record} />);
+}
+```
+
+---
+
+## AI Rules
+
+- **Always specify dimensions** via `className` — `Skeleton` renders as a pulse animation box sized by what you give it.
+- For avatar/circle placeholders: `className="h-12 w-12 rounded-full"`.
+- For text lines: `className="h-4 w-full"` or any width fraction (`w-3/4`, `w-1/2`).
+- Always match the approximate shape of the content it replaces (same height, similar width).
+
+---
+
+## Related Components
+
+- [`Empty`](./empty.md) — For zero-state views (after loading completes with no results)
+- [`Card`](./card.md) — Most common Skeleton context

package/docs/components/slider.md

@@ -1,84 +1,84 @@
-# Slider
-
-## Overview
-
-A range input control that lets users select a numeric value by dragging a thumb along a track. Used for quantity selectors, volume controls, percentage settings, and any value within a continuous range.
-
----
-
-## When to Use
-
-- Adjusting numeric values within a range (width, volume, brightness, percentage)
-- Budget or price range selectors
-- Settings with numeric ranges (font size, zoom level)
-
-## When NOT to Use
-
-- Exact numeric entry — use `<Input type="number">` instead.
-- Categorical selections — use `<RadioGroup>` or `<Select>`.
-
----
-
-## Props
-
-| Prop            | Type                         | Default | Description                           |
-| --------------- | ---------------------------- | ------- | ------------------------------------- |
-| `value`         | `number[]`                   | —       | Controlled value(s) — always an array |
-| `defaultValue`  | `number[]`                   | —       | Uncontrolled default                  |
-| `onValueChange` | `(values: number[]) => void` | —       | Change handler                        |
-| `min`           | `number`                     | `0`     | Minimum value                         |
-| `max`           | `number`                     | `100`   | Maximum value                         |
-| `step`          | `number`                     | `1`     | Increment step                        |
-| `disabled`      | `boolean`                    | `false` | Disables interaction                  |
-| `className`     | `string`                     | —       | Additional CSS classes                |
-
----
-
-## Examples
-
-### Basic Controlled
-
-```tsx
-import { Slider } from 'xertica-ui/ui';
-import { useState } from 'react';
-
-const [value, setValue] = useState([50]);
-
-<div className="space-y-2">
-  <div className="flex justify-between text-sm">
-    <span>Value</span>
-    <span>{value[0]}%</span>
-  </div>
-  <Slider value={value} onValueChange={setValue} min={0} max={100} step={1} />
-</div>;
-```
-
-### Sidebar Width Adjuster
-
-```tsx
-const { sidebarWidth, setSidebarWidth } = useLayout();
-
-<Slider
-  value={[sidebarWidth]}
-  onValueChange={([v]) => setSidebarWidth(v)}
-  min={200}
-  max={480}
-  step={8}
-/>;
-```
-
----
-
-## AI Rules
-
-- The `value` and `defaultValue` props are **always arrays** (`[50]`, not `50`) — even for single-thumb sliders.
-- Access the current value as `value[0]` for single-thumb sliders.
-- Always display the current value visually alongside the slider using a `<span>`.
-- Do not use `onChange` — use `onValueChange`.
-
----
-
-## Related Components
-
-- [`Input`](./input.md) — For exact numeric entry
-- [`Progress`](./progress.md) — For displaying a value without user interaction
+# Slider
+
+## Overview
+
+A range input control that lets users select a numeric value by dragging a thumb along a track. Used for quantity selectors, volume controls, percentage settings, and any value within a continuous range.
+
+---
+
+## When to Use
+
+- Adjusting numeric values within a range (width, volume, brightness, percentage)
+- Budget or price range selectors
+- Settings with numeric ranges (font size, zoom level)
+
+## When NOT to Use
+
+- Exact numeric entry — use `<Input type="number">` instead.
+- Categorical selections — use `<RadioGroup>` or `<Select>`.
+
+---
+
+## Props
+
+| Prop            | Type                         | Default | Description                           |
+| --------------- | ---------------------------- | ------- | ------------------------------------- |
+| `value`         | `number[]`                   | —       | Controlled value(s) — always an array |
+| `defaultValue`  | `number[]`                   | —       | Uncontrolled default                  |
+| `onValueChange` | `(values: number[]) => void` | —       | Change handler                        |
+| `min`           | `number`                     | `0`     | Minimum value                         |
+| `max`           | `number`                     | `100`   | Maximum value                         |
+| `step`          | `number`                     | `1`     | Increment step                        |
+| `disabled`      | `boolean`                    | `false` | Disables interaction                  |
+| `className`     | `string`                     | —       | Additional CSS classes                |
+
+---
+
+## Examples
+
+### Basic Controlled
+
+```tsx
+import { Slider } from 'xertica-ui/ui';
+import { useState } from 'react';
+
+const [value, setValue] = useState([50]);
+
+<div className="space-y-2">
+  <div className="flex justify-between text-sm">
+    <span>Value</span>
+    <span>{value[0]}%</span>
+  </div>
+  <Slider value={value} onValueChange={setValue} min={0} max={100} step={1} />
+</div>;
+```
+
+### Sidebar Width Adjuster
+
+```tsx
+const { sidebarWidth, setSidebarWidth } = useLayout();
+
+<Slider
+  value={[sidebarWidth]}
+  onValueChange={([v]) => setSidebarWidth(v)}
+  min={200}
+  max={480}
+  step={8}
+/>;
+```
+
+---
+
+## AI Rules
+
+- The `value` and `defaultValue` props are **always arrays** (`[50]`, not `50`) — even for single-thumb sliders.
+- Access the current value as `value[0]` for single-thumb sliders.
+- Always display the current value visually alongside the slider using a `<span>`.
+- Do not use `onChange` — use `onValueChange`.
+
+---
+
+## Related Components
+
+- [`Input`](./input.md) — For exact numeric entry
+- [`Progress`](./progress.md) — For displaying a value without user interaction