@cdx-ui/components 0.0.1-beta.7 → 0.0.1-beta.9
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 +6 -0
- package/lib/commonjs/components/Field/FieldLabel.web.js +8 -5
- package/lib/commonjs/components/Field/FieldLabel.web.js.map +1 -1
- package/lib/commonjs/components/Select/SelectTriggerHost.web.js +23 -0
- package/lib/commonjs/components/Select/SelectTriggerHost.web.js.map +1 -1
- package/lib/module/components/Field/FieldLabel.web.js +8 -5
- package/lib/module/components/Field/FieldLabel.web.js.map +1 -1
- package/lib/module/components/Select/SelectTriggerHost.web.js +23 -0
- package/lib/module/components/Select/SelectTriggerHost.web.js.map +1 -1
- package/lib/typescript/components/Field/FieldLabel.web.d.ts.map +1 -1
- package/lib/typescript/components/Select/SelectTriggerHost.web.d.ts +4 -0
- package/lib/typescript/components/Select/SelectTriggerHost.web.d.ts.map +1 -1
- package/package.json +5 -4
- package/src/components/Field/FieldLabel.web.tsx +5 -5
- package/src/components/Select/SelectTriggerHost.web.tsx +28 -1
- package/lib/commonjs/figma/Button.figma.js +0 -69
- package/lib/commonjs/figma/Button.figma.js.map +0 -1
- package/lib/module/figma/Button.figma.js +0 -63
- package/lib/module/figma/Button.figma.js.map +0 -1
- package/lib/typescript/figma/Button.figma.d.ts +0 -8
- package/lib/typescript/figma/Button.figma.d.ts.map +0 -1
package/README.md
CHANGED
|
@@ -66,6 +66,12 @@ For convenience, the package re-exports several core RN components and hooks wit
|
|
|
66
66
|
| `SafeAreaView` | `react-native-safe-area-context` |
|
|
67
67
|
| `useSafeAreaInsets` | `react-native-safe-area-context` |
|
|
68
68
|
|
|
69
|
+
## Figma Code Connect
|
|
70
|
+
|
|
71
|
+
Template files in [`src/figma/`](./src/figma/) map Figma component variants to production CDX UI snippets shown in Figma Dev Mode. These files are excluded from the npm tarball (`!src/figma` in `files`) and published to Figma via CI on pushes to `main`.
|
|
72
|
+
|
|
73
|
+
See the **[Code Connect authoring guide](../../docs/internal/practices/code-connect.md)** for conventions, property mapping patterns, and local workflow.
|
|
74
|
+
|
|
69
75
|
## Testing
|
|
70
76
|
|
|
71
77
|
Tests live in [`__tests__/`](./__tests__/). **Jest** uses the repo-root **`jest.config.js`** with **two projects**: **`rntl`** (jest-expo native + **`@testing-library/react-native`**) for `*.test.tsx`, and **`axe`** (jest-expo web + jsdom + **`@testing-library/react`** + **`jest-axe`**) for `*.axe.test.tsx`.
|
|
@@ -7,15 +7,18 @@ exports.BaseFieldLabel = void 0;
|
|
|
7
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
8
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
9
9
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
10
|
-
// TODO: Why does dataSet need to be decomposed into individual data attributes?
|
|
11
|
-
|
|
12
10
|
/** Real `<label>` so clicking the label focuses the associated control (`htmlFor` → input `id`). */
|
|
13
11
|
const BaseFieldLabel = exports.BaseFieldLabel = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
|
|
12
|
+
// `dataSet` comes from primitives’ web `dataAttributes()` (RNW); do not forward to DOM — React 19 warns.
|
|
13
|
+
const {
|
|
14
|
+
dataSet,
|
|
15
|
+
...rest
|
|
16
|
+
} = props;
|
|
14
17
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
|
|
15
18
|
ref: ref,
|
|
16
|
-
...
|
|
17
|
-
"data-invalid":
|
|
18
|
-
"data-required":
|
|
19
|
+
...rest,
|
|
20
|
+
"data-invalid": dataSet?.invalid,
|
|
21
|
+
"data-required": dataSet?.required
|
|
19
22
|
});
|
|
20
23
|
});
|
|
21
24
|
BaseFieldLabel.displayName = 'BaseFieldLabel';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","BaseFieldLabel","exports","forwardRef","props","ref","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","BaseFieldLabel","exports","forwardRef","props","ref","dataSet","rest","jsx","invalid","required","displayName"],"sourceRoot":"../../../../src","sources":["components/Field/FieldLabel.web.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAA0D,IAAAC,WAAA,GAAAD,OAAA;AAAA,SAAAD,wBAAAG,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAL,uBAAA,YAAAA,CAAAG,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAU1D;AACO,MAAMkB,cAAc,GAAAC,OAAA,CAAAD,cAAA,gBAAG,IAAAE,iBAAU,EAAwC,CAACC,KAAK,EAAEC,GAAG,KAAK;EAC9F;EACA,MAAM;IAAEC,OAAO;IAAE,GAAGC;EAAK,CAAC,GAAGH,KAAK;EAClC,oBACE,IAAAvB,WAAA,CAAA2B,GAAA;IACEH,GAAG,EAAEA,GAAI;IAAA,GACJE,IAAI;IACT,gBAAcD,OAAO,EAAEG,OAAQ;IAC/B,iBAAeH,OAAO,EAAEI;EAAS,CAClC,CAAC;AAEN,CAAC,CAAC;AAEFT,cAAc,CAACU,WAAW,GAAG,gBAAgB","ignoreList":[]}
|
|
@@ -23,6 +23,26 @@ function filterDomProps(rest) {
|
|
|
23
23
|
return Object.fromEntries(entries);
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
+
/**
|
|
27
|
+
* Primitives’ web `dataAttributes()` returns `{ dataSet }` for RNW. This host renders a
|
|
28
|
+
* real `<button>`, so we map `dataSet` to `data-*` DOM attributes (same keys as Uniwind).
|
|
29
|
+
*/
|
|
30
|
+
function dataSetToDomDataAttrs(dataSet) {
|
|
31
|
+
if (!dataSet) {
|
|
32
|
+
return {};
|
|
33
|
+
}
|
|
34
|
+
const out = {};
|
|
35
|
+
for (const key of Object.keys(dataSet)) {
|
|
36
|
+
const v = dataSet[key];
|
|
37
|
+
if (v === undefined) {
|
|
38
|
+
continue;
|
|
39
|
+
}
|
|
40
|
+
const kebab = key.replaceAll(/[A-Z]/g, ch => `-${ch.toLowerCase()}`);
|
|
41
|
+
out[`data-${kebab}`] = typeof v === 'boolean' ? String(v) : v;
|
|
42
|
+
}
|
|
43
|
+
return out;
|
|
44
|
+
}
|
|
45
|
+
|
|
26
46
|
/** UA `<button>` defaults (centered text, inline sizing) fight our flex + `justify-between` layout. */
|
|
27
47
|
const webButtonLayoutStyle = {
|
|
28
48
|
display: 'flex',
|
|
@@ -56,13 +76,16 @@ const SelectTriggerHost = exports.SelectTriggerHost = /*#__PURE__*/(0, _react.fo
|
|
|
56
76
|
style,
|
|
57
77
|
className,
|
|
58
78
|
testID,
|
|
79
|
+
dataSet,
|
|
59
80
|
...rest
|
|
60
81
|
} = props;
|
|
61
82
|
const domProps = filterDomProps(rest);
|
|
83
|
+
const dataAttrProps = dataSetToDomDataAttrs(dataSet);
|
|
62
84
|
const flattened = _reactNative.StyleSheet.flatten(style);
|
|
63
85
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
|
|
64
86
|
ref: ref,
|
|
65
87
|
...domProps,
|
|
88
|
+
...dataAttrProps,
|
|
66
89
|
type: "button",
|
|
67
90
|
disabled: !!disabled,
|
|
68
91
|
className: typeof className === 'string' ? className : undefined,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","OMIT","Set","resolveChildren","children","pressed","filterDomProps","rest","entries","filter","key","fromEntries","webButtonLayoutStyle","display","flexDirection","alignItems","justifyContent","width","minWidth","textAlign","boxSizing","margin","font","lineHeight","WebkitAppearance","appearance","SelectTriggerHost","exports","forwardRef","props","ref","onPress","onPressIn","onPressOut","onHoverIn","onHoverOut","disabled","style","className","testID","domProps","flattened","StyleSheet","flatten","jsx","type","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","OMIT","Set","resolveChildren","children","pressed","filterDomProps","rest","entries","filter","key","fromEntries","dataSetToDomDataAttrs","dataSet","out","keys","v","undefined","kebab","replaceAll","ch","toLowerCase","String","webButtonLayoutStyle","display","flexDirection","alignItems","justifyContent","width","minWidth","textAlign","boxSizing","margin","font","lineHeight","WebkitAppearance","appearance","SelectTriggerHost","exports","forwardRef","props","ref","onPress","onPressIn","onPressOut","onHoverIn","onHoverOut","disabled","style","className","testID","domProps","dataAttrProps","flattened","StyleSheet","flatten","jsx","type","onClick","onPointerDown","onPointerUp","onPointerCancel","onMouseEnter","onMouseLeave","displayName"],"sourceRoot":"../../../../src","sources":["components/Select/SelectTriggerHost.web.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,16 +1,19 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
import React, { forwardRef } from 'react';
|
|
4
|
-
|
|
5
|
-
// TODO: Why does dataSet need to be decomposed into individual data attributes?
|
|
6
4
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
5
|
/** Real `<label>` so clicking the label focuses the associated control (`htmlFor` → input `id`). */
|
|
8
6
|
export const BaseFieldLabel = /*#__PURE__*/forwardRef((props, ref) => {
|
|
7
|
+
// `dataSet` comes from primitives’ web `dataAttributes()` (RNW); do not forward to DOM — React 19 warns.
|
|
8
|
+
const {
|
|
9
|
+
dataSet,
|
|
10
|
+
...rest
|
|
11
|
+
} = props;
|
|
9
12
|
return /*#__PURE__*/_jsx("label", {
|
|
10
13
|
ref: ref,
|
|
11
|
-
...
|
|
12
|
-
"data-invalid":
|
|
13
|
-
"data-required":
|
|
14
|
+
...rest,
|
|
15
|
+
"data-invalid": dataSet?.invalid,
|
|
16
|
+
"data-required": dataSet?.required
|
|
14
17
|
});
|
|
15
18
|
});
|
|
16
19
|
BaseFieldLabel.displayName = 'BaseFieldLabel';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","forwardRef","jsx","_jsx","BaseFieldLabel","props","ref","dataSet","invalid","required","displayName"],"sourceRoot":"../../../../src","sources":["components/Field/FieldLabel.web.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAwB,OAAO
|
|
1
|
+
{"version":3,"names":["React","forwardRef","jsx","_jsx","BaseFieldLabel","props","ref","dataSet","rest","invalid","required","displayName"],"sourceRoot":"../../../../src","sources":["components/Field/FieldLabel.web.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAwB,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAU1D;AACA,OAAO,MAAMC,cAAc,gBAAGH,UAAU,CAAwC,CAACI,KAAK,EAAEC,GAAG,KAAK;EAC9F;EACA,MAAM;IAAEC,OAAO;IAAE,GAAGC;EAAK,CAAC,GAAGH,KAAK;EAClC,oBACEF,IAAA;IACEG,GAAG,EAAEA,GAAI;IAAA,GACJE,IAAI;IACT,gBAAcD,OAAO,EAAEE,OAAQ;IAC/B,iBAAeF,OAAO,EAAEG;EAAS,CAClC,CAAC;AAEN,CAAC,CAAC;AAEFN,cAAc,CAACO,WAAW,GAAG,gBAAgB","ignoreList":[]}
|
|
@@ -18,6 +18,26 @@ function filterDomProps(rest) {
|
|
|
18
18
|
return Object.fromEntries(entries);
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
+
/**
|
|
22
|
+
* Primitives’ web `dataAttributes()` returns `{ dataSet }` for RNW. This host renders a
|
|
23
|
+
* real `<button>`, so we map `dataSet` to `data-*` DOM attributes (same keys as Uniwind).
|
|
24
|
+
*/
|
|
25
|
+
function dataSetToDomDataAttrs(dataSet) {
|
|
26
|
+
if (!dataSet) {
|
|
27
|
+
return {};
|
|
28
|
+
}
|
|
29
|
+
const out = {};
|
|
30
|
+
for (const key of Object.keys(dataSet)) {
|
|
31
|
+
const v = dataSet[key];
|
|
32
|
+
if (v === undefined) {
|
|
33
|
+
continue;
|
|
34
|
+
}
|
|
35
|
+
const kebab = key.replaceAll(/[A-Z]/g, ch => `-${ch.toLowerCase()}`);
|
|
36
|
+
out[`data-${kebab}`] = typeof v === 'boolean' ? String(v) : v;
|
|
37
|
+
}
|
|
38
|
+
return out;
|
|
39
|
+
}
|
|
40
|
+
|
|
21
41
|
/** UA `<button>` defaults (centered text, inline sizing) fight our flex + `justify-between` layout. */
|
|
22
42
|
const webButtonLayoutStyle = {
|
|
23
43
|
display: 'flex',
|
|
@@ -51,13 +71,16 @@ export const SelectTriggerHost = /*#__PURE__*/forwardRef(function SelectTriggerH
|
|
|
51
71
|
style,
|
|
52
72
|
className,
|
|
53
73
|
testID,
|
|
74
|
+
dataSet,
|
|
54
75
|
...rest
|
|
55
76
|
} = props;
|
|
56
77
|
const domProps = filterDomProps(rest);
|
|
78
|
+
const dataAttrProps = dataSetToDomDataAttrs(dataSet);
|
|
57
79
|
const flattened = StyleSheet.flatten(style);
|
|
58
80
|
return /*#__PURE__*/_jsx("button", {
|
|
59
81
|
ref: ref,
|
|
60
82
|
...domProps,
|
|
83
|
+
...dataAttrProps,
|
|
61
84
|
type: "button",
|
|
62
85
|
disabled: !!disabled,
|
|
63
86
|
className: typeof className === 'string' ? className : undefined,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","forwardRef","StyleSheet","jsx","_jsx","OMIT","Set","resolveChildren","children","pressed","filterDomProps","rest","entries","Object","filter","key","has","fromEntries","webButtonLayoutStyle","display","flexDirection","alignItems","justifyContent","width","minWidth","textAlign","boxSizing","margin","font","lineHeight","WebkitAppearance","appearance","SelectTriggerHost","props","ref","onPress","onPressIn","onPressOut","onHoverIn","onHoverOut","disabled","style","className","testID","domProps","flattened","flatten","type","
|
|
1
|
+
{"version":3,"names":["React","forwardRef","StyleSheet","jsx","_jsx","OMIT","Set","resolveChildren","children","pressed","filterDomProps","rest","entries","Object","filter","key","has","fromEntries","dataSetToDomDataAttrs","dataSet","out","keys","v","undefined","kebab","replaceAll","ch","toLowerCase","String","webButtonLayoutStyle","display","flexDirection","alignItems","justifyContent","width","minWidth","textAlign","boxSizing","margin","font","lineHeight","WebkitAppearance","appearance","SelectTriggerHost","props","ref","onPress","onPressIn","onPressOut","onHoverIn","onHoverOut","disabled","style","className","testID","domProps","dataAttrProps","flattened","flatten","type","onClick","e","onPointerDown","onPointerUp","onPointerCancel","onMouseEnter","onMouseLeave","displayName"],"sourceRoot":"../../../../src","sources":["components/Select/SelectTriggerHost.web.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldLabel.web.d.ts","sourceRoot":"","sources":["../../../../src/components/Field/FieldLabel.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"FieldLabel.web.d.ts","sourceRoot":"","sources":["../../../../src/components/Field/FieldLabel.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,sFAAsF;IACtF,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAClC,CAAC;AAEF,oGAAoG;AACpG,eAAO,MAAM,cAAc;cAPf,MAAM;eACL,SAAS;IACpB,sFAAsF;cAC5E,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;0CAehC,CAAC"}
|
|
@@ -2,6 +2,8 @@ import React from 'react';
|
|
|
2
2
|
import type { PressableProps } from 'react-native';
|
|
3
3
|
export type SelectTriggerHostProps = PressableProps & {
|
|
4
4
|
className?: string;
|
|
5
|
+
/** RN Web — from primitives `dataAttributes()` */
|
|
6
|
+
dataSet?: Record<string, boolean | string>;
|
|
5
7
|
};
|
|
6
8
|
/**
|
|
7
9
|
* Native `<button type="button">` so the trigger is HTML-labelable (`<label htmlFor>` focuses it).
|
|
@@ -9,5 +11,7 @@ export type SelectTriggerHostProps = PressableProps & {
|
|
|
9
11
|
*/
|
|
10
12
|
export declare const SelectTriggerHost: React.ForwardRefExoticComponent<PressableProps & {
|
|
11
13
|
className?: string;
|
|
14
|
+
/** RN Web — from primitives `dataAttributes()` */
|
|
15
|
+
dataSet?: Record<string, boolean | string>;
|
|
12
16
|
} & React.RefAttributes<HTMLButtonElement>>;
|
|
13
17
|
//# sourceMappingURL=SelectTriggerHost.web.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectTriggerHost.web.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/SelectTriggerHost.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD,MAAM,MAAM,sBAAsB,GAAG,cAAc,GAAG;
|
|
1
|
+
{"version":3,"file":"SelectTriggerHost.web.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/SelectTriggerHost.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD,MAAM,MAAM,sBAAsB,GAAG,cAAc,GAAG;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,GAAG,MAAM,CAAC,CAAC;CAC5C,CAAC;AA4FF;;;GAGG;AACH,eAAO,MAAM,iBAAiB;gBAnGhB,MAAM;IAClB,kDAAkD;cACxC,MAAM,CAAC,MAAM,EAAE,OAAO,GAAG,MAAM,CAAC;2CAyJ3C,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cdx-ui/components",
|
|
3
|
-
"version": "0.0.1-beta.
|
|
3
|
+
"version": "0.0.1-beta.9",
|
|
4
4
|
"main": "lib/commonjs/index.js",
|
|
5
5
|
"module": "lib/module/index.js",
|
|
6
6
|
"react-native": "src/index.ts",
|
|
@@ -30,6 +30,7 @@
|
|
|
30
30
|
"react-native-builder-bob": {
|
|
31
31
|
"source": "src",
|
|
32
32
|
"output": "lib",
|
|
33
|
+
"exclude": "**/{__tests__,__fixtures__,__mocks__,figma}/**",
|
|
33
34
|
"targets": [
|
|
34
35
|
"commonjs",
|
|
35
36
|
"module",
|
|
@@ -67,9 +68,9 @@
|
|
|
67
68
|
"@gorhom/bottom-sheet": "^5.2.6",
|
|
68
69
|
"class-variance-authority": "^0.7.1",
|
|
69
70
|
"uniwind": "1.6.1",
|
|
70
|
-
"@cdx-ui/primitives": "0.0.1-beta.
|
|
71
|
-
"@cdx-ui/
|
|
72
|
-
"@cdx-ui/
|
|
71
|
+
"@cdx-ui/primitives": "0.0.1-beta.9",
|
|
72
|
+
"@cdx-ui/utils": "0.0.1-beta.9",
|
|
73
|
+
"@cdx-ui/icons": "0.0.1-beta.9"
|
|
73
74
|
},
|
|
74
75
|
"devDependencies": {
|
|
75
76
|
"@types/react": "*",
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import React, { forwardRef, type ReactNode } from 'react';
|
|
2
2
|
import type { ViewProps } from 'react-native';
|
|
3
3
|
|
|
4
|
-
// TODO: Why does dataSet need to be decomposed into individual data attributes?
|
|
5
|
-
|
|
6
4
|
export type BaseFieldLabelProps = ViewProps & {
|
|
7
5
|
htmlFor?: string;
|
|
8
6
|
children?: ReactNode;
|
|
@@ -12,12 +10,14 @@ export type BaseFieldLabelProps = ViewProps & {
|
|
|
12
10
|
|
|
13
11
|
/** Real `<label>` so clicking the label focuses the associated control (`htmlFor` → input `id`). */
|
|
14
12
|
export const BaseFieldLabel = forwardRef<HTMLLabelElement, BaseFieldLabelProps>((props, ref) => {
|
|
13
|
+
// `dataSet` comes from primitives’ web `dataAttributes()` (RNW); do not forward to DOM — React 19 warns.
|
|
14
|
+
const { dataSet, ...rest } = props;
|
|
15
15
|
return (
|
|
16
16
|
<label
|
|
17
17
|
ref={ref}
|
|
18
|
-
{...(
|
|
19
|
-
data-invalid={
|
|
20
|
-
data-required={
|
|
18
|
+
{...(rest as React.LabelHTMLAttributes<HTMLLabelElement>)}
|
|
19
|
+
data-invalid={dataSet?.invalid}
|
|
20
|
+
data-required={dataSet?.required}
|
|
21
21
|
/>
|
|
22
22
|
);
|
|
23
23
|
});
|
|
@@ -2,7 +2,11 @@ import React, { forwardRef } from 'react';
|
|
|
2
2
|
import { StyleSheet } from 'react-native';
|
|
3
3
|
import type { PressableProps } from 'react-native';
|
|
4
4
|
|
|
5
|
-
export type SelectTriggerHostProps = PressableProps & {
|
|
5
|
+
export type SelectTriggerHostProps = PressableProps & {
|
|
6
|
+
className?: string;
|
|
7
|
+
/** RN Web — from primitives `dataAttributes()` */
|
|
8
|
+
dataSet?: Record<string, boolean | string>;
|
|
9
|
+
};
|
|
6
10
|
|
|
7
11
|
/** Props that must not be forwarded to a DOM `<button>`. */
|
|
8
12
|
const OMIT = new Set<string>([
|
|
@@ -57,6 +61,26 @@ function filterDomProps(rest: object): React.ButtonHTMLAttributes<HTMLButtonElem
|
|
|
57
61
|
return Object.fromEntries(entries) as React.ButtonHTMLAttributes<HTMLButtonElement>;
|
|
58
62
|
}
|
|
59
63
|
|
|
64
|
+
/**
|
|
65
|
+
* Primitives’ web `dataAttributes()` returns `{ dataSet }` for RNW. This host renders a
|
|
66
|
+
* real `<button>`, so we map `dataSet` to `data-*` DOM attributes (same keys as Uniwind).
|
|
67
|
+
*/
|
|
68
|
+
function dataSetToDomDataAttrs(dataSet?: Record<string, boolean | string>): Record<string, string> {
|
|
69
|
+
if (!dataSet) {
|
|
70
|
+
return {};
|
|
71
|
+
}
|
|
72
|
+
const out: Record<string, string> = {};
|
|
73
|
+
for (const key of Object.keys(dataSet)) {
|
|
74
|
+
const v = dataSet[key];
|
|
75
|
+
if (v === undefined) {
|
|
76
|
+
continue;
|
|
77
|
+
}
|
|
78
|
+
const kebab = key.replaceAll(/[A-Z]/g, (ch) => `-${ch.toLowerCase()}`);
|
|
79
|
+
out[`data-${kebab}`] = typeof v === 'boolean' ? String(v) : v;
|
|
80
|
+
}
|
|
81
|
+
return out;
|
|
82
|
+
}
|
|
83
|
+
|
|
60
84
|
/** UA `<button>` defaults (centered text, inline sizing) fight our flex + `justify-between` layout. */
|
|
61
85
|
const webButtonLayoutStyle: React.CSSProperties = {
|
|
62
86
|
display: 'flex',
|
|
@@ -91,16 +115,19 @@ export const SelectTriggerHost = forwardRef<HTMLButtonElement, SelectTriggerHost
|
|
|
91
115
|
style,
|
|
92
116
|
className,
|
|
93
117
|
testID,
|
|
118
|
+
dataSet,
|
|
94
119
|
...rest
|
|
95
120
|
} = props;
|
|
96
121
|
|
|
97
122
|
const domProps = filterDomProps(rest);
|
|
123
|
+
const dataAttrProps = dataSetToDomDataAttrs(dataSet);
|
|
98
124
|
const flattened = StyleSheet.flatten(style) as React.CSSProperties | undefined;
|
|
99
125
|
|
|
100
126
|
return (
|
|
101
127
|
<button
|
|
102
128
|
ref={ref}
|
|
103
129
|
{...domProps}
|
|
130
|
+
{...dataAttrProps}
|
|
104
131
|
type="button"
|
|
105
132
|
disabled={!!disabled}
|
|
106
133
|
className={typeof className === 'string' ? className : undefined}
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
var _figma = _interopRequireDefault(require("figma"));
|
|
8
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
9
|
-
// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/branch/LkwnLe2gHRg0vLdfg9Frjs/%E2%AD%90-CDS-V2--React-Native?node-id=119-72
|
|
10
|
-
// source=packages/components/src/components/Button/index.tsx
|
|
11
|
-
// component=Button
|
|
12
|
-
|
|
13
|
-
const instance = _figma.default.selectedInstance;
|
|
14
|
-
|
|
15
|
-
// Variant rename: Figma uses "solid" but code uses "strong" for the filled/primary style.
|
|
16
|
-
// This divergence exists because "strong" better communicates visual weight in the code API
|
|
17
|
-
// while "solid" is the conventional Figma naming.
|
|
18
|
-
const variant = instance.getEnum('variant', {
|
|
19
|
-
solid: 'strong',
|
|
20
|
-
outline: 'outline',
|
|
21
|
-
ghost: 'ghost'
|
|
22
|
-
});
|
|
23
|
-
const color = instance.getEnum('color', {
|
|
24
|
-
action: 'action',
|
|
25
|
-
danger: 'danger'
|
|
26
|
-
});
|
|
27
|
-
const size = instance.getEnum('size', {
|
|
28
|
-
default: 'default',
|
|
29
|
-
small: 'small'
|
|
30
|
-
});
|
|
31
|
-
// Enum-as-boolean: isDisabled is a VARIANT property in Figma (string values "true"/"false")
|
|
32
|
-
// rather than a true BOOLEAN. Map "false" to undefined so the prop is omitted when not disabled.
|
|
33
|
-
const isDisabled = instance.getEnum('isDisabled', {
|
|
34
|
-
true: true,
|
|
35
|
-
false: undefined
|
|
36
|
-
});
|
|
37
|
-
const showLeadingIcon = instance.getBoolean('Show Leading Icon?');
|
|
38
|
-
const showTrailingIcon = instance.getBoolean('Show Trailing Icon?');
|
|
39
|
-
|
|
40
|
-
// Icon slots: Prefer metadata.props.componentName exposed by icon Code Connect templates,
|
|
41
|
-
// which yields a clean identifier (e.g. "Check"). Fall back to executeTemplate().example
|
|
42
|
-
// (renders a placeholder pill when the icon lacks Code Connect).
|
|
43
|
-
const leadingIconResult = instance.getInstanceSwap('Leading Icon')?.executeTemplate();
|
|
44
|
-
const trailingIconResult = instance.getInstanceSwap('Trailing Icon')?.executeTemplate();
|
|
45
|
-
const leadingIconName = leadingIconResult?.metadata?.props?.componentName;
|
|
46
|
-
const trailingIconName = trailingIconResult?.metadata?.props?.componentName;
|
|
47
|
-
const leadingIconSnippet = leadingIconName ?? leadingIconResult?.example;
|
|
48
|
-
const trailingIconSnippet = trailingIconName ?? trailingIconResult?.example;
|
|
49
|
-
const label = instance.findText('Button.Label').textContent;
|
|
50
|
-
|
|
51
|
-
// Include icon imports when resolved via metadata.props (propagated from icon Code Connect)
|
|
52
|
-
const iconImports = [];
|
|
53
|
-
if (showLeadingIcon && leadingIconName) {
|
|
54
|
-
iconImports.push(`import { ${leadingIconName} } from '@cdx-ui/icons'`);
|
|
55
|
-
}
|
|
56
|
-
if (showTrailingIcon && trailingIconName) {
|
|
57
|
-
iconImports.push(`import { ${trailingIconName} } from '@cdx-ui/icons'`);
|
|
58
|
-
}
|
|
59
|
-
var _default = exports.default = {
|
|
60
|
-
id: 'button',
|
|
61
|
-
imports: ["import { Button } from '@cdx-ui/components'", ...iconImports],
|
|
62
|
-
example: _figma.default.code`
|
|
63
|
-
<Button variant="${variant}" color="${color}" size="${size}" isDisabled={${isDisabled}}>
|
|
64
|
-
${showLeadingIcon ? _figma.default.code`<Button.Icon as={${leadingIconSnippet}} />` : null}
|
|
65
|
-
<Button.Label>${label}</Button.Label>
|
|
66
|
-
${showTrailingIcon ? _figma.default.code`<Button.Icon as={${trailingIconSnippet}} />` : null}
|
|
67
|
-
</Button>`
|
|
68
|
-
};
|
|
69
|
-
//# sourceMappingURL=Button.figma.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["_figma","_interopRequireDefault","require","e","__esModule","default","instance","figma","selectedInstance","variant","getEnum","solid","outline","ghost","color","action","danger","size","small","isDisabled","true","false","undefined","showLeadingIcon","getBoolean","showTrailingIcon","leadingIconResult","getInstanceSwap","executeTemplate","trailingIconResult","leadingIconName","metadata","props","componentName","trailingIconName","leadingIconSnippet","example","trailingIconSnippet","label","findText","textContent","iconImports","push","_default","exports","id","imports","code"],"sourceRoot":"../../../src","sources":["figma/Button.figma.ts"],"mappings":";;;;;;AAGA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA0B,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAH1B;AACA;AACA;;AAGA,MAAMG,QAAQ,GAAGC,cAAK,CAACC,gBAAgB;;AAEvC;AACA;AACA;AACA,MAAMC,OAAO,GAAGH,QAAQ,CAACI,OAAO,CAAC,SAAS,EAAE;EAC1CC,KAAK,EAAE,QAAQ;EACfC,OAAO,EAAE,SAAS;EAClBC,KAAK,EAAE;AACT,CAAC,CAAC;AACF,MAAMC,KAAK,GAAGR,QAAQ,CAACI,OAAO,CAAC,OAAO,EAAE;EACtCK,MAAM,EAAE,QAAQ;EAChBC,MAAM,EAAE;AACV,CAAC,CAAC;AACF,MAAMC,IAAI,GAAGX,QAAQ,CAACI,OAAO,CAAC,MAAM,EAAE;EACpCL,OAAO,EAAE,SAAS;EAClBa,KAAK,EAAE;AACT,CAAC,CAAC;AACF;AACA;AACA,MAAMC,UAAU,GAAGb,QAAQ,CAACI,OAAO,CAAC,YAAY,EAAE;EAChDU,IAAI,EAAE,IAAI;EACVC,KAAK,EAAEC;AACT,CAAC,CAAC;AAEF,MAAMC,eAAe,GAAGjB,QAAQ,CAACkB,UAAU,CAAC,oBAAoB,CAAC;AACjE,MAAMC,gBAAgB,GAAGnB,QAAQ,CAACkB,UAAU,CAAC,qBAAqB,CAAC;;AAEnE;AACA;AACA;AACA,MAAME,iBAAiB,GAAGpB,QAAQ,CAACqB,eAAe,CAAC,cAAc,CAAC,EAAEC,eAAe,CAAC,CAAC;AACrF,MAAMC,kBAAkB,GAAGvB,QAAQ,CAACqB,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,GAAIhC,QAAQ,CAACiC,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;AAAC,IAAAS,QAAA,GAAAC,OAAA,CAAAvC,OAAA,GAEc;EACbwC,EAAE,EAAE,QAAQ;EACZC,OAAO,EAAE,CAAC,6CAA6C,EAAE,GAAGL,WAAW,CAAC;EACxEL,OAAO,EAAE7B,cAAK,CAACwC,IAAI;AACrB,mBAAmBtC,OAAO,YAAYK,KAAK,WAAWG,IAAI,iBAAiBE,UAAU;AACrF,IAAII,eAAe,GAAGhB,cAAK,CAACwC,IAAI,oBAAoBZ,kBAAkB,MAAM,GAAG,IAAI;AACnF,kBAAkBG,KAAK;AACvB,IAAIb,gBAAgB,GAAGlB,cAAK,CAACwC,IAAI,oBAAoBV,mBAAmB,MAAM,GAAG,IAAI;AACrF;AACA,CAAC","ignoreList":[]}
|
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/branch/LkwnLe2gHRg0vLdfg9Frjs/%E2%AD%90-CDS-V2--React-Native?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 showLeadingIcon = instance.getBoolean('Show Leading Icon?');
|
|
32
|
-
const showTrailingIcon = instance.getBoolean('Show Trailing Icon?');
|
|
33
|
-
|
|
34
|
-
// Icon slots: Prefer metadata.props.componentName exposed by icon Code Connect templates,
|
|
35
|
-
// which yields a clean identifier (e.g. "Check"). Fall back to executeTemplate().example
|
|
36
|
-
// (renders a placeholder pill when the icon lacks Code Connect).
|
|
37
|
-
const leadingIconResult = instance.getInstanceSwap('Leading Icon')?.executeTemplate();
|
|
38
|
-
const trailingIconResult = instance.getInstanceSwap('Trailing Icon')?.executeTemplate();
|
|
39
|
-
const leadingIconName = leadingIconResult?.metadata?.props?.componentName;
|
|
40
|
-
const trailingIconName = trailingIconResult?.metadata?.props?.componentName;
|
|
41
|
-
const leadingIconSnippet = leadingIconName ?? leadingIconResult?.example;
|
|
42
|
-
const trailingIconSnippet = trailingIconName ?? trailingIconResult?.example;
|
|
43
|
-
const label = instance.findText('Button.Label').textContent;
|
|
44
|
-
|
|
45
|
-
// Include icon imports when resolved via metadata.props (propagated from icon Code Connect)
|
|
46
|
-
const iconImports = [];
|
|
47
|
-
if (showLeadingIcon && leadingIconName) {
|
|
48
|
-
iconImports.push(`import { ${leadingIconName} } from '@cdx-ui/icons'`);
|
|
49
|
-
}
|
|
50
|
-
if (showTrailingIcon && trailingIconName) {
|
|
51
|
-
iconImports.push(`import { ${trailingIconName} } from '@cdx-ui/icons'`);
|
|
52
|
-
}
|
|
53
|
-
export default {
|
|
54
|
-
id: 'button',
|
|
55
|
-
imports: ["import { Button } from '@cdx-ui/components'", ...iconImports],
|
|
56
|
-
example: figma.code`
|
|
57
|
-
<Button variant="${variant}" color="${color}" size="${size}" isDisabled={${isDisabled}}>
|
|
58
|
-
${showLeadingIcon ? figma.code`<Button.Icon as={${leadingIconSnippet}} />` : null}
|
|
59
|
-
<Button.Label>${label}</Button.Label>
|
|
60
|
-
${showTrailingIcon ? figma.code`<Button.Icon as={${trailingIconSnippet}} />` : null}
|
|
61
|
-
</Button>`
|
|
62
|
-
};
|
|
63
|
-
//# sourceMappingURL=Button.figma.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["figma","instance","selectedInstance","variant","getEnum","solid","outline","ghost","color","action","danger","size","default","small","isDisabled","true","false","undefined","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;AAEF,MAAMC,eAAe,GAAGjB,QAAQ,CAACkB,UAAU,CAAC,oBAAoB,CAAC;AACjE,MAAMC,gBAAgB,GAAGnB,QAAQ,CAACkB,UAAU,CAAC,qBAAqB,CAAC;;AAEnE;AACA;AACA;AACA,MAAME,iBAAiB,GAAGpB,QAAQ,CAACqB,eAAe,CAAC,cAAc,CAAC,EAAEC,eAAe,CAAC,CAAC;AACrF,MAAMC,kBAAkB,GAAGvB,QAAQ,CAACqB,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,GAAIhC,QAAQ,CAACiC,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,EAAE/B,KAAK,CAACwC,IAAI;AACrB,mBAAmBrC,OAAO,YAAYK,KAAK,WAAWG,IAAI,iBAAiBG,UAAU;AACrF,IAAII,eAAe,GAAGlB,KAAK,CAACwC,IAAI,oBAAoBV,kBAAkB,MAAM,GAAG,IAAI;AACnF,kBAAkBG,KAAK;AACvB,IAAIb,gBAAgB,GAAGpB,KAAK,CAACwC,IAAI,oBAAoBR,mBAAmB,MAAM,GAAG,IAAI;AACrF;AACA,CAAC","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Button.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Button.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAoD1B,wBASE"}
|