@cdx-ui/components 0.0.1-alpha.2 → 0.0.1-alpha.21
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 +2 -2
- package/lib/commonjs/components/Avatar/index.js +156 -0
- package/lib/commonjs/components/Avatar/index.js.map +1 -0
- package/lib/commonjs/components/Avatar/styles.js +80 -0
- package/lib/commonjs/components/Avatar/styles.js.map +1 -0
- package/lib/commonjs/components/BottomSheet/index.js +248 -0
- package/lib/commonjs/components/BottomSheet/index.js.map +1 -0
- package/lib/commonjs/components/BottomSheet/styles.js +61 -0
- package/lib/commonjs/components/BottomSheet/styles.js.map +1 -0
- package/lib/commonjs/components/Box/Box.js +1 -0
- package/lib/commonjs/components/Box/Box.js.map +1 -1
- package/lib/commonjs/components/Button/index.js +28 -13
- package/lib/commonjs/components/Button/index.js.map +1 -1
- package/lib/commonjs/components/Button/styles.js +323 -139
- package/lib/commonjs/components/Button/styles.js.map +1 -1
- package/lib/commonjs/components/Card/index.js +104 -0
- package/lib/commonjs/components/Card/index.js.map +1 -0
- package/lib/commonjs/components/Card/styles.js +28 -0
- package/lib/commonjs/components/Card/styles.js.map +1 -0
- package/lib/commonjs/components/Checkbox/index.js +180 -0
- package/lib/commonjs/components/Checkbox/index.js.map +1 -0
- package/lib/commonjs/components/Checkbox/styles.js +68 -0
- package/lib/commonjs/components/Checkbox/styles.js.map +1 -0
- package/lib/commonjs/components/Chip/index.js +103 -0
- package/lib/commonjs/components/Chip/index.js.map +1 -0
- package/lib/commonjs/components/Chip/styles.js +50 -0
- package/lib/commonjs/components/Chip/styles.js.map +1 -0
- package/lib/commonjs/components/Heading/index.js +35 -0
- package/lib/commonjs/components/Heading/index.js.map +1 -0
- package/lib/commonjs/components/Heading/styles.js +24 -0
- package/lib/commonjs/components/Heading/styles.js.map +1 -0
- package/lib/commonjs/components/Icon/index.js +61 -0
- package/lib/commonjs/components/Icon/index.js.map +1 -0
- package/lib/commonjs/components/Input/index.js +10 -16
- package/lib/commonjs/components/Input/index.js.map +1 -1
- package/lib/commonjs/components/Input/styles.js +16 -30
- package/lib/commonjs/components/Input/styles.js.map +1 -1
- package/lib/commonjs/components/Link/index.js +94 -0
- package/lib/commonjs/components/Link/index.js.map +1 -0
- package/lib/commonjs/components/Link/styles.js +16 -0
- package/lib/commonjs/components/Link/styles.js.map +1 -0
- package/lib/commonjs/components/Select/index.js +11 -12
- package/lib/commonjs/components/Select/index.js.map +1 -1
- package/lib/commonjs/components/Select/styles.js +29 -53
- package/lib/commonjs/components/Select/styles.js.map +1 -1
- package/lib/commonjs/components/Stack/HStack.js +8 -21
- package/lib/commonjs/components/Stack/HStack.js.map +1 -1
- package/lib/commonjs/components/Stack/VStack.js +8 -21
- package/lib/commonjs/components/Stack/VStack.js.map +1 -1
- package/lib/commonjs/components/Stack/styles.js +39 -0
- package/lib/commonjs/components/Stack/styles.js.map +1 -0
- package/lib/commonjs/components/Switch/BaseSwitch.js +46 -0
- package/lib/commonjs/components/Switch/BaseSwitch.js.map +1 -0
- package/lib/commonjs/components/Switch/BaseSwitch.web.js +56 -0
- package/lib/commonjs/components/Switch/BaseSwitch.web.js.map +1 -0
- package/lib/commonjs/components/Switch/index.js +13 -0
- package/lib/commonjs/components/Switch/index.js.map +1 -0
- package/lib/commonjs/components/Switch/styles.js +128 -0
- package/lib/commonjs/components/Switch/styles.js.map +1 -0
- package/lib/commonjs/components/Text/index.js +18 -9
- package/lib/commonjs/components/Text/index.js.map +1 -1
- package/lib/commonjs/components/Text/styles.js +24 -0
- package/lib/commonjs/components/Text/styles.js.map +1 -0
- package/lib/commonjs/components/VirtualizedList/index.js +19 -0
- package/lib/commonjs/components/VirtualizedList/index.js.map +1 -0
- package/lib/commonjs/components/index.js +120 -0
- package/lib/commonjs/components/index.js.map +1 -1
- package/lib/commonjs/metro/withCdxMetroConfig.js +24 -0
- package/lib/commonjs/metro/withCdxMetroConfig.js.map +1 -0
- package/lib/commonjs/styles/index.js +17 -0
- package/lib/commonjs/styles/index.js.map +1 -0
- package/lib/commonjs/styles/primitives.js +123 -0
- package/lib/commonjs/styles/primitives.js.map +1 -0
- package/lib/module/components/Avatar/index.js +152 -0
- package/lib/module/components/Avatar/index.js.map +1 -0
- package/lib/module/components/Avatar/styles.js +77 -0
- package/lib/module/components/Avatar/styles.js.map +1 -0
- package/lib/module/components/BottomSheet/index.js +242 -0
- package/lib/module/components/BottomSheet/index.js.map +1 -0
- package/lib/module/components/BottomSheet/styles.js +58 -0
- package/lib/module/components/BottomSheet/styles.js.map +1 -0
- package/lib/module/components/Box/Box.js +1 -0
- package/lib/module/components/Box/Box.js.map +1 -1
- package/lib/module/components/Button/index.js +29 -14
- package/lib/module/components/Button/index.js.map +1 -1
- package/lib/module/components/Button/styles.js +322 -138
- package/lib/module/components/Button/styles.js.map +1 -1
- package/lib/module/components/Card/index.js +100 -0
- package/lib/module/components/Card/index.js.map +1 -0
- package/lib/module/components/Card/styles.js +25 -0
- package/lib/module/components/Card/styles.js.map +1 -0
- package/lib/module/components/Checkbox/index.js +176 -0
- package/lib/module/components/Checkbox/index.js.map +1 -0
- package/lib/module/components/Checkbox/styles.js +64 -0
- package/lib/module/components/Checkbox/styles.js.map +1 -0
- package/lib/module/components/Chip/index.js +99 -0
- package/lib/module/components/Chip/index.js.map +1 -0
- package/lib/module/components/Chip/styles.js +46 -0
- package/lib/module/components/Chip/styles.js.map +1 -0
- package/lib/module/components/Heading/index.js +31 -0
- package/lib/module/components/Heading/index.js.map +1 -0
- package/lib/module/components/Heading/styles.js +20 -0
- package/lib/module/components/Heading/styles.js.map +1 -0
- package/lib/module/components/Icon/index.js +57 -0
- package/lib/module/components/Icon/index.js.map +1 -0
- package/lib/module/components/Input/index.js +10 -16
- package/lib/module/components/Input/index.js.map +1 -1
- package/lib/module/components/Input/styles.js +16 -30
- package/lib/module/components/Input/styles.js.map +1 -1
- package/lib/module/components/Link/index.js +85 -0
- package/lib/module/components/Link/index.js.map +1 -0
- package/lib/module/components/Link/styles.js +12 -0
- package/lib/module/components/Link/styles.js.map +1 -0
- package/lib/module/components/Select/index.js +12 -13
- package/lib/module/components/Select/index.js.map +1 -1
- package/lib/module/components/Select/styles.js +29 -53
- package/lib/module/components/Select/styles.js.map +1 -1
- package/lib/module/components/Stack/HStack.js +8 -21
- package/lib/module/components/Stack/HStack.js.map +1 -1
- package/lib/module/components/Stack/VStack.js +8 -21
- package/lib/module/components/Stack/VStack.js.map +1 -1
- package/lib/module/components/Stack/styles.js +35 -0
- package/lib/module/components/Stack/styles.js.map +1 -0
- package/lib/module/components/Switch/BaseSwitch.js +42 -0
- package/lib/module/components/Switch/BaseSwitch.js.map +1 -0
- package/lib/module/components/Switch/BaseSwitch.web.js +52 -0
- package/lib/module/components/Switch/BaseSwitch.web.js.map +1 -0
- package/lib/module/components/Switch/index.js +9 -0
- package/lib/module/components/Switch/index.js.map +1 -0
- package/lib/module/components/Switch/styles.js +125 -0
- package/lib/module/components/Switch/styles.js.map +1 -0
- package/lib/module/components/Text/index.js +19 -1
- package/lib/module/components/Text/index.js.map +1 -1
- package/lib/module/components/Text/styles.js +20 -0
- package/lib/module/components/Text/styles.js.map +1 -0
- package/lib/module/components/VirtualizedList/index.js +15 -0
- package/lib/module/components/VirtualizedList/index.js.map +1 -0
- package/lib/module/components/index.js +10 -0
- package/lib/module/components/index.js.map +1 -1
- package/lib/module/metro/withCdxMetroConfig.js +20 -0
- package/lib/module/metro/withCdxMetroConfig.js.map +1 -0
- package/lib/module/styles/index.js +4 -0
- package/lib/module/styles/index.js.map +1 -0
- package/lib/module/styles/primitives.js +119 -0
- package/lib/module/styles/primitives.js.map +1 -0
- package/lib/typescript/components/Avatar/index.d.ts +40 -0
- package/lib/typescript/components/Avatar/index.d.ts.map +1 -0
- package/lib/typescript/components/Avatar/styles.d.ts +16 -0
- package/lib/typescript/components/Avatar/styles.d.ts.map +1 -0
- package/lib/typescript/components/BottomSheet/index.d.ts +61 -0
- package/lib/typescript/components/BottomSheet/index.d.ts.map +1 -0
- package/lib/typescript/components/BottomSheet/styles.d.ts +16 -0
- package/lib/typescript/components/BottomSheet/styles.d.ts.map +1 -0
- package/lib/typescript/components/Box/Box.d.ts +1 -0
- package/lib/typescript/components/Box/Box.d.ts.map +1 -1
- package/lib/typescript/components/Button/index.d.ts +6 -3
- package/lib/typescript/components/Button/index.d.ts.map +1 -1
- package/lib/typescript/components/Button/styles.d.ts +14 -8
- package/lib/typescript/components/Button/styles.d.ts.map +1 -1
- package/lib/typescript/components/Card/index.d.ts +30 -0
- package/lib/typescript/components/Card/index.d.ts.map +1 -0
- package/lib/typescript/components/Card/styles.d.ts +6 -0
- package/lib/typescript/components/Card/styles.d.ts.map +1 -0
- package/lib/typescript/components/Checkbox/index.d.ts +46 -0
- package/lib/typescript/components/Checkbox/index.d.ts.map +1 -0
- package/lib/typescript/components/Checkbox/styles.d.ts +18 -0
- package/lib/typescript/components/Checkbox/styles.d.ts.map +1 -0
- package/lib/typescript/components/Chip/index.d.ts +27 -0
- package/lib/typescript/components/Chip/index.d.ts.map +1 -0
- package/lib/typescript/components/Chip/styles.d.ts +12 -0
- package/lib/typescript/components/Chip/styles.d.ts.map +1 -0
- package/lib/typescript/components/Heading/index.d.ts +10 -0
- package/lib/typescript/components/Heading/index.d.ts.map +1 -0
- package/lib/typescript/components/Heading/styles.d.ts +6 -0
- package/lib/typescript/components/Heading/styles.d.ts.map +1 -0
- package/lib/typescript/components/Icon/index.d.ts +27 -0
- package/lib/typescript/components/Icon/index.d.ts.map +1 -0
- package/lib/typescript/components/Input/index.d.ts +6 -4
- package/lib/typescript/components/Input/index.d.ts.map +1 -1
- package/lib/typescript/components/Input/styles.d.ts +5 -7
- package/lib/typescript/components/Input/styles.d.ts.map +1 -1
- package/lib/typescript/components/Link/index.d.ts +26 -0
- package/lib/typescript/components/Link/index.d.ts.map +1 -0
- package/lib/typescript/components/Link/styles.d.ts +4 -0
- package/lib/typescript/components/Link/styles.d.ts.map +1 -0
- package/lib/typescript/components/Select/index.d.ts +6 -3
- package/lib/typescript/components/Select/index.d.ts.map +1 -1
- package/lib/typescript/components/Select/styles.d.ts +6 -8
- package/lib/typescript/components/Select/styles.d.ts.map +1 -1
- package/lib/typescript/components/Stack/HStack.d.ts +1 -12
- package/lib/typescript/components/Stack/HStack.d.ts.map +1 -1
- package/lib/typescript/components/Stack/VStack.d.ts +1 -12
- package/lib/typescript/components/Stack/VStack.d.ts.map +1 -1
- package/lib/typescript/components/Stack/styles.d.ts +10 -0
- package/lib/typescript/components/Stack/styles.d.ts.map +1 -0
- package/lib/typescript/components/Switch/BaseSwitch.d.ts +9 -0
- package/lib/typescript/components/Switch/BaseSwitch.d.ts.map +1 -0
- package/lib/typescript/components/Switch/BaseSwitch.web.d.ts +15 -0
- package/lib/typescript/components/Switch/BaseSwitch.web.d.ts.map +1 -0
- package/lib/typescript/components/Switch/index.d.ts +8 -0
- package/lib/typescript/components/Switch/index.d.ts.map +1 -0
- package/lib/typescript/components/Switch/styles.d.ts +26 -0
- package/lib/typescript/components/Switch/styles.d.ts.map +1 -0
- package/lib/typescript/components/Text/index.d.ts +9 -1
- package/lib/typescript/components/Text/index.d.ts.map +1 -1
- package/lib/typescript/components/Text/styles.d.ts +6 -0
- package/lib/typescript/components/Text/styles.d.ts.map +1 -0
- package/lib/typescript/components/VirtualizedList/index.d.ts +8 -0
- package/lib/typescript/components/VirtualizedList/index.d.ts.map +1 -0
- package/lib/typescript/components/index.d.ts +10 -0
- package/lib/typescript/components/index.d.ts.map +1 -1
- package/lib/typescript/metro/withCdxMetroConfig.d.ts +19 -0
- package/lib/typescript/metro/withCdxMetroConfig.d.ts.map +1 -0
- package/lib/typescript/styles/index.d.ts +2 -0
- package/lib/typescript/styles/index.d.ts.map +1 -0
- package/lib/typescript/styles/primitives.d.ts +85 -0
- package/lib/typescript/styles/primitives.d.ts.map +1 -0
- package/package.json +22 -13
- package/src/components/Avatar/index.tsx +174 -0
- package/src/components/Avatar/styles.ts +83 -0
- package/src/components/BottomSheet/index.tsx +316 -0
- package/src/components/BottomSheet/styles.ts +79 -0
- package/src/components/Box/Box.tsx +1 -0
- package/src/components/Button/index.tsx +23 -15
- package/src/components/Button/styles.ts +353 -144
- package/src/components/Card/index.tsx +115 -0
- package/src/components/Card/styles.ts +41 -0
- package/src/components/Checkbox/index.tsx +209 -0
- package/src/components/Checkbox/styles.ts +103 -0
- package/src/components/Chip/index.tsx +91 -0
- package/src/components/Chip/styles.ts +51 -0
- package/src/components/Heading/index.tsx +36 -0
- package/src/components/Heading/styles.tsx +26 -0
- package/src/components/Icon/index.tsx +54 -0
- package/src/components/Input/index.tsx +9 -20
- package/src/components/Input/styles.ts +42 -37
- package/src/components/Link/index.tsx +83 -0
- package/src/components/Link/styles.ts +20 -0
- package/src/components/Select/index.tsx +12 -11
- package/src/components/Select/styles.ts +63 -74
- package/src/components/Stack/HStack.tsx +8 -19
- package/src/components/Stack/VStack.tsx +8 -23
- package/src/components/Stack/styles.ts +37 -0
- package/src/components/Switch/BaseSwitch.tsx +38 -0
- package/src/components/Switch/BaseSwitch.web.tsx +69 -0
- package/src/components/Switch/index.tsx +13 -0
- package/src/components/Switch/styles.ts +120 -0
- package/src/components/Text/index.tsx +16 -0
- package/src/components/Text/styles.tsx +26 -0
- package/src/components/VirtualizedList/index.tsx +19 -0
- package/src/components/index.ts +10 -0
- package/src/metro/withCdxMetroConfig.ts +29 -0
- package/src/styles/index.ts +1 -0
- package/src/styles/primitives.ts +107 -0
- package/lib/commonjs/components/Text/Text.js +0 -30
- package/lib/commonjs/components/Text/Text.js.map +0 -1
- package/lib/module/components/Text/Text.js +0 -26
- package/lib/module/components/Text/Text.js.map +0 -1
- package/lib/typescript/components/Text/Text.d.ts +0 -11
- package/lib/typescript/components/Text/Text.d.ts.map +0 -1
- package/src/components/Text/Text.tsx +0 -58
- package/src/components/Text/index.ts +0 -1
|
@@ -1,21 +1,8 @@
|
|
|
1
1
|
import type { ForwardedRef } from 'react';
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
3
|
import { View, type ViewProps } from 'react-native';
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
// TODO: Integrate with tokens (multiply by spacing)
|
|
7
|
-
const spaceScale = {
|
|
8
|
-
xs: 1,
|
|
9
|
-
sm: 2,
|
|
10
|
-
md: 3,
|
|
11
|
-
lg: 4,
|
|
12
|
-
xl: 5,
|
|
13
|
-
'2xl': 6,
|
|
14
|
-
'3xl': 7,
|
|
15
|
-
'4xl': 8,
|
|
16
|
-
} as const;
|
|
17
|
-
|
|
18
|
-
type StackSpace = keyof typeof spaceScale;
|
|
4
|
+
import { cn } from '@cdx-ui/utils';
|
|
5
|
+
import { hStackRootVariants, type StackSpace } from './styles';
|
|
19
6
|
|
|
20
7
|
export interface HStackProps extends ViewProps {
|
|
21
8
|
className?: string;
|
|
@@ -24,13 +11,15 @@ export interface HStackProps extends ViewProps {
|
|
|
24
11
|
}
|
|
25
12
|
|
|
26
13
|
export const HStack = forwardRef<View, HStackProps>(
|
|
27
|
-
(
|
|
28
|
-
|
|
14
|
+
(
|
|
15
|
+
{ reversed = false, space, style, className, children, ...restProps },
|
|
16
|
+
ref: ForwardedRef<View>,
|
|
17
|
+
) => {
|
|
29
18
|
return (
|
|
30
19
|
<View
|
|
31
20
|
ref={ref}
|
|
32
|
-
className={className}
|
|
33
|
-
style={
|
|
21
|
+
className={cn(hStackRootVariants({ reversed, space }), className)}
|
|
22
|
+
style={style}
|
|
34
23
|
{...restProps}
|
|
35
24
|
>
|
|
36
25
|
{children}
|
|
@@ -1,21 +1,8 @@
|
|
|
1
1
|
import type { ForwardedRef } from 'react';
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
3
|
import { View, type ViewProps } from 'react-native';
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
// TODO: Integrate with tokens (multiply by spacing)
|
|
7
|
-
const spaceScale = {
|
|
8
|
-
xs: 1,
|
|
9
|
-
sm: 2,
|
|
10
|
-
md: 3,
|
|
11
|
-
lg: 4,
|
|
12
|
-
xl: 5,
|
|
13
|
-
'2xl': 6,
|
|
14
|
-
'3xl': 7,
|
|
15
|
-
'4xl': 8,
|
|
16
|
-
} as const;
|
|
17
|
-
|
|
18
|
-
type StackSpace = keyof typeof spaceScale;
|
|
4
|
+
import { cn } from '@cdx-ui/utils';
|
|
5
|
+
import { vStackRootVariants, type StackSpace } from './styles';
|
|
19
6
|
|
|
20
7
|
export interface VStackProps extends ViewProps {
|
|
21
8
|
className?: string;
|
|
@@ -24,17 +11,15 @@ export interface VStackProps extends ViewProps {
|
|
|
24
11
|
}
|
|
25
12
|
|
|
26
13
|
export const VStack = forwardRef<View, VStackProps>(
|
|
27
|
-
(
|
|
28
|
-
|
|
14
|
+
(
|
|
15
|
+
{ reversed = false, space, style, className, children, ...restProps },
|
|
16
|
+
ref: ForwardedRef<View>,
|
|
17
|
+
) => {
|
|
29
18
|
return (
|
|
30
19
|
<View
|
|
31
20
|
ref={ref}
|
|
32
|
-
className={className}
|
|
33
|
-
style={
|
|
34
|
-
{ flexDirection: reversed ? 'column-reverse' : 'column' },
|
|
35
|
-
gap ? { gap } : null,
|
|
36
|
-
style,
|
|
37
|
-
]}
|
|
21
|
+
className={cn(vStackRootVariants({ reversed, space }), className)}
|
|
22
|
+
style={style}
|
|
38
23
|
{...restProps}
|
|
39
24
|
>
|
|
40
25
|
{children}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { cva } from 'class-variance-authority';
|
|
2
|
+
|
|
3
|
+
export type StackSpace = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
4
|
+
|
|
5
|
+
const spaceMap = {
|
|
6
|
+
xs: 'gap-1',
|
|
7
|
+
sm: 'gap-2',
|
|
8
|
+
md: 'gap-3',
|
|
9
|
+
lg: 'gap-4',
|
|
10
|
+
xl: 'gap-5',
|
|
11
|
+
} as const satisfies Record<StackSpace, string>;
|
|
12
|
+
|
|
13
|
+
export const hStackRootVariants = cva([], {
|
|
14
|
+
variants: {
|
|
15
|
+
reversed: {
|
|
16
|
+
true: 'flex-row-reverse',
|
|
17
|
+
false: 'flex-row',
|
|
18
|
+
},
|
|
19
|
+
space: spaceMap,
|
|
20
|
+
},
|
|
21
|
+
defaultVariants: {
|
|
22
|
+
reversed: false,
|
|
23
|
+
},
|
|
24
|
+
});
|
|
25
|
+
|
|
26
|
+
export const vStackRootVariants = cva([], {
|
|
27
|
+
variants: {
|
|
28
|
+
reversed: {
|
|
29
|
+
true: 'flex-col-reverse',
|
|
30
|
+
false: 'flex-col',
|
|
31
|
+
},
|
|
32
|
+
space: spaceMap,
|
|
33
|
+
},
|
|
34
|
+
defaultVariants: {
|
|
35
|
+
reversed: false,
|
|
36
|
+
},
|
|
37
|
+
});
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { forwardRef } from 'react';
|
|
2
|
+
import { Switch as RNSwitch, type SwitchProps } from 'react-native';
|
|
3
|
+
import { cn } from '@cdx-ui/utils';
|
|
4
|
+
import {
|
|
5
|
+
switchIosBgVariants,
|
|
6
|
+
switchThumbColorVariants,
|
|
7
|
+
switchTrackOffVariants,
|
|
8
|
+
switchTrackOnVariants,
|
|
9
|
+
} from './styles';
|
|
10
|
+
|
|
11
|
+
export interface BaseSwitchProps extends Omit<SwitchProps, 'className'> {
|
|
12
|
+
states?: Record<string, boolean | undefined>;
|
|
13
|
+
dataSet?: Record<string, string>;
|
|
14
|
+
className?: string;
|
|
15
|
+
size?: string;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
export const BaseSwitch = forwardRef<RNSwitch, BaseSwitchProps>(
|
|
19
|
+
({ states, className, disabled, value, ...props }, ref) => {
|
|
20
|
+
const isChecked = value ?? states?.checked ?? false;
|
|
21
|
+
const isDisabled = disabled ?? states?.disabled ?? false;
|
|
22
|
+
const isInvalid = states?.invalid ?? false;
|
|
23
|
+
|
|
24
|
+
const uniwindProps: Record<string, string | undefined> = {
|
|
25
|
+
className,
|
|
26
|
+
thumbColorClassName: cn(switchThumbColorVariants({ isDisabled })),
|
|
27
|
+
trackColorOnClassName: cn(switchTrackOnVariants({ isInvalid })),
|
|
28
|
+
trackColorOffClassName: cn(switchTrackOffVariants({ isInvalid })),
|
|
29
|
+
ios_backgroundColorClassName: cn(switchIosBgVariants({ isInvalid })),
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
return (
|
|
33
|
+
<RNSwitch ref={ref} value={isChecked} disabled={isDisabled} {...uniwindProps} {...props} />
|
|
34
|
+
);
|
|
35
|
+
},
|
|
36
|
+
);
|
|
37
|
+
|
|
38
|
+
BaseSwitch.displayName = 'BaseSwitch';
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import { forwardRef } from 'react';
|
|
2
|
+
import { Pressable, View } from 'react-native';
|
|
3
|
+
import { cn } from '@cdx-ui/utils';
|
|
4
|
+
import {
|
|
5
|
+
switchThumbVariants,
|
|
6
|
+
switchTrackVariants,
|
|
7
|
+
switchWebTrackColorVariants,
|
|
8
|
+
type SwitchVariantProps,
|
|
9
|
+
} from './styles';
|
|
10
|
+
|
|
11
|
+
export interface BaseSwitchProps {
|
|
12
|
+
value?: boolean;
|
|
13
|
+
onValueChange?: (value: boolean) => void;
|
|
14
|
+
disabled?: boolean;
|
|
15
|
+
states?: Record<string, boolean | undefined>;
|
|
16
|
+
dataSet?: Record<string, string>;
|
|
17
|
+
className?: string;
|
|
18
|
+
size?: SwitchVariantProps['size'];
|
|
19
|
+
onFocus?: () => void;
|
|
20
|
+
onBlur?: () => void;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export const BaseSwitch = forwardRef<View, BaseSwitchProps>(
|
|
24
|
+
(
|
|
25
|
+
{
|
|
26
|
+
value,
|
|
27
|
+
onValueChange,
|
|
28
|
+
disabled,
|
|
29
|
+
states,
|
|
30
|
+
dataSet,
|
|
31
|
+
className,
|
|
32
|
+
size = 'md',
|
|
33
|
+
onFocus,
|
|
34
|
+
onBlur,
|
|
35
|
+
...props
|
|
36
|
+
},
|
|
37
|
+
ref,
|
|
38
|
+
) => {
|
|
39
|
+
const isChecked = value ?? states?.checked ?? false;
|
|
40
|
+
const isDisabled = disabled ?? states?.disabled ?? false;
|
|
41
|
+
const isInvalid = states?.invalid ?? false;
|
|
42
|
+
|
|
43
|
+
return (
|
|
44
|
+
<Pressable
|
|
45
|
+
ref={ref}
|
|
46
|
+
role="switch"
|
|
47
|
+
aria-checked={isChecked}
|
|
48
|
+
aria-disabled={isDisabled}
|
|
49
|
+
disabled={isDisabled}
|
|
50
|
+
onPress={() => onValueChange?.(!isChecked)}
|
|
51
|
+
onFocus={onFocus}
|
|
52
|
+
onBlur={onBlur}
|
|
53
|
+
tabIndex={0}
|
|
54
|
+
className={cn(
|
|
55
|
+
switchTrackVariants({ size }),
|
|
56
|
+
switchWebTrackColorVariants({ isChecked, isInvalid }),
|
|
57
|
+
className,
|
|
58
|
+
)}
|
|
59
|
+
// @ts-expect-error dataSet is a RNW/Uniwind prop not in Pressable types
|
|
60
|
+
dataSet={dataSet}
|
|
61
|
+
{...props}
|
|
62
|
+
>
|
|
63
|
+
<View className={cn(switchThumbVariants({ size, isChecked }))} />
|
|
64
|
+
</Pressable>
|
|
65
|
+
);
|
|
66
|
+
},
|
|
67
|
+
);
|
|
68
|
+
|
|
69
|
+
BaseSwitch.displayName = 'BaseSwitch';
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { type ISwitchProps, createSwitch } from '@cdx-ui/primitives';
|
|
2
|
+
import { BaseSwitch } from './BaseSwitch';
|
|
3
|
+
import type { SwitchVariantProps } from './styles';
|
|
4
|
+
|
|
5
|
+
const SwitchPrimitive = createSwitch({ Root: BaseSwitch });
|
|
6
|
+
|
|
7
|
+
export interface SwitchProps extends ISwitchProps, SwitchVariantProps {
|
|
8
|
+
className?: string;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
export const Switch = SwitchPrimitive;
|
|
12
|
+
|
|
13
|
+
export type { SwitchVariantProps };
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
import { cva, type VariantProps } from 'class-variance-authority';
|
|
2
|
+
|
|
3
|
+
// =============================================================================
|
|
4
|
+
// NATIVE — Uniwind className bindings for RN Switch
|
|
5
|
+
// =============================================================================
|
|
6
|
+
|
|
7
|
+
export const switchThumbColorVariants = cva(['accent-white'], {
|
|
8
|
+
variants: {
|
|
9
|
+
isDisabled: {
|
|
10
|
+
true: 'accent-gray-200',
|
|
11
|
+
false: '',
|
|
12
|
+
},
|
|
13
|
+
},
|
|
14
|
+
defaultVariants: { isDisabled: false },
|
|
15
|
+
});
|
|
16
|
+
|
|
17
|
+
export const switchTrackOnVariants = cva(['accent-blue-500'], {
|
|
18
|
+
variants: {
|
|
19
|
+
isInvalid: {
|
|
20
|
+
true: 'accent-red-500',
|
|
21
|
+
false: '',
|
|
22
|
+
},
|
|
23
|
+
},
|
|
24
|
+
defaultVariants: { isInvalid: false },
|
|
25
|
+
});
|
|
26
|
+
|
|
27
|
+
export const switchTrackOffVariants = cva(['accent-gray-300'], {
|
|
28
|
+
variants: {
|
|
29
|
+
isInvalid: {
|
|
30
|
+
true: 'accent-red-300',
|
|
31
|
+
false: '',
|
|
32
|
+
},
|
|
33
|
+
},
|
|
34
|
+
defaultVariants: { isInvalid: false },
|
|
35
|
+
});
|
|
36
|
+
|
|
37
|
+
export const switchIosBgVariants = cva(['accent-gray-300'], {
|
|
38
|
+
variants: {
|
|
39
|
+
isInvalid: {
|
|
40
|
+
true: 'accent-red-300',
|
|
41
|
+
false: '',
|
|
42
|
+
},
|
|
43
|
+
},
|
|
44
|
+
defaultVariants: { isInvalid: false },
|
|
45
|
+
});
|
|
46
|
+
|
|
47
|
+
// =============================================================================
|
|
48
|
+
// WEB — Tailwind classes for custom Pressable toggle
|
|
49
|
+
// =============================================================================
|
|
50
|
+
|
|
51
|
+
export const switchTrackVariants = cva(
|
|
52
|
+
[
|
|
53
|
+
'flex-row items-center rounded-full cursor-pointer',
|
|
54
|
+
'transition-colors duration-200',
|
|
55
|
+
'data-[disabled=true]:opacity-50 data-[disabled=true]:cursor-not-allowed',
|
|
56
|
+
'web:data-[focus-visible=true]:ring-3 web:data-[focus-visible=true]:ring-blue-300/50',
|
|
57
|
+
'web:data-[invalid=true]:data-[focus-visible=true]:ring-red-300/50',
|
|
58
|
+
],
|
|
59
|
+
{
|
|
60
|
+
variants: {
|
|
61
|
+
size: {
|
|
62
|
+
sm: 'w-9 h-5 p-0.5',
|
|
63
|
+
md: 'w-11 h-6 p-0.5',
|
|
64
|
+
lg: 'w-14 h-8 p-1',
|
|
65
|
+
},
|
|
66
|
+
},
|
|
67
|
+
defaultVariants: {
|
|
68
|
+
size: 'md',
|
|
69
|
+
},
|
|
70
|
+
},
|
|
71
|
+
);
|
|
72
|
+
|
|
73
|
+
export const switchWebTrackColorVariants = cva([], {
|
|
74
|
+
variants: {
|
|
75
|
+
isChecked: {
|
|
76
|
+
true: 'bg-blue-500 data-[hover=true]:bg-blue-600',
|
|
77
|
+
false: 'bg-gray-300 data-[hover=true]:bg-gray-400',
|
|
78
|
+
},
|
|
79
|
+
isInvalid: {
|
|
80
|
+
true: '',
|
|
81
|
+
false: '',
|
|
82
|
+
},
|
|
83
|
+
},
|
|
84
|
+
compoundVariants: [
|
|
85
|
+
{ isChecked: true, isInvalid: true, className: 'bg-red-500 data-[hover=true]:bg-red-600' },
|
|
86
|
+
{ isChecked: false, isInvalid: true, className: 'bg-red-300 data-[hover=true]:bg-red-400' },
|
|
87
|
+
],
|
|
88
|
+
defaultVariants: {
|
|
89
|
+
isChecked: false,
|
|
90
|
+
isInvalid: false,
|
|
91
|
+
},
|
|
92
|
+
});
|
|
93
|
+
|
|
94
|
+
export const switchThumbVariants = cva(
|
|
95
|
+
['rounded-full bg-white shadow-sm', 'transition-transform duration-200'],
|
|
96
|
+
{
|
|
97
|
+
variants: {
|
|
98
|
+
size: {
|
|
99
|
+
sm: 'w-4 h-4',
|
|
100
|
+
md: 'w-5 h-5',
|
|
101
|
+
lg: 'w-6 h-6',
|
|
102
|
+
},
|
|
103
|
+
isChecked: {
|
|
104
|
+
true: '',
|
|
105
|
+
false: 'translate-x-0',
|
|
106
|
+
},
|
|
107
|
+
},
|
|
108
|
+
compoundVariants: [
|
|
109
|
+
{ size: 'sm', isChecked: true, className: 'translate-x-4' },
|
|
110
|
+
{ size: 'md', isChecked: true, className: 'translate-x-5' },
|
|
111
|
+
{ size: 'lg', isChecked: true, className: 'translate-x-6' },
|
|
112
|
+
],
|
|
113
|
+
defaultVariants: {
|
|
114
|
+
size: 'md',
|
|
115
|
+
isChecked: false,
|
|
116
|
+
},
|
|
117
|
+
},
|
|
118
|
+
);
|
|
119
|
+
|
|
120
|
+
export type SwitchVariantProps = VariantProps<typeof switchTrackVariants>;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { forwardRef, type ComponentPropsWithoutRef, type ComponentRef } from 'react';
|
|
2
|
+
import { Text as RNText } from 'react-native';
|
|
3
|
+
import { cn } from '@cdx-ui/utils';
|
|
4
|
+
import { textStyle, TextVariantProps } from './styles';
|
|
5
|
+
|
|
6
|
+
export type TextProps = TextVariantProps &
|
|
7
|
+
ComponentPropsWithoutRef<typeof RNText> & { className?: string };
|
|
8
|
+
|
|
9
|
+
export const Text = forwardRef<ComponentRef<typeof RNText>, TextProps>(function Text(
|
|
10
|
+
{ className, size = 'md', ...props },
|
|
11
|
+
ref,
|
|
12
|
+
) {
|
|
13
|
+
return <RNText className={cn(textStyle({ size }), className)} {...props} ref={ref} />;
|
|
14
|
+
});
|
|
15
|
+
|
|
16
|
+
Text.displayName = 'Text';
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { Platform } from 'react-native';
|
|
2
|
+
import { cva, type VariantProps } from 'class-variance-authority';
|
|
3
|
+
import { COLOR_TEXT_PRIMARY } from '../../styles/primitives';
|
|
4
|
+
|
|
5
|
+
export const textStyle = cva(
|
|
6
|
+
[
|
|
7
|
+
`${COLOR_TEXT_PRIMARY} font-normal`,
|
|
8
|
+
Platform.select({
|
|
9
|
+
web: 'font-sans my-0 bg-transparent display-inline no-underline',
|
|
10
|
+
default: '',
|
|
11
|
+
}),
|
|
12
|
+
],
|
|
13
|
+
{
|
|
14
|
+
variants: {
|
|
15
|
+
size: {
|
|
16
|
+
xl: 'text-xl',
|
|
17
|
+
lg: 'text-lg',
|
|
18
|
+
md: 'text-base',
|
|
19
|
+
sm: 'text-sm',
|
|
20
|
+
xs: 'text-xs',
|
|
21
|
+
},
|
|
22
|
+
},
|
|
23
|
+
},
|
|
24
|
+
);
|
|
25
|
+
|
|
26
|
+
export type TextVariantProps = VariantProps<typeof textStyle>;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import type { ForwardedRef, ReactElement } from 'react';
|
|
2
|
+
import { forwardRef } from 'react';
|
|
3
|
+
import { FlashList, type FlashListProps, type FlashListRef } from '@shopify/flash-list';
|
|
4
|
+
|
|
5
|
+
export type VirtualizedListRef = FlashListRef<unknown>;
|
|
6
|
+
export type VirtualizedListProps<T = unknown> = FlashListProps<T>;
|
|
7
|
+
|
|
8
|
+
function VirtualizedListInner<T>(
|
|
9
|
+
props: VirtualizedListProps<T>,
|
|
10
|
+
ref: ForwardedRef<FlashListRef<T>>,
|
|
11
|
+
) {
|
|
12
|
+
return <FlashList ref={ref} role="list" {...props} />;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
export const VirtualizedList = forwardRef(VirtualizedListInner) as <T>(
|
|
16
|
+
props: VirtualizedListProps<T> & { ref?: ForwardedRef<FlashListRef<T>> },
|
|
17
|
+
) => ReactElement | null;
|
|
18
|
+
|
|
19
|
+
(VirtualizedList as { displayName?: string }).displayName = 'VirtualizedList';
|
package/src/components/index.ts
CHANGED
|
@@ -1,6 +1,16 @@
|
|
|
1
|
+
export * from './Avatar';
|
|
2
|
+
export * from './BottomSheet';
|
|
1
3
|
export * from './Box';
|
|
2
4
|
export * from './Button';
|
|
5
|
+
export * from './Chip';
|
|
6
|
+
export * from './Card';
|
|
7
|
+
export * from './Checkbox';
|
|
3
8
|
export * from './Input';
|
|
9
|
+
export * from './Link';
|
|
4
10
|
export * from './Select';
|
|
11
|
+
export * from './VirtualizedList';
|
|
12
|
+
export * from './Switch';
|
|
5
13
|
export { HStack, VStack } from './Stack';
|
|
14
|
+
export * from './Heading';
|
|
6
15
|
export * from './Text';
|
|
16
|
+
export * from './Icon';
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import type { MetroConfig } from 'metro-config';
|
|
2
|
+
import { withUniwindConfig } from 'uniwind/metro';
|
|
3
|
+
|
|
4
|
+
export interface CdxMetroConfigOptions {
|
|
5
|
+
/** Path to the CSS entry file (e.g., `'./global.css'`). */
|
|
6
|
+
cssEntryFile: string;
|
|
7
|
+
/** Path where generated Tailwind class type definitions are written. */
|
|
8
|
+
generatedTypesFile?: string;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* Wraps a Metro config with CDX UI's styling-layer configuration.
|
|
13
|
+
*
|
|
14
|
+
* Today this delegates to Uniwind. If the styling layer is swapped (see
|
|
15
|
+
* `docs/research/uniwind-to-nativewind-contingency.md`), only the internals
|
|
16
|
+
* of this function change — consuming Metro configs stay the same.
|
|
17
|
+
*
|
|
18
|
+
* Must be the **outermost** Metro config wrapper (after any other wrappers
|
|
19
|
+
* like `withStorybook`).
|
|
20
|
+
*/
|
|
21
|
+
export function withCdxMetroConfig<T extends MetroConfig>(
|
|
22
|
+
config: T,
|
|
23
|
+
options: CdxMetroConfigOptions,
|
|
24
|
+
): T {
|
|
25
|
+
return withUniwindConfig(config, {
|
|
26
|
+
cssEntryFile: options.cssEntryFile,
|
|
27
|
+
dtsFile: options.generatedTypesFile,
|
|
28
|
+
}) as T;
|
|
29
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './primitives';
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
// packages/components/src/styles/primitives.ts
|
|
2
|
+
// Semantic constants for CDX UI component styling.
|
|
3
|
+
// See docs/visual-revamp-plan.md for rationale and usage.
|
|
4
|
+
|
|
5
|
+
// ─── Colors ──────────────────────────────────────────────
|
|
6
|
+
// Surface & background
|
|
7
|
+
export const COLOR_BG_PRIMARY = 'bg-white';
|
|
8
|
+
export const COLOR_BG_SUBTLE = 'bg-slate-50';
|
|
9
|
+
export const COLOR_BG_MUTED = 'bg-slate-100';
|
|
10
|
+
export const COLOR_BG_INVERSE = 'bg-slate-900';
|
|
11
|
+
|
|
12
|
+
// Border
|
|
13
|
+
export const COLOR_BORDER_DEFAULT = 'border-slate-200';
|
|
14
|
+
export const COLOR_BORDER_STRONG = 'border-slate-300';
|
|
15
|
+
export const COLOR_BORDER_FOCUS = 'border-slate-900';
|
|
16
|
+
export const COLOR_BORDER_INVALID = 'border-red-500';
|
|
17
|
+
|
|
18
|
+
// Text
|
|
19
|
+
export const COLOR_TEXT_PRIMARY = 'text-slate-900';
|
|
20
|
+
export const COLOR_TEXT_SECONDARY = 'text-slate-500';
|
|
21
|
+
export const COLOR_TEXT_MUTED = 'text-slate-400';
|
|
22
|
+
export const COLOR_TEXT_INVERSE = 'text-white';
|
|
23
|
+
export const COLOR_TEXT_PLACEHOLDER = 'text-slate-400';
|
|
24
|
+
export const COLOR_TEXT_INVALID = 'text-red-600';
|
|
25
|
+
|
|
26
|
+
// Brand / Action
|
|
27
|
+
export const COLOR_BRAND_DEFAULT = 'bg-slate-900';
|
|
28
|
+
export const COLOR_BRAND_HOVER = 'bg-slate-800';
|
|
29
|
+
export const COLOR_BRAND_ACTIVE = 'bg-slate-700';
|
|
30
|
+
|
|
31
|
+
// Accent (for checked states, active indicators)
|
|
32
|
+
export const COLOR_ACCENT_DEFAULT = 'bg-slate-900';
|
|
33
|
+
export const COLOR_ACCENT_BORDER = 'border-slate-900';
|
|
34
|
+
|
|
35
|
+
// Semantic colors (danger, warning, success, info)
|
|
36
|
+
// Kept for Button's 5-color system
|
|
37
|
+
export const SEMANTIC_COLORS = {
|
|
38
|
+
action: {
|
|
39
|
+
bg: 'bg-slate-900',
|
|
40
|
+
bgHover: 'bg-slate-800',
|
|
41
|
+
bgActive: 'bg-slate-700',
|
|
42
|
+
border: 'border-slate-900',
|
|
43
|
+
text: 'text-slate-900',
|
|
44
|
+
ring: 'ring-slate-400/50',
|
|
45
|
+
},
|
|
46
|
+
danger: {
|
|
47
|
+
bg: 'bg-red-600',
|
|
48
|
+
bgHover: 'bg-red-700',
|
|
49
|
+
bgActive: 'bg-red-800',
|
|
50
|
+
border: 'border-red-600',
|
|
51
|
+
text: 'text-red-600',
|
|
52
|
+
ring: 'ring-red-400/50',
|
|
53
|
+
},
|
|
54
|
+
warning: {
|
|
55
|
+
bg: 'bg-amber-500',
|
|
56
|
+
bgHover: 'bg-amber-600',
|
|
57
|
+
bgActive: 'bg-amber-700',
|
|
58
|
+
border: 'border-amber-500',
|
|
59
|
+
text: 'text-amber-600',
|
|
60
|
+
ring: 'ring-amber-400/50',
|
|
61
|
+
},
|
|
62
|
+
success: {
|
|
63
|
+
bg: 'bg-green-600',
|
|
64
|
+
bgHover: 'bg-green-700',
|
|
65
|
+
bgActive: 'bg-green-800',
|
|
66
|
+
border: 'border-green-600',
|
|
67
|
+
text: 'text-green-600',
|
|
68
|
+
ring: 'ring-green-400/50',
|
|
69
|
+
},
|
|
70
|
+
info: {
|
|
71
|
+
bg: 'bg-sky-500',
|
|
72
|
+
bgHover: 'bg-sky-600',
|
|
73
|
+
bgActive: 'bg-sky-700',
|
|
74
|
+
border: 'border-sky-500',
|
|
75
|
+
text: 'text-sky-600',
|
|
76
|
+
ring: 'ring-sky-400/50',
|
|
77
|
+
},
|
|
78
|
+
} as const;
|
|
79
|
+
|
|
80
|
+
// ─── Focus ───────────────────────────────────────────────
|
|
81
|
+
export const FOCUS_RING = 'ring-2 ring-slate-400/50 ring-offset-2';
|
|
82
|
+
|
|
83
|
+
// ─── Radius ──────────────────────────────────────────────
|
|
84
|
+
export const RADIUS_SM = 'rounded-lg'; // buttons, inputs, checkboxes
|
|
85
|
+
export const RADIUS_MD = 'rounded-xl'; // cards, dropdowns, modals
|
|
86
|
+
export const RADIUS_FULL = 'rounded-full'; // pills, avatars, switches
|
|
87
|
+
|
|
88
|
+
// ─── Shadows ─────────────────────────────────────────────
|
|
89
|
+
export const SHADOW_SM = 'shadow-sm';
|
|
90
|
+
export const SHADOW_MD = 'shadow-md';
|
|
91
|
+
|
|
92
|
+
// ─── Sizing ──────────────────────────────────────────────
|
|
93
|
+
// Unified size scale for interactive/form components (Button, Input, Select, Checkbox).
|
|
94
|
+
// Only two sizes: 'default' (regular) and 'small' (compact).
|
|
95
|
+
// NOTE: Text and Heading use a separate typography scale (xs/sm/md/lg/xl) — not this.
|
|
96
|
+
export const SIZE_SCALE = {
|
|
97
|
+
default: { height: 'h-10', px: 'px-4', gap: 'gap-2', text: 'text-base' },
|
|
98
|
+
small: { height: 'h-8', px: 'px-3', gap: 'gap-1.5', text: 'text-sm' },
|
|
99
|
+
} as const;
|
|
100
|
+
|
|
101
|
+
// ─── Transitions ─────────────────────────────────────────
|
|
102
|
+
export const TRANSITION_COLORS = 'transition-colors duration-150';
|
|
103
|
+
|
|
104
|
+
// ─── Disabled ────────────────────────────────────────────
|
|
105
|
+
export const DISABLED_OPACITY = 'data-[disabled=true]:opacity-50';
|
|
106
|
+
export const DISABLED_CURSOR =
|
|
107
|
+
'data-[disabled=true]:cursor-not-allowed data-[disabled=true]:pointer-events-none';
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.Text = void 0;
|
|
7
|
-
var _react = require("react");
|
|
8
|
-
var _reactNative = require("react-native");
|
|
9
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
10
|
-
const joinClassNames = (...parts) => parts.filter(Boolean).join(' ');
|
|
11
|
-
const buildTypographyClassName = variant => joinClassNames(`[font-family:var(--type-${variant}-family)]`, `[font-weight:var(--type-${variant}-weight)]`, `text-[var(--type-${variant}-size)]`, `leading-[var(--type-${variant}-lineHeight)]`, `tracking-[var(--type-${variant}-letterSpacing)]`, variant === 'overline' ? 'uppercase' : 'normal-case');
|
|
12
|
-
const Text = exports.Text = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
13
|
-
variant,
|
|
14
|
-
children,
|
|
15
|
-
style,
|
|
16
|
-
className,
|
|
17
|
-
...restProps
|
|
18
|
-
}, ref) => {
|
|
19
|
-
const variantKey = variant ?? 'body1';
|
|
20
|
-
const variantClassName = buildTypographyClassName(variantKey);
|
|
21
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
22
|
-
ref: ref,
|
|
23
|
-
className: joinClassNames(variantClassName, className),
|
|
24
|
-
style: style,
|
|
25
|
-
...restProps,
|
|
26
|
-
children: children
|
|
27
|
-
});
|
|
28
|
-
});
|
|
29
|
-
Text.displayName = 'Text';
|
|
30
|
-
//# sourceMappingURL=Text.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["_react","require","_reactNative","_jsxRuntime","joinClassNames","parts","filter","Boolean","join","buildTypographyClassName","variant","Text","exports","forwardRef","children","style","className","restProps","ref","variantKey","variantClassName","jsx","displayName"],"sourceRoot":"../../../../src","sources":["components/Text/Text.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAA6E,IAAAE,WAAA,GAAAF,OAAA;AA0B7E,MAAMG,cAAc,GAAGA,CAAC,GAAGC,KAAqC,KAC9DA,KAAK,CAACC,MAAM,CAACC,OAAO,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC;AAEjC,MAAMC,wBAAwB,GAAIC,OAA0B,IAC1DN,cAAc,CACZ,2BAA2BM,OAAO,WAAW,EAC7C,2BAA2BA,OAAO,WAAW,EAC7C,oBAAoBA,OAAO,SAAS,EACpC,uBAAuBA,OAAO,eAAe,EAC7C,wBAAwBA,OAAO,kBAAkB,EACjDA,OAAO,KAAK,UAAU,GAAG,WAAW,GAAG,aACzC,CAAC;AAEI,MAAMC,IAAI,GAAAC,OAAA,CAAAD,IAAA,gBAAG,IAAAE,iBAAU,EAC5B,CAAC;EAAEH,OAAO;EAAEI,QAAQ;EAAEC,KAAK;EAAEC,SAAS;EAAE,GAAGC;AAAU,CAAC,EAAEC,GAAG,KAAK;EAC9D,MAAMC,UAAU,GAAGT,OAAO,IAAI,OAAO;EACrC,MAAMU,gBAAgB,GAAGX,wBAAwB,CAACU,UAAU,CAAC;EAC7D,oBACE,IAAAhB,WAAA,CAAAkB,GAAA,EAACnB,YAAA,CAAAS,IAAM;IACLO,GAAG,EAAEA,GAAI;IACTF,SAAS,EAAEZ,cAAc,CAACgB,gBAAgB,EAAEJ,SAAS,CAAE;IACvDD,KAAK,EAAEA,KAAM;IAAA,GACTE,SAAS;IAAAH,QAAA,EAEZA;EAAQ,CACH,CAAC;AAEb,CACF,CAAC;AAEDH,IAAI,CAACW,WAAW,GAAG,MAAM","ignoreList":[]}
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
import { forwardRef } from 'react';
|
|
4
|
-
import { Text as RNText } from 'react-native';
|
|
5
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
|
-
const joinClassNames = (...parts) => parts.filter(Boolean).join(' ');
|
|
7
|
-
const buildTypographyClassName = variant => joinClassNames(`[font-family:var(--type-${variant}-family)]`, `[font-weight:var(--type-${variant}-weight)]`, `text-[var(--type-${variant}-size)]`, `leading-[var(--type-${variant}-lineHeight)]`, `tracking-[var(--type-${variant}-letterSpacing)]`, variant === 'overline' ? 'uppercase' : 'normal-case');
|
|
8
|
-
export const Text = /*#__PURE__*/forwardRef(({
|
|
9
|
-
variant,
|
|
10
|
-
children,
|
|
11
|
-
style,
|
|
12
|
-
className,
|
|
13
|
-
...restProps
|
|
14
|
-
}, ref) => {
|
|
15
|
-
const variantKey = variant ?? 'body1';
|
|
16
|
-
const variantClassName = buildTypographyClassName(variantKey);
|
|
17
|
-
return /*#__PURE__*/_jsx(RNText, {
|
|
18
|
-
ref: ref,
|
|
19
|
-
className: joinClassNames(variantClassName, className),
|
|
20
|
-
style: style,
|
|
21
|
-
...restProps,
|
|
22
|
-
children: children
|
|
23
|
-
});
|
|
24
|
-
});
|
|
25
|
-
Text.displayName = 'Text';
|
|
26
|
-
//# sourceMappingURL=Text.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["forwardRef","Text","RNText","jsx","_jsx","joinClassNames","parts","filter","Boolean","join","buildTypographyClassName","variant","children","style","className","restProps","ref","variantKey","variantClassName","displayName"],"sourceRoot":"../../../../src","sources":["components/Text/Text.tsx"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,OAAO;AAClC,SAASC,IAAI,IAAIC,MAAM,QAAuC,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AA0B7E,MAAMC,cAAc,GAAGA,CAAC,GAAGC,KAAqC,KAC9DA,KAAK,CAACC,MAAM,CAACC,OAAO,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC;AAEjC,MAAMC,wBAAwB,GAAIC,OAA0B,IAC1DN,cAAc,CACZ,2BAA2BM,OAAO,WAAW,EAC7C,2BAA2BA,OAAO,WAAW,EAC7C,oBAAoBA,OAAO,SAAS,EACpC,uBAAuBA,OAAO,eAAe,EAC7C,wBAAwBA,OAAO,kBAAkB,EACjDA,OAAO,KAAK,UAAU,GAAG,WAAW,GAAG,aACzC,CAAC;AAEH,OAAO,MAAMV,IAAI,gBAAGD,UAAU,CAC5B,CAAC;EAAEW,OAAO;EAAEC,QAAQ;EAAEC,KAAK;EAAEC,SAAS;EAAE,GAAGC;AAAU,CAAC,EAAEC,GAAG,KAAK;EAC9D,MAAMC,UAAU,GAAGN,OAAO,IAAI,OAAO;EACrC,MAAMO,gBAAgB,GAAGR,wBAAwB,CAACO,UAAU,CAAC;EAC7D,oBACEb,IAAA,CAACF,MAAM;IACLc,GAAG,EAAEA,GAAI;IACTF,SAAS,EAAET,cAAc,CAACa,gBAAgB,EAAEJ,SAAS,CAAE;IACvDD,KAAK,EAAEA,KAAM;IAAA,GACTE,SAAS;IAAAH,QAAA,EAEZA;EAAQ,CACH,CAAC;AAEb,CACF,CAAC;AAEDX,IAAI,CAACkB,WAAW,GAAG,MAAM","ignoreList":[]}
|