@idealyst/components 1.0.23 → 1.0.25
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/README.md +567 -567
- package/package.json +2 -6
- package/plugin/web.js +319 -185
- package/src/Avatar/Avatar.native.tsx +43 -43
- package/src/Avatar/Avatar.styles.tsx +66 -66
- package/src/Avatar/Avatar.web.tsx +50 -50
- package/src/Avatar/index.native.ts +1 -1
- package/src/Avatar/index.ts +1 -1
- package/src/Avatar/index.web.ts +1 -1
- package/src/Avatar/types.ts +42 -42
- package/src/Badge/Badge.native.tsx +42 -42
- package/src/Badge/Badge.styles.tsx +153 -153
- package/src/Badge/Badge.web.tsx +44 -44
- package/src/Badge/index.native.ts +1 -1
- package/src/Badge/index.ts +1 -1
- package/src/Badge/index.web.ts +1 -1
- package/src/Badge/types.ts +33 -33
- package/src/Button/Button.native.tsx +38 -38
- package/src/Button/Button.styles.tsx +214 -214
- package/src/Button/Button.types.ts +11 -11
- package/src/Button/Button.web.tsx +55 -55
- package/src/Button/index.native.ts +2 -2
- package/src/Button/index.ts +4 -4
- package/src/Button/index.web.ts +2 -2
- package/src/Button/types.ts +48 -48
- package/src/Card/Card.native.tsx +51 -51
- package/src/Card/Card.styles.tsx +239 -239
- package/src/Card/Card.web.tsx +61 -61
- package/src/Card/index.native.ts +2 -2
- package/src/Card/index.ts +4 -4
- package/src/Card/index.web.ts +2 -2
- package/src/Card/types.ts +58 -58
- package/src/Checkbox/Checkbox.native.tsx +98 -98
- package/src/Checkbox/Checkbox.styles.tsx +291 -291
- package/src/Checkbox/Checkbox.web.tsx +130 -130
- package/src/Checkbox/index.native.ts +2 -2
- package/src/Checkbox/index.ts +4 -4
- package/src/Checkbox/index.web.ts +2 -2
- package/src/Checkbox/types.ts +78 -78
- package/src/Divider/Divider.native.tsx +144 -144
- package/src/Divider/Divider.styles.tsx +601 -601
- package/src/Divider/Divider.web.tsx +72 -72
- package/src/Divider/index.native.ts +2 -2
- package/src/Divider/index.ts +4 -4
- package/src/Divider/index.web.ts +2 -2
- package/src/Divider/types.ts +53 -53
- package/src/Icon/Icon.native.tsx +38 -38
- package/src/Icon/Icon.styles.tsx +49 -49
- package/src/Icon/Icon.web.tsx +46 -46
- package/src/Icon/icon-types.ts +7452 -7452
- package/src/Icon/index.native.ts +2 -2
- package/src/Icon/index.ts +4 -4
- package/src/Icon/index.web.ts +2 -2
- package/src/Icon/types.ts +35 -35
- package/src/Input/Input.native.tsx +74 -74
- package/src/Input/Input.styles.tsx +176 -176
- package/src/Input/Input.web.tsx +70 -70
- package/src/Input/index.native.ts +2 -2
- package/src/Input/index.ts +4 -4
- package/src/Input/index.web.ts +2 -2
- package/src/Input/types.ts +68 -68
- package/src/Screen/Screen.native.tsx +40 -40
- package/src/Screen/Screen.styles.tsx +59 -59
- package/src/Screen/Screen.web.tsx +32 -32
- package/src/Screen/index.native.ts +1 -1
- package/src/Screen/index.ts +1 -1
- package/src/Screen/index.web.ts +1 -1
- package/src/Screen/types.ts +37 -37
- package/src/Text/Text.native.tsx +35 -35
- package/src/Text/Text.styles.tsx +66 -66
- package/src/Text/Text.web.tsx +40 -40
- package/src/Text/index.native.ts +2 -2
- package/src/Text/index.ts +4 -4
- package/src/Text/index.web.ts +2 -2
- package/src/Text/types.ts +38 -38
- package/src/View/View.native.tsx +55 -55
- package/src/View/View.styles.tsx +102 -102
- package/src/View/View.web.tsx +59 -59
- package/src/View/index.native.ts +2 -2
- package/src/View/index.ts +4 -4
- package/src/View/index.web.ts +2 -2
- package/src/View/types.ts +72 -72
- package/src/examples/AllExamples.tsx +71 -71
- package/src/examples/AvatarExamples.tsx +96 -96
- package/src/examples/BadgeExamples.tsx +199 -199
- package/src/examples/ButtonExamples.tsx +149 -149
- package/src/examples/CardExamples.tsx +175 -175
- package/src/examples/CheckboxExamples.tsx +216 -216
- package/src/examples/DividerExamples.tsx +217 -217
- package/src/examples/IconExamples.tsx +341 -341
- package/src/examples/InputExamples.tsx +133 -133
- package/src/examples/README.md +135 -135
- package/src/examples/ScreenExamples.tsx +153 -153
- package/src/examples/TextExamples.tsx +88 -88
- package/src/examples/ThemeExtensionExamples.tsx +90 -90
- package/src/examples/ValidationExamples.tsx +94 -94
- package/src/examples/ViewExamples.tsx +128 -128
- package/src/examples/extendedTheme.ts +328 -328
- package/src/examples/index.ts +14 -14
- package/src/index.native.ts +48 -48
- package/src/index.ts +47 -47
- package/src/theme/breakpoints.ts +8 -8
- package/src/theme/colorResolver.ts +217 -217
- package/src/theme/colors.ts +314 -314
- package/src/theme/defaultThemes.ts +325 -325
- package/src/theme/index.ts +187 -187
- package/src/theme/themeBuilder.ts +601 -601
- package/src/theme/unistyles.d.ts +5 -5
- package/src/theme/variantHelpers.ts +583 -583
- package/src/theme/variants.ts +55 -55
package/src/theme/variants.ts
CHANGED
|
@@ -1,56 +1,56 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Theme Variant Types
|
|
3
|
-
*
|
|
4
|
-
* This file defines the type system for component styling:
|
|
5
|
-
* - IntentVariant: For action-oriented components (buttons, inputs, alerts, etc.)
|
|
6
|
-
* - ColorVariant: For display components (text, badges, avatars, etc.)
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
|
-
// Intent variants for action-oriented components
|
|
10
|
-
// These map to semantic meanings and have contextual colors (main, on, container, etc.)
|
|
11
|
-
export type IntentVariant =
|
|
12
|
-
| 'primary'
|
|
13
|
-
| 'success'
|
|
14
|
-
| 'error'
|
|
15
|
-
| 'warning'
|
|
16
|
-
| 'neutral'
|
|
17
|
-
| 'info';
|
|
18
|
-
|
|
19
|
-
// Base color names - Standard color palette
|
|
20
|
-
type BaseColors = 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'purple' | 'black' | 'gray' | 'white';
|
|
21
|
-
|
|
22
|
-
// Color shades available in the palette
|
|
23
|
-
type ColorShades = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
|
|
24
|
-
|
|
25
|
-
// Generate color variants with shades using template literal types
|
|
26
|
-
type ColorWithShades<T extends string> = T | `${T}.${ColorShades}`;
|
|
27
|
-
|
|
28
|
-
// Color variants for display components
|
|
29
|
-
// These map directly to color palette entries
|
|
30
|
-
// Automatically generates: 'blue' | 'blue.50' | 'blue.100' | ... | 'cyan.900'
|
|
31
|
-
export type ColorVariant = ColorWithShades<BaseColors>;
|
|
32
|
-
|
|
33
|
-
// Semantic color variants for text and other display elements
|
|
34
|
-
export type SemanticColorVariant =
|
|
35
|
-
| 'primary' // Main text color
|
|
36
|
-
| 'secondary' // Secondary text color
|
|
37
|
-
| 'disabled' // Disabled text color
|
|
38
|
-
| 'inverse' // Inverse text color
|
|
39
|
-
| 'muted'; // Muted text color
|
|
40
|
-
|
|
41
|
-
// Combined color variant type that includes both palette colors and semantic colors
|
|
42
|
-
export type DisplayColorVariant = ColorVariant | SemanticColorVariant;
|
|
43
|
-
|
|
44
|
-
// Helper types for theme integration
|
|
45
|
-
export type IntentMapping = {
|
|
46
|
-
palette: ColorVariant;
|
|
47
|
-
main: number;
|
|
48
|
-
on: string;
|
|
49
|
-
container: number;
|
|
50
|
-
onContainer: number;
|
|
51
|
-
light: number;
|
|
52
|
-
dark: number;
|
|
53
|
-
border: number;
|
|
54
|
-
};
|
|
55
|
-
|
|
1
|
+
/**
|
|
2
|
+
* Theme Variant Types
|
|
3
|
+
*
|
|
4
|
+
* This file defines the type system for component styling:
|
|
5
|
+
* - IntentVariant: For action-oriented components (buttons, inputs, alerts, etc.)
|
|
6
|
+
* - ColorVariant: For display components (text, badges, avatars, etc.)
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
// Intent variants for action-oriented components
|
|
10
|
+
// These map to semantic meanings and have contextual colors (main, on, container, etc.)
|
|
11
|
+
export type IntentVariant =
|
|
12
|
+
| 'primary'
|
|
13
|
+
| 'success'
|
|
14
|
+
| 'error'
|
|
15
|
+
| 'warning'
|
|
16
|
+
| 'neutral'
|
|
17
|
+
| 'info';
|
|
18
|
+
|
|
19
|
+
// Base color names - Standard color palette
|
|
20
|
+
type BaseColors = 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'purple' | 'black' | 'gray' | 'white';
|
|
21
|
+
|
|
22
|
+
// Color shades available in the palette
|
|
23
|
+
type ColorShades = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
|
|
24
|
+
|
|
25
|
+
// Generate color variants with shades using template literal types
|
|
26
|
+
type ColorWithShades<T extends string> = T | `${T}.${ColorShades}`;
|
|
27
|
+
|
|
28
|
+
// Color variants for display components
|
|
29
|
+
// These map directly to color palette entries
|
|
30
|
+
// Automatically generates: 'blue' | 'blue.50' | 'blue.100' | ... | 'cyan.900'
|
|
31
|
+
export type ColorVariant = ColorWithShades<BaseColors>;
|
|
32
|
+
|
|
33
|
+
// Semantic color variants for text and other display elements
|
|
34
|
+
export type SemanticColorVariant =
|
|
35
|
+
| 'primary' // Main text color
|
|
36
|
+
| 'secondary' // Secondary text color
|
|
37
|
+
| 'disabled' // Disabled text color
|
|
38
|
+
| 'inverse' // Inverse text color
|
|
39
|
+
| 'muted'; // Muted text color
|
|
40
|
+
|
|
41
|
+
// Combined color variant type that includes both palette colors and semantic colors
|
|
42
|
+
export type DisplayColorVariant = ColorVariant | SemanticColorVariant;
|
|
43
|
+
|
|
44
|
+
// Helper types for theme integration
|
|
45
|
+
export type IntentMapping = {
|
|
46
|
+
palette: ColorVariant;
|
|
47
|
+
main: number;
|
|
48
|
+
on: string;
|
|
49
|
+
container: number;
|
|
50
|
+
onContainer: number;
|
|
51
|
+
light: number;
|
|
52
|
+
dark: number;
|
|
53
|
+
border: number;
|
|
54
|
+
};
|
|
55
|
+
|
|
56
56
|
export type ColorPaletteShade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
|