@cdx-ui/components 0.0.1-alpha.1
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 +34 -0
- package/lib/commonjs/components/Box/Box.js +30 -0
- package/lib/commonjs/components/Box/Box.js.map +1 -0
- package/lib/commonjs/components/Box/index.js +17 -0
- package/lib/commonjs/components/Box/index.js.map +1 -0
- package/lib/commonjs/components/Button/index.js +155 -0
- package/lib/commonjs/components/Button/index.js.map +1 -0
- package/lib/commonjs/components/Button/styles.js +312 -0
- package/lib/commonjs/components/Button/styles.js.map +1 -0
- package/lib/commonjs/components/Input/BaseInput.js +13 -0
- package/lib/commonjs/components/Input/BaseInput.js.map +1 -0
- package/lib/commonjs/components/Input/BaseInput.web.js +50 -0
- package/lib/commonjs/components/Input/BaseInput.web.js.map +1 -0
- package/lib/commonjs/components/Input/index.js +142 -0
- package/lib/commonjs/components/Input/index.js.map +1 -0
- package/lib/commonjs/components/Input/styles.js +62 -0
- package/lib/commonjs/components/Input/styles.js.map +1 -0
- package/lib/commonjs/components/Select/index.js +213 -0
- package/lib/commonjs/components/Select/index.js.map +1 -0
- package/lib/commonjs/components/Select/styles.js +120 -0
- package/lib/commonjs/components/Select/styles.js.map +1 -0
- package/lib/commonjs/components/Spinner/Spinner.js +15 -0
- package/lib/commonjs/components/Spinner/Spinner.js.map +1 -0
- package/lib/commonjs/components/Spinner/index.js +17 -0
- package/lib/commonjs/components/Spinner/index.js.map +1 -0
- package/lib/commonjs/components/Stack/HStack.js +45 -0
- package/lib/commonjs/components/Stack/HStack.js.map +1 -0
- package/lib/commonjs/components/Stack/VStack.js +45 -0
- package/lib/commonjs/components/Stack/VStack.js.map +1 -0
- package/lib/commonjs/components/Stack/index.js +20 -0
- package/lib/commonjs/components/Stack/index.js.map +1 -0
- package/lib/commonjs/components/Text/Text.js +30 -0
- package/lib/commonjs/components/Text/Text.js.map +1 -0
- package/lib/commonjs/components/Text/index.js +17 -0
- package/lib/commonjs/components/Text/index.js.map +1 -0
- package/lib/commonjs/components/index.js +83 -0
- package/lib/commonjs/components/index.js.map +1 -0
- package/lib/commonjs/index.js +17 -0
- package/lib/commonjs/index.js.map +1 -0
- package/lib/commonjs/package.json +1 -0
- package/lib/commonjs/styles.css +6 -0
- package/lib/commonjs/utils/WrapStringChild.js +22 -0
- package/lib/commonjs/utils/WrapStringChild.js.map +1 -0
- package/lib/module/components/Box/Box.js +26 -0
- package/lib/module/components/Box/Box.js.map +1 -0
- package/lib/module/components/Box/index.js +4 -0
- package/lib/module/components/Box/index.js.map +1 -0
- package/lib/module/components/Button/index.js +151 -0
- package/lib/module/components/Button/index.js.map +1 -0
- package/lib/module/components/Button/styles.js +309 -0
- package/lib/module/components/Button/styles.js.map +1 -0
- package/lib/module/components/Input/BaseInput.js +4 -0
- package/lib/module/components/Input/BaseInput.js.map +1 -0
- package/lib/module/components/Input/BaseInput.web.js +45 -0
- package/lib/module/components/Input/BaseInput.web.js.map +1 -0
- package/lib/module/components/Input/index.js +138 -0
- package/lib/module/components/Input/index.js.map +1 -0
- package/lib/module/components/Input/styles.js +58 -0
- package/lib/module/components/Input/styles.js.map +1 -0
- package/lib/module/components/Select/index.js +209 -0
- package/lib/module/components/Select/index.js.map +1 -0
- package/lib/module/components/Select/styles.js +117 -0
- package/lib/module/components/Select/styles.js.map +1 -0
- package/lib/module/components/Spinner/Spinner.js +11 -0
- package/lib/module/components/Spinner/Spinner.js.map +1 -0
- package/lib/module/components/Spinner/index.js +4 -0
- package/lib/module/components/Spinner/index.js.map +1 -0
- package/lib/module/components/Stack/HStack.js +41 -0
- package/lib/module/components/Stack/HStack.js.map +1 -0
- package/lib/module/components/Stack/VStack.js +41 -0
- package/lib/module/components/Stack/VStack.js.map +1 -0
- package/lib/module/components/Stack/index.js +5 -0
- package/lib/module/components/Stack/index.js.map +1 -0
- package/lib/module/components/Text/Text.js +26 -0
- package/lib/module/components/Text/Text.js.map +1 -0
- package/lib/module/components/Text/index.js +4 -0
- package/lib/module/components/Text/index.js.map +1 -0
- package/lib/module/components/index.js +9 -0
- package/lib/module/components/index.js.map +1 -0
- package/lib/module/index.js +4 -0
- package/lib/module/index.js.map +1 -0
- package/lib/module/styles.css +6 -0
- package/lib/module/utils/WrapStringChild.js +18 -0
- package/lib/module/utils/WrapStringChild.js.map +1 -0
- package/lib/typescript/components/Box/Box.d.ts +8 -0
- package/lib/typescript/components/Box/Box.d.ts.map +1 -0
- package/lib/typescript/components/Box/index.d.ts +2 -0
- package/lib/typescript/components/Box/index.d.ts.map +1 -0
- package/lib/typescript/components/Button/index.d.ts +41 -0
- package/lib/typescript/components/Button/index.d.ts.map +1 -0
- package/lib/typescript/components/Button/styles.d.ts +23 -0
- package/lib/typescript/components/Button/styles.d.ts.map +1 -0
- package/lib/typescript/components/Input/BaseInput.d.ts +2 -0
- package/lib/typescript/components/Input/BaseInput.d.ts.map +1 -0
- package/lib/typescript/components/Input/BaseInput.web.d.ts +3 -0
- package/lib/typescript/components/Input/BaseInput.web.d.ts.map +1 -0
- package/lib/typescript/components/Input/index.d.ts +32 -0
- package/lib/typescript/components/Input/index.d.ts.map +1 -0
- package/lib/typescript/components/Input/styles.d.ts +17 -0
- package/lib/typescript/components/Input/styles.d.ts.map +1 -0
- package/lib/typescript/components/Select/index.d.ts +45 -0
- package/lib/typescript/components/Select/index.d.ts.map +1 -0
- package/lib/typescript/components/Select/styles.d.ts +22 -0
- package/lib/typescript/components/Select/styles.d.ts.map +1 -0
- package/lib/typescript/components/Spinner/Spinner.d.ts +5 -0
- package/lib/typescript/components/Spinner/Spinner.d.ts.map +1 -0
- package/lib/typescript/components/Spinner/index.d.ts +2 -0
- package/lib/typescript/components/Spinner/index.d.ts.map +1 -0
- package/lib/typescript/components/Stack/HStack.d.ts +20 -0
- package/lib/typescript/components/Stack/HStack.d.ts.map +1 -0
- package/lib/typescript/components/Stack/VStack.d.ts +20 -0
- package/lib/typescript/components/Stack/VStack.d.ts.map +1 -0
- package/lib/typescript/components/Stack/index.d.ts +3 -0
- package/lib/typescript/components/Stack/index.d.ts.map +1 -0
- package/lib/typescript/components/Text/Text.d.ts +11 -0
- package/lib/typescript/components/Text/Text.d.ts.map +1 -0
- package/lib/typescript/components/Text/index.d.ts +2 -0
- package/lib/typescript/components/Text/index.d.ts.map +1 -0
- package/lib/typescript/components/index.d.ts +7 -0
- package/lib/typescript/components/index.d.ts.map +1 -0
- package/lib/typescript/index.d.ts +2 -0
- package/lib/typescript/index.d.ts.map +1 -0
- package/lib/typescript/utils/WrapStringChild.d.ts +10 -0
- package/lib/typescript/utils/WrapStringChild.d.ts.map +1 -0
- package/package.json +90 -0
- package/src/components/Box/Box.tsx +21 -0
- package/src/components/Box/index.ts +1 -0
- package/src/components/Button/index.tsx +186 -0
- package/src/components/Button/styles.ts +410 -0
- package/src/components/Input/BaseInput.tsx +1 -0
- package/src/components/Input/BaseInput.web.tsx +41 -0
- package/src/components/Input/index.tsx +161 -0
- package/src/components/Input/styles.ts +83 -0
- package/src/components/Select/index.tsx +215 -0
- package/src/components/Select/styles.ts +168 -0
- package/src/components/Spinner/Spinner.tsx +10 -0
- package/src/components/Spinner/index.ts +1 -0
- package/src/components/Stack/HStack.tsx +42 -0
- package/src/components/Stack/VStack.tsx +46 -0
- package/src/components/Stack/index.ts +2 -0
- package/src/components/Text/Text.tsx +58 -0
- package/src/components/Text/index.ts +1 -0
- package/src/components/index.ts +6 -0
- package/src/index.ts +1 -0
- package/src/styles.css +6 -0
- package/src/utils/WrapStringChild.tsx +25 -0
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { type VariantProps } from 'class-variance-authority';
|
|
2
|
+
export declare const buttonRootVariants: (props?: ({
|
|
3
|
+
variant?: "solid" | "subtle" | "outline" | "ghost" | null | undefined;
|
|
4
|
+
color?: "primary" | "secondary" | "success" | "danger" | null | undefined;
|
|
5
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
6
|
+
fullWidth?: boolean | null | undefined;
|
|
7
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
8
|
+
export declare const buttonTextVariants: (props?: ({
|
|
9
|
+
variant?: "solid" | "subtle" | "outline" | "ghost" | null | undefined;
|
|
10
|
+
color?: "primary" | "secondary" | "success" | "danger" | null | undefined;
|
|
11
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
12
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
13
|
+
export declare const buttonSpinnerVariants: (props?: ({
|
|
14
|
+
variant?: "solid" | "subtle" | "outline" | "ghost" | null | undefined;
|
|
15
|
+
color?: "primary" | "secondary" | "success" | "danger" | null | undefined;
|
|
16
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
17
|
+
export declare const buttonGroupVariants: (props?: ({
|
|
18
|
+
flexDirection?: "row" | "column" | "row-reverse" | "column-reverse" | null | undefined;
|
|
19
|
+
isAttached?: boolean | null | undefined;
|
|
20
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
21
|
+
export type ButtonVariantProps = VariantProps<typeof buttonRootVariants>;
|
|
22
|
+
export type ButtonGroupVariantProps = VariantProps<typeof buttonGroupVariants>;
|
|
23
|
+
//# sourceMappingURL=styles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAKlE,eAAO,MAAM,kBAAkB;;;;;8EAiO9B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;8EA2F7B,CAAC;AAEH,eAAO,MAAM,qBAAqB;;;8EA6DhC,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;8EAiB9B,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC;AACzE,MAAM,MAAM,uBAAuB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BaseInput.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/BaseInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,SAAS,EAAE,MAAM,cAAc,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BaseInput.web.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/BaseInput.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,eAAO,MAAM,SAAS,8EAmCpB,CAAC"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
2
|
+
import { type TextInput, View, type ViewProps } from 'react-native';
|
|
3
|
+
import { type IInputFieldProps, type IInputProps, type IInputSlotProps } from '@cdx-ui/primitives';
|
|
4
|
+
import { type InputVariantProps } from './styles';
|
|
5
|
+
export interface InputProps extends ViewProps, IInputFieldProps, InputVariantProps {
|
|
6
|
+
className?: string;
|
|
7
|
+
children?: ReactNode;
|
|
8
|
+
}
|
|
9
|
+
declare const InputRoot: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<View>>;
|
|
10
|
+
export type InputFieldProps = IInputProps & {
|
|
11
|
+
className?: string;
|
|
12
|
+
placeholderTextColorClassName?: string;
|
|
13
|
+
};
|
|
14
|
+
declare const InputField: import("react").ForwardRefExoticComponent<InputFieldProps & import("react").RefAttributes<TextInput>>;
|
|
15
|
+
export interface InputSlotProps extends ViewProps, IInputSlotProps {
|
|
16
|
+
className?: string;
|
|
17
|
+
children?: ReactNode;
|
|
18
|
+
}
|
|
19
|
+
declare const InputSlot: import("react").ForwardRefExoticComponent<InputSlotProps & import("react").RefAttributes<View>>;
|
|
20
|
+
export interface InputIconProps extends ViewProps {
|
|
21
|
+
className?: string;
|
|
22
|
+
children?: ReactNode;
|
|
23
|
+
}
|
|
24
|
+
declare const InputIcon: import("react").ForwardRefExoticComponent<InputIconProps & import("react").RefAttributes<View>>;
|
|
25
|
+
type InputCompoundComponent = typeof InputRoot & {
|
|
26
|
+
Field: typeof InputField;
|
|
27
|
+
Slot: typeof InputSlot;
|
|
28
|
+
Icon: typeof InputIcon;
|
|
29
|
+
};
|
|
30
|
+
export declare const Input: InputCompoundComponent;
|
|
31
|
+
export type { InputVariantProps };
|
|
32
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,KAAK,SAAS,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACpE,OAAO,EAEL,KAAK,gBAAgB,EACrB,KAAK,WAAW,EAChB,KAAK,eAAe,EACrB,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EACL,KAAK,iBAAiB,EAMvB,MAAM,UAAU,CAAC;AAmBlB,MAAM,WAAW,UAAW,SAAQ,SAAS,EAAE,gBAAgB,EAAE,iBAAiB;IAChF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,SAAS,6FAgBd,CAAC;AAQF,MAAM,MAAM,eAAe,GAAG,WAAW,GAAG;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6BAA6B,CAAC,EAAE,MAAM,CAAC;CACxC,CAAC;AAEF,QAAA,MAAM,UAAU,uGAoBf,CAAC;AAQF,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,eAAe;IAChE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,SAAS,iGAYd,CAAC;AAQF,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,SAAS,iGAYd,CAAC;AAQF,KAAK,sBAAsB,GAAG,OAAO,SAAS,GAAG;IAC/C,KAAK,EAAE,OAAO,UAAU,CAAC;IACzB,IAAI,EAAE,OAAO,SAAS,CAAC;IACvB,IAAI,EAAE,OAAO,SAAS,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,KAAK,EAIZ,sBAAsB,CAAC;AAE7B,YAAY,EAAE,iBAAiB,EAAE,CAAC"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { type VariantProps } from 'class-variance-authority';
|
|
2
|
+
export declare const inputRootVariants: (props?: ({
|
|
3
|
+
variant?: "outline" | "underlined" | null | undefined;
|
|
4
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
5
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
6
|
+
export declare const inputFieldVariants: (props?: ({
|
|
7
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
8
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
9
|
+
export declare const inputSlotVariants: (props?: ({
|
|
10
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
11
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
12
|
+
export declare const inputIconVariants: (props?: ({
|
|
13
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
14
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
15
|
+
export declare const inputFieldPlaceholderVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
16
|
+
export type InputVariantProps = VariantProps<typeof inputRootVariants>;
|
|
17
|
+
//# sourceMappingURL=styles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,iBAAiB;;;8EA8B7B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;8EAkB9B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;8EAW5B,CAAC;AAEH,eAAO,MAAM,iBAAiB;;8EAW5B,CAAC;AAEH,eAAO,MAAM,6BAA6B,oFAAsC,CAAC;AAEjF,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC"}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
2
|
+
import { Text, type TextProps, View, type ViewProps } from 'react-native';
|
|
3
|
+
import { type ISelectContentProps, type ISelectItemLabelProps, type ISelectItemProps, type ISelectProps, type ISelectTriggerProps, type ISelectValueProps } from '@cdx-ui/primitives';
|
|
4
|
+
import { type SelectVariantProps } from './styles';
|
|
5
|
+
export interface SelectProps extends ViewProps, ISelectProps, SelectVariantProps {
|
|
6
|
+
className?: string;
|
|
7
|
+
}
|
|
8
|
+
declare const SelectRoot: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<View>>;
|
|
9
|
+
export interface SelectTriggerProps extends ISelectTriggerProps {
|
|
10
|
+
className?: string;
|
|
11
|
+
children?: ReactNode;
|
|
12
|
+
}
|
|
13
|
+
declare const SelectTrigger: import("react").ForwardRefExoticComponent<SelectTriggerProps & import("react").RefAttributes<View>>;
|
|
14
|
+
export interface SelectValueProps extends TextProps, ISelectValueProps {
|
|
15
|
+
className?: string;
|
|
16
|
+
}
|
|
17
|
+
declare const SelectValue: import("react").ForwardRefExoticComponent<SelectValueProps & import("react").RefAttributes<Text>>;
|
|
18
|
+
export interface SelectIconProps extends ViewProps {
|
|
19
|
+
className?: string;
|
|
20
|
+
}
|
|
21
|
+
declare const SelectIcon: import("react").ForwardRefExoticComponent<SelectIconProps & import("react").RefAttributes<View>>;
|
|
22
|
+
export interface SelectContentProps extends ViewProps, ISelectContentProps {
|
|
23
|
+
className?: string;
|
|
24
|
+
}
|
|
25
|
+
declare const SelectContent: import("react").ForwardRefExoticComponent<SelectContentProps & import("react").RefAttributes<View>>;
|
|
26
|
+
export interface SelectItemProps extends ISelectItemProps {
|
|
27
|
+
className?: string;
|
|
28
|
+
children?: ReactNode;
|
|
29
|
+
}
|
|
30
|
+
declare const SelectItem: import("react").ForwardRefExoticComponent<SelectItemProps & import("react").RefAttributes<View>>;
|
|
31
|
+
export interface SelectItemLabelProps extends TextProps, ISelectItemLabelProps {
|
|
32
|
+
className?: string;
|
|
33
|
+
}
|
|
34
|
+
declare const SelectItemLabel: import("react").ForwardRefExoticComponent<SelectItemLabelProps & import("react").RefAttributes<Text>>;
|
|
35
|
+
type SelectCompoundComponent = typeof SelectRoot & {
|
|
36
|
+
Trigger: typeof SelectTrigger;
|
|
37
|
+
Value: typeof SelectValue;
|
|
38
|
+
Icon: typeof SelectIcon;
|
|
39
|
+
Content: typeof SelectContent;
|
|
40
|
+
Item: typeof SelectItem;
|
|
41
|
+
ItemLabel: typeof SelectItemLabel;
|
|
42
|
+
};
|
|
43
|
+
export declare const Select: SelectCompoundComponent;
|
|
44
|
+
export type { SelectVariantProps } from './styles';
|
|
45
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAa,IAAI,EAAE,KAAK,SAAS,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACrF,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,qBAAqB,EAC1B,KAAK,gBAAgB,EACrB,KAAK,YAAY,EACjB,KAAK,mBAAmB,EACxB,KAAK,iBAAiB,EACvB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EACL,KAAK,kBAAkB,EAOxB,MAAM,UAAU,CAAC;AAsBlB,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,YAAY,EAAE,kBAAkB;IAC9E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,UAAU,8FAcf,CAAC;AAQF,MAAM,WAAW,kBAAmB,SAAQ,mBAAmB;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,aAAa,qGAYlB,CAAC;AAQF,MAAM,WAAW,gBAAiB,SAAQ,SAAS,EAAE,iBAAiB;IACpE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,WAAW,mGAMf,CAAC;AAQH,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,UAAU,kGAMd,CAAC;AAQH,MAAM,WAAW,kBAAmB,SAAQ,SAAS,EAAE,mBAAmB;IACxE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,aAAa,qGAQlB,CAAC;AAQF,MAAM,WAAW,eAAgB,SAAQ,gBAAgB;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,UAAU,kGAYf,CAAC;AAQF,MAAM,WAAW,oBAAqB,SAAQ,SAAS,EAAE,qBAAqB;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,eAAe,uGAUpB,CAAC;AAQF,KAAK,uBAAuB,GAAG,OAAO,UAAU,GAAG;IACjD,OAAO,EAAE,OAAO,aAAa,CAAC;IAC9B,KAAK,EAAE,OAAO,WAAW,CAAC;IAC1B,IAAI,EAAE,OAAO,UAAU,CAAC;IACxB,OAAO,EAAE,OAAO,aAAa,CAAC;IAC9B,IAAI,EAAE,OAAO,UAAU,CAAC;IACxB,SAAS,EAAE,OAAO,eAAe,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,MAAM,EAOb,uBAAuB,CAAC;AAE9B,YAAY,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { type VariantProps } from 'class-variance-authority';
|
|
2
|
+
export declare const selectTriggerVariants: (props?: ({
|
|
3
|
+
variant?: "outline" | "ghost" | "filled" | null | undefined;
|
|
4
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
5
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
6
|
+
export declare const selectValueVariants: (props?: ({
|
|
7
|
+
variant?: "outline" | "ghost" | "filled" | null | undefined;
|
|
8
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
9
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
10
|
+
export declare const selectIconVariants: (props?: ({
|
|
11
|
+
variant?: "outline" | "ghost" | "filled" | null | undefined;
|
|
12
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
13
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
14
|
+
export declare const selectContentVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
|
15
|
+
export declare const selectItemVariants: (props?: ({
|
|
16
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
17
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
18
|
+
export declare const selectItemLabelVariants: (props?: ({
|
|
19
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
20
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
21
|
+
export type SelectVariantProps = VariantProps<typeof selectTriggerVariants>;
|
|
22
|
+
//# sourceMappingURL=styles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,eAAO,MAAM,qBAAqB;;;8EAoDjC,CAAC;AAIF,eAAO,MAAM,mBAAmB;;;8EAoB/B,CAAC;AAIF,eAAO,MAAM,kBAAkB;;;8EAoB9B,CAAC;AAIF,eAAO,MAAM,qBAAqB,oFAWhC,CAAC;AAIH,eAAO,MAAM,kBAAkB;;8EAuB9B,CAAC;AAIF,eAAO,MAAM,uBAAuB;;8EAcnC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { ActivityIndicator, type ActivityIndicatorProps } from 'react-native';
|
|
2
|
+
export interface SpinnerProps extends ActivityIndicatorProps {
|
|
3
|
+
}
|
|
4
|
+
export declare const Spinner: import("react").ForwardRefExoticComponent<SpinnerProps & import("react").RefAttributes<ActivityIndicator>>;
|
|
5
|
+
//# sourceMappingURL=Spinner.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../../src/components/Spinner/Spinner.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,KAAK,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAE9E,MAAM,WAAW,YAAa,SAAQ,sBAAsB;CAAG;AAE/D,eAAO,MAAM,OAAO,4GAEnB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Spinner/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { View, type ViewProps } from 'react-native';
|
|
2
|
+
declare const spaceScale: {
|
|
3
|
+
readonly xs: 1;
|
|
4
|
+
readonly sm: 2;
|
|
5
|
+
readonly md: 3;
|
|
6
|
+
readonly lg: 4;
|
|
7
|
+
readonly xl: 5;
|
|
8
|
+
readonly '2xl': 6;
|
|
9
|
+
readonly '3xl': 7;
|
|
10
|
+
readonly '4xl': 8;
|
|
11
|
+
};
|
|
12
|
+
type StackSpace = keyof typeof spaceScale;
|
|
13
|
+
export interface HStackProps extends ViewProps {
|
|
14
|
+
className?: string;
|
|
15
|
+
space?: StackSpace;
|
|
16
|
+
reversed?: boolean;
|
|
17
|
+
}
|
|
18
|
+
export declare const HStack: import("react").ForwardRefExoticComponent<HStackProps & import("react").RefAttributes<View>>;
|
|
19
|
+
export {};
|
|
20
|
+
//# sourceMappingURL=HStack.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HStack.d.ts","sourceRoot":"","sources":["../../../../src/components/Stack/HStack.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIpD,QAAA,MAAM,UAAU;;;;;;;;;CASN,CAAC;AAEX,KAAK,UAAU,GAAG,MAAM,OAAO,UAAU,CAAC;AAE1C,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,MAAM,8FAclB,CAAC"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { View, type ViewProps } from 'react-native';
|
|
2
|
+
declare const spaceScale: {
|
|
3
|
+
readonly xs: 1;
|
|
4
|
+
readonly sm: 2;
|
|
5
|
+
readonly md: 3;
|
|
6
|
+
readonly lg: 4;
|
|
7
|
+
readonly xl: 5;
|
|
8
|
+
readonly '2xl': 6;
|
|
9
|
+
readonly '3xl': 7;
|
|
10
|
+
readonly '4xl': 8;
|
|
11
|
+
};
|
|
12
|
+
type StackSpace = keyof typeof spaceScale;
|
|
13
|
+
export interface VStackProps extends ViewProps {
|
|
14
|
+
className?: string;
|
|
15
|
+
space?: StackSpace;
|
|
16
|
+
reversed?: boolean;
|
|
17
|
+
}
|
|
18
|
+
export declare const VStack: import("react").ForwardRefExoticComponent<VStackProps & import("react").RefAttributes<View>>;
|
|
19
|
+
export {};
|
|
20
|
+
//# sourceMappingURL=VStack.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"VStack.d.ts","sourceRoot":"","sources":["../../../../src/components/Stack/VStack.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIpD,QAAA,MAAM,UAAU;;;;;;;;;CASN,CAAC;AAEX,KAAK,UAAU,GAAG,MAAM,OAAO,UAAU,CAAC;AAE1C,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,MAAM,8FAkBlB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Stack/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { Text as RNText, type TextProps as RNTextProps } from 'react-native';
|
|
2
|
+
type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'caption' | 'button' | 'overline' | 'display1' | 'display2';
|
|
3
|
+
interface VariantProps {
|
|
4
|
+
variant?: TypographyVariant;
|
|
5
|
+
className?: string;
|
|
6
|
+
}
|
|
7
|
+
export interface TextProps extends RNTextProps, VariantProps {
|
|
8
|
+
}
|
|
9
|
+
export declare const Text: import("react").ForwardRefExoticComponent<TextProps & import("react").RefAttributes<RNText>>;
|
|
10
|
+
export {};
|
|
11
|
+
//# sourceMappingURL=Text.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../../src/components/Text/Text.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,IAAI,MAAM,EAAE,KAAK,SAAS,IAAI,WAAW,EAAE,MAAM,cAAc,CAAC;AAE7E,KAAK,iBAAiB,GAClB,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,WAAW,GACX,WAAW,GACX,OAAO,GACP,OAAO,GACP,SAAS,GACT,QAAQ,GACR,UAAU,GACV,UAAU,GACV,UAAU,CAAC;AAEf,UAAU,YAAY;IACpB,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,SAAU,SAAQ,WAAW,EAAE,YAAY;CAAG;AAe/D,eAAO,MAAM,IAAI,8FAehB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Text/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACzC,cAAc,QAAQ,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
2
|
+
import { type TextProps } from '../components/Text';
|
|
3
|
+
interface WrapStringChildProps {
|
|
4
|
+
children: ReactNode;
|
|
5
|
+
textProps?: TextProps;
|
|
6
|
+
}
|
|
7
|
+
/** @deprecated Users should wrap their own children in a Text component themselves */
|
|
8
|
+
export declare function WrapStringChild({ children, textProps }: WrapStringChildProps): ReactNode;
|
|
9
|
+
export {};
|
|
10
|
+
//# sourceMappingURL=WrapStringChild.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"WrapStringChild.d.ts","sourceRoot":"","sources":["../../../src/utils/WrapStringChild.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3E,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE1D,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED,sFAAsF;AACtF,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,oBAAoB,GAAG,SAAS,CAexF"}
|
package/package.json
ADDED
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@cdx-ui/components",
|
|
3
|
+
"version": "0.0.1-alpha.1",
|
|
4
|
+
"main": "lib/commonjs/index.js",
|
|
5
|
+
"module": "lib/module/index.js",
|
|
6
|
+
"react-native": "src/index.ts",
|
|
7
|
+
"types": "lib/typescript/index.d.ts",
|
|
8
|
+
"source": "src/index.ts",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"react-native": "./src/index.ts",
|
|
12
|
+
"source": "./src/index.ts",
|
|
13
|
+
"types": "./lib/typescript/index.d.ts",
|
|
14
|
+
"import": "./lib/module/index.js",
|
|
15
|
+
"require": "./lib/commonjs/index.js",
|
|
16
|
+
"default": "./lib/module/index.js"
|
|
17
|
+
},
|
|
18
|
+
"./styles.css": "./src/styles.css"
|
|
19
|
+
},
|
|
20
|
+
"files": [
|
|
21
|
+
"lib",
|
|
22
|
+
"src"
|
|
23
|
+
],
|
|
24
|
+
"react-native-builder-bob": {
|
|
25
|
+
"source": "src",
|
|
26
|
+
"output": "lib",
|
|
27
|
+
"targets": [
|
|
28
|
+
"commonjs",
|
|
29
|
+
"module",
|
|
30
|
+
[
|
|
31
|
+
"typescript",
|
|
32
|
+
{
|
|
33
|
+
"project": "tsconfig.build.json"
|
|
34
|
+
}
|
|
35
|
+
]
|
|
36
|
+
]
|
|
37
|
+
},
|
|
38
|
+
"peerDependencies": {
|
|
39
|
+
"react": ">=18.0.0",
|
|
40
|
+
"react-dom": ">=18.0.0",
|
|
41
|
+
"react-native": ">=0.74.0",
|
|
42
|
+
"react-native-web": ">=0.19.0",
|
|
43
|
+
"uniwind": ">=1.3.0"
|
|
44
|
+
},
|
|
45
|
+
"peerDependenciesMeta": {
|
|
46
|
+
"react-native": {
|
|
47
|
+
"optional": true
|
|
48
|
+
},
|
|
49
|
+
"react-native-web": {
|
|
50
|
+
"optional": true
|
|
51
|
+
},
|
|
52
|
+
"react-dom": {
|
|
53
|
+
"optional": true
|
|
54
|
+
},
|
|
55
|
+
"uniwind": {
|
|
56
|
+
"optional": true
|
|
57
|
+
}
|
|
58
|
+
},
|
|
59
|
+
"dependencies": {
|
|
60
|
+
"class-variance-authority": "^0.7.1",
|
|
61
|
+
"@cdx-ui/primitives": "0.0.1-alpha.1",
|
|
62
|
+
"@cdx-ui/utils": "0.0.1-alpha.1"
|
|
63
|
+
},
|
|
64
|
+
"devDependencies": {
|
|
65
|
+
"@types/react": "*",
|
|
66
|
+
"@types/react-dom": "*",
|
|
67
|
+
"react": "*",
|
|
68
|
+
"react-dom": "*",
|
|
69
|
+
"react-native": "*",
|
|
70
|
+
"react-native-builder-bob": "*",
|
|
71
|
+
"react-native-web": "*",
|
|
72
|
+
"typescript": "*"
|
|
73
|
+
},
|
|
74
|
+
"nx": {
|
|
75
|
+
"tags": [
|
|
76
|
+
"type:lib",
|
|
77
|
+
"scope:components"
|
|
78
|
+
]
|
|
79
|
+
},
|
|
80
|
+
"sideEffects": [
|
|
81
|
+
"**/*.css"
|
|
82
|
+
],
|
|
83
|
+
"publishConfig": {
|
|
84
|
+
"access": "public"
|
|
85
|
+
},
|
|
86
|
+
"scripts": {
|
|
87
|
+
"build": "bob build",
|
|
88
|
+
"lint": "eslint src/"
|
|
89
|
+
}
|
|
90
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { type ForwardedRef, forwardRef } from 'react';
|
|
2
|
+
import { View, type ViewProps } from 'react-native';
|
|
3
|
+
import { WrapStringChild } from '../../utils/WrapStringChild';
|
|
4
|
+
import type { TextProps } from '../Text';
|
|
5
|
+
|
|
6
|
+
export interface BoxProps extends ViewProps {
|
|
7
|
+
className?: string;
|
|
8
|
+
textProps?: TextProps;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
export const Box = forwardRef<View, BoxProps>(
|
|
12
|
+
({ style, className, children, textProps, ...restProps }, ref: ForwardedRef<View>) => {
|
|
13
|
+
return (
|
|
14
|
+
<View ref={ref} style={style} className={className} {...restProps}>
|
|
15
|
+
<WrapStringChild textProps={textProps}>{children}</WrapStringChild>
|
|
16
|
+
</View>
|
|
17
|
+
);
|
|
18
|
+
},
|
|
19
|
+
);
|
|
20
|
+
|
|
21
|
+
Box.displayName = 'Box';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Box';
|
|
@@ -0,0 +1,186 @@
|
|
|
1
|
+
import { forwardRef, type ReactElement, type ReactNode } from 'react';
|
|
2
|
+
import {
|
|
3
|
+
ActivityIndicator,
|
|
4
|
+
Pressable,
|
|
5
|
+
Text,
|
|
6
|
+
View,
|
|
7
|
+
type ActivityIndicatorProps,
|
|
8
|
+
type PressableProps,
|
|
9
|
+
type ViewProps,
|
|
10
|
+
type TextProps,
|
|
11
|
+
} from 'react-native';
|
|
12
|
+
import { createButton, type IButtonProps } from '@cdx-ui/primitives';
|
|
13
|
+
import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
|
|
14
|
+
import {
|
|
15
|
+
type ButtonGroupVariantProps,
|
|
16
|
+
type ButtonVariantProps,
|
|
17
|
+
buttonGroupVariants,
|
|
18
|
+
buttonRootVariants,
|
|
19
|
+
buttonSpinnerVariants,
|
|
20
|
+
buttonTextVariants,
|
|
21
|
+
} from './styles';
|
|
22
|
+
|
|
23
|
+
const SCOPE = 'BUTTON';
|
|
24
|
+
|
|
25
|
+
const Root = withStyleContext(Pressable, SCOPE);
|
|
26
|
+
|
|
27
|
+
const useButtonStyleContext = () => useStyleContext(SCOPE) as ButtonVariantProps;
|
|
28
|
+
|
|
29
|
+
const ButtonPrimitive = createButton({
|
|
30
|
+
Root,
|
|
31
|
+
Text,
|
|
32
|
+
Group: View,
|
|
33
|
+
Spinner: ActivityIndicator,
|
|
34
|
+
Icon: View,
|
|
35
|
+
});
|
|
36
|
+
|
|
37
|
+
// =============================================================================
|
|
38
|
+
// STYLED ROOT COMPONENT
|
|
39
|
+
// =============================================================================
|
|
40
|
+
|
|
41
|
+
export interface ButtonProps extends PressableProps, IButtonProps, ButtonVariantProps {
|
|
42
|
+
className?: string;
|
|
43
|
+
children?: ReactNode;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
const ButtonRoot = forwardRef<View, ButtonProps>(
|
|
47
|
+
(
|
|
48
|
+
{
|
|
49
|
+
variant = 'solid',
|
|
50
|
+
color = 'primary',
|
|
51
|
+
size = 'md',
|
|
52
|
+
fullWidth = false,
|
|
53
|
+
className,
|
|
54
|
+
children,
|
|
55
|
+
style,
|
|
56
|
+
...props
|
|
57
|
+
},
|
|
58
|
+
ref,
|
|
59
|
+
) => {
|
|
60
|
+
const computedClassName = cn(
|
|
61
|
+
buttonRootVariants({ variant, color, size, fullWidth }),
|
|
62
|
+
className,
|
|
63
|
+
);
|
|
64
|
+
|
|
65
|
+
return (
|
|
66
|
+
<ButtonPrimitive
|
|
67
|
+
ref={ref}
|
|
68
|
+
className={computedClassName}
|
|
69
|
+
style={style}
|
|
70
|
+
context={{ variant, color, size, fullWidth }}
|
|
71
|
+
{...props}
|
|
72
|
+
>
|
|
73
|
+
{children}
|
|
74
|
+
</ButtonPrimitive>
|
|
75
|
+
);
|
|
76
|
+
},
|
|
77
|
+
);
|
|
78
|
+
|
|
79
|
+
ButtonRoot.displayName = 'Button';
|
|
80
|
+
|
|
81
|
+
// =============================================================================
|
|
82
|
+
// STYLED TEXT COMPONENT
|
|
83
|
+
// =============================================================================
|
|
84
|
+
|
|
85
|
+
export interface ButtonTextProps extends TextProps {
|
|
86
|
+
className?: string;
|
|
87
|
+
children?: ReactNode;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
const ButtonLabel = forwardRef<Text, ButtonTextProps>(
|
|
91
|
+
({ className, children, style, ...props }, ref) => {
|
|
92
|
+
const { variant, color, size } = useButtonStyleContext();
|
|
93
|
+
|
|
94
|
+
const computedClassName = cn(buttonTextVariants({ variant, color, size }), className);
|
|
95
|
+
|
|
96
|
+
return (
|
|
97
|
+
<ButtonPrimitive.Text ref={ref} className={computedClassName} style={style} {...props}>
|
|
98
|
+
{children}
|
|
99
|
+
</ButtonPrimitive.Text>
|
|
100
|
+
);
|
|
101
|
+
},
|
|
102
|
+
);
|
|
103
|
+
|
|
104
|
+
ButtonLabel.displayName = 'Button.Label';
|
|
105
|
+
|
|
106
|
+
export interface ButtonGroupProps extends Omit<ViewProps, 'children'> {
|
|
107
|
+
className?: string;
|
|
108
|
+
children: ReactElement | ReactElement[];
|
|
109
|
+
flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
|
|
110
|
+
isDisabled?: boolean;
|
|
111
|
+
isAttached?: boolean;
|
|
112
|
+
reversed?: boolean;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
const ButtonGroup = forwardRef<View, ButtonGroupProps>(
|
|
116
|
+
({ className, children, style, flexDirection = 'row', isAttached, ...props }, ref) => {
|
|
117
|
+
const groupClassName = cn(
|
|
118
|
+
buttonGroupVariants({ flexDirection, isAttached: !!isAttached }),
|
|
119
|
+
className,
|
|
120
|
+
);
|
|
121
|
+
|
|
122
|
+
return (
|
|
123
|
+
<ButtonPrimitive.Group
|
|
124
|
+
ref={ref}
|
|
125
|
+
className={groupClassName}
|
|
126
|
+
style={[{ flexDirection }, style]}
|
|
127
|
+
isAttached={isAttached}
|
|
128
|
+
{...props}
|
|
129
|
+
>
|
|
130
|
+
{children}
|
|
131
|
+
</ButtonPrimitive.Group>
|
|
132
|
+
);
|
|
133
|
+
},
|
|
134
|
+
);
|
|
135
|
+
|
|
136
|
+
ButtonGroup.displayName = 'Button.Group';
|
|
137
|
+
|
|
138
|
+
export interface ButtonIconProps extends ViewProps {
|
|
139
|
+
className?: string;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
const ButtonIcon = forwardRef<View, ButtonIconProps>(({ className, style, ...props }, ref) => {
|
|
143
|
+
return <ButtonPrimitive.Icon ref={ref} className={className} style={style} {...props} />;
|
|
144
|
+
});
|
|
145
|
+
|
|
146
|
+
ButtonIcon.displayName = 'Button.Icon';
|
|
147
|
+
|
|
148
|
+
export interface ButtonSpinnerProps extends ActivityIndicatorProps {
|
|
149
|
+
className?: string;
|
|
150
|
+
colorClassName?: string;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
const ButtonSpinner = forwardRef<ActivityIndicator, ButtonSpinnerProps>(
|
|
154
|
+
({ className, colorClassName, style, ...props }, ref) => {
|
|
155
|
+
const { variant, color } = useButtonStyleContext();
|
|
156
|
+
const computedColorClassName = cn(buttonSpinnerVariants({ variant, color }), colorClassName);
|
|
157
|
+
|
|
158
|
+
return (
|
|
159
|
+
<ButtonPrimitive.Spinner
|
|
160
|
+
ref={ref}
|
|
161
|
+
className={className}
|
|
162
|
+
colorClassName={computedColorClassName}
|
|
163
|
+
style={style}
|
|
164
|
+
{...props}
|
|
165
|
+
/>
|
|
166
|
+
);
|
|
167
|
+
},
|
|
168
|
+
);
|
|
169
|
+
|
|
170
|
+
ButtonSpinner.displayName = 'Button.Spinner';
|
|
171
|
+
|
|
172
|
+
type ButtonCompoundComponent = typeof ButtonRoot & {
|
|
173
|
+
Label: typeof ButtonLabel;
|
|
174
|
+
Group: typeof ButtonGroup;
|
|
175
|
+
Icon: typeof ButtonIcon;
|
|
176
|
+
Spinner: typeof ButtonSpinner;
|
|
177
|
+
};
|
|
178
|
+
|
|
179
|
+
export const Button = Object.assign(ButtonRoot, {
|
|
180
|
+
Label: ButtonLabel,
|
|
181
|
+
Group: ButtonGroup,
|
|
182
|
+
Icon: ButtonIcon,
|
|
183
|
+
Spinner: ButtonSpinner,
|
|
184
|
+
}) as ButtonCompoundComponent;
|
|
185
|
+
|
|
186
|
+
export type { ButtonVariantProps, ButtonGroupVariantProps };
|