@newtonedev/components 0.1.0 → 0.1.1

package/src/HueSlider/HueSlider.styles.ts

@@ -2,12 +2,12 @@ import { StyleSheet } from 'react-native';
 import { srgbToHex } from 'newtone';
 import type { ResolvedTokens } from '../tokens/types';
 
-/** Rainbow gradient for hue slider track */
-const HUE_GRADIENT =
-  'linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)';
+const TRACK_HEIGHT = 22;
+export const THUMB_SIZE = 18;
+const SEGMENT_COUNT = 48;
 
-/** Convert an HSL hue (S=100%, L=50%) to a hex string for gradient stops. */
-function hueToHex(hue: number): string {
+/** Convert an HSL hue (S=100%, L=50%) to a hex string. */
+export function hueToHex(hue: number): string {
   const h = ((hue % 360) + 360) % 360;
   const x = 1 - Math.abs((h / 60) % 2 - 1);
   let r: number, g: number, b: number;
@@ -21,21 +21,19 @@ function hueToHex(hue: number): string {
   return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
 }
 
-function buildHueGradient(min: number, max: number): string {
-  if (min === 0 && max === 359) return HUE_GRADIENT;
-  const steps = 7;
-  const stops: string[] = [];
-  for (let i = 0; i <= steps; i++) {
-    const hue = min + (max - min) * (i / steps);
-    stops.push(hueToHex(hue));
-  }
-  return `linear-gradient(to right, ${stops.join(', ')})`;
+/** Build an array of hex colors for the gradient track segments. */
+export function buildHueSegments(min: number, max: number): string[] {
+  return Array.from({ length: SEGMENT_COUNT }, (_, i) => {
+    const hue = min + (max - min) * (i / (SEGMENT_COUNT - 1));
+    return hueToHex(hue);
+  });
 }
 
-export function getHueSliderStyles(tokens: ResolvedTokens) {
+export function getHueSliderStyles(tokens: ResolvedTokens, disabled: boolean) {
   return StyleSheet.create({
     container: {
-      gap: 4,
+      gap: tokens.spacing.xs,
+      opacity: disabled ? 0.5 : 1,
     },
     labelRow: {
       flexDirection: 'row',
@@ -43,35 +41,56 @@ export function getHueSliderStyles(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',
     },
-    sliderTrack: {
-      height: 22,
-      borderRadius: 11,
+    trackContainer: {
+      height: TRACK_HEIGHT + THUMB_SIZE,
+      justifyContent: 'center',
+      position: 'relative',
+    },
+    gradientTrack: {
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      height: TRACK_HEIGHT,
+      borderRadius: TRACK_HEIGHT / 2,
+      flexDirection: 'row',
       overflow: 'hidden',
     },
+    segment: {
+      flex: 1,
+    },
+    thumb: {
+      position: 'absolute',
+      width: THUMB_SIZE,
+      height: THUMB_SIZE,
+      borderRadius: THUMB_SIZE / 2,
+      backgroundColor: '#ffffff',
+      borderWidth: 2,
+      borderColor: srgbToHex(tokens.border.srgb),
+    },
   });
 }
-
-export function getHueSliderInputStyle(
-  disabled: boolean,
-  min: number = 0,
-  max: number = 359,
-): React.CSSProperties {
-  return {
-    width: '100%',
-    height: 22,
-    borderRadius: 11,
-    cursor: disabled ? 'default' : 'pointer',
-    opacity: disabled ? 0.5 : 1,
-    background: buildHueGradient(min, max),
-    appearance: 'auto' as const,
-  };
-}

package/src/HueSlider/HueSlider.tsx

@@ -1,8 +1,12 @@
 import React from 'react';
-import { View, Text } from 'react-native';
+import { View, Text, TextInput, PanResponder } from 'react-native';
 import type { HueSliderProps } from './HueSlider.types';
 import { useTokens } from '../tokens/useTokens';
-import { getHueSliderStyles, getHueSliderInputStyle } from './HueSlider.styles';
+import {
+  getHueSliderStyles,
+  buildHueSegments,
+  THUMB_SIZE,
+} from './HueSlider.styles';
 
 /**
  * Hue slider with rainbow gradient track.
@@ -21,50 +25,118 @@ export function HueSlider({
   max = 359,
   label,
   showValue = false,
+  editableValue = false,
   disabled = false,
   style,
 }: HueSliderProps) {
   const tokens = useTokens(1);
 
   const styles = React.useMemo(
-    () => getHueSliderStyles(tokens),
-    [tokens]
+    () => getHueSliderStyles(tokens, disabled),
+    [tokens, disabled]
   );
 
-  const inputStyle = React.useMemo(
-    () => getHueSliderInputStyle(disabled, min, max),
-    [disabled, min, max]
+  const segments = React.useMemo(
+    () => buildHueSegments(min, max),
+    [min, max]
   );
 
-  // For wrapping ranges (max > 359), convert stored value to slider range.
-  const sliderValue = (max > 359 && value < min) ? value + 360 : value;
+  const trackRef = React.useRef<View>(null);
+  const trackWidth = React.useRef(0);
+  const trackPageX = React.useRef(0);
 
-  const handleChange = React.useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      const raw = Number(e.target.value);
-      onValueChange(((raw % 360) + 360) % 360);
+  // Mutable refs to avoid stale closures in PanResponder
+  const onValueChangeRef = React.useRef(onValueChange);
+  const minRef = React.useRef(min);
+  const maxRef = React.useRef(max);
+  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(() => { disabledRef.current = disabled; }, [disabled]);
+
+  const computeHue = 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);
+    return ((stepped % 360) + 360) % 360;
+  }, []);
+
+  const panResponder = React.useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => !disabledRef.current,
+      onMoveShouldSetPanResponder: () => !disabledRef.current,
+      onPanResponderGrant: (evt) => {
+        onValueChangeRef.current(computeHue(evt.nativeEvent.pageX));
+      },
+      onPanResponderMove: (_evt, gestureState) => {
+        onValueChangeRef.current(computeHue(gestureState.moveX));
+      },
+    })
+  ).current;
+
+  // For wrapping ranges (max > 359), convert stored value to slider range
+  const sliderValue = max > 359 && value < min ? value + 360 : value;
+  const ratio = max > min ? (sliderValue - min) / (max - min) : 0;
+  const usableWidth = Math.max(0, trackWidth.current - THUMB_SIZE);
+  const thumbLeft = ratio * usableWidth;
+
+  const handleValueTextSubmit = React.useCallback(
+    (text: string) => {
+      const raw = Number(text);
+      if (!Number.isNaN(raw)) {
+        onValueChange(((raw % 360) + 360) % 360);
+      }
     },
     [onValueChange]
   );
 
+  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={1}
-        value={sliderValue}
-        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.gradientTrack}>
+          {segments.map((color, i) => (
+            <View key={i} style={[styles.segment, { backgroundColor: color }]} />
+          ))}
+        </View>
+        <View style={[styles.thumb, { left: thumbLeft }]} />
+      </View>
     </View>
   );
 }

package/src/HueSlider/HueSlider.types.ts

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

package/src/Icon/Icon.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { Text, type ViewStyle, type TextStyle } from 'react-native';
+import { srgbToHex } from 'newtone';
+import { useTokens } from '../tokens/useTokens';
+import type { ElevationLevel } from '../theme/types';
+
+export interface IconProps {
+  /** Icon ligature name (e.g., 'home', 'settings', 'check') */
+  readonly name: string;
+  /** Font size in pixels (default: tokens.typography.size.base) */
+  readonly size?: number;
+  /** Optical size for variable font axis (default: same as size) */
+  readonly opticalSize?: number;
+  /** Fill state: 0=outlined, 1=filled (default: 0) */
+  readonly fill?: 0 | 1;
+  /** Icon color as hex string (default: tokens.textPrimary) */
+  readonly color?: string;
+  /** Elevation level for token computation (default: 1) */
+  readonly elevation?: ElevationLevel;
+  /** Additional styles */
+  readonly style?: ViewStyle;
+  /** Press handler */
+  readonly onPress?: () => void;
+}
+
+/**
+ * Material Symbols icon component with variable font support.
+ *
+ * Uses global icon configuration (variant, weight, auto-grade) from theme config,
+ * with per-instance control over size, fill, and color.
+ *
+ * @example
+ * ```tsx
+ * <Icon name="home" />
+ * <Icon name="settings" size={24} fill={1} />
+ * <Icon name="check" color="#00ff00" />
+ * ```
+ */
+export function Icon({
+  name,
+  size,
+  opticalSize,
+  fill = 0,
+  color,
+  elevation = 1,
+  style,
+  onPress,
+}: IconProps) {
+  const tokens = useTokens(elevation);
+
+  const fontSize = size ?? tokens.typography.size.base;
+  const opsz = opticalSize ?? fontSize;
+  const iconColor = color ?? srgbToHex(tokens.textPrimary.srgb);
+
+  // Font family varies by variant: 'Material Symbols Rounded', etc.
+  const fontFamily = `Material Symbols ${tokens.icons.variant.charAt(0).toUpperCase() + tokens.icons.variant.slice(1)}`;
+
+  // Font variation settings for Material Symbols variable font
+  const fontVariationSettings = `'FILL' ${fill}, 'wght' ${tokens.icons.weight}, 'GRAD' ${tokens.icons.grade}, 'opsz' ${opsz}`;
+
+  return (
+    <Text
+      style={{
+        fontFamily,
+        fontSize,
+        color: iconColor,
+        userSelect: 'none',
+        fontVariationSettings,
+        ...style,
+      } as TextStyle}
+      onPress={onPress}
+    >
+      {name}
+    </Text>
+  );
+}

package/src/Navbar/Navbar.styles.ts

@@ -0,0 +1,37 @@
+import { StyleSheet } from 'react-native';
+import { srgbToHex } from 'newtone';
+import type { ResolvedTokens } from '../tokens/types';
+
+interface NavbarStyleInput {
+  readonly tokens: ResolvedTokens;
+  readonly height: number;
+  readonly bordered: boolean;
+}
+
+export function getNavbarStyles({ tokens, height, bordered }: NavbarStyleInput) {
+  const borderColor = srgbToHex(tokens.border.srgb);
+
+  return StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      height,
+      flexShrink: 0,
+      paddingHorizontal: 24,
+      backgroundColor: srgbToHex(tokens.background.srgb),
+      borderBottomWidth: bordered ? 1 : 0,
+      borderBottomColor: borderColor,
+    },
+    left: {
+      flex: 1,
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    right: {
+      flex: 1,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'flex-end',
+    },
+  });
+}

package/src/Navbar/Navbar.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { NavbarProps } from './Navbar.types';
+import { useTokens } from '../tokens/useTokens';
+import { getNavbarStyles } from './Navbar.styles';
+
+export function Navbar({
+  children,
+  left,
+  right,
+  height = 56,
+  bordered = true,
+}: NavbarProps) {
+  const tokens = useTokens();
+  const styles = React.useMemo(
+    () => getNavbarStyles({ tokens, height, bordered }),
+    [tokens, height, bordered]
+  );
+
+  return (
+    <View style={styles.container}>
+      {children ? (
+        children
+      ) : (
+        <>
+          <View style={styles.left}>{left}</View>
+          <View style={styles.right}>{right}</View>
+        </>
+      )}
+    </View>
+  );
+}

package/src/Navbar/Navbar.types.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+
+export interface NavbarProps {
+  /** Full control mode — renders children directly */
+  readonly children?: ReactNode;
+  /** Left slot (e.g., page title, breadcrumbs) */
+  readonly left?: ReactNode;
+  /** Right slot (e.g., actions, user menu) */
+  readonly right?: ReactNode;
+  /** Navbar height in pixels. @default 56 */
+  readonly height?: number;
+  /** Show bottom border. @default true */
+  readonly bordered?: boolean;
+}

package/src/Navbar/index.ts

@@ -0,0 +1,2 @@
+export { Navbar } from './Navbar';
+export type { NavbarProps } from './Navbar.types';

package/src/Popover/Popover.styles.ts

@@ -0,0 +1,39 @@
+import { StyleSheet } from 'react-native';
+import { srgbToHex } from 'newtone';
+import type { ResolvedTokens } from '../tokens/types';
+
+export function getPopoverStyles(
+  tokens: ResolvedTokens,
+  triggerHeight: number,
+  offset: number,
+  maxHeight: number,
+  width: 'trigger' | 'auto' | number,
+  isOpen: boolean
+) {
+  const widthStyle =
+    width === 'trigger'
+      ? { left: 0 as const, right: 0 as const }
+      : typeof width === 'number'
+        ? { width, left: 0 as const }
+        : { left: 0 as const };
+
+  return StyleSheet.create({
+    container: {
+      position: 'relative',
+      zIndex: isOpen ? 999 : 1,
+    },
+    content: {
+      position: 'absolute',
+      top: triggerHeight + offset,
+      ...widthStyle,
+      backgroundColor: srgbToHex(tokens.backgroundElevated.srgb),
+      borderWidth: 1,
+      borderColor: srgbToHex(tokens.border.srgb),
+      borderRadius: tokens.radius.md,
+      maxHeight,
+      zIndex: 1000,
+      overflow: 'hidden',
+      ...({ boxShadow: '0 4px 12px rgba(0,0,0,0.15)' } as any),
+    },
+  });
+}

package/src/Popover/Popover.tsx

@@ -0,0 +1,103 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { View } from 'react-native';
+import type { PopoverProps } from './Popover.types';
+import { useTokens } from '../tokens/useTokens';
+import { getPopoverStyles } from './Popover.styles';
+
+// Module-level: set of close callbacks for all open Popovers.
+// Opening one Popover automatically closes all others.
+const openPopovers = new Set<() => void>();
+
+export function Popover({
+  isOpen,
+  onClose,
+  trigger,
+  children,
+  width = 'trigger',
+  maxHeight = 240,
+  offset = 4,
+  closeOnEscape = true,
+  style,
+  contentStyle,
+}: PopoverProps) {
+  const tokens = useTokens(1);
+  const containerRef = useRef<View>(null);
+  const [triggerHeight, setTriggerHeight] = useState(0);
+
+  const onTriggerLayout = useCallback(
+    (e: { nativeEvent: { layout: { height: number } } }) => {
+      setTriggerHeight(e.nativeEvent.layout.height);
+    },
+    []
+  );
+
+  // Mutual exclusion: opening this Popover closes all others
+  useEffect(() => {
+    if (!isOpen) return;
+    openPopovers.forEach((closeFn) => closeFn());
+    openPopovers.clear();
+    openPopovers.add(onClose);
+    return () => {
+      openPopovers.delete(onClose);
+    };
+  }, [isOpen, onClose]);
+
+  // Click-outside: capture phase so RNW Pressable can't swallow the event
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleMouseDown = (e: MouseEvent) => {
+      const node = containerRef.current as unknown as HTMLElement;
+      if (node && !node.contains(e.target as Node)) {
+        onClose();
+      }
+    };
+    document.addEventListener('mousedown', handleMouseDown, true);
+    return () => document.removeEventListener('mousedown', handleMouseDown, true);
+  }, [isOpen, onClose]);
+
+  const handleKeyDown = useCallback(
+    (e: any) => {
+      if (closeOnEscape && e.key === 'Escape') {
+        e.stopPropagation();
+        onClose();
+      }
+    },
+    [closeOnEscape, onClose]
+  );
+
+  const styles = useMemo(
+    () => getPopoverStyles(tokens, triggerHeight, offset, maxHeight, width, isOpen),
+    [tokens, triggerHeight, offset, maxHeight, width, isOpen]
+  );
+
+  const containerStyles = useMemo(
+    () => [styles.container, ...(Array.isArray(style) ? style : style ? [style] : [])],
+    [styles.container, style]
+  );
+
+  const mergedContentStyles = useMemo(
+    () => [styles.content, ...(Array.isArray(contentStyle) ? contentStyle : contentStyle ? [contentStyle] : [])],
+    [styles.content, contentStyle]
+  );
+
+  // onKeyDown is a web-only prop supported by react-native-web but not in RN types
+  const webProps = { onKeyDown: handleKeyDown } as any;
+
+  return (
+    <View
+      ref={containerRef}
+      style={containerStyles}
+      {...webProps}
+    >
+      <View onLayout={onTriggerLayout}>
+        {trigger}
+      </View>
+
+      {isOpen && (
+        <View style={mergedContentStyles}>
+          {children}
+        </View>
+      )}
+    </View>
+  );
+}

package/src/Popover/Popover.types.ts

@@ -0,0 +1,40 @@
+import type { ViewStyle } from 'react-native';
+
+export type PopoverPlacement = 'bottom' | 'top';
+
+export interface PopoverProps {
+  /** Whether the popover is currently open (controlled) */
+  readonly isOpen: boolean;
+  /** Callback when popover should close */
+  readonly onClose: () => void;
+  /** The trigger element — rendered always, popover content appears relative to it */
+  readonly trigger: React.ReactNode;
+  /** The popover content — rendered only when isOpen is true */
+  readonly children: React.ReactNode;
+  /** Preferred placement relative to trigger. @default 'bottom' */
+  readonly placement?: PopoverPlacement;
+  /** Width behavior: 'trigger' matches trigger width, 'auto' uses content width, number is fixed px. @default 'trigger' */
+  readonly width?: 'trigger' | 'auto' | number;
+  /** Maximum height for content area. @default 240 */
+  readonly maxHeight?: number;
+  /** Gap between trigger and content in px. @default 4 */
+  readonly offset?: number;
+  /** Whether pressing Escape closes the popover. @default true */
+  readonly closeOnEscape?: boolean;
+  /** Container style override */
+  readonly style?: ViewStyle | ViewStyle[];
+  /** Content container style override */
+  readonly contentStyle?: ViewStyle | ViewStyle[];
+}
+
+export interface UsePopoverOptions {
+  readonly initialOpen?: boolean;
+  readonly onOpenChange?: (isOpen: boolean) => void;
+}
+
+export interface UsePopoverReturn {
+  readonly isOpen: boolean;
+  readonly open: () => void;
+  readonly close: () => void;
+  readonly toggle: () => void;
+}

package/src/Popover/index.ts

@@ -0,0 +1,3 @@
+export { Popover } from './Popover';
+export type { PopoverProps, PopoverPlacement, UsePopoverOptions, UsePopoverReturn } from './Popover.types';
+export { usePopover } from './usePopover';

package/src/Popover/usePopover.ts

@@ -0,0 +1,26 @@
+import { useCallback, useState } from 'react';
+import type { UsePopoverOptions, UsePopoverReturn } from './Popover.types';
+
+export function usePopover(options?: UsePopoverOptions): UsePopoverReturn {
+  const [isOpen, setIsOpen] = useState(options?.initialOpen ?? false);
+
+  const open = useCallback(() => {
+    setIsOpen(true);
+    options?.onOpenChange?.(true);
+  }, [options]);
+
+  const close = useCallback(() => {
+    setIsOpen(false);
+    options?.onOpenChange?.(false);
+  }, [options]);
+
+  const toggle = useCallback(() => {
+    setIsOpen((prev) => {
+      const next = !prev;
+      options?.onOpenChange?.(next);
+      return next;
+    });
+  }, [options]);
+
+  return { isOpen, open, close, toggle };
+}