@cdx-ui/components 0.0.1-alpha.34 → 0.0.1-alpha.36

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 (83) hide show
  1. package/lib/commonjs/components/{Form/FormLabelRoot.js → Field/FieldLabel.js} +4 -4
  2. package/lib/commonjs/components/Field/FieldLabel.js.map +1 -0
  3. package/lib/commonjs/components/{Form/FormLabelRoot.web.js → Field/FieldLabel.web.js} +9 -5
  4. package/lib/commonjs/components/Field/FieldLabel.web.js.map +1 -0
  5. package/lib/commonjs/components/Field/index.js +158 -0
  6. package/lib/commonjs/components/Field/index.js.map +1 -0
  7. package/lib/commonjs/components/Field/styles.js +16 -0
  8. package/lib/commonjs/components/Field/styles.js.map +1 -0
  9. package/lib/commonjs/components/Form/FormRoot.js.map +1 -1
  10. package/lib/commonjs/components/Form/index.js +6 -213
  11. package/lib/commonjs/components/Form/index.js.map +1 -1
  12. package/lib/commonjs/components/Form/styles.js +1 -49
  13. package/lib/commonjs/components/Form/styles.js.map +1 -1
  14. package/lib/commonjs/components/ProgressBar/index.js +45 -0
  15. package/lib/commonjs/components/ProgressBar/index.js.map +1 -0
  16. package/lib/commonjs/components/ProgressBar/styles.js +10 -0
  17. package/lib/commonjs/components/ProgressBar/styles.js.map +1 -0
  18. package/lib/commonjs/components/ProgressSegmented/styles.js +5 -5
  19. package/lib/commonjs/components/ProgressSegmented/styles.js.map +1 -1
  20. package/lib/commonjs/components/index.js +24 -0
  21. package/lib/commonjs/components/index.js.map +1 -1
  22. package/lib/module/components/{Form/FormLabelRoot.js → Field/FieldLabel.js} +3 -3
  23. package/lib/module/components/Field/FieldLabel.js.map +1 -0
  24. package/lib/module/components/Field/FieldLabel.web.js +17 -0
  25. package/lib/module/components/Field/FieldLabel.web.js.map +1 -0
  26. package/lib/module/components/Field/index.js +155 -0
  27. package/lib/module/components/Field/index.js.map +1 -0
  28. package/lib/module/components/Field/styles.js +12 -0
  29. package/lib/module/components/Field/styles.js.map +1 -0
  30. package/lib/module/components/Form/FormRoot.js.map +1 -1
  31. package/lib/module/components/Form/index.js +8 -216
  32. package/lib/module/components/Form/index.js.map +1 -1
  33. package/lib/module/components/Form/styles.js +0 -48
  34. package/lib/module/components/Form/styles.js.map +1 -1
  35. package/lib/module/components/ProgressBar/index.js +41 -0
  36. package/lib/module/components/ProgressBar/index.js.map +1 -0
  37. package/lib/module/components/ProgressBar/styles.js +6 -0
  38. package/lib/module/components/ProgressBar/styles.js.map +1 -0
  39. package/lib/module/components/ProgressSegmented/styles.js +5 -5
  40. package/lib/module/components/ProgressSegmented/styles.js.map +1 -1
  41. package/lib/module/components/index.js +2 -0
  42. package/lib/module/components/index.js.map +1 -1
  43. package/lib/typescript/components/{Form/FormLabelRoot.d.ts → Field/FieldLabel.d.ts} +5 -5
  44. package/lib/typescript/components/Field/FieldLabel.d.ts.map +1 -0
  45. package/lib/typescript/components/{Form/FormLabelRoot.web.d.ts → Field/FieldLabel.web.d.ts} +3 -7
  46. package/lib/typescript/components/Field/FieldLabel.web.d.ts.map +1 -0
  47. package/lib/typescript/components/Field/index.d.ts +26 -0
  48. package/lib/typescript/components/Field/index.d.ts.map +1 -0
  49. package/lib/typescript/components/Field/styles.d.ts +16 -0
  50. package/lib/typescript/components/Field/styles.d.ts.map +1 -0
  51. package/lib/typescript/components/Form/FormRoot.d.ts +2 -0
  52. package/lib/typescript/components/Form/FormRoot.d.ts.map +1 -1
  53. package/lib/typescript/components/Form/index.d.ts +4 -61
  54. package/lib/typescript/components/Form/index.d.ts.map +1 -1
  55. package/lib/typescript/components/Form/styles.d.ts +0 -20
  56. package/lib/typescript/components/Form/styles.d.ts.map +1 -1
  57. package/lib/typescript/components/ProgressBar/index.d.ts +17 -0
  58. package/lib/typescript/components/ProgressBar/index.d.ts.map +1 -0
  59. package/lib/typescript/components/ProgressBar/styles.d.ts +5 -0
  60. package/lib/typescript/components/ProgressBar/styles.d.ts.map +1 -0
  61. package/lib/typescript/components/ProgressSegmented/styles.d.ts.map +1 -1
  62. package/lib/typescript/components/index.d.ts +2 -0
  63. package/lib/typescript/components/index.d.ts.map +1 -1
  64. package/package.json +4 -4
  65. package/src/components/{Form/FormLabelRoot.tsx → Field/FieldLabel.tsx} +4 -4
  66. package/src/components/Field/FieldLabel.web.tsx +25 -0
  67. package/src/components/Field/index.tsx +171 -0
  68. package/src/components/Field/styles.ts +32 -0
  69. package/src/components/Form/FormRoot.tsx +1 -0
  70. package/src/components/Form/index.tsx +11 -245
  71. package/src/components/Form/styles.ts +1 -73
  72. package/src/components/ProgressBar/index.tsx +53 -0
  73. package/src/components/ProgressBar/styles.ts +9 -0
  74. package/src/components/ProgressSegmented/styles.ts +6 -5
  75. package/src/components/index.ts +2 -0
  76. package/lib/commonjs/components/Form/FormLabelRoot.js.map +0 -1
  77. package/lib/commonjs/components/Form/FormLabelRoot.web.js.map +0 -1
  78. package/lib/module/components/Form/FormLabelRoot.js.map +0 -1
  79. package/lib/module/components/Form/FormLabelRoot.web.js +0 -13
  80. package/lib/module/components/Form/FormLabelRoot.web.js.map +0 -1
  81. package/lib/typescript/components/Form/FormLabelRoot.d.ts.map +0 -1
  82. package/lib/typescript/components/Form/FormLabelRoot.web.d.ts.map +0 -1
  83. package/src/components/Form/FormLabelRoot.web.tsx +0 -18
@@ -0,0 +1,171 @@
1
+ import { forwardRef } from 'react';
2
+ import { Text, View } from 'react-native';
3
+ import { ErrorIcon } from '@cdx-ui/icons';
4
+ import {
5
+ createField,
6
+ IFieldErrorProps,
7
+ IFieldHelperProps,
8
+ IFieldLabelProps,
9
+ type IFieldRootProps,
10
+ } from '@cdx-ui/primitives';
11
+ import { cn } from '@cdx-ui/utils';
12
+ import { Icon } from '../Icon';
13
+ import { BaseFieldLabel } from './FieldLabel';
14
+ import {
15
+ fieldErrorIconVariants,
16
+ fieldErrorTextVariants,
17
+ fieldErrorVariants,
18
+ fieldHelperVariants,
19
+ fieldHelperTextVariants,
20
+ fieldLabelVariants,
21
+ fieldRootVariants,
22
+ type FieldRootVariantProps,
23
+ type FieldLabelVariantProps,
24
+ type FieldHelperVariantProps,
25
+ type FieldErrorVariantProps,
26
+ } from './styles';
27
+
28
+ // =============================================================================
29
+ // PRIMITIVE
30
+ // =============================================================================
31
+
32
+ const FieldPrimitive = createField({
33
+ Root: View,
34
+ Label: BaseFieldLabel,
35
+ Helper: View,
36
+ HelperText: Text,
37
+ Error: View,
38
+ ErrorText: Text,
39
+ ErrorIcon: View,
40
+ });
41
+
42
+ // =============================================================================
43
+ // FIELD ROOT
44
+ // =============================================================================
45
+
46
+ /**
47
+ * Field wrapper + context. For **initial focus**, pass `autoFocus` on `Input.Field` (not here).
48
+ */
49
+ export interface FieldRootProps extends IFieldRootProps, FieldRootVariantProps {}
50
+
51
+ const FieldRoot = forwardRef<View, FieldRootProps>(
52
+ ({ className, children, style, ...props }, ref) => {
53
+ const computedClassName = cn(fieldRootVariants(), className);
54
+
55
+ return (
56
+ <FieldPrimitive ref={ref} className={computedClassName} style={style} {...props}>
57
+ {children}
58
+ </FieldPrimitive>
59
+ );
60
+ },
61
+ );
62
+
63
+ FieldRoot.displayName = 'Field';
64
+
65
+ // =============================================================================
66
+ // FIELD LABEL
67
+ // =============================================================================
68
+
69
+ export interface FieldLabelProps extends IFieldLabelProps, FieldLabelVariantProps {}
70
+
71
+ const FieldLabel = forwardRef<View, FieldLabelProps>(
72
+ ({ className, children, style, htmlFor, ...props }, ref) => {
73
+ const labelClassName = cn(fieldLabelVariants(), className);
74
+
75
+ return (
76
+ <FieldPrimitive.Label
77
+ ref={ref}
78
+ className={labelClassName}
79
+ style={style}
80
+ htmlFor={htmlFor}
81
+ requiredIndicator={
82
+ <Text className="text-red-500" aria-hidden>
83
+ {' *'}
84
+ </Text>
85
+ }
86
+ {...props}
87
+ >
88
+ {children}
89
+ </FieldPrimitive.Label>
90
+ );
91
+ },
92
+ );
93
+
94
+ FieldLabel.displayName = 'Field.Label';
95
+
96
+ // =============================================================================
97
+ // FIELD HELPER
98
+ // =============================================================================
99
+
100
+ export interface FieldHelperProps extends IFieldHelperProps, FieldHelperVariantProps {}
101
+
102
+ const FieldHelper = forwardRef<View, FieldHelperProps>(
103
+ ({ className, children, style, ...props }, ref) => {
104
+ const containerClassName = cn(fieldHelperVariants(), className);
105
+ const textClassName = cn(fieldHelperTextVariants());
106
+
107
+ return (
108
+ <FieldPrimitive.Helper ref={ref} className={containerClassName} style={style} {...props}>
109
+ <FieldPrimitive.HelperText className={textClassName}>{children}</FieldPrimitive.HelperText>
110
+ </FieldPrimitive.Helper>
111
+ );
112
+ },
113
+ );
114
+
115
+ FieldHelper.displayName = 'Field.Helper';
116
+
117
+ // =============================================================================
118
+ // FIELD ERROR (internal icon + text composition)
119
+ // =============================================================================
120
+
121
+ const FieldErrorIcon = ({ className, style, ...props }: { className?: string; style?: any }) => {
122
+ const computedClassName = cn(fieldErrorIconVariants(), className);
123
+
124
+ return (
125
+ <Icon
126
+ as={ErrorIcon}
127
+ className={computedClassName}
128
+ style={style}
129
+ aria-hidden={true}
130
+ {...props}
131
+ />
132
+ );
133
+ };
134
+
135
+ FieldErrorIcon.displayName = 'Field.ErrorIcon';
136
+
137
+ export interface FieldErrorProps extends IFieldErrorProps, FieldErrorVariantProps {}
138
+
139
+ const FieldError = forwardRef<View, FieldErrorProps>(
140
+ ({ className, children, style, ...props }, ref) => {
141
+ const containerClassName = cn(fieldErrorVariants(), className);
142
+ const textClassName = cn(fieldErrorTextVariants());
143
+
144
+ return (
145
+ <FieldPrimitive.Error ref={ref} className={containerClassName} style={style} {...props}>
146
+ <FieldPrimitive.ErrorIcon>
147
+ <FieldErrorIcon />
148
+ </FieldPrimitive.ErrorIcon>
149
+ <FieldPrimitive.ErrorText className={textClassName}>{children}</FieldPrimitive.ErrorText>
150
+ </FieldPrimitive.Error>
151
+ );
152
+ },
153
+ );
154
+
155
+ FieldError.displayName = 'Field.Error';
156
+
157
+ // =============================================================================
158
+ // COMPOUND EXPORT
159
+ // =============================================================================
160
+
161
+ type FieldCompoundComponent = typeof FieldRoot & {
162
+ Label: typeof FieldLabel;
163
+ Helper: typeof FieldHelper;
164
+ Error: typeof FieldError;
165
+ };
166
+
167
+ export const Field = Object.assign(FieldRoot, {
168
+ Label: FieldLabel,
169
+ Helper: FieldHelper,
170
+ Error: FieldError,
171
+ }) as FieldCompoundComponent;
@@ -0,0 +1,32 @@
1
+ import { cva, type VariantProps } from 'class-variance-authority';
2
+ import { DISABLED_OPACITY } from '../../styles/primitives';
3
+
4
+ export const fieldRootVariants = cva(['flex-col gap-2', 'web:last:mb-0', DISABLED_OPACITY]);
5
+
6
+ export const fieldLabelVariants = cva([
7
+ 'body-md',
8
+ 'font-medium',
9
+ 'text-content-primary',
10
+ 'flex-row items-center',
11
+ DISABLED_OPACITY,
12
+ 'web:cursor-pointer',
13
+ 'data-[invalid=true]:text-content-danger',
14
+ ]);
15
+
16
+ export const fieldHelperVariants = cva(['flex-row items-center']);
17
+
18
+ export const fieldHelperTextVariants = cva(['body-sm', 'text-content-tertiary']);
19
+
20
+ export const fieldErrorVariants = cva(['flex-row items-center gap-1']);
21
+
22
+ export const fieldErrorTextVariants = cva(['body-sm', 'text-content-danger']);
23
+
24
+ export const fieldErrorIconVariants = cva(['size-3.5', 'text-content-danger']);
25
+
26
+ export type FieldRootVariantProps = VariantProps<typeof fieldRootVariants>;
27
+ export type FieldLabelVariantProps = VariantProps<typeof fieldLabelVariants>;
28
+ export type FieldHelperVariantProps = VariantProps<typeof fieldHelperVariants>;
29
+ export type FieldHelperTextVariantProps = VariantProps<typeof fieldHelperTextVariants>;
30
+ export type FieldErrorVariantProps = VariantProps<typeof fieldErrorVariants>;
31
+ export type FieldErrorTextVariantProps = VariantProps<typeof fieldErrorTextVariants>;
32
+ export type FieldErrorIconVariantProps = VariantProps<typeof fieldErrorIconVariants>;
@@ -5,6 +5,7 @@ export type BaseFormRootProps = ViewProps & {
5
5
  onSubmit?: (e: React.SyntheticEvent) => void;
6
6
  action?: string | ((formData: FormData) => void | Promise<void>);
7
7
  method?: string;
8
+ className?: string;
8
9
  };
9
10
 
10
11
  export const BaseFormRoot = forwardRef<View, BaseFormRootProps>(
@@ -1,58 +1,23 @@
1
- import { forwardRef, type ReactNode } from 'react';
2
- import { Text, View, type ViewProps, type TextProps } from 'react-native';
3
- import { createForm, type IFormProps, type IFormFieldProps } from '@cdx-ui/primitives';
4
- import { cn, withStyleContext, useStyleContext } from '@cdx-ui/utils';
5
- import { Icon, type IconProps } from '../Icon';
1
+ import React, { forwardRef } from 'react';
2
+ import { View } from 'react-native';
3
+ import { createForm } from '@cdx-ui/primitives';
4
+ import { cn } from '@cdx-ui/utils';
6
5
  import { BaseFormRoot, type BaseFormRootProps } from './FormRoot';
7
- import { FormLabelRoot } from './FormLabelRoot';
8
- import {
9
- formRootVariants,
10
- formFieldVariants,
11
- formLabelVariants,
12
- formHelperVariants,
13
- formHelperTextVariants,
14
- formErrorVariants,
15
- formErrorTextVariants,
16
- formErrorIconVariants,
17
- } from './styles';
18
-
19
- // =============================================================================
20
- // SCOPE + CONTEXT
21
- // =============================================================================
22
-
23
- const SCOPE = 'FORM';
24
-
25
- const FieldRoot = withStyleContext(View, SCOPE);
26
-
27
- interface FormFieldStyleContext {
28
- size?: 'default' | 'small';
29
- }
30
-
31
- const useFormStyleContext = () => useStyleContext(SCOPE) as FormFieldStyleContext;
6
+ import { formRootVariants } from './styles';
32
7
 
33
8
  // =============================================================================
34
9
  // PRIMITIVE
35
10
  // =============================================================================
36
11
 
37
- const FormPrimitive = createForm({
38
- Root: BaseFormRoot,
39
- Field: FieldRoot,
40
- Error: View,
41
- ErrorText: Text,
42
- ErrorIcon: View,
43
- Label: FormLabelRoot,
44
- Helper: View,
45
- HelperText: Text,
46
- });
12
+ const FormPrimitive = createForm({ Root: BaseFormRoot });
13
+
14
+ FormPrimitive.displayName = 'FormPrimitive';
47
15
 
48
16
  // =============================================================================
49
17
  // FORM ROOT (container — <form> on web, <View> on RN)
50
18
  // =============================================================================
51
19
 
52
- export interface FormProps extends BaseFormRootProps, IFormProps {
53
- className?: string;
54
- children?: ReactNode;
55
- }
20
+ export interface FormProps extends BaseFormRootProps {}
56
21
 
57
22
  const FormRoot = forwardRef<View, FormProps>(({ className, children, style, ...props }, ref) => {
58
23
  const computedClassName = cn(formRootVariants(), className);
@@ -67,206 +32,7 @@ const FormRoot = forwardRef<View, FormProps>(({ className, children, style, ...p
67
32
  FormRoot.displayName = 'Form';
68
33
 
69
34
  // =============================================================================
70
- // FORM FIELD (per-field wrapper — provides context for label/error/helper/input)
71
- // =============================================================================
72
-
73
- /**
74
- * Field wrapper + context. For **initial focus**, pass `autoFocus` on `Input.Field` (not here).
75
- */
76
- export interface FormFieldProps extends Omit<ViewProps, 'id' | 'name'>, IFormFieldProps {
77
- className?: string;
78
- children?: ReactNode;
79
- size?: 'default' | 'small';
80
- }
81
-
82
- const FormField = forwardRef<View, FormFieldProps>(
83
- ({ size = 'default', className, children, style, ...props }, ref) => {
84
- const computedClassName = cn(formFieldVariants(), className);
85
-
86
- return (
87
- <FormPrimitive.Field
88
- ref={ref}
89
- className={computedClassName}
90
- style={style}
91
- context={{ size }}
92
- {...props}
93
- >
94
- {children}
95
- </FormPrimitive.Field>
96
- );
97
- },
98
- );
99
-
100
- FormField.displayName = 'Form.Field';
101
-
102
- // =============================================================================
103
- // FORM LABEL
104
- // =============================================================================
105
-
106
- export interface FormLabelProps extends ViewProps {
107
- className?: string;
108
- children?: ReactNode;
109
- /** @platform web — passed to `<label htmlFor>`; defaults to the field input id. */
110
- htmlFor?: string;
111
- }
112
-
113
- // TODO: Accept accessibility labels for required indicator as props to support i18n
114
-
115
- const FormLabel = forwardRef<View, FormLabelProps>(
116
- ({ className, children, style, htmlFor, ...props }, ref) => {
117
- const { size } = useFormStyleContext();
118
- const labelClassName = cn(formLabelVariants({ size }), className);
119
-
120
- return (
121
- <FormPrimitive.Label
122
- ref={ref}
123
- className={labelClassName}
124
- style={style}
125
- htmlFor={htmlFor}
126
- requiredIndicator={
127
- <Text className="text-red-500" aria-hidden>
128
- {' *'}
129
- </Text>
130
- }
131
- {...props}
132
- >
133
- {children}
134
- </FormPrimitive.Label>
135
- );
136
- },
137
- );
138
-
139
- FormLabel.displayName = 'Form.Label';
140
-
141
- // =============================================================================
142
- // FORM HELPER
143
- // =============================================================================
144
-
145
- export interface FormHelperProps extends ViewProps {
146
- className?: string;
147
- children?: ReactNode;
148
- }
149
-
150
- const FormHelper = forwardRef<View, FormHelperProps>(
151
- ({ className, children, style, ...props }, ref) => {
152
- const computedClassName = cn(formHelperVariants(), className);
153
-
154
- return (
155
- <FormPrimitive.Helper ref={ref} className={computedClassName} style={style} {...props}>
156
- {children}
157
- </FormPrimitive.Helper>
158
- );
159
- },
160
- );
161
-
162
- FormHelper.displayName = 'Form.Helper';
163
-
164
- // =============================================================================
165
- // FORM HELPER TEXT
166
- // =============================================================================
167
-
168
- export interface FormHelperTextProps extends TextProps {
169
- className?: string;
170
- children?: ReactNode;
171
- }
172
-
173
- const FormHelperText = forwardRef<Text, FormHelperTextProps>(
174
- ({ className, children, style, ...props }, ref) => {
175
- const { size } = useFormStyleContext();
176
- const computedClassName = cn(formHelperTextVariants({ size }), className);
177
-
178
- return (
179
- <FormPrimitive.HelperText ref={ref} className={computedClassName} style={style} {...props}>
180
- {children}
181
- </FormPrimitive.HelperText>
182
- );
183
- },
184
- );
185
-
186
- FormHelperText.displayName = 'Form.HelperText';
187
-
188
- // =============================================================================
189
- // FORM ERROR
190
- // =============================================================================
191
-
192
- export interface FormErrorProps extends ViewProps {
193
- className?: string;
194
- children?: ReactNode;
195
- }
196
-
197
- const FormError = forwardRef<View, FormErrorProps>(
198
- ({ className, children, style, ...props }, ref) => {
199
- const computedClassName = cn(formErrorVariants(), className);
200
-
201
- return (
202
- <FormPrimitive.Error ref={ref} className={computedClassName} style={style} {...props}>
203
- {children}
204
- </FormPrimitive.Error>
205
- );
206
- },
207
- );
208
-
209
- FormError.displayName = 'Form.Error';
210
-
211
- // =============================================================================
212
- // FORM ERROR TEXT
35
+ // EXPORT
213
36
  // =============================================================================
214
37
 
215
- export interface FormErrorTextProps extends TextProps {
216
- className?: string;
217
- children?: ReactNode;
218
- }
219
-
220
- const FormErrorText = forwardRef<Text, FormErrorTextProps>(
221
- ({ className, children, style, ...props }, ref) => {
222
- const { size } = useFormStyleContext();
223
- const computedClassName = cn(formErrorTextVariants({ size }), className);
224
-
225
- return (
226
- <FormPrimitive.ErrorText ref={ref} className={computedClassName} style={style} {...props}>
227
- {children}
228
- </FormPrimitive.ErrorText>
229
- );
230
- },
231
- );
232
-
233
- FormErrorText.displayName = 'Form.ErrorText';
234
-
235
- // =============================================================================
236
- // FORM ERROR ICON
237
- // =============================================================================
238
-
239
- export interface FormErrorIconProps extends Omit<IconProps, 'children'> {}
240
-
241
- const FormErrorIcon = ({ className, style, as, ...props }: FormErrorIconProps) => {
242
- const { size } = useFormStyleContext();
243
- const computedClassName = cn(formErrorIconVariants({ size }), className);
244
-
245
- return <Icon as={as} className={computedClassName} style={style} {...props} />;
246
- };
247
-
248
- FormErrorIcon.displayName = 'Form.ErrorIcon';
249
-
250
- // =============================================================================
251
- // COMPOUND EXPORT
252
- // =============================================================================
253
-
254
- type FormCompoundComponent = typeof FormRoot & {
255
- Field: typeof FormField;
256
- Label: typeof FormLabel;
257
- Helper: typeof FormHelper;
258
- HelperText: typeof FormHelperText;
259
- Error: typeof FormError;
260
- ErrorText: typeof FormErrorText;
261
- ErrorIcon: typeof FormErrorIcon;
262
- };
263
-
264
- export const Form = Object.assign(FormRoot, {
265
- Field: FormField,
266
- Label: FormLabel,
267
- Helper: FormHelper,
268
- HelperText: FormHelperText,
269
- Error: FormError,
270
- ErrorText: FormErrorText,
271
- ErrorIcon: FormErrorIcon,
272
- }) as FormCompoundComponent;
38
+ export const Form = FormRoot;
@@ -1,75 +1,3 @@
1
- import { cva, type VariantProps } from 'class-variance-authority';
2
- import {
3
- COLOR_TEXT_INVALID,
4
- COLOR_TEXT_SECONDARY,
5
- DISABLED_OPACITY,
6
- } from '../../styles/primitives';
1
+ import { cva } from 'class-variance-authority';
7
2
 
8
3
  export const formRootVariants = cva(['flex-col gap-4']);
9
-
10
- export const formFieldVariants = cva(['flex-col gap-1.5 mb-4', 'web:last:mb-0', DISABLED_OPACITY]);
11
-
12
- export const formLabelVariants = cva(
13
- [
14
- 'flex-row items-center',
15
- DISABLED_OPACITY,
16
- 'web:cursor-pointer',
17
- 'font-medium data-[invalid=true]:text-red-600',
18
- ],
19
- {
20
- variants: {
21
- size: {
22
- default: 'text-sm',
23
- small: 'text-xs',
24
- },
25
- },
26
- defaultVariants: {
27
- size: 'default',
28
- },
29
- },
30
- );
31
-
32
- export const formHelperVariants = cva(['flex-row items-center']);
33
-
34
- export const formHelperTextVariants = cva([COLOR_TEXT_SECONDARY], {
35
- variants: {
36
- size: {
37
- default: 'text-xs',
38
- small: 'text-[11px]',
39
- },
40
- },
41
- defaultVariants: {
42
- size: 'default',
43
- },
44
- });
45
-
46
- export const formErrorVariants = cva(['flex-row items-center gap-1']);
47
-
48
- export const formErrorTextVariants = cva([COLOR_TEXT_INVALID, 'font-medium'], {
49
- variants: {
50
- size: {
51
- default: 'text-xs',
52
- small: 'text-[11px]',
53
- },
54
- },
55
- defaultVariants: {
56
- size: 'default',
57
- },
58
- });
59
-
60
- export const formErrorIconVariants = cva([COLOR_TEXT_INVALID], {
61
- variants: {
62
- size: {
63
- default: 'size-3.5',
64
- small: 'size-3',
65
- },
66
- },
67
- defaultVariants: {
68
- size: 'default',
69
- },
70
- });
71
-
72
- export type FormLabelVariantProps = VariantProps<typeof formLabelVariants>;
73
- export type FormHelperTextVariantProps = VariantProps<typeof formHelperTextVariants>;
74
- export type FormErrorTextVariantProps = VariantProps<typeof formErrorTextVariants>;
75
- export type FormErrorIconVariantProps = VariantProps<typeof formErrorIconVariants>;
@@ -0,0 +1,53 @@
1
+ import { forwardRef } from 'react';
2
+ import { View, type ViewProps } from 'react-native';
3
+ import { createProgress, type IProgressProps } from '@cdx-ui/primitives';
4
+ import { cn } from '@cdx-ui/utils';
5
+ import {
6
+ progressBarIndicatorVariants,
7
+ progressBarTrackVariants,
8
+ type ProgressBarTrackVariantProps,
9
+ } from './styles';
10
+
11
+ const ProgressPrimitive = createProgress({
12
+ Root: View,
13
+ Indicator: View,
14
+ });
15
+
16
+ export interface ProgressBarProps extends IProgressProps, ProgressBarTrackVariantProps {
17
+ readonly className?: string;
18
+ }
19
+
20
+ export interface ProgressBarIndicatorProps extends ViewProps {
21
+ readonly className?: string;
22
+ }
23
+
24
+ const ProgressBarRoot = forwardRef<View, ProgressBarProps>(
25
+ ({ className, style, ...props }, ref) => {
26
+ const trackClass = cn(progressBarTrackVariants(), className);
27
+
28
+ return <ProgressPrimitive ref={ref} className={trackClass} style={style} {...props} />;
29
+ },
30
+ );
31
+
32
+ ProgressBarRoot.displayName = 'ProgressBar';
33
+
34
+ const ProgressBarIndicator = forwardRef<View, ProgressBarIndicatorProps>(
35
+ ({ className, style, ...props }, ref) => (
36
+ <ProgressPrimitive.Indicator
37
+ ref={ref}
38
+ className={cn(progressBarIndicatorVariants(), className)}
39
+ style={style}
40
+ {...props}
41
+ />
42
+ ),
43
+ );
44
+
45
+ ProgressBarIndicator.displayName = 'ProgressBar.Indicator';
46
+
47
+ type ProgressBarCompoundComponent = typeof ProgressBarRoot & {
48
+ Indicator: typeof ProgressBarIndicator;
49
+ };
50
+
51
+ export const ProgressBar = Object.assign(ProgressBarRoot, {
52
+ Indicator: ProgressBarIndicator,
53
+ }) as ProgressBarCompoundComponent;
@@ -0,0 +1,9 @@
1
+ import { cva, type VariantProps } from 'class-variance-authority';
2
+
3
+ export const progressBarTrackVariants = cva([
4
+ 'w-full flex-row overflow-hidden rounded-full bg-surface-action-tint h-1',
5
+ ]);
6
+
7
+ export const progressBarIndicatorVariants = cva(['rounded-full bg-surface-action-strong']);
8
+
9
+ export type ProgressBarTrackVariantProps = VariantProps<typeof progressBarTrackVariants>;
@@ -1,13 +1,14 @@
1
1
  import { cva, type VariantProps } from 'class-variance-authority';
2
2
 
3
- export const progressSegmentedVariants = cva(['flex-row gap-1 w-full']);
3
+ export const progressSegmentedVariants = cva(['flex-row gap-1 w-full rounded overflow-hidden']);
4
4
 
5
- export const segmentVariants = cva(['flex-1 h-2 rounded'], {
5
+ export const segmentVariants = cva(['flex-1 h-1'], {
6
6
  variants: {
7
7
  state: {
8
- complete: 'bg-slate-900',
9
- incomplete: 'bg-slate-300',
10
- inprogress: 'bg-gradient-to-r from-slate-900 from-50% to-slate-300 to-50%',
8
+ complete: 'bg-surface-action-strong',
9
+ incomplete: 'bg-surface-action-tint',
10
+ inprogress:
11
+ 'bg-gradient-to-r from-surface-action-strong from-50% to-surface-action-tint to-50%',
11
12
  },
12
13
  },
13
14
  defaultVariants: {
@@ -7,10 +7,12 @@ export * from './Card';
7
7
  export * from './Checkbox';
8
8
  export * from './Chip';
9
9
  export * from './Dialog';
10
+ export * from './Field';
10
11
  export * from './Form';
11
12
  export * from './Image';
12
13
  export * from './Input';
13
14
  export * from './Link';
15
+ export * from './ProgressBar';
14
16
  export * from './ProgressSegmented';
15
17
  export * from './Select';
16
18
  export * from './VirtualizedList';
@@ -1 +0,0 @@
1
- {"version":3,"names":["_react","require","_reactNative","_utils","_jsxRuntime","FormLabelRoot","exports","forwardRef","htmlFor","_omitHtmlFor","onPress","props","ref","focusInput","isDisabled","useFormControlContext","jsx","Text","disabled","Boolean","composeEventHandlers","displayName"],"sourceRoot":"../../../../src","sources":["components/Form/FormLabelRoot.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAA4E,IAAAG,WAAA,GAAAH,OAAA;AAS5E;AACA;AACA;AACA;AACO,MAAMI,aAAa,GAAAC,OAAA,CAAAD,aAAA,gBAAG,IAAAE,iBAAU,EACrC,CAAC;EAAEC,OAAO,EAAEC,YAAY;EAAEC,OAAO;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,KAAK;EACrD,KAAKH,YAAY;EAEjB,MAAM;IAAEI,UAAU;IAAEC;EAAW,CAAC,GAAG,IAAAC,4BAAqB,EAAC,CAAC;EAE1D,oBACE,IAAAX,WAAA,CAAAY,GAAA,EAACd,YAAA,CAAAe,IAAI;IACHL,GAAG,EAAEA,GAAI;IAAA,GACLD,KAAK;IACTO,QAAQ,EAAEC,OAAO,CAACL,UAAU,CAAE;IAC9BJ,OAAO,EAAE,IAAAU,2BAAoB,EAACV,OAAO,EAAE,MAAMG,UAAU,GAAG,CAAC;EAAE,CAC9D,CAAC;AAEN,CACF,CAAC;AAEDR,aAAa,CAACgB,WAAW,GAAG,eAAe","ignoreList":[]}
@@ -1 +0,0 @@
1
- {"version":3,"names":["_react","_interopRequireWildcard","require","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","FormLabelRoot","exports","forwardRef","props","ref","jsx","displayName"],"sourceRoot":"../../../../src","sources":["components/Form/FormLabelRoot.web.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAA0D,IAAAC,WAAA,GAAAD,OAAA;AAAA,SAAAD,wBAAAG,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAL,uBAAA,YAAAA,CAAAG,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAY1D;AACO,MAAMkB,aAAa,GAAAC,OAAA,CAAAD,aAAA,gBAAG,IAAAE,iBAAU,EAAuC,CAACC,KAAK,EAAEC,GAAG,KAAK;EAC5F,oBAAO,IAAAxB,WAAA,CAAAyB,GAAA;IAAOD,GAAG,EAAEA,GAAI;IAAA,GAAMD;EAAK,CAAmD,CAAC;AACxF,CAAC,CAAC;AAEFH,aAAa,CAACM,WAAW,GAAG,eAAe","ignoreList":[]}
@@ -1 +0,0 @@
1
- {"version":3,"names":["forwardRef","Text","composeEventHandlers","useFormControlContext","jsx","_jsx","FormLabelRoot","htmlFor","_omitHtmlFor","onPress","props","ref","focusInput","isDisabled","disabled","Boolean","displayName"],"sourceRoot":"../../../../src","sources":["components/Form/FormLabelRoot.tsx"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,OAAO;AAClC,SAASC,IAAI,QAA+C,cAAc;AAC1E,SAASC,oBAAoB,EAAEC,qBAAqB,QAAQ,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAS5E;AACA;AACA;AACA;AACA,OAAO,MAAMC,aAAa,gBAAGN,UAAU,CACrC,CAAC;EAAEO,OAAO,EAAEC,YAAY;EAAEC,OAAO;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,KAAK;EACrD,KAAKH,YAAY;EAEjB,MAAM;IAAEI,UAAU;IAAEC;EAAW,CAAC,GAAGV,qBAAqB,CAAC,CAAC;EAE1D,oBACEE,IAAA,CAACJ,IAAI;IACHU,GAAG,EAAEA,GAAI;IAAA,GACLD,KAAK;IACTI,QAAQ,EAAEC,OAAO,CAACF,UAAU,CAAE;IAC9BJ,OAAO,EAAEP,oBAAoB,CAACO,OAAO,EAAE,MAAMG,UAAU,GAAG,CAAC;EAAE,CAC9D,CAAC;AAEN,CACF,CAAC;AAEDN,aAAa,CAACU,WAAW,GAAG,eAAe","ignoreList":[]}