@magmamath/students-features 1.4.1 → 1.4.2

package/dist/typescript/module/index.d.ts

@@ -14,4 +14,6 @@ export * from './shared/icons';
 export * from './features/voice';
 export * from './features/featureUsage';
 export * from './features/uiMode';
+export * from './features/fluency';
+export * from './features/fluency-teacher';
 //# sourceMappingURL=index.d.ts.map

package/dist/typescript/module/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACxD,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,kBAAkB,CAAA;AAChC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACxD,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,kBAAkB,CAAA;AAChC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,oBAAoB,CAAA;AAClC,cAAc,4BAA4B,CAAA"}

package/dist/typescript/module/lib/components/GradientView.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+type Point = {
+    x: number;
+    y: number;
+};
+type GradientViewProps = {
+    colors: string[];
+    start?: Point;
+    end?: Point;
+    locations?: number[];
+    style?: StyleProp<ViewStyle>;
+    pointerEvents?: 'none' | 'box-none' | 'box-only' | 'auto';
+    children?: React.ReactNode;
+};
+export declare const GradientView: ({ colors, start, end, locations, style, pointerEvents, children, }: GradientViewProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=GradientView.d.ts.map

package/dist/typescript/module/lib/components/GradientView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GradientView.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/GradientView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAExD,KAAK,KAAK,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AAErC,KAAK,iBAAiB,GAAG;IACvB,MAAM,EAAE,MAAM,EAAE,CAAA;IAChB,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,GAAG,CAAC,EAAE,KAAK,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,EAAE,CAAA;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAC5B,aAAa,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,CAAA;IACzD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAoBD,eAAO,MAAM,YAAY,uEAQtB,iBAAiB,sBA2BnB,CAAA"}

package/dist/typescript/module/lib/constants.d.ts

@@ -1,4 +1,5 @@
 export declare enum KeyboardKeys {
-    ENTER = "Enter"
+    ENTER = "Enter",
+    BACKSPACE = "Backspace"
 }
 //# sourceMappingURL=constants.d.ts.map

package/dist/typescript/module/lib/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/lib/constants.ts"],"names":[],"mappings":"AAAA,oBAAY,YAAY;IACpB,KAAK,UAAU;CAChB"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/lib/constants.ts"],"names":[],"mappings":"AAAA,oBAAY,YAAY;IACtB,KAAK,UAAU;IACf,SAAS,cAAc;CACxB"}

package/dist/typescript/module/shared/common.constants.d.ts

@@ -1,2 +1,7 @@
 export declare const isWeb: boolean;
+export declare enum SortingDirection {
+    DESC = "desc",
+    ASC = "asc"
+}
+export declare const BURGER_MENU_BREAKPOINT = 1024;
 //# sourceMappingURL=common.constants.d.ts.map

package/dist/typescript/module/shared/common.constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"common.constants.d.ts","sourceRoot":"","sources":["../../../../src/shared/common.constants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,SAAwB,CAAA"}
+{"version":3,"file":"common.constants.d.ts","sourceRoot":"","sources":["../../../../src/shared/common.constants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,SAAwB,CAAA;AAE1C,oBAAY,gBAAgB;IAC1B,IAAI,SAAS;IACb,GAAG,QAAQ;CACZ;AAED,eAAO,MAAM,sBAAsB,OAAO,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magmamath/students-features",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "description": "Magmamath features library",
   "source": "src/index.ts",
   "main": "src/index.ts",
@@ -32,6 +32,7 @@
     "effector-storage": "^8.0.0",
     "expo": ">=52.0.47",
     "expo-audio": "^1.1.1",
+    "expo-linear-gradient": "*",
     "patronum": "^2.3.0",
     "react": "*",
     "react-native": "*",
@@ -66,6 +67,7 @@
     "eslint-plugin-prettier": "^5.0.1",
     "expo": "^52.0.47",
     "expo-audio": "^1.1.1",
+    "expo-linear-gradient": "^14.0.0",
     "jest": "^29.7.0",
     "patronum": "^2.3.0",
     "prettier": "^3.0.3",

package/src/features/fluency/assets/FlameIcon.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import { COLORS, IconProps } from '@magmamath/react-native-ui'
+
+export const FlameIcon = ({ color = COLORS.NEUTRAL_9, size }: IconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 30 30" fill="none">
+      <Path
+        d="M25.131 18.057c0-.59-.165-1.49-.474-2.473-.116-.37-.248-.736-.39-1.085a3.445 3.445 0 01-1.992.635 3.18 3.18 0 01-1.92-.617c-.583-.426-1.041-1.045-1.425-1.806-.621-1.232-1.57-3.098-2.668-4.936-.935-1.568-1.934-3.038-2.884-4.075-.662 2.8-2.47 5.24-4.534 7.279l-.021.022-.022.019c-3.609 3.246-4.647 6.763-3.445 9.914 1.357 3.555 5.456 6.26 9.785 6.26 2.668 0 5.213-1.004 7.35-2.937.922-.87 1.564-1.701 1.984-2.638.422-.94.656-2.064.656-3.562zm2.5 0c0 1.768-.279 3.255-.875 4.584-.595 1.328-1.473 2.423-2.563 3.45l-.01.007-.009.009c-2.566 2.323-5.702 3.588-9.033 3.588-5.24 0-10.352-3.235-12.121-7.87-1.682-4.41-.002-8.947 4.07-12.628 2.208-2.184 3.763-4.542 4.02-7.034.017-.171.044-.502.123-.764.047-.158.14-.4.346-.624.227-.247.505-.383.771-.443l.132-.023c.302-.039.56.023.734.084.202.07.375.172.51.26.267.177.547.42.82.674 1.38 1.28 2.732 3.271 3.863 5.167 1.146 1.92 2.13 3.856 2.754 5.092.276.55.512.798.667.912.13.096.257.136.445.136.329 0 .664-.172.884-.538a2.03 2.03 0 00.13-.259c.39-.919 1.743-1.162 2.35-.181.563.912 1.053 2.065 1.403 3.178.346 1.102.59 2.274.59 3.223z"
+        fill={color}
+      />
+    </Svg>
+  )
+}

package/src/features/fluency/assets/FlashIcon.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import { COLORS, IconProps } from '@magmamath/react-native-ui'
+
+export const FlashIcon = ({ color = COLORS.NEUTRAL_9, size = 20 }: IconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+      <Path
+        d="M10.34.646c.565-.95 2.026-.494 1.95.61l-.404 5.823a.2.2 0 00.201.214l2.9-.027a1.05 1.05 0 01.912 1.587L9.657 19.355c-.566.95-2.028.493-1.951-.61l.408-5.824a.2.2 0 00-.201-.214l-2.9.027a1.05 1.05 0 01-.913-1.586L10.34.646z"
+        fill={color}
+      />
+    </Svg>
+  )
+}

package/src/features/fluency/assets/SnurrisnurrBg.tsx

@@ -0,0 +1,193 @@
+import React from 'react'
+import Svg, { Defs, G, LinearGradient, Path, Stop } from 'react-native-svg'
+
+export const SnurrisnurrBg = () => {
+  return (
+    <Svg width={702} height={441} viewBox="0 0 702 441" fill="none">
+      <G opacity={0.1}>
+        <Path
+          d="M164-484.96a893.984 893.984 0 01222.319 28.085L164 409v-893.96z"
+          fill="url(#paint0_linear_1295_36090)"
+        />
+        <Path
+          d="M-282.98-365.192a893.955 893.955 0 01206.577-86.837L164 409l-446.98-774.192z"
+          fill="url(#paint1_linear_1295_36090)"
+        />
+        <Path
+          d="M-610.192-37.98A894.001 894.001 0 01-474.71-216.471L164 409-610.192-37.98z"
+          fill="url(#paint2_linear_1295_36090)"
+        />
+        <Path
+          d="M-729.96 409a893.984 893.984 0 0128.085-222.319L164 409h-893.96z"
+          fill="url(#paint3_linear_1295_36090)"
+        />
+        <Path
+          d="M-610.192 855.98a893.95 893.95 0 01-86.837-206.577L164 409l-774.192 446.98z"
+          fill="url(#paint4_linear_1295_36090)"
+        />
+        <Path
+          d="M-282.98 1183.19a893.687 893.687 0 01-178.491-135.48L164 409l-446.98 774.19z"
+          fill="url(#paint5_linear_1295_36090)"
+        />
+        <Path
+          d="M610.98-365.192A893.96 893.96 0 01789.471-229.71L164 409l446.98-774.192z"
+          fill="url(#paint6_linear_1295_36090)"
+        />
+        <Path
+          d="M938.192-37.98a894.09 894.09 0 0186.838 206.577L164 409 938.192-37.98z"
+          fill="url(#paint7_linear_1295_36090)"
+        />
+        <Path
+          d="M1057.96 409c0 74.991-9.44 149.684-28.09 222.319L164 409h893.96z"
+          fill="url(#paint8_linear_1295_36090)"
+        />
+        <Path
+          d="M938.192 855.98a893.925 893.925 0 01-135.482 178.49L164 409l774.192 446.98z"
+          fill="url(#paint9_linear_1295_36090)"
+        />
+        <Path
+          d="M610.98 1183.19a893.916 893.916 0 01-206.577 86.84L164 409l446.98 774.19z"
+          fill="url(#paint10_linear_1295_36090)"
+        />
+        <Path
+          d="M164 1302.96a893.94 893.94 0 01-222.319-28.09L164 409v893.96z"
+          fill="url(#paint11_linear_1295_36090)"
+        />
+      </G>
+      <Defs>
+        <LinearGradient
+          id="paint0_linear_1295_36090"
+          x1={164}
+          y1={496.93}
+          x2={930.036}
+          y2={496.93}
+          gradientUnits="userSpaceOnUse"
+        >
+          <Stop stopColor="#FF245F" />
+          <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
+        </LinearGradient>
+        <LinearGradient
+          id="paint1_linear_1295_36090"
+          x1={164}
+          y1={496.93}
+          x2={930.036}
+          y2={496.93}
+          gradientUnits="userSpaceOnUse"
+        >
+          <Stop stopColor="#FF245F" />
+          <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
+        </LinearGradient>
+        <LinearGradient
+          id="paint2_linear_1295_36090"
+          x1={164}
+          y1={496.93}
+          x2={930.036}
+          y2={496.93}
+          gradientUnits="userSpaceOnUse"
+        >
+          <Stop stopColor="#FF245F" />
+          <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
+        </LinearGradient>
+        <LinearGradient
+          id="paint3_linear_1295_36090"
+          x1={164}
+          y1={496.93}
+          x2={930.036}
+          y2={496.93}
+          gradientUnits="userSpaceOnUse"
+        >
+          <Stop stopColor="#FF245F" />
+          <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
+        </LinearGradient>
+        <LinearGradient
+          id="paint4_linear_1295_36090"
+          x1={164}
+          y1={496.93}
+          x2={930.036}
+          y2={496.93}
+          gradientUnits="userSpaceOnUse"
+        >
+          <Stop stopColor="#FF245F" />
+          <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
+        </LinearGradient>
+        <LinearGradient
+          id="paint5_linear_1295_36090"
+          x1={164}
+          y1={496.93}
+          x2={930.036}
+          y2={496.93}
+          gradientUnits="userSpaceOnUse"
+        >
+          <Stop stopColor="#FF245F" />
+          <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
+        </LinearGradient>
+        <LinearGradient
+          id="paint6_linear_1295_36090"
+          x1={164}
+          y1={496.93}
+          x2={930.036}
+          y2={496.93}
+          gradientUnits="userSpaceOnUse"
+        >
+          <Stop stopColor="#FF245F" />
+          <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
+        </LinearGradient>
+        <LinearGradient
+          id="paint7_linear_1295_36090"
+          x1={164}
+          y1={496.93}
+          x2={930.036}
+          y2={496.93}
+          gradientUnits="userSpaceOnUse"
+        >
+          <Stop stopColor="#FF245F" />
+          <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
+        </LinearGradient>
+        <LinearGradient
+          id="paint8_linear_1295_36090"
+          x1={164}
+          y1={496.93}
+          x2={930.036}
+          y2={496.93}
+          gradientUnits="userSpaceOnUse"
+        >
+          <Stop stopColor="#FF245F" />
+          <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
+        </LinearGradient>
+        <LinearGradient
+          id="paint9_linear_1295_36090"
+          x1={164}
+          y1={496.93}
+          x2={930.036}
+          y2={496.93}
+          gradientUnits="userSpaceOnUse"
+        >
+          <Stop stopColor="#FF245F" />
+          <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
+        </LinearGradient>
+        <LinearGradient
+          id="paint10_linear_1295_36090"
+          x1={164}
+          y1={496.93}
+          x2={930.036}
+          y2={496.93}
+          gradientUnits="userSpaceOnUse"
+        >
+          <Stop stopColor="#FF245F" />
+          <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
+        </LinearGradient>
+        <LinearGradient
+          id="paint11_linear_1295_36090"
+          x1={164}
+          y1={496.93}
+          x2={930.036}
+          y2={496.93}
+          gradientUnits="userSpaceOnUse"
+        >
+          <Stop stopColor="#FF245F" />
+          <Stop offset={1} stopColor="#FF7917" stopOpacity={0} />
+        </LinearGradient>
+      </Defs>
+    </Svg>
+  )
+}

package/src/features/fluency/assets/SparkleIcon.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import { COLORS, IconProps } from '@magmamath/react-native-ui'
+
+export const SparkleIcon = ({ size = 20, color = COLORS.NEUTRAL_9 }: IconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 21 21" fill="none">
+      <Path
+        d="M20.063 11.863c-3.688 1.348-6.782 4.42-8.24 8.244-.505 1.19-2.111 1.19-2.587 0-1.517-3.793-4.61-6.864-8.299-8.18-1.25-.502-1.25-2.352 0-2.79 3.688-1.348 6.782-4.42 8.24-8.244.505-1.19 2.111-1.19 2.587 0 1.517 3.793 4.61 6.864 8.299 8.18 1.25.502 1.25 2.352 0 2.79z"
+        fill={color}
+      />
+    </Svg>
+  )
+}

package/src/features/fluency/assets/StarFillIcon.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import Svg, { Path } from 'react-native-svg'
+
+type StarFillIconProps = {
+  color?: string
+}
+
+export const StarFillIcon = ({ color }: StarFillIconProps) => {
+  return (
+    <Svg width={10} height={11} viewBox="0 0 10 11" fill="none">
+      <Path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.767.432a.89.89 0 00-1.526 0L2.925 2.625l-2.25.563A.89.89 0 00.26 4.68l1.664 1.664-.553 2.626a.89.89 0 001.287.97l2.34-1.24 1.55.862.824.412a.89.89 0 001.269-.98l-.559-2.65L9.747 4.68a.89.89 0 00-.413-1.492l-2.251-.563L5.767.432z"
+        fill={color ?? '#33334D'}
+        fillOpacity={color ? 1 : 0.25}
+      />
+    </Svg>
+  )
+}

package/src/features/fluency/assets/TrophyBg.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import Svg, { Path } from 'react-native-svg'
+
+export const TrophyBg = () => {
+  return (
+    <Svg width={465} height={342} viewBox="0 0 465 342" fill="none">
+      <Path
+        d="M257.477 243.501l-5.73 32.767 16.383 2.86c8.048 1.408 15.796 2.106 23.223 2.106 15.696.011 29.984-3.137 42.765-9.389 6.729-3.292 13.025-7.438 18.9-12.448 44.672-38.121 50.248-115.859 49.605-158.813-.288-18.468-9.467-35.849-24.575-46.49-9.356-6.607-20.23-10.21-31.348-10.575a58.006 58.006 0 00-17.936 2.206c-14.355 4.09-26.359 13.379-33.875 25.994L262.51 57.386l-13.457 30.417 39.163 17.325c6.274 2.772 13.246 2.916 19.631.388 6.374-2.516 11.373-7.382 14.056-13.7a24.557 24.557 0 0115.973-14.112c2.993-.853 6.052-1.13 9.056-.853a24.576 24.576 0 0111.961 4.423c6.44 4.534 10.353 11.95 10.475 19.82 1.164 76.84-18.822 112.223-32.024 127.143-2.195 2.494-4.212 4.412-5.908 5.864-14.632 12.471-33.465 16.483-57.586 12.271l-16.373-2.871zM36.646 281.238c7.429 0 15.173-.702 23.223-2.11l16.379-2.865-5.73-32.757-16.378 2.865c-24.126 4.221-42.953.203-57.575-12.273-11.858-10.12-39.294-43.337-37.935-133.007.118-7.871 4.035-15.28 10.475-19.82A24.601 24.601 0 01-9.88 77.703 24.606 24.606 0 016.098 91.814c2.683 6.319 7.675 11.186 14.058 13.709 6.384 2.522 13.355 2.38 19.63-.396l39.152-17.329-13.46-30.409-32.37 14.327C25.594 59.106 13.593 49.814-.764 45.721c-16.936-4.827-34.901-1.777-49.293 8.37-15.102 10.646-24.285 28.029-24.565 46.497-.652 42.947 4.926 120.687 49.6 158.806 17.036 14.535 37.71 21.844 61.668 21.844z"
+        fill="#FFD690"
+      />
+      <Path
+        opacity={0.1}
+        d="M334.118 271.846c6.729-3.292 13.025-7.438 18.9-12.448 44.672-38.121 50.248-115.86 49.605-158.814-.288-18.467-9.467-35.848-24.575-46.49-9.356-6.606-20.23-10.209-31.348-10.575 3.325 3.692 14.299 18.058.232 33.333a24.575 24.575 0 0111.961 4.423c6.44 4.533 10.353 11.95 10.475 19.819 1.164 76.841-18.822 112.224-32.024 127.144 0 0 21.66 24.498-3.226 43.608z"
+        fill="#D25B00"
+      />
+      <Path
+        d="M25.176 201.871l20.496-176.73a11.505 11.505 0 0111.429-10.18h213.797a11.505 11.505 0 0111.429 10.18l20.494 176.73c4.463 38.483-10.944 76.387-39.056 96.086l-8.178 5.731c-15.467 10.837-32.136 18.806-49.435 23.744-11.86 3.385-19.699 16.815-18.042 31.208l5.699 49.527H134.19l5.7-49.527c1.656-14.393-6.182-27.824-18.043-31.208-17.299-4.938-33.967-12.905-49.434-23.744l-8.178-5.731c-28.115-19.699-43.522-57.604-39.059-96.086z"
+        fill="#FFD690"
+      />
+      <Path
+        opacity={0.1}
+        d="M168.054 358.634l1.751 36.867h22.547l-4.246-36.867c-1.652-14.388 6.185-27.823 18.046-31.204 17.293-4.933 33.964-12.903 49.428-23.744l8.18-5.731c28.112-19.698 43.52-57.597 39.063-96.084L282.322 25.136a11.505 11.505 0 00-11.429-10.179h-50.531l12.193 186.913c2.506 38.487-6.152 76.386-21.959 96.084l-4.6 5.731c-8.702 10.841-18.068 18.811-27.801 23.744-6.661 3.382-11.073 16.817-10.141 31.205z"
+        fill="#D25B00"
+      />
+      <Path
+        opacity={0.3}
+        d="M72.805 16.15c-1.8.655-4.135 2.152-6.082 4.198-2.015 2.118-2.781 3.928-2.902 4.848-3.966 30.145-7.066 56.336-10.696 87.003-3.112 26.288-9.844 72.334-12.788 92.948-2.944 20.613-2.944 23.442-2.944 35.337 0 22.086 10.365 42.197 10.365 42.197-4.634-5.04-14.078-23.056-15.59-26.678-5.246-12.574-9.598-33.753-7.343-51.81 4.73-37.864 7.789-67.528 10.907-93.863 5.03-41.445 4.878-42.092 8.977-77.441C46.495 17.497 45.79 14.82 58.685 14.82h18.25c-1.45.416-2.835.86-4.13 1.33z"
+        fill="#fff"
+      />
+    </Svg>
+  )
+}

package/src/features/fluency/components/Fluency.tsx

@@ -0,0 +1,82 @@
+import React from 'react'
+import { useGate } from 'effector-react'
+import { View, StyleSheet } from 'react-native'
+import { Typography, HeadingVariants, SPACING, COLORS } from '@magmamath/react-native-ui'
+import { useText } from '../../../i18n/i18n'
+import { StartBanner } from './start-banner/StartBanner'
+import { DayStreakCounter } from './day-streak-counter/DayStreakCounter'
+import { SelectMathOperator } from './select-math-operator/SelectMathOperator'
+import { FluencyMatrix } from './matrix/FluencyMatrix'
+import { MobileMenu } from './mobile-menu/MobileMenu'
+import { FluencyProvider } from '../context/FluencyContext'
+import type { FluencyModel } from '../model/FluencyModel'
+import type { FluencyMode } from '../shared/fluency.constants'
+import type { FluencyConfig } from '../shared/fluency.types'
+
+type FluencyProps = {
+  model: FluencyModel
+  config: FluencyConfig
+  onMenuPress?: () => void
+  onStartPress?: () => void
+  onPracticePress?: () => void
+  onModeSelectPress?: (mode: FluencyMode) => void
+}
+
+export const Fluency = ({
+  model,
+  config,
+  onMenuPress,
+  onStartPress,
+  onPracticePress,
+  onModeSelectPress,
+}: FluencyProps) => {
+  useGate(model.gate, { config })
+  const t = useText()
+
+  return (
+    <FluencyProvider value={{ model, onStartPress, onPracticePress, onModeSelectPress }}>
+      <View style={styles.root}>
+        <View style={styles.title}>
+          <MobileMenu onPress={onMenuPress} />
+          <Typography variant={HeadingVariants.H2} style={styles.titleText}>
+            {t('student.fluency.title')}
+          </Typography>
+        </View>
+
+        <View style={styles.header}>
+          <StartBanner />
+          <DayStreakCounter />
+        </View>
+
+        <View style={styles.matrix}>
+          <SelectMathOperator />
+          <FluencyMatrix />
+        </View>
+      </View>
+    </FluencyProvider>
+  )
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+  },
+  title: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  titleText: { color: COLORS.NEUTRAL_9 },
+  header: {
+    height: 182,
+    flexDirection: 'row',
+    marginTop: SPACING[400],
+    gap: SPACING[400],
+    zIndex: 1,
+  },
+  matrix: {
+    flex: 1,
+    flexDirection: 'row',
+    marginTop: SPACING[400],
+    gap: SPACING[200],
+  },
+})

package/src/features/fluency/components/FluencySolving.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { View, StyleSheet } from 'react-native'
+import { COLORS } from '@magmamath/react-native-ui'
+import { FluencyProvider } from '../context/FluencyContext'
+import { FluencySolvingHeader } from './fluency-solving/components/FluencySolvingHeader'
+import { FluencySolvingProgress } from './fluency-solving/components/FluencySolvingProgress'
+import { FluencySolvingCard } from './fluency-solving/components/FluencySolvingCard'
+import { FluencySessionResults } from './session-results/FluencySessionResults'
+import { usePreventPageLeave } from '../hooks/usePreventPageLeave'
+import type { FluencyModel } from '../model/FluencyModel'
+
+type FluencySolvingProps = {
+  model: FluencyModel
+  onClosePress?: () => void
+  onEndModalPress?: () => void
+}
+
+export const FluencySolving = ({ model, onClosePress, onEndModalPress }: FluencySolvingProps) => {
+  usePreventPageLeave()
+
+  return (
+    <FluencyProvider value={{ model }}>
+      <View style={styles.container}>
+        <FluencySolvingHeader onClosePress={onClosePress} />
+        <FluencySolvingProgress />
+        <FluencySolvingCard />
+      </View>
+
+      <FluencySessionResults onClosePress={onClosePress} onEndModalPress={onEndModalPress} />
+    </FluencyProvider>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: COLORS.NEUTRAL_3,
+  },
+})

package/src/features/fluency/components/day-streak-counter/DayStreak.tsx

@@ -0,0 +1,86 @@
+import {
+  BORDER_RADIUS,
+  COLORS,
+  CorrectIcon,
+  HeadingVariants,
+  SPACING,
+  Typography,
+} from '@magmamath/react-native-ui'
+import React from 'react'
+import { StyleSheet, TextStyle, View, ViewStyle } from 'react-native'
+import { StreakStatus } from '../../shared/fluency.constants'
+
+type StreakDayProps = {
+  label: string
+  status: StreakStatus
+}
+
+type StatusStyle = {
+  circle: ViewStyle
+  label: TextStyle
+  hasIcon: boolean
+}
+
+const STATUS_STYLES: Record<StreakStatus, StatusStyle> = {
+  [StreakStatus.GAINED]: {
+    circle: {
+      backgroundColor: COLORS.PRIMARY_YELLOW,
+      borderWidth: 1,
+      borderColor: COLORS.NEUTRAL_3,
+    },
+    label: { color: COLORS.PRIMARY_YELLOW },
+    hasIcon: true,
+  },
+  [StreakStatus.TODAY]: {
+    circle: {
+      backgroundColor: COLORS.NEUTRAL_2,
+      borderWidth: 3,
+      borderColor: COLORS.YELLOW_6,
+    },
+    label: { color: COLORS.YELLOW_6 },
+    hasIcon: false,
+  },
+  [StreakStatus.TODAY_GAINED]: {
+    circle: {
+      backgroundColor: COLORS.PRIMARY_YELLOW,
+      borderWidth: 3,
+      borderColor: COLORS.YELLOW_6,
+    },
+    label: { color: COLORS.YELLOW_6 },
+    hasIcon: true,
+  },
+  [StreakStatus.MISSED]: {
+    circle: { backgroundColor: COLORS.NEUTRAL_2, borderWidth: 1, borderColor: COLORS.NEUTRAL_3 },
+    label: { color: COLORS.NEUTRAL_4 },
+    hasIcon: false,
+  },
+}
+
+export const StreakDay = ({ label, status }: StreakDayProps) => {
+  const { circle, label: labelStyle, hasIcon } = STATUS_STYLES[status]
+
+  return (
+    <View style={styles.container}>
+      <View style={[styles.circle, circle]}>
+        {hasIcon && <CorrectIcon color={COLORS.NEUTRAL_1} />}
+      </View>
+      <Typography variant={HeadingVariants.H3} style={labelStyle}>
+        {label}
+      </Typography>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    gap: SPACING[100],
+  },
+  circle: {
+    width: SPACING[800],
+    height: SPACING[800],
+    borderRadius: BORDER_RADIUS[400],
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+})

package/src/features/fluency/components/day-streak-counter/DayStreakCounter.tsx

@@ -0,0 +1,67 @@
+import React from 'react'
+import { View, StyleSheet } from 'react-native'
+import {
+  BORDER_RADIUS,
+  COLORS,
+  FONT_FAMILY,
+  SHADOWS,
+  SPACING,
+  Typography,
+} from '@magmamath/react-native-ui'
+import { StreakDay } from './DayStreak'
+import { TranslationKey, useText } from '../../../../i18n/i18n'
+import { useFluency } from '../../context/FluencyContext'
+import { useStoreMap } from 'effector-react'
+import { StreakStatus } from '../../shared/fluency.constants'
+import { generateStreakDates } from '../../shared/fluency.helpers'
+
+const DAY_LABEL_KEYS: TranslationKey[] = [
+  'student.fluency.dayMonday',
+  'student.fluency.dayTuesday',
+  'student.fluency.dayWednesday',
+  'student.fluency.dayThursday',
+  'student.fluency.dayFriday',
+] as const
+
+export const DayStreakCounter = () => {
+  const t = useText()
+  const { model } = useFluency()
+  const statuses = useStoreMap(model.streak.$stats, (stats) =>
+    stats ? generateStreakDates(stats) : [],
+  )
+
+  return (
+    <View style={styles.container}>
+      <Typography style={styles.label}>{t('student.fluency.practiceThisWeek')}</Typography>
+
+      <View style={styles.streakDays}>
+        {DAY_LABEL_KEYS.map((key, i) => (
+          <StreakDay key={key} label={t(key)} status={statuses[i] ?? StreakStatus.MISSED} />
+        ))}
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: 230,
+    height: 110,
+    paddingVertical: SPACING[200],
+    paddingHorizontal: SPACING[400],
+    borderRadius: BORDER_RADIUS[300],
+    backgroundColor: COLORS.NEUTRAL_1,
+    ...SHADOWS[1],
+  },
+  label: {
+    fontSize: 12,
+    fontWeight: '700',
+    fontFamily: FONT_FAMILY.buenosAires,
+    color: COLORS.NEUTRAL_8,
+  },
+  streakDays: {
+    flexDirection: 'row',
+    marginTop: 10,
+    gap: SPACING[200],
+  },
+})