@newtonedev/configurator 0.1.4 → 0.1.5

package/dist/bridge/toThemeConfig.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toThemeConfig.d.ts","sourceRoot":"","sources":["../../src/bridge/toThemeConfig.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAiB,MAAM,UAAU,CAAC;AACjE,OAAO,KAAK,EAAE,kBAAkB,EAAc,MAAM,wBAAwB,CAAC;AAoE7E;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,iBAAiB,GAAG,kBAAkB,CAqF1E"}
+{"version":3,"file":"toThemeConfig.d.ts","sourceRoot":"","sources":["../../src/bridge/toThemeConfig.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAiB,MAAM,UAAU,CAAC;AACjE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAgCjE;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,iBAAiB,GAAG,kBAAkB,CA8F1E"}

package/dist/index.cjs

@@ -4,6 +4,7 @@ var React = require('react');
 var reactNative = require('react-native');
 var components = require('@newtonedev/components');
 var newtone = require('newtone');
+var fonts = require('@newtonedev/fonts');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -86,23 +87,39 @@ var DEFAULT_CONFIGURATOR_STATE = {
   },
   typography: {
     fonts: {
-      mono: {
-        type: "system",
-        family: "ui-monospace",
-        fallback: "SFMono-Regular, Menlo, Monaco, Consolas, monospace"
+      main: {
+        config: {
+          type: "system",
+          family: "system-ui",
+          fallback: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
+        },
+        weights: { regular: 400, medium: 500, bold: 700 }
       },
       display: {
-        type: "system",
-        family: "system-ui",
-        fallback: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
+        config: {
+          type: "system",
+          family: "system-ui",
+          fallback: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
+        },
+        weights: { regular: 400, medium: 500, bold: 700 }
+      },
+      mono: {
+        config: {
+          type: "system",
+          family: "ui-monospace",
+          fallback: "SFMono-Regular, Menlo, Monaco, Consolas, monospace"
+        },
+        weights: { regular: 400, medium: 500, bold: 700 }
       },
-      default: {
-        type: "system",
-        family: "system-ui",
-        fallback: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
+      currency: {
+        config: {
+          type: "system",
+          family: "system-ui",
+          fallback: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
+        },
+        weights: { regular: 400, medium: 500, bold: 700 }
       }
-    },
-    scale: { baseSize: 16, ratio: 1.25 }
+    }
   },
   icons: {
     variant: "rounded",
@@ -290,71 +307,40 @@ function configuratorReducer(state, action) {
         }
       };
     // Typography actions
-    case "SET_TYPOGRAPHY_BASE_SIZE": {
-      const defaultTypography = DEFAULT_CONFIGURATOR_STATE.typography;
-      return {
-        ...state,
-        typography: {
-          fonts: state.typography?.fonts ?? defaultTypography.fonts,
-          scale: {
-            baseSize: clamp(action.baseSize, 12, 24),
-            ratio: state.typography?.scale.ratio ?? defaultTypography.scale.ratio
-          }
-        }
-      };
-    }
-    case "SET_TYPOGRAPHY_RATIO": {
-      const defaultTypography = DEFAULT_CONFIGURATOR_STATE.typography;
-      return {
-        ...state,
-        typography: {
-          fonts: state.typography?.fonts ?? defaultTypography.fonts,
-          scale: {
-            baseSize: state.typography?.scale.baseSize ?? defaultTypography.scale.baseSize,
-            ratio: clamp(action.ratio, 1.1, 1.5)
-          }
-        }
-      };
-    }
-    case "SET_FONT_MONO": {
+    case "SET_FONT": {
       const defaultTypography = DEFAULT_CONFIGURATOR_STATE.typography;
+      const currentFonts = state.typography?.fonts ?? defaultTypography.fonts;
       return {
         ...state,
         typography: {
-          fonts: {
-            mono: action.font,
-            display: state.typography?.fonts.display ?? defaultTypography.fonts.display,
-            default: state.typography?.fonts.default ?? defaultTypography.fonts.default
-          },
-          scale: state.typography?.scale ?? defaultTypography.scale
+          fonts: { ...currentFonts, [action.scope]: action.font }
         }
       };
     }
-    case "SET_FONT_DISPLAY": {
+    case "SET_TYPE_SCALE_OFFSET": {
       const defaultTypography = DEFAULT_CONFIGURATOR_STATE.typography;
+      const currentFonts = state.typography?.fonts ?? defaultTypography.fonts;
       return {
         ...state,
         typography: {
-          fonts: {
-            mono: state.typography?.fonts.mono ?? defaultTypography.fonts.mono,
-            display: action.font,
-            default: state.typography?.fonts.default ?? defaultTypography.fonts.default
-          },
-          scale: state.typography?.scale ?? defaultTypography.scale
+          ...state.typography,
+          fonts: currentFonts,
+          typeScaleOffset: clamp(action.offset, 0, 1)
         }
       };
     }
-    case "SET_FONT_DEFAULT": {
+    case "SET_ROLE_WEIGHT": {
       const defaultTypography = DEFAULT_CONFIGURATOR_STATE.typography;
+      const currentFonts = state.typography?.fonts ?? defaultTypography.fonts;
       return {
         ...state,
         typography: {
-          fonts: {
-            mono: state.typography?.fonts.mono ?? defaultTypography.fonts.mono,
-            display: state.typography?.fonts.display ?? defaultTypography.fonts.display,
-            default: action.font
-          },
-          scale: state.typography?.scale ?? defaultTypography.scale
+          ...state.typography,
+          fonts: currentFonts,
+          roleWeights: {
+            ...state.typography?.roleWeights,
+            [action.role]: clamp(action.weight, 100, 900)
+          }
         }
       };
     }
@@ -455,34 +441,6 @@ var SPACING_PRESET_TO_BASE = {
 function roundnessToMultiplier(intensity) {
   return intensity * 2;
 }
-function computeTypographyScale(baseSize, ratio) {
-  return {
-    xs: Math.round(baseSize / ratio ** 2),
-    sm: Math.round(baseSize / ratio),
-    base: baseSize,
-    md: Math.round(baseSize * ratio),
-    lg: Math.round(baseSize * ratio ** 2),
-    xl: Math.round(baseSize * ratio ** 3),
-    xxl: Math.round(baseSize * ratio ** 4)
-  };
-}
-var DEFAULT_FONTS = {
-  mono: {
-    type: "system",
-    family: "ui-monospace",
-    fallback: "SFMono-Regular, Menlo, Monaco, Consolas, monospace"
-  },
-  display: {
-    type: "system",
-    family: "system-ui",
-    fallback: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
-  },
-  default: {
-    type: "system",
-    family: "system-ui",
-    fallback: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
-  }
-};
 var DEFAULT_ICONS = {
   variant: "rounded",
   // Material Design 3 aesthetic
@@ -546,15 +504,22 @@ function toThemeConfig(state) {
       xl: Math.round(12 * radiusMultiplier),
       pill: 999
     },
-    typography: {
-      fonts: state.typography?.fonts ?? DEFAULT_FONTS,
-      scale: computeTypographyScale(
-        state.typography?.scale.baseSize ?? 16,
-        state.typography?.scale.ratio ?? 1.25
-      ),
-      lineHeight: { tight: 1.25, normal: 1.5, relaxed: 1.75 },
-      fontWeight: { regular: 400, medium: 500, semibold: 600, bold: 700 }
-    },
+    typography: (() => {
+      const roles = state.typography?.typeScaleOffset != null ? fonts.applyTypeScaleOffset(fonts.DEFAULT_ROLE_SCALES, state.typography.typeScaleOffset) : fonts.DEFAULT_ROLE_SCALES;
+      return {
+        fonts: {
+          main: fonts.migrateToFontSlot(state.typography?.fonts.main ?? state.typography?.fonts?.default, fonts.DEFAULT_FONT_SLOTS.main),
+          display: fonts.migrateToFontSlot(state.typography?.fonts.display, fonts.DEFAULT_FONT_SLOTS.display),
+          mono: fonts.migrateToFontSlot(state.typography?.fonts.mono, fonts.DEFAULT_FONT_SLOTS.mono),
+          currency: fonts.migrateToFontSlot(state.typography?.fonts.currency, fonts.DEFAULT_FONT_SLOTS.currency)
+        },
+        fontSizes: fonts.DEFAULT_FONT_SIZES,
+        lineHeights: fonts.DEFAULT_LINE_HEIGHTS,
+        roles,
+        breakpointRoles: fonts.computeBreakpointRoleScales(roles),
+        roleWeights: { ...fonts.ROLE_DEFAULT_WEIGHTS, ...state.typography?.roleWeights }
+      };
+    })(),
     icons: state.icons ?? DEFAULT_ICONS
   };
 }
@@ -1201,8 +1166,6 @@ function DesignPanel({ state, dispatch }) {
   const tokens = components.useTokens(1);
   const spacingPreset = state.spacing?.preset ?? "md";
   const intensity = state.roundness?.intensity ?? 0.5;
-  const baseSize = state.typography?.scale.baseSize ?? 16;
-  const ratio = state.typography?.scale.ratio ?? 1.25;
   const variant = state.icons?.variant ?? "rounded";
   const weight = state.icons?.weight ?? 400;
   return /* @__PURE__ */ React__default.default.createElement(components.Card, { elevation: 1, style: styles5.container }, /* @__PURE__ */ React__default.default.createElement(reactNative.Text, { style: [styles5.title, { color: newtone.srgbToHex(tokens.textPrimary.srgb) }] }, "Design System"), /* @__PURE__ */ React__default.default.createElement(reactNative.Text, { style: [styles5.subtitle, { color: newtone.srgbToHex(tokens.textSecondary.srgb) }] }, "Spacing"), /* @__PURE__ */ React__default.default.createElement(
@@ -1229,29 +1192,7 @@ function DesignPanel({ state, dispatch }) {
       label: "Intensity",
       showValue: true
     }
-  ), /* @__PURE__ */ React__default.default.createElement(reactNative.Text, { style: [styles5.subtitle, { color: newtone.srgbToHex(tokens.textSecondary.srgb) }] }, "Typography"), /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles5.row }, /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles5.flex }, /* @__PURE__ */ React__default.default.createElement(
-    components.Slider,
-    {
-      value: baseSize,
-      onValueChange: (v) => dispatch({ type: "SET_TYPOGRAPHY_BASE_SIZE", baseSize: v }),
-      min: 12,
-      max: 24,
-      step: 1,
-      label: "Base Size",
-      showValue: true
-    }
-  )), /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles5.flex }, /* @__PURE__ */ React__default.default.createElement(
-    components.Slider,
-    {
-      value: Math.round(ratio * 100),
-      onValueChange: (v) => dispatch({ type: "SET_TYPOGRAPHY_RATIO", ratio: v / 100 }),
-      min: 110,
-      max: 150,
-      step: 5,
-      label: "Scale Ratio",
-      showValue: true
-    }
-  ))), /* @__PURE__ */ React__default.default.createElement(reactNative.Text, { style: [styles5.subtitle, { color: newtone.srgbToHex(tokens.textSecondary.srgb) }] }, "Icons"), /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles5.row }, /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles5.flex }, /* @__PURE__ */ React__default.default.createElement(
+  ), /* @__PURE__ */ React__default.default.createElement(reactNative.Text, { style: [styles5.subtitle, { color: newtone.srgbToHex(tokens.textSecondary.srgb) }] }, "Icons"), /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles5.row }, /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles5.flex }, /* @__PURE__ */ React__default.default.createElement(
     components.Select,
     {
       options: ICON_VARIANT_OPTIONS,