@idealyst/components 1.0.38 → 1.0.40

package/src/Card/README.md

@@ -0,0 +1,258 @@
+# 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

@@ -0,0 +1,102 @@
+# 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/Divider/README.md

@@ -0,0 +1,108 @@
+# 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

package/src/Icon/README.md

@@ -0,0 +1,81 @@
+# Icon Component
+
+A versatile icon component with extensive icon library and theming support.
+
+## Features
+
+- ✅ Cross-platform (React & React Native)
+- ✅ Extensive icon library
+- ✅ Multiple sizes and color options
+- ✅ Intent-based color schemes
+- ✅ TypeScript support with icon name validation
+
+## Basic Usage
+
+```tsx
+import { Icon } from '@idealyst/components';
+
+// Basic icon
+<Icon name="heart" />
+
+// Sized and colored icon
+<Icon 
+  name="star" 
+  size={24} 
+  color="primary" 
+/>
+
+// Icon with intent color
+<Icon 
+  name="check-circle" 
+  size="large" 
+  intent="success" 
+/>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `name` | `IconName` | **Required** | Name of the icon to display |
+| `size` | `number \| 'small' \| 'medium' \| 'large' \| 'xlarge'` | `'medium'` | Size of the icon |
+| `color` | `string \| ColorVariant` | - | Color of the icon |
+| `intent` | `IntentVariant` | - | Intent-based color scheme |
+| `style` | `ViewStyle` | - | Additional custom styles |
+| `testID` | `string` | - | Test identifier for testing |
+
+## Size Options
+
+| Size | Value | Use Case |
+|------|-------|----------|
+| `small` | 16px | Inline text, compact UI |
+| `medium` | 20px | Standard buttons, form elements |
+| `large` | 24px | Section headers, prominent actions |
+| `xlarge` | 32px | Feature highlights, empty states |
+
+## Common Icons
+
+Popular icon names include:
+- `heart`, `star`, `bookmark`
+- `check`, `x`, `plus`, `minus`
+- `chevron-left`, `chevron-right`, `chevron-up`, `chevron-down`
+- `home`, `user`, `settings`, `search`
+- `bell`, `mail`, `calendar`, `file`
+- `edit`, `delete`, `copy`, `share`
+
+## Examples
+
+### Button Icons
+```tsx
+<Button>
+  <Icon name="plus" size="small" color="white" />
+  Add Item
+</Button>
+```
+
+### Status Icons
+```tsx
+<Icon name="check-circle" intent="success" size="large" />
+<Icon name="x-circle" intent="error" size="large" />
+<Icon name="alert-triangle" intent="warning" size="large" />
+```

package/src/Input/README.md

@@ -0,0 +1,100 @@
+# Input Component
+
+A text input component with consistent styling and form integration.
+
+## Features
+
+- ✅ Cross-platform (React & React Native)
+- ✅ Multiple sizes and variants
+- ✅ Label and helper text support
+- ✅ Error state handling
+- ✅ Placeholder and validation
+- ✅ TypeScript support
+
+## Basic Usage
+
+```tsx
+import { Input } from '@idealyst/components';
+
+// Basic input
+<Input 
+  value={value}
+  onChangeText={setValue}
+  placeholder="Enter text..."
+/>
+
+// Input with label
+<Input 
+  label="Email Address"
+  value={email}
+  onChangeText={setEmail}
+  placeholder="you@example.com"
+  keyboardType="email-address"
+/>
+
+// Input with error
+<Input 
+  label="Password"
+  value={password}
+  onChangeText={setPassword}
+  error={passwordError}
+  secureTextEntry
+/>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `string` | **Required** | Current input value |
+| `onChangeText` | `(text: string) => void` | **Required** | Called when text changes |
+| `label` | `string` | - | Label text to display above input |
+| `placeholder` | `string` | - | Placeholder text |
+| `error` | `string` | - | Error message to display |
+| `helperText` | `string` | - | Helper text below input |
+| `disabled` | `boolean` | `false` | Whether input is disabled |
+| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Size of the input |
+| `variant` | `'outlined' \| 'filled'` | `'outlined'` | Visual style variant |
+| `required` | `boolean` | `false` | Whether input is required |
+| `multiline` | `boolean` | `false` | Allow multiple lines |
+| `style` | `ViewStyle` | - | Additional custom styles |
+
+## Examples
+
+### Form Inputs
+```tsx
+<View style={{ gap: 16 }}>
+  <Input 
+    label="Full Name"
+    value={name}
+    onChangeText={setName}
+    required
+  />
+  <Input 
+    label="Email"
+    value={email}
+    onChangeText={setEmail}
+    keyboardType="email-address"
+    error={emailError}
+  />
+  <Input 
+    label="Password"
+    value={password}
+    onChangeText={setPassword}
+    secureTextEntry
+    helperText="Must be at least 8 characters"
+  />
+</View>
+```
+
+### Multiline Input
+```tsx
+<Input 
+  label="Description"
+  value={description}
+  onChangeText={setDescription}
+  multiline
+  numberOfLines={4}
+  placeholder="Enter description..."
+/>
+```