@idealyst/components 1.0.83 → 1.0.85

package/src/Avatar/README.md

@@ -1,139 +0,0 @@
-# Avatar Component
-
-A flexible avatar component for displaying user profile pictures with fallback support.
-
-## Features
-
-- ✅ Cross-platform (React & React Native)
-- ✅ Multiple sizes (small, medium, large, xlarge)
-- ✅ Shape variants (circle, square)
-- ✅ Automatic fallback to initials when image fails
-- ✅ Color-themed backgrounds for fallback text
-- ✅ Accessible with proper alt text support
-- ✅ TypeScript support
-
-## Basic Usage
-
-```tsx
-import { Avatar } from '@idealyst/components';
-
-// With image URL
-<Avatar 
-  src="https://example.com/avatar.jpg"
-  alt="John Doe"
-  fallback="JD"
-  size="medium"
-/>
-
-// With local image (React Native)
-<Avatar 
-  src={require('./avatar.png')}
-  alt="John Doe"
-  fallback="JD"
-  size="large"
-/>
-
-// Fallback only (no image)
-<Avatar 
-  fallback="AB"
-  size="small"
-  color="primary"
-/>
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `src` | `string \| any` | - | Image source (URL string or require() for local images) |
-| `alt` | `string` | - | Alt text for accessibility |
-| `fallback` | `string` | - | Fallback text to display (usually initials) |
-| `size` | `'small' \| 'medium' \| 'large' \| 'xlarge'` | `'medium'` | Size of the avatar |
-| `shape` | `'circle' \| 'square'` | `'circle'` | Shape of the avatar |
-| `color` | `ColorVariant` | - | Color scheme for fallback background |
-| `style` | `ViewStyle` | - | Additional custom styles |
-| `testID` | `string` | - | Test identifier for testing |
-
-## Sizes
-
-| Size | Dimensions |
-|------|------------|
-| `small` | 32×32px |
-| `medium` | 48×48px |
-| `large` | 64×64px |
-| `xlarge` | 96×96px |
-
-## Examples
-
-### Different Sizes
-```tsx
-<Avatar src="https://example.com/user.jpg" size="small" fallback="JS" />
-<Avatar src="https://example.com/user.jpg" size="medium" fallback="JS" />
-<Avatar src="https://example.com/user.jpg" size="large" fallback="JS" />
-<Avatar src="https://example.com/user.jpg" size="xlarge" fallback="JS" />
-```
-
-### Different Shapes
-```tsx
-<Avatar src="https://example.com/user.jpg" shape="circle" fallback="JS" />
-<Avatar src="https://example.com/user.jpg" shape="square" fallback="JS" />
-```
-
-### Fallback with Colors
-```tsx
-<Avatar fallback="AB" color="primary" />
-<Avatar fallback="CD" color="secondary" />
-<Avatar fallback="EF" color="success" />
-```
-
-### Error Handling
-```tsx
-// If the image fails to load, fallback text will be shown automatically
-<Avatar 
-  src="https://invalid-url.com/image.jpg"
-  fallback="JD"
-  alt="John Doe"
-/>
-```
-
-## Accessibility
-
-- Uses proper alt text for images
-- Fallback text is readable by screen readers
-- Maintains proper contrast ratios for text
-- Follows accessibility best practices for user avatars
-
-## Styling
-
-The Avatar component uses the theme system for consistent styling:
-
-```tsx
-// Custom styling
-<Avatar 
-  src="https://example.com/user.jpg"
-  style={{ 
-    borderWidth: 2, 
-    borderColor: '#007AFF' 
-  }}
-/>
-```
-
-## Platform Differences
-
-### React Native
-- Uses `Image` component with proper error handling
-- Supports both local (`require()`) and remote images
-- Uses `accessibilityLabel` for screen readers
-
-### Web
-- Uses HTML `<img>` element
-- Proper `alt` attribute for accessibility
-- CSS-based styling with `object-fit: cover`
-
-## Best Practices
-
-1. **Always provide fallback text** for when images fail to load
-2. **Use meaningful alt text** that describes the person or content
-3. **Keep fallback text short** (usually 1-3 characters for initials)
-4. **Choose appropriate sizes** for your use case
-5. **Consider accessibility** when choosing colors and contrast

package/src/Badge/README.md

@@ -1,170 +0,0 @@
-# Badge Component
-
-A versatile badge component for displaying status, counts, or indicators with multiple visual styles.
-
-## Features
-
-- ✅ Cross-platform (React & React Native)
-- ✅ Multiple sizes (small, medium, large)
-- ✅ Three variants (filled, outlined, dot)
-- ✅ Color scheme support with theme integration
-- ✅ Accessible with proper ARIA roles
-- ✅ TypeScript support
-
-## Basic Usage
-
-```tsx
-import { Badge } from '@idealyst/components';
-
-// Basic filled badge
-<Badge color="blue">5</Badge>
-
-// Outlined badge
-<Badge variant="outlined" color="green">New</Badge>
-
-// Dot indicator
-<Badge variant="dot" color="red" />
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children` | `ReactNode` | - | Content to display inside the badge (not used for dot variant) |
-| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Size of the badge |
-| `variant` | `'filled' \| 'outlined' \| 'dot'` | `'filled'` | Visual style variant |
-| `color` | `DisplayColorVariant` | `'blue'` | Color scheme for the badge |
-| `style` | `ViewStyle` | - | Additional custom styles |
-| `testID` | `string` | - | Test identifier for testing |
-
-## Variants
-
-### Filled Badge
-The default variant with a solid background color.
-
-```tsx
-<Badge variant="filled" color="blue">3</Badge>
-<Badge variant="filled" color="green">New</Badge>
-<Badge variant="filled" color="red">!</Badge>
-```
-
-### Outlined Badge
-A badge with a border and transparent background.
-
-```tsx
-<Badge variant="outlined" color="blue">Draft</Badge>
-<Badge variant="outlined" color="amber">Pending</Badge>
-<Badge variant="outlined" color="gray">Inactive</Badge>
-```
-
-### Dot Badge
-A small circular indicator without text content.
-
-```tsx
-<Badge variant="dot" color="red" />
-<Badge variant="dot" color="green" />
-<Badge variant="dot" color="blue" />
-```
-
-## Sizes
-
-| Size | Description | Use Case |
-|------|-------------|----------|
-| `small` | Compact size | Inline indicators, tight spaces |
-| `medium` | Standard size | General use, notifications |
-| `large` | Prominent size | Important status, emphasis |
-
-```tsx
-<Badge size="small" color="blue">1</Badge>
-<Badge size="medium" color="blue">10</Badge>
-<Badge size="large" color="blue">99+</Badge>
-```
-
-## Color Variants
-
-The badge supports various color schemes from the theme system:
-
-```tsx
-<Badge color="blue">Primary</Badge>
-<Badge color="green">Success</Badge>
-<Badge color="red">Error</Badge>
-<Badge color="amber">Warning</Badge>
-<Badge color="gray">Neutral</Badge>
-<Badge color="cyan">Info</Badge>
-<Badge color="purple">Purple</Badge>
-<Badge color="pink">Pink</Badge>
-```
-
-## Common Use Cases
-
-### Notification Count
-```tsx
-<View style={{ position: 'relative' }}>
-  <Icon name="bell" />
-  <Badge 
-    size="small" 
-    color="red" 
-    style={{ position: 'absolute', top: -5, right: -5 }}
-  >
-    3
-  </Badge>
-</View>
-```
-
-### Status Indicator
-```tsx
-<View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
-  <Text>Server Status</Text>
-  <Badge variant="dot" color="green" />
-</View>
-```
-
-### Category Labels
-```tsx
-<View style={{ flexDirection: 'row', gap: 8 }}>
-  <Badge variant="outlined" color="blue">React</Badge>
-  <Badge variant="outlined" color="green">TypeScript</Badge>
-  <Badge variant="outlined" color="purple">UI</Badge>
-</View>
-```
-
-### Priority Indicators
-```tsx
-<Badge variant="filled" color="red" size="small">High</Badge>
-<Badge variant="filled" color="amber" size="small">Medium</Badge>
-<Badge variant="filled" color="gray" size="small">Low</Badge>
-```
-
-## Accessibility
-
-- Uses `role="status"` for screen readers
-- Dot variant includes `aria-label="status indicator"`
-- Proper contrast ratios for text visibility
-- Keyboard accessible when interactive
-
-## Styling
-
-```tsx
-// Custom positioning for notification badges
-<Badge 
-  color="red" 
-  style={{ 
-    position: 'absolute',
-    top: -8,
-    right: -8,
-    minWidth: 20,
-    minHeight: 20
-  }}
->
-  {notificationCount}
-</Badge>
-```
-
-## Best Practices
-
-1. **Keep text short** - Use abbreviations or symbols for long text
-2. **Use appropriate colors** - Red for errors/urgent, green for success, etc.
-3. **Consider accessibility** - Ensure sufficient contrast for text badges
-4. **Position carefully** - For overlay badges, ensure they don't obscure important content
-5. **Limit usage** - Don't overuse badges as they can create visual clutter
-6. **Use dot variant** for simple status indicators without text

package/src/Button/Button.types.ts

@@ -1,12 +0,0 @@
-import { TouchableOpacityProps } from 'react-native';
-import { IntentNames } from '../theme';
-
-export interface ButtonProps extends Omit<TouchableOpacityProps, 'disabled'> {
-  title: string;
-  onPress: () => void;
-  variant?: 'contained' | 'outlined' | 'text';
-  intent?: IntentNames;
-  size?: 'small' | 'medium' | 'large';
-  disabled?: boolean;
-  loading?: boolean;
-} 

package/src/Button/README.md

@@ -1,262 +0,0 @@
-# Button Component
-
-A versatile button component with multiple variants, intents, and sizes for consistent user interactions.
-
-## Features
-
-- ✅ Cross-platform (React & React Native)
-- ✅ Three variants (contained, outlined, text)
-- ✅ Intent-based color system
-- ✅ Multiple sizes (small, medium, large)
-- ✅ Disabled and loading states
-- ✅ Accessible with proper ARIA attributes
-- ✅ TypeScript support
-
-## Basic Usage
-
-```tsx
-import { Button } from '@idealyst/components';
-
-// Basic contained button
-<Button 
-  variant="contained"
-  intent="primary"
-  onPress={() => console.log('Pressed!')}
->
-  Click Me
-</Button>
-
-// Outlined button
-<Button 
-  variant="outlined"
-  intent="neutral"
-  onPress={handlePress}
->
-  Cancel
-</Button>
-
-// Text button
-<Button 
-  variant="text"
-  intent="primary"
-  onPress={handlePress}
->
-  Learn More
-</Button>
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children` | `ReactNode` | - | Content to display inside the button |
-| `title` | `string` | - | Text title for the button (web compatibility) |
-| `onPress` | `() => void` | **Required** | Function called when button is pressed |
-| `disabled` | `boolean` | `false` | Whether the button is disabled |
-| `variant` | `'contained' \| 'outlined' \| 'text'` | `'contained'` | Visual style variant |
-| `intent` | `IntentVariant` | `'primary'` | Color scheme/intent of the button |
-| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Size of the button |
-| `loading` | `boolean` | `false` | Show loading state (React Native only) |
-| `style` | `ViewStyle` | - | Additional custom styles |
-| `testID` | `string` | - | Test identifier for testing |
-
-## Variants
-
-### Contained Button
-High emphasis button with solid background color.
-
-```tsx
-<Button variant="contained" intent="primary" onPress={handleSave}>
-  Save Changes
-</Button>
-<Button variant="contained" intent="error" onPress={handleDelete}>
-  Delete
-</Button>
-```
-
-### Outlined Button
-Medium emphasis button with border and transparent background.
-
-```tsx
-<Button variant="outlined" intent="neutral" onPress={handleCancel}>
-  Cancel
-</Button>
-<Button variant="outlined" intent="success" onPress={handleApprove}>
-  Approve
-</Button>
-```
-
-### Text Button
-Low emphasis button with no background or border.
-
-```tsx
-<Button variant="text" intent="primary" onPress={handleLearnMore}>
-  Learn More
-</Button>
-<Button variant="text" intent="neutral" onPress={handleSkip}>
-  Skip
-</Button>
-```
-
-## Intent System
-
-Buttons use an intent-based color system for semantic meaning:
-
-### Primary Intent
-Main brand actions and primary calls-to-action.
-
-```tsx
-<Button intent="primary" onPress={handleSubmit}>Submit</Button>
-<Button intent="primary" onPress={handleSignIn}>Sign In</Button>
-```
-
-### Neutral Intent
-Secondary actions and neutral operations.
-
-```tsx
-<Button intent="neutral" onPress={handleCancel}>Cancel</Button>
-<Button intent="neutral" onPress={handleBack}>Back</Button>
-```
-
-### Success Intent
-Positive actions like save, confirm, or approve.
-
-```tsx
-<Button intent="success" onPress={handleSave}>Save</Button>
-<Button intent="success" onPress={handleConfirm}>Confirm</Button>
-```
-
-### Error Intent
-Destructive actions like delete or remove.
-
-```tsx
-<Button intent="error" onPress={handleDelete}>Delete</Button>
-<Button intent="error" onPress={handleRemove}>Remove</Button>
-```
-
-### Warning Intent
-Caution actions that require attention.
-
-```tsx
-<Button intent="warning" onPress={handleWarningAction}>Proceed with Caution</Button>
-```
-
-## Sizes
-
-| Size | Height | Padding | Font Size | Use Case |
-|------|--------|---------|-----------|----------|
-| `small` | 32px | 12px | 14px | Compact spaces, secondary actions |
-| `medium` | 40px | 16px | 16px | Standard use, forms |
-| `large` | 48px | 20px | 18px | Primary actions, mobile |
-
-```tsx
-<Button size="small" intent="neutral">Small</Button>
-<Button size="medium" intent="primary">Medium</Button>
-<Button size="large" intent="primary">Large</Button>
-```
-
-## States
-
-### Disabled State
-```tsx
-<Button 
-  disabled={true}
-  intent="primary"
-  onPress={handlePress}
->
-  Disabled Button
-</Button>
-```
-
-### Loading State (React Native)
-```tsx
-<Button 
-  loading={isLoading}
-  intent="primary"
-  onPress={handleAsyncAction}
->
-  {isLoading ? 'Loading...' : 'Submit'}
-</Button>
-```
-
-## Common Patterns
-
-### Form Actions
-```tsx
-<View style={{ flexDirection: 'row', gap: 12, justifyContent: 'flex-end' }}>
-  <Button variant="outlined" intent="neutral" onPress={handleCancel}>
-    Cancel
-  </Button>
-  <Button variant="contained" intent="primary" onPress={handleSubmit}>
-    Submit
-  </Button>
-</View>
-```
-
-### Destructive Actions
-```tsx
-<View style={{ flexDirection: 'row', gap: 12 }}>
-  <Button variant="outlined" intent="neutral" onPress={handleCancel}>
-    Cancel
-  </Button>
-  <Button variant="contained" intent="error" onPress={handleDelete}>
-    Delete Forever
-  </Button>
-</View>
-```
-
-### Call-to-Action Groups
-```tsx
-<View style={{ gap: 12 }}>
-  <Button 
-    variant="contained" 
-    intent="primary" 
-    size="large"
-    onPress={handleGetStarted}
-  >
-    Get Started
-  </Button>
-  <Button 
-    variant="text" 
-    intent="neutral"
-    onPress={handleLearnMore}
-  >
-    Learn More
-  </Button>
-</View>
-```
-
-## Accessibility
-
-- Proper focus management and keyboard navigation
-- ARIA labels and roles for screen readers
-- Sufficient contrast ratios for all variants
-- Disabled state properly communicated to assistive technologies
-- Touch targets meet minimum size requirements (44px)
-
-## Styling
-
-```tsx
-// Custom button styling
-<Button 
-  variant="contained"
-  intent="primary"
-  style={{
-    borderRadius: 20,
-    paddingHorizontal: 24,
-  }}
-  onPress={handlePress}
->
-  Custom Styled
-</Button>
-```
-
-## Best Practices
-
-1. **Use appropriate intents** - Match button color to action semantics
-2. **Limit contained buttons** - Use one primary contained button per view
-3. **Provide clear labels** - Button text should describe the action
-4. **Consider hierarchy** - Use variants to establish visual hierarchy
-5. **Mind touch targets** - Ensure buttons are large enough for touch interaction
-6. **Handle loading states** - Provide feedback for async actions
-7. **Test accessibility** - Verify with screen readers and keyboard navigation