@cdx-ui/components 0.0.1-beta.3 → 0.0.1-beta.30
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 +18 -11
- package/lib/commonjs/components/Button/styles.js +2 -2
- package/lib/commonjs/components/Button/styles.js.map +1 -1
- package/lib/commonjs/components/Card/index.js +22 -4
- package/lib/commonjs/components/Card/index.js.map +1 -1
- package/lib/commonjs/components/Card/styles.js +27 -5
- package/lib/commonjs/components/Card/styles.js.map +1 -1
- package/lib/commonjs/components/Checkbox/index.js +5 -29
- package/lib/commonjs/components/Checkbox/index.js.map +1 -1
- package/lib/commonjs/components/Checkbox/styles.js +39 -47
- package/lib/commonjs/components/Checkbox/styles.js.map +1 -1
- package/lib/commonjs/components/Field/index.js +8 -2
- package/lib/commonjs/components/Field/index.js.map +1 -1
- package/lib/commonjs/components/Field/styles.js +4 -4
- package/lib/commonjs/components/Field/styles.js.map +1 -1
- package/lib/commonjs/components/Heading/styles.js +1 -1
- package/lib/commonjs/components/Heading/styles.js.map +1 -1
- package/lib/commonjs/components/Icon/index.js +1 -2
- package/lib/commonjs/components/Icon/index.js.map +1 -1
- package/lib/commonjs/components/IconButton/index.js +6 -1
- package/lib/commonjs/components/IconButton/index.js.map +1 -1
- package/lib/commonjs/components/IconButton/styles.js +135 -10
- package/lib/commonjs/components/IconButton/styles.js.map +1 -1
- package/lib/commonjs/components/Input/styles.js +7 -6
- package/lib/commonjs/components/Input/styles.js.map +1 -1
- package/lib/commonjs/components/ListItem/index.js +283 -0
- package/lib/commonjs/components/ListItem/index.js.map +1 -0
- package/lib/commonjs/components/ListItem/styles.js +130 -0
- package/lib/commonjs/components/ListItem/styles.js.map +1 -0
- package/lib/commonjs/components/ProgressSegmented/index.js +22 -10
- package/lib/commonjs/components/ProgressSegmented/index.js.map +1 -1
- package/lib/commonjs/components/Radio/index.js +167 -0
- package/lib/commonjs/components/Radio/index.js.map +1 -0
- package/lib/commonjs/components/Radio/styles.js +31 -0
- package/lib/commonjs/components/Radio/styles.js.map +1 -0
- package/lib/commonjs/components/Text/styles.js +2 -2
- package/lib/commonjs/components/Text/styles.js.map +1 -1
- package/lib/commonjs/components/Tile/index.js +251 -0
- package/lib/commonjs/components/Tile/index.js.map +1 -0
- package/lib/commonjs/components/Tile/styles.js +52 -0
- package/lib/commonjs/components/Tile/styles.js.map +1 -0
- package/lib/commonjs/components/index.js +36 -0
- package/lib/commonjs/components/index.js.map +1 -1
- package/lib/commonjs/figma/Button.figma.js +70 -0
- package/lib/commonjs/figma/Button.figma.js.map +1 -0
- package/lib/commonjs/figma/Card.Header.figma.js +28 -0
- package/lib/commonjs/figma/Card.Header.figma.js.map +1 -0
- package/lib/commonjs/figma/Card.figma.js +42 -0
- package/lib/commonjs/figma/Card.figma.js.map +1 -0
- package/lib/commonjs/figma/Checkbox.figma.js +55 -0
- package/lib/commonjs/figma/Checkbox.figma.js.map +1 -0
- package/lib/commonjs/figma/Field.Input.figma.js +57 -0
- package/lib/commonjs/figma/Field.Input.figma.js.map +1 -0
- package/lib/commonjs/figma/Field.Select.figma.js +57 -0
- package/lib/commonjs/figma/Field.Select.figma.js.map +1 -0
- package/lib/commonjs/figma/Heading.figma.js +30 -0
- package/lib/commonjs/figma/Heading.figma.js.map +1 -0
- package/lib/commonjs/figma/Icon.figma.js +20 -0
- package/lib/commonjs/figma/Icon.figma.js.map +1 -0
- package/lib/commonjs/figma/IconButton.figma.js +47 -0
- package/lib/commonjs/figma/IconButton.figma.js.map +1 -0
- package/lib/commonjs/figma/Input.figma.js +52 -0
- package/lib/commonjs/figma/Input.figma.js.map +1 -0
- package/lib/commonjs/figma/ProgressSegmented.figma.js +39 -0
- package/lib/commonjs/figma/ProgressSegmented.figma.js.map +1 -0
- package/lib/commonjs/figma/Radio.figma.js +38 -0
- package/lib/commonjs/figma/Radio.figma.js.map +1 -0
- package/lib/commonjs/figma/Select.figma.js +53 -0
- package/lib/commonjs/figma/Select.figma.js.map +1 -0
- package/lib/commonjs/figma/Text.figma.js +29 -0
- package/lib/commonjs/figma/Text.figma.js.map +1 -0
- package/lib/commonjs/figma/icons.figma.batch.js +27 -0
- package/lib/commonjs/figma/icons.figma.batch.js.map +1 -0
- package/lib/commonjs/figma/icons.figma.batch.json +17705 -0
- package/lib/commonjs/styles/primitives.js +36 -2
- package/lib/commonjs/styles/primitives.js.map +1 -1
- package/lib/module/components/Button/styles.js +2 -2
- package/lib/module/components/Button/styles.js.map +1 -1
- package/lib/module/components/Card/index.js +23 -4
- package/lib/module/components/Card/index.js.map +1 -1
- package/lib/module/components/Card/styles.js +27 -5
- package/lib/module/components/Card/styles.js.map +1 -1
- package/lib/module/components/Checkbox/index.js +6 -30
- package/lib/module/components/Checkbox/index.js.map +1 -1
- package/lib/module/components/Checkbox/styles.js +40 -48
- package/lib/module/components/Checkbox/styles.js.map +1 -1
- package/lib/module/components/Field/index.js +9 -3
- package/lib/module/components/Field/index.js.map +1 -1
- package/lib/module/components/Field/styles.js +4 -4
- package/lib/module/components/Field/styles.js.map +1 -1
- package/lib/module/components/Heading/styles.js +1 -1
- package/lib/module/components/Heading/styles.js.map +1 -1
- package/lib/module/components/Icon/index.js +1 -2
- package/lib/module/components/Icon/index.js.map +1 -1
- package/lib/module/components/IconButton/index.js +6 -1
- package/lib/module/components/IconButton/index.js.map +1 -1
- package/lib/module/components/IconButton/styles.js +135 -10
- package/lib/module/components/IconButton/styles.js.map +1 -1
- package/lib/module/components/Input/styles.js +7 -6
- package/lib/module/components/Input/styles.js.map +1 -1
- package/lib/module/components/ListItem/index.js +226 -0
- package/lib/module/components/ListItem/index.js.map +1 -0
- package/lib/module/components/ListItem/styles.js +127 -0
- package/lib/module/components/ListItem/styles.js.map +1 -0
- package/lib/module/components/ProgressSegmented/index.js +23 -11
- package/lib/module/components/ProgressSegmented/index.js.map +1 -1
- package/lib/module/components/Radio/index.js +164 -0
- package/lib/module/components/Radio/index.js.map +1 -0
- package/lib/module/components/Radio/styles.js +27 -0
- package/lib/module/components/Radio/styles.js.map +1 -0
- package/lib/module/components/Text/styles.js +2 -2
- package/lib/module/components/Text/styles.js.map +1 -1
- package/lib/module/components/Tile/index.js +243 -0
- package/lib/module/components/Tile/index.js.map +1 -0
- package/lib/module/components/Tile/styles.js +48 -0
- package/lib/module/components/Tile/styles.js.map +1 -0
- package/lib/module/components/index.js +3 -0
- package/lib/module/components/index.js.map +1 -1
- package/lib/module/figma/Button.figma.js +64 -0
- package/lib/module/figma/Button.figma.js.map +1 -0
- package/lib/module/figma/Card.Header.figma.js +22 -0
- package/lib/module/figma/Card.Header.figma.js.map +1 -0
- package/lib/module/figma/Card.figma.js +36 -0
- package/lib/module/figma/Card.figma.js.map +1 -0
- package/lib/module/figma/Checkbox.figma.js +49 -0
- package/lib/module/figma/Checkbox.figma.js.map +1 -0
- package/lib/module/figma/Field.Input.figma.js +51 -0
- package/lib/module/figma/Field.Input.figma.js.map +1 -0
- package/lib/module/figma/Field.Select.figma.js +51 -0
- package/lib/module/figma/Field.Select.figma.js.map +1 -0
- package/lib/module/figma/Heading.figma.js +24 -0
- package/lib/module/figma/Heading.figma.js.map +1 -0
- package/lib/module/figma/Icon.figma.js +14 -0
- package/lib/module/figma/Icon.figma.js.map +1 -0
- package/lib/module/figma/IconButton.figma.js +41 -0
- package/lib/module/figma/IconButton.figma.js.map +1 -0
- package/lib/module/figma/Input.figma.js +46 -0
- package/lib/module/figma/Input.figma.js.map +1 -0
- package/lib/module/figma/ProgressSegmented.figma.js +33 -0
- package/lib/module/figma/ProgressSegmented.figma.js.map +1 -0
- package/lib/module/figma/Radio.figma.js +32 -0
- package/lib/module/figma/Radio.figma.js.map +1 -0
- package/lib/module/figma/Select.figma.js +47 -0
- package/lib/module/figma/Select.figma.js.map +1 -0
- package/lib/module/figma/Text.figma.js +23 -0
- package/lib/module/figma/Text.figma.js.map +1 -0
- package/lib/module/figma/icons.figma.batch.js +22 -0
- package/lib/module/figma/icons.figma.batch.js.map +1 -0
- package/lib/module/figma/icons.figma.batch.json +17705 -0
- package/lib/module/styles/primitives.js +36 -2
- package/lib/module/styles/primitives.js.map +1 -1
- package/lib/typescript/components/Card/index.d.ts +4 -3
- package/lib/typescript/components/Card/index.d.ts.map +1 -1
- package/lib/typescript/components/Card/styles.d.ts +13 -3
- package/lib/typescript/components/Card/styles.d.ts.map +1 -1
- package/lib/typescript/components/Checkbox/index.d.ts +1 -2
- package/lib/typescript/components/Checkbox/index.d.ts.map +1 -1
- package/lib/typescript/components/Checkbox/styles.d.ts +4 -14
- package/lib/typescript/components/Checkbox/styles.d.ts.map +1 -1
- package/lib/typescript/components/Field/FieldLabel.web.d.ts +2 -2
- package/lib/typescript/components/Field/FieldLabel.web.d.ts.map +1 -1
- package/lib/typescript/components/Field/index.d.ts.map +1 -1
- package/lib/typescript/components/Field/styles.d.ts.map +1 -1
- package/lib/typescript/components/Heading/styles.d.ts.map +1 -1
- package/lib/typescript/components/Icon/index.d.ts.map +1 -1
- package/lib/typescript/components/IconButton/index.d.ts.map +1 -1
- package/lib/typescript/components/IconButton/styles.d.ts +6 -2
- package/lib/typescript/components/IconButton/styles.d.ts.map +1 -1
- package/lib/typescript/components/Input/styles.d.ts.map +1 -1
- package/lib/typescript/components/ListItem/index.d.ts +49 -0
- package/lib/typescript/components/ListItem/index.d.ts.map +1 -0
- package/lib/typescript/components/ListItem/styles.d.ts +30 -0
- package/lib/typescript/components/ListItem/styles.d.ts.map +1 -0
- package/lib/typescript/components/ProgressSegmented/index.d.ts +14 -3
- package/lib/typescript/components/ProgressSegmented/index.d.ts.map +1 -1
- package/lib/typescript/components/Radio/index.d.ts +40 -0
- package/lib/typescript/components/Radio/index.d.ts.map +1 -0
- package/lib/typescript/components/Radio/styles.d.ts +8 -0
- package/lib/typescript/components/Radio/styles.d.ts.map +1 -0
- package/lib/typescript/components/Text/styles.d.ts.map +1 -1
- package/lib/typescript/components/Tile/index.d.ts +70 -0
- package/lib/typescript/components/Tile/index.d.ts.map +1 -0
- package/lib/typescript/components/Tile/styles.d.ts +18 -0
- package/lib/typescript/components/Tile/styles.d.ts.map +1 -0
- package/lib/typescript/components/index.d.ts +3 -0
- package/lib/typescript/components/index.d.ts.map +1 -1
- package/lib/typescript/figma/Button.figma.d.ts +8 -0
- package/lib/typescript/figma/Button.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Card.Header.figma.d.ts +8 -0
- package/lib/typescript/figma/Card.Header.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Card.figma.d.ts +8 -0
- package/lib/typescript/figma/Card.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Checkbox.figma.d.ts +8 -0
- package/lib/typescript/figma/Checkbox.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Field.Input.figma.d.ts +8 -0
- package/lib/typescript/figma/Field.Input.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Field.Select.figma.d.ts +8 -0
- package/lib/typescript/figma/Field.Select.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Heading.figma.d.ts +8 -0
- package/lib/typescript/figma/Heading.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Icon.figma.d.ts +8 -0
- package/lib/typescript/figma/Icon.figma.d.ts.map +1 -0
- package/lib/typescript/figma/IconButton.figma.d.ts +8 -0
- package/lib/typescript/figma/IconButton.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Input.figma.d.ts +8 -0
- package/lib/typescript/figma/Input.figma.d.ts.map +1 -0
- package/lib/typescript/figma/ProgressSegmented.figma.d.ts +8 -0
- package/lib/typescript/figma/ProgressSegmented.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Radio.figma.d.ts +8 -0
- package/lib/typescript/figma/Radio.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Select.figma.d.ts +8 -0
- package/lib/typescript/figma/Select.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Text.figma.d.ts +8 -0
- package/lib/typescript/figma/Text.figma.d.ts.map +1 -0
- package/lib/typescript/figma/icons.figma.batch.d.ts +14 -0
- package/lib/typescript/figma/icons.figma.batch.d.ts.map +1 -0
- package/lib/typescript/styles/primitives.d.ts +35 -0
- package/lib/typescript/styles/primitives.d.ts.map +1 -1
- package/package.json +5 -5
- package/src/components/Button/styles.ts +2 -2
- package/src/components/Card/index.tsx +41 -16
- package/src/components/Card/styles.ts +43 -23
- package/src/components/Checkbox/index.tsx +8 -19
- package/src/components/Checkbox/styles.ts +82 -86
- package/src/components/Field/FieldLabel.web.tsx +1 -1
- package/src/components/Field/index.tsx +10 -3
- package/src/components/Field/styles.ts +5 -4
- package/src/components/Heading/{styles.tsx → styles.ts} +1 -1
- package/src/components/Icon/index.tsx +1 -2
- package/src/components/IconButton/index.tsx +3 -2
- package/src/components/IconButton/styles.ts +136 -10
- package/src/components/Input/styles.ts +13 -8
- package/src/components/ListItem/index.tsx +285 -0
- package/src/components/ListItem/styles.ts +153 -0
- package/src/components/ProgressSegmented/index.tsx +49 -14
- package/src/components/Radio/index.tsx +192 -0
- package/src/components/Radio/styles.ts +59 -0
- package/src/components/Text/{styles.tsx → styles.ts} +2 -2
- package/src/components/Tile/index.tsx +296 -0
- package/src/components/Tile/styles.ts +82 -0
- package/src/components/index.ts +3 -0
- package/src/styles/primitives.ts +36 -2
|
@@ -0,0 +1,243 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { forwardRef } from 'react';
|
|
4
|
+
import { Pressable, Text, View } from 'react-native';
|
|
5
|
+
import { createTile, useTileContext } from '@cdx-ui/primitives';
|
|
6
|
+
import { Check } from '@cdx-ui/icons';
|
|
7
|
+
import { dataAttributes } from '@cdx-ui/primitives';
|
|
8
|
+
import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
|
|
9
|
+
import { checkboxIndicatorVariants, checkboxIconVariants } from '../Checkbox/styles';
|
|
10
|
+
import { Icon } from '../Icon';
|
|
11
|
+
import { radioIndicatorVariants, radioInnerDotVariants } from '../Radio/styles';
|
|
12
|
+
import { tileContentVariants, tileDescriptionVariants, tileGroupVariants, tileIndicatorVariants, tileLeadingSlotVariants, tileRootVariants, tileTitleVariants, tileTrailingSlotVariants } from './styles';
|
|
13
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
14
|
+
const TILE_SCOPE = 'TILE';
|
|
15
|
+
const TILE_GROUP_SCOPE = 'TILE_GROUP';
|
|
16
|
+
const RootPressable = withStyleContext(Pressable, TILE_SCOPE);
|
|
17
|
+
const GroupView = withStyleContext(View, TILE_GROUP_SCOPE);
|
|
18
|
+
const useTileGroupStyleContext = () => {
|
|
19
|
+
// `useStyleContext` types the result as a `Record`, but at runtime the value is
|
|
20
|
+
// `undefined` when no provider is in scope (e.g. standalone Tile). Cast through
|
|
21
|
+
// `unknown` to acknowledge that.
|
|
22
|
+
const ctx = useStyleContext(TILE_GROUP_SCOPE);
|
|
23
|
+
return ctx ?? {};
|
|
24
|
+
};
|
|
25
|
+
const TilePrimitive = createTile({
|
|
26
|
+
Pressable: RootPressable,
|
|
27
|
+
Group: GroupView,
|
|
28
|
+
LeadingSlot: View,
|
|
29
|
+
Content: View,
|
|
30
|
+
Title: Text,
|
|
31
|
+
Description: Text,
|
|
32
|
+
Indicator: View,
|
|
33
|
+
TrailingSlot: View
|
|
34
|
+
});
|
|
35
|
+
|
|
36
|
+
// =============================================================================
|
|
37
|
+
// TILE GROUP
|
|
38
|
+
// =============================================================================
|
|
39
|
+
|
|
40
|
+
/**
|
|
41
|
+
* Discriminated union mirroring `ITileGroupProps`, with `className` and layout variants added at
|
|
42
|
+
* the styled layer. Distributing the intersection across each branch keeps `interface … extends`
|
|
43
|
+
* ergonomics and avoids tripping `@typescript-eslint` on `(union) & { ... }`.
|
|
44
|
+
*
|
|
45
|
+
* `direction` and `spacing` constrain the group layout to the three supported patterns:
|
|
46
|
+
* - `direction="column"` + `spacing="default"` — vertical stack with gaps (default).
|
|
47
|
+
* - `direction="column"` + `spacing="none"` — tight vertical stack (rows touch).
|
|
48
|
+
* - `direction="row"` + `spacing="default"` — side-by-side horizontal layout.
|
|
49
|
+
*
|
|
50
|
+
* `shape` (when set) is propagated to child `Tile`s via `withStyleContext`, matching the
|
|
51
|
+
* Avatar size-propagation pattern. A per-tile `shape` prop overrides the inherited value.
|
|
52
|
+
*/
|
|
53
|
+
|
|
54
|
+
const TileGroup = /*#__PURE__*/forwardRef(({
|
|
55
|
+
className,
|
|
56
|
+
style,
|
|
57
|
+
children,
|
|
58
|
+
direction,
|
|
59
|
+
spacing,
|
|
60
|
+
shape,
|
|
61
|
+
...props
|
|
62
|
+
}, ref) => /*#__PURE__*/_jsx(TilePrimitive.Group, {
|
|
63
|
+
ref: ref,
|
|
64
|
+
className: cn(tileGroupVariants({
|
|
65
|
+
direction,
|
|
66
|
+
spacing
|
|
67
|
+
}), className),
|
|
68
|
+
style: style,
|
|
69
|
+
context: {
|
|
70
|
+
shape
|
|
71
|
+
},
|
|
72
|
+
...props,
|
|
73
|
+
children: children
|
|
74
|
+
}));
|
|
75
|
+
TileGroup.displayName = 'Tile.Group';
|
|
76
|
+
|
|
77
|
+
// =============================================================================
|
|
78
|
+
// TILE ROOT
|
|
79
|
+
// =============================================================================
|
|
80
|
+
|
|
81
|
+
const TileRoot = /*#__PURE__*/forwardRef(({
|
|
82
|
+
shape: shapeProp,
|
|
83
|
+
showSeparator,
|
|
84
|
+
className,
|
|
85
|
+
style,
|
|
86
|
+
context,
|
|
87
|
+
...props
|
|
88
|
+
}, ref) => {
|
|
89
|
+
const {
|
|
90
|
+
shape: inheritedShape
|
|
91
|
+
} = useTileGroupStyleContext();
|
|
92
|
+
const shape = shapeProp ?? inheritedShape ?? 'card';
|
|
93
|
+
const computedClassName = cn(tileRootVariants({
|
|
94
|
+
shape,
|
|
95
|
+
showSeparator
|
|
96
|
+
}), className);
|
|
97
|
+
return /*#__PURE__*/_jsx(TilePrimitive, {
|
|
98
|
+
ref: ref,
|
|
99
|
+
className: computedClassName,
|
|
100
|
+
context: {
|
|
101
|
+
...context,
|
|
102
|
+
shape
|
|
103
|
+
},
|
|
104
|
+
style: style,
|
|
105
|
+
...props
|
|
106
|
+
});
|
|
107
|
+
});
|
|
108
|
+
TileRoot.displayName = 'Tile';
|
|
109
|
+
|
|
110
|
+
// =============================================================================
|
|
111
|
+
// SLOTS
|
|
112
|
+
// =============================================================================
|
|
113
|
+
|
|
114
|
+
const TileLeadingSlot = /*#__PURE__*/forwardRef(({
|
|
115
|
+
className,
|
|
116
|
+
style,
|
|
117
|
+
...props
|
|
118
|
+
}, ref) => /*#__PURE__*/_jsx(TilePrimitive.LeadingSlot, {
|
|
119
|
+
ref: ref,
|
|
120
|
+
className: cn(tileLeadingSlotVariants(), className),
|
|
121
|
+
style: style,
|
|
122
|
+
...props
|
|
123
|
+
}));
|
|
124
|
+
TileLeadingSlot.displayName = 'Tile.LeadingSlot';
|
|
125
|
+
const TileContent = /*#__PURE__*/forwardRef(({
|
|
126
|
+
className,
|
|
127
|
+
style,
|
|
128
|
+
...props
|
|
129
|
+
}, ref) => /*#__PURE__*/_jsx(TilePrimitive.Content, {
|
|
130
|
+
ref: ref,
|
|
131
|
+
className: cn(tileContentVariants(), className),
|
|
132
|
+
style: style,
|
|
133
|
+
...props
|
|
134
|
+
}));
|
|
135
|
+
TileContent.displayName = 'Tile.Content';
|
|
136
|
+
const TileTitle = /*#__PURE__*/forwardRef(({
|
|
137
|
+
className,
|
|
138
|
+
style,
|
|
139
|
+
numberOfLines = 1,
|
|
140
|
+
...props
|
|
141
|
+
}, ref) => /*#__PURE__*/_jsx(TilePrimitive.Title, {
|
|
142
|
+
ref: ref,
|
|
143
|
+
className: cn(tileTitleVariants(), className),
|
|
144
|
+
style: style,
|
|
145
|
+
numberOfLines: numberOfLines,
|
|
146
|
+
...props
|
|
147
|
+
}));
|
|
148
|
+
TileTitle.displayName = 'Tile.Title';
|
|
149
|
+
const TileDescription = /*#__PURE__*/forwardRef(({
|
|
150
|
+
className,
|
|
151
|
+
style,
|
|
152
|
+
...props
|
|
153
|
+
}, ref) => /*#__PURE__*/_jsx(TilePrimitive.Description, {
|
|
154
|
+
ref: ref,
|
|
155
|
+
className: cn(tileDescriptionVariants(), className),
|
|
156
|
+
style: style,
|
|
157
|
+
...props
|
|
158
|
+
}));
|
|
159
|
+
TileDescription.displayName = 'Tile.Description';
|
|
160
|
+
|
|
161
|
+
/**
|
|
162
|
+
* Decorative selection affordance. Renders pure CVA-styled Views — no interactive hooks,
|
|
163
|
+
* no nested Pressable, zero runtime overhead. The Tile root owns the press target and
|
|
164
|
+
* ARIA role; this subtree is `aria-hidden` via `createTileIndicator`.
|
|
165
|
+
*
|
|
166
|
+
* The visual is inferred from the tile context: `single` (radio semantics) → radio ring,
|
|
167
|
+
* `multiple` (checkbox semantics) → checkbox square. An explicit `indicatorType` prop
|
|
168
|
+
* overrides — primarily for standalone tiles that want a radio-style visual.
|
|
169
|
+
*/
|
|
170
|
+
function TileIndicatorVisual({
|
|
171
|
+
indicatorType
|
|
172
|
+
}) {
|
|
173
|
+
const {
|
|
174
|
+
isSelected,
|
|
175
|
+
isDisabled,
|
|
176
|
+
selectionType
|
|
177
|
+
} = useTileContext();
|
|
178
|
+
const effectiveType = indicatorType ?? (selectionType === 'single' ? 'radio' : 'checkbox');
|
|
179
|
+
const stateAttrs = dataAttributes({
|
|
180
|
+
checked: isSelected,
|
|
181
|
+
disabled: isDisabled
|
|
182
|
+
});
|
|
183
|
+
if (effectiveType === 'radio') {
|
|
184
|
+
return /*#__PURE__*/_jsx(View, {
|
|
185
|
+
className: radioIndicatorVariants(),
|
|
186
|
+
...stateAttrs,
|
|
187
|
+
children: /*#__PURE__*/_jsx(View, {
|
|
188
|
+
className: radioInnerDotVariants(),
|
|
189
|
+
...dataAttributes({
|
|
190
|
+
checked: isSelected,
|
|
191
|
+
invalid: false
|
|
192
|
+
})
|
|
193
|
+
})
|
|
194
|
+
});
|
|
195
|
+
}
|
|
196
|
+
return /*#__PURE__*/_jsx(View, {
|
|
197
|
+
className: cn(checkboxIndicatorVariants()),
|
|
198
|
+
...stateAttrs,
|
|
199
|
+
children: isSelected && /*#__PURE__*/_jsx(Icon, {
|
|
200
|
+
as: Check,
|
|
201
|
+
className: checkboxIconVariants()
|
|
202
|
+
})
|
|
203
|
+
});
|
|
204
|
+
}
|
|
205
|
+
const TileIndicator = /*#__PURE__*/forwardRef(({
|
|
206
|
+
className,
|
|
207
|
+
children,
|
|
208
|
+
style,
|
|
209
|
+
indicatorType,
|
|
210
|
+
...props
|
|
211
|
+
}, ref) => /*#__PURE__*/_jsx(TilePrimitive.Indicator, {
|
|
212
|
+
ref: ref,
|
|
213
|
+
className: cn(tileIndicatorVariants(), className),
|
|
214
|
+
style: style,
|
|
215
|
+
indicatorType: indicatorType,
|
|
216
|
+
...props,
|
|
217
|
+
children: children ?? /*#__PURE__*/_jsx(TileIndicatorVisual, {
|
|
218
|
+
indicatorType: indicatorType
|
|
219
|
+
})
|
|
220
|
+
}));
|
|
221
|
+
TileIndicator.displayName = 'Tile.Indicator';
|
|
222
|
+
const TileTrailingSlot = /*#__PURE__*/forwardRef(({
|
|
223
|
+
className,
|
|
224
|
+
style,
|
|
225
|
+
...props
|
|
226
|
+
}, ref) => /*#__PURE__*/_jsx(TilePrimitive.TrailingSlot, {
|
|
227
|
+
ref: ref,
|
|
228
|
+
className: cn(tileTrailingSlotVariants(), className),
|
|
229
|
+
style: style,
|
|
230
|
+
...props
|
|
231
|
+
}));
|
|
232
|
+
TileTrailingSlot.displayName = 'Tile.TrailingSlot';
|
|
233
|
+
export const Tile = Object.assign(TileRoot, {
|
|
234
|
+
Group: TileGroup,
|
|
235
|
+
LeadingSlot: TileLeadingSlot,
|
|
236
|
+
Content: TileContent,
|
|
237
|
+
Title: TileTitle,
|
|
238
|
+
Description: TileDescription,
|
|
239
|
+
Indicator: TileIndicator,
|
|
240
|
+
TrailingSlot: TileTrailingSlot
|
|
241
|
+
});
|
|
242
|
+
export { useTileContext };
|
|
243
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["forwardRef","Pressable","Text","View","createTile","useTileContext","Check","dataAttributes","cn","useStyleContext","withStyleContext","checkboxIndicatorVariants","checkboxIconVariants","Icon","radioIndicatorVariants","radioInnerDotVariants","tileContentVariants","tileDescriptionVariants","tileGroupVariants","tileIndicatorVariants","tileLeadingSlotVariants","tileRootVariants","tileTitleVariants","tileTrailingSlotVariants","jsx","_jsx","TILE_SCOPE","TILE_GROUP_SCOPE","RootPressable","GroupView","useTileGroupStyleContext","ctx","TilePrimitive","Group","LeadingSlot","Content","Title","Description","Indicator","TrailingSlot","TileGroup","className","style","children","direction","spacing","shape","props","ref","context","displayName","TileRoot","shapeProp","showSeparator","inheritedShape","computedClassName","TileLeadingSlot","TileContent","TileTitle","numberOfLines","TileDescription","TileIndicatorVisual","indicatorType","isSelected","isDisabled","selectionType","effectiveType","stateAttrs","checked","disabled","invalid","as","TileIndicator","TileTrailingSlot","Tile","Object","assign"],"sourceRoot":"../../../../src","sources":["components/Tile/index.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { Platform } from 'react-native';
|
|
4
|
+
import { cva } from 'class-variance-authority';
|
|
5
|
+
import { TRANSITION_COLORS } from '../../styles/primitives';
|
|
6
|
+
export const tileGroupVariants = cva(['flex w-full'], {
|
|
7
|
+
variants: {
|
|
8
|
+
direction: {
|
|
9
|
+
column: 'flex-col',
|
|
10
|
+
row: 'flex-row'
|
|
11
|
+
},
|
|
12
|
+
spacing: {
|
|
13
|
+
default: 'gap-2',
|
|
14
|
+
none: 'gap-0'
|
|
15
|
+
}
|
|
16
|
+
},
|
|
17
|
+
defaultVariants: {
|
|
18
|
+
direction: 'column',
|
|
19
|
+
spacing: 'default'
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
export const tileRootVariants = cva(['flex-row self-stretch gap-3 px-4 py-3', 'data-[disabled=true]:opacity-50', TRANSITION_COLORS, Platform.select({
|
|
23
|
+
web: ['outline-none', 'data-[hover=true]:data-[disabled=false]:bg-surface-action-tint-hover', 'data-[active=true]:data-[disabled=false]:data-[hover=true]:bg-surface-action-tint-active', 'data-[hover=true]:data-[disabled=false]:data-[state=unselected]:border-stroke-action', 'focus-visible:data-[disabled=false]:ring-2 focus-visible:data-[disabled=false]:ring-stroke-focus focus-visible:data-[disabled=false]:ring-offset-2'].join(' '),
|
|
24
|
+
default: ['data-[active=true]:bg-surface-action-tint-hover', 'data-[active=true]:border-stroke-action'].join(' ')
|
|
25
|
+
})], {
|
|
26
|
+
variants: {
|
|
27
|
+
shape: {
|
|
28
|
+
flat: 'rounded-none border-0 bg-transparent',
|
|
29
|
+
card: ['rounded-xl border-1 border-solid', 'border-stroke-secondary', 'bg-surface-primary', 'data-[state=selected]:border-stroke-action', 'data-[state=selected]:border-1.5', 'data-[state=selected]:bg-surface-action-tint'].join(' ')
|
|
30
|
+
},
|
|
31
|
+
showSeparator: {
|
|
32
|
+
true: ['border-b border-solid border-stroke-secondary! native:data-[active=true]:border-stroke-secondary' // Override border-stroke-action on hover
|
|
33
|
+
],
|
|
34
|
+
false: ''
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
defaultVariants: {
|
|
38
|
+
shape: 'card',
|
|
39
|
+
showSeparator: false
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
export const tileLeadingSlotVariants = cva(['flex shrink-0 items-center justify-center']);
|
|
43
|
+
export const tileTrailingSlotVariants = cva(['flex shrink-0 items-center justify-center']);
|
|
44
|
+
export const tileContentVariants = cva(['min-w-0 flex-1 flex-col gap-0.5 no-underline']);
|
|
45
|
+
export const tileTitleVariants = cva(['text-base font-medium text-content-primary no-underline']);
|
|
46
|
+
export const tileDescriptionVariants = cva(['text-sm text-content-secondary no-underline']);
|
|
47
|
+
export const tileIndicatorVariants = cva(['flex shrink-0 items-center justify-center']);
|
|
48
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["Platform","cva","TRANSITION_COLORS","tileGroupVariants","variants","direction","column","row","spacing","default","none","defaultVariants","tileRootVariants","select","web","join","shape","flat","card","showSeparator","true","false","tileLeadingSlotVariants","tileTrailingSlotVariants","tileContentVariants","tileTitleVariants","tileDescriptionVariants","tileIndicatorVariants"],"sourceRoot":"../../../../src","sources":["components/Tile/styles.ts"],"mappings":";;AAAA,SAASA,QAAQ,QAAQ,cAAc;AACvC,SAASC,GAAG,QAA2B,0BAA0B;AACjE,SAASC,iBAAiB,QAAQ,yBAAyB;AAE3D,OAAO,MAAMC,iBAAiB,GAAGF,GAAG,CAAC,CAAC,aAAa,CAAC,EAAE;EACpDG,QAAQ,EAAE;IACRC,SAAS,EAAE;MACTC,MAAM,EAAE,UAAU;MAClBC,GAAG,EAAE;IACP,CAAC;IACDC,OAAO,EAAE;MACPC,OAAO,EAAE,OAAO;MAChBC,IAAI,EAAE;IACR;EACF,CAAC;EACDC,eAAe,EAAE;IACfN,SAAS,EAAE,QAAQ;IACnBG,OAAO,EAAE;EACX;AACF,CAAC,CAAC;AAIF,OAAO,MAAMI,gBAAgB,GAAGX,GAAG,CACjC,CACE,uCAAuC,EACvC,iCAAiC,EACjCC,iBAAiB,EACjBF,QAAQ,CAACa,MAAM,CAAC;EACdC,GAAG,EAAE,CACH,cAAc,EACd,sEAAsE,EACtE,0FAA0F,EAC1F,sFAAsF,EACtF,oJAAoJ,CACrJ,CAACC,IAAI,CAAC,GAAG,CAAC;EACXN,OAAO,EAAE,CACP,iDAAiD,EACjD,yCAAyC,CAC1C,CAACM,IAAI,CAAC,GAAG;AACZ,CAAC,CAAC,CACH,EACD;EACEX,QAAQ,EAAE;IACRY,KAAK,EAAE;MACLC,IAAI,EAAE,sCAAsC;MAC5CC,IAAI,EAAE,CACJ,kCAAkC,EAClC,yBAAyB,EACzB,oBAAoB,EACpB,4CAA4C,EAC5C,kCAAkC,EAClC,8CAA8C,CAC/C,CAACH,IAAI,CAAC,GAAG;IACZ,CAAC;IACDI,aAAa,EAAE;MACbC,IAAI,EAAE,CACJ,kGAAkG,CAAE;MAAA,CACrG;MACDC,KAAK,EAAE;IACT;EACF,CAAC;EACDV,eAAe,EAAE;IACfK,KAAK,EAAE,MAAM;IACbG,aAAa,EAAE;EACjB;AACF,CACF,CAAC;AAED,OAAO,MAAMG,uBAAuB,GAAGrB,GAAG,CAAC,CAAC,2CAA2C,CAAC,CAAC;AAEzF,OAAO,MAAMsB,wBAAwB,GAAGtB,GAAG,CAAC,CAAC,2CAA2C,CAAC,CAAC;AAE1F,OAAO,MAAMuB,mBAAmB,GAAGvB,GAAG,CAAC,CAAC,8CAA8C,CAAC,CAAC;AAExF,OAAO,MAAMwB,iBAAiB,GAAGxB,GAAG,CAAC,CAAC,yDAAyD,CAAC,CAAC;AAEjG,OAAO,MAAMyB,uBAAuB,GAAGzB,GAAG,CAAC,CAAC,6CAA6C,CAAC,CAAC;AAE3F,OAAO,MAAM0B,qBAAqB,GAAG1B,GAAG,CAAC,CAAC,2CAA2C,CAAC,CAAC","ignoreList":[]}
|
|
@@ -15,11 +15,14 @@ export * from './Image';
|
|
|
15
15
|
export * from './Input';
|
|
16
16
|
export * from './OtpInput';
|
|
17
17
|
export * from './Link';
|
|
18
|
+
export * from './ListItem';
|
|
18
19
|
export * from './ProgressBar';
|
|
19
20
|
export * from './ProgressSegmented';
|
|
21
|
+
export * from './Radio';
|
|
20
22
|
export * from './Select';
|
|
21
23
|
export * from './VirtualizedList';
|
|
22
24
|
export * from './Switch';
|
|
25
|
+
export * from './Tile';
|
|
23
26
|
export { HStack, VStack } from './Stack';
|
|
24
27
|
export * from './Heading';
|
|
25
28
|
export * from './Text';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["HStack","VStack"],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;AAAA,cAAc,eAAe;AAC7B,cAAc,UAAU;AACxB,cAAc,eAAe;AAC7B,cAAc,OAAO;AACrB,cAAc,UAAU;AACxB,cAAc,QAAQ;AACtB,cAAc,YAAY;AAC1B,cAAc,QAAQ;AACtB,cAAc,UAAU;AACxB,cAAc,SAAS;AACvB,cAAc,QAAQ;AACtB,cAAc,SAAS;AACvB,cAAc,SAAS;AACvB,cAAc,YAAY;AAC1B,cAAc,QAAQ;AACtB,cAAc,eAAe;AAC7B,cAAc,qBAAqB;AACnC,cAAc,UAAU;AACxB,cAAc,mBAAmB;AACjC,cAAc,UAAU;AACxB,SAASA,MAAM,EAAEC,MAAM,QAAQ,SAAS;AACxC,cAAc,WAAW;AACzB,cAAc,QAAQ;AACtB,cAAc,QAAQ;AACtB,cAAc,cAAc","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["HStack","VStack"],"sourceRoot":"../../../src","sources":["components/index.ts"],"mappings":";;AAAA,cAAc,eAAe;AAC7B,cAAc,UAAU;AACxB,cAAc,eAAe;AAC7B,cAAc,OAAO;AACrB,cAAc,UAAU;AACxB,cAAc,QAAQ;AACtB,cAAc,YAAY;AAC1B,cAAc,QAAQ;AACtB,cAAc,UAAU;AACxB,cAAc,SAAS;AACvB,cAAc,QAAQ;AACtB,cAAc,SAAS;AACvB,cAAc,SAAS;AACvB,cAAc,YAAY;AAC1B,cAAc,QAAQ;AACtB,cAAc,YAAY;AAC1B,cAAc,eAAe;AAC7B,cAAc,qBAAqB;AACnC,cAAc,SAAS;AACvB,cAAc,UAAU;AACxB,cAAc,mBAAmB;AACjC,cAAc,UAAU;AACxB,cAAc,QAAQ;AACtB,SAASA,MAAM,EAAEC,MAAM,QAAQ,SAAS;AACxC,cAAc,WAAW;AACzB,cAAc,QAAQ;AACtB,cAAc,QAAQ;AACtB,cAAc,cAAc","ignoreList":[]}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=119-72
|
|
4
|
+
// source=packages/components/src/components/Button/index.tsx
|
|
5
|
+
// component=Button
|
|
6
|
+
import figma from 'figma';
|
|
7
|
+
const instance = figma.selectedInstance;
|
|
8
|
+
|
|
9
|
+
// Variant rename: Figma uses "solid" but code uses "strong" for the filled/primary style.
|
|
10
|
+
// This divergence exists because "strong" better communicates visual weight in the code API
|
|
11
|
+
// while "solid" is the conventional Figma naming.
|
|
12
|
+
const variant = instance.getEnum('variant', {
|
|
13
|
+
solid: 'strong',
|
|
14
|
+
outline: 'outline',
|
|
15
|
+
ghost: 'ghost'
|
|
16
|
+
});
|
|
17
|
+
const color = instance.getEnum('color', {
|
|
18
|
+
action: 'action',
|
|
19
|
+
danger: 'danger'
|
|
20
|
+
});
|
|
21
|
+
const size = instance.getEnum('size', {
|
|
22
|
+
default: 'default',
|
|
23
|
+
small: 'small'
|
|
24
|
+
});
|
|
25
|
+
// Enum-as-boolean: isDisabled is a VARIANT property in Figma (string values "true"/"false")
|
|
26
|
+
// rather than a true BOOLEAN. Map "false" to undefined so the prop is omitted when not disabled.
|
|
27
|
+
const isDisabled = instance.getEnum('isDisabled', {
|
|
28
|
+
true: true,
|
|
29
|
+
false: undefined
|
|
30
|
+
});
|
|
31
|
+
const isDisabledProp = figma.helpers.react.renderProp('isDisabled', isDisabled);
|
|
32
|
+
const showLeadingIcon = instance.getBoolean('Show Leading Icon?');
|
|
33
|
+
const showTrailingIcon = instance.getBoolean('Show Trailing Icon?');
|
|
34
|
+
|
|
35
|
+
// Icon slots: Prefer metadata.props.componentName exposed by icon Code Connect templates,
|
|
36
|
+
// which yields a clean identifier (e.g. "Check"). Fall back to executeTemplate().example
|
|
37
|
+
// (renders a placeholder pill when the icon lacks Code Connect).
|
|
38
|
+
const leadingIconResult = instance.getInstanceSwap('Leading Icon')?.executeTemplate();
|
|
39
|
+
const trailingIconResult = instance.getInstanceSwap('Trailing Icon')?.executeTemplate();
|
|
40
|
+
const leadingIconName = leadingIconResult?.metadata?.props?.componentName;
|
|
41
|
+
const trailingIconName = trailingIconResult?.metadata?.props?.componentName;
|
|
42
|
+
const leadingIconSnippet = leadingIconName ?? leadingIconResult?.example;
|
|
43
|
+
const trailingIconSnippet = trailingIconName ?? trailingIconResult?.example;
|
|
44
|
+
const label = instance.findText('Button.Label').textContent;
|
|
45
|
+
|
|
46
|
+
// Include icon imports when resolved via metadata.props (propagated from icon Code Connect)
|
|
47
|
+
const iconImports = [];
|
|
48
|
+
if (showLeadingIcon && leadingIconName) {
|
|
49
|
+
iconImports.push(`import { ${leadingIconName} } from '@cdx-ui/icons'`);
|
|
50
|
+
}
|
|
51
|
+
if (showTrailingIcon && trailingIconName) {
|
|
52
|
+
iconImports.push(`import { ${trailingIconName} } from '@cdx-ui/icons'`);
|
|
53
|
+
}
|
|
54
|
+
export default {
|
|
55
|
+
id: 'button',
|
|
56
|
+
imports: ["import { Button } from '@cdx-ui/components'", ...iconImports],
|
|
57
|
+
example: figma.code`
|
|
58
|
+
<Button variant="${variant}" color="${color}" size="${size}"${isDisabledProp}>
|
|
59
|
+
${showLeadingIcon ? figma.code`<Button.Icon as={${leadingIconSnippet}} />` : null}
|
|
60
|
+
<Button.Label>${label}</Button.Label>
|
|
61
|
+
${showTrailingIcon ? figma.code`<Button.Icon as={${trailingIconSnippet}} />` : null}
|
|
62
|
+
</Button>`
|
|
63
|
+
};
|
|
64
|
+
//# sourceMappingURL=Button.figma.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["figma","instance","selectedInstance","variant","getEnum","solid","outline","ghost","color","action","danger","size","default","small","isDisabled","true","false","undefined","isDisabledProp","helpers","react","renderProp","showLeadingIcon","getBoolean","showTrailingIcon","leadingIconResult","getInstanceSwap","executeTemplate","trailingIconResult","leadingIconName","metadata","props","componentName","trailingIconName","leadingIconSnippet","example","trailingIconSnippet","label","findText","textContent","iconImports","push","id","imports","code"],"sourceRoot":"../../../src","sources":["figma/Button.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;;AAEvC;AACA;AACA;AACA,MAAMC,OAAO,GAAGF,QAAQ,CAACG,OAAO,CAAC,SAAS,EAAE;EAC1CC,KAAK,EAAE,QAAQ;EACfC,OAAO,EAAE,SAAS;EAClBC,KAAK,EAAE;AACT,CAAC,CAAC;AACF,MAAMC,KAAK,GAAGP,QAAQ,CAACG,OAAO,CAAC,OAAO,EAAE;EACtCK,MAAM,EAAE,QAAQ;EAChBC,MAAM,EAAE;AACV,CAAC,CAAC;AACF,MAAMC,IAAI,GAAGV,QAAQ,CAACG,OAAO,CAAC,MAAM,EAAE;EACpCQ,OAAO,EAAE,SAAS;EAClBC,KAAK,EAAE;AACT,CAAC,CAAC;AACF;AACA;AACA,MAAMC,UAAU,GAAGb,QAAQ,CAACG,OAAO,CAAC,YAAY,EAAE;EAChDW,IAAI,EAAE,IAAI;EACVC,KAAK,EAAEC;AACT,CAAC,CAAC;AACF,MAAMC,cAAc,GAAGlB,KAAK,CAACmB,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,YAAY,EAAEP,UAAU,CAAC;AAE/E,MAAMQ,eAAe,GAAGrB,QAAQ,CAACsB,UAAU,CAAC,oBAAoB,CAAC;AACjE,MAAMC,gBAAgB,GAAGvB,QAAQ,CAACsB,UAAU,CAAC,qBAAqB,CAAC;;AAEnE;AACA;AACA;AACA,MAAME,iBAAiB,GAAGxB,QAAQ,CAACyB,eAAe,CAAC,cAAc,CAAC,EAAEC,eAAe,CAAC,CAAC;AACrF,MAAMC,kBAAkB,GAAG3B,QAAQ,CAACyB,eAAe,CAAC,eAAe,CAAC,EAAEC,eAAe,CAAC,CAAC;AAEvF,MAAME,eAAe,GAAGJ,iBAAiB,EAAEK,QAAQ,EAAEC,KAAK,EAAEC,aAAmC;AAC/F,MAAMC,gBAAgB,GAAGL,kBAAkB,EAAEE,QAAQ,EAAEC,KAAK,EAAEC,aAAmC;AACjG,MAAME,kBAAkB,GAAGL,eAAe,IAAIJ,iBAAiB,EAAEU,OAAO;AACxE,MAAMC,mBAAmB,GAAGH,gBAAgB,IAAIL,kBAAkB,EAAEO,OAAO;AAE3E,MAAME,KAAK,GAAIpC,QAAQ,CAACqC,QAAQ,CAAC,cAAc,CAAC,CAAgCC,WAAW;;AAE3F;AACA,MAAMC,WAAqB,GAAG,EAAE;AAChC,IAAIlB,eAAe,IAAIO,eAAe,EAAE;EACtCW,WAAW,CAACC,IAAI,CAAC,YAAYZ,eAAe,yBAAyB,CAAC;AACxE;AACA,IAAIL,gBAAgB,IAAIS,gBAAgB,EAAE;EACxCO,WAAW,CAACC,IAAI,CAAC,YAAYR,gBAAgB,yBAAyB,CAAC;AACzE;AAEA,eAAe;EACbS,EAAE,EAAE,QAAQ;EACZC,OAAO,EAAE,CAAC,6CAA6C,EAAE,GAAGH,WAAW,CAAC;EACxEL,OAAO,EAAEnC,KAAK,CAAC4C,IAAI;AACrB,mBAAmBzC,OAAO,YAAYK,KAAK,WAAWG,IAAI,IAAIO,cAAc;AAC5E,IAAII,eAAe,GAAGtB,KAAK,CAAC4C,IAAI,oBAAoBV,kBAAkB,MAAM,GAAG,IAAI;AACnF,kBAAkBG,KAAK;AACvB,IAAIb,gBAAgB,GAAGxB,KAAK,CAAC4C,IAAI,oBAAoBR,mBAAmB,MAAM,GAAG,IAAI;AACrF;AACA,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=455-178
|
|
4
|
+
// source=packages/components/src/components/Card/index.tsx
|
|
5
|
+
// component=Card.Header
|
|
6
|
+
import figma from 'figma';
|
|
7
|
+
const instance = figma.selectedInstance;
|
|
8
|
+
const showActions = instance.getBoolean('Show Actions?');
|
|
9
|
+
const actionsSlot = instance.getSlot('Actions');
|
|
10
|
+
const title = instance.findText('{Title}').textContent;
|
|
11
|
+
const actions = showActions && actionsSlot ? figma.helpers.react.renderChildren(actionsSlot) : null;
|
|
12
|
+
export default {
|
|
13
|
+
id: 'card-header',
|
|
14
|
+
// Must match Card.figma.ts when the card nests this template (identical strings → deduped imports).
|
|
15
|
+
imports: ["import { Card, Heading } from '@cdx-ui/components'"],
|
|
16
|
+
example: figma.code`
|
|
17
|
+
<Card.Header>
|
|
18
|
+
<Heading size="sm">${title}</Heading>
|
|
19
|
+
${actions}
|
|
20
|
+
</Card.Header>`
|
|
21
|
+
};
|
|
22
|
+
//# sourceMappingURL=Card.Header.figma.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["figma","instance","selectedInstance","showActions","getBoolean","actionsSlot","getSlot","title","findText","textContent","actions","helpers","react","renderChildren","id","imports","example","code"],"sourceRoot":"../../../src","sources":["figma/Card.Header.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;AAEvC,MAAMC,WAAW,GAAGF,QAAQ,CAACG,UAAU,CAAC,eAAe,CAAC;AACxD,MAAMC,WAAW,GAAGJ,QAAQ,CAACK,OAAO,CAAC,SAAS,CAAC;AAC/C,MAAMC,KAAK,GAAIN,QAAQ,CAACO,QAAQ,CAAC,SAAS,CAAC,CAAgCC,WAAW;AAEtF,MAAMC,OAAO,GAAGP,WAAW,IAAIE,WAAW,GAAGL,KAAK,CAACW,OAAO,CAACC,KAAK,CAACC,cAAc,CAACR,WAAW,CAAC,GAAG,IAAI;AAEnG,eAAe;EACbS,EAAE,EAAE,aAAa;EACjB;EACAC,OAAO,EAAE,CAAC,oDAAoD,CAAC;EAC/DC,OAAO,EAAEhB,KAAK,CAACiB,IAAI;AACrB;AACA,uBAAuBV,KAAK;AAC5B,IAAIG,OAAO;AACX;AACA,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=456-14
|
|
4
|
+
// source=packages/components/src/components/Card/index.tsx
|
|
5
|
+
// component=Card
|
|
6
|
+
import figma from 'figma';
|
|
7
|
+
const instance = figma.selectedInstance;
|
|
8
|
+
|
|
9
|
+
// VARIANT property uses "true" / "false" strings — omit prop when not full bleed.
|
|
10
|
+
const fullBleed = instance.getEnum('fullBleed', {
|
|
11
|
+
true: true,
|
|
12
|
+
false: undefined
|
|
13
|
+
});
|
|
14
|
+
const showHeader = instance.getBoolean('Show Header?');
|
|
15
|
+
const showFooter = instance.getBoolean('Show Footer?');
|
|
16
|
+
const headerLayer = instance.findInstance('Card.Header');
|
|
17
|
+
const headerSnippet = showHeader && headerLayer?.type === 'INSTANCE' ? headerLayer.executeTemplate().example : null;
|
|
18
|
+
const contentSlot = instance.getSlot('Card.Content');
|
|
19
|
+
const footerSlot = instance.getSlot('Card.Footer');
|
|
20
|
+
const contentChildren = contentSlot ? figma.helpers.react.renderChildren(contentSlot) : null;
|
|
21
|
+
const footerChildren = footerSlot ? figma.helpers.react.renderChildren(footerSlot) : null;
|
|
22
|
+
|
|
23
|
+
// When the header shows: use the exact same import string as Card.Header.figma.ts (Code Connect
|
|
24
|
+
// allows only `import … from 'figma'` in template files; duplicate literals are required for dedupe).
|
|
25
|
+
const componentImport = showHeader ? "import { Card, Heading } from '@cdx-ui/components'" : `import { Card } from '@cdx-ui/components'`;
|
|
26
|
+
export default {
|
|
27
|
+
id: 'card',
|
|
28
|
+
imports: [componentImport],
|
|
29
|
+
example: figma.code`
|
|
30
|
+
<Card fullBleed={${fullBleed}}>
|
|
31
|
+
${headerSnippet}
|
|
32
|
+
<Card.Content>${contentChildren}</Card.Content>
|
|
33
|
+
${showFooter ? figma.code`<Card.Footer>${footerChildren}</Card.Footer>` : null}
|
|
34
|
+
</Card>`
|
|
35
|
+
};
|
|
36
|
+
//# sourceMappingURL=Card.figma.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["figma","instance","selectedInstance","fullBleed","getEnum","true","false","undefined","showHeader","getBoolean","showFooter","headerLayer","findInstance","headerSnippet","type","executeTemplate","example","contentSlot","getSlot","footerSlot","contentChildren","helpers","react","renderChildren","footerChildren","componentImport","id","imports","code"],"sourceRoot":"../../../src","sources":["figma/Card.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;;AAEvC;AACA,MAAMC,SAAS,GAAGF,QAAQ,CAACG,OAAO,CAAC,WAAW,EAAE;EAC9CC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAEC;AACT,CAAC,CAAC;AAEF,MAAMC,UAAU,GAAGP,QAAQ,CAACQ,UAAU,CAAC,cAAc,CAAC;AACtD,MAAMC,UAAU,GAAGT,QAAQ,CAACQ,UAAU,CAAC,cAAc,CAAC;AAEtD,MAAME,WAAW,GAAGV,QAAQ,CAACW,YAAY,CAAC,aAAa,CAAC;AACxD,MAAMC,aAAa,GACjBL,UAAU,IAAIG,WAAW,EAAEG,IAAI,KAAK,UAAU,GAAGH,WAAW,CAACI,eAAe,CAAC,CAAC,CAACC,OAAO,GAAG,IAAI;AAE/F,MAAMC,WAAW,GAAGhB,QAAQ,CAACiB,OAAO,CAAC,cAAc,CAAC;AACpD,MAAMC,UAAU,GAAGlB,QAAQ,CAACiB,OAAO,CAAC,aAAa,CAAC;AAElD,MAAME,eAAe,GAAGH,WAAW,GAAGjB,KAAK,CAACqB,OAAO,CAACC,KAAK,CAACC,cAAc,CAACN,WAAW,CAAC,GAAG,IAAI;AAE5F,MAAMO,cAAc,GAAGL,UAAU,GAAGnB,KAAK,CAACqB,OAAO,CAACC,KAAK,CAACC,cAAc,CAACJ,UAAU,CAAC,GAAG,IAAI;;AAEzF;AACA;AACA,MAAMM,eAAe,GAAGjB,UAAU,GAC9B,oDAAoD,GACpD,2CAA2C;AAE/C,eAAe;EACbkB,EAAE,EAAE,MAAM;EACVC,OAAO,EAAE,CAACF,eAAe,CAAC;EAC1BT,OAAO,EAAEhB,KAAK,CAAC4B,IAAI;AACrB,mBAAmBzB,SAAS;AAC5B,IAAIU,aAAa;AACjB,kBAAkBO,eAAe;AACjC,IAAIV,UAAU,GAAGV,KAAK,CAAC4B,IAAI,gBAAgBJ,cAAc,gBAAgB,GAAG,IAAI;AAChF;AACA,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=366-383
|
|
4
|
+
// source=packages/components/src/components/Checkbox/index.tsx
|
|
5
|
+
// component=Checkbox
|
|
6
|
+
import figma from 'figma';
|
|
7
|
+
const instance = figma.selectedInstance;
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* Enum-as-boolean VARIANT props use string values "true"/"false" in Figma.
|
|
11
|
+
* Props are emitted via `figma.helpers.react.renderProp` so JSX formatting matches Code Connect conventions.
|
|
12
|
+
*
|
|
13
|
+
* `isHovered` and `isFocused` are interaction-only variants (fixed "false") and are intentionally omitted.
|
|
14
|
+
*/
|
|
15
|
+
const isChecked = instance.getEnum('isChecked', {
|
|
16
|
+
true: true,
|
|
17
|
+
false: false
|
|
18
|
+
});
|
|
19
|
+
const isIndeterminate = instance.getEnum('isIndeterminate', {
|
|
20
|
+
true: true,
|
|
21
|
+
false: false
|
|
22
|
+
});
|
|
23
|
+
const isInvalid = instance.getEnum('isInvalid', {
|
|
24
|
+
true: true,
|
|
25
|
+
false: false
|
|
26
|
+
});
|
|
27
|
+
const isDisabled = instance.getEnum('isDisabled', {
|
|
28
|
+
true: true,
|
|
29
|
+
false: false
|
|
30
|
+
});
|
|
31
|
+
const valueProp = figma.helpers.react.renderProp('value', 'terms');
|
|
32
|
+
const isCheckedProp = figma.helpers.react.renderProp('isChecked', isChecked);
|
|
33
|
+
const isIndeterminateProp = figma.helpers.react.renderProp('isIndeterminate', isIndeterminate);
|
|
34
|
+
const isInvalidProp = figma.helpers.react.renderProp('isInvalid', isInvalid);
|
|
35
|
+
const isDisabledProp = figma.helpers.react.renderProp('isDisabled', isDisabled);
|
|
36
|
+
const showLabel = instance.getEnum('Show Label?', {
|
|
37
|
+
true: true,
|
|
38
|
+
false: false
|
|
39
|
+
});
|
|
40
|
+
const labelText = instance.findText('Label').textContent;
|
|
41
|
+
export default {
|
|
42
|
+
id: 'checkbox',
|
|
43
|
+
imports: ["import { Checkbox } from '@cdx-ui/components'"],
|
|
44
|
+
example: figma.code`
|
|
45
|
+
<Checkbox${valueProp}${isCheckedProp}${isIndeterminateProp}${isInvalidProp}${isDisabledProp}>
|
|
46
|
+
${showLabel ? figma.code`<Checkbox.Label>${labelText}</Checkbox.Label>` : null}
|
|
47
|
+
</Checkbox>`
|
|
48
|
+
};
|
|
49
|
+
//# sourceMappingURL=Checkbox.figma.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["figma","instance","selectedInstance","isChecked","getEnum","true","false","isIndeterminate","isInvalid","isDisabled","valueProp","helpers","react","renderProp","isCheckedProp","isIndeterminateProp","isInvalidProp","isDisabledProp","showLabel","labelText","findText","textContent","id","imports","example","code"],"sourceRoot":"../../../src","sources":["figma/Checkbox.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;;AAEvC;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,SAAS,GAAGF,QAAQ,CAACG,OAAO,CAAC,WAAW,EAAE;EAC9CC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAE;AACT,CAAC,CAAC;AACF,MAAMC,eAAe,GAAGN,QAAQ,CAACG,OAAO,CAAC,iBAAiB,EAAE;EAC1DC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAE;AACT,CAAC,CAAC;AACF,MAAME,SAAS,GAAGP,QAAQ,CAACG,OAAO,CAAC,WAAW,EAAE;EAC9CC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAE;AACT,CAAC,CAAC;AACF,MAAMG,UAAU,GAAGR,QAAQ,CAACG,OAAO,CAAC,YAAY,EAAE;EAChDC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAE;AACT,CAAC,CAAC;AAEF,MAAMI,SAAS,GAAGV,KAAK,CAACW,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,OAAO,EAAE,OAAO,CAAC;AAClE,MAAMC,aAAa,GAAGd,KAAK,CAACW,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,WAAW,EAAEV,SAAS,CAAC;AAC5E,MAAMY,mBAAmB,GAAGf,KAAK,CAACW,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,iBAAiB,EAAEN,eAAe,CAAC;AAC9F,MAAMS,aAAa,GAAGhB,KAAK,CAACW,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,WAAW,EAAEL,SAAS,CAAC;AAC5E,MAAMS,cAAc,GAAGjB,KAAK,CAACW,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,YAAY,EAAEJ,UAAU,CAAC;AAE/E,MAAMS,SAAS,GAAGjB,QAAQ,CAACG,OAAO,CAAC,aAAa,EAAE;EAChDC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAE;AACT,CAAC,CAAC;AAEF,MAAMa,SAAS,GAAIlB,QAAQ,CAACmB,QAAQ,CAAC,OAAO,CAAC,CAAgCC,WAAW;AAExF,eAAe;EACbC,EAAE,EAAE,UAAU;EACdC,OAAO,EAAE,CAAC,+CAA+C,CAAC;EAC1DC,OAAO,EAAExB,KAAK,CAACyB,IAAI;AACrB,WAAWf,SAAS,GAAGI,aAAa,GAAGC,mBAAmB,GAAGC,aAAa,GAAGC,cAAc;AAC3F,IAAIC,SAAS,GAAGlB,KAAK,CAACyB,IAAI,mBAAmBN,SAAS,mBAAmB,GAAG,IAAI;AAChF;AACA,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-CDS-V2--React-Native?node-id=409-3015
|
|
4
|
+
// source=packages/components/src/components/Field/index.tsx
|
|
5
|
+
// component=Field
|
|
6
|
+
import figma from 'figma';
|
|
7
|
+
const instance = figma.selectedInstance;
|
|
8
|
+
const showLabel = instance.getBoolean('Show Label?');
|
|
9
|
+
const showHelperText = instance.getBoolean('Show Helper Text?');
|
|
10
|
+
const showErrorText = instance.getBoolean('Show Error Text?');
|
|
11
|
+
|
|
12
|
+
// Enum-as-boolean: isInvalid / isDisabled are VARIANT properties in Figma (string values "true"/"false").
|
|
13
|
+
// Map "false" to undefined so renderProp omits them from the snippet.
|
|
14
|
+
const isInvalid = instance.getEnum('isInvalid', {
|
|
15
|
+
true: true,
|
|
16
|
+
false: undefined
|
|
17
|
+
});
|
|
18
|
+
const isDisabled = instance.getEnum('isDisabled', {
|
|
19
|
+
true: true,
|
|
20
|
+
false: undefined
|
|
21
|
+
});
|
|
22
|
+
const isInvalidProp = figma.helpers.react.renderProp('isInvalid', isInvalid);
|
|
23
|
+
const isDisabledProp = figma.helpers.react.renderProp('isDisabled', isDisabled);
|
|
24
|
+
const labelText = instance.findText('{Label}', {
|
|
25
|
+
traverseInstances: true
|
|
26
|
+
}).textContent;
|
|
27
|
+
const helperText = instance.findText('{HelperText}', {
|
|
28
|
+
traverseInstances: true
|
|
29
|
+
}).textContent;
|
|
30
|
+
const errorText = instance.findText('{ErrorText}', {
|
|
31
|
+
traverseInstances: true
|
|
32
|
+
}).textContent;
|
|
33
|
+
const input = instance.findInstance('Input');
|
|
34
|
+
let inputSnippet;
|
|
35
|
+
if (input?.type === 'INSTANCE') {
|
|
36
|
+
inputSnippet = input.executeTemplate().example;
|
|
37
|
+
}
|
|
38
|
+
export default {
|
|
39
|
+
id: 'field-input',
|
|
40
|
+
// Only import Field here; the nested Input template provides its own "import { Input } …" line.
|
|
41
|
+
// Code Connect merges the two separate import statements from the same package automatically.
|
|
42
|
+
imports: ["import { Field } from '@cdx-ui/components'"],
|
|
43
|
+
example: figma.code`
|
|
44
|
+
<Field${isInvalidProp}${isDisabledProp}>
|
|
45
|
+
${showLabel ? figma.code`<Field.Label>${labelText}</Field.Label>` : null}
|
|
46
|
+
${inputSnippet}
|
|
47
|
+
${!isInvalid && showHelperText ? figma.code`<Field.Helper>${helperText}</Field.Helper>` : null}
|
|
48
|
+
${isInvalid && showErrorText ? figma.code`<Field.Error>${errorText}</Field.Error>` : null}
|
|
49
|
+
</Field>`
|
|
50
|
+
};
|
|
51
|
+
//# sourceMappingURL=Field.Input.figma.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["figma","instance","selectedInstance","showLabel","getBoolean","showHelperText","showErrorText","isInvalid","getEnum","true","false","undefined","isDisabled","isInvalidProp","helpers","react","renderProp","isDisabledProp","labelText","findText","traverseInstances","textContent","helperText","errorText","input","findInstance","inputSnippet","type","executeTemplate","example","id","imports","code"],"sourceRoot":"../../../src","sources":["figma/Field.Input.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;AAEvC,MAAMC,SAAS,GAAGF,QAAQ,CAACG,UAAU,CAAC,aAAa,CAAC;AACpD,MAAMC,cAAc,GAAGJ,QAAQ,CAACG,UAAU,CAAC,mBAAmB,CAAC;AAC/D,MAAME,aAAa,GAAGL,QAAQ,CAACG,UAAU,CAAC,kBAAkB,CAAC;;AAE7D;AACA;AACA,MAAMG,SAAS,GAAGN,QAAQ,CAACO,OAAO,CAAC,WAAW,EAAE;EAC9CC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAEC;AACT,CAAC,CAAC;AACF,MAAMC,UAAU,GAAGX,QAAQ,CAACO,OAAO,CAAC,YAAY,EAAE;EAChDC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAEC;AACT,CAAC,CAAC;AAEF,MAAME,aAAa,GAAGb,KAAK,CAACc,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,WAAW,EAAET,SAAS,CAAC;AAC5E,MAAMU,cAAc,GAAGjB,KAAK,CAACc,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,YAAY,EAAEJ,UAAU,CAAC;AAE/E,MAAMM,SAAS,GACbjB,QAAQ,CAACkB,QAAQ,CAAC,SAAS,EAAE;EAC3BC,iBAAiB,EAAE;AACrB,CAAC,CAAC,CACFC,WAAW;AACb,MAAMC,UAAU,GACdrB,QAAQ,CAACkB,QAAQ,CAAC,cAAc,EAAE;EAChCC,iBAAiB,EAAE;AACrB,CAAC,CAAC,CACFC,WAAW;AACb,MAAME,SAAS,GACbtB,QAAQ,CAACkB,QAAQ,CAAC,aAAa,EAAE;EAC/BC,iBAAiB,EAAE;AACrB,CAAC,CAAC,CACFC,WAAW;AAEb,MAAMG,KAAK,GAAGvB,QAAQ,CAACwB,YAAY,CAAC,OAAO,CAAC;AAC5C,IAAIC,YAAyD;AAC7D,IAAIF,KAAK,EAAEG,IAAI,KAAK,UAAU,EAAE;EAC9BD,YAAY,GAAGF,KAAK,CAACI,eAAe,CAAC,CAAC,CAACC,OAAO;AAChD;AAEA,eAAe;EACbC,EAAE,EAAE,aAAa;EACjB;EACA;EACAC,OAAO,EAAE,CAAC,4CAA4C,CAAC;EACvDF,OAAO,EAAE7B,KAAK,CAACgC,IAAI;AACrB,QAAQnB,aAAa,GAAGI,cAAc;AACtC,IAAId,SAAS,GAAGH,KAAK,CAACgC,IAAI,gBAAgBd,SAAS,gBAAgB,GAAG,IAAI;AAC1E,IAAIQ,YAAY;AAChB,IAAI,CAACnB,SAAS,IAAIF,cAAc,GAAGL,KAAK,CAACgC,IAAI,iBAAiBV,UAAU,iBAAiB,GAAG,IAAI;AAChG,IAAIf,SAAS,IAAID,aAAa,GAAGN,KAAK,CAACgC,IAAI,gBAAgBT,SAAS,gBAAgB,GAAG,IAAI;AAC3F;AACA,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-CDS-V2--React-Native?node-id=427-4179
|
|
4
|
+
// source=packages/components/src/components/Field/index.tsx
|
|
5
|
+
// component=Field
|
|
6
|
+
import figma from 'figma';
|
|
7
|
+
const instance = figma.selectedInstance;
|
|
8
|
+
const showLabel = instance.getBoolean('Show Label?');
|
|
9
|
+
const showHelperText = instance.getBoolean('Show Helper Text?');
|
|
10
|
+
const showErrorText = instance.getBoolean('Show Error Text?');
|
|
11
|
+
|
|
12
|
+
// Enum-as-boolean: isInvalid / isDisabled are VARIANT properties in Figma (string values "true"/"false").
|
|
13
|
+
// Map "false" to undefined so renderProp omits them from the snippet.
|
|
14
|
+
const isInvalid = instance.getEnum('isInvalid', {
|
|
15
|
+
true: true,
|
|
16
|
+
false: undefined
|
|
17
|
+
});
|
|
18
|
+
const isDisabled = instance.getEnum('isDisabled', {
|
|
19
|
+
true: true,
|
|
20
|
+
false: undefined
|
|
21
|
+
});
|
|
22
|
+
const isInvalidProp = figma.helpers.react.renderProp('isInvalid', isInvalid);
|
|
23
|
+
const isDisabledProp = figma.helpers.react.renderProp('isDisabled', isDisabled);
|
|
24
|
+
const labelText = instance.findText('{Label}', {
|
|
25
|
+
traverseInstances: true
|
|
26
|
+
}).textContent;
|
|
27
|
+
const helperText = instance.findText('{HelperText}', {
|
|
28
|
+
traverseInstances: true
|
|
29
|
+
}).textContent;
|
|
30
|
+
const errorText = instance.findText('{ErrorText}', {
|
|
31
|
+
traverseInstances: true
|
|
32
|
+
}).textContent;
|
|
33
|
+
const select = instance.findInstance('Select');
|
|
34
|
+
let selectSnippet;
|
|
35
|
+
if (select?.type === 'INSTANCE') {
|
|
36
|
+
selectSnippet = select.executeTemplate().example;
|
|
37
|
+
}
|
|
38
|
+
export default {
|
|
39
|
+
id: 'field-select',
|
|
40
|
+
// Only import Field here; the nested Select template provides its own "import { Select } …" line.
|
|
41
|
+
// Code Connect merges the two separate import statements from the same package automatically.
|
|
42
|
+
imports: ["import { Field } from '@cdx-ui/components'"],
|
|
43
|
+
example: figma.code`
|
|
44
|
+
<Field${isInvalidProp}${isDisabledProp}>
|
|
45
|
+
${showLabel ? figma.code`<Field.Label>${labelText}</Field.Label>` : null}
|
|
46
|
+
${selectSnippet}
|
|
47
|
+
${!isInvalid && showHelperText ? figma.code`<Field.Helper>${helperText}</Field.Helper>` : null}
|
|
48
|
+
${isInvalid && showErrorText ? figma.code`<Field.Error>${errorText}</Field.Error>` : null}
|
|
49
|
+
</Field>`
|
|
50
|
+
};
|
|
51
|
+
//# sourceMappingURL=Field.Select.figma.js.map
|