@newtonedev/configurator 0.1.4 → 0.1.5

package/dist/index.js

@@ -2,6 +2,7 @@ import React, { useReducer, useMemo, useCallback, useRef, useState, useEffect }
 import { StyleSheet, View, Pressable, Text } from 'react-native';
 import { computeTokens, useTokens, useNewtoneTheme, Toggle, Card, Slider, Select, HueSlider, NewtoneProvider, ColorScaleSlider, TextInput, Button } from '@newtonedev/components';
 import { srgbToOklch, generatePreview, getColor, getColorByContrast, lightnessToNormalizedValue, getWcagContrastRatio, hexToSrgb, findMaxChromaInGamut, srgbToHex } from 'newtone';
+import { applyTypeScaleOffset, DEFAULT_ROLE_SCALES, ROLE_DEFAULT_WEIGHTS, DEFAULT_LINE_HEIGHTS, DEFAULT_FONT_SIZES, computeBreakpointRoleScales, migrateToFontSlot, DEFAULT_FONT_SLOTS } from '@newtonedev/fonts';
 
 // src/Configurator.tsx
 
@@ -80,23 +81,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",
@@ -284,71 +301,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)
+          }
         }
       };
     }
@@ -449,34 +435,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
@@ -540,15 +498,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 ? applyTypeScaleOffset(DEFAULT_ROLE_SCALES, state.typography.typeScaleOffset) : DEFAULT_ROLE_SCALES;
+      return {
+        fonts: {
+          main: migrateToFontSlot(state.typography?.fonts.main ?? state.typography?.fonts?.default, DEFAULT_FONT_SLOTS.main),
+          display: migrateToFontSlot(state.typography?.fonts.display, DEFAULT_FONT_SLOTS.display),
+          mono: migrateToFontSlot(state.typography?.fonts.mono, DEFAULT_FONT_SLOTS.mono),
+          currency: migrateToFontSlot(state.typography?.fonts.currency, DEFAULT_FONT_SLOTS.currency)
+        },
+        fontSizes: DEFAULT_FONT_SIZES,
+        lineHeights: DEFAULT_LINE_HEIGHTS,
+        roles,
+        breakpointRoles: computeBreakpointRoleScales(roles),
+        roleWeights: { ...ROLE_DEFAULT_WEIGHTS, ...state.typography?.roleWeights }
+      };
+    })(),
     icons: state.icons ?? DEFAULT_ICONS
   };
 }
@@ -1195,8 +1160,6 @@ function DesignPanel({ state, dispatch }) {
   const tokens = 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.createElement(Card, { elevation: 1, style: styles5.container }, /* @__PURE__ */ React.createElement(Text, { style: [styles5.title, { color: srgbToHex(tokens.textPrimary.srgb) }] }, "Design System"), /* @__PURE__ */ React.createElement(Text, { style: [styles5.subtitle, { color: srgbToHex(tokens.textSecondary.srgb) }] }, "Spacing"), /* @__PURE__ */ React.createElement(
@@ -1223,29 +1186,7 @@ function DesignPanel({ state, dispatch }) {
       label: "Intensity",
       showValue: true
     }
-  ), /* @__PURE__ */ React.createElement(Text, { style: [styles5.subtitle, { color: srgbToHex(tokens.textSecondary.srgb) }] }, "Typography"), /* @__PURE__ */ React.createElement(View, { style: styles5.row }, /* @__PURE__ */ React.createElement(View, { style: styles5.flex }, /* @__PURE__ */ React.createElement(
-    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.createElement(View, { style: styles5.flex }, /* @__PURE__ */ React.createElement(
-    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.createElement(Text, { style: [styles5.subtitle, { color: srgbToHex(tokens.textSecondary.srgb) }] }, "Icons"), /* @__PURE__ */ React.createElement(View, { style: styles5.row }, /* @__PURE__ */ React.createElement(View, { style: styles5.flex }, /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React.createElement(Text, { style: [styles5.subtitle, { color: srgbToHex(tokens.textSecondary.srgb) }] }, "Icons"), /* @__PURE__ */ React.createElement(View, { style: styles5.row }, /* @__PURE__ */ React.createElement(View, { style: styles5.flex }, /* @__PURE__ */ React.createElement(
     Select,
     {
       options: ICON_VARIANT_OPTIONS,