@cdx-ui/components 0.0.1-beta.21 → 0.0.1-beta.23

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.
@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.Icon = Icon;
7
7
  var _uniwind = require("uniwind");
8
8
  var _utils = require("@cdx-ui/utils");
9
- var _primitives = require("../../styles/primitives");
10
9
  var _jsxRuntime = require("react/jsx-runtime");
11
10
  function IconImpl({
12
11
  as: IconComponent,
@@ -54,7 +53,7 @@ function Icon({
54
53
  }) {
55
54
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledIcon, {
56
55
  as: IconComponent,
57
- className: (0, _utils.cn)(_primitives.COLOR_TEXT_PRIMARY, 'size-5', className),
56
+ className: (0, _utils.cn)('text-content-primary size-5', className),
58
57
  ...props
59
58
  });
60
59
  }
@@ -1 +1 @@
1
- {"version":3,"names":["_uniwind","require","_utils","_primitives","_jsxRuntime","IconImpl","as","IconComponent","props","jsx","StyledIcon","withUniwind","size","fromClassName","styleProperty","color","Icon","className","cn","COLOR_TEXT_PRIMARY"],"sourceRoot":"../../../../src","sources":["components/Icon/index.tsx"],"mappings":";;;;;;AAAA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAEA,IAAAE,WAAA,GAAAF,OAAA;AAA6D,IAAAG,WAAA,GAAAH,OAAA;AAO7D,SAASI,QAAQA,CAAC;EAAEC,EAAE,EAAEC,aAAa;EAAE,GAAGC;AAAiB,CAAC,EAAE;EAC5D,oBAAO,IAAAJ,WAAA,CAAAK,GAAA,EAACF,aAAa;IAAA,GAAKC;EAAK,CAAG,CAAC;AACrC;AAEA,MAAME,UAAU,GAAG,IAAAC,oBAAW,EAACN,QAAQ,EAAE;EACvCO,IAAI,EAAE;IACJC,aAAa,EAAE,WAAW;IAC1BC,aAAa,EAAE;EACjB,CAAC;EACDC,KAAK,EAAE;IACLF,aAAa,EAAE,WAAW;IAC1BC,aAAa,EAAE;EACjB;AACF,CAAC,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASE,IAAIA,CAAC;EAAEV,EAAE,EAAEC,aAAa;EAAEU,SAAS;EAAE,GAAGT;AAAiB,CAAC,EAAE;EAC1E,oBACE,IAAAJ,WAAA,CAAAK,GAAA,EAACC,UAAU;IACTJ,EAAE,EAAEC,aAAc;IAClBU,SAAS,EAAE,IAAAC,SAAE,EAACC,8BAAkB,EAAE,QAAQ,EAAEF,SAAS,CAAE;IAAA,GACnDT;EAAK,CACV,CAAC;AAEN","ignoreList":[]}
1
+ {"version":3,"names":["_uniwind","require","_utils","_jsxRuntime","IconImpl","as","IconComponent","props","jsx","StyledIcon","withUniwind","size","fromClassName","styleProperty","color","Icon","className","cn"],"sourceRoot":"../../../../src","sources":["components/Icon/index.tsx"],"mappings":";;;;;;AAAA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAAmC,IAAAE,WAAA,GAAAF,OAAA;AAQnC,SAASG,QAAQA,CAAC;EAAEC,EAAE,EAAEC,aAAa;EAAE,GAAGC;AAAiB,CAAC,EAAE;EAC5D,oBAAO,IAAAJ,WAAA,CAAAK,GAAA,EAACF,aAAa;IAAA,GAAKC;EAAK,CAAG,CAAC;AACrC;AAEA,MAAME,UAAU,GAAG,IAAAC,oBAAW,EAACN,QAAQ,EAAE;EACvCO,IAAI,EAAE;IACJC,aAAa,EAAE,WAAW;IAC1BC,aAAa,EAAE;EACjB,CAAC;EACDC,KAAK,EAAE;IACLF,aAAa,EAAE,WAAW;IAC1BC,aAAa,EAAE;EACjB;AACF,CAAC,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASE,IAAIA,CAAC;EAAEV,EAAE,EAAEC,aAAa;EAAEU,SAAS;EAAE,GAAGT;AAAiB,CAAC,EAAE;EAC1E,oBACE,IAAAJ,WAAA,CAAAK,GAAA,EAACC,UAAU;IACTJ,EAAE,EAAEC,aAAc;IAClBU,SAAS,EAAE,IAAAC,SAAE,EAAC,6BAA6B,EAAED,SAAS,CAAE;IAAA,GACpDT;EAAK,CACV,CAAC;AAEN","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
- total = 5,
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 clampedStep = Math.max(0, Math.min(step, total));
22
- const segments = (0, _react.useMemo)(() => {
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: total
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
- }, [total, clampedStep, isStepComplete]);
36
- let accessibilityText = `Step ${String(clampedStep)} of ${String(total)}`;
45
+ }, [segmentCount, clampedStep, isStepComplete]);
46
+ let accessibilityText = `Step ${String(clampedStep)} of ${String(segmentCount)}`;
37
47
  if (getAccessibilityText) {
38
- accessibilityText = getAccessibilityText(clampedStep, total, isStepComplete);
48
+ accessibilityText = getAccessibilityText(clampedStep, segmentCount, isStepComplete);
39
49
  } else if (isStepComplete) {
40
- accessibilityText = `Step ${String(clampedStep)} of ${String(total)}, completed`;
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: total,
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: segments.map((state, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
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","segments","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":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AAIkB,IAAAI,WAAA,GAAAJ,OAAA;AAcX,MAAMK,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,gBAAG,IAAAE,iBAAU,EACzC,CACE;EACEC,IAAI;EACJC,KAAK,GAAG,CAAC;EACTC,cAAc,GAAG,KAAK;EACtBC,oBAAoB;EACpBC,SAAS;EACTC,kBAAkB,GAAG,UAAU;EAC/B,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAMC,WAAW,GAAGC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAED,IAAI,CAACE,GAAG,CAACX,IAAI,EAAEC,KAAK,CAAC,CAAC;EAEtD,MAAMW,QAAQ,GAAG,IAAAC,cAAO,EAAC,MAAM;IAC7B,OAAOC,KAAK,CAACC,IAAI,CAAC;MAAEC,MAAM,EAAEf;IAAM,CAAC,EAAE,CAACgB,CAAC,EAAEC,KAAK,KAAK;MACjD,MAAMC,YAAY,GAAGD,KAAK,GAAG,CAAC;MAC9B,IAAIE,KAA+C,GAAG,YAAY;MAElE,IAAID,YAAY,GAAGX,WAAW,IAAKN,cAAc,IAAIiB,YAAY,KAAKX,WAAY,EAAE;QAClFY,KAAK,GAAG,UAAU;MACpB,CAAC,MAAM,IAAID,YAAY,KAAKX,WAAW,EAAE;QACvCY,KAAK,GAAG,YAAY;MACtB;MAEA,OAAOA,KAAK;IACd,CAAC,CAAC;EACJ,CAAC,EAAE,CAACnB,KAAK,EAAEO,WAAW,EAAEN,cAAc,CAAC,CAAC;EAExC,IAAImB,iBAAiB,GAAG,QAAQC,MAAM,CAACd,WAAW,CAAC,OAAOc,MAAM,CAACrB,KAAK,CAAC,EAAE;EACzE,IAAIE,oBAAoB,EAAE;IACxBkB,iBAAiB,GAAGlB,oBAAoB,CAACK,WAAW,EAAEP,KAAK,EAAEC,cAAc,CAAC;EAC9E,CAAC,MAAM,IAAIA,cAAc,EAAE;IACzBmB,iBAAiB,GAAG,QAAQC,MAAM,CAACd,WAAW,CAAC,OAAOc,MAAM,CAACrB,KAAK,CAAC,aAAa;EAClF;EAEA,oBACE,IAAAL,WAAA,CAAA2B,GAAA,EAAC9B,YAAA,CAAA+B,IAAI;IACHjB,GAAG,EAAEA,GAAI;IACTkB,iBAAiB,EAAC,aAAa;IAC/BpB,kBAAkB,EAAEA,kBAAmB;IACvCqB,kBAAkB,EAAE;MAClBf,GAAG,EAAE,CAAC;MACND,GAAG,EAAET,KAAK;MACV0B,GAAG,EAAEnB,WAAW;MAChBoB,IAAI,EAAEP;IACR,CAAE;IACFjB,SAAS,EAAE,IAAAyB,SAAE,EAAC,IAAAC,iCAAyB,EAAC,CAAC,EAAE1B,SAAS,CAAE;IAAA,GAClDE,KAAK;IAAAyB,QAAA,EAERnB,QAAQ,CAACoB,GAAG,CAAC,CAACZ,KAAK,EAAEF,KAAK,kBACzB,IAAAtB,WAAA,CAAA2B,GAAA,EAAC9B,YAAA,CAAA+B,IAAI;MAAapB,SAAS,EAAE,IAAAyB,SAAE,EAAC,IAAAI,uBAAe,EAAC;QAAEb;MAAM,CAAC,CAAC;IAAE,GAAjDF,KAAmD,CAC/D;EAAC,CACE,CAAC;AAEX,CACF,CAAC;AAEDrB,iBAAiB,CAACqC,WAAW,GAAG,mBAAmB","ignoreList":[]}
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,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":[]}
@@ -2,7 +2,6 @@
2
2
 
3
3
  import { withUniwind } from 'uniwind';
4
4
  import { cn } from '@cdx-ui/utils';
5
- import { COLOR_TEXT_PRIMARY } from '../../styles/primitives';
6
5
  import { jsx as _jsx } from "react/jsx-runtime";
7
6
  function IconImpl({
8
7
  as: IconComponent,
@@ -50,7 +49,7 @@ export function Icon({
50
49
  }) {
51
50
  return /*#__PURE__*/_jsx(StyledIcon, {
52
51
  as: IconComponent,
53
- className: cn(COLOR_TEXT_PRIMARY, 'size-5', className),
52
+ className: cn('text-content-primary size-5', className),
54
53
  ...props
55
54
  });
56
55
  }
@@ -1 +1 @@
1
- {"version":3,"names":["withUniwind","cn","COLOR_TEXT_PRIMARY","jsx","_jsx","IconImpl","as","IconComponent","props","StyledIcon","size","fromClassName","styleProperty","color","Icon","className"],"sourceRoot":"../../../../src","sources":["components/Icon/index.tsx"],"mappings":";;AAAA,SAASA,WAAW,QAAQ,SAAS;AACrC,SAASC,EAAE,QAAQ,eAAe;AAElC,SAASC,kBAAkB,QAAQ,yBAAyB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAO7D,SAASC,QAAQA,CAAC;EAAEC,EAAE,EAAEC,aAAa;EAAE,GAAGC;AAAiB,CAAC,EAAE;EAC5D,oBAAOJ,IAAA,CAACG,aAAa;IAAA,GAAKC;EAAK,CAAG,CAAC;AACrC;AAEA,MAAMC,UAAU,GAAGT,WAAW,CAACK,QAAQ,EAAE;EACvCK,IAAI,EAAE;IACJC,aAAa,EAAE,WAAW;IAC1BC,aAAa,EAAE;EACjB,CAAC;EACDC,KAAK,EAAE;IACLF,aAAa,EAAE,WAAW;IAC1BC,aAAa,EAAE;EACjB;AACF,CAAC,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASE,IAAIA,CAAC;EAAER,EAAE,EAAEC,aAAa;EAAEQ,SAAS;EAAE,GAAGP;AAAiB,CAAC,EAAE;EAC1E,oBACEJ,IAAA,CAACK,UAAU;IACTH,EAAE,EAAEC,aAAc;IAClBQ,SAAS,EAAEd,EAAE,CAACC,kBAAkB,EAAE,QAAQ,EAAEa,SAAS,CAAE;IAAA,GACnDP;EAAK,CACV,CAAC;AAEN","ignoreList":[]}
1
+ {"version":3,"names":["withUniwind","cn","jsx","_jsx","IconImpl","as","IconComponent","props","StyledIcon","size","fromClassName","styleProperty","color","Icon","className"],"sourceRoot":"../../../../src","sources":["components/Icon/index.tsx"],"mappings":";;AAAA,SAASA,WAAW,QAAQ,SAAS;AACrC,SAASC,EAAE,QAAQ,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAQnC,SAASC,QAAQA,CAAC;EAAEC,EAAE,EAAEC,aAAa;EAAE,GAAGC;AAAiB,CAAC,EAAE;EAC5D,oBAAOJ,IAAA,CAACG,aAAa;IAAA,GAAKC;EAAK,CAAG,CAAC;AACrC;AAEA,MAAMC,UAAU,GAAGR,WAAW,CAACI,QAAQ,EAAE;EACvCK,IAAI,EAAE;IACJC,aAAa,EAAE,WAAW;IAC1BC,aAAa,EAAE;EACjB,CAAC;EACDC,KAAK,EAAE;IACLF,aAAa,EAAE,WAAW;IAC1BC,aAAa,EAAE;EACjB;AACF,CAAC,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASE,IAAIA,CAAC;EAAER,EAAE,EAAEC,aAAa;EAAEQ,SAAS;EAAE,GAAGP;AAAiB,CAAC,EAAE;EAC1E,oBACEJ,IAAA,CAACK,UAAU;IACTH,EAAE,EAAEC,aAAc;IAClBQ,SAAS,EAAEb,EAAE,CAAC,6BAA6B,EAAEa,SAAS,CAAE;IAAA,GACpDP;EAAK,CACV,CAAC;AAEN","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
- total = 5,
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 clampedStep = Math.max(0, Math.min(step, total));
18
- const segments = useMemo(() => {
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: total
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
- }, [total, clampedStep, isStepComplete]);
32
- let accessibilityText = `Step ${String(clampedStep)} of ${String(total)}`;
41
+ }, [segmentCount, clampedStep, isStepComplete]);
42
+ let accessibilityText = `Step ${String(clampedStep)} of ${String(segmentCount)}`;
33
43
  if (getAccessibilityText) {
34
- accessibilityText = getAccessibilityText(clampedStep, total, isStepComplete);
44
+ accessibilityText = getAccessibilityText(clampedStep, segmentCount, isStepComplete);
35
45
  } else if (isStepComplete) {
36
- accessibilityText = `Step ${String(clampedStep)} of ${String(total)}, completed`;
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: total,
54
+ max: segmentCount,
45
55
  now: clampedStep,
46
56
  text: accessibilityText
47
57
  },
48
58
  className: cn(progressSegmentedVariants(), className),
49
59
  ...props,
50
- children: segments.map((state, index) => /*#__PURE__*/_jsx(View, {
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","segments","Array","from","length","_","index","segmentIndex","state","accessibilityText","String","accessibilityRole","accessibilityValue","now","text","children","map","displayName"],"sourceRoot":"../../../../src","sources":["components/ProgressSegmented/index.tsx"],"mappings":";;AAAA,SAASA,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAC3C,SAASC,IAAI,QAAwB,cAAc;AACnD,SAASC,EAAE,QAAQ,eAAe;AAClC,SACEC,yBAAyB,EACzBC,eAAe,QAEV,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAclB,OAAO,MAAMC,iBAAiB,gBAAGR,UAAU,CACzC,CACE;EACES,IAAI;EACJC,KAAK,GAAG,CAAC;EACTC,cAAc,GAAG,KAAK;EACtBC,oBAAoB;EACpBC,SAAS;EACTC,kBAAkB,GAAG,UAAU;EAC/B,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAMC,WAAW,GAAGC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAED,IAAI,CAACE,GAAG,CAACX,IAAI,EAAEC,KAAK,CAAC,CAAC;EAEtD,MAAMW,QAAQ,GAAGpB,OAAO,CAAC,MAAM;IAC7B,OAAOqB,KAAK,CAACC,IAAI,CAAC;MAAEC,MAAM,EAAEd;IAAM,CAAC,EAAE,CAACe,CAAC,EAAEC,KAAK,KAAK;MACjD,MAAMC,YAAY,GAAGD,KAAK,GAAG,CAAC;MAC9B,IAAIE,KAA+C,GAAG,YAAY;MAElE,IAAID,YAAY,GAAGV,WAAW,IAAKN,cAAc,IAAIgB,YAAY,KAAKV,WAAY,EAAE;QAClFW,KAAK,GAAG,UAAU;MACpB,CAAC,MAAM,IAAID,YAAY,KAAKV,WAAW,EAAE;QACvCW,KAAK,GAAG,YAAY;MACtB;MAEA,OAAOA,KAAK;IACd,CAAC,CAAC;EACJ,CAAC,EAAE,CAAClB,KAAK,EAAEO,WAAW,EAAEN,cAAc,CAAC,CAAC;EAExC,IAAIkB,iBAAiB,GAAG,QAAQC,MAAM,CAACb,WAAW,CAAC,OAAOa,MAAM,CAACpB,KAAK,CAAC,EAAE;EACzE,IAAIE,oBAAoB,EAAE;IACxBiB,iBAAiB,GAAGjB,oBAAoB,CAACK,WAAW,EAAEP,KAAK,EAAEC,cAAc,CAAC;EAC9E,CAAC,MAAM,IAAIA,cAAc,EAAE;IACzBkB,iBAAiB,GAAG,QAAQC,MAAM,CAACb,WAAW,CAAC,OAAOa,MAAM,CAACpB,KAAK,CAAC,aAAa;EAClF;EAEA,oBACEH,IAAA,CAACL,IAAI;IACHc,GAAG,EAAEA,GAAI;IACTe,iBAAiB,EAAC,aAAa;IAC/BjB,kBAAkB,EAAEA,kBAAmB;IACvCkB,kBAAkB,EAAE;MAClBZ,GAAG,EAAE,CAAC;MACND,GAAG,EAAET,KAAK;MACVuB,GAAG,EAAEhB,WAAW;MAChBiB,IAAI,EAAEL;IACR,CAAE;IACFhB,SAAS,EAAEV,EAAE,CAACC,yBAAyB,CAAC,CAAC,EAAES,SAAS,CAAE;IAAA,GAClDE,KAAK;IAAAoB,QAAA,EAERd,QAAQ,CAACe,GAAG,CAAC,CAACR,KAAK,EAAEF,KAAK,kBACzBnB,IAAA,CAACL,IAAI;MAAaW,SAAS,EAAEV,EAAE,CAACE,eAAe,CAAC;QAAEuB;MAAM,CAAC,CAAC;IAAE,GAAjDF,KAAmD,CAC/D;EAAC,CACE,CAAC;AAEX,CACF,CAAC;AAEDlB,iBAAiB,CAAC6B,WAAW,GAAG,mBAAmB","ignoreList":[]}
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,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 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Icon/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAG3D,MAAM,MAAM,SAAS,GAAG,YAAY,GAAG;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,EAAE,OAAO,CAAC;CACb,CAAC;AAiBF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,IAAI,CAAC,EAAE,EAAE,EAAE,aAAa,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,2CAQzE"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Icon/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE3D,MAAM,MAAM,SAAS,GAAG,YAAY,GAAG;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,EAAE,OAAO,CAAC;CACb,CAAC;AAiBF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,IAAI,CAAC,EAAE,EAAE,EAAE,aAAa,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,2CAQzE"}
@@ -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
- /** Total number of segments */
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
- /** Returns the accessibility value text announced by screen readers. Receives the clamped step, total, and whether the step is complete. */
11
- readonly getAccessibilityText?: (step: number, total: number, isStepComplete: boolean) => string;
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;AAElB,MAAM,WAAW,sBAAuB,SAAQ,SAAS,EAAE,yBAAyB;IAClF,0DAA0D;IAC1D,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,+BAA+B;IAC/B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,wFAAwF;IACxF,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAClC,4IAA4I;IAC5I,QAAQ,CAAC,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,OAAO,KAAK,MAAM,CAAC;IACjG,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,iBAAiB,yGAyD7B,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,8 @@
1
+ import figma from 'figma';
2
+ declare const _default: {
3
+ id: string;
4
+ imports: string[];
5
+ example: figma.TemplateStringResult;
6
+ };
7
+ export default _default;
8
+ //# sourceMappingURL=ProgressSegmented.figma.d.ts.map
@@ -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.21",
3
+ "version": "0.0.1-beta.23",
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.21",
71
- "@cdx-ui/utils": "0.0.1-beta.21",
72
- "@cdx-ui/icons": "0.0.1-beta.21"
70
+ "@cdx-ui/primitives": "0.0.1-beta.23",
71
+ "@cdx-ui/utils": "0.0.1-beta.23",
72
+ "@cdx-ui/icons": "0.0.1-beta.23"
73
73
  },
74
74
  "devDependencies": {
75
75
  "@types/react": "*",
@@ -1,7 +1,6 @@
1
1
  import { withUniwind } from 'uniwind';
2
2
  import { cn } from '@cdx-ui/utils';
3
3
  import type { CdxIcon, CdxIconProps } from '@cdx-ui/icons';
4
- import { COLOR_TEXT_PRIMARY } from '../../styles/primitives';
5
4
 
6
5
  export type IconProps = CdxIconProps & {
7
6
  className?: string; // TODO: Why does this need to specified manually?
@@ -47,7 +46,7 @@ export function Icon({ as: IconComponent, className, ...props }: IconProps) {
47
46
  return (
48
47
  <StyledIcon
49
48
  as={IconComponent}
50
- className={cn(COLOR_TEXT_PRIMARY, 'size-5', className)}
49
+ className={cn('text-content-primary size-5', className)}
51
50
  {...props}
52
51
  />
53
52
  );
@@ -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
- /** Total number of segments */
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
- /** Returns the accessibility value text announced by screen readers. Receives the clamped step, total, and whether the step is complete. */
18
- readonly getAccessibilityText?: (step: number, total: number, isStepComplete: boolean) => string;
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
- total = 5,
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 clampedStep = Math.max(0, Math.min(step, total));
53
+ const segmentCount = segments ?? total ?? 5;
36
54
 
37
- const segments = useMemo(() => {
38
- return Array.from({ length: total }, (_, index) => {
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
- }, [total, clampedStep, isStepComplete]);
83
+ }, [segmentCount, clampedStep, isStepComplete]);
51
84
 
52
- let accessibilityText = `Step ${String(clampedStep)} of ${String(total)}`;
85
+ let accessibilityText = `Step ${String(clampedStep)} of ${String(segmentCount)}`;
53
86
  if (getAccessibilityText) {
54
- accessibilityText = getAccessibilityText(clampedStep, total, isStepComplete);
87
+ accessibilityText = getAccessibilityText(clampedStep, segmentCount, isStepComplete);
55
88
  } else if (isStepComplete) {
56
- accessibilityText = `Step ${String(clampedStep)} of ${String(total)}, completed`;
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: total,
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
- {segments.map((state, index) => (
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 */