@newtonedev/components 0.1.7 → 0.1.8

package/dist/tokens/types.d.ts

@@ -106,32 +106,50 @@ export interface ResolvedTokens {
         readonly xl: number;
         readonly pill: 999;
     };
-    /** Typography tokens for fonts, sizes, line heights, and weights */
+    /** Typography tokens for fonts (per-scope) and primitive size/lineHeight scales */
     readonly typography: {
+        /** Per-scope font family + weight mapping */
         readonly fonts: {
-            readonly mono: string;
-            readonly display: string;
-            readonly default: string;
+            readonly main: {
+                readonly family: string;
+                readonly weights: {
+                    readonly regular: number;
+                    readonly medium: number;
+                    readonly bold: number;
+                };
+            };
+            readonly display: {
+                readonly family: string;
+                readonly weights: {
+                    readonly regular: number;
+                    readonly medium: number;
+                    readonly bold: number;
+                };
+            };
+            readonly mono: {
+                readonly family: string;
+                readonly weights: {
+                    readonly regular: number;
+                    readonly medium: number;
+                    readonly bold: number;
+                };
+            };
+            readonly currency: {
+                readonly family: string;
+                readonly weights: {
+                    readonly regular: number;
+                    readonly medium: number;
+                    readonly bold: number;
+                };
+            };
         };
-        readonly size: {
-            readonly xs: number;
-            readonly sm: number;
-            readonly base: number;
-            readonly md: number;
-            readonly lg: number;
-            readonly xl: number;
-            readonly xxl: number;
+        /** Primitive font size scale — numbered tokens ('01'–'16'), values in px */
+        readonly fontSizes: {
+            readonly [key: string]: number;
         };
-        readonly lineHeight: {
-            readonly tight: number;
-            readonly normal: number;
-            readonly relaxed: number;
-        };
-        readonly weight: {
-            readonly regular: number;
-            readonly medium: number;
-            readonly semibold: number;
-            readonly bold: number;
+        /** Primitive line height scale — numbered tokens ('01'–'16'), values in px */
+        readonly lineHeights: {
+            readonly [key: string]: number;
         };
     };
     /** Icon tokens for Material Symbols configuration */

package/dist/tokens/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/tokens/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/tokens/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newtonedev/components",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "React + React Native Web component library for Newtone",
   "license": "MIT",
   "repository": {
@@ -37,6 +37,7 @@
     "react-native": ">=0.70.0"
   },
   "dependencies": {
+    "@newtonedev/fonts": "file:../../../newtone-fonts",
     "newtone": "^0.1.0",
     "react-native-web": "^0.19.10"
   },

package/src/composites/actions/Button/Button.styles.ts

@@ -184,21 +184,21 @@ function getSizeConfig(size: ButtonSize, tokens: UseTokensResult) {
       padding: 8,
       gap: tokens.spacing['08'],
       borderRadius: 8,
-      textSize: 'base', // 16px
+      textSize: 'md', // 16px
       iconSize: 24,
     },
     md: {
       padding: 12,
       gap: tokens.spacing['08'],
       borderRadius: 12,
-      textSize: 'base', // 16px
+      textSize: 'md', // 16px
       iconSize: 24,
     },
     lg: {
       padding: 16,
       gap: tokens.spacing['08'],
       borderRadius: 16,
-      textSize: 'base', // 16px
+      textSize: 'md', // 16px
       iconSize: 24,
     },
   };

package/src/composites/actions/Button/Button.tsx

@@ -4,7 +4,7 @@ import type { ButtonProps } from './Button.types';
 import { getButtonConfig, computeButtonPadding } from './Button.styles';
 import { useTokens } from '../../../tokens/useTokens';
 import { Icon } from '../../../primitives/Icon/Icon';
-import { Text } from '../../../primitives/Text/Text';
+import { Text } from '../../../primitives/Text';
 import { Wrapper } from '../../../primitives/Wrapper/Wrapper';
 
 /**
@@ -99,8 +99,9 @@ export function Button({
           {children && (
             // Text primitive with semantic props + color style override
             <Text
+              role="label"
               size={sizeTokens.textSize}
-              weight="semibold"
+              centerVertically
               style={[
                 { color: variantColors.textColor },
                 ...(Array.isArray(textStyle) ? textStyle : textStyle ? [textStyle] : []),

package/src/composites/form-controls/Select/Select.styles.ts

@@ -9,7 +9,7 @@ export function getSelectStyles(
   isOpen: boolean
 ) {
   const isSm = size === 'sm';
-  const fontSize = isSm ? tokens.typography.size.sm : tokens.typography.size.base;
+  const fontSize = isSm ? tokens.typography.fontSizes['04'] : tokens.typography.fontSizes['05'];
   const iconSize = fontSize + 2;
   const iconSpace = iconSize + tokens.spacing['08'];
   const paddingVertical = isSm ? tokens.spacing['04'] : tokens.spacing['08'];
@@ -21,9 +21,9 @@ export function getSelectStyles(
       zIndex: isOpen ? 999 : 0,
     },
     label: {
-      fontFamily: tokens.typography.fonts.default,
-      fontSize: tokens.typography.size.sm,
-      fontWeight: tokens.typography.weight.semibold as any,
+      fontFamily: tokens.typography.fonts.main.family,
+      fontSize: tokens.typography.fontSizes['04'],
+      fontWeight: tokens.typography.fonts.main.weights.medium as any,
       color: srgbToHex(tokens.textSecondary.srgb),
     },
     trigger: {
@@ -40,7 +40,7 @@ export function getSelectStyles(
     },
     triggerText: {
       flex: 1,
-      fontFamily: tokens.typography.fonts.default,
+      fontFamily: tokens.typography.fonts.main.family,
       fontSize,
       color: disabled
         ? srgbToHex(tokens.textSecondary.srgb)
@@ -54,9 +54,9 @@ export function getSelectStyles(
       justifyContent: 'center',
     },
     groupLabel: {
-      fontFamily: tokens.typography.fonts.default,
-      fontSize: tokens.typography.size.xs,
-      fontWeight: tokens.typography.weight.semibold as any,
+      fontFamily: tokens.typography.fonts.main.family,
+      fontSize: tokens.typography.fontSizes['01'],
+      fontWeight: tokens.typography.fonts.main.weights.medium as any,
       color: srgbToHex(tokens.textSecondary.srgb),
       textTransform: 'uppercase',
       letterSpacing: 0.5,

package/src/composites/form-controls/Select/Select.tsx

@@ -86,7 +86,7 @@ export function Select({
       <View style={styles.iconWrapper} pointerEvents="none">
         <Icon
           name={isOpen ? 'expand_less' : 'expand_more'}
-          size={size === 'sm' ? tokens.typography.size.sm + 2 : tokens.typography.size.base + 2}
+          size={size === 'sm' ? tokens.typography.fontSizes['04'] + 2 : tokens.typography.fontSizes['05'] + 2}
           color={iconColor}
         />
       </View>

package/src/composites/form-controls/Select/SelectOption.tsx

@@ -26,7 +26,7 @@ export function SelectOptionRow({
 
   const paddingVertical = size === 'sm' ? tokens.spacing['04'] : tokens.spacing['08'];
   const paddingHorizontal = size === 'sm' ? tokens.spacing['08'] : tokens.spacing['12'];
-  const fontSize = size === 'sm' ? tokens.typography.size.sm : tokens.typography.size.base;
+  const fontSize = size === 'sm' ? tokens.typography.fontSizes['04'] : tokens.typography.fontSizes['05'];
 
   if (renderOption) {
     return (
@@ -74,12 +74,12 @@ export function SelectOptionRow({
         style={[
           {
             flex: 1,
-            fontFamily: tokens.typography.fonts.default,
+            fontFamily: tokens.typography.fonts.main.family,
             fontSize,
             color: srgbToHex(tokens.textPrimary.srgb),
           },
           isSelected && {
-            fontWeight: tokens.typography.weight.semibold as any,
+            fontWeight: tokens.typography.fonts.main.weights.medium as any,
             color: srgbToHex(tokens.accent.fill.srgb),
           },
           option.disabled && {

package/src/composites/form-controls/TextInput/TextInput.styles.ts

@@ -8,20 +8,20 @@ export function getTextInputStyles(tokens: ResolvedTokens, disabled: boolean) {
       gap: tokens.spacing['04'],
     },
     label: {
-      fontFamily: tokens.typography.fonts.default,
-      fontSize: tokens.typography.size.sm,
-      fontWeight: tokens.typography.weight.semibold as any,
+      fontFamily: tokens.typography.fonts.main.family,
+      fontSize: tokens.typography.fontSizes['04'],
+      fontWeight: tokens.typography.fonts.main.weights.medium as any,
       color: srgbToHex(tokens.textSecondary.srgb),
     },
     input: {
-      fontFamily: tokens.typography.fonts.default,
+      fontFamily: tokens.typography.fonts.main.family,
       backgroundColor: srgbToHex(tokens.backgroundSunken.srgb),
       borderWidth: 1,
       borderColor: srgbToHex(tokens.border.srgb),
       borderRadius: tokens.radius.md,
       paddingVertical: tokens.spacing['08'],
       paddingHorizontal: tokens.spacing['12'],
-      fontSize: tokens.typography.size.base,
+      fontSize: tokens.typography.fontSizes['05'],
       color: disabled
         ? srgbToHex(tokens.textSecondary.srgb)
         : srgbToHex(tokens.textPrimary.srgb),

package/src/composites/form-controls/Toggle/Toggle.styles.ts

@@ -20,9 +20,9 @@ export function getToggleStyles(
       opacity: disabled ? 0.5 : 1,
     },
     label: {
-      fontFamily: tokens.typography.fonts.default,
-      fontSize: tokens.typography.size.sm,
-      fontWeight: tokens.typography.weight.semibold as any,
+      fontFamily: tokens.typography.fonts.main.family,
+      fontSize: tokens.typography.fontSizes['04'],
+      fontWeight: tokens.typography.fonts.main.weights.medium as any,
       color: srgbToHex(tokens.textSecondary.srgb),
     },
     track: {

package/src/composites/range-inputs/ColorScaleSlider/ColorScaleSlider.styles.ts

@@ -17,9 +17,9 @@ export function getColorScaleSliderStyles(tokens: ResolvedTokens, disabled: bool
       alignItems: 'center',
     },
     label: {
-      fontFamily: tokens.typography.fonts.default,
-      fontSize: tokens.typography.size.sm,
-      fontWeight: tokens.typography.weight.semibold as any,
+      fontFamily: tokens.typography.fonts.main.family,
+      fontSize: tokens.typography.fontSizes['04'],
+      fontWeight: tokens.typography.fonts.main.weights.medium as any,
       color: srgbToHex(tokens.textSecondary.srgb),
     },
     trackContainer: {
@@ -49,9 +49,9 @@ export function getColorScaleSliderStyles(tokens: ResolvedTokens, disabled: bool
       borderColor: srgbToHex(tokens.border.srgb),
     },
     warning: {
-      fontFamily: tokens.typography.fonts.default,
-      fontSize: tokens.typography.size.xs,
-      fontWeight: tokens.typography.weight.medium as any,
+      fontFamily: tokens.typography.fonts.main.family,
+      fontSize: tokens.typography.fontSizes['01'],
+      fontWeight: tokens.typography.fonts.main.weights.medium as any,
       color: srgbToHex(tokens.error.fill.srgb),
     },
   });

package/src/composites/range-inputs/HueSlider/HueSlider.styles.ts

@@ -41,15 +41,15 @@ export function getHueSliderStyles(tokens: ResolvedTokens, disabled: boolean) {
       alignItems: 'center',
     },
     label: {
-      fontFamily: tokens.typography.fonts.default,
-      fontSize: tokens.typography.size.sm,
-      fontWeight: tokens.typography.weight.semibold as any,
+      fontFamily: tokens.typography.fonts.main.family,
+      fontSize: tokens.typography.fontSizes['04'],
+      fontWeight: tokens.typography.fonts.main.weights.medium as any,
       color: srgbToHex(tokens.textSecondary.srgb),
     },
     value: {
-      fontFamily: tokens.typography.fonts.default,
-      fontSize: tokens.typography.size.sm,
-      fontWeight: tokens.typography.weight.medium as any,
+      fontFamily: tokens.typography.fonts.main.family,
+      fontSize: tokens.typography.fontSizes['04'],
+      fontWeight: tokens.typography.fonts.main.weights.medium as any,
       color: srgbToHex(tokens.textPrimary.srgb),
     },
     valueInput: {
@@ -61,9 +61,9 @@ export function getHueSliderStyles(tokens: ResolvedTokens, disabled: boolean) {
       borderRadius: 4,
       backgroundColor: 'transparent',
       color: srgbToHex(tokens.textPrimary.srgb),
-      fontFamily: tokens.typography.fonts.default,
-      fontSize: tokens.typography.size.sm,
-      fontWeight: tokens.typography.weight.medium as any,
+      fontFamily: tokens.typography.fonts.main.family,
+      fontSize: tokens.typography.fontSizes['04'],
+      fontWeight: tokens.typography.fonts.main.weights.medium as any,
       textAlign: 'right',
     },
     trackContainer: {

package/src/composites/range-inputs/Slider/Slider.styles.ts

@@ -17,15 +17,15 @@ export function getSliderStyles(tokens: ResolvedTokens, disabled: boolean) {
       alignItems: 'center',
     },
     label: {
-      fontFamily: tokens.typography.fonts.default,
-      fontSize: tokens.typography.size.sm,
-      fontWeight: tokens.typography.weight.semibold as any,
+      fontFamily: tokens.typography.fonts.main.family,
+      fontSize: tokens.typography.fontSizes['04'],
+      fontWeight: tokens.typography.fonts.main.weights.medium as any,
       color: srgbToHex(tokens.textSecondary.srgb),
     },
     value: {
-      fontFamily: tokens.typography.fonts.default,
-      fontSize: tokens.typography.size.sm,
-      fontWeight: tokens.typography.weight.medium as any,
+      fontFamily: tokens.typography.fonts.main.family,
+      fontSize: tokens.typography.fontSizes['04'],
+      fontWeight: tokens.typography.fonts.main.weights.medium as any,
       color: srgbToHex(tokens.textPrimary.srgb),
     },
     valueInput: {
@@ -37,9 +37,9 @@ export function getSliderStyles(tokens: ResolvedTokens, disabled: boolean) {
       borderRadius: 4,
       backgroundColor: 'transparent',
       color: srgbToHex(tokens.textPrimary.srgb),
-      fontFamily: tokens.typography.fonts.default,
-      fontSize: tokens.typography.size.sm,
-      fontWeight: tokens.typography.weight.medium as any,
+      fontFamily: tokens.typography.fonts.main.family,
+      fontSize: tokens.typography.fontSizes['04'],
+      fontWeight: tokens.typography.fonts.main.weights.medium as any,
       textAlign: 'right',
     },
     trackContainer: {

package/src/fonts/GoogleFontLoader.tsx

@@ -1,12 +1,13 @@
 import { useEffect, useRef } from 'react';
-import type { FontConfig } from '../theme/types';
+import type { FontSlot } from '../theme/types';
 import { buildGoogleFontsUrl } from './buildGoogleFontsUrl';
 
 interface GoogleFontLoaderProps {
   readonly fonts: {
-    readonly mono: FontConfig;
-    readonly display: FontConfig;
-    readonly default: FontConfig;
+    readonly main: FontSlot;
+    readonly display: FontSlot;
+    readonly mono: FontSlot;
+    readonly currency: FontSlot;
   };
 }
 
@@ -53,12 +54,26 @@ export function GoogleFontLoader({ fonts }: GoogleFontLoaderProps) {
       }
     };
   }, [
-    fonts.mono.family,
-    fonts.mono.type,
-    fonts.display.family,
-    fonts.display.type,
-    fonts.default.family,
-    fonts.default.type,
+    fonts.main.config.family,
+    fonts.main.config.type,
+    fonts.main.weights.regular,
+    fonts.main.weights.medium,
+    fonts.main.weights.bold,
+    fonts.display.config.family,
+    fonts.display.config.type,
+    fonts.display.weights.regular,
+    fonts.display.weights.medium,
+    fonts.display.weights.bold,
+    fonts.mono.config.family,
+    fonts.mono.config.type,
+    fonts.mono.weights.regular,
+    fonts.mono.weights.medium,
+    fonts.mono.weights.bold,
+    fonts.currency.config.family,
+    fonts.currency.config.type,
+    fonts.currency.weights.regular,
+    fonts.currency.weights.medium,
+    fonts.currency.weights.bold,
   ]);
 
   return null;

package/src/fonts/SelfHostedFontLoader.tsx

@@ -0,0 +1,44 @@
+import { useEffect, useRef } from 'react';
+
+interface SelfHostedFontLoaderProps {
+  /** Raw @font-face CSS string from the theme API. */
+  readonly fontFaceCss: string;
+}
+
+/**
+ * Injects self-hosted @font-face CSS into <head> via a <style> tag.
+ * Used instead of GoogleFontLoader when self-hosted font CSS is available.
+ *
+ * Uses imperative DOM manipulation because react-native-web's View
+ * cannot render <style> elements.
+ */
+export function SelfHostedFontLoader({ fontFaceCss }: SelfHostedFontLoaderProps) {
+  const styleRef = useRef<HTMLStyleElement | null>(null);
+
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+
+    // Clean up previous style
+    if (styleRef.current) {
+      styleRef.current.remove();
+      styleRef.current = null;
+    }
+
+    if (!fontFaceCss) return;
+
+    const style = document.createElement('style');
+    style.setAttribute('data-newtone-fonts', 'self-hosted');
+    style.textContent = fontFaceCss;
+    document.head.appendChild(style);
+    styleRef.current = style;
+
+    return () => {
+      if (styleRef.current) {
+        styleRef.current.remove();
+        styleRef.current = null;
+      }
+    };
+  }, [fontFaceCss]);
+
+  return null;
+}

package/src/fonts/buildGoogleFontsUrl.ts

@@ -1,31 +1,2 @@
-import type { FontConfig } from '../theme/types';
-
-/**
- * Build a Google Fonts CSS API v2 URL for all google-type fonts in the config.
- * Returns null if no Google fonts are present.
- *
- * @example
- * ```
- * buildGoogleFontsUrl(fonts)
- * // => "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fira+Code:wght@400;500;600;700&display=swap"
- * ```
- */
-export function buildGoogleFontsUrl(
-  fonts: { readonly mono: FontConfig; readonly display: FontConfig; readonly default: FontConfig },
-): string | null {
-  const googleFonts = [fonts.mono, fonts.display, fonts.default].filter(
-    (f) => f.type === 'google',
-  );
-
-  if (googleFonts.length === 0) return null;
-
-  // Deduplicate by family name
-  const unique = [...new Map(googleFonts.map((f) => [f.family, f])).values()];
-
-  const families = unique.map((f) => {
-    const encoded = f.family.replace(/ /g, '+');
-    return `family=${encoded}:wght@400;500;600;700`;
-  });
-
-  return `https://fonts.googleapis.com/css2?${families.join('&')}&display=swap`;
-}
+// Re-export from @newtonedev/fonts (canonical source)
+export { buildGoogleFontsUrl } from '@newtonedev/fonts';

package/src/fonts/measureFont.ts

@@ -0,0 +1,42 @@
+/**
+ * Reference string for character width measurement.
+ * Covers uppercase, lowercase, digits, and a space — 63 characters total.
+ */
+const REF_STRING =
+  'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 ';
+
+/**
+ * Measure the average character width ratio for a font using the Canvas API.
+ *
+ * Waits for the font to load via `document.fonts.load()` before measuring.
+ * Falls back to 0.55 if the browser context is unavailable, the font fails
+ * to load, or canvas is not supported.
+ *
+ * The returned ratio represents `avgCharWidth / fontSize`. Multiply by a
+ * desired fontSize to estimate character widths for that font.
+ *
+ * @param fontFamily - Font family name, e.g. "Inter" or "system-ui"
+ * @param fontWeight - CSS font-weight number, e.g. 400
+ * @param fallback   - CSS fallback stack, e.g. "sans-serif"
+ * @param fontSize   - Reference font size in px (default 16)
+ * @returns Average character width ratio, e.g. 0.52 for Inter
+ */
+export async function measureAvgCharWidth(
+  fontFamily: string,
+  fontWeight: number,
+  fallback: string,
+  fontSize = 16,
+): Promise<number> {
+  if (typeof document === 'undefined') return 0.55;
+  try {
+    await document.fonts.load(`${fontWeight} ${fontSize}px "${fontFamily}"`);
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return 0.55;
+    ctx.font = `${fontWeight} ${fontSize}px "${fontFamily}", ${fallback}`;
+    const ratio = ctx.measureText(REF_STRING).width / REF_STRING.length / fontSize;
+    return Math.round(ratio * 1000) / 1000;
+  } catch {
+    return 0.55;
+  }
+}

package/src/fonts/reportQueue.ts

@@ -0,0 +1,54 @@
+import type { ObserverPayload } from '@newtonedev/fonts';
+
+/**
+ * Module-level batch queue for typography observations (Layer 3 reporting).
+ *
+ * Lives outside React's component lifecycle so it survives re-renders.
+ * Observations are enqueued immediately and flushed in a single batch after
+ * a 2s debounce — minimising network requests and allowing coalescence.
+ *
+ * Usage: call `enqueueObservation(endpoint, payload)` from responsive Text
+ * instances. Set `reportingEndpoint` on `NewtoneProvider` to opt in.
+ */
+
+interface QueuedObservation {
+  readonly endpoint: string;
+  readonly payload: ObserverPayload;
+}
+
+const queue: QueuedObservation[] = [];
+let flushTimer: ReturnType<typeof setTimeout> | undefined;
+
+function flush(): void {
+  if (queue.length === 0) return;
+
+  // Group by endpoint so a page with multiple endpoints gets one request each
+  const byEndpoint = new Map<string, ObserverPayload[]>();
+  for (const item of queue) {
+    const group = byEndpoint.get(item.endpoint) ?? [];
+    group.push(item.payload);
+    byEndpoint.set(item.endpoint, group);
+  }
+  queue.length = 0;
+
+  for (const [endpoint, observations] of byEndpoint) {
+    // Fire-and-forget — reporting failures are silent and never affect the UI
+    fetch(endpoint, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ observations }),
+      // keepalive: true allows the request to outlive the page
+      keepalive: true,
+    }).catch(() => {});
+  }
+}
+
+/**
+ * Enqueue a typography observation for batch reporting.
+ * Resets the 2s debounce timer on each call.
+ */
+export function enqueueObservation(endpoint: string, payload: ObserverPayload): void {
+  queue.push({ endpoint, payload });
+  if (flushTimer !== undefined) clearTimeout(flushTimer);
+  flushTimer = setTimeout(flush, 2000);
+}