@cdx-ui/components 0.0.1-beta.22 → 0.0.1-beta.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/commonjs/components/Card/index.js +7 -1
- package/lib/commonjs/components/Card/index.js.map +1 -1
- package/lib/commonjs/components/Card/styles.js +12 -2
- package/lib/commonjs/components/Card/styles.js.map +1 -1
- package/lib/commonjs/components/ProgressSegmented/index.js +22 -10
- package/lib/commonjs/components/ProgressSegmented/index.js.map +1 -1
- 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/ProgressSegmented.figma.js +39 -0
- package/lib/commonjs/figma/ProgressSegmented.figma.js.map +1 -0
- package/lib/module/components/Card/index.js +7 -1
- package/lib/module/components/Card/index.js.map +1 -1
- package/lib/module/components/Card/styles.js +12 -2
- package/lib/module/components/Card/styles.js.map +1 -1
- package/lib/module/components/ProgressSegmented/index.js +23 -11
- package/lib/module/components/ProgressSegmented/index.js.map +1 -1
- 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/ProgressSegmented.figma.js +33 -0
- package/lib/module/figma/ProgressSegmented.figma.js.map +1 -0
- package/lib/typescript/components/Card/index.d.ts +2 -2
- package/lib/typescript/components/Card/index.d.ts.map +1 -1
- package/lib/typescript/components/Card/styles.d.ts +4 -1
- package/lib/typescript/components/Card/styles.d.ts.map +1 -1
- package/lib/typescript/components/ProgressSegmented/index.d.ts +14 -3
- package/lib/typescript/components/ProgressSegmented/index.d.ts.map +1 -1
- 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/ProgressSegmented.figma.d.ts +8 -0
- package/lib/typescript/figma/ProgressSegmented.figma.d.ts.map +1 -0
- package/package.json +4 -4
- package/src/components/Card/index.tsx +9 -4
- package/src/components/Card/styles.ts +15 -3
- package/src/components/ProgressSegmented/index.tsx +49 -14
|
@@ -92,9 +92,15 @@ const CardFooter = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
92
92
|
className,
|
|
93
93
|
children,
|
|
94
94
|
style,
|
|
95
|
+
fullBleed,
|
|
95
96
|
...props
|
|
96
97
|
}, ref) => {
|
|
97
|
-
const
|
|
98
|
+
const {
|
|
99
|
+
fullBleed: fullBleedFromContext
|
|
100
|
+
} = useCardStyleContext();
|
|
101
|
+
const computedClassName = (0, _utils.cn)((0, _styles.cardFooterVariants)({
|
|
102
|
+
fullBleed: fullBleed ?? fullBleedFromContext
|
|
103
|
+
}), className);
|
|
98
104
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
99
105
|
ref: ref,
|
|
100
106
|
className: computedClassName,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","require","_reactNative","_utils","_styles","_jsxRuntime","SCOPE","Root","withStyleContext","View","useCardStyleContext","useStyleContext","CardRoot","forwardRef","className","children","style","fullBleed","props","ref","computedClassName","cn","cardRootVariants","jsx","context","displayName","CardHeader","cardHeaderVariants","CardContent","fullBleedFromContext","cardContentVariants","CardFooter","cardFooterVariants","Card","exports","Header","Content","Footer"],"sourceRoot":"../../../../src","sources":["components/Card/index.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;
|
|
1
|
+
{"version":3,"names":["_react","require","_reactNative","_utils","_styles","_jsxRuntime","SCOPE","Root","withStyleContext","View","useCardStyleContext","useStyleContext","CardRoot","forwardRef","className","children","style","fullBleed","props","ref","computedClassName","cn","cardRootVariants","jsx","context","displayName","CardHeader","cardHeaderVariants","CardContent","fullBleedFromContext","cardContentVariants","CardFooter","cardFooterVariants","Card","exports","Header","Content","Footer"],"sourceRoot":"../../../../src","sources":["components/Card/index.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -18,7 +18,7 @@ const cardRootVariants = exports.cardRootVariants = (0, _classVarianceAuthority.
|
|
|
18
18
|
|
|
19
19
|
// ── Header ──────────────────────────────────────────────────
|
|
20
20
|
|
|
21
|
-
const cardHeaderVariants = exports.cardHeaderVariants = (0, _classVarianceAuthority.cva)(['
|
|
21
|
+
const cardHeaderVariants = exports.cardHeaderVariants = (0, _classVarianceAuthority.cva)(['border-t-8 border-t-surface-brand-strong', 'border-b border-solid border-b-stroke-secondary', 'flex-row items-center justify-between gap-0.5', 'px-5 py-3']);
|
|
22
22
|
|
|
23
23
|
// ── Title ───────────────────────────────────────────────────
|
|
24
24
|
|
|
@@ -36,5 +36,15 @@ const cardContentVariants = exports.cardContentVariants = (0, _classVarianceAuth
|
|
|
36
36
|
|
|
37
37
|
// ── Footer ──────────────────────────────────────────────────
|
|
38
38
|
|
|
39
|
-
const cardFooterVariants = exports.cardFooterVariants = (0, _classVarianceAuthority.cva)(['
|
|
39
|
+
const cardFooterVariants = exports.cardFooterVariants = (0, _classVarianceAuthority.cva)(['flex-col items-stretch gap-2'], {
|
|
40
|
+
variants: {
|
|
41
|
+
fullBleed: {
|
|
42
|
+
true: 'p-5',
|
|
43
|
+
false: 'px-5 pb-5 pt-0'
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
defaultVariants: {
|
|
47
|
+
fullBleed: false
|
|
48
|
+
}
|
|
49
|
+
});
|
|
40
50
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_classVarianceAuthority","require","cardRootVariants","exports","cva","variants","fullBleed","true","false","cardHeaderVariants","cardTitleVariants","cardContentVariants","cardFooterVariants"],"sourceRoot":"../../../../src","sources":["components/Card/styles.ts"],"mappings":";;;;;;AAAA,IAAAA,uBAAA,GAAAC,OAAA;AAEA;;AAEO,MAAMC,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAG,IAAAE,2BAAG,EACjC,CACE,oBAAoB,EACpB,gCAAgC,EAChC,wCAAwC,EACxC,iBAAiB,CAClB,EACD;EACEC,QAAQ,EAAE;IACRC,SAAS,EAAE;MACTC,IAAI,EAAE,EAAE;MACRC,KAAK,EAAE;IACT;EACF;AACF,CACF,CAAC;;AAED;;AAEO,MAAMC,kBAAkB,GAAAN,OAAA,CAAAM,kBAAA,GAAG,IAAAL,2BAAG,EAAC,CACpC,iDAAiD,EACjD,
|
|
1
|
+
{"version":3,"names":["_classVarianceAuthority","require","cardRootVariants","exports","cva","variants","fullBleed","true","false","cardHeaderVariants","cardTitleVariants","cardContentVariants","cardFooterVariants","defaultVariants"],"sourceRoot":"../../../../src","sources":["components/Card/styles.ts"],"mappings":";;;;;;AAAA,IAAAA,uBAAA,GAAAC,OAAA;AAEA;;AAEO,MAAMC,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAG,IAAAE,2BAAG,EACjC,CACE,oBAAoB,EACpB,gCAAgC,EAChC,wCAAwC,EACxC,iBAAiB,CAClB,EACD;EACEC,QAAQ,EAAE;IACRC,SAAS,EAAE;MACTC,IAAI,EAAE,EAAE;MACRC,KAAK,EAAE;IACT;EACF;AACF,CACF,CAAC;;AAED;;AAEO,MAAMC,kBAAkB,GAAAN,OAAA,CAAAM,kBAAA,GAAG,IAAAL,2BAAG,EAAC,CACpC,0CAA0C,EAC1C,iDAAiD,EACjD,+CAA+C,EAC/C,WAAW,CACZ,CAAC;;AAEF;;AAEO,MAAMM,iBAAiB,GAAAP,OAAA,CAAAO,iBAAA,GAAG,IAAAN,2BAAG,EAAC,CAAC,QAAQ,CAAC,CAAC;;AAEhD;;AAEO,MAAMO,mBAAmB,GAAAR,OAAA,CAAAQ,mBAAA,GAAG,IAAAP,2BAAG,EAAC,CAAC,sBAAsB,EAAE,KAAK,CAAC,EAAE;EACtEC,QAAQ,EAAE;IACRC,SAAS,EAAE;MACTC,IAAI,EAAE;IACR;EACF;AACF,CAAC,CAAC;;AAEF;;AAEO,MAAMK,kBAAkB,GAAAT,OAAA,CAAAS,kBAAA,GAAG,IAAAR,2BAAG,EAAC,CAAC,8BAA8B,CAAC,EAAE;EACtEC,QAAQ,EAAE;IACRC,SAAS,EAAE;MACTC,IAAI,EAAE,KAAK;MACXC,KAAK,EAAE;IACT;EACF,CAAC;EACDK,eAAe,EAAE;IACfP,SAAS,EAAE;EACb;AACF,CAAC,CAAC","ignoreList":[]}
|
|
@@ -9,19 +9,29 @@ var _reactNative = require("react-native");
|
|
|
9
9
|
var _utils = require("@cdx-ui/utils");
|
|
10
10
|
var _styles = require("./styles");
|
|
11
11
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
12
|
+
/* `ProgressSegmentedProps.total` remains in the public API until the next major release. */
|
|
13
|
+
/* eslint-disable @typescript-eslint/no-deprecated */
|
|
14
|
+
|
|
12
15
|
const ProgressSegmented = exports.ProgressSegmented = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
13
16
|
step,
|
|
14
|
-
|
|
17
|
+
segments,
|
|
18
|
+
total,
|
|
15
19
|
isStepComplete = false,
|
|
16
20
|
getAccessibilityText,
|
|
17
21
|
className,
|
|
18
22
|
accessibilityLabel = 'Progress',
|
|
19
23
|
...props
|
|
20
24
|
}, ref) => {
|
|
21
|
-
const
|
|
22
|
-
|
|
25
|
+
const segmentCount = segments ?? total ?? 5;
|
|
26
|
+
(0, _react.useEffect)(() => {
|
|
27
|
+
if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && total !== undefined && segments === undefined) {
|
|
28
|
+
console.warn('[ProgressSegmented] The `total` prop is deprecated and will be removed in a future major release. Use `segments` instead.');
|
|
29
|
+
}
|
|
30
|
+
}, [total, segments]);
|
|
31
|
+
const clampedStep = Math.max(0, Math.min(step, segmentCount));
|
|
32
|
+
const segmentStates = (0, _react.useMemo)(() => {
|
|
23
33
|
return Array.from({
|
|
24
|
-
length:
|
|
34
|
+
length: segmentCount
|
|
25
35
|
}, (_, index) => {
|
|
26
36
|
const segmentIndex = index + 1;
|
|
27
37
|
let state = 'incomplete';
|
|
@@ -32,12 +42,12 @@ const ProgressSegmented = exports.ProgressSegmented = /*#__PURE__*/(0, _react.fo
|
|
|
32
42
|
}
|
|
33
43
|
return state;
|
|
34
44
|
});
|
|
35
|
-
}, [
|
|
36
|
-
let accessibilityText = `Step ${String(clampedStep)} of ${String(
|
|
45
|
+
}, [segmentCount, clampedStep, isStepComplete]);
|
|
46
|
+
let accessibilityText = `Step ${String(clampedStep)} of ${String(segmentCount)}`;
|
|
37
47
|
if (getAccessibilityText) {
|
|
38
|
-
accessibilityText = getAccessibilityText(clampedStep,
|
|
48
|
+
accessibilityText = getAccessibilityText(clampedStep, segmentCount, isStepComplete);
|
|
39
49
|
} else if (isStepComplete) {
|
|
40
|
-
accessibilityText = `Step ${String(clampedStep)} of ${String(
|
|
50
|
+
accessibilityText = `Step ${String(clampedStep)} of ${String(segmentCount)}, completed`;
|
|
41
51
|
}
|
|
42
52
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
43
53
|
ref: ref,
|
|
@@ -45,13 +55,13 @@ const ProgressSegmented = exports.ProgressSegmented = /*#__PURE__*/(0, _react.fo
|
|
|
45
55
|
accessibilityLabel: accessibilityLabel,
|
|
46
56
|
accessibilityValue: {
|
|
47
57
|
min: 0,
|
|
48
|
-
max:
|
|
58
|
+
max: segmentCount,
|
|
49
59
|
now: clampedStep,
|
|
50
60
|
text: accessibilityText
|
|
51
61
|
},
|
|
52
62
|
className: (0, _utils.cn)((0, _styles.progressSegmentedVariants)(), className),
|
|
53
63
|
...props,
|
|
54
|
-
children:
|
|
64
|
+
children: segmentStates.map((state, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
55
65
|
className: (0, _utils.cn)((0, _styles.segmentVariants)({
|
|
56
66
|
state
|
|
57
67
|
}))
|
|
@@ -59,4 +69,6 @@ const ProgressSegmented = exports.ProgressSegmented = /*#__PURE__*/(0, _react.fo
|
|
|
59
69
|
});
|
|
60
70
|
});
|
|
61
71
|
ProgressSegmented.displayName = 'ProgressSegmented';
|
|
72
|
+
|
|
73
|
+
/* eslint-enable @typescript-eslint/no-deprecated */
|
|
62
74
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","require","_reactNative","_utils","_styles","_jsxRuntime","ProgressSegmented","exports","forwardRef","step","total","isStepComplete","getAccessibilityText","className","accessibilityLabel","props","ref","clampedStep","Math","max","min","
|
|
1
|
+
{"version":3,"names":["_react","require","_reactNative","_utils","_styles","_jsxRuntime","ProgressSegmented","exports","forwardRef","step","segments","total","isStepComplete","getAccessibilityText","className","accessibilityLabel","props","ref","segmentCount","useEffect","process","env","NODE_ENV","undefined","console","warn","clampedStep","Math","max","min","segmentStates","useMemo","Array","from","length","_","index","segmentIndex","state","accessibilityText","String","jsx","View","accessibilityRole","accessibilityValue","now","text","cn","progressSegmentedVariants","children","map","segmentVariants","displayName"],"sourceRoot":"../../../../src","sources":["components/ProgressSegmented/index.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,28 @@
|
|
|
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/%E2%AD%90-Forge-DS--React-Native-Components?node-id=455-178
|
|
10
|
+
// source=packages/components/src/components/Card/index.tsx
|
|
11
|
+
// component=Card.Header
|
|
12
|
+
|
|
13
|
+
const instance = _figma.default.selectedInstance;
|
|
14
|
+
const showActions = instance.getBoolean('Show Actions?');
|
|
15
|
+
const actionsSlot = instance.getSlot('Actions');
|
|
16
|
+
const title = instance.findText('{Title}').textContent;
|
|
17
|
+
const actions = showActions && actionsSlot ? _figma.default.helpers.react.renderChildren(actionsSlot) : null;
|
|
18
|
+
var _default = exports.default = {
|
|
19
|
+
id: 'card-header',
|
|
20
|
+
// Must match Card.figma.ts when the card nests this template (identical strings → deduped imports).
|
|
21
|
+
imports: ["import { Card, Heading } from '@cdx-ui/components'"],
|
|
22
|
+
example: _figma.default.code`
|
|
23
|
+
<Card.Header>
|
|
24
|
+
<Heading size="sm">${title}</Heading>
|
|
25
|
+
${actions}
|
|
26
|
+
</Card.Header>`
|
|
27
|
+
};
|
|
28
|
+
//# sourceMappingURL=Card.Header.figma.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_figma","_interopRequireDefault","require","e","__esModule","default","instance","figma","selectedInstance","showActions","getBoolean","actionsSlot","getSlot","title","findText","textContent","actions","helpers","react","renderChildren","_default","exports","id","imports","example","code"],"sourceRoot":"../../../src","sources":["figma/Card.Header.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,MAAMC,WAAW,GAAGH,QAAQ,CAACI,UAAU,CAAC,eAAe,CAAC;AACxD,MAAMC,WAAW,GAAGL,QAAQ,CAACM,OAAO,CAAC,SAAS,CAAC;AAC/C,MAAMC,KAAK,GAAIP,QAAQ,CAACQ,QAAQ,CAAC,SAAS,CAAC,CAAgCC,WAAW;AAEtF,MAAMC,OAAO,GAAGP,WAAW,IAAIE,WAAW,GAAGJ,cAAK,CAACU,OAAO,CAACC,KAAK,CAACC,cAAc,CAACR,WAAW,CAAC,GAAG,IAAI;AAAC,IAAAS,QAAA,GAAAC,OAAA,CAAAhB,OAAA,GAErF;EACbiB,EAAE,EAAE,aAAa;EACjB;EACAC,OAAO,EAAE,CAAC,oDAAoD,CAAC;EAC/DC,OAAO,EAAEjB,cAAK,CAACkB,IAAI;AACrB;AACA,uBAAuBZ,KAAK;AAC5B,IAAIG,OAAO;AACX;AACA,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,42 @@
|
|
|
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/%E2%AD%90-Forge-DS--React-Native-Components?node-id=456-14
|
|
10
|
+
// source=packages/components/src/components/Card/index.tsx
|
|
11
|
+
// component=Card
|
|
12
|
+
|
|
13
|
+
const instance = _figma.default.selectedInstance;
|
|
14
|
+
|
|
15
|
+
// VARIANT property uses "true" / "false" strings — omit prop when not full bleed.
|
|
16
|
+
const fullBleed = instance.getEnum('fullBleed', {
|
|
17
|
+
true: true,
|
|
18
|
+
false: undefined
|
|
19
|
+
});
|
|
20
|
+
const showHeader = instance.getBoolean('Show Header?');
|
|
21
|
+
const showFooter = instance.getBoolean('Show Footer?');
|
|
22
|
+
const headerLayer = instance.findInstance('Card.Header');
|
|
23
|
+
const headerSnippet = showHeader && headerLayer?.type === 'INSTANCE' ? headerLayer.executeTemplate().example : null;
|
|
24
|
+
const contentSlot = instance.getSlot('Card.Content');
|
|
25
|
+
const footerSlot = instance.getSlot('Card.Footer');
|
|
26
|
+
const contentChildren = contentSlot ? _figma.default.helpers.react.renderChildren(contentSlot) : null;
|
|
27
|
+
const footerChildren = footerSlot ? _figma.default.helpers.react.renderChildren(footerSlot) : null;
|
|
28
|
+
|
|
29
|
+
// When the header shows: use the exact same import string as Card.Header.figma.ts (Code Connect
|
|
30
|
+
// allows only `import … from 'figma'` in template files; duplicate literals are required for dedupe).
|
|
31
|
+
const componentImport = showHeader ? "import { Card, Heading } from '@cdx-ui/components'" : `import { Card } from '@cdx-ui/components'`;
|
|
32
|
+
var _default = exports.default = {
|
|
33
|
+
id: 'card',
|
|
34
|
+
imports: [componentImport],
|
|
35
|
+
example: _figma.default.code`
|
|
36
|
+
<Card fullBleed={${fullBleed}}>
|
|
37
|
+
${headerSnippet}
|
|
38
|
+
<Card.Content>${contentChildren}</Card.Content>
|
|
39
|
+
${showFooter ? _figma.default.code`<Card.Footer>${footerChildren}</Card.Footer>` : null}
|
|
40
|
+
</Card>`
|
|
41
|
+
};
|
|
42
|
+
//# sourceMappingURL=Card.figma.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_figma","_interopRequireDefault","require","e","__esModule","default","instance","figma","selectedInstance","fullBleed","getEnum","true","false","undefined","showHeader","getBoolean","showFooter","headerLayer","findInstance","headerSnippet","type","executeTemplate","example","contentSlot","getSlot","footerSlot","contentChildren","helpers","react","renderChildren","footerChildren","componentImport","_default","exports","id","imports","code"],"sourceRoot":"../../../src","sources":["figma/Card.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,MAAMC,SAAS,GAAGH,QAAQ,CAACI,OAAO,CAAC,WAAW,EAAE;EAC9CC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAEC;AACT,CAAC,CAAC;AAEF,MAAMC,UAAU,GAAGR,QAAQ,CAACS,UAAU,CAAC,cAAc,CAAC;AACtD,MAAMC,UAAU,GAAGV,QAAQ,CAACS,UAAU,CAAC,cAAc,CAAC;AAEtD,MAAME,WAAW,GAAGX,QAAQ,CAACY,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,GAAGjB,QAAQ,CAACkB,OAAO,CAAC,cAAc,CAAC;AACpD,MAAMC,UAAU,GAAGnB,QAAQ,CAACkB,OAAO,CAAC,aAAa,CAAC;AAElD,MAAME,eAAe,GAAGH,WAAW,GAAGhB,cAAK,CAACoB,OAAO,CAACC,KAAK,CAACC,cAAc,CAACN,WAAW,CAAC,GAAG,IAAI;AAE5F,MAAMO,cAAc,GAAGL,UAAU,GAAGlB,cAAK,CAACoB,OAAO,CAACC,KAAK,CAACC,cAAc,CAACJ,UAAU,CAAC,GAAG,IAAI;;AAEzF;AACA;AACA,MAAMM,eAAe,GAAGjB,UAAU,GAC9B,oDAAoD,GACpD,2CAA2C;AAAC,IAAAkB,QAAA,GAAAC,OAAA,CAAA5B,OAAA,GAEjC;EACb6B,EAAE,EAAE,MAAM;EACVC,OAAO,EAAE,CAACJ,eAAe,CAAC;EAC1BT,OAAO,EAAEf,cAAK,CAAC6B,IAAI;AACrB,mBAAmB3B,SAAS;AAC5B,IAAIU,aAAa;AACjB,kBAAkBO,eAAe;AACjC,IAAIV,UAAU,GAAGT,cAAK,CAAC6B,IAAI,gBAAgBN,cAAc,gBAAgB,GAAG,IAAI;AAChF;AACA,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,39 @@
|
|
|
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/%E2%AD%90-Forge-DS--React-Native-Components?node-id=449-449
|
|
10
|
+
// source=packages/components/src/components/ProgressSegmented/index.tsx
|
|
11
|
+
// component=ProgressSegmented
|
|
12
|
+
|
|
13
|
+
const instance = _figma.default.selectedInstance;
|
|
14
|
+
const segmentsCount = instance.getEnum('segments', {
|
|
15
|
+
'2': 2,
|
|
16
|
+
'3': 3,
|
|
17
|
+
'4': 4,
|
|
18
|
+
'5': 5,
|
|
19
|
+
'6': 6
|
|
20
|
+
});
|
|
21
|
+
|
|
22
|
+
// Figma `step=complete` maps to `isStepComplete` on the last step (all segments filled).
|
|
23
|
+
const stepRaw = instance.getEnum('step', {
|
|
24
|
+
'1': '1',
|
|
25
|
+
'2': '2',
|
|
26
|
+
'3': '3',
|
|
27
|
+
'4': '4',
|
|
28
|
+
'5': '5',
|
|
29
|
+
'6': '6',
|
|
30
|
+
complete: 'complete'
|
|
31
|
+
});
|
|
32
|
+
const isStepComplete = stepRaw === 'complete';
|
|
33
|
+
const step = isStepComplete ? segmentsCount : Number(stepRaw);
|
|
34
|
+
var _default = exports.default = {
|
|
35
|
+
id: 'progress-segmented',
|
|
36
|
+
imports: ["import { ProgressSegmented } from '@cdx-ui/components'"],
|
|
37
|
+
example: _figma.default.code`<ProgressSegmented segments={${segmentsCount}} step={${step}}${isStepComplete ? _figma.default.code` isStepComplete` : _figma.default.code``} />`
|
|
38
|
+
};
|
|
39
|
+
//# sourceMappingURL=ProgressSegmented.figma.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_figma","_interopRequireDefault","require","e","__esModule","default","instance","figma","selectedInstance","segmentsCount","getEnum","stepRaw","complete","isStepComplete","step","Number","_default","exports","id","imports","example","code"],"sourceRoot":"../../../src","sources":["figma/ProgressSegmented.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,MAAMC,aAAa,GAAGH,QAAQ,CAACI,OAAO,CAAC,UAAU,EAAE;EACjD,GAAG,EAAE,CAAC;EACN,GAAG,EAAE,CAAC;EACN,GAAG,EAAE,CAAC;EACN,GAAG,EAAE,CAAC;EACN,GAAG,EAAE;AACP,CAAC,CAAC;;AAEF;AACA,MAAMC,OAAO,GAAGL,QAAQ,CAACI,OAAO,CAAC,MAAM,EAAE;EACvC,GAAG,EAAE,GAAG;EACR,GAAG,EAAE,GAAG;EACR,GAAG,EAAE,GAAG;EACR,GAAG,EAAE,GAAG;EACR,GAAG,EAAE,GAAG;EACR,GAAG,EAAE,GAAG;EACRE,QAAQ,EAAE;AACZ,CAAC,CAAC;AAEF,MAAMC,cAAc,GAAGF,OAAO,KAAK,UAAU;AAC7C,MAAMG,IAAI,GAAGD,cAAc,GAAGJ,aAAa,GAAGM,MAAM,CAACJ,OAAO,CAAC;AAAC,IAAAK,QAAA,GAAAC,OAAA,CAAAZ,OAAA,GAE/C;EACba,EAAE,EAAE,oBAAoB;EACxBC,OAAO,EAAE,CAAC,wDAAwD,CAAC;EACnEC,OAAO,EAAEb,cAAK,CAACc,IAAI,gCAAgCZ,aAAa,WAAWK,IAAI,IAC7ED,cAAc,GAAGN,cAAK,CAACc,IAAI,iBAAiB,GAAGd,cAAK,CAACc,IAAI,EAAE;AAE/D,CAAC","ignoreList":[]}
|
|
@@ -89,9 +89,15 @@ const CardFooter = /*#__PURE__*/forwardRef(({
|
|
|
89
89
|
className,
|
|
90
90
|
children,
|
|
91
91
|
style,
|
|
92
|
+
fullBleed,
|
|
92
93
|
...props
|
|
93
94
|
}, ref) => {
|
|
94
|
-
const
|
|
95
|
+
const {
|
|
96
|
+
fullBleed: fullBleedFromContext
|
|
97
|
+
} = useCardStyleContext();
|
|
98
|
+
const computedClassName = cn(cardFooterVariants({
|
|
99
|
+
fullBleed: fullBleed ?? fullBleedFromContext
|
|
100
|
+
}), className);
|
|
95
101
|
return /*#__PURE__*/_jsx(View, {
|
|
96
102
|
ref: ref,
|
|
97
103
|
className: computedClassName,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["forwardRef","View","cn","useStyleContext","withStyleContext","cardContentVariants","cardFooterVariants","cardHeaderVariants","cardRootVariants","jsx","_jsx","SCOPE","Root","useCardStyleContext","CardRoot","className","children","style","fullBleed","props","ref","computedClassName","context","displayName","CardHeader","CardContent","fullBleedFromContext","CardFooter","Card","Header","Content","Footer"],"sourceRoot":"../../../../src","sources":["components/Card/index.tsx"],"mappings":";;AAAA,SAASA,UAAU,QAAwB,OAAO;AAClD,SAASC,IAAI,QAAwB,cAAc;AACnD,SAASC,EAAE,EAAEC,eAAe,EAAEC,gBAAgB,QAAQ,eAAe;AACrE,SACEC,mBAAmB,EACnBC,kBAAkB,EAClBC,kBAAkB,EAClBC,gBAAgB,
|
|
1
|
+
{"version":3,"names":["forwardRef","View","cn","useStyleContext","withStyleContext","cardContentVariants","cardFooterVariants","cardHeaderVariants","cardRootVariants","jsx","_jsx","SCOPE","Root","useCardStyleContext","CardRoot","className","children","style","fullBleed","props","ref","computedClassName","context","displayName","CardHeader","CardContent","fullBleedFromContext","CardFooter","Card","Header","Content","Footer"],"sourceRoot":"../../../../src","sources":["components/Card/index.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -15,7 +15,7 @@ export const cardRootVariants = cva(['bg-surface-primary', 'border border-stroke
|
|
|
15
15
|
|
|
16
16
|
// ── Header ──────────────────────────────────────────────────
|
|
17
17
|
|
|
18
|
-
export const cardHeaderVariants = cva(['
|
|
18
|
+
export const cardHeaderVariants = cva(['border-t-8 border-t-surface-brand-strong', 'border-b border-solid border-b-stroke-secondary', 'flex-row items-center justify-between gap-0.5', 'px-5 py-3']);
|
|
19
19
|
|
|
20
20
|
// ── Title ───────────────────────────────────────────────────
|
|
21
21
|
|
|
@@ -33,5 +33,15 @@ export const cardContentVariants = cva(['text-content-primary', 'p-5'], {
|
|
|
33
33
|
|
|
34
34
|
// ── Footer ──────────────────────────────────────────────────
|
|
35
35
|
|
|
36
|
-
export const cardFooterVariants = cva(['
|
|
36
|
+
export const cardFooterVariants = cva(['flex-col items-stretch gap-2'], {
|
|
37
|
+
variants: {
|
|
38
|
+
fullBleed: {
|
|
39
|
+
true: 'p-5',
|
|
40
|
+
false: 'px-5 pb-5 pt-0'
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
defaultVariants: {
|
|
44
|
+
fullBleed: false
|
|
45
|
+
}
|
|
46
|
+
});
|
|
37
47
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["cva","cardRootVariants","variants","fullBleed","true","false","cardHeaderVariants","cardTitleVariants","cardContentVariants","cardFooterVariants"],"sourceRoot":"../../../../src","sources":["components/Card/styles.ts"],"mappings":";;AAAA,SAASA,GAAG,QAAsB,0BAA0B;;AAE5D;;AAEA,OAAO,MAAMC,gBAAgB,GAAGD,GAAG,CACjC,CACE,oBAAoB,EACpB,gCAAgC,EAChC,wCAAwC,EACxC,iBAAiB,CAClB,EACD;EACEE,QAAQ,EAAE;IACRC,SAAS,EAAE;MACTC,IAAI,EAAE,EAAE;MACRC,KAAK,EAAE;IACT;EACF;AACF,CACF,CAAC;;AAED;;AAEA,OAAO,MAAMC,kBAAkB,GAAGN,GAAG,CAAC,CACpC,iDAAiD,EACjD,
|
|
1
|
+
{"version":3,"names":["cva","cardRootVariants","variants","fullBleed","true","false","cardHeaderVariants","cardTitleVariants","cardContentVariants","cardFooterVariants","defaultVariants"],"sourceRoot":"../../../../src","sources":["components/Card/styles.ts"],"mappings":";;AAAA,SAASA,GAAG,QAAsB,0BAA0B;;AAE5D;;AAEA,OAAO,MAAMC,gBAAgB,GAAGD,GAAG,CACjC,CACE,oBAAoB,EACpB,gCAAgC,EAChC,wCAAwC,EACxC,iBAAiB,CAClB,EACD;EACEE,QAAQ,EAAE;IACRC,SAAS,EAAE;MACTC,IAAI,EAAE,EAAE;MACRC,KAAK,EAAE;IACT;EACF;AACF,CACF,CAAC;;AAED;;AAEA,OAAO,MAAMC,kBAAkB,GAAGN,GAAG,CAAC,CACpC,0CAA0C,EAC1C,iDAAiD,EACjD,+CAA+C,EAC/C,WAAW,CACZ,CAAC;;AAEF;;AAEA,OAAO,MAAMO,iBAAiB,GAAGP,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAC;;AAEhD;;AAEA,OAAO,MAAMQ,mBAAmB,GAAGR,GAAG,CAAC,CAAC,sBAAsB,EAAE,KAAK,CAAC,EAAE;EACtEE,QAAQ,EAAE;IACRC,SAAS,EAAE;MACTC,IAAI,EAAE;IACR;EACF;AACF,CAAC,CAAC;;AAEF;;AAEA,OAAO,MAAMK,kBAAkB,GAAGT,GAAG,CAAC,CAAC,8BAA8B,CAAC,EAAE;EACtEE,QAAQ,EAAE;IACRC,SAAS,EAAE;MACTC,IAAI,EAAE,KAAK;MACXC,KAAK,EAAE;IACT;EACF,CAAC;EACDK,eAAe,EAAE;IACfP,SAAS,EAAE;EACb;AACF,CAAC,CAAC","ignoreList":[]}
|
|
@@ -1,23 +1,33 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
import { forwardRef, useMemo } from 'react';
|
|
3
|
+
import { forwardRef, useEffect, useMemo } from 'react';
|
|
4
4
|
import { View } from 'react-native';
|
|
5
5
|
import { cn } from '@cdx-ui/utils';
|
|
6
6
|
import { progressSegmentedVariants, segmentVariants } from './styles';
|
|
7
|
+
|
|
8
|
+
/* `ProgressSegmentedProps.total` remains in the public API until the next major release. */
|
|
9
|
+
/* eslint-disable @typescript-eslint/no-deprecated */
|
|
7
10
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
11
|
export const ProgressSegmented = /*#__PURE__*/forwardRef(({
|
|
9
12
|
step,
|
|
10
|
-
|
|
13
|
+
segments,
|
|
14
|
+
total,
|
|
11
15
|
isStepComplete = false,
|
|
12
16
|
getAccessibilityText,
|
|
13
17
|
className,
|
|
14
18
|
accessibilityLabel = 'Progress',
|
|
15
19
|
...props
|
|
16
20
|
}, ref) => {
|
|
17
|
-
const
|
|
18
|
-
|
|
21
|
+
const segmentCount = segments ?? total ?? 5;
|
|
22
|
+
useEffect(() => {
|
|
23
|
+
if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && total !== undefined && segments === undefined) {
|
|
24
|
+
console.warn('[ProgressSegmented] The `total` prop is deprecated and will be removed in a future major release. Use `segments` instead.');
|
|
25
|
+
}
|
|
26
|
+
}, [total, segments]);
|
|
27
|
+
const clampedStep = Math.max(0, Math.min(step, segmentCount));
|
|
28
|
+
const segmentStates = useMemo(() => {
|
|
19
29
|
return Array.from({
|
|
20
|
-
length:
|
|
30
|
+
length: segmentCount
|
|
21
31
|
}, (_, index) => {
|
|
22
32
|
const segmentIndex = index + 1;
|
|
23
33
|
let state = 'incomplete';
|
|
@@ -28,12 +38,12 @@ export const ProgressSegmented = /*#__PURE__*/forwardRef(({
|
|
|
28
38
|
}
|
|
29
39
|
return state;
|
|
30
40
|
});
|
|
31
|
-
}, [
|
|
32
|
-
let accessibilityText = `Step ${String(clampedStep)} of ${String(
|
|
41
|
+
}, [segmentCount, clampedStep, isStepComplete]);
|
|
42
|
+
let accessibilityText = `Step ${String(clampedStep)} of ${String(segmentCount)}`;
|
|
33
43
|
if (getAccessibilityText) {
|
|
34
|
-
accessibilityText = getAccessibilityText(clampedStep,
|
|
44
|
+
accessibilityText = getAccessibilityText(clampedStep, segmentCount, isStepComplete);
|
|
35
45
|
} else if (isStepComplete) {
|
|
36
|
-
accessibilityText = `Step ${String(clampedStep)} of ${String(
|
|
46
|
+
accessibilityText = `Step ${String(clampedStep)} of ${String(segmentCount)}, completed`;
|
|
37
47
|
}
|
|
38
48
|
return /*#__PURE__*/_jsx(View, {
|
|
39
49
|
ref: ref,
|
|
@@ -41,13 +51,13 @@ export const ProgressSegmented = /*#__PURE__*/forwardRef(({
|
|
|
41
51
|
accessibilityLabel: accessibilityLabel,
|
|
42
52
|
accessibilityValue: {
|
|
43
53
|
min: 0,
|
|
44
|
-
max:
|
|
54
|
+
max: segmentCount,
|
|
45
55
|
now: clampedStep,
|
|
46
56
|
text: accessibilityText
|
|
47
57
|
},
|
|
48
58
|
className: cn(progressSegmentedVariants(), className),
|
|
49
59
|
...props,
|
|
50
|
-
children:
|
|
60
|
+
children: segmentStates.map((state, index) => /*#__PURE__*/_jsx(View, {
|
|
51
61
|
className: cn(segmentVariants({
|
|
52
62
|
state
|
|
53
63
|
}))
|
|
@@ -55,4 +65,6 @@ export const ProgressSegmented = /*#__PURE__*/forwardRef(({
|
|
|
55
65
|
});
|
|
56
66
|
});
|
|
57
67
|
ProgressSegmented.displayName = 'ProgressSegmented';
|
|
68
|
+
|
|
69
|
+
/* eslint-enable @typescript-eslint/no-deprecated */
|
|
58
70
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["forwardRef","useMemo","View","cn","progressSegmentedVariants","segmentVariants","jsx","_jsx","ProgressSegmented","step","total","isStepComplete","getAccessibilityText","className","accessibilityLabel","props","ref","clampedStep","Math","max","min","
|
|
1
|
+
{"version":3,"names":["forwardRef","useEffect","useMemo","View","cn","progressSegmentedVariants","segmentVariants","jsx","_jsx","ProgressSegmented","step","segments","total","isStepComplete","getAccessibilityText","className","accessibilityLabel","props","ref","segmentCount","process","env","NODE_ENV","undefined","console","warn","clampedStep","Math","max","min","segmentStates","Array","from","length","_","index","segmentIndex","state","accessibilityText","String","accessibilityRole","accessibilityValue","now","text","children","map","displayName"],"sourceRoot":"../../../../src","sources":["components/ProgressSegmented/index.tsx"],"mappings":"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","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,33 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=449-449
|
|
4
|
+
// source=packages/components/src/components/ProgressSegmented/index.tsx
|
|
5
|
+
// component=ProgressSegmented
|
|
6
|
+
import figma from 'figma';
|
|
7
|
+
const instance = figma.selectedInstance;
|
|
8
|
+
const segmentsCount = instance.getEnum('segments', {
|
|
9
|
+
'2': 2,
|
|
10
|
+
'3': 3,
|
|
11
|
+
'4': 4,
|
|
12
|
+
'5': 5,
|
|
13
|
+
'6': 6
|
|
14
|
+
});
|
|
15
|
+
|
|
16
|
+
// Figma `step=complete` maps to `isStepComplete` on the last step (all segments filled).
|
|
17
|
+
const stepRaw = instance.getEnum('step', {
|
|
18
|
+
'1': '1',
|
|
19
|
+
'2': '2',
|
|
20
|
+
'3': '3',
|
|
21
|
+
'4': '4',
|
|
22
|
+
'5': '5',
|
|
23
|
+
'6': '6',
|
|
24
|
+
complete: 'complete'
|
|
25
|
+
});
|
|
26
|
+
const isStepComplete = stepRaw === 'complete';
|
|
27
|
+
const step = isStepComplete ? segmentsCount : Number(stepRaw);
|
|
28
|
+
export default {
|
|
29
|
+
id: 'progress-segmented',
|
|
30
|
+
imports: ["import { ProgressSegmented } from '@cdx-ui/components'"],
|
|
31
|
+
example: figma.code`<ProgressSegmented segments={${segmentsCount}} step={${step}}${isStepComplete ? figma.code` isStepComplete` : figma.code``} />`
|
|
32
|
+
};
|
|
33
|
+
//# sourceMappingURL=ProgressSegmented.figma.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["figma","instance","selectedInstance","segmentsCount","getEnum","stepRaw","complete","isStepComplete","step","Number","id","imports","example","code"],"sourceRoot":"../../../src","sources":["figma/ProgressSegmented.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;AAEvC,MAAMC,aAAa,GAAGF,QAAQ,CAACG,OAAO,CAAC,UAAU,EAAE;EACjD,GAAG,EAAE,CAAC;EACN,GAAG,EAAE,CAAC;EACN,GAAG,EAAE,CAAC;EACN,GAAG,EAAE,CAAC;EACN,GAAG,EAAE;AACP,CAAC,CAAC;;AAEF;AACA,MAAMC,OAAO,GAAGJ,QAAQ,CAACG,OAAO,CAAC,MAAM,EAAE;EACvC,GAAG,EAAE,GAAG;EACR,GAAG,EAAE,GAAG;EACR,GAAG,EAAE,GAAG;EACR,GAAG,EAAE,GAAG;EACR,GAAG,EAAE,GAAG;EACR,GAAG,EAAE,GAAG;EACRE,QAAQ,EAAE;AACZ,CAAC,CAAC;AAEF,MAAMC,cAAc,GAAGF,OAAO,KAAK,UAAU;AAC7C,MAAMG,IAAI,GAAGD,cAAc,GAAGJ,aAAa,GAAGM,MAAM,CAACJ,OAAO,CAAC;AAE7D,eAAe;EACbK,EAAE,EAAE,oBAAoB;EACxBC,OAAO,EAAE,CAAC,wDAAwD,CAAC;EACnEC,OAAO,EAAEZ,KAAK,CAACa,IAAI,gCAAgCV,aAAa,WAAWK,IAAI,IAC7ED,cAAc,GAAGP,KAAK,CAACa,IAAI,iBAAiB,GAAGb,KAAK,CAACa,IAAI,EAAE;AAE/D,CAAC","ignoreList":[]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { type ReactNode } from 'react';
|
|
2
2
|
import { View, type ViewProps } from 'react-native';
|
|
3
|
-
import { type
|
|
3
|
+
import { type CardContentVariantProps, type CardFooterVariantProps, type CardVariantProps } from './styles';
|
|
4
4
|
export interface CardProps extends ViewProps, CardVariantProps {
|
|
5
5
|
className?: string;
|
|
6
6
|
children?: ReactNode;
|
|
@@ -16,7 +16,7 @@ export interface CardContentProps extends ViewProps, CardContentVariantProps {
|
|
|
16
16
|
children?: ReactNode;
|
|
17
17
|
}
|
|
18
18
|
declare const CardContent: import("react").ForwardRefExoticComponent<CardContentProps & import("react").RefAttributes<View>>;
|
|
19
|
-
export interface CardFooterProps extends ViewProps {
|
|
19
|
+
export interface CardFooterProps extends ViewProps, CardFooterVariantProps {
|
|
20
20
|
className?: string;
|
|
21
21
|
children?: ReactNode;
|
|
22
22
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Card/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAKL,KAAK,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Card/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAKL,KAAK,uBAAuB,EAC5B,KAAK,sBAAsB,EAC3B,KAAK,gBAAgB,EACtB,MAAM,UAAU,CAAC;AAYlB,MAAM,WAAW,SAAU,SAAQ,SAAS,EAAE,gBAAgB;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,QAAQ,4FAgBb,CAAC;AAQF,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,UAAU,kGAUf,CAAC;AAQF,MAAM,WAAW,gBAAiB,SAAQ,SAAS,EAAE,uBAAuB;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,WAAW,mGAchB,CAAC;AAQF,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,sBAAsB;IACxE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,QAAA,MAAM,UAAU,kGAcf,CAAC;AAQF,KAAK,qBAAqB,GAAG,OAAO,QAAQ,GAAG;IAC7C,MAAM,EAAE,OAAO,UAAU,CAAC;IAC1B,OAAO,EAAE,OAAO,WAAW,CAAC;IAC5B,MAAM,EAAE,OAAO,UAAU,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,IAAI,EAAe,qBAAqB,CAAC"}
|
|
@@ -7,7 +7,10 @@ export declare const cardTitleVariants: (props?: import("class-variance-authorit
|
|
|
7
7
|
export declare const cardContentVariants: (props?: ({
|
|
8
8
|
fullBleed?: boolean | null | undefined;
|
|
9
9
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
10
|
-
export declare const cardFooterVariants: (props?:
|
|
10
|
+
export declare const cardFooterVariants: (props?: ({
|
|
11
|
+
fullBleed?: boolean | null | undefined;
|
|
12
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
11
13
|
export type CardVariantProps = VariantProps<typeof cardRootVariants>;
|
|
12
14
|
export type CardContentVariantProps = VariantProps<typeof cardContentVariants>;
|
|
15
|
+
export type CardFooterVariantProps = VariantProps<typeof cardFooterVariants>;
|
|
13
16
|
//# sourceMappingURL=styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Card/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAI7D,eAAO,MAAM,gBAAgB;;8EAe5B,CAAC;AAIF,eAAO,MAAM,kBAAkB,
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Card/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAI7D,eAAO,MAAM,gBAAgB;;8EAe5B,CAAC;AAIF,eAAO,MAAM,kBAAkB,oFAK7B,CAAC;AAIH,eAAO,MAAM,iBAAiB,oFAAkB,CAAC;AAIjD,eAAO,MAAM,mBAAmB;;8EAM9B,CAAC;AAIH,eAAO,MAAM,kBAAkB;;8EAU7B,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC;AACrE,MAAM,MAAM,uBAAuB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAC/E,MAAM,MAAM,sBAAsB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC"}
|
|
@@ -3,12 +3,23 @@ import { type ProgressSegmentedVariants } from './styles';
|
|
|
3
3
|
export interface ProgressSegmentedProps extends ViewProps, ProgressSegmentedVariants {
|
|
4
4
|
/** Current step (1-based index into the segment count) */
|
|
5
5
|
readonly step: number;
|
|
6
|
-
/**
|
|
6
|
+
/**
|
|
7
|
+
* Number of segments in the bar. Matches the Figma `segments` variant (2–6 in the design
|
|
8
|
+
* system file); the prop accepts any positive integer for backward compatibility.
|
|
9
|
+
*/
|
|
10
|
+
readonly segments?: number;
|
|
11
|
+
/**
|
|
12
|
+
* @deprecated Use {@link ProgressSegmentedProps.segments} instead. This alias will be removed
|
|
13
|
+
* in a future major release.
|
|
14
|
+
*/
|
|
7
15
|
readonly total?: number;
|
|
8
16
|
/** When true, the current step segment is marked as complete rather than in-progress */
|
|
9
17
|
readonly isStepComplete?: boolean;
|
|
10
|
-
/**
|
|
11
|
-
|
|
18
|
+
/**
|
|
19
|
+
* Returns the accessibility value text announced by screen readers. Receives the clamped
|
|
20
|
+
* step, segment count, and whether the step is complete.
|
|
21
|
+
*/
|
|
22
|
+
readonly getAccessibilityText?: (step: number, segmentCount: number, isStepComplete: boolean) => string;
|
|
12
23
|
readonly className?: string;
|
|
13
24
|
}
|
|
14
25
|
export declare const ProgressSegmented: import("react").ForwardRefExoticComponent<ProgressSegmentedProps & import("react").RefAttributes<View>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ProgressSegmented/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAGL,KAAK,yBAAyB,EAC/B,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ProgressSegmented/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAGL,KAAK,yBAAyB,EAC/B,MAAM,UAAU,CAAC;AAIlB,MAAM,WAAW,sBAAuB,SAAQ,SAAS,EAAE,yBAAyB;IAClF,0DAA0D;IAC1D,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,wFAAwF;IACxF,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAClC;;;OAGG;IACH,QAAQ,CAAC,oBAAoB,CAAC,EAAE,CAC9B,IAAI,EAAE,MAAM,EACZ,YAAY,EAAE,MAAM,EACpB,cAAc,EAAE,OAAO,KACpB,MAAM,CAAC;IACZ,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,iBAAiB,yGAyE7B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Card.Header.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Card.Header.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAU1B,wBASE"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Card.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Card.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AA8B1B,wBASE"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ProgressSegmented.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/ProgressSegmented.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AA0B1B,wBAME"}
|
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.24",
|
|
4
4
|
"main": "lib/commonjs/index.js",
|
|
5
5
|
"module": "lib/module/index.js",
|
|
6
6
|
"react-native": "src/index.ts",
|
|
@@ -67,9 +67,9 @@
|
|
|
67
67
|
"@gorhom/bottom-sheet": "^5.2.6",
|
|
68
68
|
"class-variance-authority": "^0.7.1",
|
|
69
69
|
"uniwind": "1.6.1",
|
|
70
|
-
"@cdx-ui/primitives": "0.0.1-beta.
|
|
71
|
-
"@cdx-ui/utils": "0.0.1-beta.
|
|
72
|
-
"@cdx-ui/icons": "0.0.1-beta.
|
|
70
|
+
"@cdx-ui/primitives": "0.0.1-beta.24",
|
|
71
|
+
"@cdx-ui/utils": "0.0.1-beta.24",
|
|
72
|
+
"@cdx-ui/icons": "0.0.1-beta.24"
|
|
73
73
|
},
|
|
74
74
|
"devDependencies": {
|
|
75
75
|
"@types/react": "*",
|
|
@@ -6,8 +6,9 @@ import {
|
|
|
6
6
|
cardFooterVariants,
|
|
7
7
|
cardHeaderVariants,
|
|
8
8
|
cardRootVariants,
|
|
9
|
-
type CardVariantProps,
|
|
10
9
|
type CardContentVariantProps,
|
|
10
|
+
type CardFooterVariantProps,
|
|
11
|
+
type CardVariantProps,
|
|
11
12
|
} from './styles';
|
|
12
13
|
|
|
13
14
|
// =============================================================================
|
|
@@ -99,14 +100,18 @@ CardContent.displayName = 'Card.Content';
|
|
|
99
100
|
// STYLED FOOTER COMPONENT
|
|
100
101
|
// =============================================================================
|
|
101
102
|
|
|
102
|
-
export interface CardFooterProps extends ViewProps {
|
|
103
|
+
export interface CardFooterProps extends ViewProps, CardFooterVariantProps {
|
|
103
104
|
className?: string;
|
|
104
105
|
children?: ReactNode;
|
|
105
106
|
}
|
|
106
107
|
|
|
107
108
|
const CardFooter = forwardRef<View, CardFooterProps>(
|
|
108
|
-
({ className, children, style, ...props }, ref) => {
|
|
109
|
-
const
|
|
109
|
+
({ className, children, style, fullBleed, ...props }, ref) => {
|
|
110
|
+
const { fullBleed: fullBleedFromContext } = useCardStyleContext();
|
|
111
|
+
const computedClassName = cn(
|
|
112
|
+
cardFooterVariants({ fullBleed: fullBleed ?? fullBleedFromContext }),
|
|
113
|
+
className,
|
|
114
|
+
);
|
|
110
115
|
|
|
111
116
|
return (
|
|
112
117
|
<View ref={ref} className={computedClassName} style={style} {...props}>
|
|
@@ -22,9 +22,10 @@ export const cardRootVariants = cva(
|
|
|
22
22
|
// ── Header ──────────────────────────────────────────────────
|
|
23
23
|
|
|
24
24
|
export const cardHeaderVariants = cva([
|
|
25
|
-
'flex-row items-center justify-between px-5 py-3',
|
|
26
25
|
'border-t-8 border-t-surface-brand-strong',
|
|
27
|
-
'border-b border-
|
|
26
|
+
'border-b border-solid border-b-stroke-secondary',
|
|
27
|
+
'flex-row items-center justify-between gap-0.5',
|
|
28
|
+
'px-5 py-3',
|
|
28
29
|
]);
|
|
29
30
|
|
|
30
31
|
// ── Title ───────────────────────────────────────────────────
|
|
@@ -43,7 +44,18 @@ export const cardContentVariants = cva(['text-content-primary', 'p-5'], {
|
|
|
43
44
|
|
|
44
45
|
// ── Footer ──────────────────────────────────────────────────
|
|
45
46
|
|
|
46
|
-
export const cardFooterVariants = cva(['
|
|
47
|
+
export const cardFooterVariants = cva(['flex-col items-stretch gap-2'], {
|
|
48
|
+
variants: {
|
|
49
|
+
fullBleed: {
|
|
50
|
+
true: 'p-5',
|
|
51
|
+
false: 'px-5 pb-5 pt-0',
|
|
52
|
+
},
|
|
53
|
+
},
|
|
54
|
+
defaultVariants: {
|
|
55
|
+
fullBleed: false,
|
|
56
|
+
},
|
|
57
|
+
});
|
|
47
58
|
|
|
48
59
|
export type CardVariantProps = VariantProps<typeof cardRootVariants>;
|
|
49
60
|
export type CardContentVariantProps = VariantProps<typeof cardContentVariants>;
|
|
61
|
+
export type CardFooterVariantProps = VariantProps<typeof cardFooterVariants>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { forwardRef, useMemo } from 'react';
|
|
1
|
+
import { forwardRef, useEffect, useMemo } from 'react';
|
|
2
2
|
import { View, type ViewProps } from 'react-native';
|
|
3
3
|
import { cn } from '@cdx-ui/utils';
|
|
4
4
|
import {
|
|
@@ -7,15 +7,32 @@ import {
|
|
|
7
7
|
type ProgressSegmentedVariants,
|
|
8
8
|
} from './styles';
|
|
9
9
|
|
|
10
|
+
/* `ProgressSegmentedProps.total` remains in the public API until the next major release. */
|
|
11
|
+
/* eslint-disable @typescript-eslint/no-deprecated */
|
|
10
12
|
export interface ProgressSegmentedProps extends ViewProps, ProgressSegmentedVariants {
|
|
11
13
|
/** Current step (1-based index into the segment count) */
|
|
12
14
|
readonly step: number;
|
|
13
|
-
/**
|
|
15
|
+
/**
|
|
16
|
+
* Number of segments in the bar. Matches the Figma `segments` variant (2–6 in the design
|
|
17
|
+
* system file); the prop accepts any positive integer for backward compatibility.
|
|
18
|
+
*/
|
|
19
|
+
readonly segments?: number;
|
|
20
|
+
/**
|
|
21
|
+
* @deprecated Use {@link ProgressSegmentedProps.segments} instead. This alias will be removed
|
|
22
|
+
* in a future major release.
|
|
23
|
+
*/
|
|
14
24
|
readonly total?: number;
|
|
15
25
|
/** When true, the current step segment is marked as complete rather than in-progress */
|
|
16
26
|
readonly isStepComplete?: boolean;
|
|
17
|
-
/**
|
|
18
|
-
|
|
27
|
+
/**
|
|
28
|
+
* Returns the accessibility value text announced by screen readers. Receives the clamped
|
|
29
|
+
* step, segment count, and whether the step is complete.
|
|
30
|
+
*/
|
|
31
|
+
readonly getAccessibilityText?: (
|
|
32
|
+
step: number,
|
|
33
|
+
segmentCount: number,
|
|
34
|
+
isStepComplete: boolean,
|
|
35
|
+
) => string;
|
|
19
36
|
readonly className?: string;
|
|
20
37
|
}
|
|
21
38
|
|
|
@@ -23,7 +40,8 @@ export const ProgressSegmented = forwardRef<View, ProgressSegmentedProps>(
|
|
|
23
40
|
(
|
|
24
41
|
{
|
|
25
42
|
step,
|
|
26
|
-
|
|
43
|
+
segments,
|
|
44
|
+
total,
|
|
27
45
|
isStepComplete = false,
|
|
28
46
|
getAccessibilityText,
|
|
29
47
|
className,
|
|
@@ -32,10 +50,25 @@ export const ProgressSegmented = forwardRef<View, ProgressSegmentedProps>(
|
|
|
32
50
|
},
|
|
33
51
|
ref,
|
|
34
52
|
) => {
|
|
35
|
-
const
|
|
53
|
+
const segmentCount = segments ?? total ?? 5;
|
|
36
54
|
|
|
37
|
-
|
|
38
|
-
|
|
55
|
+
useEffect(() => {
|
|
56
|
+
if (
|
|
57
|
+
typeof process !== 'undefined' &&
|
|
58
|
+
process.env.NODE_ENV !== 'production' &&
|
|
59
|
+
total !== undefined &&
|
|
60
|
+
segments === undefined
|
|
61
|
+
) {
|
|
62
|
+
console.warn(
|
|
63
|
+
'[ProgressSegmented] The `total` prop is deprecated and will be removed in a future major release. Use `segments` instead.',
|
|
64
|
+
);
|
|
65
|
+
}
|
|
66
|
+
}, [total, segments]);
|
|
67
|
+
|
|
68
|
+
const clampedStep = Math.max(0, Math.min(step, segmentCount));
|
|
69
|
+
|
|
70
|
+
const segmentStates = useMemo(() => {
|
|
71
|
+
return Array.from({ length: segmentCount }, (_, index) => {
|
|
39
72
|
const segmentIndex = index + 1;
|
|
40
73
|
let state: 'complete' | 'incomplete' | 'inprogress' = 'incomplete';
|
|
41
74
|
|
|
@@ -47,13 +80,13 @@ export const ProgressSegmented = forwardRef<View, ProgressSegmentedProps>(
|
|
|
47
80
|
|
|
48
81
|
return state;
|
|
49
82
|
});
|
|
50
|
-
}, [
|
|
83
|
+
}, [segmentCount, clampedStep, isStepComplete]);
|
|
51
84
|
|
|
52
|
-
let accessibilityText = `Step ${String(clampedStep)} of ${String(
|
|
85
|
+
let accessibilityText = `Step ${String(clampedStep)} of ${String(segmentCount)}`;
|
|
53
86
|
if (getAccessibilityText) {
|
|
54
|
-
accessibilityText = getAccessibilityText(clampedStep,
|
|
87
|
+
accessibilityText = getAccessibilityText(clampedStep, segmentCount, isStepComplete);
|
|
55
88
|
} else if (isStepComplete) {
|
|
56
|
-
accessibilityText = `Step ${String(clampedStep)} of ${String(
|
|
89
|
+
accessibilityText = `Step ${String(clampedStep)} of ${String(segmentCount)}, completed`;
|
|
57
90
|
}
|
|
58
91
|
|
|
59
92
|
return (
|
|
@@ -63,14 +96,14 @@ export const ProgressSegmented = forwardRef<View, ProgressSegmentedProps>(
|
|
|
63
96
|
accessibilityLabel={accessibilityLabel}
|
|
64
97
|
accessibilityValue={{
|
|
65
98
|
min: 0,
|
|
66
|
-
max:
|
|
99
|
+
max: segmentCount,
|
|
67
100
|
now: clampedStep,
|
|
68
101
|
text: accessibilityText,
|
|
69
102
|
}}
|
|
70
103
|
className={cn(progressSegmentedVariants(), className)}
|
|
71
104
|
{...props}
|
|
72
105
|
>
|
|
73
|
-
{
|
|
106
|
+
{segmentStates.map((state, index) => (
|
|
74
107
|
<View key={index} className={cn(segmentVariants({ state }))} />
|
|
75
108
|
))}
|
|
76
109
|
</View>
|
|
@@ -79,3 +112,5 @@ export const ProgressSegmented = forwardRef<View, ProgressSegmentedProps>(
|
|
|
79
112
|
);
|
|
80
113
|
|
|
81
114
|
ProgressSegmented.displayName = 'ProgressSegmented';
|
|
115
|
+
|
|
116
|
+
/* eslint-enable @typescript-eslint/no-deprecated */
|