@jlunamena/design-system 1.0.0

package/README.md

@@ -0,0 +1,95 @@
+# Design System Contract
+
+Short and practical agreement before building anything.
+
+## 1) Purpose
+- This design system provides reusable presentational components for the Expo app.
+- It owns UI, visual states, tokens, and component consistency.
+- The app owns data, navigation, API calls, and business logic.
+
+## 2) What It Exports
+Tokens:
+- colors, spacing, typography, radius, shadows
+
+Theme:
+- ThemeProvider, useTheme
+
+Components:
+- Button, Text, Input, Card, Icon, Badge, Avatar, Divider
+
+Layout:
+- Box, Stack, Screen, Container
+
+## 3) What It Does NOT Export
+- Screens
+- Navigation
+- API logic
+- Auth logic
+- Workout logic
+- Database logic
+- Business rules
+
+## 4) Component Done Checklist
+- Has variants
+- Has sizes
+- Has states
+- Has Storybook examples
+- Has documented props
+- Works in Expo app
+- Reviewed visually by you
+- Reviewed technically by him
+
+## 5) First Components to Build
+- Button
+- Text
+- Input
+- Card
+- Screen
+- Box / Stack
+
+## 6) Repo Workflow
+Design system repo:
+- Build component
+- Document in Storybook
+- Release/update package
+
+Expo app repo:
+- Install/update design system
+- Connect real actions/data
+- Test in app
+
+## 7) Repo Structure Logic
+- [src/tokens](src/tokens) holds design tokens only (no component logic).
+- [src/theme](src/theme) exposes theme utilities and providers.
+- [src/components](src/components) is one folder per component (no app screens).
+- [src/layout](src/layout) holds layout primitives only.
+- [src/stories/foundations](src/stories/foundations) documents tokens and foundations.
+- [src/stories/components](src/stories/components) documents UI components.
+- [src/stories/layout](src/stories/layout) documents layout primitives.
+- [src/stories/examples](src/stories/examples) is for small composed examples.
+
+## 8) Running Storybook
+- On device: `npm run storybook:ios` or `npm run storybook:android`
+- On web: `npm run storybook:web`
+
+## 8.1) Storybook Notes (Current Setup)
+- Stories are loaded from `storybook/storybook.requires.ts` via explicit `require` entries.
+- The Intro story is a simple menu to jump to core stories on device.
+- If you add new stories, update the require list so they show up.
+
+## 9) Running the App (without Storybook)
+- `npm run ios`
+- `npm run android`
+- `npm run web`
+
+## 10) Public Exports (Auto-Generated)
+Exports are generated into `src/index.ts` so new components can be added without
+manually editing a root barrel.
+
+How it works:
+- Any folder in `src/components`, `src/layout`, or `src/theme` that has its own
+	`index.ts` (or `index.tsx`) will be exported automatically.
+- `src/tokens/index.ts` is always exported.
+
+Commands:
+- `npm run generate:exports` regenerates `src/index.ts`.

package/dist/index.d.mts

@@ -0,0 +1,127 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare const colors: {
+    readonly primary: "#FDC026";
+    readonly accent: "#6AABDE";
+    readonly bodyDiagram: {
+        readonly muscleFill: "#FFBF00";
+        readonly muscleStroke: "#FF0090";
+        readonly muscleStrokeWidth: 2;
+        readonly muscleOpacity: 1;
+    };
+    readonly background: {
+        readonly default: "#161C26";
+        readonly muted: "#1C2434";
+        readonly highlight: "#383040";
+        readonly depth: "#08080A";
+    };
+    readonly text: {
+        readonly primary: "#E8E8E8";
+        readonly secondary: "#9B9B9B";
+    };
+};
+type Colors = typeof colors;
+
+declare const spacing: {
+    readonly big: 32;
+    readonly default: 24;
+    readonly small: 12;
+    readonly textHorizontal: 4;
+    readonly textVertical: 0;
+};
+type Spacing = typeof spacing;
+
+declare const radius: {
+    readonly button: 4;
+    readonly card: 8;
+    readonly input: 4;
+    readonly full: 9999;
+};
+type Radius = typeof radius;
+
+declare const typography: {
+    readonly size: {
+        readonly xs: 11;
+        readonly sm: 13;
+        readonly base: 15;
+        readonly md: 17;
+        readonly lg: 20;
+        readonly xl: 24;
+        readonly '2xl': 30;
+        readonly '3xl': 36;
+    };
+    readonly weight: {
+        readonly regular: "400";
+        readonly medium: "500";
+        readonly semibold: "600";
+        readonly bold: "700";
+    };
+    readonly lineHeight: {
+        readonly tight: 1.2;
+        readonly normal: 1.5;
+        readonly relaxed: 1.75;
+    };
+};
+type Typography = typeof typography;
+
+declare const shadows: {
+    readonly sm: {
+        readonly shadowColor: "#08080A";
+        readonly shadowOffset: {
+            readonly width: 0;
+            readonly height: 1;
+        };
+        readonly shadowOpacity: 0.4;
+        readonly shadowRadius: 2;
+        readonly elevation: 2;
+    };
+    readonly md: {
+        readonly shadowColor: "#08080A";
+        readonly shadowOffset: {
+            readonly width: 0;
+            readonly height: 4;
+        };
+        readonly shadowOpacity: 0.5;
+        readonly shadowRadius: 8;
+        readonly elevation: 4;
+    };
+    readonly lg: {
+        readonly shadowColor: "#08080A";
+        readonly shadowOffset: {
+            readonly width: 0;
+            readonly height: 8;
+        };
+        readonly shadowOpacity: 0.6;
+        readonly shadowRadius: 16;
+        readonly elevation: 8;
+    };
+};
+type Shadows = typeof shadows;
+
+type BodyDiagramView = 'front' | 'back';
+type BodyDiagramPalette = {
+    muscleFill?: string;
+    muscleStroke?: string;
+    muscleStrokeWidth?: number;
+    muscleOpacity?: number;
+};
+type BodyDiagramOverlayStyle = {
+    blur?: number;
+    blendMode?: string;
+};
+type BodyDiagramIntensity = 'off' | 'low' | 'medium' | 'high';
+type BodyDiagramProps = {
+    view: BodyDiagramView;
+    svgMarkupByView: Record<BodyDiagramView, string>;
+    baseImageByView?: Partial<Record<BodyDiagramView, string>>;
+    selectedMuscles: string[];
+    onSelectedChange: (selected: string[]) => void;
+    debugForceVisible?: boolean;
+    interactionMode?: 'auto' | 'editable' | 'readonly';
+    palette?: BodyDiagramPalette;
+    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

@@ -0,0 +1,127 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare const colors: {
+    readonly primary: "#FDC026";
+    readonly accent: "#6AABDE";
+    readonly bodyDiagram: {
+        readonly muscleFill: "#FFBF00";
+        readonly muscleStroke: "#FF0090";
+        readonly muscleStrokeWidth: 2;
+        readonly muscleOpacity: 1;
+    };
+    readonly background: {
+        readonly default: "#161C26";
+        readonly muted: "#1C2434";
+        readonly highlight: "#383040";
+        readonly depth: "#08080A";
+    };
+    readonly text: {
+        readonly primary: "#E8E8E8";
+        readonly secondary: "#9B9B9B";
+    };
+};
+type Colors = typeof colors;
+
+declare const spacing: {
+    readonly big: 32;
+    readonly default: 24;
+    readonly small: 12;
+    readonly textHorizontal: 4;
+    readonly textVertical: 0;
+};
+type Spacing = typeof spacing;
+
+declare const radius: {
+    readonly button: 4;
+    readonly card: 8;
+    readonly input: 4;
+    readonly full: 9999;
+};
+type Radius = typeof radius;
+
+declare const typography: {
+    readonly size: {
+        readonly xs: 11;
+        readonly sm: 13;
+        readonly base: 15;
+        readonly md: 17;
+        readonly lg: 20;
+        readonly xl: 24;
+        readonly '2xl': 30;
+        readonly '3xl': 36;
+    };
+    readonly weight: {
+        readonly regular: "400";
+        readonly medium: "500";
+        readonly semibold: "600";
+        readonly bold: "700";
+    };
+    readonly lineHeight: {
+        readonly tight: 1.2;
+        readonly normal: 1.5;
+        readonly relaxed: 1.75;
+    };
+};
+type Typography = typeof typography;
+
+declare const shadows: {
+    readonly sm: {
+        readonly shadowColor: "#08080A";
+        readonly shadowOffset: {
+            readonly width: 0;
+            readonly height: 1;
+        };
+        readonly shadowOpacity: 0.4;
+        readonly shadowRadius: 2;
+        readonly elevation: 2;
+    };
+    readonly md: {
+        readonly shadowColor: "#08080A";
+        readonly shadowOffset: {
+            readonly width: 0;
+            readonly height: 4;
+        };
+        readonly shadowOpacity: 0.5;
+        readonly shadowRadius: 8;
+        readonly elevation: 4;
+    };
+    readonly lg: {
+        readonly shadowColor: "#08080A";
+        readonly shadowOffset: {
+            readonly width: 0;
+            readonly height: 8;
+        };
+        readonly shadowOpacity: 0.6;
+        readonly shadowRadius: 16;
+        readonly elevation: 8;
+    };
+};
+type Shadows = typeof shadows;
+
+type BodyDiagramView = 'front' | 'back';
+type BodyDiagramPalette = {
+    muscleFill?: string;
+    muscleStroke?: string;
+    muscleStrokeWidth?: number;
+    muscleOpacity?: number;
+};
+type BodyDiagramOverlayStyle = {
+    blur?: number;
+    blendMode?: string;
+};
+type BodyDiagramIntensity = 'off' | 'low' | 'medium' | 'high';
+type BodyDiagramProps = {
+    view: BodyDiagramView;
+    svgMarkupByView: Record<BodyDiagramView, string>;
+    baseImageByView?: Partial<Record<BodyDiagramView, string>>;
+    selectedMuscles: string[];
+    onSelectedChange: (selected: string[]) => void;
+    debugForceVisible?: boolean;
+    interactionMode?: 'auto' | 'editable' | 'readonly';
+    palette?: BodyDiagramPalette;
+    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

@@ -0,0 +1,287 @@
+'use strict';
+
+var react = require('react');
+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 BodyDiagram = ({
+  view,
+  svgMarkupByView,
+  baseImageByView,
+  selectedMuscles,
+  onSelectedChange,
+  debugForceVisible = false,
+  interactionMode = "auto",
+  palette,
+  overlayStyle,
+  intensityByMuscle
+}) => {
+  const containerRef = react.useRef(null);
+  const svgMarkup = svgMarkupByView[view] || "";
+  const baseImage = baseImageByView?.[view] || "";
+  const handleClick = react.useCallback(
+    (event) => {
+      if (interactionMode === "readonly") return;
+      const target = event.target;
+      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));
+    },
+    [interactionMode, onSelectedChange, selectedMuscles]
+  );
+  react.useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const svg = container.querySelector("svg");
+    if (!svg) return;
+    svg.style.width = "100%";
+    svg.style.height = "100%";
+    svg.setAttribute("preserveAspectRatio", "xMidYMid meet");
+    const elements = svg.querySelectorAll("[data-muscle-key]");
+    const theme = resolveBodyDiagramTheme({ palette });
+    elements.forEach((el) => {
+      const element = el;
+      const key = element.getAttribute("data-muscle-key");
+      if (!key) return;
+      const resolved = resolveBodyDiagramMuscleState({
+        muscleKey: key,
+        selectedMuscles,
+        intensityByMuscle,
+        palette,
+        debugForceVisible,
+        theme,
+        interactionMode
+      });
+      if (resolved.isDebugForced) {
+        element.removeAttribute("filter");
+        element.removeAttribute("mask");
+        element.removeAttribute("clip-path");
+        element.removeAttribute("style");
+      }
+      const isOff = resolved.level === "off";
+      const forceHitArea = isOff && !resolved.isDebugForced;
+      if (forceHitArea) {
+        element.setAttribute("fill", "rgba(0,0,0,0)");
+      } else if (resolved.style.fill) {
+        element.setAttribute("fill", resolved.style.fill);
+      }
+      if (resolved.style.stroke) {
+        element.setAttribute("stroke", resolved.style.stroke);
+      }
+      if (resolved.style.strokeWidth != null) {
+        element.setAttribute("stroke-width", String(resolved.style.strokeWidth));
+      }
+      element.setAttribute("opacity", String(resolved.style.opacity));
+      element.style.pointerEvents = "auto";
+    });
+  }, [selectedMuscles, svgMarkup, debugForceVisible, intensityByMuscle, palette, interactionMode]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle, children: [
+    baseImage ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: baseImage, alt: "", style: baseImageStyle }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: containerRef,
+        style: {
+          position: "absolute",
+          inset: 0,
+          width: "100%",
+          height: "100%",
+          filter: overlayStyle?.blur ? `blur(${overlayStyle.blur}px)` : void 0,
+          mixBlendMode: overlayStyle?.blendMode
+        },
+        onClick: handleClick,
+        dangerouslySetInnerHTML: { __html: svgMarkup }
+      }
+    )
+  ] });
+};
+var containerStyle = {
+  display: "flex",
+  width: "100%",
+  height: "100%",
+  position: "relative",
+  overflow: "hidden"
+};
+var baseImageStyle = {
+  position: "absolute",
+  inset: 0,
+  width: "100%",
+  height: "100%",
+  objectFit: "contain"
+};
+
+exports.BodyDiagram = BodyDiagram;
+exports.colors = colors;
+exports.radius = radius;
+exports.shadows = shadows;
+exports.spacing = spacing;
+exports.typography = typography;

package/dist/index.mjs

@@ -0,0 +1,280 @@
+import { useRef, useCallback, useEffect } from 'react';
+import { jsxs, 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 BodyDiagram = ({
+  view,
+  svgMarkupByView,
+  baseImageByView,
+  selectedMuscles,
+  onSelectedChange,
+  debugForceVisible = false,
+  interactionMode = "auto",
+  palette,
+  overlayStyle,
+  intensityByMuscle
+}) => {
+  const containerRef = useRef(null);
+  const svgMarkup = svgMarkupByView[view] || "";
+  const baseImage = baseImageByView?.[view] || "";
+  const handleClick = useCallback(
+    (event) => {
+      if (interactionMode === "readonly") return;
+      const target = event.target;
+      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));
+    },
+    [interactionMode, onSelectedChange, selectedMuscles]
+  );
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const svg = container.querySelector("svg");
+    if (!svg) return;
+    svg.style.width = "100%";
+    svg.style.height = "100%";
+    svg.setAttribute("preserveAspectRatio", "xMidYMid meet");
+    const elements = svg.querySelectorAll("[data-muscle-key]");
+    const theme = resolveBodyDiagramTheme({ palette });
+    elements.forEach((el) => {
+      const element = el;
+      const key = element.getAttribute("data-muscle-key");
+      if (!key) return;
+      const resolved = resolveBodyDiagramMuscleState({
+        muscleKey: key,
+        selectedMuscles,
+        intensityByMuscle,
+        palette,
+        debugForceVisible,
+        theme,
+        interactionMode
+      });
+      if (resolved.isDebugForced) {
+        element.removeAttribute("filter");
+        element.removeAttribute("mask");
+        element.removeAttribute("clip-path");
+        element.removeAttribute("style");
+      }
+      const isOff = resolved.level === "off";
+      const forceHitArea = isOff && !resolved.isDebugForced;
+      if (forceHitArea) {
+        element.setAttribute("fill", "rgba(0,0,0,0)");
+      } else if (resolved.style.fill) {
+        element.setAttribute("fill", resolved.style.fill);
+      }
+      if (resolved.style.stroke) {
+        element.setAttribute("stroke", resolved.style.stroke);
+      }
+      if (resolved.style.strokeWidth != null) {
+        element.setAttribute("stroke-width", String(resolved.style.strokeWidth));
+      }
+      element.setAttribute("opacity", String(resolved.style.opacity));
+      element.style.pointerEvents = "auto";
+    });
+  }, [selectedMuscles, svgMarkup, debugForceVisible, intensityByMuscle, palette, interactionMode]);
+  return /* @__PURE__ */ jsxs("div", { style: containerStyle, children: [
+    baseImage ? /* @__PURE__ */ jsx("img", { src: baseImage, alt: "", style: baseImageStyle }) : null,
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: containerRef,
+        style: {
+          position: "absolute",
+          inset: 0,
+          width: "100%",
+          height: "100%",
+          filter: overlayStyle?.blur ? `blur(${overlayStyle.blur}px)` : void 0,
+          mixBlendMode: overlayStyle?.blendMode
+        },
+        onClick: handleClick,
+        dangerouslySetInnerHTML: { __html: svgMarkup }
+      }
+    )
+  ] });
+};
+var containerStyle = {
+  display: "flex",
+  width: "100%",
+  height: "100%",
+  position: "relative",
+  overflow: "hidden"
+};
+var baseImageStyle = {
+  position: "absolute",
+  inset: 0,
+  width: "100%",
+  height: "100%",
+  objectFit: "contain"
+};
+
+export { BodyDiagram, colors, radius, shadows, spacing, typography };

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@jlunamena/design-system",
+  "version": "1.0.0",
+  "description": "PT Design System",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "generate:exports": "node scripts/generate-exports.mjs"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "^8.6.0",
+    "@storybook/react": "^8.6.0",
+    "@storybook/react-vite": "^8.6.0",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "esbuild": "^0.28.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "storybook": "^8.6.0",
+    "tsup": "^8.0.0",
+    "typescript": "~5.9.2",
+    "vite": "^5.0.0"
+  }
+}