@magmamath/students-features 1.3.25 → 1.3.26-rc.1

package/dist/module/features/fluency/components/fluency-solving/FluencySolvingCard.js

@@ -0,0 +1,57 @@
+"use strict";
+
+import React, { useEffect } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { useUnit } from 'effector-react';
+import { FluencyNumpad } from "./FluencyNumpad.js";
+import { FluencyEquationCard } from "./FluencyEquationCard.js";
+import { SPACING } from '@magmamath/react-native-ui';
+import { useFluencyModePreset } from "../../hooks/useFluencyModePreset.js";
+import { useFluency } from "../../context/FluencyContext.js";
+import { isWeb } from "../../../../shared/common.constants.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const FluencySolvingCard = () => {
+  const {
+    model
+  } = useFluency();
+  const {
+    header,
+    icon: OperatorIcon
+  } = useFluencyModePreset();
+  const accentColor = header.streakColor.todayBorder; // TODO: add accentColor in mode preset.
+  const input = useUnit(model.input.$state);
+  useEffect(() => {
+    if (!isWeb) return;
+    const handleKeyDown = event => {
+      const isDigit = /^\d$/.test(event.key);
+      if (isDigit) return model.input.set({
+        value: Number(event.key)
+      });
+      if (event.key === 'Backspace') return model.input.set({
+        erase: 'latest'
+      });
+      if (event.key === 'Enter') return model.input.submitFx();
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, []);
+  return /*#__PURE__*/_jsxs(View, {
+    children: [/*#__PURE__*/_jsx(View, {
+      style: styles.wrapper,
+      children: /*#__PURE__*/_jsx(FluencyEquationCard, {
+        accentColor: accentColor,
+        OperatorIcon: OperatorIcon,
+        input: input
+      })
+    }), /*#__PURE__*/_jsx(FluencyNumpad, {})]
+  });
+};
+const styles = StyleSheet.create({
+  wrapper: {
+    alignItems: 'center',
+    paddingVertical: SPACING[400],
+    paddingHorizontal: SPACING[600],
+    marginTop: SPACING[300]
+  }
+});
+//# sourceMappingURL=FluencySolvingCard.js.map

package/dist/module/features/fluency/components/fluency-solving/FluencySolvingCard.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","View","StyleSheet","useUnit","FluencyNumpad","FluencyEquationCard","SPACING","useFluencyModePreset","useFluency","isWeb","jsx","_jsx","jsxs","_jsxs","FluencySolvingCard","model","header","icon","OperatorIcon","accentColor","streakColor","todayBorder","input","$state","handleKeyDown","event","isDigit","test","key","set","value","Number","erase","submitFx","window","addEventListener","removeEventListener","children","style","styles","wrapper","create","alignItems","paddingVertical","paddingHorizontal","marginTop"],"sourceRoot":"../../../../../../src","sources":["features/fluency/components/fluency-solving/FluencySolvingCard.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,SAAS,QAAQ,OAAO;AACxC,SAASC,IAAI,EAAEC,UAAU,QAAQ,cAAc;AAC/C,SAASC,OAAO,QAAQ,gBAAgB;AACxC,SAASC,aAAa,QAAQ,oBAAiB;AAC/C,SAASC,mBAAmB,QAAQ,0BAAuB;AAC3D,SAASC,OAAO,QAAQ,4BAA4B;AACpD,SAASC,oBAAoB,QAAQ,qCAAkC;AACvE,SAASC,UAAU,QAAQ,iCAA8B;AACzD,SAASC,KAAK,QAAQ,wCAAqC;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAE3D,OAAO,MAAMC,kBAAkB,GAAGA,CAAA,KAAM;EACtC,MAAM;IAAEC;EAAM,CAAC,GAAGP,UAAU,CAAC,CAAC;EAC9B,MAAM;IAAEQ,MAAM;IAAEC,IAAI,EAAEC;EAAa,CAAC,GAAGX,oBAAoB,CAAC,CAAC;EAC7D,MAAMY,WAAW,GAAGH,MAAM,CAACI,WAAW,CAACC,WAAW,EAAC;EACnD,MAAMC,KAAK,GAAGnB,OAAO,CAACY,KAAK,CAACO,KAAK,CAACC,MAAM,CAAC;EAEzCvB,SAAS,CAAC,MAAM;IACd,IAAI,CAACS,KAAK,EAAE;IAEZ,MAAMe,aAAa,GAAIC,KAAoB,IAAK;MAC9C,MAAMC,OAAO,GAAG,MAAM,CAACC,IAAI,CAACF,KAAK,CAACG,GAAG,CAAC;MACtC,IAAIF,OAAO,EAAE,OAAOX,KAAK,CAACO,KAAK,CAACO,GAAG,CAAC;QAAEC,KAAK,EAAEC,MAAM,CAACN,KAAK,CAACG,GAAG;MAAE,CAAC,CAAC;MACjE,IAAIH,KAAK,CAACG,GAAG,KAAK,WAAW,EAAE,OAAOb,KAAK,CAACO,KAAK,CAACO,GAAG,CAAC;QAAEG,KAAK,EAAE;MAAS,CAAC,CAAC;MAC1E,IAAIP,KAAK,CAACG,GAAG,KAAK,OAAO,EAAE,OAAOb,KAAK,CAACO,KAAK,CAACW,QAAQ,CAAC,CAAC;IAC1D,CAAC;IAEDC,MAAM,CAACC,gBAAgB,CAAC,SAAS,EAAEX,aAAa,CAAC;IACjD,OAAO,MAAMU,MAAM,CAACE,mBAAmB,CAAC,SAAS,EAAEZ,aAAa,CAAC;EACnE,CAAC,EAAE,EAAE,CAAC;EAEN,oBACEX,KAAA,CAACZ,IAAI;IAAAoC,QAAA,gBACH1B,IAAA,CAACV,IAAI;MAACqC,KAAK,EAAEC,MAAM,CAACC,OAAQ;MAAAH,QAAA,eAC1B1B,IAAA,CAACN,mBAAmB;QAACc,WAAW,EAAEA,WAAY;QAACD,YAAY,EAAEA,YAAa;QAACI,KAAK,EAAEA;MAAM,CAAE;IAAC,CACvF,CAAC,eAEPX,IAAA,CAACP,aAAa,IAAE,CAAC;EAAA,CACb,CAAC;AAEX,CAAC;AAED,MAAMmC,MAAM,GAAGrC,UAAU,CAACuC,MAAM,CAAC;EAC/BD,OAAO,EAAE;IACPE,UAAU,EAAE,QAAQ;IACpBC,eAAe,EAAErC,OAAO,CAAC,GAAG,CAAC;IAC7BsC,iBAAiB,EAAEtC,OAAO,CAAC,GAAG,CAAC;IAC/BuC,SAAS,EAAEvC,OAAO,CAAC,GAAG;EACxB;AACF,CAAC,CAAC","ignoreList":[]}

package/dist/module/features/fluency/components/fluency-solving/FluencySolvingHeader.js

@@ -0,0 +1,65 @@
+"use strict";
+
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { BORDER_RADIUS, Button, ButtonSize, ButtonVariant, COLORS, HeadingVariants, SHADOWS, SPACING, Typography } from '@magmamath/react-native-ui';
+import { useText } from "../../../../i18n/i18n.js";
+import { useFluencyModePreset } from "../../hooks/useFluencyModePreset.js";
+import { XCloseIcon } from "../../../../shared/icons/XCloseIcon.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const FluencySolvingHeader = ({
+  onClosePress
+}) => {
+  const t = useText();
+  const {
+    matrix,
+    header,
+    icon: OperatorIcon
+  } = useFluencyModePreset();
+  const accentColor = header.streakColor.todayBorder;
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    children: [/*#__PURE__*/_jsx(Button, {
+      variant: ButtonVariant.SECONDARY,
+      size: ButtonSize.LARGE,
+      icon: /*#__PURE__*/_jsx(XCloseIcon, {}),
+      onPress: onClosePress
+    }), /*#__PURE__*/_jsx(View, {
+      style: [styles.operatorBadge, {
+        backgroundColor: accentColor
+      }],
+      children: /*#__PURE__*/_jsx(OperatorIcon, {
+        color: COLORS.NEUTRAL_1,
+        size: 16
+      })
+    }), /*#__PURE__*/_jsx(Typography, {
+      variant: HeadingVariants.H4,
+      style: styles.title,
+      children: t(matrix.operatorName)
+    })]
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    height: 76,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 14,
+    paddingVertical: SPACING[400],
+    paddingHorizontal: SPACING[600],
+    ...SHADOWS[1]
+  },
+  operatorBadge: {
+    width: 32,
+    height: 32,
+    borderRadius: BORDER_RADIUS[200],
+    alignItems: 'center',
+    justifyContent: 'center',
+    ...SHADOWS[1]
+  },
+  title: {
+    color: COLORS.NEUTRAL_10,
+    fontWeight: '700'
+  }
+});
+//# sourceMappingURL=FluencySolvingHeader.js.map

package/dist/module/features/fluency/components/fluency-solving/FluencySolvingHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","StyleSheet","BORDER_RADIUS","Button","ButtonSize","ButtonVariant","COLORS","HeadingVariants","SHADOWS","SPACING","Typography","useText","useFluencyModePreset","XCloseIcon","jsx","_jsx","jsxs","_jsxs","FluencySolvingHeader","onClosePress","t","matrix","header","icon","OperatorIcon","accentColor","streakColor","todayBorder","style","styles","container","children","variant","SECONDARY","size","LARGE","onPress","operatorBadge","backgroundColor","color","NEUTRAL_1","H4","title","operatorName","create","height","flexDirection","alignItems","gap","paddingVertical","paddingHorizontal","width","borderRadius","justifyContent","NEUTRAL_10","fontWeight"],"sourceRoot":"../../../../../../src","sources":["features/fluency/components/fluency-solving/FluencySolvingHeader.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,UAAU,QAAQ,cAAc;AAC/C,SACEC,aAAa,EACbC,MAAM,EACNC,UAAU,EACVC,aAAa,EACbC,MAAM,EACNC,eAAe,EACfC,OAAO,EACPC,OAAO,EACPC,UAAU,QACL,4BAA4B;AACnC,SAASC,OAAO,QAAQ,0BAAuB;AAC/C,SAASC,oBAAoB,QAAQ,qCAAkC;AACvE,SAASC,UAAU,QAAQ,wCAAqC;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAMhE,OAAO,MAAMC,oBAAoB,GAAGA,CAAC;EAAEC;AAAwC,CAAC,KAAK;EACnF,MAAMC,CAAC,GAAGT,OAAO,CAAC,CAAC;EACnB,MAAM;IAAEU,MAAM;IAAEC,MAAM;IAAEC,IAAI,EAAEC;EAAa,CAAC,GAAGZ,oBAAoB,CAAC,CAAC;EACrE,MAAMa,WAAW,GAAGH,MAAM,CAACI,WAAW,CAACC,WAAW;EAElD,oBACEV,KAAA,CAACjB,IAAI;IAAC4B,KAAK,EAAEC,MAAM,CAACC,SAAU;IAAAC,QAAA,gBAC5BhB,IAAA,CAACZ,MAAM;MACL6B,OAAO,EAAE3B,aAAa,CAAC4B,SAAU;MACjCC,IAAI,EAAE9B,UAAU,CAAC+B,KAAM;MACvBZ,IAAI,eAAER,IAAA,CAACF,UAAU,IAAE,CAAE;MACrBuB,OAAO,EAAEjB;IAAa,CACvB,CAAC,eACFJ,IAAA,CAACf,IAAI;MAAC4B,KAAK,EAAE,CAACC,MAAM,CAACQ,aAAa,EAAE;QAAEC,eAAe,EAAEb;MAAY,CAAC,CAAE;MAAAM,QAAA,eACpEhB,IAAA,CAACS,YAAY;QAACe,KAAK,EAAEjC,MAAM,CAACkC,SAAU;QAACN,IAAI,EAAE;MAAG,CAAE;IAAC,CAC/C,CAAC,eACPnB,IAAA,CAACL,UAAU;MAACsB,OAAO,EAAEzB,eAAe,CAACkC,EAAG;MAACb,KAAK,EAAEC,MAAM,CAACa,KAAM;MAAAX,QAAA,EAC1DX,CAAC,CAACC,MAAM,CAACsB,YAAY;IAAC,CACb,CAAC;EAAA,CACT,CAAC;AAEX,CAAC;AAED,MAAMd,MAAM,GAAG5B,UAAU,CAAC2C,MAAM,CAAC;EAC/Bd,SAAS,EAAE;IACTe,MAAM,EAAE,EAAE;IACVC,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBC,GAAG,EAAE,EAAE;IACPC,eAAe,EAAExC,OAAO,CAAC,GAAG,CAAC;IAC7ByC,iBAAiB,EAAEzC,OAAO,CAAC,GAAG,CAAC;IAC/B,GAAGD,OAAO,CAAC,CAAC;EACd,CAAC;EACD6B,aAAa,EAAE;IACbc,KAAK,EAAE,EAAE;IACTN,MAAM,EAAE,EAAE;IACVO,YAAY,EAAElD,aAAa,CAAC,GAAG,CAAC;IAChC6C,UAAU,EAAE,QAAQ;IACpBM,cAAc,EAAE,QAAQ;IACxB,GAAG7C,OAAO,CAAC,CAAC;EACd,CAAC;EACDkC,KAAK,EAAE;IACLH,KAAK,EAAEjC,MAAM,CAACgD,UAAU;IACxBC,UAAU,EAAE;EACd;AACF,CAAC,CAAC","ignoreList":[]}

package/dist/module/features/fluency/components/fluency-solving/FluencySolvingProgress.js

@@ -0,0 +1,41 @@
+"use strict";
+
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { COLORS, SPACING } from '@magmamath/react-native-ui';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const FluencySolvingProgress = ({
+  total,
+  activeIndex
+}) => {
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.container,
+    children: Array.from({
+      length: total
+    }).map((_, index) => /*#__PURE__*/_jsx(View, {
+      style: index === activeIndex ? styles.dotActive : styles.dot
+    }, index))
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    gap: SPACING[200],
+    paddingHorizontal: SPACING[600],
+    paddingVertical: 14,
+    justifyContent: 'center'
+  },
+  dot: {
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+    backgroundColor: COLORS.NEUTRAL_4
+  },
+  dotActive: {
+    width: 34,
+    height: 12,
+    backgroundColor: COLORS.NEUTRAL_10,
+    borderRadius: 9999
+  }
+});
+//# sourceMappingURL=FluencySolvingProgress.js.map

package/dist/module/features/fluency/components/fluency-solving/FluencySolvingProgress.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","StyleSheet","COLORS","SPACING","jsx","_jsx","FluencySolvingProgress","total","activeIndex","style","styles","container","children","Array","from","length","map","_","index","dotActive","dot","create","flexDirection","gap","paddingHorizontal","paddingVertical","justifyContent","width","height","borderRadius","backgroundColor","NEUTRAL_4","NEUTRAL_10"],"sourceRoot":"../../../../../../src","sources":["features/fluency/components/fluency-solving/FluencySolvingProgress.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,UAAU,QAAQ,cAAc;AAC/C,SAASC,MAAM,EAAEC,OAAO,QAAQ,4BAA4B;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAO5D,OAAO,MAAMC,sBAAsB,GAAGA,CAAC;EAAEC,KAAK;EAAEC;AAAyC,CAAC,KAAK;EAC7F,oBACEH,IAAA,CAACL,IAAI;IAACS,KAAK,EAAEC,MAAM,CAACC,SAAU;IAAAC,QAAA,EAC3BC,KAAK,CAACC,IAAI,CAAC;MAAEC,MAAM,EAAER;IAAM,CAAC,CAAC,CAACS,GAAG,CAAC,CAACC,CAAC,EAAEC,KAAK,kBAC1Cb,IAAA,CAACL,IAAI;MAAaS,KAAK,EAAES,KAAK,KAAKV,WAAW,GAAGE,MAAM,CAACS,SAAS,GAAGT,MAAM,CAACU;IAAI,GAApEF,KAAsE,CAClF;EAAC,CACE,CAAC;AAEX,CAAC;AAED,MAAMR,MAAM,GAAGT,UAAU,CAACoB,MAAM,CAAC;EAC/BV,SAAS,EAAE;IACTW,aAAa,EAAE,KAAK;IACpBC,GAAG,EAAEpB,OAAO,CAAC,GAAG,CAAC;IACjBqB,iBAAiB,EAAErB,OAAO,CAAC,GAAG,CAAC;IAC/BsB,eAAe,EAAE,EAAE;IACnBC,cAAc,EAAE;EAClB,CAAC;EACDN,GAAG,EAAE;IACHO,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,EAAE;IACVC,YAAY,EAAE,CAAC;IACfC,eAAe,EAAE5B,MAAM,CAAC6B;EAC1B,CAAC;EACDZ,SAAS,EAAE;IACTQ,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,EAAE;IACVE,eAAe,EAAE5B,MAAM,CAAC8B,UAAU;IAClCH,YAAY,EAAE;EAChB;AACF,CAAC,CAAC","ignoreList":[]}

package/dist/module/features/fluency/components/matrix/FluencyMatrix.js

@@ -0,0 +1,30 @@
+"use strict";
+
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { BORDER_RADIUS, COLORS, SHADOWS, SPACING } from '@magmamath/react-native-ui';
+import { MatrixLegend } from "./components/MatrixLegend.js";
+import { MatrixFill } from "./components/MatrixFill.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const FluencyMatrix = () => /*#__PURE__*/_jsxs(View, {
+  style: styles.container,
+  children: [/*#__PURE__*/_jsx(View, {
+    style: styles.body,
+    children: /*#__PURE__*/_jsx(MatrixFill, {})
+  }), /*#__PURE__*/_jsx(MatrixLegend, {})]
+});
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: COLORS.NEUTRAL_1,
+    borderRadius: BORDER_RADIUS[400],
+    overflow: 'hidden',
+    ...SHADOWS[1]
+  },
+  body: {
+    flex: 1,
+    padding: SPACING[300],
+    minHeight: 354
+  }
+});
+//# sourceMappingURL=FluencyMatrix.js.map

package/dist/module/features/fluency/components/matrix/FluencyMatrix.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","StyleSheet","BORDER_RADIUS","COLORS","SHADOWS","SPACING","MatrixLegend","MatrixFill","jsx","_jsx","jsxs","_jsxs","FluencyMatrix","style","styles","container","children","body","create","flex","backgroundColor","NEUTRAL_1","borderRadius","overflow","padding","minHeight"],"sourceRoot":"../../../../../../src","sources":["features/fluency/components/matrix/FluencyMatrix.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,UAAU,QAAQ,cAAc;AAC/C,SAASC,aAAa,EAAEC,MAAM,EAAEC,OAAO,EAAEC,OAAO,QAAQ,4BAA4B;AACpF,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,UAAU,QAAQ,4BAAyB;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEpD,OAAO,MAAMC,aAAa,GAAGA,CAAA,kBAC3BD,KAAA,CAACX,IAAI;EAACa,KAAK,EAAEC,MAAM,CAACC,SAAU;EAAAC,QAAA,gBAC5BP,IAAA,CAACT,IAAI;IAACa,KAAK,EAAEC,MAAM,CAACG,IAAK;IAAAD,QAAA,eACvBP,IAAA,CAACF,UAAU,IAAE;EAAC,CACV,CAAC,eACPE,IAAA,CAACH,YAAY,IAAE,CAAC;AAAA,CACZ,CACP;AAED,MAAMQ,MAAM,GAAGb,UAAU,CAACiB,MAAM,CAAC;EAC/BH,SAAS,EAAE;IACTI,IAAI,EAAE,CAAC;IACPC,eAAe,EAAEjB,MAAM,CAACkB,SAAS;IACjCC,YAAY,EAAEpB,aAAa,CAAC,GAAG,CAAC;IAChCqB,QAAQ,EAAE,QAAQ;IAClB,GAAGnB,OAAO,CAAC,CAAC;EACd,CAAC;EACDa,IAAI,EAAE;IACJE,IAAI,EAAE,CAAC;IACPK,OAAO,EAAEnB,OAAO,CAAC,GAAG,CAAC;IACrBoB,SAAS,EAAE;EACb;AACF,CAAC,CAAC","ignoreList":[]}

package/dist/module/features/fluency/components/matrix/components/MatrixCell.js

@@ -0,0 +1,41 @@
+"use strict";
+
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { BORDER_RADIUS, COLORS } from '@magmamath/react-native-ui';
+import { getCellBackground, getCellColorByScore, getCellLabel, getMasteryLevel } from "../../../fluency.helpers.js";
+import { FluencyMasteryLevel } from "../../../fluency.constants.js";
+import { StarFillIcon } from "../../../assets/StarFillIcon.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const MatrixCell = ({
+  row,
+  col,
+  score,
+  mastery
+}) => {
+  const label = getCellLabel(row, col);
+  const isMastered = score !== null && getMasteryLevel(score) === FluencyMasteryLevel.MASTERED;
+  const background = score !== null ? getCellColorByScore(score, mastery) : getCellBackground(row, col);
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.cell, {
+      backgroundColor: background
+    }],
+    children: [isMastered && /*#__PURE__*/_jsx(StarFillIcon, {}), label !== null && /*#__PURE__*/_jsx(Text, {
+      style: styles.headerText,
+      children: label
+    })]
+  });
+};
+const styles = StyleSheet.create({
+  cell: {
+    flex: 1,
+    borderRadius: BORDER_RADIUS[100],
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  headerText: {
+    fontSize: 13,
+    color: COLORS.NEUTRAL_2
+  }
+});
+//# sourceMappingURL=MatrixCell.js.map

package/dist/module/features/fluency/components/matrix/components/MatrixCell.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","Text","StyleSheet","BORDER_RADIUS","COLORS","getCellBackground","getCellColorByScore","getCellLabel","getMasteryLevel","FluencyMasteryLevel","StarFillIcon","jsx","_jsx","jsxs","_jsxs","MatrixCell","row","col","score","mastery","label","isMastered","MASTERED","background","style","styles","cell","backgroundColor","children","headerText","create","flex","borderRadius","alignItems","justifyContent","fontSize","color","NEUTRAL_2"],"sourceRoot":"../../../../../../../src","sources":["features/fluency/components/matrix/components/MatrixCell.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,IAAI,EAAEC,UAAU,QAAQ,cAAc;AACrD,SAASC,aAAa,EAAEC,MAAM,QAAQ,4BAA4B;AAClE,SACEC,iBAAiB,EACjBC,mBAAmB,EACnBC,YAAY,EACZC,eAAe,QACV,6BAA0B;AACjC,SAASC,mBAAmB,QAAQ,+BAA4B;AAChE,SAASC,YAAY,QAAQ,iCAA8B;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAU3D,OAAO,MAAMC,UAAU,GAAGA,CAAC;EAAEC,GAAG;EAAEC,GAAG;EAAEC,KAAK;EAAEC;AAAyB,CAAC,KAAK;EAC3E,MAAMC,KAAK,GAAGb,YAAY,CAACS,GAAG,EAAEC,GAAG,CAAC;EACpC,MAAMI,UAAU,GAAGH,KAAK,KAAK,IAAI,IAAIV,eAAe,CAACU,KAAK,CAAC,KAAKT,mBAAmB,CAACa,QAAQ;EAC5F,MAAMC,UAAU,GACdL,KAAK,KAAK,IAAI,GAAGZ,mBAAmB,CAACY,KAAK,EAAEC,OAAO,CAAC,GAAGd,iBAAiB,CAACW,GAAG,EAAEC,GAAG,CAAC;EAEpF,oBACEH,KAAA,CAACd,IAAI;IAACwB,KAAK,EAAE,CAACC,MAAM,CAACC,IAAI,EAAE;MAAEC,eAAe,EAAEJ;IAAW,CAAC,CAAE;IAAAK,QAAA,GACzDP,UAAU,iBAAIT,IAAA,CAACF,YAAY,IAAE,CAAC,EAC9BU,KAAK,KAAK,IAAI,iBAAIR,IAAA,CAACX,IAAI;MAACuB,KAAK,EAAEC,MAAM,CAACI,UAAW;MAAAD,QAAA,EAAER;IAAK,CAAO,CAAC;EAAA,CAC7D,CAAC;AAEX,CAAC;AAED,MAAMK,MAAM,GAAGvB,UAAU,CAAC4B,MAAM,CAAC;EAC/BJ,IAAI,EAAE;IACJK,IAAI,EAAE,CAAC;IACPC,YAAY,EAAE7B,aAAa,CAAC,GAAG,CAAC;IAChC8B,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDL,UAAU,EAAE;IACVM,QAAQ,EAAE,EAAE;IACZC,KAAK,EAAEhC,MAAM,CAACiC;EAChB;AACF,CAAC,CAAC","ignoreList":[]}

package/dist/module/features/fluency/components/matrix/components/MatrixFill.js

@@ -0,0 +1,51 @@
+"use strict";
+
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { SPACING } from '@magmamath/react-native-ui';
+import { MatrixCell } from "./MatrixCell.js";
+import { MATRIX_SIZE } from "../../../fluency.constants.js";
+import { useFluencyModePreset } from "../../../hooks/useFluencyModePreset.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const MOCK_SCORES = {
+  '1-1': 90,
+  '2-3': 70,
+  '3-5': 50,
+  '5-2': 30,
+  '4-4': 10,
+  '1-5': 85,
+  '3-3': 45
+};
+export const MatrixFill = () => {
+  const {
+    matrix
+  } = useFluencyModePreset();
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.grid,
+    children: Array.from({
+      length: MATRIX_SIZE
+    }, (_, row) => /*#__PURE__*/_jsx(View, {
+      style: styles.row,
+      children: Array.from({
+        length: MATRIX_SIZE
+      }, (_, col) => /*#__PURE__*/_jsx(MatrixCell, {
+        row: row,
+        col: col,
+        score: MOCK_SCORES[`${row}-${col}`] ?? null,
+        mastery: matrix.mastery
+      }, col))
+    }, row))
+  });
+};
+const styles = StyleSheet.create({
+  grid: {
+    flex: 1,
+    gap: SPACING[50]
+  },
+  row: {
+    flex: 1,
+    flexDirection: 'row',
+    gap: SPACING[50]
+  }
+});
+//# sourceMappingURL=MatrixFill.js.map

package/dist/module/features/fluency/components/matrix/components/MatrixFill.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","StyleSheet","SPACING","MatrixCell","MATRIX_SIZE","useFluencyModePreset","jsx","_jsx","MOCK_SCORES","MatrixFill","matrix","style","styles","grid","children","Array","from","length","_","row","col","score","mastery","create","flex","gap","flexDirection"],"sourceRoot":"../../../../../../../src","sources":["features/fluency/components/matrix/components/MatrixFill.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,UAAU,QAAQ,cAAc;AAC/C,SAASC,OAAO,QAAQ,4BAA4B;AACpD,SAASC,UAAU,QAAQ,iBAAc;AACzC,SAASC,WAAW,QAAQ,+BAA4B;AACxD,SAASC,oBAAoB,QAAQ,wCAAqC;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAE1E,MAAMC,WAAmC,GAAG;EAC1C,KAAK,EAAE,EAAE;EACT,KAAK,EAAE,EAAE;EACT,KAAK,EAAE,EAAE;EACT,KAAK,EAAE,EAAE;EACT,KAAK,EAAE,EAAE;EACT,KAAK,EAAE,EAAE;EACT,KAAK,EAAE;AACT,CAAC;AAED,OAAO,MAAMC,UAAU,GAAGA,CAAA,KAAM;EAC9B,MAAM;IAAEC;EAAO,CAAC,GAAGL,oBAAoB,CAAC,CAAC;EAEzC,oBACEE,IAAA,CAACP,IAAI;IAACW,KAAK,EAAEC,MAAM,CAACC,IAAK;IAAAC,QAAA,EACtBC,KAAK,CAACC,IAAI,CAAC;MAAEC,MAAM,EAAEb;IAAY,CAAC,EAAE,CAACc,CAAC,EAAEC,GAAG,kBAC1CZ,IAAA,CAACP,IAAI;MAAWW,KAAK,EAAEC,MAAM,CAACO,GAAI;MAAAL,QAAA,EAC/BC,KAAK,CAACC,IAAI,CAAC;QAAEC,MAAM,EAAEb;MAAY,CAAC,EAAE,CAACc,CAAC,EAAEE,GAAG,kBAC1Cb,IAAA,CAACJ,UAAU;QAETgB,GAAG,EAAEA,GAAI;QACTC,GAAG,EAAEA,GAAI;QACTC,KAAK,EAAEb,WAAW,CAAC,GAAGW,GAAG,IAAIC,GAAG,EAAE,CAAC,IAAI,IAAK;QAC5CE,OAAO,EAAEZ,MAAM,CAACY;MAAQ,GAJnBF,GAKN,CACF;IAAC,GATOD,GAUL,CACP;EAAC,CACE,CAAC;AAEX,CAAC;AAED,MAAMP,MAAM,GAAGX,UAAU,CAACsB,MAAM,CAAC;EAC/BV,IAAI,EAAE;IACJW,IAAI,EAAE,CAAC;IACPC,GAAG,EAAEvB,OAAO,CAAC,EAAE;EACjB,CAAC;EACDiB,GAAG,EAAE;IACHK,IAAI,EAAE,CAAC;IACPE,aAAa,EAAE,KAAK;IACpBD,GAAG,EAAEvB,OAAO,CAAC,EAAE;EACjB;AACF,CAAC,CAAC","ignoreList":[]}

package/dist/module/features/fluency/components/matrix/components/MatrixLegend.js

@@ -0,0 +1,99 @@
+"use strict";
+
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { BORDER_RADIUS, Button, ButtonSize, ButtonVariant, COLORS, PlayIcon, SHADOWS, SPACING } from '@magmamath/react-native-ui';
+import { useFluencyModePreset } from "../../../hooks/useFluencyModePreset.js";
+import { useFluency } from "../../../context/FluencyContext.js";
+import { useText } from "../../../../../i18n/i18n.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const LEGEND_DOT_SIZE = 14;
+const LEGEND_DOT_BORDER_RADIUS = 3;
+const LEGEND_LABEL_FONT_SIZE = 12;
+export const MatrixLegend = ({}) => {
+  const t = useText();
+  const {
+    matrix,
+    buttonColor,
+    legendItems
+  } = useFluencyModePreset();
+  const {
+    onPracticePress
+  } = useFluency();
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: styles.legendItems,
+      children: legendItems.map(item => /*#__PURE__*/_jsxs(View, {
+        style: styles.legendItem,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: [styles.legendDot, {
+            backgroundColor: item.color
+          }, item.withBorder && styles.legendDotBorder]
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.legendLabel,
+          children: item.label
+        })]
+      }, item.label))
+    }), /*#__PURE__*/_jsx(Button, {
+      onPress: onPracticePress,
+      variant: ButtonVariant.PRIMARY,
+      size: ButtonSize.MEDIUM,
+      colorScheme: buttonColor,
+      icon: /*#__PURE__*/_jsx(PlayIcon, {
+        color: COLORS.NEUTRAL_1
+      }),
+      raiseLevel: 3,
+      style: {
+        container: styles.practiceButton,
+        text: styles.practiceButtonText
+      },
+      children: `${t('student.fluency.practice')} ${t(matrix.operatorName)}`
+    })]
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    height: 65,
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    justifyContent: 'space-between',
+    backgroundColor: COLORS.NEUTRAL_2,
+    borderBottomColor: COLORS.NEUTRAL_5,
+    paddingHorizontal: SPACING[300],
+    paddingVertical: SPACING[300],
+    borderTopLeftRadius: BORDER_RADIUS[400],
+    borderTopRightRadius: BORDER_RADIUS[400],
+    ...SHADOWS[1]
+  },
+  legendItems: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING[400]
+  },
+  legendItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SPACING[150]
+  },
+  legendDot: {
+    width: LEGEND_DOT_SIZE,
+    height: LEGEND_DOT_SIZE,
+    borderRadius: LEGEND_DOT_BORDER_RADIUS
+  },
+  legendDotBorder: {
+    borderWidth: 0.5,
+    borderColor: COLORS.NEUTRAL_5
+  },
+  legendLabel: {
+    fontSize: LEGEND_LABEL_FONT_SIZE,
+    color: COLORS.NEUTRAL_7
+  },
+  practiceButton: {
+    alignSelf: 'center'
+  },
+  practiceButtonText: {
+    textTransform: 'uppercase'
+  }
+});
+//# sourceMappingURL=MatrixLegend.js.map

package/dist/module/features/fluency/components/matrix/components/MatrixLegend.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","Text","StyleSheet","BORDER_RADIUS","Button","ButtonSize","ButtonVariant","COLORS","PlayIcon","SHADOWS","SPACING","useFluencyModePreset","useFluency","useText","jsx","_jsx","jsxs","_jsxs","LEGEND_DOT_SIZE","LEGEND_DOT_BORDER_RADIUS","LEGEND_LABEL_FONT_SIZE","MatrixLegend","t","matrix","buttonColor","legendItems","onPracticePress","style","styles","container","children","map","item","legendItem","legendDot","backgroundColor","color","withBorder","legendDotBorder","legendLabel","label","onPress","variant","PRIMARY","size","MEDIUM","colorScheme","icon","NEUTRAL_1","raiseLevel","practiceButton","text","practiceButtonText","operatorName","create","height","flexDirection","alignItems","justifyContent","NEUTRAL_2","borderBottomColor","NEUTRAL_5","paddingHorizontal","paddingVertical","borderTopLeftRadius","borderTopRightRadius","gap","width","borderRadius","borderWidth","borderColor","fontSize","NEUTRAL_7","alignSelf","textTransform"],"sourceRoot":"../../../../../../../src","sources":["features/fluency/components/matrix/components/MatrixLegend.tsx"],"mappings":"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","ignoreList":[]}

package/dist/module/features/fluency/components/select-math-operator/MathOperatorRow.js

@@ -0,0 +1,37 @@
+"use strict";
+
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { COLORS, SelectOption, SPACING } from '@magmamath/react-native-ui';
+import { ProgressBar } from "./ProgressBar.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const MathOperatorRow = ({
+  title,
+  icon,
+  progress,
+  color,
+  selected,
+  onSelect,
+  showDivider = true
+}) => /*#__PURE__*/_jsxs(View, {
+  children: [/*#__PURE__*/_jsx(SelectOption, {
+    title: title,
+    icon: icon,
+    color: color,
+    selected: selected,
+    onPress: onSelect
+  }), /*#__PURE__*/_jsx(ProgressBar, {
+    progress: progress,
+    color: color
+  }), showDivider && /*#__PURE__*/_jsx(View, {
+    style: styles.divider
+  })]
+});
+const styles = StyleSheet.create({
+  divider: {
+    height: 1,
+    backgroundColor: COLORS.NEUTRAL_3,
+    marginVertical: SPACING[600]
+  }
+});
+//# sourceMappingURL=MathOperatorRow.js.map

package/dist/module/features/fluency/components/select-math-operator/MathOperatorRow.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","StyleSheet","View","COLORS","SelectOption","SPACING","ProgressBar","jsx","_jsx","jsxs","_jsxs","MathOperatorRow","title","icon","progress","color","selected","onSelect","showDivider","children","onPress","style","styles","divider","create","height","backgroundColor","NEUTRAL_3","marginVertical"],"sourceRoot":"../../../../../../src","sources":["features/fluency/components/select-math-operator/MathOperatorRow.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAqB,OAAO;AACxC,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAC/C,SAASC,MAAM,EAAEC,YAAY,EAAqBC,OAAO,QAAQ,4BAA4B;AAC7F,SAASC,WAAW,QAAQ,kBAAe;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAY3C,OAAO,MAAMC,eAAe,GAAGA,CAAC;EAC9BC,KAAK;EACLC,IAAI;EACJC,QAAQ;EACRC,KAAK;EACLC,QAAQ;EACRC,QAAQ;EACRC,WAAW,GAAG;AACM,CAAC,kBACrBR,KAAA,CAACR,IAAI;EAAAiB,QAAA,gBACHX,IAAA,CAACJ,YAAY;IAACQ,KAAK,EAAEA,KAAM;IAACC,IAAI,EAAEA,IAAK;IAACE,KAAK,EAAEA,KAAM;IAACC,QAAQ,EAAEA,QAAS;IAACI,OAAO,EAAEH;EAAS,CAAE,CAAC,eAC/FT,IAAA,CAACF,WAAW;IAACQ,QAAQ,EAAEA,QAAS;IAACC,KAAK,EAAEA;EAAM,CAAE,CAAC,EAChDG,WAAW,iBAAIV,IAAA,CAACN,IAAI;IAACmB,KAAK,EAAEC,MAAM,CAACC;EAAQ,CAAE,CAAC;AAAA,CAC3C,CACP;AAED,MAAMD,MAAM,GAAGrB,UAAU,CAACuB,MAAM,CAAC;EAC/BD,OAAO,EAAE;IACPE,MAAM,EAAE,CAAC;IACTC,eAAe,EAAEvB,MAAM,CAACwB,SAAS;IACjCC,cAAc,EAAEvB,OAAO,CAAC,GAAG;EAC7B;AACF,CAAC,CAAC","ignoreList":[]}

package/dist/module/features/fluency/components/select-math-operator/ProgressBar.js

@@ -0,0 +1,118 @@
+"use strict";
+
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { BORDER_RADIUS, COLORS, HeadingVariants, SelectOptionColor, SPACING, Typography } from '@magmamath/react-native-ui';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const PROGRESS_COLOR_SHADES = {
+  [SelectOptionColor.GREEN]: {
+    low: COLORS.GREEN_2,
+    medium: COLORS.GREEN_3,
+    high: COLORS.GREEN_6,
+    max: COLORS.GREEN_7
+  },
+  [SelectOptionColor.ORANGE]: {
+    low: COLORS.ORANGE_2,
+    medium: COLORS.ORANGE_3,
+    high: COLORS.ORANGE_6,
+    max: COLORS.ORANGE_7
+  },
+  [SelectOptionColor.BLUE]: {
+    low: COLORS.BLUE_2,
+    medium: COLORS.BLUE_3,
+    high: COLORS.BLUE_6,
+    max: COLORS.BLUE_7
+  },
+  [SelectOptionColor.RED]: {
+    low: COLORS.RED_2,
+    medium: COLORS.RED_3,
+    high: COLORS.RED_6,
+    max: COLORS.RED_7
+  },
+  [SelectOptionColor.YELLOW]: {
+    low: COLORS.YELLOW_2,
+    medium: COLORS.YELLOW_3,
+    high: COLORS.YELLOW_6,
+    max: COLORS.YELLOW_7
+  },
+  [SelectOptionColor.PURPLE]: {
+    low: COLORS.PURPLE_2,
+    medium: COLORS.PURPLE_3,
+    high: COLORS.PURPLE_6,
+    max: COLORS.PURPLE_7
+  },
+  [SelectOptionColor.GREY]: {
+    low: COLORS.NEUTRAL_2,
+    medium: COLORS.NEUTRAL_3,
+    high: COLORS.NEUTRAL_6,
+    max: COLORS.NEUTRAL_7
+  },
+  [SelectOptionColor.SUNSET]: {
+    low: COLORS.RED_2,
+    medium: COLORS.RED_3,
+    high: COLORS.RED_6,
+    max: COLORS.RED_7
+  }
+};
+const PRIMARY_COLOR_MAP = {
+  [SelectOptionColor.GREEN]: COLORS.PRIMARY_GREEN,
+  [SelectOptionColor.ORANGE]: COLORS.PRIMARY_ORANGE,
+  [SelectOptionColor.BLUE]: COLORS.PRIMARY_BLUE,
+  [SelectOptionColor.RED]: COLORS.PRIMARY_RED,
+  [SelectOptionColor.YELLOW]: COLORS.PRIMARY_YELLOW,
+  [SelectOptionColor.PURPLE]: COLORS.PRIMARY_PURPLE,
+  [SelectOptionColor.GREY]: COLORS.NEUTRAL_6,
+  [SelectOptionColor.SUNSET]: COLORS.PRIMARY_RED
+};
+const getFillColor = (shades, progress) => {
+  if (progress <= 10) return shades.low;
+  if (progress <= 20) return shades.medium;
+  if (progress <= 80) return shades.high;
+  return shades.max;
+};
+export const ProgressBar = ({
+  progress,
+  color = SelectOptionColor.GREEN
+}) => {
+  const normalized = Math.round(Math.min(100, Math.max(0, progress)));
+  const fillColor = getFillColor(PROGRESS_COLOR_SHADES[color], normalized);
+  const textColor = PRIMARY_COLOR_MAP[color];
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: styles.track,
+      children: /*#__PURE__*/_jsx(View, {
+        style: [styles.fill, {
+          backgroundColor: fillColor,
+          width: `${normalized}%`
+        }]
+      })
+    }), /*#__PURE__*/_jsxs(Typography, {
+      variant: HeadingVariants.H10,
+      style: {
+        color: textColor
+      },
+      children: [normalized, "%"]
+    })]
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    marginTop: SPACING[200],
+    gap: SPACING[200],
+    alignItems: 'center'
+  },
+  track: {
+    flex: 1,
+    height: 18,
+    backgroundColor: COLORS.NEUTRAL_3,
+    borderRadius: BORDER_RADIUS[450],
+    overflow: 'hidden'
+  },
+  fill: {
+    height: '100%',
+    borderRadius: BORDER_RADIUS[450]
+  }
+});
+//# sourceMappingURL=ProgressBar.js.map

package/dist/module/features/fluency/components/select-math-operator/ProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","StyleSheet","View","BORDER_RADIUS","COLORS","HeadingVariants","SelectOptionColor","SPACING","Typography","jsx","_jsx","jsxs","_jsxs","PROGRESS_COLOR_SHADES","GREEN","low","GREEN_2","medium","GREEN_3","high","GREEN_6","max","GREEN_7","ORANGE","ORANGE_2","ORANGE_3","ORANGE_6","ORANGE_7","BLUE","BLUE_2","BLUE_3","BLUE_6","BLUE_7","RED","RED_2","RED_3","RED_6","RED_7","YELLOW","YELLOW_2","YELLOW_3","YELLOW_6","YELLOW_7","PURPLE","PURPLE_2","PURPLE_3","PURPLE_6","PURPLE_7","GREY","NEUTRAL_2","NEUTRAL_3","NEUTRAL_6","NEUTRAL_7","SUNSET","PRIMARY_COLOR_MAP","PRIMARY_GREEN","PRIMARY_ORANGE","PRIMARY_BLUE","PRIMARY_RED","PRIMARY_YELLOW","PRIMARY_PURPLE","getFillColor","shades","progress","ProgressBar","color","normalized","Math","round","min","fillColor","textColor","style","styles","container","children","track","fill","backgroundColor","width","variant","H10","create","flexDirection","marginTop","gap","alignItems","flex","height","borderRadius","overflow"],"sourceRoot":"../../../../../../src","sources":["features/fluency/components/select-math-operator/ProgressBar.tsx"],"mappings":"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","ignoreList":[]}