@newtonedev/components 0.1.0 → 0.1.2

package/src/Slider/Slider.styles.ts

@@ -2,10 +2,14 @@ import { StyleSheet } from 'react-native';
 import { srgbToHex } from 'newtone';
 import type { ResolvedTokens } from '../tokens/types';
 
-export function getSliderStyles(tokens: ResolvedTokens) {
+const TRACK_HEIGHT = 6;
+export const THUMB_SIZE = 16;
+
+export function getSliderStyles(tokens: ResolvedTokens, disabled: boolean) {
   return StyleSheet.create({
     container: {
-      gap: 4,
+      gap: tokens.spacing.xs,
+      opacity: disabled ? 0.5 : 1,
     },
     labelRow: {
       flexDirection: 'row',
@@ -13,33 +17,57 @@ export function getSliderStyles(tokens: ResolvedTokens) {
       alignItems: 'center',
     },
     label: {
-      fontSize: 12,
-      fontWeight: '600',
+      fontFamily: tokens.typography.fonts.default,
+      fontSize: tokens.typography.size.sm,
+      fontWeight: tokens.typography.weight.semibold as any,
       color: srgbToHex(tokens.textSecondary.srgb),
     },
     value: {
-      fontSize: 12,
-      fontWeight: '500',
+      fontFamily: tokens.typography.fonts.default,
+      fontSize: tokens.typography.size.sm,
+      fontWeight: tokens.typography.weight.medium as any,
+      color: srgbToHex(tokens.textPrimary.srgb),
+    },
+    valueInput: {
+      width: 48,
+      paddingVertical: 0,
+      paddingHorizontal: 4,
+      borderWidth: 1,
+      borderColor: srgbToHex(tokens.border.srgb),
+      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,
+      textAlign: 'right',
+    },
+    trackContainer: {
+      height: TRACK_HEIGHT + THUMB_SIZE,
+      justifyContent: 'center',
+      position: 'relative',
+    },
+    trackRail: {
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      height: TRACK_HEIGHT,
+      borderRadius: TRACK_HEIGHT / 2,
+      backgroundColor: srgbToHex(tokens.border.srgb),
+    },
+    trackFill: {
+      position: 'absolute',
+      left: 0,
+      height: TRACK_HEIGHT,
+      borderRadius: TRACK_HEIGHT / 2,
+      backgroundColor: srgbToHex(tokens.interactive.srgb),
+    },
+    thumb: {
+      position: 'absolute',
+      width: THUMB_SIZE,
+      height: THUMB_SIZE,
+      borderRadius: THUMB_SIZE / 2,
+      backgroundColor: srgbToHex(tokens.interactive.srgb),
     },
   });
 }
-
-/**
- * Generate CSS for the range input styling.
- * Returns inline CSS properties for the native <input type="range">.
- */
-export function getSliderInputStyle(
-  tokens: ResolvedTokens,
-  disabled: boolean
-): React.CSSProperties {
-  return {
-    width: '100%',
-    height: 6,
-    borderRadius: 3,
-    appearance: 'auto' as const,
-    cursor: disabled ? 'default' : 'pointer',
-    opacity: disabled ? 0.5 : 1,
-    accentColor: srgbToHex(tokens.interactive.srgb),
-  };
-}

package/src/Slider/Slider.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { View, Text } from 'react-native';
+import { View, Text, TextInput, PanResponder } from 'react-native';
 import type { SliderProps } from './Slider.types';
 import { useTokens } from '../tokens/useTokens';
-import { getSliderStyles, getSliderInputStyle } from './Slider.styles';
+import { getSliderStyles, THUMB_SIZE } from './Slider.styles';
 
 export function Slider({
   value,
@@ -12,46 +12,111 @@ export function Slider({
   step = 1,
   label,
   showValue = false,
+  editableValue = false,
   disabled = false,
   style,
 }: SliderProps) {
   const tokens = useTokens(1);
 
   const styles = React.useMemo(
-    () => getSliderStyles(tokens),
-    [tokens]
-  );
-
-  const inputStyle = React.useMemo(
-    () => getSliderInputStyle(tokens, disabled),
+    () => getSliderStyles(tokens, disabled),
     [tokens, disabled]
   );
 
-  const handleChange = React.useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      onValueChange(Number(e.target.value));
+  const trackRef = React.useRef<View>(null);
+  const trackWidth = React.useRef(0);
+  const trackPageX = React.useRef(0);
+
+  // Mutable refs to avoid stale closures in PanResponder
+  const onValueChangeRef = React.useRef(onValueChange);
+  const minRef = React.useRef(min);
+  const maxRef = React.useRef(max);
+  const stepRef = React.useRef(step);
+  const disabledRef = React.useRef(disabled);
+
+  React.useEffect(() => { onValueChangeRef.current = onValueChange; }, [onValueChange]);
+  React.useEffect(() => { minRef.current = min; }, [min]);
+  React.useEffect(() => { maxRef.current = max; }, [max]);
+  React.useEffect(() => { stepRef.current = step; }, [step]);
+  React.useEffect(() => { disabledRef.current = disabled; }, [disabled]);
+
+  const computeValue = React.useCallback((pageX: number) => {
+    const localX = pageX - trackPageX.current;
+    const ratio = Math.min(1, Math.max(0, localX / trackWidth.current));
+    const raw = minRef.current + ratio * (maxRef.current - minRef.current);
+    const stepped = Math.round(raw / stepRef.current) * stepRef.current;
+    return Math.min(maxRef.current, Math.max(minRef.current, stepped));
+  }, []);
+
+  const panResponder = React.useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => !disabledRef.current,
+      onMoveShouldSetPanResponder: () => !disabledRef.current,
+      onPanResponderGrant: (evt) => {
+        onValueChangeRef.current(computeValue(evt.nativeEvent.pageX));
+      },
+      onPanResponderMove: (_evt, gestureState) => {
+        onValueChangeRef.current(computeValue(gestureState.moveX));
+      },
+    })
+  ).current;
+
+  const ratio = max > min ? (value - min) / (max - min) : 0;
+  const usableWidth = Math.max(0, trackWidth.current - THUMB_SIZE);
+  const thumbLeft = ratio * usableWidth;
+  const fillWidth = thumbLeft + THUMB_SIZE / 2;
+
+  const handleValueTextSubmit = React.useCallback(
+    (text: string) => {
+      const raw = Number(text);
+      if (!Number.isNaN(raw)) {
+        onValueChange(Math.min(max, Math.max(min, raw)));
+      }
     },
-    [onValueChange]
+    [onValueChange, min, max]
   );
 
+  const [editText, setEditText] = React.useState(String(value));
+  React.useEffect(() => { setEditText(String(value)); }, [value]);
+
+  const showLabel = label || showValue || editableValue;
+
   return (
     <View style={[styles.container, ...(Array.isArray(style) ? style : [style])]}>
-      {(label || showValue) && (
+      {showLabel && (
         <View style={styles.labelRow}>
           {label && <Text style={styles.label}>{label}</Text>}
-          {showValue && <Text style={styles.value}>{value}</Text>}
+          {editableValue ? (
+            <TextInput
+              style={styles.valueInput}
+              value={editText}
+              keyboardType="numeric"
+              onChangeText={setEditText}
+              onSubmitEditing={(e) => handleValueTextSubmit(e.nativeEvent.text)}
+              onBlur={() => handleValueTextSubmit(editText)}
+              selectTextOnFocus
+              editable={!disabled}
+            />
+          ) : (
+            showValue && <Text style={styles.value}>{value}</Text>
+          )}
         </View>
       )}
-      <input
-        type="range"
-        min={min}
-        max={max}
-        step={step}
-        value={value}
-        onChange={handleChange}
-        disabled={disabled}
-        style={inputStyle}
-      />
+      <View
+        ref={trackRef}
+        style={styles.trackContainer}
+        onLayout={(e) => {
+          trackWidth.current = e.nativeEvent.layout.width;
+          trackRef.current?.measure((_x, _y, _w, _h, pageX) => {
+            if (pageX != null) trackPageX.current = pageX;
+          });
+        }}
+        {...panResponder.panHandlers}
+      >
+        <View style={styles.trackRail} />
+        <View style={[styles.trackFill, { width: fillWidth }]} />
+        <View style={[styles.thumb, { left: thumbLeft }]} />
+      </View>
     </View>
   );
 }

package/src/Slider/Slider.types.ts

@@ -8,6 +8,7 @@ export interface SliderProps {
   readonly step?: number;
   readonly label?: string;
   readonly showValue?: boolean;
+  readonly editableValue?: boolean;
   readonly disabled?: boolean;
   readonly style?: ViewStyle | ViewStyle[];
 }

package/src/TextInput/TextInput.styles.ts

@@ -5,21 +5,23 @@ import type { ResolvedTokens } from '../tokens/types';
 export function getTextInputStyles(tokens: ResolvedTokens, disabled: boolean) {
   return StyleSheet.create({
     container: {
-      gap: 4,
+      gap: tokens.spacing.xs,
     },
     label: {
-      fontSize: 12,
-      fontWeight: '600',
+      fontFamily: tokens.typography.fonts.default,
+      fontSize: tokens.typography.size.sm,
+      fontWeight: tokens.typography.weight.semibold as any,
       color: srgbToHex(tokens.textSecondary.srgb),
     },
     input: {
+      fontFamily: tokens.typography.fonts.default,
       backgroundColor: srgbToHex(tokens.backgroundSunken.srgb),
       borderWidth: 1,
       borderColor: srgbToHex(tokens.border.srgb),
-      borderRadius: 6,
-      paddingVertical: 8,
-      paddingHorizontal: 12,
-      fontSize: 14,
+      borderRadius: tokens.radius.md,
+      paddingVertical: tokens.spacing.sm,
+      paddingHorizontal: tokens.spacing.md,
+      fontSize: tokens.typography.size.base,
       color: disabled
         ? srgbToHex(tokens.textSecondary.srgb)
         : srgbToHex(tokens.textPrimary.srgb),

package/src/Toggle/Toggle.styles.ts

@@ -16,12 +16,13 @@ export function getToggleStyles(
     container: {
       flexDirection: 'row',
       alignItems: 'center',
-      gap: 8,
+      gap: tokens.spacing.sm,
       opacity: disabled ? 0.5 : 1,
     },
     label: {
-      fontSize: 12,
-      fontWeight: '600',
+      fontFamily: tokens.typography.fonts.default,
+      fontSize: tokens.typography.size.sm,
+      fontWeight: tokens.typography.weight.semibold as any,
       color: srgbToHex(tokens.textSecondary.srgb),
     },
     track: {

package/src/fonts/GoogleFontLoader.tsx

@@ -0,0 +1,63 @@
+import { useEffect, useRef } from 'react';
+import type { FontConfig } from '../theme/types';
+import { buildGoogleFontsUrl } from './buildGoogleFontsUrl';
+
+interface GoogleFontLoaderProps {
+  readonly fonts: {
+    readonly mono: FontConfig;
+    readonly display: FontConfig;
+    readonly default: FontConfig;
+  };
+}
+
+/**
+ * Manages a single <link> tag in <head> for Google Fonts.
+ * Removes the previous link when fonts change to avoid accumulation.
+ * Does nothing when no Google fonts are present.
+ *
+ * Uses imperative DOM manipulation because react-native-web's View
+ * cannot render <link> elements.
+ */
+export function GoogleFontLoader({ fonts }: GoogleFontLoaderProps) {
+  const linkRef = useRef<HTMLLinkElement | null>(null);
+
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+
+    const url = buildGoogleFontsUrl(fonts);
+
+    // Clean up previous link
+    if (linkRef.current) {
+      linkRef.current.remove();
+      linkRef.current = null;
+    }
+
+    if (!url) return;
+
+    // Check if an identical link already exists (another provider instance)
+    const links = Array.from(document.head.querySelectorAll('link[rel="stylesheet"]'));
+    if (links.some((el) => (el as HTMLLinkElement).href === url)) return;
+
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = url;
+    document.head.appendChild(link);
+    linkRef.current = link;
+
+    return () => {
+      if (linkRef.current) {
+        linkRef.current.remove();
+        linkRef.current = null;
+      }
+    };
+  }, [
+    fonts.mono.family,
+    fonts.mono.type,
+    fonts.display.family,
+    fonts.display.type,
+    fonts.default.family,
+    fonts.default.type,
+  ]);
+
+  return null;
+}

package/src/fonts/IconFontLoader.tsx

@@ -0,0 +1,49 @@
+import { useEffect, useRef } from 'react';
+
+interface IconFontLoaderProps {
+  readonly icons: {
+    readonly variant: 'outlined' | 'rounded' | 'sharp';
+  };
+}
+
+/**
+ * Manages a single <link> tag in <head> for the Material Symbols icon font.
+ * Loads the variable font with all axes (FILL, wght, GRAD, opsz).
+ * Removes the previous link when the variant changes to avoid accumulation.
+ */
+export function IconFontLoader({ icons }: IconFontLoaderProps) {
+  const linkRef = useRef<HTMLLinkElement | null>(null);
+
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+
+    const variantName = icons.variant.charAt(0).toUpperCase() + icons.variant.slice(1);
+    const family = `Material+Symbols+${variantName}`;
+    const url = `https://fonts.googleapis.com/css2?family=${family}:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block`;
+
+    // Clean up previous link
+    if (linkRef.current) {
+      linkRef.current.remove();
+      linkRef.current = null;
+    }
+
+    // Check if an identical link already exists (another provider instance)
+    const links = Array.from(document.head.querySelectorAll('link[rel="stylesheet"]'));
+    if (links.some((el) => (el as HTMLLinkElement).href === url)) return;
+
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = url;
+    document.head.appendChild(link);
+    linkRef.current = link;
+
+    return () => {
+      if (linkRef.current) {
+        linkRef.current.remove();
+        linkRef.current = null;
+      }
+    };
+  }, [icons.variant]);
+
+  return null;
+}

package/src/fonts/buildGoogleFontsUrl.ts

@@ -0,0 +1,31 @@
+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`;
+}

package/src/fonts/googleFonts.ts

@@ -0,0 +1,87 @@
+export interface GoogleFontEntry {
+  readonly family: string;
+  readonly category: 'sans-serif' | 'serif' | 'monospace' | 'display';
+  readonly fallback: string;
+}
+
+/**
+ * Curated list of popular Google Fonts organized by category.
+ * Used by the font picker UI and the GoogleFontLoader.
+ */
+export const GOOGLE_FONTS: readonly GoogleFontEntry[] = [
+  // Sans-serif
+  { family: 'Inter', category: 'sans-serif', fallback: 'sans-serif' },
+  { family: 'Roboto', category: 'sans-serif', fallback: 'sans-serif' },
+  { family: 'Open Sans', category: 'sans-serif', fallback: 'sans-serif' },
+  { family: 'Lato', category: 'sans-serif', fallback: 'sans-serif' },
+  { family: 'Montserrat', category: 'sans-serif', fallback: 'sans-serif' },
+  { family: 'Poppins', category: 'sans-serif', fallback: 'sans-serif' },
+  { family: 'Nunito', category: 'sans-serif', fallback: 'sans-serif' },
+  { family: 'Source Sans 3', category: 'sans-serif', fallback: 'sans-serif' },
+  { family: 'Work Sans', category: 'sans-serif', fallback: 'sans-serif' },
+  { family: 'Raleway', category: 'sans-serif', fallback: 'sans-serif' },
+  { family: 'DM Sans', category: 'sans-serif', fallback: 'sans-serif' },
+  { family: 'Plus Jakarta Sans', category: 'sans-serif', fallback: 'sans-serif' },
+  { family: 'Outfit', category: 'sans-serif', fallback: 'sans-serif' },
+  { family: 'Space Grotesk', category: 'sans-serif', fallback: 'sans-serif' },
+  { family: 'Manrope', category: 'sans-serif', fallback: 'sans-serif' },
+
+  // Serif
+  { family: 'Playfair Display', category: 'serif', fallback: 'serif' },
+  { family: 'Merriweather', category: 'serif', fallback: 'serif' },
+  { family: 'Lora', category: 'serif', fallback: 'serif' },
+  { family: 'Libre Baskerville', category: 'serif', fallback: 'serif' },
+  { family: 'Source Serif 4', category: 'serif', fallback: 'serif' },
+  { family: 'Bitter', category: 'serif', fallback: 'serif' },
+  { family: 'Cormorant Garamond', category: 'serif', fallback: 'serif' },
+  { family: 'EB Garamond', category: 'serif', fallback: 'serif' },
+  { family: 'Crimson Text', category: 'serif', fallback: 'serif' },
+  { family: 'Noto Serif', category: 'serif', fallback: 'serif' },
+
+  // Monospace
+  { family: 'Fira Code', category: 'monospace', fallback: 'monospace' },
+  { family: 'JetBrains Mono', category: 'monospace', fallback: 'monospace' },
+  { family: 'Source Code Pro', category: 'monospace', fallback: 'monospace' },
+  { family: 'IBM Plex Mono', category: 'monospace', fallback: 'monospace' },
+  { family: 'Roboto Mono', category: 'monospace', fallback: 'monospace' },
+  { family: 'Space Mono', category: 'monospace', fallback: 'monospace' },
+  { family: 'Ubuntu Mono', category: 'monospace', fallback: 'monospace' },
+  { family: 'Inconsolata', category: 'monospace', fallback: 'monospace' },
+
+  // Display
+  { family: 'Abril Fatface', category: 'display', fallback: 'serif' },
+  { family: 'Bebas Neue', category: 'display', fallback: 'sans-serif' },
+  { family: 'Oswald', category: 'display', fallback: 'sans-serif' },
+  { family: 'Righteous', category: 'display', fallback: 'sans-serif' },
+  { family: 'Lobster', category: 'display', fallback: 'cursive' },
+  { family: 'Pacifico', category: 'display', fallback: 'cursive' },
+  { family: 'Comfortaa', category: 'display', fallback: 'sans-serif' },
+  { family: 'Fredoka', category: 'display', fallback: 'sans-serif' },
+];
+
+export interface SystemFontEntry {
+  readonly family: string;
+  readonly category: 'sans-serif' | 'serif' | 'monospace';
+  readonly fallback: string;
+}
+
+/**
+ * System font options that don't require external loading.
+ */
+export const SYSTEM_FONTS: readonly SystemFontEntry[] = [
+  {
+    family: 'system-ui',
+    category: 'sans-serif',
+    fallback: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  },
+  {
+    family: 'ui-monospace',
+    category: 'monospace',
+    fallback: 'SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+  },
+  {
+    family: 'ui-serif',
+    category: 'serif',
+    fallback: 'Georgia, "Times New Roman", serif',
+  },
+];

package/src/index.ts

@@ -4,11 +4,15 @@ export type {
   ColorMode,
   ThemeName,
   ElevationLevel,
+  FrameElevation,
   ThemeMapping,
   ColorSystemConfig,
   NewtoneThemeConfig,
   NewtoneThemeContext,
+  FontConfig,
 } from './theme/types';
+export { useFrameContext } from './theme/FrameContext';
+export type { FrameContextValue } from './theme/FrameContext';
 export { DEFAULT_THEME_CONFIG } from './theme/defaults';
 
 // Tokens
@@ -18,16 +22,43 @@ export type { ResolvedTokens } from './tokens/types';
 
 // Components
 export { Button } from './Button/Button';
-export type { ButtonProps, ButtonVariant, ButtonSize } from './Button/Button.types';
+export type { ButtonProps, ButtonVariant, ButtonSize, ButtonIconPosition } from './Button/Button.types';
 
 export { Card } from './Card/Card';
 export type { CardProps } from './Card/Card.types';
 
+export { Frame } from './Frame/Frame';
+export type {
+  FrameProps,
+  SpacingToken,
+  SpacingValue,
+  SpacingSides,
+  SpacingAxes,
+  PaddingProp,
+  GapAxes,
+  GapProp,
+  RadiusToken,
+  RadiusValue,
+  RadiusCorners,
+  RadiusProp,
+  SizingMode,
+  LayoutMode,
+  Direction,
+  Alignment,
+  Justification,
+} from './Frame/Frame.types';
+export type { ResolvedCorners } from './Frame/Frame.utils';
+
 export { TextInput } from './TextInput/TextInput';
 export type { TextInputProps } from './TextInput/TextInput.types';
 
+export { Popover } from './Popover/Popover';
+export type { PopoverProps, PopoverPlacement } from './Popover/Popover.types';
+export { usePopover } from './Popover/usePopover';
+
 export { Select } from './Select/Select';
-export type { SelectProps, SelectOption } from './Select/Select.types';
+export type { SelectProps, SelectOption, SelectOptionGroup, SelectItem } from './Select/Select.types';
+export { isOptionGroup } from './Select/Select.types';
 
 export { Toggle } from './Toggle/Toggle';
 export type { ToggleProps } from './Toggle/Toggle.types';
@@ -38,6 +69,43 @@ export type { SliderProps } from './Slider/Slider.types';
 export { HueSlider } from './HueSlider/HueSlider';
 export type { HueSliderProps } from './HueSlider/HueSlider.types';
 
+export { ColorScaleSlider } from './ColorScaleSlider/ColorScaleSlider';
+export type { ColorScaleSliderProps } from './ColorScaleSlider/ColorScaleSlider.types';
+
+export { Icon } from './Icon/Icon';
+export type { IconProps } from './Icon/Icon';
+
+export { AppShell } from './AppShell/AppShell';
+export type { AppShellProps } from './AppShell/AppShell.types';
+
+export { Sidebar } from './Sidebar/Sidebar';
+export type { SidebarProps } from './Sidebar/Sidebar.types';
+
+export { Navbar } from './Navbar/Navbar';
+export type { NavbarProps } from './Navbar/Navbar.types';
+
+// Component registry + code generation
+export type {
+  CategoryMeta,
+  VariantMeta,
+  EditableProp,
+  EditablePropOption,
+  ComponentMeta,
+} from './registry';
+export {
+  CATEGORIES,
+  COMPONENTS,
+  getComponent,
+  getCategory,
+  getComponentsByCategory,
+  generateComponentCode,
+} from './registry';
+
+// Fonts
+export { GOOGLE_FONTS, SYSTEM_FONTS } from './fonts/googleFonts';
+export type { GoogleFontEntry, SystemFontEntry } from './fonts/googleFonts';
+export { buildGoogleFontsUrl } from './fonts/buildGoogleFontsUrl';
+
 // Re-export core engine types for convenience
 export type {
   DynamicRange,