@pushwoosh/dumb-components 1.1.148 → 1.1.149

package/Tooltip/ai-documentation.md

@@ -1,340 +0,0 @@
-# Tooltip - AI Documentation
-
-> Auto-generated AI agent documentation for Tooltip component
-> Part of @pushwoosh/dumb-components library
-
-## Overview
-**Component:** Tooltip, TooltipTrigger
-**Import Path:** `import { Tooltip, TooltipTrigger } from '@pushwoosh/dumb-components'`
-**Files:** 
-- `Tooltip/Tooltip.tsx` - Main tooltip component
-- `Tooltip/TooltipTrigger.tsx` - Icon trigger variant
-- `Tooltip/types.ts` - TypeScript interfaces
-- `Tooltip/maps.ts` - Position and style mappings
-- `Tooltip/styles.ts` - Styled components
-**Type:** UI Component / Overlay
-**Description:** Flexible tooltip component built on Tippy.js for displaying contextual information on hover. Supports 12 position variants, custom content, and pre-styled icon triggers with different semantic views.
-
-## TypeScript Interfaces
-
-### TooltipProps
-```typescript
-interface TooltipProps {
-  content: ReactNode;                    // Tooltip content
-  position?: TooltipPosition;            // Placement position
-  offset?: [number, number];             // X, Y offset from trigger
-  arrowOffset?: string;                  // Arrow position offset
-  maxWidth?: number | 'none';           // Maximum width (default: 240)
-  zIndex?: number;                       // Stack order (default: 999999)
-  isDisabled?: boolean;                  // Disable tooltip
-  isVisible?: boolean;                   // Controlled visibility
-  reference?: RefObject<Element>;        // Custom reference element
-  children?: ReactElement;               // Trigger element
-}
-```
-
-### TooltipPosition
-```typescript
-type TooltipPosition = 
-  | 'top-start' | 'top-middle' | 'top-end'
-  | 'right-start' | 'right-middle' | 'right-end'
-  | 'bottom-start' | 'bottom-middle' | 'bottom-end'
-  | 'left-start' | 'left-middle' | 'left-end';
-```
-
-### TooltipTriggerProps
-```typescript
-interface TooltipTriggerProps extends TooltipProps {
-  padding?: string | number;             // Icon padding
-  size?: 'small' | 'medium';            // Icon size
-  hover?: boolean;                       // Enable hover effect
-  view: 'question' | 'info' | 'warning' | 'error';  // Icon type
-}
-```
-
-## Import & Usage
-
-### Basic Tooltip
-```tsx
-import { Tooltip } from '@pushwoosh/dumb-components';
-import { Button } from '@pushwoosh/dumb-components';
-
-function BasicExample() {
-  return (
-    <Tooltip content="This is a helpful tooltip">
-      <Button>Hover me</Button>
-    </Tooltip>
-  );
-}
-```
-
-### Tooltip with Position
-```tsx
-import { Tooltip } from '@pushwoosh/dumb-components';
-
-function PositionedTooltip() {
-  return (
-    <Tooltip 
-      content="Appears on the right" 
-      position="right-middle"
-    >
-      <span>Hover for right tooltip</span>
-    </Tooltip>
-  );
-}
-```
-
-### TooltipTrigger with Icon
-```tsx
-import { TooltipTrigger } from '@pushwoosh/dumb-components';
-
-function HelpTooltip() {
-  return (
-    <TooltipTrigger
-      view="question"
-      content="Click the button to save your changes"
-      position="top-middle"
-    />
-  );
-}
-```
-
-### Rich Content Tooltip
-```tsx
-import { Tooltip } from '@pushwoosh/dumb-components';
-
-function RichTooltip() {
-  const content = (
-    <div>
-      <strong>Keyboard Shortcuts</strong>
-      <ul style={{ margin: '8px 0', paddingLeft: '20px' }}>
-        <li>Ctrl+S - Save</li>
-        <li>Ctrl+Z - Undo</li>
-        <li>Ctrl+Y - Redo</li>
-      </ul>
-    </div>
-  );
-  
-  return (
-    <Tooltip content={content} maxWidth={300}>
-      <Button>Shortcuts</Button>
-    </Tooltip>
-  );
-}
-```
-
-## Advanced Examples
-
-### Controlled Tooltip
-```tsx
-import { Tooltip } from '@pushwoosh/dumb-components';
-
-function ControlledTooltip() {
-  const [isVisible, setIsVisible] = useState(false);
-  
-  return (
-    <div>
-      <Button onClick={() => setIsVisible(!isVisible)}>
-        Toggle Tooltip
-      </Button>
-      
-      <Tooltip 
-        content="Controlled tooltip content"
-        isVisible={isVisible}
-      >
-        <span>Target element</span>
-      </Tooltip>
-    </div>
-  );
-}
-```
-
-### Form Field with Help Icon
-```tsx
-import { TooltipTrigger, EnhancedInput } from '@pushwoosh/dumb-components';
-
-function FormFieldWithHelp() {
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-      <EnhancedInput 
-        placeholder="Enter email"
-        type="email"
-      />
-      <TooltipTrigger
-        view="info"
-        content="We'll never share your email with anyone else."
-        position="right-middle"
-        size="small"
-      />
-    </div>
-  );
-}
-```
-
-### Warning and Error Tooltips
-```tsx
-import { TooltipTrigger } from '@pushwoosh/dumb-components';
-
-function StatusTooltips() {
-  return (
-    <div style={{ display: 'flex', gap: '16px' }}>
-      <TooltipTrigger
-        view="warning"
-        content="This action may affect other users"
-        position="top-middle"
-      />
-      
-      <TooltipTrigger
-        view="error"
-        content="Invalid configuration detected"
-        position="top-middle"
-      />
-    </div>
-  );
-}
-```
-
-### Tooltip with Custom Trigger
-```tsx
-import { Tooltip } from '@pushwoosh/dumb-components';
-import { useRef } from 'react';
-
-function CustomTriggerTooltip() {
-  const buttonRef = useRef<HTMLButtonElement>(null);
-  const spanRef = useRef<HTMLSpanElement>(null);
-  
-  return (
-    <>
-      <button ref={buttonRef}>Custom Button</button>
-      <span ref={spanRef}>Another element</span>
-      
-      <Tooltip 
-        content="This tooltip is attached to the button"
-        reference={buttonRef}
-      />
-      
-      <Tooltip
-        content="This one is attached to the span"
-        reference={spanRef}
-        position="bottom-middle"
-      />
-    </>
-  );
-}
-```
-
-### Disabled Tooltip
-```tsx
-import { Tooltip, Button } from '@pushwoosh/dumb-components';
-
-function ConditionalTooltip({ isFeatureEnabled }) {
-  return (
-    <Tooltip 
-      content="Premium feature - upgrade to access"
-      isDisabled={isFeatureEnabled}
-    >
-      <Button disabled={!isFeatureEnabled}>
-        Premium Feature
-      </Button>
-    </Tooltip>
-  );
-}
-```
-
-### Long Content with Max Width
-```tsx
-import { Tooltip } from '@pushwoosh/dumb-components';
-
-function LongContentTooltip() {
-  const longText = `
-    This is a very long tooltip content that demonstrates how the maxWidth 
-    property works. By default, tooltips have a maxWidth of 240px, but you 
-    can customize this to accommodate longer content or set it to 'none' 
-    for unlimited width.
-  `;
-  
-  return (
-    <div style={{ display: 'flex', gap: '20px' }}>
-      <Tooltip content={longText}>
-        <Button>Default width (240px)</Button>
-      </Tooltip>
-      
-      <Tooltip content={longText} maxWidth={400}>
-        <Button>Custom width (400px)</Button>
-      </Tooltip>
-      
-      <Tooltip content={longText} maxWidth="none">
-        <Button>No max width</Button>
-      </Tooltip>
-    </div>
-  );
-}
-```
-
-## Props Reference
-
-### Tooltip Props
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `content` | `ReactNode` | ✓ | - | Tooltip content to display |
-| `position` | `TooltipPosition` | - | `'top-start'` | Placement relative to trigger |
-| `offset` | `[number, number]` | - | Position-based | X, Y offset from trigger |
-| `arrowOffset` | `string` | - | Position-based | Arrow position along edge |
-| `maxWidth` | `number \| 'none'` | - | `240` | Maximum tooltip width in pixels |
-| `zIndex` | `number` | - | `999999` | Stack order for overlapping elements |
-| `isDisabled` | `boolean` | - | `false` | Disable tooltip functionality |
-| `isVisible` | `boolean` | - | - | Control visibility programmatically |
-| `reference` | `RefObject<Element>` | - | - | Custom reference element |
-| `children` | `ReactElement` | - | - | Trigger element |
-
-### TooltipTrigger Props
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `view` | `'question' \| 'info' \| 'warning' \| 'error'` | ✓ | - | Icon type and color scheme |
-| `padding` | `string \| number` | - | `0` | Icon wrapper padding |
-| `size` | `'small' \| 'medium'` | - | `'small'` | Icon size |
-| `hover` | `boolean` | - | `true` | Enable hover color change |
-| All Tooltip props | - | - | - | Inherits all Tooltip props |
-
-### Position Values
-- **Top:** `top-start`, `top-middle`, `top-end`
-- **Right:** `right-start`, `right-middle`, `right-end`
-- **Bottom:** `bottom-start`, `bottom-middle`, `bottom-end`
-- **Left:** `left-start`, `left-middle`, `left-end`
-
-## AI Agent Guidelines
-
-### ✅ Recommended Patterns
-- Use `TooltipTrigger` for form help icons with appropriate `view` type
-- Keep tooltip content concise - use modals for lengthy information
-- Use `position` to avoid content being cut off by viewport edges
-- Apply `maxWidth` for longer content to improve readability
-- Use semantic `view` types: `info` for help, `warning` for cautions, `error` for problems
-- Disable tooltips on disabled elements to avoid confusion
-- Use controlled mode (`isVisible`) for programmatic show/hide
-
-### ❌ Common Mistakes to Avoid
-- Don't nest interactive elements inside tooltip content
-- Avoid tooltips on mobile touch devices - consider alternatives
-- Don't use tooltips for critical information - should be supplementary
-- Avoid very long delays or animations (component uses instant show/hide)
-- Don't put tooltips on elements that are frequently clicked
-- Avoid multiple tooltips visible simultaneously
-- Don't forget accessibility - tooltip content should also be available elsewhere
-
-### Integration Tips
-- Built on Tippy.js with Popper.js for positioning
-- Uses fixed positioning strategy for better performance
-- Arrow automatically adjusts based on position
-- Flip behavior is disabled to maintain predictable positioning
-- TooltipTrigger uses icons from @pushwoosh/kit-icons
-- Colors for TooltipTrigger views use Pushwoosh design tokens
-- Works with any React element as trigger via children or reference
-
-## Related Components
-- **Popover** - For interactive content and forms
-- **Modal** - For detailed information and actions
-- **Toast** - For temporary notifications
-- **Button** - Common tooltip trigger
-- **EnhancedInput** - Often paired with help tooltips
-- **Badge** - Alternative for persistent indicators

package/ai-documentation.md

@@ -1,124 +0,0 @@
-# @pushwoosh/dumb-components - AI Agent Documentation Index
-
-> Comprehensive AI documentation for @pushwoosh/dumb-components React TypeScript component library
-> Auto-generated on December 13, 2024
-
-## Quick Start
-
-```typescript
-// Install
-npm install @pushwoosh/dumb-components
-
-// Main imports
-import {
-  Alert, Badge, Button, Checkbox, Chip
-} from '@pushwoosh/dumb-components';
-
-// Hook imports (when available)
-import { useElementWidth, useOnClickOutside } from '@pushwoosh/dumb-components/hooks';
-```
-
-## 📦 Components
-
-### Form Components
-| Component | Description | Documentation |
-|-----------|-------------|---------------|
-| [Button](./Button/ai-documentation.md) | Interactive buttons with loading states and variants | 📖 |
-| [Checkbox](./Checkbox/ai-documentation.md) | Checkbox input with label and tooltip support | 📖 |
-| [EnhancedInput](./EnhancedInput/ai-documentation.md) | Enhanced text input with icons and clear functionality | 📖 |
-| [InputFile](./InputFile/ai-documentation.md) | File upload component with validation and drag-drop | 📖 |
-| [Radio](./Radio/ai-documentation.md) | Radio button component for single choice selection | 📖 |
-| [Select](./Select/ai-documentation.md) | Advanced select with async and creatable variants | 📖 |
-| [Switch](./Switch/ai-documentation.md) | Toggle switch for boolean state changes | 📖 |
-
-### UI Components
-| Component | Description | Documentation |
-|-----------|-------------|---------------|
-| [Alert](./Alert/ai-documentation.md) | Alert messages with optional collapsible content | 📖 |
-| [Badge](./Badge/ai-documentation.md) | Status badges and indicators with color variants | 📖 |
-| [Chip](./Chip/ai-documentation.md) | Interactive tags and filters with remove functionality | 📖 |
-| [Popover](./Popover/ai-documentation.md) | Floating overlay component with positioning | 📖 |
-| [ProgressBar](./ProgressBar/ai-documentation.md) | Progress indicator with customizable styling | 📖 |
-| [Skeleton](./Skeleton/ai-documentation.md) | Loading placeholder components | 📖 |
-| [Spinner](./Spinner/ai-documentation.md) | Loading indicator in multiple sizes | 📖 |
-| [Toast](./Toast/ai-documentation.md) | Notification system with provider pattern | 📖 |
-| [Tooltip](./Tooltip/ai-documentation.md) | Contextual tooltips with multiple positions | 📖 |
-
-### Layout Components
-| Component | Description | Documentation |
-|-----------|-------------|---------------|
-| [Modal](./Modal/ai-documentation.md) | Modal dialogs with size variants and confirmations | 📖 |
-| [PageHeader](./PageHeader/ai-documentation.md) | Page-level header with navigation and actions | 📖 |
-| [Pagination](./Pagination/ai-documentation.md) | Navigation component for multi-page content | 📖 |
-| [Tabs](./Tabs/ai-documentation.md) | Tabbed interface with multiple tab variants | 📖 |
-
-### Base Components
-| Component | Description | Documentation |
-|-----------|-------------|---------------|
-| [Native](./native/ai-documentation.md) | Styled native HTML elements (Input, Select, Textarea, NativeTimeInput) | 📖 |
-
-## 🤖 AI Agent Quick Reference
-
-### Common Patterns
-
-```tsx
-// Alert for user feedback
-<Alert
-  title="Success!"
-  type="info"
->
-  Your changes have been saved.
-</Alert>
-
-// Form with validation
-<form onSubmit={handleSubmit}>
-  <Checkbox
-    label="I agree to the terms"
-    isChecked={agreed}
-    type={showErrors && !agreed ? 'error' : 'normal'}
-    onChange={setAgreed}
-  />
-  <Button
-    type="submit"
-    color="primary"
-    isLoading={isSubmitting}
-    isDisabled={!agreed}
-  >
-    {isSubmitting ? 'Submitting...' : 'Submit'}
-  </Button>
-</form>
-
-// Status indicators
-<div>
-  <Badge color="green">Active</Badge>
-  <Badge color="orange">Pending</Badge>
-  <Badge color="red">Error</Badge>
-</div>
-
-// Tag management
-{tags.map(tag => (
-  <Chip
-    key={tag}
-    $onClose={() => removeTag(tag)}
-  >
-    {tag}
-  </Chip>
-))}
-```
-
-### Global Guidelines for AI Agents
-
-1. **Always handle loading and error states** - use Button loading states, Alert for errors
-2. **Use semantic colors** - green for success, red for errors/danger, orange for warnings
-3. **Include proper TypeScript types** - all components have full TypeScript definitions
-4. **Handle form validation** - use error states and clear feedback
-5. **Follow accessibility best practices** - components include proper ARIA and keyboard support
-
-### Color Consistency Guide
-
-| Color | Button | Badge | Alert | Usage |
-|-------|--------|-------|-------|--------|
-| Primary/Green | `color="primary"` | `color="green"` | `type="info"` | Success, main actions |
-| Secondary/Gray | `color="secondary"` | `color="gray"` | - | Secondary actions, neutral |
-| Danger/Red | `color="danger"` | `color="red"` | `type="error"` | Errors, destructive actions |
-| Warning/Orange | - | `color="orange"` | `type="warning"` | Warnings, cautions |