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

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

@@ -0,0 +1,112 @@
+"use strict";
+
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { BORDER_RADIUS, Button, ButtonSize, ButtonVariant, COLORS, PlayIcon, SPACING } from '@magmamath/react-native-ui';
+import { useFluencyModeUIPreset } from "../../../hooks/useFluencyModeUIPreset.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 {
+    mastery,
+    buttonColor,
+    operatorName
+  } = useFluencyModeUIPreset();
+  const legendItems = [{
+    label: 'Not started',
+    color: COLORS.NEUTRAL_2,
+    withBorder: true
+  }, {
+    label: 'Learning',
+    color: mastery.learning
+  }, {
+    label: 'Growing',
+    color: mastery.growing
+  }, {
+    label: 'Strong',
+    color: mastery.strong
+  }, {
+    label: 'Mastered',
+    color: mastery.mastered
+  }];
+  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
+    // TODO: Wire to the practice action when the model gains a startPractice event.
+    , {
+      onPress: () => {},
+      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: `Practice ${operatorName}`
+    })]
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    height: 65,
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    justifyContent: 'space-between',
+    backgroundColor: COLORS.NEUTRAL_2,
+    borderBottomWidth: 1,
+    borderBottomColor: COLORS.NEUTRAL_5,
+    paddingHorizontal: SPACING[300],
+    paddingVertical: SPACING[300],
+    borderTopLeftRadius: BORDER_RADIUS[400],
+    borderTopRightRadius: BORDER_RADIUS[400]
+  },
+  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","SPACING","useFluencyModeUIPreset","jsx","_jsx","jsxs","_jsxs","LEGEND_DOT_SIZE","LEGEND_DOT_BORDER_RADIUS","LEGEND_LABEL_FONT_SIZE","MatrixLegend","mastery","buttonColor","operatorName","legendItems","label","color","NEUTRAL_2","withBorder","learning","growing","strong","mastered","style","styles","container","children","map","item","legendItem","legendDot","backgroundColor","legendDotBorder","legendLabel","onPress","variant","PRIMARY","size","MEDIUM","colorScheme","icon","NEUTRAL_1","raiseLevel","practiceButton","text","practiceButtonText","create","height","flexDirection","alignItems","justifyContent","borderBottomWidth","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":[]}

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

@@ -0,0 +1,69 @@
+"use strict";
+
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { BORDER_RADIUS, COLORS, CrossIcon, MinusIcon, PlusIcon, SelectOptionColor, SHADOWS, SPACING } from '@magmamath/react-native-ui';
+import { useUnit } from 'effector-react';
+import { FluencyMode } from "../../fluency.constants.js";
+import { fluencyModel } from "../../model/fluency.instance.js";
+import { MathOperatorRow } from "./MathOperatorRow.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const OPERATOR_CONFIG = [{
+  mode: FluencyMode.ADDITION,
+  title: 'Addition',
+  Icon: PlusIcon,
+  color: SelectOptionColor.GREEN,
+  progress: 72
+}, {
+  mode: FluencyMode.SUBTRACTION,
+  title: 'Subtraction',
+  Icon: MinusIcon,
+  color: SelectOptionColor.ORANGE,
+  progress: 45
+}, {
+  mode: FluencyMode.MULTIPLICATION,
+  title: 'Multiplication',
+  Icon: CrossIcon,
+  color: SelectOptionColor.BLUE,
+  progress: 18
+},
+// TODO: Replace with DivisionIcon once added to rn-ui — division needs its own symbol (÷).
+{
+  mode: FluencyMode.DIVISION,
+  title: 'Division',
+  Icon: MinusIcon,
+  color: SelectOptionColor.PURPLE,
+  progress: 33
+}];
+export const SelectMathOperator = ({}) => {
+  const {
+    mode
+  } = useUnit({
+    mode: fluencyModel.$mode
+  });
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.container,
+    children: OPERATOR_CONFIG.map((op, index) => /*#__PURE__*/_jsx(MathOperatorRow, {
+      title: op.title,
+      icon: /*#__PURE__*/_jsx(op.Icon, {
+        color: mode === op.mode ? COLORS.NEUTRAL_1 : undefined
+      }),
+      progress: op.progress,
+      color: op.color,
+      selected: mode === op.mode,
+      onSelect: () => fluencyModel.setMode(op.mode),
+      showDivider: index < OPERATOR_CONFIG.length - 1
+    }, op.mode))
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    width: 270,
+    paddingVertical: SPACING[400],
+    paddingHorizontal: SPACING[200],
+    borderRadius: BORDER_RADIUS[400],
+    backgroundColor: COLORS.NEUTRAL_1,
+    ...SHADOWS[1]
+  }
+});
+//# sourceMappingURL=SelectMathOperator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","StyleSheet","View","BORDER_RADIUS","COLORS","CrossIcon","MinusIcon","PlusIcon","SelectOptionColor","SHADOWS","SPACING","useUnit","FluencyMode","fluencyModel","MathOperatorRow","jsx","_jsx","OPERATOR_CONFIG","mode","ADDITION","title","Icon","color","GREEN","progress","SUBTRACTION","ORANGE","MULTIPLICATION","BLUE","DIVISION","PURPLE","SelectMathOperator","$mode","style","styles","container","children","map","op","index","icon","NEUTRAL_1","undefined","selected","onSelect","setMode","showDivider","length","create","width","paddingVertical","paddingHorizontal","borderRadius","backgroundColor"],"sourceRoot":"../../../../../../src","sources":["features/fluency/components/select-math-operator/SelectMathOperator.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAC/C,SACEC,aAAa,EACbC,MAAM,EACNC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACRC,iBAAiB,EACjBC,OAAO,EACPC,OAAO,QACF,4BAA4B;AACnC,SAASC,OAAO,QAAQ,gBAAgB;AACxC,SAASC,WAAW,QAAQ,4BAAyB;AACrD,SAASC,YAAY,QAAQ,iCAA8B;AAC3D,SAASC,eAAe,QAAQ,sBAAmB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAUnD,MAAMC,eAAiC,GAAG,CACxC;EACEC,IAAI,EAAEN,WAAW,CAACO,QAAQ;EAC1BC,KAAK,EAAE,UAAU;EACjBC,IAAI,EAAEd,QAAQ;EACde,KAAK,EAAEd,iBAAiB,CAACe,KAAK;EAC9BC,QAAQ,EAAE;AACZ,CAAC,EACD;EACEN,IAAI,EAAEN,WAAW,CAACa,WAAW;EAC7BL,KAAK,EAAE,aAAa;EACpBC,IAAI,EAAEf,SAAS;EACfgB,KAAK,EAAEd,iBAAiB,CAACkB,MAAM;EAC/BF,QAAQ,EAAE;AACZ,CAAC,EACD;EACEN,IAAI,EAAEN,WAAW,CAACe,cAAc;EAChCP,KAAK,EAAE,gBAAgB;EACvBC,IAAI,EAAEhB,SAAS;EACfiB,KAAK,EAAEd,iBAAiB,CAACoB,IAAI;EAC7BJ,QAAQ,EAAE;AACZ,CAAC;AACD;AACA;EACEN,IAAI,EAAEN,WAAW,CAACiB,QAAQ;EAC1BT,KAAK,EAAE,UAAU;EACjBC,IAAI,EAAEf,SAAS;EACfgB,KAAK,EAAEd,iBAAiB,CAACsB,MAAM;EAC/BN,QAAQ,EAAE;AACZ,CAAC,CACF;AAID,OAAO,MAAMO,kBAAkB,GAAGA,CAAC,CAA0B,CAAC,KAAK;EACjE,MAAM;IAAEb;EAAK,CAAC,GAAGP,OAAO,CAAC;IAAEO,IAAI,EAAEL,YAAY,CAACmB;EAAM,CAAC,CAAC;EAEtD,oBACEhB,IAAA,CAACd,IAAI;IAAC+B,KAAK,EAAEC,MAAM,CAACC,SAAU;IAAAC,QAAA,EAC3BnB,eAAe,CAACoB,GAAG,CAAC,CAACC,EAAE,EAAEC,KAAK,kBAC7BvB,IAAA,CAACF,eAAe;MAEdM,KAAK,EAAEkB,EAAE,CAAClB,KAAM;MAChBoB,IAAI,eAAExB,IAAA,CAACsB,EAAE,CAACjB,IAAI;QAACC,KAAK,EAAEJ,IAAI,KAAKoB,EAAE,CAACpB,IAAI,GAAGd,MAAM,CAACqC,SAAS,GAAGC;MAAU,CAAE,CAAE;MAC1ElB,QAAQ,EAAEc,EAAE,CAACd,QAAS;MACtBF,KAAK,EAAEgB,EAAE,CAAChB,KAAM;MAChBqB,QAAQ,EAAEzB,IAAI,KAAKoB,EAAE,CAACpB,IAAK;MAC3B0B,QAAQ,EAAEA,CAAA,KAAM/B,YAAY,CAACgC,OAAO,CAACP,EAAE,CAACpB,IAAI,CAAE;MAC9C4B,WAAW,EAAEP,KAAK,GAAGtB,eAAe,CAAC8B,MAAM,GAAG;IAAE,GAP3CT,EAAE,CAACpB,IAQT,CACF;EAAC,CACE,CAAC;AAEX,CAAC;AAED,MAAMgB,MAAM,GAAGjC,UAAU,CAAC+C,MAAM,CAAC;EAC/Bb,SAAS,EAAE;IACTc,KAAK,EAAE,GAAG;IACVC,eAAe,EAAExC,OAAO,CAAC,GAAG,CAAC;IAC7ByC,iBAAiB,EAAEzC,OAAO,CAAC,GAAG,CAAC;IAC/B0C,YAAY,EAAEjD,aAAa,CAAC,GAAG,CAAC;IAChCkD,eAAe,EAAEjD,MAAM,CAACqC,SAAS;IACjC,GAAGhC,OAAO,CAAC,CAAC;EACd;AACF,CAAC,CAAC","ignoreList":[]}

package/dist/module/features/fluency/components/start-banner/BannerFlashcards.js

@@ -0,0 +1,74 @@
+"use strict";
+
+import React from 'react';
+import { MathFlashcard } from "./MathFlashcard.js";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+const CARD_LAYOUTS = [{
+  card: {
+    width: 146,
+    height: 88,
+    radius: 6
+  },
+  answer: {
+    width: 20,
+    height: 29,
+    radius: 4
+  },
+  fontSize: 26,
+  position: {
+    right: 283,
+    top: 31,
+    zIndex: 1
+  },
+  rotation: '21.3deg'
+}, {
+  card: {
+    width: 195,
+    height: 118,
+    radius: 9
+  },
+  answer: {
+    width: 27,
+    height: 38,
+    radius: 6
+  },
+  fontSize: 35,
+  position: {
+    right: 148,
+    top: -6,
+    zIndex: 2
+  },
+  rotation: '-15.43deg'
+}, {
+  card: {
+    width: 260,
+    height: 157,
+    radius: 12
+  },
+  answer: {
+    width: 36,
+    height: 51,
+    radius: 8
+  },
+  fontSize: 46,
+  position: {
+    right: 0,
+    top: -11,
+    zIndex: 3
+  },
+  rotation: '8.83deg'
+}];
+export const BannerFlashcards = ({
+  examples
+}) => /*#__PURE__*/_jsx(_Fragment, {
+  children: CARD_LAYOUTS.map((layout, index) => {
+    const example = examples[index];
+    if (!example) return null;
+    return /*#__PURE__*/_jsx(MathFlashcard, {
+      left: example.left,
+      right: example.right,
+      layout: layout
+    }, index);
+  })
+});
+//# sourceMappingURL=BannerFlashcards.js.map

package/dist/module/features/fluency/components/start-banner/BannerFlashcards.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","MathFlashcard","jsx","_jsx","Fragment","_Fragment","CARD_LAYOUTS","card","width","height","radius","answer","fontSize","position","right","top","zIndex","rotation","BannerFlashcards","examples","children","map","layout","index","example","left"],"sourceRoot":"../../../../../../src","sources":["features/fluency/components/start-banner/BannerFlashcards.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,aAAa,QAAyB,oBAAiB;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA;AAOhE,MAAMC,YAA+B,GAAG,CACtC;EACEC,IAAI,EAAE;IAAEC,KAAK,EAAE,GAAG;IAAEC,MAAM,EAAE,EAAE;IAAEC,MAAM,EAAE;EAAE,CAAC;EAC3CC,MAAM,EAAE;IAAEH,KAAK,EAAE,EAAE;IAAEC,MAAM,EAAE,EAAE;IAAEC,MAAM,EAAE;EAAE,CAAC;EAC5CE,QAAQ,EAAE,EAAE;EACZC,QAAQ,EAAE;IAAEC,KAAK,EAAE,GAAG;IAAEC,GAAG,EAAE,EAAE;IAAEC,MAAM,EAAE;EAAE,CAAC;EAC5CC,QAAQ,EAAE;AACZ,CAAC,EACD;EACEV,IAAI,EAAE;IAAEC,KAAK,EAAE,GAAG;IAAEC,MAAM,EAAE,GAAG;IAAEC,MAAM,EAAE;EAAE,CAAC;EAC5CC,MAAM,EAAE;IAAEH,KAAK,EAAE,EAAE;IAAEC,MAAM,EAAE,EAAE;IAAEC,MAAM,EAAE;EAAE,CAAC;EAC5CE,QAAQ,EAAE,EAAE;EACZC,QAAQ,EAAE;IAAEC,KAAK,EAAE,GAAG;IAAEC,GAAG,EAAE,CAAC,CAAC;IAAEC,MAAM,EAAE;EAAE,CAAC;EAC5CC,QAAQ,EAAE;AACZ,CAAC,EACD;EACEV,IAAI,EAAE;IAAEC,KAAK,EAAE,GAAG;IAAEC,MAAM,EAAE,GAAG;IAAEC,MAAM,EAAE;EAAG,CAAC;EAC7CC,MAAM,EAAE;IAAEH,KAAK,EAAE,EAAE;IAAEC,MAAM,EAAE,EAAE;IAAEC,MAAM,EAAE;EAAE,CAAC;EAC5CE,QAAQ,EAAE,EAAE;EACZC,QAAQ,EAAE;IAAEC,KAAK,EAAE,CAAC;IAAEC,GAAG,EAAE,CAAC,EAAE;IAAEC,MAAM,EAAE;EAAE,CAAC;EAC3CC,QAAQ,EAAE;AACZ,CAAC,CACF;AAMD,OAAO,MAAMC,gBAAgB,GAAGA,CAAC;EAAEC;AAAgC,CAAC,kBAClEhB,IAAA,CAAAE,SAAA;EAAAe,QAAA,EACGd,YAAY,CAACe,GAAG,CAAC,CAACC,MAAM,EAAEC,KAAK,KAAK;IACnC,MAAMC,OAAO,GAAGL,QAAQ,CAACI,KAAK,CAAC;IAC/B,IAAI,CAACC,OAAO,EAAE,OAAO,IAAI;IACzB,oBAAOrB,IAAA,CAACF,aAAa;MAAawB,IAAI,EAAED,OAAO,CAACC,IAAK;MAACX,KAAK,EAAEU,OAAO,CAACV,KAAM;MAACQ,MAAM,EAAEA;IAAO,GAAhEC,KAAkE,CAAC;EAChG,CAAC;AAAC,CACF,CACH","ignoreList":[]}

package/dist/module/features/fluency/components/start-banner/MathFlashcard.js

@@ -0,0 +1,67 @@
+"use strict";
+
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { COLORS, SHADOWS } from '@magmamath/react-native-ui';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const MathFlashcard = ({
+  left,
+  right,
+  layout
+}) => /*#__PURE__*/_jsx(View, {
+  style: [styles.card, {
+    width: layout.card.width,
+    height: layout.card.height,
+    borderRadius: layout.card.radius,
+    right: layout.position.right,
+    top: layout.position.top,
+    zIndex: layout.position.zIndex,
+    transform: [{
+      rotate: layout.rotation
+    }]
+  }],
+  children: /*#__PURE__*/_jsxs(View, {
+    style: styles.row,
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: [styles.text, {
+        fontSize: layout.fontSize
+      }],
+      children: left
+    }), /*#__PURE__*/_jsx(View, {
+      style: [styles.answerBox, {
+        width: layout.answer.width,
+        height: layout.answer.height,
+        borderRadius: layout.answer.radius
+      }]
+    }), /*#__PURE__*/_jsx(Text, {
+      style: [styles.text, {
+        fontSize: layout.fontSize
+      }],
+      children: right
+    })]
+  })
+});
+const styles = StyleSheet.create({
+  card: {
+    position: 'absolute',
+    backgroundColor: COLORS.NEUTRAL_1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    ...SHADOWS[1]
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 1
+  },
+  text: {
+    fontWeight: 'bold',
+    color: COLORS.BLACK
+  },
+  answerBox: {
+    backgroundColor: COLORS.NEUTRAL_2,
+    borderWidth: 1,
+    borderColor: COLORS.NEUTRAL_5
+  }
+});
+//# sourceMappingURL=MathFlashcard.js.map

package/dist/module/features/fluency/components/start-banner/MathFlashcard.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","Text","StyleSheet","COLORS","SHADOWS","jsx","_jsx","jsxs","_jsxs","MathFlashcard","left","right","layout","style","styles","card","width","height","borderRadius","radius","position","top","zIndex","transform","rotate","rotation","children","row","text","fontSize","answerBox","answer","create","backgroundColor","NEUTRAL_1","alignItems","justifyContent","flexDirection","gap","fontWeight","color","BLACK","NEUTRAL_2","borderWidth","borderColor","NEUTRAL_5"],"sourceRoot":"../../../../../../src","sources":["features/fluency/components/start-banner/MathFlashcard.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,IAAI,EAAEC,UAAU,QAAQ,cAAc;AACrD,SAASC,MAAM,EAAEC,OAAO,QAAQ,4BAA4B;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAgB5D,OAAO,MAAMC,aAAa,GAAGA,CAAC;EAAEC,IAAI;EAAEC,KAAK;EAAEC;AAA2B,CAAC,kBACvEN,IAAA,CAACN,IAAI;EACHa,KAAK,EAAE,CACLC,MAAM,CAACC,IAAI,EACX;IACEC,KAAK,EAAEJ,MAAM,CAACG,IAAI,CAACC,KAAK;IACxBC,MAAM,EAAEL,MAAM,CAACG,IAAI,CAACE,MAAM;IAC1BC,YAAY,EAAEN,MAAM,CAACG,IAAI,CAACI,MAAM;IAChCR,KAAK,EAAEC,MAAM,CAACQ,QAAQ,CAACT,KAAK;IAC5BU,GAAG,EAAET,MAAM,CAACQ,QAAQ,CAACC,GAAG;IACxBC,MAAM,EAAEV,MAAM,CAACQ,QAAQ,CAACE,MAAM;IAC9BC,SAAS,EAAE,CAAC;MAAEC,MAAM,EAAEZ,MAAM,CAACa;IAAS,CAAC;EACzC,CAAC,CACD;EAAAC,QAAA,eAEFlB,KAAA,CAACR,IAAI;IAACa,KAAK,EAAEC,MAAM,CAACa,GAAI;IAAAD,QAAA,gBACtBpB,IAAA,CAACL,IAAI;MAACY,KAAK,EAAE,CAACC,MAAM,CAACc,IAAI,EAAE;QAAEC,QAAQ,EAAEjB,MAAM,CAACiB;MAAS,CAAC,CAAE;MAAAH,QAAA,EAAEhB;IAAI,CAAO,CAAC,eACxEJ,IAAA,CAACN,IAAI;MACHa,KAAK,EAAE,CACLC,MAAM,CAACgB,SAAS,EAChB;QAAEd,KAAK,EAAEJ,MAAM,CAACmB,MAAM,CAACf,KAAK;QAAEC,MAAM,EAAEL,MAAM,CAACmB,MAAM,CAACd,MAAM;QAAEC,YAAY,EAAEN,MAAM,CAACmB,MAAM,CAACZ;MAAO,CAAC;IAChG,CACH,CAAC,eACFb,IAAA,CAACL,IAAI;MAACY,KAAK,EAAE,CAACC,MAAM,CAACc,IAAI,EAAE;QAAEC,QAAQ,EAAEjB,MAAM,CAACiB;MAAS,CAAC,CAAE;MAAAH,QAAA,EAAEf;IAAK,CAAO,CAAC;EAAA,CACrE;AAAC,CACH,CACP;AAED,MAAMG,MAAM,GAAGZ,UAAU,CAAC8B,MAAM,CAAC;EAC/BjB,IAAI,EAAE;IACJK,QAAQ,EAAE,UAAU;IACpBa,eAAe,EAAE9B,MAAM,CAAC+B,SAAS;IACjCC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE,QAAQ;IACxB,GAAGhC,OAAO,CAAC,CAAC;EACd,CAAC;EACDuB,GAAG,EAAE;IACHU,aAAa,EAAE,KAAK;IACpBF,UAAU,EAAE,QAAQ;IACpBG,GAAG,EAAE;EACP,CAAC;EACDV,IAAI,EAAE;IACJW,UAAU,EAAE,MAAM;IAClBC,KAAK,EAAErC,MAAM,CAACsC;EAChB,CAAC;EACDX,SAAS,EAAE;IACTG,eAAe,EAAE9B,MAAM,CAACuC,SAAS;IACjCC,WAAW,EAAE,CAAC;IACdC,WAAW,EAAEzC,MAAM,CAAC0C;EACtB;AACF,CAAC,CAAC","ignoreList":[]}

package/dist/module/features/fluency/components/start-banner/StartBanner.js

@@ -0,0 +1,92 @@
+"use strict";
+
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { BORDER_RADIUS, Button, ButtonSize, ButtonVariant, COLORS, PlayIcon, SHADOWS, SPACING, Typography } from '@magmamath/react-native-ui';
+import { BannerFlashcards } from "./BannerFlashcards.js";
+import { useFluencyModeUIPreset } from "../../hooks/useFluencyModeUIPreset.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const StartBanner = ({}) => {
+  const {
+    buttonColor
+  } = useFluencyModeUIPreset();
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: styles.buttonContainer,
+      children: /*#__PURE__*/_jsxs(View, {
+        style: styles.buttonGroup,
+        children: [/*#__PURE__*/_jsx(Button, {
+          onPress: () => {},
+          disabled: false,
+          isLoading: false,
+          isActive: false,
+          icon: /*#__PURE__*/_jsx(PlayIcon, {
+            color: COLORS.NEUTRAL_1
+          }),
+          variant: ButtonVariant.PRIMARY,
+          size: ButtonSize.LARGE,
+          colorScheme: buttonColor,
+          raiseLevel: 6,
+          style: {
+            container: styles.button
+          },
+          children: "Start fluency practice"
+        }), /*#__PURE__*/_jsx(Typography, {
+          style: styles.buttonSubtitle,
+          children: "20 individualized ready"
+        })]
+      })
+    }), /*#__PURE__*/_jsx(BannerFlashcards, {
+      examples: [{
+        left: '15*',
+        right: '=30'
+      }, {
+        left: '10-',
+        right: '=25'
+      }, {
+        left: '5+',
+        right: '=19'
+      }]
+    })]
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    height: '100%',
+    justifyContent: 'center',
+    paddingVertical: SPACING[400],
+    paddingHorizontal: SPACING[800],
+    borderRadius: BORDER_RADIUS[400],
+    backgroundColor: COLORS.NEUTRAL_1,
+    ...SHADOWS[1]
+  },
+  buttonContainer: {
+    alignItems: 'flex-start',
+    zIndex: 4
+  },
+  buttonGroup: {
+    alignItems: 'center',
+    gap: SPACING[200]
+  },
+  button: {
+    minWidth: 220,
+    maxWidth: 315,
+    textTransform: 'uppercase'
+  },
+  buttonSubtitle: {
+    fontSize: 12,
+    fontWeight: '700',
+    color: COLORS.BLACK,
+    textTransform: 'uppercase'
+  },
+  flashcard: {
+    position: 'absolute',
+    backgroundColor: COLORS.NEUTRAL_1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    ...SHADOWS[1]
+  }
+});
+//# sourceMappingURL=StartBanner.js.map

package/dist/module/features/fluency/components/start-banner/StartBanner.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","StyleSheet","BORDER_RADIUS","Button","ButtonSize","ButtonVariant","COLORS","PlayIcon","SHADOWS","SPACING","Typography","BannerFlashcards","useFluencyModeUIPreset","jsx","_jsx","jsxs","_jsxs","StartBanner","buttonColor","style","styles","container","children","buttonContainer","buttonGroup","onPress","disabled","isLoading","isActive","icon","color","NEUTRAL_1","variant","PRIMARY","size","LARGE","colorScheme","raiseLevel","button","buttonSubtitle","examples","left","right","create","flex","height","justifyContent","paddingVertical","paddingHorizontal","borderRadius","backgroundColor","alignItems","zIndex","gap","minWidth","maxWidth","textTransform","fontSize","fontWeight","BLACK","flashcard","position"],"sourceRoot":"../../../../../../src","sources":["features/fluency/components/start-banner/StartBanner.tsx"],"mappings":"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","ignoreList":[]}