@idealyst/components 1.0.83 → 1.0.84

package/src/Card/README.md

@@ -1,258 +0,0 @@
-# Card Component
-
-A flexible container component for displaying content in a visually grouped format with various styling options.
-
-## Features
-
-- ✅ Cross-platform (React & React Native)
-- ✅ Multiple variants (default, outlined, elevated, filled)
-- ✅ Configurable padding and border radius
-- ✅ Intent-based color schemes
-- ✅ Clickable/interactive support
-- ✅ Disabled state handling
-- ✅ Accessible with proper ARIA attributes
-- ✅ TypeScript support
-
-## Basic Usage
-
-```tsx
-import { Card, Text } from '@idealyst/components';
-
-// Basic card
-<Card>
-  <Text size="large" weight="bold">Card Title</Text>
-  <Text>Card content goes here</Text>
-</Card>
-
-// Clickable card
-<Card 
-  clickable 
-  onPress={() => console.log('Card pressed!')}
->
-  <Text>Click me!</Text>
-</Card>
-
-// Elevated card with custom styling
-<Card 
-  variant="elevated" 
-  padding="large"
-  radius="large"
->
-  <Text>Elevated card content</Text>
-</Card>
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children` | `ReactNode` | - | Content to display inside the card |
-| `variant` | `'default' \| 'outlined' \| 'elevated' \| 'filled'` | `'default'` | Visual style variant |
-| `padding` | `'none' \| 'small' \| 'medium' \| 'large'` | `'medium'` | Internal padding size |
-| `radius` | `'none' \| 'small' \| 'medium' \| 'large'` | `'medium'` | Border radius size |
-| `intent` | `IntentVariant` | `'neutral'` | Color scheme/intent |
-| `clickable` | `boolean` | `false` | Whether the card is interactive |
-| `onPress` | `() => void` | - | Function called when card is pressed (requires clickable) |
-| `disabled` | `boolean` | `false` | Whether the card is disabled |
-| `style` | `ViewStyle` | - | Additional custom styles |
-| `testID` | `string` | - | Test identifier for testing |
-| `accessibilityLabel` | `string` | - | Accessibility label for screen readers |
-
-## Variants
-
-### Default Card
-Basic card with subtle background.
-
-```tsx
-<Card variant="default">
-  <Text>Default card content</Text>
-</Card>
-```
-
-### Outlined Card
-Card with border and transparent background.
-
-```tsx
-<Card variant="outlined">
-  <Text>Outlined card content</Text>
-</Card>
-```
-
-### Elevated Card
-Card with shadow/elevation for depth.
-
-```tsx
-<Card variant="elevated">
-  <Text>Elevated card content</Text>
-</Card>
-```
-
-### Filled Card
-Card with solid background color.
-
-```tsx
-<Card variant="filled" intent="primary">
-  <Text>Filled card content</Text>
-</Card>
-```
-
-## Padding Options
-
-| Padding | Value | Use Case |
-|---------|-------|----------|
-| `none` | 0px | Custom content padding |
-| `small` | 8px | Compact cards |
-| `medium` | 16px | Standard cards |
-| `large` | 24px | Spacious cards |
-
-```tsx
-<Card padding="none">No padding</Card>
-<Card padding="small">Small padding</Card>
-<Card padding="medium">Medium padding</Card>
-<Card padding="large">Large padding</Card>
-```
-
-## Border Radius Options
-
-| Radius | Value | Use Case |
-|--------|-------|----------|
-| `none` | 0px | Sharp corners |
-| `small` | 4px | Subtle rounding |
-| `medium` | 8px | Standard rounding |
-| `large` | 16px | Prominent rounding |
-
-```tsx
-<Card radius="none">Sharp corners</Card>
-<Card radius="small">Subtle corners</Card>
-<Card radius="medium">Standard corners</Card>
-<Card radius="large">Rounded corners</Card>
-```
-
-## Intent Colors
-
-```tsx
-<Card intent="primary">Primary themed card</Card>
-<Card intent="neutral">Neutral themed card</Card>
-<Card intent="success">Success themed card</Card>
-<Card intent="error">Error themed card</Card>
-<Card intent="warning">Warning themed card</Card>
-```
-
-## Interactive Cards
-
-### Clickable Cards
-```tsx
-<Card 
-  clickable
-  onPress={() => navigation.navigate('Details')}
-  accessibilityLabel="Navigate to details"
->
-  <Text size="large" weight="bold">Product Title</Text>
-  <Text>Tap to view details</Text>
-</Card>
-```
-
-### Disabled Cards
-```tsx
-<Card 
-  clickable
-  disabled
-  onPress={() => {}}
->
-  <Text>This card is disabled</Text>
-</Card>
-```
-
-## Common Use Cases
-
-### Content Cards
-```tsx
-<Card variant="outlined" padding="large">
-  <Text size="large" weight="bold">Article Title</Text>
-  <Text size="small" color="secondary">Published 2 hours ago</Text>
-  <Text style={{ marginTop: 8 }}>
-    Article content preview...
-  </Text>
-</Card>
-```
-
-### Action Cards
-```tsx
-<Card 
-  variant="elevated"
-  clickable
-  onPress={handleAction}
-  style={{ alignItems: 'center' }}
->
-  <Icon name="plus" size={32} />
-  <Text weight="medium">Add New Item</Text>
-</Card>
-```
-
-### Status Cards
-```tsx
-<Card variant="filled" intent="success" padding="small">
-  <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
-    <Icon name="check" color="white" />
-    <Text color="white" weight="medium">Task Completed</Text>
-  </View>
-</Card>
-```
-
-### Grid Layout
-```tsx
-<View style={{ flexDirection: 'row', gap: 16, flexWrap: 'wrap' }}>
-  <Card 
-    variant="outlined" 
-    style={{ flex: 1, minWidth: 200 }}
-    clickable
-    onPress={() => {}}
-  >
-    <Text weight="bold">Card 1</Text>
-    <Text>Content 1</Text>
-  </Card>
-  <Card 
-    variant="outlined" 
-    style={{ flex: 1, minWidth: 200 }}
-    clickable
-    onPress={() => {}}
-  >
-    <Text weight="bold">Card 2</Text>
-    <Text>Content 2</Text>
-  </Card>
-</View>
-```
-
-## Accessibility
-
-- Automatically uses appropriate HTML elements (`div` vs `button`)
-- Proper ARIA roles and labels
-- Keyboard navigation support for clickable cards
-- Focus management and visual indicators
-- Screen reader compatibility
-
-## Styling
-
-```tsx
-// Custom card styling
-<Card 
-  variant="outlined"
-  style={{
-    borderColor: '#007AFF',
-    borderWidth: 2,
-    backgroundColor: '#F0F9FF',
-  }}
->
-  <Text>Custom styled card</Text>
-</Card>
-```
-
-## Best Practices
-
-1. **Use consistent variants** - Stick to one variant family in a section
-2. **Mind content hierarchy** - Use padding and spacing to create visual hierarchy
-3. **Consider interaction** - Make clickable cards visually distinct
-4. **Accessibility first** - Always provide proper labels for interactive cards
-5. **Performance** - Avoid complex nested structures in large lists
-6. **Responsive design** - Test cards across different screen sizes
-7. **Intent consistency** - Use intent colors meaningfully, not decoratively

package/src/Checkbox/README.md

@@ -1,102 +0,0 @@
-# Checkbox Component
-
-A customizable checkbox component with label support and theme integration.
-
-## Features
-
-- ✅ Cross-platform (React & React Native)
-- ✅ Multiple sizes (small, medium, large)
-- ✅ Intent-based color schemes
-- ✅ Label support with custom positioning
-- ✅ Disabled state handling
-- ✅ Accessible with proper ARIA attributes
-- ✅ TypeScript support
-
-## Basic Usage
-
-```tsx
-import { Checkbox } from '@idealyst/components';
-
-// Basic checkbox
-<Checkbox 
-  checked={isChecked}
-  onPress={() => setIsChecked(!isChecked)}
-/>
-
-// Checkbox with label
-<Checkbox 
-  checked={isAgreed}
-  onPress={() => setIsAgreed(!isAgreed)}
-  label="I agree to the terms and conditions"
-/>
-
-// Colored checkbox
-<Checkbox 
-  checked={isSelected}
-  onPress={() => setIsSelected(!isSelected)}
-  label="Enable notifications"
-  intent="success"
-  size="large"
-/>
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `checked` | `boolean` | `false` | Whether the checkbox is checked |
-| `onPress` | `() => void` | **Required** | Function called when checkbox is pressed |
-| `label` | `string` | - | Text label to display next to checkbox |
-| `disabled` | `boolean` | `false` | Whether the checkbox is disabled |
-| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Size of the checkbox |
-| `intent` | `IntentVariant` | `'primary'` | Color scheme/intent |
-| `labelPosition` | `'left' \| 'right'` | `'right'` | Position of label relative to checkbox |
-| `style` | `ViewStyle` | - | Additional custom styles |
-| `testID` | `string` | - | Test identifier for testing |
-
-## Examples
-
-### Different Sizes
-```tsx
-<Checkbox size="small" checked={small} onPress={() => setSmall(!small)} label="Small" />
-<Checkbox size="medium" checked={medium} onPress={() => setMedium(!medium)} label="Medium" />
-<Checkbox size="large" checked={large} onPress={() => setLarge(!large)} label="Large" />
-```
-
-### Intent Colors
-```tsx
-<Checkbox intent="primary" checked={primary} onPress={() => setPrimary(!primary)} label="Primary" />
-<Checkbox intent="success" checked={success} onPress={() => setSuccess(!success)} label="Success" />
-<Checkbox intent="error" checked={error} onPress={() => setError(!error)} label="Error" />
-<Checkbox intent="warning" checked={warning} onPress={() => setWarning(!warning)} label="Warning" />
-```
-
-### Label Positioning
-```tsx
-<Checkbox 
-  labelPosition="left" 
-  checked={leftLabel} 
-  onPress={() => setLeftLabel(!leftLabel)} 
-  label="Label on left" 
-/>
-<Checkbox 
-  labelPosition="right" 
-  checked={rightLabel} 
-  onPress={() => setRightLabel(!rightLabel)} 
-  label="Label on right" 
-/>
-```
-
-### Disabled State
-```tsx
-<Checkbox disabled checked={true} label="Disabled (checked)" />
-<Checkbox disabled checked={false} label="Disabled (unchecked)" />
-```
-
-## Best Practices
-
-1. **Provide clear labels** - Use descriptive text that explains what checking means
-2. **Group related checkboxes** - Use consistent spacing and alignment
-3. **Handle accessibility** - Ensure proper focus and screen reader support
-4. **Use appropriate intents** - Match colors to the action's semantic meaning
-5. **Test touch targets** - Ensure checkboxes are large enough for easy interaction

package/src/Dialog/README.md

@@ -1,210 +0,0 @@
-# Dialog Component
-
-A modal dialog component that creates a global overlay across the entire application. The Dialog component works consistently across web and React Native platforms.
-
-## Features
-
-- **Global Overlay**: Appears above all other content including navigation bars and tab bars
-- **Cross-Platform**: Uses React portals on web and Modal component on React Native
-- **Accessibility**: Focus management, escape key support (web), hardware back button handling (native)
-- **Theme Integration**: Supports intent-based colors and Unistyles variants
-- **Flexible Sizing**: Multiple size options from small to fullscreen
-- **Backdrop Interaction**: Configurable backdrop click behavior
-
-## Usage
-
-```tsx
-import { Dialog, Button, Text } from '@idealyst/components';
-import { useState } from 'react';
-
-const MyComponent = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <Button onPress={() => setOpen(true)}>
-        Open Dialog
-      </Button>
-      
-      <Dialog
-        open={open}
-        onOpenChange={setOpen}
-        title="Dialog Title"
-        size="medium"
-        variant="default"
-        intent="primary"
-      >
-        <Text>Dialog content goes here</Text>
-        <Button onPress={() => setOpen(false)}>
-          Close
-        </Button>
-      </Dialog>
-    </>
-  );
-};
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `open` | `boolean` | - | Whether the dialog is visible |
-| `onOpenChange` | `(open: boolean) => void` | - | Called when dialog should open/close |
-| `title` | `string` | - | Optional title displayed in header |
-| `children` | `ReactNode` | - | Content to display inside dialog |
-| `size` | `'small' \| 'medium' \| 'large' \| 'fullscreen'` | `'medium'` | Size of the dialog |
-| `variant` | `'default' \| 'alert' \| 'confirmation'` | `'default'` | Visual style variant |
-| `intent` | `'primary' \| 'neutral' \| 'success' \| 'error' \| 'warning'` | `'primary'` | Color scheme/semantic meaning |
-| `showCloseButton` | `boolean` | `true` | Whether to show close button in header |
-| `closeOnBackdropClick` | `boolean` | `true` | Whether clicking backdrop closes dialog |
-| `closeOnEscapeKey` | `boolean` | `true` | Whether escape key closes dialog (web only) |
-| `animationType` | `'slide' \| 'fade' \| 'none'` | `'fade'` | Animation type (native only) |
-| `style` | `any` | - | Additional platform-specific styles |
-| `testID` | `string` | - | Test identifier |
-
-## Variants
-
-### Size Variants
-- **small**: 400px max width, suitable for simple alerts
-- **medium**: 600px max width, good for forms and content
-- **large**: 800px max width, for complex layouts
-- **fullscreen**: Full screen coverage, removes border radius
-
-### Visual Variants
-- **default**: Standard dialog appearance
-- **alert**: Adds colored top border for alerts
-- **confirmation**: Adds colored top border for confirmations
-
-### Intent Colors
-When used with `alert` or `confirmation` variants:
-- **primary**: Blue top border
-- **success**: Green top border  
-- **error**: Red top border
-- **warning**: Orange top border
-- **neutral**: Gray top border
-
-## Platform Differences
-
-### Web Implementation
-- Uses React portals to render into `document.body`
-- Supports escape key to close
-- Automatic focus management and restoration
-- Click outside to close (configurable)
-- Body scroll prevention when open
-
-### React Native Implementation
-- Uses React Native's `Modal` component
-- Hardware back button handling on Android
-- Touch outside to close (configurable)
-- Configurable animation types
-
-## Examples
-
-### Basic Dialog
-```tsx
-<Dialog
-  open={isOpen}
-  onOpenChange={setIsOpen}
-  title="Basic Dialog"
->
-  <Text>Simple dialog content</Text>
-</Dialog>
-```
-
-### Alert Dialog
-```tsx
-<Dialog
-  open={alertOpen}
-  onOpenChange={setAlertOpen}
-  title="Important Alert"
-  variant="alert"
-  intent="warning"
->
-  <Text>This is an important message!</Text>
-</Dialog>
-```
-
-### Confirmation Dialog
-```tsx
-<Dialog
-  open={confirmOpen}
-  onOpenChange={setConfirmOpen}
-  title="Confirm Action"
-  variant="confirmation"
-  intent="error"
-  closeOnBackdropClick={false}
->
-  <Text>Are you sure you want to delete this item?</Text>
-  <View style={{ flexDirection: 'row', gap: 12, marginTop: 16 }}>
-    <Button variant="outlined" onPress={() => setConfirmOpen(false)}>
-      Cancel
-    </Button>
-    <Button variant="contained" intent="error" onPress={handleDelete}>
-      Delete
-    </Button>
-  </View>
-</Dialog>
-```
-
-### Fullscreen Dialog
-```tsx
-<Dialog
-  open={fullscreenOpen}
-  onOpenChange={setFullscreenOpen}
-  title="Fullscreen Dialog"
-  size="fullscreen"
->
-  <Text>This dialog covers the entire screen</Text>
-</Dialog>
-```
-
-## Accessibility
-
-- **Focus Management**: Automatically focuses dialog on open and restores focus on close (web)
-- **Keyboard Navigation**: Escape key support on web
-- **Screen Readers**: Proper ARIA roles and labels
-- **Touch Targets**: Minimum 44px touch targets for interactive elements
-- **Hardware Back Button**: Handled automatically on Android
-
-## Best Practices
-
-1. **Use appropriate sizes**: Choose size based on content complexity
-2. **Provide clear actions**: Always include a way to close the dialog
-3. **Use variants appropriately**: Choose alert or confirmation for important dialogs
-4. **Handle confirmation dialogs carefully**: Disable backdrop close for destructive actions
-5. **Keep content focused**: Dialogs should have a single, clear purpose
-6. **Test cross-platform**: Verify behavior on both web and native platforms
-
-## Common Patterns
-
-### Form Dialog
-```tsx
-<Dialog open={formOpen} onOpenChange={setFormOpen} title="Edit Profile">
-  <View spacing="md">
-    <Input label="Name" value={name} onChangeText={setName} />
-    <Input label="Email" value={email} onChangeText={setEmail} />
-    <View style={{ flexDirection: 'row', gap: 12 }}>
-      <Button variant="outlined" onPress={() => setFormOpen(false)}>
-        Cancel
-      </Button>
-      <Button variant="contained" onPress={handleSave}>
-        Save
-      </Button>
-    </View>
-  </View>
-</Dialog>
-```
-
-### Loading Dialog
-```tsx
-<Dialog 
-  open={loading} 
-  onOpenChange={() => {}} 
-  closeOnBackdropClick={false}
-  showCloseButton={false}
->
-  <View style={{ alignItems: 'center', padding: 20 }}>
-    <Text>Loading...</Text>
-  </View>
-</Dialog>
-```

package/src/Divider/README.md

@@ -1,108 +0,0 @@
-# Divider Component
-
-A flexible separator component for creating visual divisions between content sections.
-
-## Features
-
-- ✅ Cross-platform (React & React Native)
-- ✅ Horizontal and vertical orientations
-- ✅ Spacing variants (small, medium, large)
-- ✅ Intent-based color schemes
-- ✅ Optional content/children support
-- ✅ TypeScript support
-
-## Basic Usage
-
-```tsx
-import { Divider, Text } from '@idealyst/components';
-
-// Basic horizontal divider
-<Divider />
-
-// Divider with spacing
-<Divider spacing="large" />
-
-// Vertical divider
-<Divider orientation="vertical" />
-
-// Divider with content
-<Divider spacing="medium">
-  <Text size="small" color="secondary">OR</Text>
-</Divider>
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children` | `ReactNode` | - | Optional content to display in the divider |
-| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Direction of the divider |
-| `spacing` | `'small' \| 'medium' \| 'large'` | `'medium'` | Spacing around the divider |
-| `intent` | `IntentVariant` | `'neutral'` | Color scheme of the divider |
-| `variant` | `'solid' \| 'dashed' \| 'dotted'` | `'solid'` | Visual style of the line |
-| `thickness` | `'thin' \| 'medium' \| 'thick'` | `'thin'` | Thickness of the divider line |
-| `style` | `ViewStyle` | - | Additional custom styles |
-| `testID` | `string` | - | Test identifier for testing |
-
-## Examples
-
-### Basic Dividers
-```tsx
-<View>
-  <Text>Content above</Text>
-  <Divider />
-  <Text>Content below</Text>
-</View>
-```
-
-### Spacing Variants
-```tsx
-<View>
-  <Text>Small spacing</Text>
-  <Divider spacing="small" />
-  <Text>Medium spacing</Text>
-  <Divider spacing="medium" />
-  <Text>Large spacing</Text>
-  <Divider spacing="large" />
-  <Text>End content</Text>
-</View>
-```
-
-### Vertical Dividers
-```tsx
-<View style={{ flexDirection: 'row', alignItems: 'center', height: 40 }}>
-  <Text>Left</Text>
-  <Divider orientation="vertical" spacing="medium" />
-  <Text>Middle</Text>
-  <Divider orientation="vertical" spacing="medium" />
-  <Text>Right</Text>
-</View>
-```
-
-### Dividers with Content
-```tsx
-<View>
-  <Text>Sign in with your account</Text>
-  <Divider spacing="large">
-    <Text size="small" color="secondary">OR</Text>
-  </Divider>
-  <Text>Continue with social login</Text>
-</View>
-```
-
-### Styled Dividers
-```tsx
-<View>
-  <Divider variant="solid" intent="neutral" />
-  <Divider variant="dashed" intent="primary" />
-  <Divider variant="dotted" intent="secondary" />
-</View>
-```
-
-## Best Practices
-
-1. **Use appropriate spacing** - Match divider spacing to your content hierarchy
-2. **Consider orientation** - Use vertical dividers in horizontal layouts
-3. **Keep content minimal** - If using children, keep text short and meaningful
-4. **Maintain consistency** - Use the same divider style throughout your app
-5. **Accessibility** - Ensure dividers don't interfere with screen reader flow