@idealyst/components 1.0.38 → 1.0.40
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CLAUDE.md +173 -0
- package/LLM-ACCESS-GUIDE.md +143 -0
- package/README.md +66 -145
- package/package.json +7 -3
- package/src/Avatar/README.md +139 -0
- package/src/Badge/README.md +170 -0
- package/src/Button/README.md +262 -0
- package/src/Card/README.md +258 -0
- package/src/Checkbox/README.md +102 -0
- package/src/Divider/README.md +108 -0
- package/src/Icon/README.md +81 -0
- package/src/Input/README.md +100 -0
- package/src/Screen/README.md +86 -0
- package/src/Text/README.md +94 -0
- package/src/View/README.md +107 -0
- package/src/index.ts +1 -1
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
# Screen Component
|
|
2
|
+
|
|
3
|
+
A full-screen container component designed for app screens with theme-based backgrounds and safe area handling.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- ✅ Cross-platform (React & React Native)
|
|
8
|
+
- ✅ Theme-based background colors
|
|
9
|
+
- ✅ Safe area support for mobile devices
|
|
10
|
+
- ✅ Configurable padding options
|
|
11
|
+
- ✅ Flexible content layout
|
|
12
|
+
- ✅ TypeScript support
|
|
13
|
+
|
|
14
|
+
## Basic Usage
|
|
15
|
+
|
|
16
|
+
```tsx
|
|
17
|
+
import { Screen, View, Text } from '@idealyst/components';
|
|
18
|
+
|
|
19
|
+
// Basic screen
|
|
20
|
+
<Screen>
|
|
21
|
+
<Text>Screen content</Text>
|
|
22
|
+
</Screen>
|
|
23
|
+
|
|
24
|
+
// Screen with background and padding
|
|
25
|
+
<Screen
|
|
26
|
+
background="primary"
|
|
27
|
+
padding="lg"
|
|
28
|
+
safeArea
|
|
29
|
+
>
|
|
30
|
+
<View spacing="md">
|
|
31
|
+
<Text size="large" weight="bold">Welcome</Text>
|
|
32
|
+
<Text>This is a screen with safe area support</Text>
|
|
33
|
+
</View>
|
|
34
|
+
</Screen>
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
## Props
|
|
38
|
+
|
|
39
|
+
| Prop | Type | Default | Description |
|
|
40
|
+
|------|------|---------|-------------|
|
|
41
|
+
| `children` | `ReactNode` | - | Content to display in the screen |
|
|
42
|
+
| `background` | `'primary' \| 'secondary' \| 'tertiary' \| 'inverse'` | `'primary'` | Background color variant |
|
|
43
|
+
| `padding` | `'none' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Screen padding |
|
|
44
|
+
| `safeArea` | `boolean` | `false` | Enable safe area padding |
|
|
45
|
+
| `style` | `ViewStyle` | - | Additional custom styles |
|
|
46
|
+
| `testID` | `string` | - | Test identifier for testing |
|
|
47
|
+
|
|
48
|
+
## Background Variants
|
|
49
|
+
|
|
50
|
+
- `primary` - Main app background (usually light/dark based on theme)
|
|
51
|
+
- `secondary` - Secondary background color
|
|
52
|
+
- `tertiary` - Tertiary background for depth
|
|
53
|
+
- `inverse` - Contrasting background color
|
|
54
|
+
|
|
55
|
+
## Examples
|
|
56
|
+
|
|
57
|
+
### App Screens
|
|
58
|
+
```tsx
|
|
59
|
+
// Home screen
|
|
60
|
+
<Screen background="primary" safeArea>
|
|
61
|
+
<View spacing="lg">
|
|
62
|
+
<Text size="xlarge" weight="bold">Dashboard</Text>
|
|
63
|
+
{/* Screen content */}
|
|
64
|
+
</View>
|
|
65
|
+
</Screen>
|
|
66
|
+
|
|
67
|
+
// Settings screen
|
|
68
|
+
<Screen background="secondary" padding="lg">
|
|
69
|
+
<Text size="large" weight="bold">Settings</Text>
|
|
70
|
+
{/* Settings content */}
|
|
71
|
+
</Screen>
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
### Modal Screens
|
|
75
|
+
```tsx
|
|
76
|
+
<Screen
|
|
77
|
+
background="inverse"
|
|
78
|
+
padding="xl"
|
|
79
|
+
style={{
|
|
80
|
+
borderTopLeftRadius: 16,
|
|
81
|
+
borderTopRightRadius: 16
|
|
82
|
+
}}
|
|
83
|
+
>
|
|
84
|
+
<Text size="large" weight="bold">Modal Content</Text>
|
|
85
|
+
</Screen>
|
|
86
|
+
```
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
# Text Component
|
|
2
|
+
|
|
3
|
+
A comprehensive text component with extensive styling options and theme integration.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- ✅ Cross-platform (React & React Native)
|
|
8
|
+
- ✅ Multiple sizes and weights
|
|
9
|
+
- ✅ Color variants and intent-based colors
|
|
10
|
+
- ✅ Text alignment options
|
|
11
|
+
- ✅ Theme integration
|
|
12
|
+
- ✅ TypeScript support
|
|
13
|
+
|
|
14
|
+
## Basic Usage
|
|
15
|
+
|
|
16
|
+
```tsx
|
|
17
|
+
import { Text } from '@idealyst/components';
|
|
18
|
+
|
|
19
|
+
// Basic text
|
|
20
|
+
<Text>Hello World</Text>
|
|
21
|
+
|
|
22
|
+
// Styled text
|
|
23
|
+
<Text
|
|
24
|
+
size="large"
|
|
25
|
+
weight="bold"
|
|
26
|
+
color="primary"
|
|
27
|
+
align="center"
|
|
28
|
+
>
|
|
29
|
+
Welcome to the App
|
|
30
|
+
</Text>
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## Props
|
|
34
|
+
|
|
35
|
+
| Prop | Type | Default | Description |
|
|
36
|
+
|------|------|---------|-------------|
|
|
37
|
+
| `children` | `ReactNode` | - | Text content to display |
|
|
38
|
+
| `size` | `'small' \| 'medium' \| 'large' \| 'xlarge'` | `'medium'` | Font size |
|
|
39
|
+
| `weight` | `'light' \| 'normal' \| 'medium' \| 'semibold' \| 'bold'` | `'normal'` | Font weight |
|
|
40
|
+
| `color` | `ColorVariant \| string` | - | Text color |
|
|
41
|
+
| `intent` | `IntentVariant` | - | Intent-based color scheme |
|
|
42
|
+
| `align` | `'left' \| 'center' \| 'right'` | `'left'` | Text alignment |
|
|
43
|
+
| `style` | `TextStyle` | - | Additional custom styles |
|
|
44
|
+
|
|
45
|
+
## Size Options
|
|
46
|
+
|
|
47
|
+
| Size | Font Size | Use Case |
|
|
48
|
+
|------|-----------|----------|
|
|
49
|
+
| `small` | 12px | Captions, helper text |
|
|
50
|
+
| `medium` | 14px | Body text, standard content |
|
|
51
|
+
| `large` | 16px | Headings, important text |
|
|
52
|
+
| `xlarge` | 20px | Page titles, feature headings |
|
|
53
|
+
|
|
54
|
+
## Weight Options
|
|
55
|
+
|
|
56
|
+
- `light` - Light font weight
|
|
57
|
+
- `normal` - Regular font weight (default)
|
|
58
|
+
- `medium` - Medium font weight
|
|
59
|
+
- `semibold` - Semi-bold font weight
|
|
60
|
+
- `bold` - Bold font weight
|
|
61
|
+
|
|
62
|
+
## Examples
|
|
63
|
+
|
|
64
|
+
### Headings
|
|
65
|
+
```tsx
|
|
66
|
+
<Text size="xlarge" weight="bold">Page Title</Text>
|
|
67
|
+
<Text size="large" weight="semibold">Section Heading</Text>
|
|
68
|
+
<Text size="medium" weight="medium">Subsection</Text>
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
### Body Text
|
|
72
|
+
```tsx
|
|
73
|
+
<Text size="medium">
|
|
74
|
+
This is regular body text with normal weight and medium size.
|
|
75
|
+
</Text>
|
|
76
|
+
<Text size="small" color="secondary">
|
|
77
|
+
This is caption text with smaller size and secondary color.
|
|
78
|
+
</Text>
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
### Intent Colors
|
|
82
|
+
```tsx
|
|
83
|
+
<Text intent="success">Success message</Text>
|
|
84
|
+
<Text intent="error">Error message</Text>
|
|
85
|
+
<Text intent="warning">Warning message</Text>
|
|
86
|
+
<Text intent="primary">Primary text</Text>
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
### Alignment
|
|
90
|
+
```tsx
|
|
91
|
+
<Text align="left">Left aligned text</Text>
|
|
92
|
+
<Text align="center">Center aligned text</Text>
|
|
93
|
+
<Text align="right">Right aligned text</Text>
|
|
94
|
+
```
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
# View Component
|
|
2
|
+
|
|
3
|
+
A flexible container component with built-in spacing and styling options.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- ✅ Cross-platform (React & React Native)
|
|
8
|
+
- ✅ Built-in spacing system
|
|
9
|
+
- ✅ Background color variants
|
|
10
|
+
- ✅ Flexible layout options
|
|
11
|
+
- ✅ Theme integration
|
|
12
|
+
- ✅ TypeScript support
|
|
13
|
+
|
|
14
|
+
## Basic Usage
|
|
15
|
+
|
|
16
|
+
```tsx
|
|
17
|
+
import { View, Text } from '@idealyst/components';
|
|
18
|
+
|
|
19
|
+
// Basic view
|
|
20
|
+
<View>
|
|
21
|
+
<Text>Content inside view</Text>
|
|
22
|
+
</View>
|
|
23
|
+
|
|
24
|
+
// View with spacing
|
|
25
|
+
<View spacing="lg">
|
|
26
|
+
<Text>First item</Text>
|
|
27
|
+
<Text>Second item</Text>
|
|
28
|
+
<Text>Third item</Text>
|
|
29
|
+
</View>
|
|
30
|
+
|
|
31
|
+
// Styled view
|
|
32
|
+
<View
|
|
33
|
+
spacing="md"
|
|
34
|
+
background="secondary"
|
|
35
|
+
style={{ padding: 16, borderRadius: 8 }}
|
|
36
|
+
>
|
|
37
|
+
<Text>Styled content</Text>
|
|
38
|
+
</View>
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## Props
|
|
42
|
+
|
|
43
|
+
| Prop | Type | Default | Description |
|
|
44
|
+
|------|------|---------|-------------|
|
|
45
|
+
| `children` | `ReactNode` | - | Content to display inside the view |
|
|
46
|
+
| `spacing` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl'` | - | Gap between child elements |
|
|
47
|
+
| `background` | `BackgroundVariant` | - | Background color variant |
|
|
48
|
+
| `style` | `ViewStyle` | - | Additional custom styles |
|
|
49
|
+
|
|
50
|
+
## Spacing System
|
|
51
|
+
|
|
52
|
+
The spacing prop adds consistent gaps between child elements:
|
|
53
|
+
|
|
54
|
+
| Spacing | Value | Use Case |
|
|
55
|
+
|---------|-------|----------|
|
|
56
|
+
| `xs` | 4px | Tight spacing |
|
|
57
|
+
| `sm` | 8px | Small spacing |
|
|
58
|
+
| `md` | 16px | Medium spacing |
|
|
59
|
+
| `lg` | 24px | Large spacing |
|
|
60
|
+
| `xl` | 32px | Extra large spacing |
|
|
61
|
+
| `xxl` | 48px | Extra extra large spacing |
|
|
62
|
+
|
|
63
|
+
## Examples
|
|
64
|
+
|
|
65
|
+
### Vertical Lists
|
|
66
|
+
```tsx
|
|
67
|
+
<View spacing="md">
|
|
68
|
+
<Text size="large" weight="bold">Settings</Text>
|
|
69
|
+
<Text>Profile Settings</Text>
|
|
70
|
+
<Text>Notification Settings</Text>
|
|
71
|
+
<Text>Privacy Settings</Text>
|
|
72
|
+
</View>
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
### Card Content
|
|
76
|
+
```tsx
|
|
77
|
+
<Card>
|
|
78
|
+
<View spacing="sm">
|
|
79
|
+
<Text size="large" weight="bold">Card Title</Text>
|
|
80
|
+
<Text color="secondary">Card subtitle</Text>
|
|
81
|
+
<Text>Card content goes here with proper spacing between elements.</Text>
|
|
82
|
+
</View>
|
|
83
|
+
</Card>
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
### Form Layout
|
|
87
|
+
```tsx
|
|
88
|
+
<View spacing="lg">
|
|
89
|
+
<Input label="Name" value={name} onChangeText={setName} />
|
|
90
|
+
<Input label="Email" value={email} onChangeText={setEmail} />
|
|
91
|
+
<Button onPress={handleSubmit}>Submit</Button>
|
|
92
|
+
</View>
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
### Nested Views
|
|
96
|
+
```tsx
|
|
97
|
+
<View spacing="xl">
|
|
98
|
+
<View spacing="sm">
|
|
99
|
+
<Text size="large" weight="bold">Section 1</Text>
|
|
100
|
+
<Text>Content for section 1</Text>
|
|
101
|
+
</View>
|
|
102
|
+
<View spacing="sm">
|
|
103
|
+
<Text size="large" weight="bold">Section 2</Text>
|
|
104
|
+
<Text>Content for section 2</Text>
|
|
105
|
+
</View>
|
|
106
|
+
</View>
|
|
107
|
+
```
|
package/src/index.ts
CHANGED