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

package/dist/typescript/module/features/fluency/components/matrix/FluencyMatrix.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluencyMatrix.d.ts","sourceRoot":"","sources":["../../../../../../../src/features/fluency/components/matrix/FluencyMatrix.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,KAAK,kBAAkB,GAAG,EAAE,CAAA;AAE5B,eAAO,MAAM,aAAa,OAAQ,kBAAkB,sBAOnD,CAAA"}

package/dist/typescript/module/features/fluency/components/matrix/components/MatrixFill.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+type MatrixFillProps = {};
+export declare const MatrixFill: ({}: MatrixFillProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=MatrixFill.d.ts.map

package/dist/typescript/module/features/fluency/components/matrix/components/MatrixFill.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MatrixFill.d.ts","sourceRoot":"","sources":["../../../../../../../../src/features/fluency/components/matrix/components/MatrixFill.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AA+CzB,KAAK,eAAe,GAAG,EAAE,CAAA;AAEzB,eAAO,MAAM,UAAU,OAAQ,eAAe,sBAc7C,CAAA"}

package/dist/typescript/module/features/fluency/components/matrix/components/MatrixLegend.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+type MatrixLegendProps = {};
+export declare const MatrixLegend: ({}: MatrixLegendProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=MatrixLegend.d.ts.map

package/dist/typescript/module/features/fluency/components/matrix/components/MatrixLegend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MatrixLegend.d.ts","sourceRoot":"","sources":["../../../../../../../../src/features/fluency/components/matrix/components/MatrixLegend.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAuBzB,KAAK,iBAAiB,GAAG,EAAE,CAAA;AAE3B,eAAO,MAAM,YAAY,OAAQ,iBAAiB,sBAyCjD,CAAA"}

package/dist/typescript/module/features/fluency/components/select-math-operator/MathOperatorRow.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode } from 'react';
+import { SelectOptionColor } from '@magmamath/react-native-ui';
+export type MathOperatorRowProps = {
+    title: string;
+    icon: ReactNode;
+    progress: number;
+    color: SelectOptionColor;
+    selected: boolean;
+    onSelect: () => void;
+    showDivider?: boolean;
+};
+export declare const MathOperatorRow: ({ title, icon, progress, color, selected, onSelect, showDivider, }: MathOperatorRowProps) => React.JSX.Element;
+//# sourceMappingURL=MathOperatorRow.d.ts.map

package/dist/typescript/module/features/fluency/components/select-math-operator/MathOperatorRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MathOperatorRow.d.ts","sourceRoot":"","sources":["../../../../../../../src/features/fluency/components/select-math-operator/MathOperatorRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAExC,OAAO,EAAwB,iBAAiB,EAAW,MAAM,4BAA4B,CAAA;AAG7F,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,SAAS,CAAA;IACf,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,iBAAiB,CAAA;IACxB,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA;AAED,eAAO,MAAM,eAAe,uEAQzB,oBAAoB,sBAMtB,CAAA"}

package/dist/typescript/module/features/fluency/components/select-math-operator/ProgressBar.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { SelectOptionColor } from '@magmamath/react-native-ui';
+export type ProgressBarProps = {
+    progress: number;
+    color: SelectOptionColor;
+};
+export declare const ProgressBar: ({ progress, color }: ProgressBarProps) => React.JSX.Element;
+//# sourceMappingURL=ProgressBar.d.ts.map

package/dist/typescript/module/features/fluency/components/select-math-operator/ProgressBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../../../../../src/features/fluency/components/select-math-operator/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAIL,iBAAiB,EAGlB,MAAM,4BAA4B,CAAA;AA8EnC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,iBAAiB,CAAA;CACzB,CAAA;AAED,eAAO,MAAM,WAAW,wBAAmD,gBAAgB,sBAc1F,CAAA"}

package/dist/typescript/module/features/fluency/components/select-math-operator/SelectMathOperator.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+type SelectMathOperatorProps = {};
+export declare const SelectMathOperator: ({}: SelectMathOperatorProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=SelectMathOperator.d.ts.map

package/dist/typescript/module/features/fluency/components/select-math-operator/SelectMathOperator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectMathOperator.d.ts","sourceRoot":"","sources":["../../../../../../../src/features/fluency/components/select-math-operator/SelectMathOperator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAyDzB,KAAK,uBAAuB,GAAG,EAAE,CAAA;AAEjC,eAAO,MAAM,kBAAkB,OAAQ,uBAAuB,sBAmB7D,CAAA"}

package/dist/typescript/module/features/fluency/components/start-banner/BannerFlashcards.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export type FlashcardExample = {
+    left: string;
+    right: string;
+};
+type BannerFlashcardsProps = {
+    examples: FlashcardExample[];
+};
+export declare const BannerFlashcards: ({ examples }: BannerFlashcardsProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=BannerFlashcards.d.ts.map

package/dist/typescript/module/features/fluency/components/start-banner/BannerFlashcards.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerFlashcards.d.ts","sourceRoot":"","sources":["../../../../../../../src/features/fluency/components/start-banner/BannerFlashcards.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AA0BD,KAAK,qBAAqB,GAAG;IAC3B,QAAQ,EAAE,gBAAgB,EAAE,CAAA;CAC7B,CAAA;AAED,eAAO,MAAM,gBAAgB,iBAAkB,qBAAqB,sBAQnE,CAAA"}

package/dist/typescript/module/features/fluency/components/start-banner/MathFlashcard.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+export type FlashcardLayout = {
+    card: {
+        width: number;
+        height: number;
+        radius: number;
+    };
+    answer: {
+        width: number;
+        height: number;
+        radius: number;
+    };
+    fontSize: number;
+    position: {
+        right: number;
+        top: number;
+        zIndex: number;
+    };
+    rotation: string;
+};
+type MathFlashcardProps = {
+    left: string;
+    right: string;
+    layout: FlashcardLayout;
+};
+export declare const MathFlashcard: ({ left, right, layout }: MathFlashcardProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=MathFlashcard.d.ts.map

package/dist/typescript/module/features/fluency/components/start-banner/MathFlashcard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MathFlashcard.d.ts","sourceRoot":"","sources":["../../../../../../../src/features/fluency/components/start-banner/MathFlashcard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAA;IACvD,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAA;IACzD,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAA;IACxD,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,KAAK,kBAAkB,GAAG;IACxB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,eAAe,CAAA;CACxB,CAAA;AAED,eAAO,MAAM,aAAa,4BAA6B,kBAAkB,sBA0BxE,CAAA"}

package/dist/typescript/module/features/fluency/components/start-banner/StartBanner.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+type StartBannerProps = {};
+export declare const StartBanner: ({}: StartBannerProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=StartBanner.d.ts.map

package/dist/typescript/module/features/fluency/components/start-banner/StartBanner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StartBanner.d.ts","sourceRoot":"","sources":["../../../../../../../src/features/fluency/components/start-banner/StartBanner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAgBzB,KAAK,gBAAgB,GAAG,EAAE,CAAA;AAE1B,eAAO,MAAM,WAAW,OAAQ,gBAAgB,sBAkC/C,CAAA"}

package/dist/typescript/module/features/fluency/fluency.constants.d.ts

@@ -0,0 +1,24 @@
+import { ButtonColor } from '@magmamath/react-native-ui';
+export declare enum FluencyMode {
+    ADDITION = "ADDITION",
+    SUBTRACTION = "SUBTRACTION",
+    MULTIPLICATION = "MULTIPLICATION",
+    DIVISION = "DIVISION"
+}
+export type FluencyModePreset = {
+    operatorName: string;
+    mastery: {
+        learning: string;
+        developing: string;
+        growing: string;
+        strong: string;
+        mastered: string;
+    };
+    buttonColor: ButtonColor;
+    streakColor: {
+        gained: string;
+        todayBorder: string;
+    };
+};
+export declare const FLUENCY_MODE_PRESETS: Record<FluencyMode, FluencyModePreset>;
+//# sourceMappingURL=fluency.constants.d.ts.map

package/dist/typescript/module/features/fluency/fluency.constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fluency.constants.d.ts","sourceRoot":"","sources":["../../../../../src/features/fluency/fluency.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAU,MAAM,4BAA4B,CAAA;AAEhE,oBAAY,WAAW;IACrB,QAAQ,aAAa;IACrB,WAAW,gBAAgB;IAC3B,cAAc,mBAAmB;IACjC,QAAQ,aAAa;CACtB;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,YAAY,EAAE,MAAM,CAAA;IACpB,OAAO,EAAE;QACP,QAAQ,EAAE,MAAM,CAAA;QAChB,UAAU,EAAE,MAAM,CAAA;QAClB,OAAO,EAAE,MAAM,CAAA;QACf,MAAM,EAAE,MAAM,CAAA;QACd,QAAQ,EAAE,MAAM,CAAA;KACjB,CAAA;IACD,WAAW,EAAE,WAAW,CAAA;IACxB,WAAW,EAAE;QACX,MAAM,EAAE,MAAM,CAAA;QACd,WAAW,EAAE,MAAM,CAAA;KACpB,CAAA;CACF,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,WAAW,EAAE,iBAAiB,CAiDvE,CAAA"}

package/dist/typescript/module/features/fluency/fluency.helpers.d.ts

@@ -0,0 +1,2 @@
+export declare const getFluency: () => void;
+//# sourceMappingURL=fluency.helpers.d.ts.map

package/dist/typescript/module/features/fluency/fluency.helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fluency.helpers.d.ts","sourceRoot":"","sources":["../../../../../src/features/fluency/fluency.helpers.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,YAAW,CAAA"}

package/dist/typescript/module/features/fluency/fluency.types.d.ts

@@ -0,0 +1,2 @@
+export type Fluency = {};
+//# sourceMappingURL=fluency.types.d.ts.map

package/dist/typescript/module/features/fluency/fluency.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fluency.types.d.ts","sourceRoot":"","sources":["../../../../../src/features/fluency/fluency.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,OAAO,GAAG,EAAE,CAAA"}

package/dist/typescript/module/features/fluency/hooks/useFluencyModeUIPreset.d.ts

@@ -0,0 +1,3 @@
+import { FluencyModePreset } from '../fluency.constants';
+export declare const useFluencyModeUIPreset: () => FluencyModePreset;
+//# sourceMappingURL=useFluencyModeUIPreset.d.ts.map

package/dist/typescript/module/features/fluency/hooks/useFluencyModeUIPreset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFluencyModeUIPreset.d.ts","sourceRoot":"","sources":["../../../../../../src/features/fluency/hooks/useFluencyModeUIPreset.ts"],"names":[],"mappings":"AACA,OAAO,EAAwB,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AAG9E,eAAO,MAAM,sBAAsB,QAAO,iBAGzC,CAAA"}

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

@@ -0,0 +1,6 @@
+export * from './fluency.constants';
+export * from './fluency.types';
+export * from './fluency.helpers';
+export { Fluency } from './components/Fluency';
+export { FluencyModel } from './model/FluencyModel';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/features/fluency/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AACnC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA"}

package/dist/typescript/module/features/fluency/model/FluencyApiModel.d.ts

@@ -0,0 +1,6 @@
+type FluencyApiProps = {};
+export declare class FluencyApiModel {
+    constructor({}: FluencyApiProps);
+}
+export {};
+//# sourceMappingURL=FluencyApiModel.d.ts.map

package/dist/typescript/module/features/fluency/model/FluencyApiModel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluencyApiModel.d.ts","sourceRoot":"","sources":["../../../../../../src/features/fluency/model/FluencyApiModel.ts"],"names":[],"mappings":"AAAA,KAAK,eAAe,GAAG,EAAE,CAAA;AAEzB,qBAAa,eAAe;gBACd,EAAE,EAAE,eAAe;CAChC"}

package/dist/typescript/module/features/fluency/model/FluencyDaysStreakModel.d.ts

@@ -0,0 +1,3 @@
+export declare class FluencyDaysStreakModel {
+}
+//# sourceMappingURL=FluencyDaysStreakModel.d.ts.map

package/dist/typescript/module/features/fluency/model/FluencyDaysStreakModel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluencyDaysStreakModel.d.ts","sourceRoot":"","sources":["../../../../../../src/features/fluency/model/FluencyDaysStreakModel.ts"],"names":[],"mappings":"AAAA,qBAAa,sBAAsB;CAAG"}

package/dist/typescript/module/features/fluency/model/FluencyMatrixModel.d.ts

@@ -0,0 +1,3 @@
+export declare class FluencyMatrixModel {
+}
+//# sourceMappingURL=FluencyMatrixModel.d.ts.map

package/dist/typescript/module/features/fluency/model/FluencyMatrixModel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluencyMatrixModel.d.ts","sourceRoot":"","sources":["../../../../../../src/features/fluency/model/FluencyMatrixModel.ts"],"names":[],"mappings":"AAAA,qBAAa,kBAAkB;CAAG"}

package/dist/typescript/module/features/fluency/model/FluencyModel.d.ts

@@ -0,0 +1,17 @@
+import { FluencyMode } from '../fluency.constants';
+import { FluencyDaysStreakModel } from './FluencyDaysStreakModel';
+import { FluencyMatrixModel } from './FluencyMatrixModel';
+import { FluencyApiModel } from './FluencyApiModel';
+type FluencyModelProps = {
+    api: {};
+};
+export declare class FluencyModel {
+    readonly api: FluencyApiModel;
+    readonly streak: FluencyDaysStreakModel;
+    readonly matrix: FluencyMatrixModel;
+    readonly setMode: import("effector").EventCallable<FluencyMode>;
+    readonly $mode: import("effector").StoreWritable<FluencyMode>;
+    constructor({ api }: FluencyModelProps);
+}
+export {};
+//# sourceMappingURL=FluencyModel.d.ts.map

package/dist/typescript/module/features/fluency/model/FluencyModel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluencyModel.d.ts","sourceRoot":"","sources":["../../../../../../src/features/fluency/model/FluencyModel.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAClD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAEnD,KAAK,iBAAiB,GAAG;IACvB,GAAG,EAAE,EAAE,CAAA;CACR,CAAA;AAED,qBAAa,YAAY;IACvB,SAAgB,GAAG,EAAE,eAAe,CAAA;IACpC,SAAgB,MAAM,EAAE,sBAAsB,CAAA;IAC9C,SAAgB,MAAM,EAAE,kBAAkB,CAAA;IAE1C,SAAgB,OAAO,gDAA6B;IACpD,SAAgB,KAAK,gDAA8C;gBAEvD,EAAE,GAAG,EAAE,EAAE,iBAAiB;CAKvC"}

package/dist/typescript/module/features/fluency/model/fluency.instance.d.ts

@@ -0,0 +1,3 @@
+import { FluencyModel } from './FluencyModel';
+export declare const fluencyModel: FluencyModel;
+//# sourceMappingURL=fluency.instance.d.ts.map

package/dist/typescript/module/features/fluency/model/fluency.instance.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fluency.instance.d.ts","sourceRoot":"","sources":["../../../../../../src/features/fluency/model/fluency.instance.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAE7C,eAAO,MAAM,YAAY,cAAgC,CAAA"}

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

@@ -14,4 +14,5 @@ export * from './shared/icons';
 export * from './features/voice';
 export * from './features/featureUsage';
 export * from './features/uiMode';
+export * from './features/fluency';
 //# 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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magmamath/students-features",
-  "version": "1.3.25",
+  "version": "1.3.26-rc.0",
   "description": "Magmamath features library",
   "source": "src/index.ts",
   "main": "src/index.ts",

package/src/features/fluency/__tests__/FluencyModel.test.ts

@@ -0,0 +1,28 @@
+jest.mock('@magmamath/react-native-ui', () => ({
+  ButtonColor: {
+    GREEN: 'GREEN',
+    ORANGE: 'ORANGE',
+    BLUE: 'BLUE',
+    PURPLE: 'PURPLE',
+  },
+  COLORS: new Proxy({}, { get: (_: object, key: string) => key }),
+}))
+
+import { allSettled, fork } from 'effector'
+import { FluencyModel } from '../model/FluencyModel'
+import { FluencyMode } from '../fluency.constants'
+
+describe('FluencyModel.$mode', () => {
+  it('defaults to ADDITION', () => {
+    const model = new FluencyModel({ api: {} })
+    const scope = fork()
+    expect(scope.getState(model.$mode)).toBe(FluencyMode.ADDITION)
+  })
+
+  it('updates when setMode is called', async () => {
+    const model = new FluencyModel({ api: {} })
+    const scope = fork()
+    await allSettled(model.setMode, { scope, params: FluencyMode.SUBTRACTION })
+    expect(scope.getState(model.$mode)).toBe(FluencyMode.SUBTRACTION)
+  })
+})

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

@@ -0,0 +1,59 @@
+import React from '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 type { FluencyModel } from '../model/FluencyModel'
+
+type FluencyProps = {
+  model: FluencyModel
+}
+
+export const Fluency = ({ model }: FluencyProps) => {
+  const t = useText()
+  return (
+    <View style={styles.container}>
+      <Typography variant={HeadingVariants.H2} style={styles.title}>
+        Fluency practice
+      </Typography>
+
+      <View style={styles.header}>
+        <StartBanner />
+        <DayStreakCounter />
+      </View>
+
+      <View style={styles.matrixContainer}>
+        <View style={styles.operatorWrapper}>
+          <SelectMathOperator />
+        </View>
+        <FluencyMatrix />
+      </View>
+    </View>
+  )
+}
+
+const MATRIX_LEGEND_HEIGHT = 65
+
+const styles = StyleSheet.create({
+  container: {},
+  title: { color: COLORS.NEUTRAL_9 },
+  header: {
+    height: 135,
+    flexDirection: 'row',
+    marginTop: SPACING[400],
+    gap: SPACING[400],
+    zIndex: 1,
+  },
+  matrixContainer: {
+    flexDirection: 'row',
+    marginTop: SPACING[400],
+    gap: SPACING[200],
+  },
+  operatorWrapper: {
+    alignSelf: 'flex-start',
+    marginTop: MATRIX_LEGEND_HEIGHT,
+  },
+})

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

@@ -0,0 +1,82 @@
+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 { FluencyModePreset } from '../../fluency.constants'
+
+const CIRCLE_SIZE = SPACING[800]
+const CIRCLE_BORDER_RADIUS = BORDER_RADIUS[400]
+
+type StreakStatus = 'missed' | 'gained' | 'today'
+
+type StreakDayProps = {
+  label: string
+  status: StreakStatus
+  streakColor: FluencyModePreset['streakColor']
+}
+
+type StatusStyle = {
+  circle: ViewStyle
+  label: TextStyle
+  hasIcon: boolean
+}
+
+const getStatusStyle = (
+  status: StreakStatus,
+  streakColor: FluencyModePreset['streakColor']
+): StatusStyle => {
+  if (status === 'gained') {
+    return {
+      circle: { backgroundColor: streakColor.gained, borderWidth: 1, borderColor: COLORS.NEUTRAL_3 },
+      label: { color: streakColor.gained },
+      hasIcon: true,
+    }
+  }
+  if (status === 'today') {
+    return {
+      circle: { backgroundColor: COLORS.NEUTRAL_2, borderWidth: 3, borderColor: streakColor.todayBorder },
+      label: { color: streakColor.todayBorder },
+      hasIcon: false,
+    }
+  }
+  return {
+    circle: { backgroundColor: COLORS.NEUTRAL_2, borderWidth: 1, borderColor: COLORS.NEUTRAL_3 },
+    label: { color: COLORS.NEUTRAL_4 },
+    hasIcon: false,
+  }
+}
+
+export const StreakDay = ({ label, status, streakColor }: StreakDayProps) => {
+  const { circle, label: labelStyle, hasIcon } = getStatusStyle(status, streakColor)
+
+  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: CIRCLE_SIZE,
+    height: CIRCLE_SIZE,
+    borderRadius: CIRCLE_BORDER_RADIUS,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+})

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

@@ -0,0 +1,51 @@
+import React from 'react'
+import { View, StyleSheet } from 'react-native'
+import { BORDER_RADIUS, COLORS, SHADOWS, SPACING, Typography } from '@magmamath/react-native-ui'
+import { StreakDay } from './DayStreak'
+import { useFluencyModeUIPreset } from '../../hooks/useFluencyModeUIPreset'
+
+const CONTAINER_WIDTH = 230
+const STREAK_DAYS_MARGIN_TOP = 10
+
+type DayStreakCounterProps = {}
+
+export const DayStreakCounter = ({}: DayStreakCounterProps) => {
+  const { streakColor } = useFluencyModeUIPreset()
+
+  return (
+    <View style={styles.container}>
+      <Typography style={styles.label}>Practice this week</Typography>
+
+      <View style={styles.streakDays}>
+        {/* TODO: Replace hardcoded days and statuses with real streak data from the model */}
+        <StreakDay label="M" status="gained" streakColor={streakColor} />
+        <StreakDay label="T" status="gained" streakColor={streakColor} />
+        <StreakDay label="W" status="missed" streakColor={streakColor} />
+        <StreakDay label="T" status="today" streakColor={streakColor} />
+        <StreakDay label="F" status="gained" streakColor={streakColor} />
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: '100%',
+    width: CONTAINER_WIDTH,
+    paddingVertical: SPACING[200],
+    paddingHorizontal: SPACING[400],
+    borderRadius: BORDER_RADIUS[300],
+    backgroundColor: COLORS.NEUTRAL_1,
+    ...SHADOWS[1],
+  },
+  label: {
+    fontSize: SPACING[300],
+    fontWeight: '700',
+    color: COLORS.NEUTRAL_8,
+  },
+  streakDays: {
+    flexDirection: 'row',
+    marginTop: STREAK_DAYS_MARGIN_TOP,
+    gap: SPACING[200],
+  },
+})

package/src/features/fluency/components/matrix/FluencyMatrix.tsx

@@ -0,0 +1,30 @@
+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'
+import { MatrixFill } from './components/MatrixFill'
+
+type FluencyMatrixProps = {}
+
+export const FluencyMatrix = ({}: FluencyMatrixProps) => (
+  <View style={styles.container}>
+    <MatrixLegend />
+    <View style={styles.body}>
+      <MatrixFill />
+    </View>
+  </View>
+)
+
+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],
+  },
+})

package/src/features/fluency/components/matrix/components/MatrixFill.tsx

@@ -0,0 +1,86 @@
+import React from 'react'
+import { View, Text, StyleSheet } from 'react-native'
+import { BORDER_RADIUS, COLORS, SPACING } from '@magmamath/react-native-ui'
+import { FluencyModePreset } from '../../../fluency.constants'
+import { useFluencyModeUIPreset } from '../../../hooks/useFluencyModeUIPreset'
+
+const GRID_SIZE = 21
+const HEADER_FONT_SIZE = 13
+
+type MasteryColors = FluencyModePreset['mastery']
+
+const getMasteryColor = (sum: number, mastery: MasteryColors): string => {
+  if (sum <= 9) return mastery.mastered
+  if (sum <= 17) return mastery.strong
+  if (sum <= 24) return mastery.growing
+  if (sum <= 32) return mastery.developing
+  return mastery.learning
+}
+
+const getCellBackground = (row: number, col: number, mastery: MasteryColors): string => {
+  if (row === 0 && col === 0) return COLORS.NEUTRAL_2
+  if (row === 0 || col === 0) return COLORS.NEUTRAL_5
+  return getMasteryColor(row + col, mastery)
+}
+
+const getCellLabel = (row: number, col: number): number | null => {
+  if (row === 0 && col === 0) return null
+  if (row === 0) return col
+  if (col === 0) return row
+  return null
+}
+
+type MatrixCellProps = {
+  row: number
+  col: number
+  mastery: MasteryColors
+}
+
+const MatrixCell = ({ row, col, mastery }: MatrixCellProps) => {
+  const label = getCellLabel(row, col)
+  return (
+    <View style={[styles.cell, { backgroundColor: getCellBackground(row, col, mastery) }]}>
+      {label !== null && <Text style={styles.headerText}>{label}</Text>}
+    </View>
+  )
+}
+
+type MatrixFillProps = {}
+
+export const MatrixFill = ({}: MatrixFillProps) => {
+  const { mastery } = useFluencyModeUIPreset()
+
+  return (
+    <View style={styles.grid}>
+      {Array.from({ length: GRID_SIZE }, (_, row) => (
+        <View key={row} style={styles.row}>
+          {Array.from({ length: GRID_SIZE }, (_, col) => (
+            <MatrixCell key={col} row={row} col={col} mastery={mastery} />
+          ))}
+        </View>
+      ))}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  grid: {
+    flex: 1,
+    gap: SPACING[50],
+  },
+  row: {
+    flex: 1,
+    flexDirection: 'row',
+    gap: SPACING[50],
+  },
+  cell: {
+    flex: 1,
+    borderRadius: BORDER_RADIUS[100],
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  headerText: {
+    fontSize: HEADER_FONT_SIZE,
+    color: COLORS.NEUTRAL_2,
+  },
+})