@idealyst/components 1.0.83 → 1.0.84

package/src/Icon/README.md

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

@@ -1,100 +0,0 @@
-# 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..."
-/>
-```

package/src/SVGImage/README.md

@@ -1,209 +0,0 @@
-# SVGImage Component
-
-A cross-platform React/React Native component for rendering SVG images with theme support and consistent styling.
-
-## Overview
-
-The SVGImage component provides a unified way to display SVG images across web and React Native platforms. It supports both imported SVG files (as React components) and remote SVG URLs, with built-in theming and styling capabilities.
-
-## Installation
-
-The SVGImage component is part of the `@idealyst/components` package:
-
-```bash
-yarn add @idealyst/components
-```
-
-For React Native projects, you also need:
-```bash
-yarn add react-native-svg react-native-svg-transformer
-```
-
-## Basic Usage
-
-### Imported SVG Files (Recommended)
-
-```tsx
-import { SVGImage } from '@idealyst/components';
-import MyLogo from './assets/logo.svg';
-
-function MyComponent() {
-  return (
-    <SVGImage 
-      source={MyLogo}
-      width={100}
-      height={50}
-    />
-  );
-}
-```
-
-### Remote SVG URLs
-
-```tsx
-import { SVGImage } from '@idealyst/components';
-
-function MyComponent() {
-  return (
-    <SVGImage 
-      source={{ uri: "https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/react.svg" }}
-      width={60}
-      height={60}
-      color="#61dafb"
-    />
-  );
-}
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `source` | `string \| { uri: string } \| React.FC<SvgProps>` | **Required** | SVG source - can be imported component, URL string, or URI object |
-| `width` | `number \| string` | `24` | Width of the SVG |
-| `height` | `number \| string` | `24` | Height of the SVG |
-| `size` | `number \| string` | - | Sets both width and height (overrides individual width/height) |
-| `color` | `string` | - | Fill color for the SVG |
-| `intent` | `'primary' \| 'success' \| 'error' \| 'warning' \| 'neutral'` | - | Theme-based color intent |
-| `style` | `ViewStyle` | - | Additional container styles |
-| `testID` | `string` | - | Test identifier |
-
-## Theme Integration
-
-The SVGImage component integrates with the Idealyst theme system:
-
-```tsx
-<SVGImage 
-  source={MyIcon}
-  size={24}
-  intent="primary" // Uses theme's primary color
-/>
-
-<SVGImage 
-  source={MyIcon}
-  size={24}
-  intent="success" // Uses theme's success color
-/>
-```
-
-## Platform Setup
-
-### React Native Setup
-
-1. **Install dependencies:**
-   ```bash
-   yarn add react-native-svg react-native-svg-transformer
-   ```
-
-2. **Configure Metro bundler** (`metro.config.js`):
-   ```javascript
-   const config = {
-     transformer: {
-       babelTransformerPath: require.resolve('react-native-svg-transformer'),
-     },
-     resolver: {
-       sourceExts: ['js', 'jsx', 'ts', 'tsx', 'svg'],
-       assetExts: ['png', 'jpg', 'jpeg', 'gif', 'webp'],
-     },
-   };
-   ```
-
-3. **Add TypeScript declarations** (`types/svg.d.ts`):
-   ```typescript
-   declare module '*.svg' {
-     import React from 'react';
-     import { SvgProps } from 'react-native-svg';
-     const content: React.FC<SvgProps>;
-     export default content;
-   }
-   ```
-
-4. **iOS: Install pods:**
-   ```bash
-   cd ios && pod install
-   ```
-
-### Web Setup
-
-For web projects using Vite, SVG imports work out of the box. Add TypeScript declarations if needed:
-
-```typescript
-// types/svg.d.ts
-declare module '*.svg' {
-  import React from 'react';
-  const content: React.FC<React.SVGProps<SVGSVGElement>>;
-  export default content;
-}
-```
-
-## Examples
-
-### Basic Usage
-```tsx
-import { SVGImage } from '@idealyst/components';
-import LogoIcon from './logo.svg';
-
-<SVGImage source={LogoIcon} size={40} />
-```
-
-### With Theme Colors
-```tsx
-<SVGImage 
-  source={LogoIcon} 
-  size={32}
-  intent="primary"
-/>
-```
-
-### Remote SVG
-```tsx
-<SVGImage 
-  source={{ uri: "https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/typescript.svg" }}
-  width={48}
-  height={48}
-  color="#3178c6"
-/>
-```
-
-### Custom Styling
-```tsx
-<SVGImage 
-  source={LogoIcon}
-  size={60}
-  style={{ 
-    backgroundColor: '#f0f0f0',
-    borderRadius: 8,
-    padding: 8 
-  }}
-/>
-```
-
-## Best Practices
-
-1. **Prefer imported SVGs over URLs** - Better performance and reliability
-2. **Use theme intents** - Ensures consistency with your design system
-3. **Provide dimensions** - Always specify width/height or size
-4. **Test on both platforms** - Verify SVGs render correctly on web and mobile
-5. **Use CDN URLs** - For remote SVGs, use reliable CDNs like jsDelivr
-
-## Limitations
-
-- **React Native**: Local SVG files must be imported as components (not file paths)
-- **Remote URLs**: Some servers may block requests from mobile apps (403 errors)
-- **Coloring**: Works best with single-color SVG icons
-
-## Troubleshooting
-
-### SVGs not showing on React Native
-- Ensure `react-native-svg-transformer` is configured in Metro
-- Check that SVGs are imported as components, not file paths
-- Verify pods are installed on iOS
-
-### Remote SVGs failing
-- Use CDN URLs (e.g., jsDelivr, unpkg) instead of direct server URLs
-- Check browser console for CORS or 403 errors
-- Consider hosting SVGs on your own CDN
-
-### TypeScript errors
-- Add SVG type declarations to your project
-- Ensure `react-native-svg` types are installed

package/src/Screen/README.md

@@ -1,86 +0,0 @@
-# Screen Component
-
-A full-screen container component designed for app screens with theme-based backgrounds and safe area handling.
-
-## Features
-
-- ✅ Cross-platform (React & React Native)
-- ✅ Theme-based background colors
-- ✅ Safe area support for mobile devices
-- ✅ Configurable padding options
-- ✅ Flexible content layout
-- ✅ TypeScript support
-
-## Basic Usage
-
-```tsx
-import { Screen, View, Text } from '@idealyst/components';
-
-// Basic screen
-<Screen>
-  <Text>Screen content</Text>
-</Screen>
-
-// Screen with background and padding
-<Screen 
-  background="primary" 
-  padding="lg"
-  safeArea
->
-  <View spacing="md">
-    <Text size="large" weight="bold">Welcome</Text>
-    <Text>This is a screen with safe area support</Text>
-  </View>
-</Screen>
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children` | `ReactNode` | - | Content to display in the screen |
-| `background` | `'primary' \| 'secondary' \| 'tertiary' \| 'inverse'` | `'primary'` | Background color variant |
-| `padding` | `'none' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Screen padding |
-| `safeArea` | `boolean` | `false` | Enable safe area padding |
-| `style` | `ViewStyle` | - | Additional custom styles |
-| `testID` | `string` | - | Test identifier for testing |
-
-## Background Variants
-
-- `primary` - Main app background (usually light/dark based on theme)
-- `secondary` - Secondary background color
-- `tertiary` - Tertiary background for depth
-- `inverse` - Contrasting background color
-
-## Examples
-
-### App Screens
-```tsx
-// Home screen
-<Screen background="primary" safeArea>
-  <View spacing="lg">
-    <Text size="xlarge" weight="bold">Dashboard</Text>
-    {/* Screen content */}
-  </View>
-</Screen>
-
-// Settings screen
-<Screen background="secondary" padding="lg">
-  <Text size="large" weight="bold">Settings</Text>
-  {/* Settings content */}
-</Screen>
-```
-
-### Modal Screens
-```tsx
-<Screen 
-  background="inverse" 
-  padding="xl"
-  style={{ 
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 16 
-  }}
->
-  <Text size="large" weight="bold">Modal Content</Text>
-</Screen>
-```

package/src/Select/README.md

@@ -1,166 +0,0 @@
-# Select Component
-
-A cross-platform Select component for choosing from a list of options.
-
-## Features
-
-- **Cross-platform**: Works on both web and React Native
-- **iOS ActionSheet support**: Native presentation mode on iOS
-- **Searchable**: Optional search/filter functionality
-- **Keyboard navigation**: Full keyboard support on web
-- **Customizable styling**: Variants, intents, and sizes
-- **Accessibility**: Proper ARIA attributes and screen reader support
-
-## Basic Usage
-
-```tsx
-import { Select } from '@idealyst/components';
-
-const options = [
-  { value: 'apple', label: 'Apple' },
-  { value: 'banana', label: 'Banana' },
-  { value: 'orange', label: 'Orange' },
-];
-
-function MyComponent() {
-  const [value, setValue] = useState('');
-
-  return (
-    <Select
-      options={options}
-      value={value}
-      onValueChange={setValue}
-      placeholder="Choose a fruit"
-    />
-  );
-}
-```
-
-## With Icons
-
-```tsx
-const options = [
-  {
-    value: 'user',
-    label: 'User Profile',
-    icon: <Icon name="user" />
-  },
-  {
-    value: 'settings',
-    label: 'Settings',
-    icon: <Icon name="settings" />
-  },
-];
-
-<Select
-  options={options}
-  value={value}
-  onValueChange={setValue}
-  placeholder="Choose an option"
-/>
-```
-
-## Searchable Select
-
-```tsx
-<Select
-  options={largeOptionsList}
-  value={value}
-  onValueChange={setValue}
-  searchable
-  placeholder="Search and select..."
-/>
-```
-
-## iOS ActionSheet (Native only)
-
-```tsx
-<Select
-  options={options}
-  value={value}
-  onValueChange={setValue}
-  presentationMode="actionSheet" // iOS only
-  label="Choose an option"
-/>
-```
-
-## Form Integration
-
-```tsx
-<View spacing="md">
-  <Select
-    label="Country"
-    options={countryOptions}
-    value={country}
-    onValueChange={setCountry}
-    error={!!errors.country}
-    helperText={errors.country || "Select your country"}
-    variant="outlined"
-    intent="primary"
-  />
-</View>
-```
-
-## API Reference
-
-### SelectProps
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `options` | `SelectOption[]` | - | Array of options to display |
-| `value` | `string` | - | Currently selected value |
-| `onValueChange` | `(value: string) => void` | - | Called when selection changes |
-| `placeholder` | `string` | `"Select an option"` | Placeholder text |
-| `disabled` | `boolean` | `false` | Whether the select is disabled |
-| `error` | `boolean` | `false` | Whether to show error state |
-| `helperText` | `string` | - | Helper text below select |
-| `label` | `string` | - | Label text above select |
-| `variant` | `'outlined' \| 'filled'` | `'outlined'` | Visual variant |
-| `intent` | `IntentVariant` | `'neutral'` | Color scheme |
-| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Component size |
-| `searchable` | `boolean` | `false` | Enable search functionality |
-| `filterOption` | `(option, searchTerm) => boolean` | - | Custom filter function |
-| `presentationMode` | `'dropdown' \| 'actionSheet'` | `'dropdown'` | Native presentation mode (iOS) |
-| `maxHeight` | `number` | `240` | Max height for dropdown |
-
-### SelectOption
-
-| Prop | Type | Description |
-|------|------|-------------|
-| `value` | `string` | Unique value for the option |
-| `label` | `string` | Display label |
-| `disabled` | `boolean` | Whether option is disabled |
-| `icon` | `ReactNode` | Optional icon or custom content |
-
-## Platform Differences
-
-### Web
-- Uses a custom dropdown overlay
-- Full keyboard navigation support
-- Hover effects and focus states
-- Searchable with text input
-
-### React Native
-- Modal-based dropdown by default
-- iOS ActionSheet support via `presentationMode="actionSheet"`
-- Touch-optimized interactions
-- Native keyboard handling
-
-## Styling
-
-The Select component uses Unistyles v3 for cross-platform styling with support for:
-
-- Variants (`outlined`, `filled`)
-- Intents (`primary`, `neutral`, `success`, `error`, `warning`, `info`)
-- Sizes (`small`, `medium`, `large`)
-- Error states
-- Disabled states
-- Focus states
-
-## Accessibility
-
-- Proper ARIA roles and attributes
-- Keyboard navigation (web)
-- Screen reader support
-- Focus management
-- Touch target sizing (44px minimum)