@cuemath/leap 3.1.7-aa2 → 3.1.7-aa4

package/dist/features/cue-canvas/toolbar/color-palette.js

@@ -1,16 +1,17 @@
 import { jsx as r } from "react/jsx-runtime";
-import { memo as $, useCallback as d, useMemo as C } from "react";
-import h from "../../ui/buttons/clickable/clickable.js";
+import { memo as $, useCallback as d, useMemo as h } from "react";
+import f from "../../ui/buttons/clickable/clickable.js";
 import l from "../../ui/layout/flex-view.js";
-import { getColorsForUser as f } from "../cue-canvas-helpers.js";
-import { ColorPicker as p, StyledCheckIcon as u } from "../cue-cavas-styled.js";
-const y = $((c) => {
-  const { setActiveColor: t, activeColor: i, userType: n, renderAs: o } = c, s = d(
+import { getColorsForUser as p } from "../cue-canvas-helpers.js";
+import { ColorPicker as u, StyledCheckIcon as g } from "../cue-cavas-styled.js";
+import { useCueCanvasActions as k } from "../hooks/use-cue-canvas-actions.js";
+const j = $((c) => {
+  const { activeInstance: t } = k(), { setActiveColor: i, activeColor: n, userType: s, renderAs: o } = c, a = d(
     (e) => {
-      t(e);
+      i(e), t == null || t.setColor(e);
     },
-    [t]
-  ), a = C(() => f(n, o), [n, o]);
+    [t, i]
+  ), m = h(() => p(s, o), [s, o]);
   return /* @__PURE__ */ r(
     l,
     {
@@ -18,10 +19,10 @@ const y = $((c) => {
       $flexWrap: !0,
       $width: o === "canvas" ? 66 : 200,
       $position: "relative",
-      children: a.map((e, m) => /* @__PURE__ */ r(
-        h,
+      children: m.map((e, C) => /* @__PURE__ */ r(
+        f,
         {
-          onClick: () => s(e),
+          onClick: () => a(e),
           label: `Color Picker - ${e}`,
           children: /* @__PURE__ */ r(
             l,
@@ -30,10 +31,10 @@ const y = $((c) => {
               $height: 22,
               $borderRadius: 11,
               $justifyContent: "center",
-              $background: i === e ? "BLACK" : "WHITE",
+              $background: n === e ? "BLACK" : "WHITE",
               $alignItems: "center",
               children: /* @__PURE__ */ r(
-                p,
+                u,
                 {
                   $width: 20,
                   $height: 20,
@@ -41,18 +42,18 @@ const y = $((c) => {
                   $color: e,
                   $alignItems: "center",
                   $justifyContent: "center",
-                  children: i === e && /* @__PURE__ */ r(u, {})
+                  children: n === e && /* @__PURE__ */ r(g, {})
                 }
               )
             }
           )
         },
-        m
+        C
       ))
     }
   );
 });
 export {
-  y as default
+  j as default
 };
 //# sourceMappingURL=color-palette.js.map

package/dist/features/cue-canvas/toolbar/color-palette.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-palette.js","sources":["../../../../src/features/cue-canvas/toolbar/color-palette.tsx"],"sourcesContent":["import type { TUserTypes } from '../../ui/types';\nimport type { TCueCanvasColors, TRenderAs } from '../types/cue-canvas';\n\nimport { memo, useCallback, useMemo } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport FlexView from '../../ui/layout/flex-view';\nimport { getColorsForUser } from '../cue-canvas-helpers';\nimport { StyledCheckIcon, ColorPicker } from '../cue-cavas-styled';\n\ninterface IColorPalette {\n  setActiveColor: (color: TCueCanvasColors) => void;\n  activeColor: TCueCanvasColors;\n  userType: TUserTypes;\n  renderAs: TRenderAs;\n}\n\nconst ColorPalette: React.FC<IColorPalette> = memo(props => {\n  const { setActiveColor, activeColor, userType, renderAs } = props;\n  const handleColorChange = useCallback(\n    (color: TCueCanvasColors) => {\n      setActiveColor(color);\n    },\n    [setActiveColor],\n  );\n  const colors = useMemo(() => getColorsForUser(userType, renderAs), [userType, renderAs]);\n\n  return (\n    <FlexView\n      $flexDirection=\"row\"\n      $flexWrap\n      $width={renderAs === 'canvas' ? 66 : 200}\n      $position=\"relative\"\n    >\n      {colors.map((color, index) => (\n        <Clickable\n          key={index}\n          onClick={() => handleColorChange(color)}\n          label={`Color Picker - ${color}`}\n        >\n          <FlexView\n            $width={22}\n            $height={22}\n            $borderRadius={11}\n            $justifyContent=\"center\"\n            $background={activeColor === color ? 'BLACK' : 'WHITE'}\n            $alignItems=\"center\"\n          >\n            <ColorPicker\n              $width={20}\n              $height={20}\n              $borderRadius={10}\n              $color={color}\n              $alignItems=\"center\"\n              $justifyContent=\"center\"\n            >\n              {activeColor === color && <StyledCheckIcon />}\n            </ColorPicker>\n          </FlexView>\n        </Clickable>\n      ))}\n    </FlexView>\n  );\n});\n\nexport default ColorPalette;\n"],"names":["ColorPalette","memo","props","setActiveColor","activeColor","userType","renderAs","handleColorChange","useCallback","color","colors","useMemo","getColorsForUser","jsx","FlexView","index","Clickable","ColorPicker","StyledCheckIcon"],"mappings":";;;;;;AAiBM,MAAAA,IAAwCC,EAAK,CAASC,MAAA;AAC1D,QAAM,EAAE,gBAAAC,GAAgB,aAAAC,GAAa,UAAAC,GAAU,UAAAC,MAAaJ,GACtDK,IAAoBC;AAAA,IACxB,CAACC,MAA4B;AAC3B,MAAAN,EAAeM,CAAK;AAAA,IACtB;AAAA,IACA,CAACN,CAAc;AAAA,EAAA,GAEXO,IAASC,EAAQ,MAAMC,EAAiBP,GAAUC,CAAQ,GAAG,CAACD,GAAUC,CAAQ,CAAC;AAGrF,SAAA,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,gBAAe;AAAA,MACf,WAAS;AAAA,MACT,QAAQR,MAAa,WAAW,KAAK;AAAA,MACrC,WAAU;AAAA,MAET,UAAOI,EAAA,IAAI,CAACD,GAAOM,MAClB,gBAAAF;AAAA,QAACG;AAAA,QAAA;AAAA,UAEC,SAAS,MAAMT,EAAkBE,CAAK;AAAA,UACtC,OAAO,kBAAkBA,CAAK;AAAA,UAE9B,UAAA,gBAAAI;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,QAAQ;AAAA,cACR,SAAS;AAAA,cACT,eAAe;AAAA,cACf,iBAAgB;AAAA,cAChB,aAAaV,MAAgBK,IAAQ,UAAU;AAAA,cAC/C,aAAY;AAAA,cAEZ,UAAA,gBAAAI;AAAA,gBAACI;AAAA,gBAAA;AAAA,kBACC,QAAQ;AAAA,kBACR,SAAS;AAAA,kBACT,eAAe;AAAA,kBACf,QAAQR;AAAA,kBACR,aAAY;AAAA,kBACZ,iBAAgB;AAAA,kBAEf,UAAAL,MAAgBK,KAAS,gBAAAI,EAACK,GAAgB,CAAA,CAAA;AAAA,gBAAA;AAAA,cAC7C;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,QAtBKH;AAAA,MAAA,CAwBR;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"color-palette.js","sources":["../../../../src/features/cue-canvas/toolbar/color-palette.tsx"],"sourcesContent":["import type { TUserTypes } from '../../ui/types';\nimport type { TCueCanvasColors, TRenderAs } from '../types/cue-canvas';\n\nimport { memo, useCallback, useMemo } from 'react';\n\nimport Clickable from '../../ui/buttons/clickable/clickable';\nimport FlexView from '../../ui/layout/flex-view';\nimport { getColorsForUser } from '../cue-canvas-helpers';\nimport { StyledCheckIcon, ColorPicker } from '../cue-cavas-styled';\nimport { useCueCanvasActions } from '../hooks/use-cue-canvas-actions';\n\ninterface IColorPalette {\n  setActiveColor: (color: TCueCanvasColors) => void;\n  activeColor: TCueCanvasColors;\n  userType: TUserTypes;\n  renderAs: TRenderAs;\n}\n\nconst ColorPalette: React.FC<IColorPalette> = memo(props => {\n  const { activeInstance: cueCanvas } = useCueCanvasActions();\n  const { setActiveColor, activeColor, userType, renderAs } = props;\n  const handleColorChange = useCallback(\n    (color: TCueCanvasColors) => {\n      setActiveColor(color);\n      cueCanvas?.setColor(color);\n    },\n    [cueCanvas, setActiveColor],\n  );\n  const colors = useMemo(() => getColorsForUser(userType, renderAs), [userType, renderAs]);\n\n  return (\n    <FlexView\n      $flexDirection=\"row\"\n      $flexWrap\n      $width={renderAs === 'canvas' ? 66 : 200}\n      $position=\"relative\"\n    >\n      {colors.map((color, index) => (\n        <Clickable\n          key={index}\n          onClick={() => handleColorChange(color)}\n          label={`Color Picker - ${color}`}\n        >\n          <FlexView\n            $width={22}\n            $height={22}\n            $borderRadius={11}\n            $justifyContent=\"center\"\n            $background={activeColor === color ? 'BLACK' : 'WHITE'}\n            $alignItems=\"center\"\n          >\n            <ColorPicker\n              $width={20}\n              $height={20}\n              $borderRadius={10}\n              $color={color}\n              $alignItems=\"center\"\n              $justifyContent=\"center\"\n            >\n              {activeColor === color && <StyledCheckIcon />}\n            </ColorPicker>\n          </FlexView>\n        </Clickable>\n      ))}\n    </FlexView>\n  );\n});\n\nexport default ColorPalette;\n"],"names":["ColorPalette","memo","props","cueCanvas","useCueCanvasActions","setActiveColor","activeColor","userType","renderAs","handleColorChange","useCallback","color","colors","useMemo","getColorsForUser","jsx","FlexView","index","Clickable","ColorPicker","StyledCheckIcon"],"mappings":";;;;;;;AAkBM,MAAAA,IAAwCC,EAAK,CAASC,MAAA;AAC1D,QAAM,EAAE,gBAAgBC,EAAU,IAAIC,EAAoB,GACpD,EAAE,gBAAAC,GAAgB,aAAAC,GAAa,UAAAC,GAAU,UAAAC,MAAaN,GACtDO,IAAoBC;AAAA,IACxB,CAACC,MAA4B;AAC3B,MAAAN,EAAeM,CAAK,GACpBR,KAAA,QAAAA,EAAW,SAASQ;AAAA,IACtB;AAAA,IACA,CAACR,GAAWE,CAAc;AAAA,EAAA,GAEtBO,IAASC,EAAQ,MAAMC,EAAiBP,GAAUC,CAAQ,GAAG,CAACD,GAAUC,CAAQ,CAAC;AAGrF,SAAA,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,gBAAe;AAAA,MACf,WAAS;AAAA,MACT,QAAQR,MAAa,WAAW,KAAK;AAAA,MACrC,WAAU;AAAA,MAET,UAAOI,EAAA,IAAI,CAACD,GAAOM,MAClB,gBAAAF;AAAA,QAACG;AAAA,QAAA;AAAA,UAEC,SAAS,MAAMT,EAAkBE,CAAK;AAAA,UACtC,OAAO,kBAAkBA,CAAK;AAAA,UAE9B,UAAA,gBAAAI;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,QAAQ;AAAA,cACR,SAAS;AAAA,cACT,eAAe;AAAA,cACf,iBAAgB;AAAA,cAChB,aAAaV,MAAgBK,IAAQ,UAAU;AAAA,cAC/C,aAAY;AAAA,cAEZ,UAAA,gBAAAI;AAAA,gBAACI;AAAA,gBAAA;AAAA,kBACC,QAAQ;AAAA,kBACR,SAAS;AAAA,kBACT,eAAe;AAAA,kBACf,QAAQR;AAAA,kBACR,aAAY;AAAA,kBACZ,iBAAgB;AAAA,kBAEf,UAAAL,MAAgBK,KAAS,gBAAAI,EAACK,GAAgB,CAAA,CAAA;AAAA,gBAAA;AAAA,cAC7C;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,QAtBKH;AAAA,MAAA,CAwBR;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cuemath/leap",
-  "version": "3.1.7-aa2",
+  "version": "3.1.7-aa4",
   "type": "module",
   "files": [
     "dist"