@idealyst/components 1.0.24 → 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.
Files changed (110) hide show
  1. package/README.md +567 -567
  2. package/package.json +2 -2
  3. package/plugin/web.js +319 -185
  4. package/src/Avatar/Avatar.native.tsx +43 -43
  5. package/src/Avatar/Avatar.styles.tsx +66 -66
  6. package/src/Avatar/Avatar.web.tsx +50 -50
  7. package/src/Avatar/index.native.ts +1 -1
  8. package/src/Avatar/index.ts +1 -1
  9. package/src/Avatar/index.web.ts +1 -1
  10. package/src/Avatar/types.ts +42 -42
  11. package/src/Badge/Badge.native.tsx +42 -42
  12. package/src/Badge/Badge.styles.tsx +153 -153
  13. package/src/Badge/Badge.web.tsx +44 -44
  14. package/src/Badge/index.native.ts +1 -1
  15. package/src/Badge/index.ts +1 -1
  16. package/src/Badge/index.web.ts +1 -1
  17. package/src/Badge/types.ts +33 -33
  18. package/src/Button/Button.native.tsx +38 -38
  19. package/src/Button/Button.styles.tsx +214 -214
  20. package/src/Button/Button.types.ts +11 -11
  21. package/src/Button/Button.web.tsx +55 -55
  22. package/src/Button/index.native.ts +2 -2
  23. package/src/Button/index.ts +4 -4
  24. package/src/Button/index.web.ts +2 -2
  25. package/src/Button/types.ts +48 -48
  26. package/src/Card/Card.native.tsx +51 -51
  27. package/src/Card/Card.styles.tsx +239 -239
  28. package/src/Card/Card.web.tsx +61 -61
  29. package/src/Card/index.native.ts +2 -2
  30. package/src/Card/index.ts +4 -4
  31. package/src/Card/index.web.ts +2 -2
  32. package/src/Card/types.ts +58 -58
  33. package/src/Checkbox/Checkbox.native.tsx +98 -98
  34. package/src/Checkbox/Checkbox.styles.tsx +291 -291
  35. package/src/Checkbox/Checkbox.web.tsx +130 -130
  36. package/src/Checkbox/index.native.ts +2 -2
  37. package/src/Checkbox/index.ts +4 -4
  38. package/src/Checkbox/index.web.ts +2 -2
  39. package/src/Checkbox/types.ts +78 -78
  40. package/src/Divider/Divider.native.tsx +144 -144
  41. package/src/Divider/Divider.styles.tsx +601 -601
  42. package/src/Divider/Divider.web.tsx +72 -72
  43. package/src/Divider/index.native.ts +2 -2
  44. package/src/Divider/index.ts +4 -4
  45. package/src/Divider/index.web.ts +2 -2
  46. package/src/Divider/types.ts +53 -53
  47. package/src/Icon/Icon.native.tsx +38 -38
  48. package/src/Icon/Icon.styles.tsx +49 -49
  49. package/src/Icon/Icon.web.tsx +46 -46
  50. package/src/Icon/icon-types.ts +7452 -7452
  51. package/src/Icon/index.native.ts +2 -2
  52. package/src/Icon/index.ts +4 -4
  53. package/src/Icon/index.web.ts +2 -2
  54. package/src/Icon/types.ts +35 -35
  55. package/src/Input/Input.native.tsx +74 -74
  56. package/src/Input/Input.styles.tsx +176 -176
  57. package/src/Input/Input.web.tsx +70 -70
  58. package/src/Input/index.native.ts +2 -2
  59. package/src/Input/index.ts +4 -4
  60. package/src/Input/index.web.ts +2 -2
  61. package/src/Input/types.ts +68 -68
  62. package/src/Screen/Screen.native.tsx +40 -40
  63. package/src/Screen/Screen.styles.tsx +59 -59
  64. package/src/Screen/Screen.web.tsx +32 -32
  65. package/src/Screen/index.native.ts +1 -1
  66. package/src/Screen/index.ts +1 -1
  67. package/src/Screen/index.web.ts +1 -1
  68. package/src/Screen/types.ts +37 -37
  69. package/src/Text/Text.native.tsx +35 -35
  70. package/src/Text/Text.styles.tsx +66 -66
  71. package/src/Text/Text.web.tsx +40 -40
  72. package/src/Text/index.native.ts +2 -2
  73. package/src/Text/index.ts +4 -4
  74. package/src/Text/index.web.ts +2 -2
  75. package/src/Text/types.ts +38 -38
  76. package/src/View/View.native.tsx +55 -55
  77. package/src/View/View.styles.tsx +102 -102
  78. package/src/View/View.web.tsx +59 -59
  79. package/src/View/index.native.ts +2 -2
  80. package/src/View/index.ts +4 -4
  81. package/src/View/index.web.ts +2 -2
  82. package/src/View/types.ts +72 -72
  83. package/src/examples/AllExamples.tsx +71 -71
  84. package/src/examples/AvatarExamples.tsx +96 -96
  85. package/src/examples/BadgeExamples.tsx +199 -199
  86. package/src/examples/ButtonExamples.tsx +149 -149
  87. package/src/examples/CardExamples.tsx +175 -175
  88. package/src/examples/CheckboxExamples.tsx +216 -216
  89. package/src/examples/DividerExamples.tsx +217 -217
  90. package/src/examples/IconExamples.tsx +341 -341
  91. package/src/examples/InputExamples.tsx +133 -133
  92. package/src/examples/README.md +135 -135
  93. package/src/examples/ScreenExamples.tsx +153 -153
  94. package/src/examples/TextExamples.tsx +88 -88
  95. package/src/examples/ThemeExtensionExamples.tsx +90 -90
  96. package/src/examples/ValidationExamples.tsx +94 -94
  97. package/src/examples/ViewExamples.tsx +128 -128
  98. package/src/examples/extendedTheme.ts +328 -328
  99. package/src/examples/index.ts +14 -14
  100. package/src/index.native.ts +48 -48
  101. package/src/index.ts +47 -47
  102. package/src/theme/breakpoints.ts +8 -8
  103. package/src/theme/colorResolver.ts +217 -217
  104. package/src/theme/colors.ts +314 -314
  105. package/src/theme/defaultThemes.ts +325 -325
  106. package/src/theme/index.ts +187 -187
  107. package/src/theme/themeBuilder.ts +601 -601
  108. package/src/theme/unistyles.d.ts +5 -5
  109. package/src/theme/variantHelpers.ts +583 -583
  110. package/src/theme/variants.ts +55 -55
@@ -1,36 +1,36 @@
1
- import React from 'react';
2
- import { StyleSheet } from 'react-native-unistyles';
3
- import { Text as RNText } from 'react-native';
4
- import { TextProps } from './types';
5
- import textStyles from './Text.styles';
6
-
7
- const Text: React.FC<TextProps> = ({
8
- children,
9
- size = 'medium',
10
- weight = 'normal',
11
- color,
12
- align = 'left',
13
- style,
14
- testID,
15
- }) => {
16
- textStyles.useVariants({
17
- size,
18
- weight,
19
- align,
20
- color: color
21
- });
22
-
23
- return (
24
- <RNText
25
- style={[
26
- textStyles.text,
27
- style,
28
- ]}
29
- testID={testID}
30
- >
31
- {children}
32
- </RNText>
33
- );
34
- };
35
-
1
+ import React from 'react';
2
+ import { StyleSheet } from 'react-native-unistyles';
3
+ import { Text as RNText } from 'react-native';
4
+ import { TextProps } from './types';
5
+ import textStyles from './Text.styles';
6
+
7
+ const Text: React.FC<TextProps> = ({
8
+ children,
9
+ size = 'medium',
10
+ weight = 'normal',
11
+ color,
12
+ align = 'left',
13
+ style,
14
+ testID,
15
+ }) => {
16
+ textStyles.useVariants({
17
+ size,
18
+ weight,
19
+ align,
20
+ color: color
21
+ });
22
+
23
+ return (
24
+ <RNText
25
+ style={[
26
+ textStyles.text,
27
+ style,
28
+ ]}
29
+ testID={testID}
30
+ >
31
+ {children}
32
+ </RNText>
33
+ );
34
+ };
35
+
36
36
  export default Text;
@@ -1,67 +1,67 @@
1
- import { StyleSheet } from "react-native-unistyles";
2
- import { generateColorVariants } from "../theme/variantHelpers";
3
-
4
- const textStyles = StyleSheet.create((theme) => ({
5
- text: {
6
- variants: {
7
- size: {
8
- small: {
9
- fontSize: theme.typography.fontSize.xs,
10
- lineHeight: theme.typography.fontSize.xs * 1.33,
11
- },
12
- medium: {
13
- fontSize: theme.typography.fontSize.md,
14
- lineHeight: theme.typography.fontSize.md * 1.5,
15
- },
16
- large: {
17
- fontSize: theme.typography.fontSize.lg,
18
- lineHeight: theme.typography.fontSize.lg * 1.4,
19
- },
20
- xlarge: {
21
- fontSize: theme.typography.fontSize.xl,
22
- lineHeight: theme.typography.fontSize.xl * 1.33,
23
- },
24
- },
25
- weight: {
26
- light: {
27
- fontWeight: theme.typography.fontWeight.light,
28
- },
29
- normal: {
30
- fontWeight: theme.typography.fontWeight.regular,
31
- },
32
- medium: {
33
- fontWeight: theme.typography.fontWeight.medium,
34
- },
35
- semibold: {
36
- fontWeight: theme.typography.fontWeight.semibold,
37
- },
38
- bold: {
39
- fontWeight: theme.typography.fontWeight.bold,
40
- },
41
- },
42
- align: {
43
- left: {
44
- textAlign: 'left',
45
- },
46
- center: {
47
- textAlign: 'center',
48
- },
49
- right: {
50
- textAlign: 'right',
51
- },
52
- },
53
- // Dynamically generated color variants
54
- color: generateColorVariants(theme),
55
- },
56
- color: theme.colors.text.primary, // Default text color
57
- margin: 0,
58
- padding: 0,
59
- // Web-specific styles
60
- _web: {
61
- fontFamily: 'inherit',
62
- lineHeight: 'inherit',
63
- },
64
- },
65
- }));
66
-
1
+ import { StyleSheet } from "react-native-unistyles";
2
+ import { generateColorVariants } from "../theme/variantHelpers";
3
+
4
+ const textStyles = StyleSheet.create((theme) => ({
5
+ text: {
6
+ variants: {
7
+ size: {
8
+ small: {
9
+ fontSize: theme.typography.fontSize.xs,
10
+ lineHeight: theme.typography.fontSize.xs * 1.33,
11
+ },
12
+ medium: {
13
+ fontSize: theme.typography.fontSize.md,
14
+ lineHeight: theme.typography.fontSize.md * 1.5,
15
+ },
16
+ large: {
17
+ fontSize: theme.typography.fontSize.lg,
18
+ lineHeight: theme.typography.fontSize.lg * 1.4,
19
+ },
20
+ xlarge: {
21
+ fontSize: theme.typography.fontSize.xl,
22
+ lineHeight: theme.typography.fontSize.xl * 1.33,
23
+ },
24
+ },
25
+ weight: {
26
+ light: {
27
+ fontWeight: theme.typography.fontWeight.light,
28
+ },
29
+ normal: {
30
+ fontWeight: theme.typography.fontWeight.regular,
31
+ },
32
+ medium: {
33
+ fontWeight: theme.typography.fontWeight.medium,
34
+ },
35
+ semibold: {
36
+ fontWeight: theme.typography.fontWeight.semibold,
37
+ },
38
+ bold: {
39
+ fontWeight: theme.typography.fontWeight.bold,
40
+ },
41
+ },
42
+ align: {
43
+ left: {
44
+ textAlign: 'left',
45
+ },
46
+ center: {
47
+ textAlign: 'center',
48
+ },
49
+ right: {
50
+ textAlign: 'right',
51
+ },
52
+ },
53
+ // Dynamically generated color variants
54
+ color: generateColorVariants(theme),
55
+ },
56
+ color: theme.colors.text.primary, // Default text color
57
+ margin: 0,
58
+ padding: 0,
59
+ // Web-specific styles
60
+ _web: {
61
+ fontFamily: 'inherit',
62
+ lineHeight: 'inherit',
63
+ },
64
+ },
65
+ }));
66
+
67
67
  export default textStyles;
@@ -1,41 +1,41 @@
1
- import React from 'react';
2
- import { getWebProps } from 'react-native-unistyles/web';
3
- import { TextProps } from './types';
4
- import textStyles from './Text.styles';
5
-
6
- const Text: React.FC<TextProps> = ({
7
- children,
8
- size = 'medium',
9
- weight = 'normal',
10
- color,
11
- align = 'left',
12
- style,
13
- testID,
14
- }) => {
15
- textStyles.useVariants({
16
- size,
17
- weight,
18
- align,
19
- color: color
20
- });
21
-
22
- // Create the style array following the official documentation pattern
23
- const textStyleArray = [
24
- textStyles.text,
25
- style,
26
- ];
27
-
28
- // Use getWebProps to generate className and ref for web
29
- const webProps = getWebProps(textStyleArray);
30
-
31
- return (
32
- <span
33
- {...webProps}
34
- data-testid={testID}
35
- >
36
- {children}
37
- </span>
38
- );
39
- };
40
-
1
+ import React from 'react';
2
+ import { getWebProps } from 'react-native-unistyles/web';
3
+ import { TextProps } from './types';
4
+ import textStyles from './Text.styles';
5
+
6
+ const Text: React.FC<TextProps> = ({
7
+ children,
8
+ size = 'medium',
9
+ weight = 'normal',
10
+ color,
11
+ align = 'left',
12
+ style,
13
+ testID,
14
+ }) => {
15
+ textStyles.useVariants({
16
+ size,
17
+ weight,
18
+ align,
19
+ color: color
20
+ });
21
+
22
+ // Create the style array following the official documentation pattern
23
+ const textStyleArray = [
24
+ textStyles.text,
25
+ style,
26
+ ];
27
+
28
+ // Use getWebProps to generate className and ref for web
29
+ const webProps = getWebProps(textStyleArray);
30
+
31
+ return (
32
+ <span
33
+ {...webProps}
34
+ data-testid={testID}
35
+ >
36
+ {children}
37
+ </span>
38
+ );
39
+ };
40
+
41
41
  export default Text;
@@ -1,3 +1,3 @@
1
- // React Native-specific Text export
2
- export { default } from './Text.native';
1
+ // React Native-specific Text export
2
+ export { default } from './Text.native';
3
3
  export * from './types';
package/src/Text/index.ts CHANGED
@@ -1,5 +1,5 @@
1
- // Platform-agnostic Text export
2
- // Bundlers will resolve to index.web.ts (web) or index.native.ts (React Native)
3
- // This file serves as fallback for web environments
4
- export { default } from './Text.web';
1
+ // Platform-agnostic Text export
2
+ // Bundlers will resolve to index.web.ts (web) or index.native.ts (React Native)
3
+ // This file serves as fallback for web environments
4
+ export { default } from './Text.web';
5
5
  export * from './types';
@@ -1,3 +1,3 @@
1
- // Web-specific Text export
2
- export { default } from './Text.web';
1
+ // Web-specific Text export
2
+ export { default } from './Text.web';
3
3
  export * from './types';
package/src/Text/types.ts CHANGED
@@ -1,39 +1,39 @@
1
- import { ReactNode } from 'react';
2
- import type { DisplayColorVariant } from '../theme/variants';
3
-
4
- export interface TextProps {
5
- /**
6
- * The text content to display
7
- */
8
- children: ReactNode;
9
-
10
- /**
11
- * The size variant of the text
12
- */
13
- size?: 'small' | 'medium' | 'large' | 'xlarge';
14
-
15
- /**
16
- * The weight of the text
17
- */
18
- weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
19
-
20
- /**
21
- * The color of the text
22
- */
23
- color?: DisplayColorVariant;
24
-
25
- /**
26
- * Text alignment
27
- */
28
- align?: 'left' | 'center' | 'right';
29
-
30
- /**
31
- * Additional styles (platform-specific)
32
- */
33
- style?: any;
34
-
35
- /**
36
- * Test ID for testing
37
- */
38
- testID?: string;
1
+ import { ReactNode } from 'react';
2
+ import type { DisplayColorVariant } from '../theme/variants';
3
+
4
+ export interface TextProps {
5
+ /**
6
+ * The text content to display
7
+ */
8
+ children: ReactNode;
9
+
10
+ /**
11
+ * The size variant of the text
12
+ */
13
+ size?: 'small' | 'medium' | 'large' | 'xlarge';
14
+
15
+ /**
16
+ * The weight of the text
17
+ */
18
+ weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
19
+
20
+ /**
21
+ * The color of the text
22
+ */
23
+ color?: DisplayColorVariant;
24
+
25
+ /**
26
+ * Text alignment
27
+ */
28
+ align?: 'left' | 'center' | 'right';
29
+
30
+ /**
31
+ * Additional styles (platform-specific)
32
+ */
33
+ style?: any;
34
+
35
+ /**
36
+ * Test ID for testing
37
+ */
38
+ testID?: string;
39
39
  }
@@ -1,56 +1,56 @@
1
- import React from 'react';
2
- import { View as RNView } from 'react-native';
3
- import { ViewProps } from './types';
4
- import viewStyles from './View.styles';
5
-
6
- const View: React.FC<ViewProps> = ({
7
- children,
8
- spacing = 'none',
9
- marginVariant = 'none',
10
- background = 'transparent',
11
- radius = 'none',
12
- border = 'none',
13
- backgroundColor,
14
- padding,
15
- margin,
16
- borderRadius,
17
- borderWidth,
18
- borderColor,
19
- style,
20
- testID,
21
- }) => {
22
- viewStyles.useVariants({
23
- spacing,
24
- margin: marginVariant,
25
- background,
26
- radius,
27
- border,
28
- });
29
-
30
- const getStyles = (): ViewStyle => {
31
- const baseStyles: ViewStyle = {};
32
-
33
- if (backgroundColor) baseStyles.backgroundColor = backgroundColor;
34
- if (padding !== undefined) baseStyles.padding = padding;
35
- if (margin !== undefined) baseStyles.margin = margin;
36
- if (borderRadius !== undefined) baseStyles.borderRadius = borderRadius;
37
- if (borderWidth !== undefined) baseStyles.borderWidth = borderWidth;
38
- if (borderColor) baseStyles.borderColor = borderColor;
39
-
40
- return baseStyles;
41
- };
42
-
43
- const viewStyleArray = [
44
- viewStyles.view,
45
- getStyles(),
46
- style,
47
- ];
48
-
49
- return (
50
- <RNView style={viewStyleArray} testID={testID}>
51
- {children}
52
- </RNView>
53
- );
54
- };
55
-
1
+ import React from 'react';
2
+ import { View as RNView } from 'react-native';
3
+ import { ViewProps } from './types';
4
+ import viewStyles from './View.styles';
5
+
6
+ const View: React.FC<ViewProps> = ({
7
+ children,
8
+ spacing = 'none',
9
+ marginVariant = 'none',
10
+ background = 'transparent',
11
+ radius = 'none',
12
+ border = 'none',
13
+ backgroundColor,
14
+ padding,
15
+ margin,
16
+ borderRadius,
17
+ borderWidth,
18
+ borderColor,
19
+ style,
20
+ testID,
21
+ }) => {
22
+ viewStyles.useVariants({
23
+ spacing,
24
+ margin: marginVariant,
25
+ background,
26
+ radius,
27
+ border,
28
+ });
29
+
30
+ const getStyles = (): ViewStyle => {
31
+ const baseStyles: ViewStyle = {};
32
+
33
+ if (backgroundColor) baseStyles.backgroundColor = backgroundColor;
34
+ if (padding !== undefined) baseStyles.padding = padding;
35
+ if (margin !== undefined) baseStyles.margin = margin;
36
+ if (borderRadius !== undefined) baseStyles.borderRadius = borderRadius;
37
+ if (borderWidth !== undefined) baseStyles.borderWidth = borderWidth;
38
+ if (borderColor) baseStyles.borderColor = borderColor;
39
+
40
+ return baseStyles;
41
+ };
42
+
43
+ const viewStyleArray = [
44
+ viewStyles.view,
45
+ getStyles(),
46
+ style,
47
+ ];
48
+
49
+ return (
50
+ <RNView style={viewStyleArray} testID={testID}>
51
+ {children}
52
+ </RNView>
53
+ );
54
+ };
55
+
56
56
  export default View;