@idealyst/components 1.0.82 → 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/Text/README.md

@@ -1,94 +0,0 @@
-# Text Component
-
-A comprehensive text component with extensive styling options and theme integration.
-
-## Features
-
-- ✅ Cross-platform (React & React Native)
-- ✅ Multiple sizes and weights
-- ✅ Color variants and intent-based colors
-- ✅ Text alignment options
-- ✅ Theme integration
-- ✅ TypeScript support
-
-## Basic Usage
-
-```tsx
-import { Text } from '@idealyst/components';
-
-// Basic text
-<Text>Hello World</Text>
-
-// Styled text
-<Text 
-  size="large" 
-  weight="bold" 
-  color="primary"
-  align="center"
->
-  Welcome to the App
-</Text>
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children` | `ReactNode` | - | Text content to display |
-| `size` | `'small' \| 'medium' \| 'large' \| 'xlarge'` | `'medium'` | Font size |
-| `weight` | `'light' \| 'normal' \| 'medium' \| 'semibold' \| 'bold'` | `'normal'` | Font weight |
-| `color` | `ColorVariant \| string` | - | Text color |
-| `intent` | `IntentVariant` | - | Intent-based color scheme |
-| `align` | `'left' \| 'center' \| 'right'` | `'left'` | Text alignment |
-| `style` | `TextStyle` | - | Additional custom styles |
-
-## Size Options
-
-| Size | Font Size | Use Case |
-|------|-----------|----------|
-| `small` | 12px | Captions, helper text |
-| `medium` | 14px | Body text, standard content |
-| `large` | 16px | Headings, important text |
-| `xlarge` | 20px | Page titles, feature headings |
-
-## Weight Options
-
-- `light` - Light font weight
-- `normal` - Regular font weight (default)
-- `medium` - Medium font weight
-- `semibold` - Semi-bold font weight
-- `bold` - Bold font weight
-
-## Examples
-
-### Headings
-```tsx
-<Text size="xlarge" weight="bold">Page Title</Text>
-<Text size="large" weight="semibold">Section Heading</Text>
-<Text size="medium" weight="medium">Subsection</Text>
-```
-
-### Body Text
-```tsx
-<Text size="medium">
-  This is regular body text with normal weight and medium size.
-</Text>
-<Text size="small" color="secondary">
-  This is caption text with smaller size and secondary color.
-</Text>
-```
-
-### Intent Colors
-```tsx
-<Text intent="success">Success message</Text>
-<Text intent="error">Error message</Text>
-<Text intent="warning">Warning message</Text>
-<Text intent="primary">Primary text</Text>
-```
-
-### Alignment
-```tsx
-<Text align="left">Left aligned text</Text>
-<Text align="center">Center aligned text</Text>
-<Text align="right">Right aligned text</Text>
-```

package/src/View/README.md

@@ -1,107 +0,0 @@
-# View Component
-
-A flexible container component with built-in spacing and styling options.
-
-## Features
-
-- ✅ Cross-platform (React & React Native)
-- ✅ Built-in spacing system
-- ✅ Background color variants
-- ✅ Flexible layout options
-- ✅ Theme integration
-- ✅ TypeScript support
-
-## Basic Usage
-
-```tsx
-import { View, Text } from '@idealyst/components';
-
-// Basic view
-<View>
-  <Text>Content inside view</Text>
-</View>
-
-// View with spacing
-<View spacing="lg">
-  <Text>First item</Text>
-  <Text>Second item</Text>
-  <Text>Third item</Text>
-</View>
-
-// Styled view
-<View 
-  spacing="md"
-  background="secondary"
-  style={{ padding: 16, borderRadius: 8 }}
->
-  <Text>Styled content</Text>
-</View>
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children` | `ReactNode` | - | Content to display inside the view |
-| `spacing` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl'` | - | Gap between child elements |
-| `background` | `BackgroundVariant` | - | Background color variant |
-| `style` | `ViewStyle` | - | Additional custom styles |
-
-## Spacing System
-
-The spacing prop adds consistent gaps between child elements:
-
-| Spacing | Value | Use Case |
-|---------|-------|----------|
-| `xs` | 4px | Tight spacing |
-| `sm` | 8px | Small spacing |
-| `md` | 16px | Medium spacing |
-| `lg` | 24px | Large spacing |
-| `xl` | 32px | Extra large spacing |
-| `xxl` | 48px | Extra extra large spacing |
-
-## Examples
-
-### Vertical Lists
-```tsx
-<View spacing="md">
-  <Text size="large" weight="bold">Settings</Text>
-  <Text>Profile Settings</Text>
-  <Text>Notification Settings</Text>
-  <Text>Privacy Settings</Text>
-</View>
-```
-
-### Card Content
-```tsx
-<Card>
-  <View spacing="sm">
-    <Text size="large" weight="bold">Card Title</Text>
-    <Text color="secondary">Card subtitle</Text>
-    <Text>Card content goes here with proper spacing between elements.</Text>
-  </View>
-</Card>
-```
-
-### Form Layout
-```tsx
-<View spacing="lg">
-  <Input label="Name" value={name} onChangeText={setName} />
-  <Input label="Email" value={email} onChangeText={setEmail} />
-  <Button onPress={handleSubmit}>Submit</Button>
-</View>
-```
-
-### Nested Views
-```tsx
-<View spacing="xl">
-  <View spacing="sm">
-    <Text size="large" weight="bold">Section 1</Text>
-    <Text>Content for section 1</Text>
-  </View>
-  <View spacing="sm">
-    <Text size="large" weight="bold">Section 2</Text>
-    <Text>Content for section 2</Text>
-  </View>
-</View>
-```