@jlunamena/design-system 1.0.0 → 1.0.2

package/dist/index.d.mts

@@ -122,6 +122,7 @@ type BodyDiagramProps = {
     overlayStyle?: BodyDiagramOverlayStyle;
     intensityByMuscle?: Record<string, BodyDiagramIntensity>;
 };
+
 declare const BodyDiagram: ({ view, svgMarkupByView, baseImageByView, selectedMuscles, onSelectedChange, debugForceVisible, interactionMode, palette, overlayStyle, intensityByMuscle, }: BodyDiagramProps) => react_jsx_runtime.JSX.Element;
 
 export { BodyDiagram, type BodyDiagramIntensity, type BodyDiagramOverlayStyle, type BodyDiagramPalette, type BodyDiagramProps, type BodyDiagramView, type Colors, type Radius, type Shadows, type Spacing, type Typography, colors, radius, shadows, spacing, typography };

package/dist/index.d.ts

@@ -122,6 +122,7 @@ type BodyDiagramProps = {
     overlayStyle?: BodyDiagramOverlayStyle;
     intensityByMuscle?: Record<string, BodyDiagramIntensity>;
 };
+
 declare const BodyDiagram: ({ view, svgMarkupByView, baseImageByView, selectedMuscles, onSelectedChange, debugForceVisible, interactionMode, palette, overlayStyle, intensityByMuscle, }: BodyDiagramProps) => react_jsx_runtime.JSX.Element;
 
 export { BodyDiagram, type BodyDiagramIntensity, type BodyDiagramOverlayStyle, type BodyDiagramPalette, type BodyDiagramProps, type BodyDiagramView, type Colors, type Radius, type Shadows, type Spacing, type Typography, colors, radius, shadows, spacing, typography };

package/dist/index.js

@@ -166,6 +166,17 @@ var resolveBodyDiagramMuscleState = (input) => {
     isDebugForced
   };
 };
+
+// src/components/body-diagram/toggleMuscle.ts
+var toggleMuscle = (selectedMuscles, key) => {
+  const next = new Set(selectedMuscles);
+  if (next.has(key)) {
+    next.delete(key);
+  } else {
+    next.add(key);
+  }
+  return Array.from(next);
+};
 var BodyDiagram = ({
   view,
   svgMarkupByView,
@@ -188,13 +199,7 @@ var BodyDiagram = ({
       const element = target.closest("[data-muscle-key]");
       const key = element?.getAttribute("data-muscle-key");
       if (!key) return;
-      const next = new Set(selectedMuscles);
-      if (next.has(key)) {
-        next.delete(key);
-      } else {
-        next.add(key);
-      }
-      onSelectedChange(Array.from(next));
+      onSelectedChange(toggleMuscle(selectedMuscles, key));
     },
     [interactionMode, onSelectedChange, selectedMuscles]
   );

package/dist/index.mjs

@@ -164,6 +164,17 @@ var resolveBodyDiagramMuscleState = (input) => {
     isDebugForced
   };
 };
+
+// src/components/body-diagram/toggleMuscle.ts
+var toggleMuscle = (selectedMuscles, key) => {
+  const next = new Set(selectedMuscles);
+  if (next.has(key)) {
+    next.delete(key);
+  } else {
+    next.add(key);
+  }
+  return Array.from(next);
+};
 var BodyDiagram = ({
   view,
   svgMarkupByView,
@@ -186,13 +197,7 @@ var BodyDiagram = ({
       const element = target.closest("[data-muscle-key]");
       const key = element?.getAttribute("data-muscle-key");
       if (!key) return;
-      const next = new Set(selectedMuscles);
-      if (next.has(key)) {
-        next.delete(key);
-      } else {
-        next.add(key);
-      }
-      onSelectedChange(Array.from(next));
+      onSelectedChange(toggleMuscle(selectedMuscles, key));
     },
     [interactionMode, onSelectedChange, selectedMuscles]
   );

package/dist/index.native.js

@@ -0,0 +1,231 @@
+'use strict';
+
+var react = require('react');
+var reactNative = require('react-native');
+var reactNativeSvg = require('react-native-svg');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/tokens/colors.ts
+var colors = {
+  primary: "#FDC026",
+  accent: "#6AABDE",
+  bodyDiagram: {
+    muscleFill: "#FFBF00",
+    muscleStroke: "#FF0090",
+    muscleStrokeWidth: 2,
+    muscleOpacity: 1
+  },
+  background: {
+    default: "#161C26",
+    muted: "#1C2434",
+    highlight: "#383040",
+    depth: "#08080A"
+  },
+  text: {
+    primary: "#E8E8E8",
+    secondary: "#9B9B9B"
+  }
+};
+
+// src/tokens/spacing.ts
+var spacing = {
+  big: 32,
+  default: 24,
+  small: 12,
+  textHorizontal: 4,
+  textVertical: 0
+};
+
+// src/tokens/radius.ts
+var radius = {
+  button: 4,
+  card: 8,
+  input: 4,
+  full: 9999
+};
+
+// src/tokens/typography.ts
+var typography = {
+  size: {
+    xs: 11,
+    sm: 13,
+    base: 15,
+    md: 17,
+    lg: 20,
+    xl: 24,
+    "2xl": 30,
+    "3xl": 36
+  },
+  weight: {
+    regular: "400",
+    medium: "500",
+    semibold: "600",
+    bold: "700"
+  },
+  lineHeight: {
+    tight: 1.2,
+    normal: 1.5,
+    relaxed: 1.75
+  }
+};
+
+// src/tokens/shadows.ts
+var shadows = {
+  sm: {
+    shadowColor: colors.background.depth,
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.4,
+    shadowRadius: 2,
+    elevation: 2
+  },
+  md: {
+    shadowColor: colors.background.depth,
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.5,
+    shadowRadius: 8,
+    elevation: 4
+  },
+  lg: {
+    shadowColor: colors.background.depth,
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.6,
+    shadowRadius: 16,
+    elevation: 8
+  }
+};
+
+// src/utils/bodyDiagramState.ts
+var DEFAULT_LEVEL_OPACITY = {
+  off: 0,
+  low: 0.2,
+  medium: 0.5,
+  high: 0.9
+};
+var DEFAULT_DEBUG_STYLE = {
+  fill: "red",
+  stroke: "yellow",
+  strokeWidth: 4,
+  opacity: 1
+};
+var DEFAULT_PALETTE = {
+  muscleFill: colors.bodyDiagram.muscleFill,
+  muscleStroke: colors.bodyDiagram.muscleStroke,
+  muscleStrokeWidth: colors.bodyDiagram.muscleStrokeWidth,
+  muscleOpacity: colors.bodyDiagram.muscleOpacity
+};
+var LEVELS = ["off", "low", "medium", "high"];
+var resolveBodyDiagramTheme = (input = {}) => {
+  const palette = { ...DEFAULT_PALETTE, ...input.palette };
+  const opacityByLevel = { ...DEFAULT_LEVEL_OPACITY, ...input.levelOpacity };
+  const baseOpacity = palette.muscleOpacity ?? 1;
+  const levels = LEVELS.reduce(
+    (acc, level) => {
+      acc[level] = {
+        fill: palette.muscleFill ?? "",
+        stroke: palette.muscleStroke,
+        strokeWidth: palette.muscleStrokeWidth,
+        opacity: baseOpacity * (opacityByLevel[level] ?? 1)
+      };
+      return acc;
+    },
+    {
+      off: { fill: "", opacity: 0 },
+      low: { fill: "", opacity: 0 },
+      medium: { fill: "", opacity: 0 },
+      high: { fill: "", opacity: 0 }
+    }
+  );
+  return {
+    levels,
+    debug: input.debugStyle ?? DEFAULT_DEBUG_STYLE
+  };
+};
+var resolveBodyDiagramMuscleState = (input) => {
+  const { muscleKey, selectedMuscles, intensityByMuscle, debugForceVisible } = input;
+  const explicitLevel = intensityByMuscle?.[muscleKey];
+  let level = "off";
+  let source = "defaultOff";
+  if (explicitLevel) {
+    level = explicitLevel;
+    source = "explicit";
+  } else if (selectedMuscles.includes(muscleKey)) {
+    level = "high";
+    source = "selectedFallback";
+  }
+  const theme = input.theme ?? resolveBodyDiagramTheme({ palette: input.palette });
+  const isDebugForced = Boolean(debugForceVisible);
+  const style = isDebugForced ? theme.debug ?? DEFAULT_DEBUG_STYLE : theme.levels[level];
+  const shouldRender = isDebugForced ? true : level !== "off";
+  const interactionMode = input.interactionMode ?? "auto";
+  const interactive = interactionMode === "readonly" ? false : interactionMode === "editable" ? true : level !== "off";
+  return {
+    key: muscleKey,
+    level,
+    interactive,
+    style,
+    source,
+    shouldRender,
+    isDebugForced
+  };
+};
+var styleMarkup = (markup, params) => {
+  const { selectedMuscles, intensityByMuscle, palette, debugForceVisible, interactionMode } = params;
+  const theme = resolveBodyDiagramTheme({ palette });
+  return markup.replace(/<(\w+)([^>]*?\bdata-muscle-key="([^"]+)"[^>]*?)>/g, (match, tag, attrs, key) => {
+    const resolved = resolveBodyDiagramMuscleState({
+      muscleKey: key,
+      selectedMuscles,
+      intensityByMuscle,
+      palette,
+      debugForceVisible,
+      theme,
+      interactionMode
+    });
+    const isOff = resolved.level === "off";
+    const fill = isOff && !resolved.isDebugForced ? "rgba(0,0,0,0)" : resolved.style.fill || void 0;
+    const parts = [];
+    if (fill) parts.push(`fill="${fill}"`);
+    if (resolved.style.stroke) parts.push(`stroke="${resolved.style.stroke}"`);
+    if (resolved.style.strokeWidth != null) parts.push(`stroke-width="${resolved.style.strokeWidth}"`);
+    parts.push(`opacity="${resolved.style.opacity}"`);
+    return `<${tag}${attrs} ${parts.join(" ")}>`;
+  });
+};
+var BodyDiagram = ({
+  view,
+  svgMarkupByView,
+  selectedMuscles,
+  onSelectedChange,
+  debugForceVisible = false,
+  interactionMode = "auto",
+  palette,
+  intensityByMuscle
+}) => {
+  const svgMarkup = svgMarkupByView[view] || "";
+  const xml = react.useMemo(
+    () => styleMarkup(svgMarkup, {
+      selectedMuscles,
+      intensityByMuscle,
+      palette,
+      debugForceVisible,
+      interactionMode
+    }),
+    [svgMarkup, selectedMuscles, intensityByMuscle, palette, debugForceVisible, interactionMode]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles.container, children: /* @__PURE__ */ jsxRuntime.jsx(reactNativeSvg.SvgXml, { xml, width: "100%", height: "100%", preserveAspectRatio: "xMidYMid meet" }) });
+};
+var styles = reactNative.StyleSheet.create({
+  container: {
+    flex: 1,
+    width: "100%",
+    height: "100%",
+    overflow: "hidden"
+  }
+});
+
+exports.BodyDiagram = BodyDiagram;
+exports.colors = colors;
+exports.radius = radius;
+exports.shadows = shadows;
+exports.spacing = spacing;
+exports.typography = typography;

package/dist/index.native.mjs

@@ -0,0 +1,224 @@
+import { useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { SvgXml } from 'react-native-svg';
+import { jsx } from 'react/jsx-runtime';
+
+// src/tokens/colors.ts
+var colors = {
+  primary: "#FDC026",
+  accent: "#6AABDE",
+  bodyDiagram: {
+    muscleFill: "#FFBF00",
+    muscleStroke: "#FF0090",
+    muscleStrokeWidth: 2,
+    muscleOpacity: 1
+  },
+  background: {
+    default: "#161C26",
+    muted: "#1C2434",
+    highlight: "#383040",
+    depth: "#08080A"
+  },
+  text: {
+    primary: "#E8E8E8",
+    secondary: "#9B9B9B"
+  }
+};
+
+// src/tokens/spacing.ts
+var spacing = {
+  big: 32,
+  default: 24,
+  small: 12,
+  textHorizontal: 4,
+  textVertical: 0
+};
+
+// src/tokens/radius.ts
+var radius = {
+  button: 4,
+  card: 8,
+  input: 4,
+  full: 9999
+};
+
+// src/tokens/typography.ts
+var typography = {
+  size: {
+    xs: 11,
+    sm: 13,
+    base: 15,
+    md: 17,
+    lg: 20,
+    xl: 24,
+    "2xl": 30,
+    "3xl": 36
+  },
+  weight: {
+    regular: "400",
+    medium: "500",
+    semibold: "600",
+    bold: "700"
+  },
+  lineHeight: {
+    tight: 1.2,
+    normal: 1.5,
+    relaxed: 1.75
+  }
+};
+
+// src/tokens/shadows.ts
+var shadows = {
+  sm: {
+    shadowColor: colors.background.depth,
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.4,
+    shadowRadius: 2,
+    elevation: 2
+  },
+  md: {
+    shadowColor: colors.background.depth,
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.5,
+    shadowRadius: 8,
+    elevation: 4
+  },
+  lg: {
+    shadowColor: colors.background.depth,
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.6,
+    shadowRadius: 16,
+    elevation: 8
+  }
+};
+
+// src/utils/bodyDiagramState.ts
+var DEFAULT_LEVEL_OPACITY = {
+  off: 0,
+  low: 0.2,
+  medium: 0.5,
+  high: 0.9
+};
+var DEFAULT_DEBUG_STYLE = {
+  fill: "red",
+  stroke: "yellow",
+  strokeWidth: 4,
+  opacity: 1
+};
+var DEFAULT_PALETTE = {
+  muscleFill: colors.bodyDiagram.muscleFill,
+  muscleStroke: colors.bodyDiagram.muscleStroke,
+  muscleStrokeWidth: colors.bodyDiagram.muscleStrokeWidth,
+  muscleOpacity: colors.bodyDiagram.muscleOpacity
+};
+var LEVELS = ["off", "low", "medium", "high"];
+var resolveBodyDiagramTheme = (input = {}) => {
+  const palette = { ...DEFAULT_PALETTE, ...input.palette };
+  const opacityByLevel = { ...DEFAULT_LEVEL_OPACITY, ...input.levelOpacity };
+  const baseOpacity = palette.muscleOpacity ?? 1;
+  const levels = LEVELS.reduce(
+    (acc, level) => {
+      acc[level] = {
+        fill: palette.muscleFill ?? "",
+        stroke: palette.muscleStroke,
+        strokeWidth: palette.muscleStrokeWidth,
+        opacity: baseOpacity * (opacityByLevel[level] ?? 1)
+      };
+      return acc;
+    },
+    {
+      off: { fill: "", opacity: 0 },
+      low: { fill: "", opacity: 0 },
+      medium: { fill: "", opacity: 0 },
+      high: { fill: "", opacity: 0 }
+    }
+  );
+  return {
+    levels,
+    debug: input.debugStyle ?? DEFAULT_DEBUG_STYLE
+  };
+};
+var resolveBodyDiagramMuscleState = (input) => {
+  const { muscleKey, selectedMuscles, intensityByMuscle, debugForceVisible } = input;
+  const explicitLevel = intensityByMuscle?.[muscleKey];
+  let level = "off";
+  let source = "defaultOff";
+  if (explicitLevel) {
+    level = explicitLevel;
+    source = "explicit";
+  } else if (selectedMuscles.includes(muscleKey)) {
+    level = "high";
+    source = "selectedFallback";
+  }
+  const theme = input.theme ?? resolveBodyDiagramTheme({ palette: input.palette });
+  const isDebugForced = Boolean(debugForceVisible);
+  const style = isDebugForced ? theme.debug ?? DEFAULT_DEBUG_STYLE : theme.levels[level];
+  const shouldRender = isDebugForced ? true : level !== "off";
+  const interactionMode = input.interactionMode ?? "auto";
+  const interactive = interactionMode === "readonly" ? false : interactionMode === "editable" ? true : level !== "off";
+  return {
+    key: muscleKey,
+    level,
+    interactive,
+    style,
+    source,
+    shouldRender,
+    isDebugForced
+  };
+};
+var styleMarkup = (markup, params) => {
+  const { selectedMuscles, intensityByMuscle, palette, debugForceVisible, interactionMode } = params;
+  const theme = resolveBodyDiagramTheme({ palette });
+  return markup.replace(/<(\w+)([^>]*?\bdata-muscle-key="([^"]+)"[^>]*?)>/g, (match, tag, attrs, key) => {
+    const resolved = resolveBodyDiagramMuscleState({
+      muscleKey: key,
+      selectedMuscles,
+      intensityByMuscle,
+      palette,
+      debugForceVisible,
+      theme,
+      interactionMode
+    });
+    const isOff = resolved.level === "off";
+    const fill = isOff && !resolved.isDebugForced ? "rgba(0,0,0,0)" : resolved.style.fill || void 0;
+    const parts = [];
+    if (fill) parts.push(`fill="${fill}"`);
+    if (resolved.style.stroke) parts.push(`stroke="${resolved.style.stroke}"`);
+    if (resolved.style.strokeWidth != null) parts.push(`stroke-width="${resolved.style.strokeWidth}"`);
+    parts.push(`opacity="${resolved.style.opacity}"`);
+    return `<${tag}${attrs} ${parts.join(" ")}>`;
+  });
+};
+var BodyDiagram = ({
+  view,
+  svgMarkupByView,
+  selectedMuscles,
+  onSelectedChange,
+  debugForceVisible = false,
+  interactionMode = "auto",
+  palette,
+  intensityByMuscle
+}) => {
+  const svgMarkup = svgMarkupByView[view] || "";
+  const xml = useMemo(
+    () => styleMarkup(svgMarkup, {
+      selectedMuscles,
+      intensityByMuscle,
+      palette,
+      debugForceVisible,
+      interactionMode
+    }),
+    [svgMarkup, selectedMuscles, intensityByMuscle, palette, debugForceVisible, interactionMode]
+  );
+  return /* @__PURE__ */ jsx(View, { style: styles.container, children: /* @__PURE__ */ jsx(SvgXml, { xml, width: "100%", height: "100%", preserveAspectRatio: "xMidYMid meet" }) });
+};
+var styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: "100%",
+    height: "100%",
+    overflow: "hidden"
+  }
+});
+
+export { BodyDiagram, colors, radius, shadows, spacing, typography };

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@jlunamena/design-system",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "PT Design System",
   "main": "dist/index.js",
+  "react-native": "dist/index.native.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
+      "react-native": "./dist/index.native.js",
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
@@ -23,7 +25,17 @@
     "generate:exports": "node scripts/generate-exports.mjs"
   },
   "peerDependencies": {
-    "react": ">=18.0.0"
+    "react": ">=18.0.0",
+    "react-native": "*",
+    "react-native-svg": "*"
+  },
+  "peerDependenciesMeta": {
+    "react-native": {
+      "optional": true
+    },
+    "react-native-svg": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^8.6.0",