@newtonedev/components 0.1.0 → 0.1.2

package/src/Button/Button.tsx

@@ -3,9 +3,10 @@ import { Pressable, Text } from 'react-native';
 import type { ButtonProps } from './Button.types';
 import { useTokens } from '../tokens/useTokens';
 import { getButtonStyles } from './Button.styles';
+import { Icon } from '../Icon/Icon';
 
 /**
- * Button component with support for multiple variants and sizes.
+ * Button component with support for multiple variants, sizes, and optional icons.
  *
  * Automatically adapts to the current theme and mode from NewtoneProvider.
  *
@@ -18,13 +19,20 @@ import { getButtonStyles } from './Button.styles';
  *
  * @example
  * ```tsx
- * <Button variant="outline" size="lg" disabled>
- *   Disabled button
+ * <Button icon="add" variant="primary" onPress={handleAdd}>
+ *   New Item
  * </Button>
  * ```
+ *
+ * @example
+ * ```tsx
+ * <Button icon="delete" variant="ghost" size="sm" onPress={handleDelete} />
+ * ```
  */
 export function Button({
   children,
+  icon,
+  iconPosition = 'left',
   variant = 'primary',
   size = 'md',
   disabled = false,
@@ -32,11 +40,16 @@ export function Button({
   textStyle,
   ...pressableProps
 }: ButtonProps) {
-  const tokens = useTokens(1); // Default elevation
+  const tokens = useTokens(1);
+  const isIconOnly = !!icon && !children;
+
+  const { styles, iconColor, iconSize } = React.useMemo(
+    () => getButtonStyles(tokens, variant, size, disabled, isIconOnly),
+    [tokens, variant, size, disabled, isIconOnly]
+  );
 
-  const styles = React.useMemo(
-    () => getButtonStyles(tokens, variant, size, disabled),
-    [tokens, variant, size, disabled]
+  const renderIcon = () => (
+    <Icon name={icon!} size={iconSize} color={iconColor} />
   );
 
   return (
@@ -51,16 +64,22 @@ export function Button({
       {...pressableProps}
     >
       {({ pressed }) => (
-        <Text
-          style={[
-            styles.text,
-            pressed && !disabled && styles.textPressed,
-            disabled && styles.textDisabled,
-            ...(Array.isArray(textStyle) ? textStyle : [textStyle]),
-          ]}
-        >
-          {children}
-        </Text>
+        <>
+          {icon && iconPosition === 'left' && renderIcon()}
+          {children != null && (
+            <Text
+              style={[
+                styles.text,
+                pressed && !disabled && styles.textPressed,
+                disabled && styles.textDisabled,
+                ...(Array.isArray(textStyle) ? textStyle : [textStyle]),
+              ]}
+            >
+              {children}
+            </Text>
+          )}
+          {icon && iconPosition === 'right' && renderIcon()}
+        </>
       )}
     </Pressable>
   );

package/src/Button/Button.types.ts

@@ -10,14 +10,32 @@ export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'outline';
  */
 export type ButtonSize = 'sm' | 'md' | 'lg';
 
+/**
+ * Icon position relative to button text
+ */
+export type ButtonIconPosition = 'left' | 'right';
+
 /**
  * Props for the Button component
  */
 export interface ButtonProps extends Omit<PressableProps, 'children' | 'style'> {
   /**
-   * Button text or custom content
+   * Button text or custom content.
+   * Optional when `icon` is provided (renders icon-only button).
+   */
+  readonly children?: React.ReactNode;
+
+  /**
+   * Material Symbol icon name (e.g. 'add', 'delete', 'check').
+   * When provided without children, renders an icon-only button.
+   */
+  readonly icon?: string;
+
+  /**
+   * Position of the icon relative to text
+   * @default 'left'
    */
-  readonly children: React.ReactNode;
+  readonly iconPosition?: ButtonIconPosition;
 
   /**
    * Visual variant

package/src/Card/Card.styles.ts

@@ -8,8 +8,8 @@ export function getCardStyles(tokens: ResolvedTokens, disabled: boolean) {
       backgroundColor: srgbToHex(tokens.background.srgb),
       borderWidth: 1,
       borderColor: srgbToHex(tokens.border.srgb),
-      borderRadius: 8,
-      padding: 16,
+      borderRadius: tokens.radius.lg,
+      padding: tokens.spacing.lg,
       opacity: disabled ? 0.5 : 1,
     },
   });

package/src/ColorScaleSlider/ColorScaleSlider.styles.ts

@@ -0,0 +1,60 @@
+import { StyleSheet } from 'react-native';
+import { srgbToHex } from 'newtone';
+import type { ResolvedTokens } from '../tokens/types';
+
+const TRACK_HEIGHT = 22;
+export const THUMB_SIZE = 18;
+
+export function getColorScaleSliderStyles(tokens: ResolvedTokens, disabled: boolean) {
+  return StyleSheet.create({
+    container: {
+      gap: tokens.spacing.xs,
+      opacity: disabled ? 0.5 : 1,
+    },
+    labelRow: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+    },
+    label: {
+      fontFamily: tokens.typography.fonts.default,
+      fontSize: tokens.typography.size.sm,
+      fontWeight: tokens.typography.weight.semibold as any,
+      color: srgbToHex(tokens.textSecondary.srgb),
+    },
+    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),
+    },
+    warning: {
+      fontFamily: tokens.typography.fonts.default,
+      fontSize: tokens.typography.size.xs,
+      fontWeight: tokens.typography.weight.medium as any,
+      color: srgbToHex(tokens.error.srgb),
+    },
+  });
+}
+
+export { TRACK_HEIGHT };

package/src/ColorScaleSlider/ColorScaleSlider.tsx

@@ -0,0 +1,156 @@
+import React from 'react';
+import { View, Text, PanResponder, Animated } from 'react-native';
+import { srgbToHex } from 'newtone';
+import type { ColorScaleSliderProps } from './ColorScaleSlider.types';
+import { useTokens } from '../tokens/useTokens';
+import { getColorScaleSliderStyles, THUMB_SIZE } from './ColorScaleSlider.styles';
+
+/**
+ * Interactive color scale slider.
+ *
+ * Renders an array of colors as the track (lightest on left, darkest on right)
+ * with a draggable thumb. The value is a normalizedValue [0, 1] where
+ * 0 = darkest (right) and 1 = lightest (left).
+ *
+ * Used by PalettePanel for key color selection on non-neutral palettes.
+ */
+export function ColorScaleSlider({
+  colors,
+  value,
+  onValueChange,
+  label,
+  warning,
+  trimEnds = false,
+  snap = false,
+  disabled = false,
+  animateValue = false,
+  style,
+}: ColorScaleSliderProps) {
+  const tokens = useTokens(1);
+
+  const styles = React.useMemo(
+    () => getColorScaleSliderStyles(tokens, disabled),
+    [tokens, disabled]
+  );
+
+  const trackRef = React.useRef<View>(null);
+  const trackWidth = React.useRef(0);
+  const trackPageX = React.useRef(0);
+  const isDragging = React.useRef(false);
+  const thumbAnim = React.useRef(new Animated.Value(0)).current;
+
+  // Mutable refs to avoid stale closures in PanResponder
+  const onValueChangeRef = React.useRef(onValueChange);
+  const disabledRef = React.useRef(disabled);
+  const colorsLengthRef = React.useRef(colors.length);
+  const trimEndsRef = React.useRef(trimEnds);
+  const snapRef = React.useRef(snap);
+
+  React.useEffect(() => { onValueChangeRef.current = onValueChange; }, [onValueChange]);
+  React.useEffect(() => { disabledRef.current = disabled; }, [disabled]);
+  React.useEffect(() => { colorsLengthRef.current = colors.length; }, [colors.length]);
+  React.useEffect(() => { trimEndsRef.current = trimEnds; }, [trimEnds]);
+  React.useEffect(() => { snapRef.current = snap; }, [snap]);
+
+  const computeNv = React.useCallback((pageX: number) => {
+    const localX = pageX - trackPageX.current;
+    const ratio = Math.min(1, Math.max(0, localX / trackWidth.current));
+    const totalSteps = colorsLengthRef.current - 1;
+    const minNV = trimEndsRef.current ? 1 / totalSteps : 0;
+    const maxNV = trimEndsRef.current ? 1 - 1 / totalSteps : 1;
+    const range = maxNV - minNV;
+
+    // Left = lightest (maxNV), right = darkest (minNV)
+    let nv = maxNV - ratio * range;
+
+    if (snapRef.current && totalSteps > 0) {
+      const stepNv = 1 / totalSteps;
+      nv = Math.round(nv / stepNv) * stepNv;
+      nv = Math.min(maxNV, Math.max(minNV, nv));
+    }
+
+    return nv;
+  }, []);
+
+  const panResponder = React.useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => !disabledRef.current,
+      onMoveShouldSetPanResponder: () => !disabledRef.current,
+      onPanResponderGrant: (evt) => {
+        isDragging.current = true;
+        onValueChangeRef.current(computeNv(evt.nativeEvent.pageX));
+      },
+      onPanResponderMove: (_evt, gestureState) => {
+        onValueChangeRef.current(computeNv(gestureState.moveX));
+      },
+      onPanResponderRelease: () => {
+        isDragging.current = false;
+      },
+      onPanResponderTerminate: () => {
+        isDragging.current = false;
+      },
+    })
+  ).current;
+
+  // Visible colors: trim interpolation endpoints if requested
+  const visibleColors = trimEnds ? colors.slice(1, -1) : colors;
+
+  // Thumb position mapped to the visible range
+  const totalSteps = colors.length - 1;
+  const minNV = trimEnds ? 1 / totalSteps : 0;
+  const maxNV = trimEnds ? 1 - 1 / totalSteps : 1;
+  const range = maxNV - minNV;
+  const clampedValue = value !== undefined
+    ? Math.min(maxNV, Math.max(minNV, value))
+    : (maxNV + minNV) / 2;
+  const ratio = range > 0 ? (maxNV - clampedValue) / range : 0.5;
+  const usableWidth = Math.max(0, trackWidth.current - THUMB_SIZE);
+  const thumbLeft = ratio * usableWidth;
+
+  // Sync animated thumb position: animate on prop-driven changes, instant during drag
+  React.useEffect(() => {
+    if (isDragging.current || !animateValue) {
+      thumbAnim.setValue(thumbLeft);
+    } else {
+      Animated.timing(thumbAnim, {
+        toValue: thumbLeft,
+        duration: 300,
+        useNativeDriver: false,
+      }).start();
+    }
+  }, [thumbLeft, animateValue, thumbAnim]);
+
+  return (
+    <View style={[styles.container, ...(Array.isArray(style) ? style : [style])]}>
+      {label && (
+        <View style={styles.labelRow}>
+          <Text style={styles.label}>{label}</Text>
+        </View>
+      )}
+      <View
+        ref={trackRef}
+        style={styles.trackContainer}
+        onLayout={(e) => {
+          trackWidth.current = e.nativeEvent.layout.width;
+          // Set thumb position immediately on layout (no animation)
+          const newUsableWidth = Math.max(0, e.nativeEvent.layout.width - THUMB_SIZE);
+          thumbAnim.setValue(ratio * newUsableWidth);
+          trackRef.current?.measure((_x, _y, _w, _h, pageX) => {
+            if (pageX != null) trackPageX.current = pageX;
+          });
+        }}
+        {...panResponder.panHandlers}
+      >
+        <View style={styles.gradientTrack}>
+          {visibleColors.map((color, i) => (
+            <View key={i} style={[styles.segment, { backgroundColor: srgbToHex(color.srgb) }]} />
+          ))}
+        </View>
+        <Animated.View style={[styles.thumb, { left: thumbAnim }]} />
+      </View>
+      {warning && (
+        <Text style={styles.warning}>{warning}</Text>
+      )}
+    </View>
+  );
+}

package/src/ColorScaleSlider/ColorScaleSlider.types.ts

@@ -0,0 +1,25 @@
+import type { ViewStyle } from 'react-native';
+import type { ColorResult } from 'newtone';
+
+export interface ColorScaleSliderProps {
+  /** Preview colors for the track (index 0 = lightest, last = darkest) */
+  readonly colors: readonly ColorResult[];
+  /** Current normalizedValue [0, 1] (0 = darkest, 1 = lightest) */
+  readonly value?: number;
+  /** Called when the user drags the thumb */
+  readonly onValueChange: (normalizedValue: number) => void;
+  /** Optional label text above the slider */
+  readonly label?: string;
+  /** WCAG warning text shown below the slider */
+  readonly warning?: string;
+  /** Hide the first and last colors (interpolation endpoints, not selectable) */
+  readonly trimEnds?: boolean;
+  /** Snap thumb to the nearest color step instead of continuous dragging */
+  readonly snap?: boolean;
+  /** Whether the slider is disabled */
+  readonly disabled?: boolean;
+  /** Animate thumb position on prop-driven value changes (e.g., mode switch). Default: false */
+  readonly animateValue?: boolean;
+  /** Optional style override */
+  readonly style?: ViewStyle | ViewStyle[];
+}

package/src/ColorScaleSlider/index.ts

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

package/src/Frame/Frame.styles.ts

@@ -0,0 +1,213 @@
+import type { ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native';
+import { srgbToHex } from 'newtone';
+import type { ResolvedTokens } from '../tokens/types';
+import type { FrameElevation } from '../theme/types';
+import type {
+  PaddingProp,
+  GapProp,
+  SizingMode,
+  Direction,
+  Alignment,
+  Justification,
+  RadiusProp,
+  LayoutMode,
+} from './Frame.types';
+import {
+  resolvePadding,
+  resolveGap,
+  resolveSizing,
+  resolveFlexDirection,
+  resolveAlignment,
+  resolveJustification,
+  resolveRadiusCorners,
+  hasPositiveRadius,
+} from './Frame.utils';
+
+// ── Input ────────────────────────────────────────────────────────
+
+export interface FrameStyleInput {
+  readonly tokens: ResolvedTokens;
+  readonly frameElevation: FrameElevation;
+
+  // Layout
+  readonly layout?: LayoutMode;
+  readonly direction?: Direction;
+  readonly wrap?: boolean;
+  readonly reverse?: boolean;
+  readonly columns?: number;
+  readonly rows?: number;
+
+  // Alignment
+  readonly align?: Alignment;
+  readonly justify?: Justification;
+
+  // Spacing
+  readonly padding?: PaddingProp;
+  readonly gap?: GapProp;
+
+  // Sizing
+  readonly width?: SizingMode;
+  readonly height?: SizingMode;
+  readonly minWidth?: number;
+  readonly maxWidth?: number;
+  readonly minHeight?: number;
+  readonly maxHeight?: number;
+
+  // Appearance
+  readonly radius?: RadiusProp;
+  readonly bordered?: boolean;
+  readonly disabled?: boolean;
+}
+
+// ── Output ───────────────────────────────────────────────────────
+
+export interface FrameStyles {
+  /** Main container style (ViewStyle) */
+  readonly container: ViewStyle;
+  /** Style applied when pressed (background shift) */
+  readonly pressed: ViewStyle;
+  /** Web-only CSS Grid properties (cast to ViewStyle at render) */
+  readonly gridWebStyle: React.CSSProperties | null;
+  /** Web-only inset box-shadow string for elevation -2 */
+  readonly insetBoxShadow: string | null;
+}
+
+// ── Builder ──────────────────────────────────────────────────────
+
+export function getFrameStyles(input: FrameStyleInput): FrameStyles {
+  const {
+    tokens,
+    frameElevation,
+    layout = 'flex',
+    direction = 'vertical',
+    wrap = false,
+    reverse = false,
+    columns,
+    rows,
+    align,
+    justify,
+    padding,
+    gap,
+    width,
+    height,
+    minWidth,
+    maxWidth,
+    minHeight,
+    maxHeight,
+    radius,
+    bordered = false,
+    disabled = false,
+  } = input;
+
+  const container: Record<string, unknown> = {};
+
+  // ── Background & foreground ──
+  container.backgroundColor = srgbToHex(tokens.background.srgb);
+  container.color = srgbToHex(tokens.textPrimary.srgb);
+
+  // ── Layout mode ──
+  if (layout === 'flex') {
+    container.display = 'flex';
+    container.flexDirection = resolveFlexDirection(direction, reverse);
+    if (wrap) container.flexWrap = 'wrap';
+  }
+  // Grid: set flex as RN fallback; actual grid applied via gridWebStyle
+  if (layout === 'grid') {
+    container.display = 'flex';
+    container.flexDirection = 'row';
+    container.flexWrap = 'wrap';
+  }
+
+  // ── Alignment ──
+  if (align) container.alignItems = resolveAlignment(align);
+  if (justify) container.justifyContent = resolveJustification(justify);
+
+  // ── Padding ──
+  if (padding !== undefined) {
+    const p = resolvePadding(padding, tokens);
+    container.paddingTop = p.top;
+    container.paddingRight = p.right;
+    container.paddingBottom = p.bottom;
+    container.paddingLeft = p.left;
+  }
+
+  // ── Gap ──
+  if (gap !== undefined) {
+    const g = resolveGap(gap, tokens);
+    container.rowGap = g.rowGap;
+    container.columnGap = g.columnGap;
+  }
+
+  // ── Sizing ──
+  const sizing = resolveSizing(width, height);
+  Object.assign(container, sizing);
+
+  // ── Constraints ──
+  if (minWidth !== undefined) container.minWidth = minWidth;
+  if (maxWidth !== undefined) container.maxWidth = maxWidth;
+  if (minHeight !== undefined) container.minHeight = minHeight;
+  if (maxHeight !== undefined) container.maxHeight = maxHeight;
+
+  // ── Radius ──
+  if (radius !== undefined) {
+    const corners = resolveRadiusCorners(radius, tokens);
+    container.borderTopLeftRadius = corners.topLeft;
+    container.borderTopRightRadius = corners.topRight;
+    container.borderBottomLeftRadius = corners.bottomLeft;
+    container.borderBottomRightRadius = corners.bottomRight;
+
+    // Auto-clip when any corner has radius
+    if (hasPositiveRadius(corners)) {
+      container.overflow = 'hidden';
+    }
+  }
+
+  // ── Border ──
+  if (bordered) {
+    container.borderWidth = 1;
+    container.borderColor = srgbToHex(tokens.border.srgb);
+  }
+
+  // ── Outer shadow (elevation 2) ──
+  if (frameElevation === 2) {
+    container.shadowColor = '#000';
+    container.shadowOffset = { width: 0, height: 2 };
+    container.shadowOpacity = 0.12;
+    container.shadowRadius = 6;
+    // Android elevation prop (react-native-web maps to box-shadow)
+    container.elevation = 4;
+  }
+
+  // ── Disabled ──
+  if (disabled) {
+    container.opacity = 0.5;
+  }
+
+  // ── Pressed state (background shift to sunken) ──
+  const pressed = StyleSheet.create({
+    s: { backgroundColor: srgbToHex(tokens.backgroundSunken.srgb) },
+  }).s;
+
+  // ── Grid web style ──
+  let gridWebStyle: React.CSSProperties | null = null;
+  if (layout === 'grid') {
+    gridWebStyle = {
+      display: 'grid' as const,
+      gridTemplateColumns: columns ? `repeat(${columns}, 1fr)` : undefined,
+      gridTemplateRows: rows ? `repeat(${rows}, 1fr)` : undefined,
+    };
+  }
+
+  // ── Inset shadow (elevation -2) ──
+  const insetBoxShadow = frameElevation === -2
+    ? 'inset 0 2px 4px rgba(0,0,0,0.12)'
+    : null;
+
+  return {
+    container: StyleSheet.create({ c: container as ViewStyle }).c,
+    pressed,
+    gridWebStyle,
+    insetBoxShadow,
+  };
+}