@juanitte/inoui 1.0.2 → 1.1.0

package/README.md

@@ -16,6 +16,8 @@ A modern, lightweight React component library with built-in theming support.
   - [useTheme Hook](#usetheme-hook)
   - [Color System](#color-system)
   - [Theme Tokens](#theme-tokens)
+- [Semantic DOM Styling](#semantic-dom-styling)
+  - [CSS Class Customization](#css-class-customization)
 - [Utils](#utils)
   - [DOM Utilities](#dom-utilities)
   - [Object Utilities](#object-utilities)
@@ -80,6 +82,7 @@ A modern, lightweight React component library with built-in theming support.
   - [TimePicker](#timepicker)
   - [Timeline](#timeline)
   - [Toggle](#toggle)
+  - [Tooltip](#tooltip)
   - [Tour](#tour)
   - [Transfer](#transfer)
   - [Tree](#tree)
@@ -87,7 +90,6 @@ A modern, lightweight React component library with built-in theming support.
   - [Upload](#upload)
   - [Waterfall](#waterfall)
   - [Watermark](#watermark)
-  - [Tooltip](#tooltip)
 
 ## Features
 
@@ -113,9 +115,10 @@ pnpm add @juanitte/inoui
 
 ## Quick Start
 
-Wrap your application with `ThemeProvider` and start using components:
+Import the stylesheet once in your app entry point, wrap your application with `ThemeProvider`, and start using components:
 
 ```tsx
+import '@juanitte/inoui/styles.css'
 import { ThemeProvider, Button, Tooltip } from '@juanitte/inoui'
 
 function App() {
@@ -404,6 +407,43 @@ For `className`, the component-level `className` prop and `classNames.root` are
 | Tooltip | `root`, `popup`, `arrow` |
 | Waterfall | `root`, `column`, `item` |
 
+### CSS Class Customization
+
+All components use [BEM](https://getbem.com/) class names with the `ino-` prefix, which you can target directly in your stylesheets.
+
+**Naming convention:**
+
+| Pattern | Example | Description |
+|---------|---------|-------------|
+| `ino-{block}` | `ino-btn` | Component root |
+| `ino-{block}--{modifier}` | `ino-btn--primary`, `ino-btn--sm` | Variant, size, or state |
+| `ino-{block}__{element}` | `ino-btn__icon` | Internal part |
+
+**Example — custom button styles:**
+
+```css
+/* Your stylesheet — loaded after ino-ui */
+.ino-btn--primary {
+  border-radius: 999px;
+}
+
+.ino-tag--sm {
+  font-size: 0.7rem;
+}
+```
+
+You can combine this with the `classNames` prop for scoped overrides:
+
+```tsx
+<Button classNames={{ root: 'my-btn' }}>Click</Button>
+```
+
+```css
+.my-btn {
+  border-radius: 999px;
+}
+```
+
 ---
 
 ## Utils
@@ -14530,188 +14570,441 @@ function ProductCatalog() {
 ---
 
 <details>
-<summary><strong>Tour</strong> - Step-by-step guided walkthrough with spotlight overlay</summary>
+<summary><strong>Tooltip</strong> - Lightweight hover tooltips with 12 placements and color presets</summary>
 
-### Tour
+### Tooltip
 
-`Tour` is a guided walkthrough component that highlights UI elements one by one using an SVG spotlight mask. It is ideal for onboarding flows, feature discovery, and interactive product demos. The popup card follows the highlighted element with 13 placement options, supports two visual themes, and offers full control over step navigation, indicators, and action buttons.
+A lightweight tooltip component for displaying additional information on hover or focus. Renders into a portal (`document.body`), supports 12 placements, auto-flip on viewport overflow, an optional arrow with `pointAtCenter` mode, and colorful presets.
+
+#### Import
 
 ```tsx
-import { Tour } from '@juanitte/inoui'
+import { Tooltip } from '@juanitte/inoui'
 ```
 
 #### Props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `steps` | `TourStepConfig[]` | — | Array of step configurations |
-| `open` | `boolean` | — | Whether the tour is visible (controlled) |
-| `current` | `number` | — | Active step index (controlled) |
-| `onChange` | `(current: number) => void` | — | Called on step change |
-| `onClose` | `() => void` | — | Called when the tour closes |
-| `onFinish` | `() => void` | — | Called when the last step's Next button is clicked |
-| `mask` | `boolean` | `true` | Show SVG spotlight mask |
-| `arrow` | `boolean` | `true` | Show arrow pointing at the target |
-| `type` | `TourType` | `'default'` | Card visual theme |
-| `placement` | `TourPlacement` | `'bottom'` | Default popup placement (overridden per step) |
-| `gap` | `{ offset?: number; radius?: number }` | `{ offset: 6, radius: 2 }` | Spotlight padding (px) and corner radius (px) |
-| `closeIcon` | `ReactNode \| false` | — | Custom close icon; `false` hides it entirely |
-| `disabledInteraction` | `boolean` | — | Block pointer events on the highlighted element |
-| `scrollIntoViewOptions` | `boolean \| ScrollIntoViewOptions` | `true` | Auto-scroll target into view; `true` uses `{ block: 'center', behavior: 'instant' }` |
-| `indicatorsRender` | `(current: number, total: number) => ReactNode` | — | Custom step indicator renderer |
-| `actionsRender` | `(actions: ReactNode, info: ActionsInfo) => ReactNode` | — | Custom action buttons renderer (replaces footer buttons) |
-| `zIndex` | `number` | `1001` | z-index for overlay and popup |
-| `className` | `string` | — | CSS class on the popup card |
-| `style` | `CSSProperties` | — | Inline style on the popup card |
-| `classNames` | `TourClassNames` | — | Semantic class names per slot |
-| `styles` | `TourStyles` | — | Semantic inline styles per slot |
-
-#### TourStepConfig
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `target` | `HTMLElement \| (() => HTMLElement \| null) \| null` | — | Element to highlight; `null` centers the popup |
-| `title` | `ReactNode` | — | Step title |
-| `description` | `ReactNode` | — | Step body text |
-| `cover` | `ReactNode` | — | Media content above the title (e.g. an image) |
-| `placement` | `TourPlacement` | inherited | Override placement for this step |
-| `arrow` | `boolean` | inherited | Override arrow visibility for this step |
-| `mask` | `boolean` | inherited | Override mask visibility for this step |
-| `type` | `TourType` | inherited | Override card theme for this step |
-| `nextButtonProps` | `{ children?: ReactNode; onClick?: () => void }` | — | Customize the Next / Finish button |
-| `prevButtonProps` | `{ children?: ReactNode; onClick?: () => void }` | — | Customize the Previous button |
-| `scrollIntoViewOptions` | `boolean \| ScrollIntoViewOptions` | inherited | Override scroll behavior for this step |
+| `content` | `ReactNode` | — | **Required.** Tooltip content |
+| `children` | `ReactNode` | — | **Required.** Trigger element |
+| `placement` | `TooltipPlacement` | `'top'` | Preferred placement — 12 options |
+| `position` | `TooltipPlacement` | — | **Deprecated.** Use `placement` instead |
+| `arrow` | `boolean \| { pointAtCenter: boolean }` | `true` | Show arrow; pass `{ pointAtCenter: true }` to center it on corner placements |
+| `color` | `string` | — | Preset color name or any CSS color — colorizes the tooltip background |
+| `autoAdjustOverflow` | `boolean` | `true` | Flip to the opposite side when the tooltip overflows the viewport |
+| `delay` | `number` | `200` | Delay before showing (ms) |
+| `disabled` | `boolean` | `false` | Disable tooltip |
+| `className` | `string` | — | Root CSS class |
+| `style` | `CSSProperties` | — | Root inline style |
+| `classNames` | `TooltipClassNames` | — | Semantic class names per slot |
+| `styles` | `TooltipStyles` | — | Semantic inline styles per slot |
 
-#### Types
+#### Type Definitions
 
 ```ts
-type TourPlacement =
-  | 'center'
+type TooltipPlacement =
   | 'top' | 'topLeft' | 'topRight'
   | 'bottom' | 'bottomLeft' | 'bottomRight'
   | 'left' | 'leftTop' | 'leftBottom'
   | 'right' | 'rightTop' | 'rightBottom'
 
-type TourType = 'default' | 'primary'
+type TooltipSemanticSlot = 'root' | 'popup' | 'arrow'
+type TooltipClassNames   = SemanticClassNames<TooltipSemanticSlot>
+type TooltipStyles       = SemanticStyles<TooltipSemanticSlot>
+```
 
-// actionsRender info argument
-interface ActionsInfo {
-  current: number
-  total: number
-  goTo: (step: number) => void
-  close: () => void
-}
+#### Placements
 
-// Semantic slots
-type TourSemanticSlot =
-  | 'root' | 'mask' | 'popup' | 'header'
-  | 'title' | 'description' | 'footer'
-  | 'arrow' | 'close' | 'cover' | 'indicators'
+All 12 placements relative to the trigger element:
 
-type TourClassNames = SemanticClassNames<TourSemanticSlot>
-type TourStyles     = SemanticStyles<TourSemanticSlot>
+```
+         topLeft   top   topRight
+  leftTop  ┌─────────────────┐  rightTop
+  left     │    trigger      │  right
+  leftBottom └─────────────────┘  rightBottom
+       bottomLeft  bottom  bottomRight
 ```
 
-#### Examples
+#### Preset Colors
 
-**1. Basic guided tour**
-```tsx
-import { useRef, useState } from 'react'
-import { Tour } from '@juanitte/inoui'
+| Name | Hex |
+|------|-----|
+| `'blue'` | `#1677ff` |
+| `'geekblue'` | `#2f54eb` |
+| `'purple'` | `#722ed1` |
+| `'cyan'` | `#13c2c2` |
+| `'green'` | `#52c41a` |
+| `'lime'` | `#a0d911` |
+| `'yellow'` | `#fadb14` |
+| `'gold'` | `#faad14` |
+| `'orange'` | `#fa8c16` |
+| `'volcano'` | `#fa541c` |
+| `'red'` | `#f5222d` |
+| `'pink'` / `'magenta'` | `#eb2f96` |
 
-function App() {
-  const btnRef  = useRef<HTMLButtonElement>(null)
-  const cardRef = useRef<HTMLDivElement>(null)
-  const [open, setOpen] = useState(false)
+Any other string is used as-is (hex, rgb, hsl…).
 
-  const steps = [
-    {
-      target: () => btnRef.current,
-      title: 'Create a new item',
-      description: 'Click here to start creating a new entry.',
-    },
-    {
-      target: () => cardRef.current,
-      title: 'Your results appear here',
-      description: 'This card shows the output of your actions.',
-      placement: 'right' as const,
-    },
-  ]
+#### Semantic DOM
 
-  return (
-    <>
-      <button ref={btnRef} onClick={() => {}}>New item</button>
-      <div ref={cardRef} style={{ marginTop: 24 }}>Result card</div>
-      <button onClick={() => setOpen(true)}>Start Tour</button>
+| Slot | Element | Description |
+|------|---------|-------------|
+| `root` | `<div>` | Inline wrapper around the trigger element |
+| `popup` | `<div>` | Tooltip popup — portaled to `document.body` |
+| `arrow` | `<div>` | Arrow pointing at the trigger |
 
-      <Tour
-        steps={steps}
-        open={open}
-        onClose={() => setOpen(false)}
-        onFinish={() => setOpen(false)}
-      />
-    </>
-  )
-}
-```
+#### Examples
+
+**1. Basic**
 
-**2. Primary theme**
 ```tsx
-<Tour
-  steps={steps}
-  open={open}
-  type="primary"
-  onClose={() => setOpen(false)}
-  onFinish={() => setOpen(false)}
-/>
+<Tooltip content="This is a tooltip">
+  <Button>Hover me</Button>
+</Tooltip>
 ```
 
-**3. No mask (transparent overlay)**
+---
+
+**2. All 12 placements**
+
 ```tsx
-<Tour steps={steps} open={open} mask={false} onClose={() => setOpen(false)} onFinish={() => setOpen(false)} />
+<Tooltip content="Top center"       placement="top">          <Button>top</Button>          </Tooltip>
+<Tooltip content="Top left"         placement="topLeft">      <Button>topLeft</Button>      </Tooltip>
+<Tooltip content="Top right"        placement="topRight">     <Button>topRight</Button>     </Tooltip>
+<Tooltip content="Bottom center"    placement="bottom">       <Button>bottom</Button>       </Tooltip>
+<Tooltip content="Bottom left"      placement="bottomLeft">   <Button>bottomLeft</Button>   </Tooltip>
+<Tooltip content="Bottom right"     placement="bottomRight">  <Button>bottomRight</Button>  </Tooltip>
+<Tooltip content="Left center"      placement="left">         <Button>left</Button>         </Tooltip>
+<Tooltip content="Left top"         placement="leftTop">      <Button>leftTop</Button>      </Tooltip>
+<Tooltip content="Left bottom"      placement="leftBottom">   <Button>leftBottom</Button>   </Tooltip>
+<Tooltip content="Right center"     placement="right">        <Button>right</Button>        </Tooltip>
+<Tooltip content="Right top"        placement="rightTop">     <Button>rightTop</Button>     </Tooltip>
+<Tooltip content="Right bottom"     placement="rightBottom">  <Button>rightBottom</Button>  </Tooltip>
 ```
 
-**4. Center placement — no target element**
+---
+
+**3. No arrow**
+
 ```tsx
-const steps = [
-  {
-    target: null,           // null → popup centers on the viewport
-    title: 'Welcome to the App',
-    description: 'This quick tour will walk you through the key features.',
-    placement: 'center' as const,
-  },
-]
+<Tooltip content="No arrow" arrow={false}>
+  <Button>Hover</Button>
+</Tooltip>
 ```
 
-**5. Per-step overrides**
-```tsx
-const steps = [
-  {
-    target: () => step1Ref.current,
-    title: 'Step 1 — Default',
-    description: 'Uses the global type and mask settings.',
-  },
-  {
-    target: () => step2Ref.current,
-    title: 'Step 2 — Primary',
-    description: 'This step overrides the card theme.',
-    type: 'primary' as const,
-    mask: false,
-    arrow: false,
-  },
-]
+---
 
-<Tour steps={steps} open={open} type="default" mask onClose={close} onFinish={close} />
+**4. Arrow pointing at center (corner placements)**
+
+```tsx
+<Tooltip content="Centered arrow" placement="topLeft" arrow={{ pointAtCenter: true }}>
+  <Button>topLeft + pointAtCenter</Button>
+</Tooltip>
 ```
 
-**6. Custom button labels per step**
+---
+
+**5. Preset color**
+
 ```tsx
-const steps = [
-  {
-    target: () => ref1.current,
-    title: 'Introduction',
-    nextButtonProps: { children: 'Get Started →' },
-  },
+<Tooltip content="Success action" color="green">
+  <Button>Green</Button>
+</Tooltip>
+
+<Tooltip content="Danger zone" color="red">
+  <Button>Red</Button>
+</Tooltip>
+
+<Tooltip content="Information" color="blue">
+  <Button>Blue</Button>
+</Tooltip>
+```
+
+---
+
+**6. Custom CSS color**
+
+```tsx
+<Tooltip content="Brand tooltip" color="#722ed1">
+  <Button>Custom purple</Button>
+</Tooltip>
+```
+
+---
+
+**7. Disable auto-flip**
+
+```tsx
+<Tooltip content="Always on top" placement="top" autoAdjustOverflow={false}>
+  <Button>No flip</Button>
+</Tooltip>
+```
+
+---
+
+**8. Custom delay**
+
+```tsx
+<Tooltip content="Instant" delay={0}>
+  <Button>No delay</Button>
+</Tooltip>
+
+<Tooltip content="Slow reveal" delay={800}>
+  <Button>800 ms delay</Button>
+</Tooltip>
+```
+
+---
+
+**9. Disabled**
+
+```tsx
+<Tooltip content="Won't show" disabled>
+  <Button>Disabled tooltip</Button>
+</Tooltip>
+```
+
+---
+
+**10. Rich content**
+
+```tsx
+<Tooltip
+  content={
+    <div>
+      <strong>Keyboard shortcut</strong>
+      <p style={{ margin: '0.25rem 0 0', opacity: 0.85 }}>⌘ + K to open command palette</p>
+    </div>
+  }
+  placement="bottom"
+>
+  <Button>Hover for shortcut</Button>
+</Tooltip>
+```
+
+---
+
+**11. Semantic style customization**
+
+```tsx
+<Tooltip
+  content="Styled tooltip"
+  styles={{
+    popup: { borderRadius: '0.75rem', fontSize: '0.75rem', padding: '0.375rem 0.625rem' },
+  }}
+>
+  <Button>Custom style</Button>
+</Tooltip>
+```
+
+---
+
+**12. Wrapping a disabled element**
+
+Disabled elements do not fire mouse events. Wrap them in a `<span>` so the Tooltip trigger receives events correctly.
+
+```tsx
+<Tooltip content="Button is disabled">
+  <span style={{ display: 'inline-flex' }}>
+    <Button disabled>Submit</Button>
+  </span>
+</Tooltip>
+```
+
+#### Accessibility
+
+- Shows on `mouseenter` and `focus`
+- Hides on `mouseleave` and `blur`
+- Popup has `role="tooltip"`
+- Repositions on scroll and window resize while visible
+
+</details>
+
+---
+
+<details>
+<summary><strong>Tour</strong> - Step-by-step guided walkthrough with spotlight overlay</summary>
+
+### Tour
+
+`Tour` is a guided walkthrough component that highlights UI elements one by one using an SVG spotlight mask. It is ideal for onboarding flows, feature discovery, and interactive product demos. The popup card follows the highlighted element with 13 placement options, supports two visual themes, and offers full control over step navigation, indicators, and action buttons.
+
+```tsx
+import { Tour } from '@juanitte/inoui'
+```
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `steps` | `TourStepConfig[]` | — | Array of step configurations |
+| `open` | `boolean` | — | Whether the tour is visible (controlled) |
+| `current` | `number` | — | Active step index (controlled) |
+| `onChange` | `(current: number) => void` | — | Called on step change |
+| `onClose` | `() => void` | — | Called when the tour closes |
+| `onFinish` | `() => void` | — | Called when the last step's Next button is clicked |
+| `mask` | `boolean` | `true` | Show SVG spotlight mask |
+| `arrow` | `boolean` | `true` | Show arrow pointing at the target |
+| `type` | `TourType` | `'default'` | Card visual theme |
+| `placement` | `TourPlacement` | `'bottom'` | Default popup placement (overridden per step) |
+| `gap` | `{ offset?: number; radius?: number }` | `{ offset: 6, radius: 2 }` | Spotlight padding (px) and corner radius (px) |
+| `closeIcon` | `ReactNode \| false` | — | Custom close icon; `false` hides it entirely |
+| `disabledInteraction` | `boolean` | — | Block pointer events on the highlighted element |
+| `scrollIntoViewOptions` | `boolean \| ScrollIntoViewOptions` | `true` | Auto-scroll target into view; `true` uses `{ block: 'center', behavior: 'instant' }` |
+| `indicatorsRender` | `(current: number, total: number) => ReactNode` | — | Custom step indicator renderer |
+| `actionsRender` | `(actions: ReactNode, info: ActionsInfo) => ReactNode` | — | Custom action buttons renderer (replaces footer buttons) |
+| `zIndex` | `number` | `1001` | z-index for overlay and popup |
+| `className` | `string` | — | CSS class on the popup card |
+| `style` | `CSSProperties` | — | Inline style on the popup card |
+| `classNames` | `TourClassNames` | — | Semantic class names per slot |
+| `styles` | `TourStyles` | — | Semantic inline styles per slot |
+
+#### TourStepConfig
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `target` | `HTMLElement \| (() => HTMLElement \| null) \| null` | — | Element to highlight; `null` centers the popup |
+| `title` | `ReactNode` | — | Step title |
+| `description` | `ReactNode` | — | Step body text |
+| `cover` | `ReactNode` | — | Media content above the title (e.g. an image) |
+| `placement` | `TourPlacement` | inherited | Override placement for this step |
+| `arrow` | `boolean` | inherited | Override arrow visibility for this step |
+| `mask` | `boolean` | inherited | Override mask visibility for this step |
+| `type` | `TourType` | inherited | Override card theme for this step |
+| `nextButtonProps` | `{ children?: ReactNode; onClick?: () => void }` | — | Customize the Next / Finish button |
+| `prevButtonProps` | `{ children?: ReactNode; onClick?: () => void }` | — | Customize the Previous button |
+| `scrollIntoViewOptions` | `boolean \| ScrollIntoViewOptions` | inherited | Override scroll behavior for this step |
+
+#### Types
+
+```ts
+type TourPlacement =
+  | 'center'
+  | 'top' | 'topLeft' | 'topRight'
+  | 'bottom' | 'bottomLeft' | 'bottomRight'
+  | 'left' | 'leftTop' | 'leftBottom'
+  | 'right' | 'rightTop' | 'rightBottom'
+
+type TourType = 'default' | 'primary'
+
+// actionsRender info argument
+interface ActionsInfo {
+  current: number
+  total: number
+  goTo: (step: number) => void
+  close: () => void
+}
+
+// Semantic slots
+type TourSemanticSlot =
+  | 'root' | 'mask' | 'popup' | 'header'
+  | 'title' | 'description' | 'footer'
+  | 'arrow' | 'close' | 'cover' | 'indicators'
+
+type TourClassNames = SemanticClassNames<TourSemanticSlot>
+type TourStyles     = SemanticStyles<TourSemanticSlot>
+```
+
+#### Examples
+
+**1. Basic guided tour**
+```tsx
+import { useRef, useState } from 'react'
+import { Tour } from '@juanitte/inoui'
+
+function App() {
+  const btnRef  = useRef<HTMLButtonElement>(null)
+  const cardRef = useRef<HTMLDivElement>(null)
+  const [open, setOpen] = useState(false)
+
+  const steps = [
+    {
+      target: () => btnRef.current,
+      title: 'Create a new item',
+      description: 'Click here to start creating a new entry.',
+    },
+    {
+      target: () => cardRef.current,
+      title: 'Your results appear here',
+      description: 'This card shows the output of your actions.',
+      placement: 'right' as const,
+    },
+  ]
+
+  return (
+    <>
+      <button ref={btnRef} onClick={() => {}}>New item</button>
+      <div ref={cardRef} style={{ marginTop: 24 }}>Result card</div>
+      <button onClick={() => setOpen(true)}>Start Tour</button>
+
+      <Tour
+        steps={steps}
+        open={open}
+        onClose={() => setOpen(false)}
+        onFinish={() => setOpen(false)}
+      />
+    </>
+  )
+}
+```
+
+**2. Primary theme**
+```tsx
+<Tour
+  steps={steps}
+  open={open}
+  type="primary"
+  onClose={() => setOpen(false)}
+  onFinish={() => setOpen(false)}
+/>
+```
+
+**3. No mask (transparent overlay)**
+```tsx
+<Tour steps={steps} open={open} mask={false} onClose={() => setOpen(false)} onFinish={() => setOpen(false)} />
+```
+
+**4. Center placement — no target element**
+```tsx
+const steps = [
+  {
+    target: null,           // null → popup centers on the viewport
+    title: 'Welcome to the App',
+    description: 'This quick tour will walk you through the key features.',
+    placement: 'center' as const,
+  },
+]
+```
+
+**5. Per-step overrides**
+```tsx
+const steps = [
+  {
+    target: () => step1Ref.current,
+    title: 'Step 1 — Default',
+    description: 'Uses the global type and mask settings.',
+  },
+  {
+    target: () => step2Ref.current,
+    title: 'Step 2 — Primary',
+    description: 'This step overrides the card theme.',
+    type: 'primary' as const,
+    mask: false,
+    arrow: false,
+  },
+]
+
+<Tour steps={steps} open={open} type="default" mask onClose={close} onFinish={close} />
+```
+
+**6. Custom button labels per step**
+```tsx
+const steps = [
+  {
+    target: () => ref1.current,
+    title: 'Introduction',
+    nextButtonProps: { children: 'Get Started →' },
+  },
   {
     target: () => ref2.current,
     title: 'Final Step',
@@ -16586,259 +16879,6 @@ type WatermarkStyles       = SemanticStyles<WatermarkSemanticSlot>
 
 ---
 
-<details>
-<summary><strong>Tooltip</strong> - Lightweight hover tooltips with 12 placements and color presets</summary>
-
-### Tooltip
-
-A lightweight tooltip component for displaying additional information on hover or focus. Renders into a portal (`document.body`), supports 12 placements, auto-flip on viewport overflow, an optional arrow with `pointAtCenter` mode, and colorful presets.
-
-#### Import
-
-```tsx
-import { Tooltip } from '@juanitte/inoui'
-```
-
-#### Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `content` | `ReactNode` | — | **Required.** Tooltip content |
-| `children` | `ReactNode` | — | **Required.** Trigger element |
-| `placement` | `TooltipPlacement` | `'top'` | Preferred placement — 12 options |
-| `position` | `TooltipPlacement` | — | **Deprecated.** Use `placement` instead |
-| `arrow` | `boolean \| { pointAtCenter: boolean }` | `true` | Show arrow; pass `{ pointAtCenter: true }` to center it on corner placements |
-| `color` | `string` | — | Preset color name or any CSS color — colorizes the tooltip background |
-| `autoAdjustOverflow` | `boolean` | `true` | Flip to the opposite side when the tooltip overflows the viewport |
-| `delay` | `number` | `200` | Delay before showing (ms) |
-| `disabled` | `boolean` | `false` | Disable tooltip |
-| `className` | `string` | — | Root CSS class |
-| `style` | `CSSProperties` | — | Root inline style |
-| `classNames` | `TooltipClassNames` | — | Semantic class names per slot |
-| `styles` | `TooltipStyles` | — | Semantic inline styles per slot |
-
-#### Type Definitions
-
-```ts
-type TooltipPlacement =
-  | 'top' | 'topLeft' | 'topRight'
-  | 'bottom' | 'bottomLeft' | 'bottomRight'
-  | 'left' | 'leftTop' | 'leftBottom'
-  | 'right' | 'rightTop' | 'rightBottom'
-
-type TooltipSemanticSlot = 'root' | 'popup' | 'arrow'
-type TooltipClassNames   = SemanticClassNames<TooltipSemanticSlot>
-type TooltipStyles       = SemanticStyles<TooltipSemanticSlot>
-```
-
-#### Placements
-
-All 12 placements relative to the trigger element:
-
-```
-         topLeft   top   topRight
-  leftTop  ┌─────────────────┐  rightTop
-  left     │    trigger      │  right
-  leftBottom └─────────────────┘  rightBottom
-       bottomLeft  bottom  bottomRight
-```
-
-#### Preset Colors
-
-| Name | Hex |
-|------|-----|
-| `'blue'` | `#1677ff` |
-| `'geekblue'` | `#2f54eb` |
-| `'purple'` | `#722ed1` |
-| `'cyan'` | `#13c2c2` |
-| `'green'` | `#52c41a` |
-| `'lime'` | `#a0d911` |
-| `'yellow'` | `#fadb14` |
-| `'gold'` | `#faad14` |
-| `'orange'` | `#fa8c16` |
-| `'volcano'` | `#fa541c` |
-| `'red'` | `#f5222d` |
-| `'pink'` / `'magenta'` | `#eb2f96` |
-
-Any other string is used as-is (hex, rgb, hsl…).
-
-#### Semantic DOM
-
-| Slot | Element | Description |
-|------|---------|-------------|
-| `root` | `<div>` | Inline wrapper around the trigger element |
-| `popup` | `<div>` | Tooltip popup — portaled to `document.body` |
-| `arrow` | `<div>` | Arrow pointing at the trigger |
-
-#### Examples
-
-**1. Basic**
-
-```tsx
-<Tooltip content="This is a tooltip">
-  <Button>Hover me</Button>
-</Tooltip>
-```
-
----
-
-**2. All 12 placements**
-
-```tsx
-<Tooltip content="Top center"       placement="top">          <Button>top</Button>          </Tooltip>
-<Tooltip content="Top left"         placement="topLeft">      <Button>topLeft</Button>      </Tooltip>
-<Tooltip content="Top right"        placement="topRight">     <Button>topRight</Button>     </Tooltip>
-<Tooltip content="Bottom center"    placement="bottom">       <Button>bottom</Button>       </Tooltip>
-<Tooltip content="Bottom left"      placement="bottomLeft">   <Button>bottomLeft</Button>   </Tooltip>
-<Tooltip content="Bottom right"     placement="bottomRight">  <Button>bottomRight</Button>  </Tooltip>
-<Tooltip content="Left center"      placement="left">         <Button>left</Button>         </Tooltip>
-<Tooltip content="Left top"         placement="leftTop">      <Button>leftTop</Button>      </Tooltip>
-<Tooltip content="Left bottom"      placement="leftBottom">   <Button>leftBottom</Button>   </Tooltip>
-<Tooltip content="Right center"     placement="right">        <Button>right</Button>        </Tooltip>
-<Tooltip content="Right top"        placement="rightTop">     <Button>rightTop</Button>     </Tooltip>
-<Tooltip content="Right bottom"     placement="rightBottom">  <Button>rightBottom</Button>  </Tooltip>
-```
-
----
-
-**3. No arrow**
-
-```tsx
-<Tooltip content="No arrow" arrow={false}>
-  <Button>Hover</Button>
-</Tooltip>
-```
-
----
-
-**4. Arrow pointing at center (corner placements)**
-
-```tsx
-<Tooltip content="Centered arrow" placement="topLeft" arrow={{ pointAtCenter: true }}>
-  <Button>topLeft + pointAtCenter</Button>
-</Tooltip>
-```
-
----
-
-**5. Preset color**
-
-```tsx
-<Tooltip content="Success action" color="green">
-  <Button>Green</Button>
-</Tooltip>
-
-<Tooltip content="Danger zone" color="red">
-  <Button>Red</Button>
-</Tooltip>
-
-<Tooltip content="Information" color="blue">
-  <Button>Blue</Button>
-</Tooltip>
-```
-
----
-
-**6. Custom CSS color**
-
-```tsx
-<Tooltip content="Brand tooltip" color="#722ed1">
-  <Button>Custom purple</Button>
-</Tooltip>
-```
-
----
-
-**7. Disable auto-flip**
-
-```tsx
-<Tooltip content="Always on top" placement="top" autoAdjustOverflow={false}>
-  <Button>No flip</Button>
-</Tooltip>
-```
-
----
-
-**8. Custom delay**
-
-```tsx
-<Tooltip content="Instant" delay={0}>
-  <Button>No delay</Button>
-</Tooltip>
-
-<Tooltip content="Slow reveal" delay={800}>
-  <Button>800 ms delay</Button>
-</Tooltip>
-```
-
----
-
-**9. Disabled**
-
-```tsx
-<Tooltip content="Won't show" disabled>
-  <Button>Disabled tooltip</Button>
-</Tooltip>
-```
-
----
-
-**10. Rich content**
-
-```tsx
-<Tooltip
-  content={
-    <div>
-      <strong>Keyboard shortcut</strong>
-      <p style={{ margin: '0.25rem 0 0', opacity: 0.85 }}>⌘ + K to open command palette</p>
-    </div>
-  }
-  placement="bottom"
->
-  <Button>Hover for shortcut</Button>
-</Tooltip>
-```
-
----
-
-**11. Semantic style customization**
-
-```tsx
-<Tooltip
-  content="Styled tooltip"
-  styles={{
-    popup: { borderRadius: '0.75rem', fontSize: '0.75rem', padding: '0.375rem 0.625rem' },
-  }}
->
-  <Button>Custom style</Button>
-</Tooltip>
-```
-
----
-
-**12. Wrapping a disabled element**
-
-Disabled elements do not fire mouse events. Wrap them in a `<span>` so the Tooltip trigger receives events correctly.
-
-```tsx
-<Tooltip content="Button is disabled">
-  <span style={{ display: 'inline-flex' }}>
-    <Button disabled>Submit</Button>
-  </span>
-</Tooltip>
-```
-
-#### Accessibility
-
-- Shows on `mouseenter` and `focus`
-- Hides on `mouseleave` and `blur`
-- Popup has `role="tooltip"`
-- Repositions on scroll and window resize while visible
-
-</details>
-
----
-
 ## License
 
 MIT License - see [LICENSE](./LICENSE) for details.