@idealyst/components 1.0.83 → 1.0.85

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>
-```

package/src/examples/AllExamples.tsx

@@ -1,88 +0,0 @@
-import React from 'react';
-import { Screen, View, Text, Divider } from '../index';
-import { ButtonExamples } from './ButtonExamples';
-import { TextExamples } from './TextExamples';
-import { ViewExamples } from './ViewExamples';
-import { InputExamples } from './InputExamples';
-import { IconExamples } from './IconExamples';
-import { CardExamples } from './CardExamples';
-import { CheckboxExamples } from './CheckboxExamples';
-import { DividerExamples } from './DividerExamples';
-import { BadgeExamples } from './BadgeExamples';
-import { AvatarExamples } from './AvatarExamples';
-import { ScreenExamples } from './ScreenExamples';
-import { SVGImageExamples } from './SVGImageExamples';
-import { DialogExamples } from './DialogExamples';
-import { PopoverExamples } from './PopoverExamples';
-import { SelectExamples } from './SelectExamples';
-import { ThemeExtensionExamples } from './ThemeExtensionExamples';
-
-export const AllExamples = () => {
-  return (
-    <Screen background="primary" padding="xl">
-      <View spacing="none" style={{ maxWidth: 800, alignSelf: 'center' }}>
-      <Text size="xlarge" weight="bold" align="center" color="primary">
-        Idealyst Component Library Examples
-      </Text>
-      <Text size="medium" align="center" color="secondary">
-        Comprehensive showcase of all available components
-      </Text>
-      
-      <Divider spacing="large" intent="primary">
-        <Text size="small" weight="semibold" color="primary">COMPONENTS</Text>
-      </Divider>
-      
-      <ButtonExamples />
-      <Divider spacing="medium" />
-      
-      <TextExamples />
-      <Divider spacing="medium" />
-      
-      <ViewExamples />
-      <Divider spacing="medium" />
-      
-      <InputExamples />
-      <Divider spacing="medium" />
-      
-      <IconExamples />
-      <Divider spacing="medium" />
-      
-      <CardExamples />
-      <Divider spacing="medium" />
-      
-      <CheckboxExamples />
-      <Divider spacing="medium" />
-      
-      <DividerExamples />
-      <Divider spacing="medium" />
-      
-      <BadgeExamples />
-      <Divider spacing="medium" />
-      
-      <AvatarExamples />
-      <Divider spacing="medium" />
-      
-      <ScreenExamples />
-      <Divider spacing="medium" />
-      
-      <SVGImageExamples />
-      <Divider spacing="medium" />
-      
-      <DialogExamples />
-      <Divider spacing="medium" />
-      
-      <PopoverExamples />
-      <Divider spacing="medium" />
-
-      <SelectExamples />
-      <Divider spacing="medium" />
-
-      <Divider spacing="large" intent="success">
-        <Text size="small" weight="semibold" color="green">THEME SYSTEM</Text>
-      </Divider>
-      
-      <ThemeExtensionExamples />
-    </View>
-    </Screen>
-  );
-}; 

package/src/examples/README.md

@@ -1,136 +0,0 @@
-# Component Examples
-
-This directory contains comprehensive examples showcasing all components from the Idealyst component library. Each example demonstrates the various props, variants, and use cases for each component.
-
-## Available Examples
-
-### Individual Component Examples
-- **ButtonExamples**: Demonstrates all button variants, sizes, intents, and states
-- **TextExamples**: Shows text sizes, weights, colors, and alignment options
-- **ViewExamples**: Displays layout capabilities with spacing, backgrounds, and borders
-- **InputExamples**: Covers input types, sizes, variants, and states
-- **CardExamples**: Showcases card layouts, variants, intents, and interactive features
-- **CheckboxExamples**: Demonstrates checkbox states, sizes, intents, and custom content
-- **DividerExamples**: Shows divider orientations, variants, and styling options
-- **BadgeExamples**: Displays badge variants, intents, and use cases
-- **AvatarExamples**: Demonstrates avatar sizes, shapes, and fallback options
-
-### Master Example
-- **AllExamples**: A comprehensive showcase of all components in one scrollable view
-
-## Usage
-
-### Import Individual Examples
-```typescript
-import { ButtonExamples, TextExamples, CardExamples } from '@idealyst/components/examples';
-
-// Use in your component
-<ButtonExamples />
-```
-
-### Import All Examples
-```typescript
-import { AllExamples } from '@idealyst/components/examples';
-
-// Display all examples at once
-<AllExamples />
-```
-
-## Example Structure
-
-Each example component follows this structure:
-- **Header**: Component name and description
-- **Grouped Sections**: Related variants and properties
-- **Interactive Elements**: Demonstrating user interactions
-- **Edge Cases**: Disabled states, error states, etc.
-- **Real-world Usage**: Practical implementation examples
-
-## Features Demonstrated
-
-### Button Examples
-- Variants: contained, outlined, text
-- Sizes: small, medium, large
-- Intents: primary, neutral, success, error, warning
-- States: normal, disabled
-
-### Text Examples
-- Sizes: small, medium, large, xlarge
-- Weights: light, normal, medium, semibold, bold
-- Colors: primary, secondary, success, warning, error
-- Alignment: left, center, right
-
-### View Examples
-- Spacing: none, xs, sm, md, lg, xl
-- Backgrounds: transparent, surface, primary, secondary
-- Border radius: none, xs, sm, md, lg, xl
-- Borders: none, thin, thick
-- Layout patterns: flex layouts, positioning
-
-### Input Examples
-- Types: text, email, password, number
-- Sizes: small, medium, large
-- Variants: default, outlined, filled
-- States: normal, disabled, error, pre-filled
-- Auto-capitalization: none, sentences, words, characters
-
-### Card Examples
-- Variants: default, outlined, elevated, filled
-- Intents: neutral, primary, success, error, warning, info
-- Padding: none, small, medium, large
-- Radius: none, small, medium, large
-- Interactive: clickable, disabled states
-- Complex layouts: multi-element cards
-
-### Checkbox Examples
-- Basic states: checked, unchecked, indeterminate
-- Sizes: small, medium, large
-- Intents: primary, neutral, success, error, warning, info
-- Variants: default, outlined
-- States: normal, disabled
-- Custom content: complex labels, helper text, errors
-
-### Divider Examples
-- Orientations: horizontal, vertical
-- Variants: solid, dashed, dotted
-- Thickness: thin, medium, thick
-- Intents: primary, secondary, neutral, success, error, warning, info
-- Spacing: none, small, medium, large
-- With content: text labels, sections
-
-### Badge Examples
-- Variants: filled, outlined, dot
-- Sizes: small, medium, large
-- Intents: primary, success, error, warning, neutral, info
-- Use cases: numbers, status, categories, notifications
-
-### Avatar Examples
-- Sizes: small, medium, large, xlarge
-- Shapes: circle, square
-- Fallbacks: initials, placeholder text
-- Images: with proper fallbacks
-- Groups: overlapping avatars
-
-## Best Practices
-
-1. **Interactive Testing**: All examples include interactive elements to test functionality
-2. **Accessibility**: Examples demonstrate proper labeling and accessibility features
-3. **Responsive Design**: Components adapt to different screen sizes
-4. **Theme Integration**: All examples use the theme system properly
-5. **Real-world Context**: Examples show practical usage scenarios
-
-## Development Notes
-
-- Examples are built using the same components they demonstrate
-- All examples use TypeScript for type safety
-- Components follow the established design system patterns
-- Examples are optimized for both web and native platforms
-
-## Contributing
-
-When adding new components:
-1. Create a new example file: `ComponentNameExamples.tsx`
-2. Follow the established pattern of grouped sections
-3. Include all variants, sizes, and states
-4. Add interactive elements where applicable
-5. Export the component in `index.ts`
-6. Update the `AllExamples` component to include the new example 

package/src/examples/ValidationExamples.tsx

@@ -1,95 +0,0 @@
-/**
- * Validation Examples
- * 
- * This file demonstrates how the theme validation system works
- * and how components can use it to validate their props.
- */
-
-import React from 'react';
-import { View } from 'react-native';
-import { useUnistyles } from 'react-native-unistyles';
-import Text from '../Text';
-import Button from '../Button';
-import Badge from '../Badge';
-import { validateColorProp, validateIntentProp } from '../theme';
-
-export function ValidationExamples() {
-  const { theme } = useUnistyles();
-
-  // Example: Valid usage
-  const handleValidUsage = () => {
-    console.log('=== Valid Usage Examples ===');
-    
-    // These should not produce warnings
-    validateColorProp(theme, 'blue', 'Text');
-    validateColorProp(theme, 'primary', 'Text');
-    validateIntentProp(theme, 'primary', 'Button');
-    validateIntentProp(theme, 'success', 'Button');
-  };
-
-  // Example: Invalid usage
-  const handleInvalidUsage = () => {
-    console.log('=== Invalid Usage Examples ===');
-    
-    // These should produce warnings in development
-    validateColorProp(theme, 'invalidColor', 'Text');
-    validateColorProp(theme, 'neonPink', 'Text'); 
-    validateIntentProp(theme, 'invalidIntent', 'Button');
-    validateIntentProp(theme, 'danger', 'Button'); // 'danger' doesn't exist, should be 'error'
-  };
-
-  return (
-    <View style={{ padding: 20, gap: 16 }}>
-      <Text size="large" weight="bold">
-        Theme Validation Examples
-      </Text>
-      
-      <Text>
-        Open the browser console to see validation warnings when using invalid colors or intents.
-      </Text>
-
-      {/* Valid examples */}
-      <View style={{ gap: 8 }}>
-        <Text weight="semibold">✅ Valid Usage (no warnings):</Text>
-        <Text color="blue">Blue text (valid palette color)</Text>
-        <Text color="blue">Blue text (valid palette color)</Text>
-        <Button intent="primary" onPress={handleValidUsage}>
-          Valid Button
-        </Button>
-        <Badge color="green">Valid Badge</Badge>
-      </View>
-
-      {/* Invalid examples that would show warnings */}
-      <View style={{ gap: 8 }}>
-        <Text weight="semibold">⚠️ Invalid Usage (shows warnings):</Text>
-        <Button onPress={handleInvalidUsage}>
-          Click to Test Invalid Props (check console)
-        </Button>
-        
-        <Text size="small" color="secondary">
-          Note: The invalid examples are triggered programmatically to avoid 
-          runtime TypeScript errors. In real usage, TypeScript would catch 
-          most of these at compile time.
-        </Text>
-      </View>
-
-      {/* Extensibility example */}
-      <View style={{ gap: 8 }}>
-        <Text weight="semibold">🔧 Extensibility:</Text>
-        <Text size="small">
-          When you add new colors to your theme palette (e.g., 'orange', 'teal'), 
-          they automatically become available in all components that use ColorVariant.
-          The validation system will recognize them as valid options.
-        </Text>
-        
-        <Text size="small">
-          Example: If you add 'orange' to your theme.palettes, then 
-          &lt;Text color="orange"&gt; and &lt;Badge color="orange"&gt; 
-          will work without any code changes to the components.
-        </Text>
-      </View>
-    </View>
-  );
-}
-
-export default ValidationExamples;