@pushwoosh/dumb-components 1.1.148 → 1.1.150

package/Alert/ai-documentation.md

@@ -1,132 +0,0 @@
-# Alert - AI Documentation
-
-> Auto-generated AI agent documentation for Alert component
-> Part of @pushwoosh/dumb-components library
-
-## Overview
-
-**Component:** Alert
-**Import Path:** `import { Alert } from '@pushwoosh/dumb-components'`
-**Files:** Alert.tsx, types.ts, styles.ts, maps.ts, index.ts
-**Type:** UI Component / Notification Component
-**Description:** Alert component for displaying informational, warning, and error messages with optional collapsible content
-
-## TypeScript Interface
-
-```typescript
-type AlertType = 'info' | 'warning' | 'error';
-
-interface AlertProps {
-  title: ReactNode;
-  type: AlertType;
-  isExpandedDefault?: boolean;
-  readonly children?: ReactNode;
-}
-```
-
-## Import & Usage
-
-**Import:**
-```typescript
-import { Alert } from '@pushwoosh/dumb-components';
-import type { AlertProps } from '@pushwoosh/dumb-components';
-```
-
-**Basic Usage:**
-```tsx
-function App() {
-  return (
-    <Alert 
-      title="Information Alert" 
-      type="info"
-    />
-  );
-}
-```
-
-**Advanced Examples:**
-```tsx
-// Warning alert with collapsible content
-<Alert 
-  title="Warning: Check your settings"
-  type="warning"
-  isExpandedDefault={true}
->
-  <p>Please review your configuration before proceeding.</p>
-  <ul>
-    <li>Check database connection</li>
-    <li>Verify API endpoints</li>
-  </ul>
-</Alert>
-
-// Error alert
-<Alert 
-  title="Error: Failed to save"
-  type="error"
->
-  <p>There was an error saving your data. Please try again.</p>
-</Alert>
-
-// Simple info alert without children (non-collapsible)
-<Alert 
-  title="Your changes have been saved successfully"
-  type="info"
-/>
-
-// Dynamic content
-{errors.map(error => (
-  <Alert 
-    key={error.id}
-    title={error.title}
-    type="error"
-    isExpandedDefault={false}
-  >
-    {error.details}
-  </Alert>
-))}
-```
-
-## Props Reference
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| title | ReactNode | required | The main title/message of the alert |
-| type | 'info' \| 'warning' \| 'error' | required | Alert type that determines styling and icon |
-| isExpandedDefault | boolean | undefined | Whether collapsible content is expanded by default |
-| children | ReactNode | undefined | Optional content that makes the alert collapsible |
-
-## AI Agent Guidelines
-
-### ✅ Recommended Patterns
-- Use `type="info"` for general information and success messages
-- Use `type="warning"` for cautions and non-critical issues
-- Use `type="error"` for errors and critical problems
-- Include `children` only when you need expandable details
-- Set `isExpandedDefault={true}` for important details that should be visible immediately
-- Use meaningful, action-oriented titles
-
-### ❌ Common Mistakes to Avoid
-- Don't use Alert for loading states (use Spinner instead)
-- Don't nest Alerts inside each other
-- Don't use Alert for permanent UI elements (use Banner instead)
-- Avoid very long titles - use children for detailed content
-
-### Integration Tips
-- Works well at the top of forms to show validation errors
-- Can be used in modals for confirmation messages
-- Effective in dashboards for system status updates
-- Combines well with Toast for temporary notifications vs persistent alerts
-- Use multiple alerts in a stack for different message types
-
-## Behavior Notes
-- **Collapsible**: Alert becomes collapsible when `children` prop is provided
-- **Icon Display**: Each alert type has its own icon and color scheme
-- **Click Interaction**: Header is clickable only when content is collapsible
-- **Responsive**: Adapts to container width with proper padding and spacing
-
-## Related Components
-- Toast - for temporary notifications
-- Banner - for persistent promotional messages
-- Modal - for critical alerts requiring user action
-
----

package/Badge/ai-documentation.md

@@ -1,155 +0,0 @@
-# Badge - AI Documentation
-
-> Auto-generated AI agent documentation for Badge component
-> Part of @pushwoosh/dumb-components library
-
-## Overview
-
-**Component:** Badge
-**Import Path:** `import { Badge } from '@pushwoosh/dumb-components'`
-**Files:** Badge.tsx, types.ts, styles.ts, maps.ts, index.ts
-**Type:** UI Component / Status Indicator
-**Description:** Badge component for displaying status, categories, or labels with various color options and saturation levels
-
-## TypeScript Interface
-
-```typescript
-type BadgeColor = 'gray' | 'green' | 'orange' | 'red' | 'purple' | 'sky' | 'locked';
-
-interface BadgeProps extends Omit<JSX.IntrinsicElements['div'], 'ref'> {
-  readonly boxRef?: Ref<HTMLDivElement>;
-  readonly color: BadgeColor;
-  readonly isSaturated?: boolean;
-  readonly children: ReactNode;
-}
-```
-
-## Import & Usage
-
-**Import:**
-```typescript
-import { Badge } from '@pushwoosh/dumb-components';
-import type { BadgeProps, BadgeColor } from '@pushwoosh/dumb-components';
-```
-
-**Basic Usage:**
-```tsx
-function App() {
-  return (
-    <Badge color="green">
-      Active
-    </Badge>
-  );
-}
-```
-
-**Advanced Examples:**
-```tsx
-// Status indicators with semantic colors
-<Badge color="green">Active</Badge>
-<Badge color="red">Inactive</Badge>
-<Badge color="orange">Pending</Badge>
-<Badge color="gray">Draft</Badge>
-
-// Saturated vs normal badges
-<Badge color="purple" isSaturated={true}>
-  Premium
-</Badge>
-<Badge color="purple" isSaturated={false}>
-  Basic
-</Badge>
-
-// With ref for DOM access
-const badgeRef = useRef<HTMLDivElement>(null);
-
-<Badge 
-  color="sky" 
-  boxRef={badgeRef}
-  onClick={() => console.log('Badge clicked')}
->
-  Clickable
-</Badge>
-
-// In lists and tables
-{users.map(user => (
-  <div key={user.id}>
-    <span>{user.name}</span>
-    <Badge color={getStatusColor(user.status)}>
-      {user.status}
-    </Badge>
-  </div>
-))}
-
-// Dynamic color based on data
-function getStatusBadge(status: string) {
-  const colorMap = {
-    active: 'green',
-    inactive: 'red', 
-    pending: 'orange',
-    locked: 'locked'
-  } as const;
-  
-  return (
-    <Badge color={colorMap[status] || 'gray'}>
-      {status.toUpperCase()}
-    </Badge>
-  );
-}
-```
-
-## Props Reference
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| color | BadgeColor | required | Badge color theme: 'gray', 'green', 'orange', 'red', 'purple', 'sky', 'locked' |
-| isSaturated | boolean | false | Whether to use saturated/bold version of the color |
-| children | ReactNode | required | Content to display inside the badge |
-| boxRef | Ref<HTMLDivElement> | undefined | Ref to access the badge DOM element |
-| ...rest | HTMLDivElement props | | All standard div props (onClick, className, etc.) |
-
-## Color Guide
-
-| Color | Best Used For | Example Use Cases |
-|-------|---------------|-------------------|
-| green | Success, Active, Positive | "Active", "Published", "Success" |
-| red | Error, Danger, Negative | "Inactive", "Error", "Failed" |
-| orange | Warning, Pending, Caution | "Pending", "Warning", "In Review" |
-| gray | Neutral, Default, Disabled | "Draft", "Disabled", "Unknown" |
-| purple | Premium, Special, Priority | "Premium", "VIP", "Priority" |
-| sky | Info, Neutral Positive | "Info", "New", "Updated" |
-| locked | Restricted, Locked | "Locked", "Private", "Restricted" |
-
-## AI Agent Guidelines
-
-### ✅ Recommended Patterns
-- Use semantic colors that match the meaning (green for success, red for errors)
-- Keep badge text short and concise (1-2 words ideal)
-- Use `isSaturated={true}` for high-importance badges
-- Combine with tooltips for badges that need explanation
-- Use consistent color meanings across your application
-
-### ❌ Common Mistakes to Avoid
-- Don't use badges for long text content (use chips or tags instead)
-- Avoid mixing saturated and non-saturated badges in the same context
-- Don't use too many different colors in one interface
-- Don't use badges for interactive elements without proper accessibility
-
-### Integration Tips
-- Works well in tables for status columns
-- Effective in user lists, dashboards, and card components
-- Can be combined with icons for richer status indicators
-- Good for filtering interfaces when combined with interactive elements
-- Use with consistent spacing in badge groups
-
-## Behavior Notes
-- **Interactive**: Accepts all standard div props including onClick for interactivity
-- **Accessible**: Maintains proper contrast ratios for readability
-- **Flexible**: Can contain any ReactNode content
-- **Responsive**: Adapts to content size while maintaining consistent styling
-
-## Related Components
-- Chip - for removable tags and filters
-- Alert - for larger status messages
-- Tooltip - for additional badge explanations
-
----

package/Banner/ai-documentation.md

@@ -1,285 +0,0 @@
-# Banner - AI Documentation
-
-> Auto-generated AI agent documentation for Banner component
-> Part of @pushwoosh/dumb-components library
-
-## Overview
-
-**Component:** Banner
-**Import Path:** `import { Banner } from '@pushwoosh/dumb-components'`
-**Files:** Banner.tsx, types.ts, styles.ts, maps.ts, colors.ts, index.ts
-**Type:** UI Component / Notification Component
-**Description:** Banner component for displaying prominent notifications with optional actions, loading states, and close functionality
-
-## TypeScript Interface
-
-```typescript
-type BannerType = 'error' | 'warning' | 'info' | 'success';
-
-interface RequiredBannerProps {
-  readonly boxRef?: any;
-  readonly type: BannerType;
-  readonly title: string;
-  readonly view?: 'shape' | 'ghost';
-  readonly icon?: ReactElement;
-  readonly className?: string;
-  readonly isLoading?: boolean;
-  readonly canBeClosed?: boolean;
-  readonly onClose?: () => void;
-  readonly children?: ReactNode;
-}
-
-interface BannerPropsWithButton extends RequiredBannerProps {
-  readonly action?: {
-    readonly onClick: () => void;
-    readonly buttonText: string;
-  };
-}
-```
-
-## Import & Usage
-
-**Import:**
-```typescript
-import { Banner } from '@pushwoosh/dumb-components';
-import type { 
-  BannerType, 
-  RequiredBannerProps, 
-  BannerPropsWithButton 
-} from '@pushwoosh/dumb-components';
-```
-
-**Basic Usage:**
-```tsx
-function App() {
-  return (
-    <Banner 
-      type="info"
-      title="Welcome to the new dashboard!"
-    />
-  );
-}
-```
-
-**Advanced Examples:**
-```tsx
-// Success banner with action
-<Banner 
-  type="success"
-  title="Account verified successfully"
-  action={{
-    buttonText: "Get Started",
-    onClick: () => navigate('/dashboard')
-  }}
-/>
-
-// Error banner with close functionality
-<Banner 
-  type="error"
-  title="Connection failed"
-  canBeClosed
-  onClose={() => console.log('Banner closed')}
->
-  <p>Unable to connect to server. Please check your internet connection.</p>
-</Banner>
-
-// Warning banner with loading action
-<Banner 
-  type="warning"
-  title="Unsaved changes detected"
-  isLoading={isSaving}
-  action={{
-    buttonText: isSaving ? "Saving..." : "Save Changes",
-    onClick: handleSave
-  }}
->
-  <p>You have unsaved changes that will be lost if you navigate away.</p>
-</Banner>
-
-// Info banner with custom icon
-<Banner 
-  type="info"
-  title="New features available"
-  icon={<StarIcon />}
-  canBeClosed
-  onClose={() => setShowBanner(false)}
->
-  <p>Check out our latest updates and improvements.</p>
-</Banner>
-
-// Ghost view banner
-<Banner 
-  type="success"
-  title="Operation completed"
-  view="ghost"
-  action={{
-    buttonText: "View Details",
-    onClick: () => showDetails()
-  }}
-/>
-
-// Conditional banner display
-{showErrorBanner && (
-  <Banner 
-    type="error"
-    title="Validation failed"
-    canBeClosed
-    onClose={() => setShowErrorBanner(false)}
-  >
-    <ul>
-      {errors.map(error => (
-        <li key={error.field}>{error.message}</li>
-      ))}
-    </ul>
-  </Banner>
-)}
-
-// Banner with async action
-<Banner 
-  type="info"
-  title="Update available"
-  isLoading={isUpdating}
-  action={{
-    buttonText: "Update Now",
-    onClick: async () => {
-      setIsUpdating(true);
-      await performUpdate();
-      setIsUpdating(false);
-    }
-  }}
-/>
-```
-
-## Props Reference
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| type | 'error' \| 'warning' \| 'info' \| 'success' | required | Banner semantic type |
-| title | string | required | Main banner title text |
-| view | 'shape' \| 'ghost' | 'shape' | Visual style variant |
-| children | ReactNode | undefined | Additional content below title |
-| icon | ReactElement | auto by type | Custom icon (defaults based on type) |
-| canBeClosed | boolean | false | Whether banner can be dismissed |
-| isLoading | boolean | false | Whether banner shows loading state |
-| onClose | () => void | undefined | Callback when banner is closed |
-| action | BannerAction | undefined | Action button configuration |
-| className | string | undefined | Additional CSS classes |
-| boxRef | Ref | undefined | Ref to banner element |
-
-### Action Object
-```typescript
-action?: {
-  onClick: () => void;     // Action callback
-  buttonText: string;      // Button label text
-}
-```
-
-## Type Guide
-
-| Type | Usage | Default Icon | Example Use Cases |
-|------|-------|--------------|-------------------|
-| success | Positive feedback, completion | ✓ CheckIcon | "Successfully saved", "Account created" |
-| info | Neutral information | ℹ️ InfoIcon | "New features", "System maintenance" |
-| warning | Cautions, non-critical issues | ⚠️ WarningIcon | "Unsaved changes", "Session expiring" |
-| error | Critical issues, failures | ❌ ErrorIcon | "Network error", "Validation failed" |
-
-## AI Agent Guidelines
-
-### ✅ Recommended Patterns
-- Use semantic types that match the message content
-- Include `canBeClosed` for dismissible notifications
-- Add action buttons for banners that need user response
-- Use `isLoading` when actions trigger async operations
-- Place banners at top of content areas for visibility
-- Include helpful details in children for complex issues
-
-### ❌ Common Mistakes to Avoid
-- Don't stack multiple banners without clear hierarchy
-- Avoid very long titles - use children for details
-- Don't use banners for temporary notifications (use Toast instead)
-- Don't forget to handle loading states for async actions
-- Avoid banners that can't be dismissed for non-critical content
-
-### Integration Tips
-- Position banners prominently at page/section tops
-- Use with form validation to show error summaries
-- Combine with async operations for status feedback
-- Good for onboarding flows and feature announcements
-- Can replace multiple alerts with single comprehensive banner
-
-## Banner vs Other Components
-
-| Component | Usage | Duration | Dismissible |
-|-----------|--------|----------|-------------|
-| Banner | Prominent notifications | Persistent | Optional |
-| Alert | Contextual messages | Persistent | By content |
-| Toast | Temporary feedback | Auto-dismiss | Usually |
-| Modal | Critical interruptions | User action | Required |
-
-## Common Patterns
-
-### Error Handling
-```tsx
-function FormWithBanner() {
-  const [errors, setErrors] = useState([]);
-  
-  return (
-    <>
-      {errors.length > 0 && (
-        <Banner
-          type="error"
-          title={`Found ${errors.length} validation error(s)`}
-          canBeClosed
-          onClose={() => setErrors([])}
-        >
-          <ul>
-            {errors.map(error => (
-              <li key={error.field}>{error.message}</li>
-            ))}
-          </ul>
-        </Banner>
-      )}
-      {/* Form content */}
-    </>
-  );
-}
-```
-
-### Feature Announcements
-```tsx
-<Banner
-  type="info"
-  title="New Dashboard Available!"
-  action={{
-    buttonText: "Try It Now",
-    onClick: () => enableNewDashboard()
-  }}
-  canBeClosed
-  onClose={() => markAnnouncementSeen()}
->
-  Experience our redesigned interface with improved performance and new features.
-</Banner>
-```
-
-### Save Prompt
-```tsx
-<Banner
-  type="warning"
-  title="You have unsaved changes"
-  isLoading={isSaving}
-  action={{
-    buttonText: isSaving ? "Saving..." : "Save Now",
-    onClick: handleSave
-  }}
->
-  Your changes will be lost if you navigate away from this page.
-</Banner>
-```
-
-## Related Components
-- Alert - for contextual messages within content
-- Toast - for temporary notifications
-- Modal - for blocking user interactions
-- Button - action buttons used within banners
-
----