@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.
- package/lib/commonjs/components/{Form/FormLabelRoot.js → Field/FieldLabel.js} +4 -4
- package/lib/commonjs/components/Field/FieldLabel.js.map +1 -0
- package/lib/commonjs/components/{Form/FormLabelRoot.web.js → Field/FieldLabel.web.js} +9 -5
- package/lib/commonjs/components/Field/FieldLabel.web.js.map +1 -0
- package/lib/commonjs/components/Field/index.js +158 -0
- package/lib/commonjs/components/Field/index.js.map +1 -0
- package/lib/commonjs/components/Field/styles.js +16 -0
- package/lib/commonjs/components/Field/styles.js.map +1 -0
- package/lib/commonjs/components/Form/FormRoot.js.map +1 -1
- package/lib/commonjs/components/Form/index.js +6 -213
- package/lib/commonjs/components/Form/index.js.map +1 -1
- package/lib/commonjs/components/Form/styles.js +1 -49
- package/lib/commonjs/components/Form/styles.js.map +1 -1
- package/lib/commonjs/components/ProgressBar/index.js +45 -0
- package/lib/commonjs/components/ProgressBar/index.js.map +1 -0
- package/lib/commonjs/components/ProgressBar/styles.js +10 -0
- package/lib/commonjs/components/ProgressBar/styles.js.map +1 -0
- package/lib/commonjs/components/ProgressSegmented/styles.js +5 -5
- package/lib/commonjs/components/ProgressSegmented/styles.js.map +1 -1
- package/lib/commonjs/components/index.js +24 -0
- package/lib/commonjs/components/index.js.map +1 -1
- package/lib/module/components/{Form/FormLabelRoot.js → Field/FieldLabel.js} +3 -3
- package/lib/module/components/Field/FieldLabel.js.map +1 -0
- package/lib/module/components/Field/FieldLabel.web.js +17 -0
- package/lib/module/components/Field/FieldLabel.web.js.map +1 -0
- package/lib/module/components/Field/index.js +155 -0
- package/lib/module/components/Field/index.js.map +1 -0
- package/lib/module/components/Field/styles.js +12 -0
- package/lib/module/components/Field/styles.js.map +1 -0
- package/lib/module/components/Form/FormRoot.js.map +1 -1
- package/lib/module/components/Form/index.js +8 -216
- package/lib/module/components/Form/index.js.map +1 -1
- package/lib/module/components/Form/styles.js +0 -48
- package/lib/module/components/Form/styles.js.map +1 -1
- package/lib/module/components/ProgressBar/index.js +41 -0
- package/lib/module/components/ProgressBar/index.js.map +1 -0
- package/lib/module/components/ProgressBar/styles.js +6 -0
- package/lib/module/components/ProgressBar/styles.js.map +1 -0
- package/lib/module/components/ProgressSegmented/styles.js +5 -5
- package/lib/module/components/ProgressSegmented/styles.js.map +1 -1
- package/lib/module/components/index.js +2 -0
- package/lib/module/components/index.js.map +1 -1
- package/lib/typescript/components/{Form/FormLabelRoot.d.ts → Field/FieldLabel.d.ts} +5 -5
- package/lib/typescript/components/Field/FieldLabel.d.ts.map +1 -0
- package/lib/typescript/components/{Form/FormLabelRoot.web.d.ts → Field/FieldLabel.web.d.ts} +3 -7
- package/lib/typescript/components/Field/FieldLabel.web.d.ts.map +1 -0
- package/lib/typescript/components/Field/index.d.ts +26 -0
- package/lib/typescript/components/Field/index.d.ts.map +1 -0
- package/lib/typescript/components/Field/styles.d.ts +16 -0
- package/lib/typescript/components/Field/styles.d.ts.map +1 -0
- package/lib/typescript/components/Form/FormRoot.d.ts +2 -0
- package/lib/typescript/components/Form/FormRoot.d.ts.map +1 -1
- package/lib/typescript/components/Form/index.d.ts +4 -61
- package/lib/typescript/components/Form/index.d.ts.map +1 -1
- package/lib/typescript/components/Form/styles.d.ts +0 -20
- package/lib/typescript/components/Form/styles.d.ts.map +1 -1
- package/lib/typescript/components/ProgressBar/index.d.ts +17 -0
- package/lib/typescript/components/ProgressBar/index.d.ts.map +1 -0
- package/lib/typescript/components/ProgressBar/styles.d.ts +5 -0
- package/lib/typescript/components/ProgressBar/styles.d.ts.map +1 -0
- package/lib/typescript/components/ProgressSegmented/styles.d.ts.map +1 -1
- package/lib/typescript/components/index.d.ts +2 -0
- package/lib/typescript/components/index.d.ts.map +1 -1
- package/package.json +4 -4
- package/src/components/{Form/FormLabelRoot.tsx → Field/FieldLabel.tsx} +4 -4
- package/src/components/Field/FieldLabel.web.tsx +25 -0
- package/src/components/Field/index.tsx +171 -0
- package/src/components/Field/styles.ts +32 -0
- package/src/components/Form/FormRoot.tsx +1 -0
- package/src/components/Form/index.tsx +11 -245
- package/src/components/Form/styles.ts +1 -73
- package/src/components/ProgressBar/index.tsx +53 -0
- package/src/components/ProgressBar/styles.ts +9 -0
- package/src/components/ProgressSegmented/styles.ts +6 -5
- package/src/components/index.ts +2 -0
- package/lib/commonjs/components/Form/FormLabelRoot.js.map +0 -1
- package/lib/commonjs/components/Form/FormLabelRoot.web.js.map +0 -1
- package/lib/module/components/Form/FormLabelRoot.js.map +0 -1
- package/lib/module/components/Form/FormLabelRoot.web.js +0 -13
- package/lib/module/components/Form/FormLabelRoot.web.js.map +0 -1
- package/lib/typescript/components/Form/FormLabelRoot.d.ts.map +0 -1
- package/lib/typescript/components/Form/FormLabelRoot.web.d.ts.map +0 -1
- 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
|
|
2
|
-
import {
|
|
3
|
-
import { createForm
|
|
4
|
-
import { cn
|
|
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 {
|
|
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
|
-
|
|
39
|
-
|
|
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
|
|
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
|
-
//
|
|
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
|
|
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
|
|
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-
|
|
5
|
+
export const segmentVariants = cva(['flex-1 h-1'], {
|
|
6
6
|
variants: {
|
|
7
7
|
state: {
|
|
8
|
-
complete: 'bg-
|
|
9
|
-
incomplete: 'bg-
|
|
10
|
-
inprogress:
|
|
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: {
|
package/src/components/index.ts
CHANGED
|
@@ -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":[]}
|