@idealyst/components 1.0.24 → 1.0.26

package/src/examples/InputExamples.tsx

@@ -1,134 +1,134 @@
-import React, { useState } from 'react';
-import { Screen, View, Text, Input } from '../index';
-
-export const InputExamples = () => {
-  const [textValue, setTextValue] = useState('');
-  const [emailValue, setEmailValue] = useState('');
-  const [passwordValue, setPasswordValue] = useState('');
-  const [numberValue, setNumberValue] = useState('');
-
-  return (
-    <Screen background="primary" padding="lg">
-      <View spacing="none">
-      <Text size="large" weight="bold" align="center">
-        Input Examples
-      </Text>
-      
-      {/* Input Types */}
-      <View spacing="md">
-        <Text size="medium" weight="semibold">Input Types</Text>
-        <View spacing="sm" style={{ gap: 10 }}>
-          <Input
-            value={textValue}
-            onChangeText={setTextValue}
-            placeholder="Text input"
-            inputType="text"
-          />
-          <Input
-            value={emailValue}
-            onChangeText={setEmailValue}
-            placeholder="Email input"
-            inputType="email"
-          />
-          <Input
-            value={passwordValue}
-            onChangeText={setPasswordValue}
-            placeholder="Password input"
-            inputType="password"
-            secureTextEntry
-          />
-          <Input
-            value={numberValue}
-            onChangeText={setNumberValue}
-            placeholder="Number input"
-            inputType="number"
-          />
-        </View>
-      </View>
-
-      {/* Input Sizes */}
-      <View spacing="md">
-        <Text size="medium" weight="semibold">Sizes</Text>
-        <View spacing="sm" style={{ gap: 10 }}>
-          <Input
-            placeholder="Small input"
-            size="small"
-          />
-          <Input
-            placeholder="Medium input"
-            size="medium"
-          />
-          <Input
-            placeholder="Large input"
-            size="large"
-          />
-        </View>
-      </View>
-
-      {/* Input Variants */}
-      <View spacing="md">
-        <Text size="medium" weight="semibold">Variants</Text>
-        <View spacing="sm" style={{ gap: 10 }}>
-          <Input
-            placeholder="Default variant"
-            variant="default"
-          />
-          <Input
-            placeholder="Outlined variant"
-            variant="outlined"
-          />
-          <Input
-            placeholder="Filled variant"
-            variant="filled"
-          />
-        </View>
-      </View>
-
-      {/* Input States */}
-      <View spacing="md">
-        <Text size="medium" weight="semibold">States</Text>
-        <View spacing="sm" style={{ gap: 10 }}>
-          <Input
-            placeholder="Normal state"
-          />
-          <Input
-            placeholder="Disabled state"
-            disabled
-          />
-          <Input
-            placeholder="Error state"
-            hasError
-          />
-          <Input
-            value="Pre-filled value"
-            onChangeText={() => {}}
-          />
-        </View>
-      </View>
-
-      {/* Auto-capitalization Examples */}
-      <View spacing="md">
-        <Text size="medium" weight="semibold">Auto-capitalization</Text>
-        <View spacing="sm" style={{ gap: 10 }}>
-          <Input
-            placeholder="No capitalization"
-            autoCapitalize="none"
-          />
-          <Input
-            placeholder="Sentences capitalization"
-            autoCapitalize="sentences"
-          />
-          <Input
-            placeholder="Words capitalization"
-            autoCapitalize="words"
-          />
-          <Input
-            placeholder="Characters capitalization"
-            autoCapitalize="characters"
-          />
-        </View>
-      </View>
-    </View>
-    </Screen>
-  );
+import React, { useState } from 'react';
+import { Screen, View, Text, Input } from '../index';
+
+export const InputExamples = () => {
+  const [textValue, setTextValue] = useState('');
+  const [emailValue, setEmailValue] = useState('');
+  const [passwordValue, setPasswordValue] = useState('');
+  const [numberValue, setNumberValue] = useState('');
+
+  return (
+    <Screen background="primary" padding="lg">
+      <View spacing="none">
+      <Text size="large" weight="bold" align="center">
+        Input Examples
+      </Text>
+      
+      {/* Input Types */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Input Types</Text>
+        <View spacing="sm" style={{ gap: 10 }}>
+          <Input
+            value={textValue}
+            onChangeText={setTextValue}
+            placeholder="Text input"
+            inputType="text"
+          />
+          <Input
+            value={emailValue}
+            onChangeText={setEmailValue}
+            placeholder="Email input"
+            inputType="email"
+          />
+          <Input
+            value={passwordValue}
+            onChangeText={setPasswordValue}
+            placeholder="Password input"
+            inputType="password"
+            secureTextEntry
+          />
+          <Input
+            value={numberValue}
+            onChangeText={setNumberValue}
+            placeholder="Number input"
+            inputType="number"
+          />
+        </View>
+      </View>
+
+      {/* Input Sizes */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Sizes</Text>
+        <View spacing="sm" style={{ gap: 10 }}>
+          <Input
+            placeholder="Small input"
+            size="small"
+          />
+          <Input
+            placeholder="Medium input"
+            size="medium"
+          />
+          <Input
+            placeholder="Large input"
+            size="large"
+          />
+        </View>
+      </View>
+
+      {/* Input Variants */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Variants</Text>
+        <View spacing="sm" style={{ gap: 10 }}>
+          <Input
+            placeholder="Default variant"
+            variant="default"
+          />
+          <Input
+            placeholder="Outlined variant"
+            variant="outlined"
+          />
+          <Input
+            placeholder="Filled variant"
+            variant="filled"
+          />
+        </View>
+      </View>
+
+      {/* Input States */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">States</Text>
+        <View spacing="sm" style={{ gap: 10 }}>
+          <Input
+            placeholder="Normal state"
+          />
+          <Input
+            placeholder="Disabled state"
+            disabled
+          />
+          <Input
+            placeholder="Error state"
+            hasError
+          />
+          <Input
+            value="Pre-filled value"
+            onChangeText={() => {}}
+          />
+        </View>
+      </View>
+
+      {/* Auto-capitalization Examples */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Auto-capitalization</Text>
+        <View spacing="sm" style={{ gap: 10 }}>
+          <Input
+            placeholder="No capitalization"
+            autoCapitalize="none"
+          />
+          <Input
+            placeholder="Sentences capitalization"
+            autoCapitalize="sentences"
+          />
+          <Input
+            placeholder="Words capitalization"
+            autoCapitalize="words"
+          />
+          <Input
+            placeholder="Characters capitalization"
+            autoCapitalize="characters"
+          />
+        </View>
+      </View>
+    </View>
+    </Screen>
+  );
 }; 

package/src/examples/README.md

@@ -1,136 +1,136 @@
-# 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`
+# 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