@newtonedev/configurator 0.1.3 → 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
 
@@ -68,8 +69,7 @@ var DEFAULT_CONFIGURATOR_STATE = {
     dark: { strength: "none", hue: 220 }
   },
   preview: {
-    mode: "light",
-    theme: "neutral"
+    mode: "light"
   },
   spacing: {
     preset: "md"
@@ -81,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",
@@ -285,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": {
+    case "SET_FONT": {
       const defaultTypography = DEFAULT_CONFIGURATOR_STATE.typography;
+      const currentFonts = state.typography?.fonts ?? defaultTypography.fonts;
       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)
-          }
+          fonts: { ...currentFonts, [action.scope]: action.font }
         }
       };
     }
-    case "SET_FONT_MONO": {
+    case "SET_TYPE_SCALE_OFFSET": {
       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
+          ...state.typography,
+          fonts: currentFonts,
+          typeScaleOffset: clamp(action.offset, 0, 1)
         }
       };
     }
-    case "SET_FONT_DISPLAY": {
+    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: action.font,
-            default: state.typography?.fonts.default ?? defaultTypography.fonts.default
-          },
-          scale: state.typography?.scale ?? defaultTypography.scale
-        }
-      };
-    }
-    case "SET_FONT_DEFAULT": {
-      const defaultTypography = DEFAULT_CONFIGURATOR_STATE.typography;
-      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)
+          }
         }
       };
     }
@@ -393,11 +378,6 @@ function configuratorReducer(state, action) {
         ...state,
         preview: { ...state.preview, mode: action.mode }
       };
-    case "SET_PREVIEW_THEME":
-      return {
-        ...state,
-        preview: { ...state.preview, theme: action.theme }
-      };
     // Control actions
     case "RESET":
       return DEFAULT_CONFIGURATOR_STATE;
@@ -455,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
@@ -521,15 +473,6 @@ function toThemeConfig(state) {
   const radiusMultiplier = roundnessToMultiplier(state.roundness?.intensity ?? 0.5);
   return {
     colorSystem: { dynamicRange, palettes },
-    themes: {
-      neutral: { paletteIndex: 0, lightModeNv: 0.95, darkModeNv: 0.1 },
-      primary: { paletteIndex: 1, lightModeNv: 0.95, darkModeNv: 0.1 },
-      secondary: { paletteIndex: 1, lightModeNv: 0.85, darkModeNv: 0.15 },
-      strong: { paletteIndex: 0, lightModeNv: 0.1, darkModeNv: 0.95 }
-    },
-    elevation: {
-      offsets: [-0.02, 0, 0.04]
-    },
     spacing: {
       "00": Math.round(spacingBase * 0),
       // Always 0
@@ -555,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
   };
 }
@@ -823,7 +773,7 @@ function PalettePanel({ palette, index, dispatch, previewColors, state }) {
       onSubmitEditing: handleHexSubmit,
       placeholder: "#000000"
     }
-  )), effectiveKeyColor !== void 0 && /* @__PURE__ */ React.createElement(Pressable, { onPress: handleClearKeyColor, style: styles.autoButton }, /* @__PURE__ */ React.createElement(Text, { style: [styles.autoText, { color: srgbToHex(tokens.interactive.srgb) }] }, "Auto"))), hexError !== "" && /* @__PURE__ */ React.createElement(Text, { style: [styles.errorText, { color: srgbToHex(tokens.error.srgb) }] }, hexError)), isNeutral && previewColors && /* @__PURE__ */ React.createElement(View, { style: styles.inlineSwatches }, previewColors.map((color, i) => /* @__PURE__ */ React.createElement(
+  )), effectiveKeyColor !== void 0 && /* @__PURE__ */ React.createElement(Pressable, { onPress: handleClearKeyColor, style: styles.autoButton }, /* @__PURE__ */ React.createElement(Text, { style: [styles.autoText, { color: srgbToHex(tokens.accent.fill.srgb) }] }, "Auto"))), hexError !== "" && /* @__PURE__ */ React.createElement(Text, { style: [styles.errorText, { color: srgbToHex(tokens.error.fill.srgb) }] }, hexError)), isNeutral && previewColors && /* @__PURE__ */ React.createElement(View, { style: styles.inlineSwatches }, previewColors.map((color, i) => /* @__PURE__ */ React.createElement(
     View,
     {
       key: i,
@@ -1021,38 +971,20 @@ var styles2 = StyleSheet.create({
     flex: 1
   }
 });
-var THEME_OPTIONS = [
-  { label: "Neutral", value: "neutral" },
-  { label: "Primary", value: "primary" },
-  { label: "Secondary", value: "secondary" },
-  { label: "Strong", value: "strong" }
-];
-function PreviewCard({
-  state,
-  dispatch
-}) {
+function PreviewCard() {
   const tokens = useTokens(1);
-  return /* @__PURE__ */ React.createElement(Card, { elevation: 1, style: styles3.container }, /* @__PURE__ */ React.createElement(Text, { style: [styles3.title, { color: srgbToHex(tokens.textPrimary.srgb) }] }, "Component Preview"), /* @__PURE__ */ React.createElement(View, { style: styles3.controls }, /* @__PURE__ */ React.createElement(
-    Select,
-    {
-      options: THEME_OPTIONS,
-      value: state.preview.theme,
-      onValueChange: (t) => dispatch({ type: "SET_PREVIEW_THEME", theme: t }),
-      label: "Theme"
-    }
-  )), /* @__PURE__ */ React.createElement(View, { style: previewStyles.wrapper }, /* @__PURE__ */ React.createElement(View, { style: previewStyles.row }, /* @__PURE__ */ React.createElement(Button, { variant: "primary", semantic: "accent", size: "sm" }, "Primary"), /* @__PURE__ */ React.createElement(Button, { variant: "primary", semantic: "neutral", size: "sm" }, "Secondary"), /* @__PURE__ */ React.createElement(Button, { variant: "tertiary", semantic: "neutral", size: "sm" }, "Ghost"), /* @__PURE__ */ React.createElement(Button, { variant: "secondary", semantic: "neutral", size: "sm" }, "Outline")), /* @__PURE__ */ React.createElement(TextInput, { label: "Sample Input", value: "Hello, Newtone", onChangeText: () => {
-  } }), /* @__PURE__ */ React.createElement(View, { style: previewStyles.row }, /* @__PURE__ */ React.createElement(View, { style: [previewStyles.statusDot, { backgroundColor: srgbToHex(tokens.success.srgb) }] }), /* @__PURE__ */ React.createElement(Text, { style: [previewStyles.statusText, { color: srgbToHex(tokens.textPrimary.srgb) }] }, "Success"), /* @__PURE__ */ React.createElement(View, { style: [previewStyles.statusDot, { backgroundColor: srgbToHex(tokens.warning.srgb) }] }), /* @__PURE__ */ React.createElement(Text, { style: [previewStyles.statusText, { color: srgbToHex(tokens.textPrimary.srgb) }] }, "Warning"), /* @__PURE__ */ React.createElement(View, { style: [previewStyles.statusDot, { backgroundColor: srgbToHex(tokens.error.srgb) }] }), /* @__PURE__ */ React.createElement(Text, { style: [previewStyles.statusText, { color: srgbToHex(tokens.textPrimary.srgb) }] }, "Error"))));
+  return /* @__PURE__ */ React.createElement(Card, { elevation: 1, style: styles3.container }, /* @__PURE__ */ React.createElement(Text, { style: [styles3.title, { color: srgbToHex(tokens.textPrimary.srgb) }] }, "Component Preview"), /* @__PURE__ */ React.createElement(View, { style: previewStyles.wrapper }, /* @__PURE__ */ React.createElement(View, { style: previewStyles.row }, /* @__PURE__ */ React.createElement(Button, { variant: "primary", semantic: "accent", size: "sm" }, "Primary"), /* @__PURE__ */ React.createElement(Button, { variant: "primary", semantic: "neutral", size: "sm" }, "Secondary"), /* @__PURE__ */ React.createElement(Button, { variant: "tertiary", semantic: "neutral", size: "sm" }, "Ghost"), /* @__PURE__ */ React.createElement(Button, { variant: "secondary", semantic: "neutral", size: "sm" }, "Outline")), /* @__PURE__ */ React.createElement(TextInput, { label: "Sample Input", value: "Hello, Newtone", onChangeText: () => {
+  } }), /* @__PURE__ */ React.createElement(View, { style: previewStyles.row }, /* @__PURE__ */ React.createElement(View, { style: [previewStyles.statusDot, { backgroundColor: srgbToHex(tokens.success.fill.srgb) }] }), /* @__PURE__ */ React.createElement(Text, { style: [previewStyles.statusText, { color: srgbToHex(tokens.textPrimary.srgb) }] }, "Success"), /* @__PURE__ */ React.createElement(View, { style: [previewStyles.statusDot, { backgroundColor: srgbToHex(tokens.warning.fill.srgb) }] }), /* @__PURE__ */ React.createElement(Text, { style: [previewStyles.statusText, { color: srgbToHex(tokens.textPrimary.srgb) }] }, "Warning"), /* @__PURE__ */ React.createElement(View, { style: [previewStyles.statusDot, { backgroundColor: srgbToHex(tokens.error.fill.srgb) }] }), /* @__PURE__ */ React.createElement(Text, { style: [previewStyles.statusText, { color: srgbToHex(tokens.textPrimary.srgb) }] }, "Error"))));
 }
-function PreviewPanel({ state, dispatch, themeConfig }) {
+function PreviewPanel({ state, themeConfig }) {
   return /* @__PURE__ */ React.createElement(
     NewtoneProvider,
     {
-      key: `${state.preview.mode}-${state.preview.theme}`,
+      key: state.preview.mode,
       config: themeConfig,
-      initialMode: state.preview.mode,
-      initialTheme: state.preview.theme
+      initialMode: state.preview.mode
     },
-    /* @__PURE__ */ React.createElement(PreviewCard, { state, dispatch })
+    /* @__PURE__ */ React.createElement(PreviewCard, null)
   );
 }
 var styles3 = StyleSheet.create({
@@ -1062,11 +994,6 @@ var styles3 = StyleSheet.create({
   title: {
     fontSize: 16,
     fontWeight: "700"
-  },
-  controls: {
-    flexDirection: "row",
-    alignItems: "flex-end",
-    gap: 16
   }
 });
 var previewStyles = StyleSheet.create({
@@ -1097,9 +1024,7 @@ function toCSS(state) {
     const tokens = computeTokens(
       config.colorSystem,
       mode,
-      config.themes.neutral,
       1,
-      config.elevation.offsets,
       config.spacing,
       config.radius,
       config.typography,
@@ -1118,19 +1043,19 @@ function toCSS(state) {
 `;
     css += `  --newtone-text-secondary: ${srgbToHex(tokens.textSecondary.srgb)};
 `;
-    css += `  --newtone-interactive: ${srgbToHex(tokens.interactive.srgb)};
+    css += `  --newtone-accent: ${srgbToHex(tokens.accent.fill.srgb)};
 `;
-    css += `  --newtone-interactive-hover: ${srgbToHex(tokens.interactiveHover.srgb)};
+    css += `  --newtone-accent-hover: ${srgbToHex(tokens.accent.fillHover.srgb)};
 `;
-    css += `  --newtone-interactive-active: ${srgbToHex(tokens.interactiveActive.srgb)};
+    css += `  --newtone-accent-active: ${srgbToHex(tokens.accent.fillActive.srgb)};
 `;
     css += `  --newtone-border: ${srgbToHex(tokens.border.srgb)};
 `;
-    css += `  --newtone-success: ${srgbToHex(tokens.success.srgb)};
+    css += `  --newtone-success: ${srgbToHex(tokens.success.fill.srgb)};
 `;
-    css += `  --newtone-warning: ${srgbToHex(tokens.warning.srgb)};
+    css += `  --newtone-warning: ${srgbToHex(tokens.warning.fill.srgb)};
 `;
-    css += `  --newtone-error: ${srgbToHex(tokens.error.srgb)};
+    css += `  --newtone-error: ${srgbToHex(tokens.error.fill.srgb)};
 `;
     css += `}
 
@@ -1235,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(
@@ -1263,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,
@@ -1359,7 +1260,7 @@ function Configurator({
       },
       label: "Dark Mode"
     }
-  )), /* @__PURE__ */ React.createElement(View, { style: styles6.topRow }, /* @__PURE__ */ React.createElement(View, { style: styles6.topRowPanel }, /* @__PURE__ */ React.createElement(GlobalPanel, { state, dispatch })), showPreview && /* @__PURE__ */ React.createElement(View, { style: styles6.topRowPanel }, /* @__PURE__ */ React.createElement(PreviewPanel, { state, dispatch, themeConfig }))), /* @__PURE__ */ React.createElement(View, { style: styles6.designRow }, /* @__PURE__ */ React.createElement(DesignPanel, { state, dispatch })), /* @__PURE__ */ React.createElement(View, { style: styles6.tabBar }, state.palettes.map((palette, index) => /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement(View, { style: styles6.topRow }, /* @__PURE__ */ React.createElement(View, { style: styles6.topRowPanel }, /* @__PURE__ */ React.createElement(GlobalPanel, { state, dispatch })), showPreview && /* @__PURE__ */ React.createElement(View, { style: styles6.topRowPanel }, /* @__PURE__ */ React.createElement(PreviewPanel, { state, themeConfig }))), /* @__PURE__ */ React.createElement(View, { style: styles6.designRow }, /* @__PURE__ */ React.createElement(DesignPanel, { state, dispatch })), /* @__PURE__ */ React.createElement(View, { style: styles6.tabBar }, state.palettes.map((palette, index) => /* @__PURE__ */ React.createElement(
     Pressable,
     {
       key: index,