@newtonedev/components 0.1.0

package/src/Card/Card.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { CardProps } from './Card.types';
+import { useTokens } from '../tokens/useTokens';
+import { getCardStyles } from './Card.styles';
+
+export function Card({
+  children,
+  elevation = 1,
+  style,
+  disabled = false,
+}: CardProps) {
+  const tokens = useTokens(elevation);
+
+  const styles = React.useMemo(
+    () => getCardStyles(tokens, disabled),
+    [tokens, disabled]
+  );
+
+  return (
+    <View style={[styles.container, ...(Array.isArray(style) ? style : [style])]}>
+      {children}
+    </View>
+  );
+}

package/src/Card/Card.types.ts

@@ -0,0 +1,9 @@
+import type { ViewStyle } from 'react-native';
+import type { ElevationLevel } from '../theme/types';
+
+export interface CardProps {
+  readonly children: React.ReactNode;
+  readonly elevation?: ElevationLevel;
+  readonly style?: ViewStyle | ViewStyle[];
+  readonly disabled?: boolean;
+}

package/src/Card/index.ts

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

package/src/HueSlider/HueSlider.styles.ts

@@ -0,0 +1,77 @@
+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)';
+
+/** Convert an HSL hue (S=100%, L=50%) to a hex string for gradient stops. */
+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;
+  if (h < 60) { r = 1; g = x; b = 0; }
+  else if (h < 120) { r = x; g = 1; b = 0; }
+  else if (h < 180) { r = 0; g = 1; b = x; }
+  else if (h < 240) { r = 0; g = x; b = 1; }
+  else if (h < 300) { r = x; g = 0; b = 1; }
+  else { r = 1; g = 0; b = x; }
+  const toHex = (v: number) => Math.round(v * 255).toString(16).padStart(2, '0');
+  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(', ')})`;
+}
+
+export function getHueSliderStyles(tokens: ResolvedTokens) {
+  return StyleSheet.create({
+    container: {
+      gap: 4,
+    },
+    labelRow: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+    },
+    label: {
+      fontSize: 12,
+      fontWeight: '600',
+      color: srgbToHex(tokens.textSecondary.srgb),
+    },
+    value: {
+      fontSize: 12,
+      fontWeight: '500',
+      color: srgbToHex(tokens.textPrimary.srgb),
+    },
+    sliderTrack: {
+      height: 22,
+      borderRadius: 11,
+      overflow: 'hidden',
+    },
+  });
+}
+
+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

@@ -0,0 +1,70 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+import type { HueSliderProps } from './HueSlider.types';
+import { useTokens } from '../tokens/useTokens';
+import { getHueSliderStyles, getHueSliderInputStyle } from './HueSlider.styles';
+
+/**
+ * Hue slider with rainbow gradient track.
+ *
+ * Value range: 0-359 (traditional color wheel hue).
+ * 0=red, 60=yellow, 120=green, 180=cyan, 240=blue, 300=magenta.
+ *
+ * Optional min/max constrain the selectable range.
+ * For wrapping ranges (e.g. red: min=345 max=375), max may exceed 359;
+ * the returned value is always normalized to [0, 359].
+ */
+export function HueSlider({
+  value,
+  onValueChange,
+  min = 0,
+  max = 359,
+  label,
+  showValue = false,
+  disabled = false,
+  style,
+}: HueSliderProps) {
+  const tokens = useTokens(1);
+
+  const styles = React.useMemo(
+    () => getHueSliderStyles(tokens),
+    [tokens]
+  );
+
+  const inputStyle = React.useMemo(
+    () => getHueSliderInputStyle(disabled, min, max),
+    [disabled, min, max]
+  );
+
+  // For wrapping ranges (max > 359), convert stored value to slider range.
+  const sliderValue = (max > 359 && value < min) ? value + 360 : value;
+
+  const handleChange = React.useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const raw = Number(e.target.value);
+      onValueChange(((raw % 360) + 360) % 360);
+    },
+    [onValueChange]
+  );
+
+  return (
+    <View style={[styles.container, ...(Array.isArray(style) ? style : [style])]}>
+      {(label || showValue) && (
+        <View style={styles.labelRow}>
+          {label && <Text style={styles.label}>{label}</Text>}
+          {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>
+  );
+}

package/src/HueSlider/HueSlider.types.ts

@@ -0,0 +1,12 @@
+import type { ViewStyle } from 'react-native';
+
+export interface HueSliderProps {
+  readonly value: number;
+  readonly onValueChange: (value: number) => void;
+  readonly min?: number;
+  readonly max?: number;
+  readonly label?: string;
+  readonly showValue?: boolean;
+  readonly disabled?: boolean;
+  readonly style?: ViewStyle | ViewStyle[];
+}

package/src/HueSlider/index.ts

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

package/src/Select/Select.styles.ts

@@ -0,0 +1,29 @@
+import { StyleSheet } from 'react-native';
+import { srgbToHex } from 'newtone';
+import type { ResolvedTokens } from '../tokens/types';
+
+export function getSelectStyles(tokens: ResolvedTokens, disabled: boolean) {
+  return StyleSheet.create({
+    container: {
+      gap: 4,
+    },
+    label: {
+      fontSize: 12,
+      fontWeight: '600',
+      color: srgbToHex(tokens.textSecondary.srgb),
+    },
+    select: {
+      backgroundColor: srgbToHex(tokens.backgroundSunken.srgb),
+      borderWidth: 1,
+      borderColor: srgbToHex(tokens.border.srgb),
+      borderRadius: 6,
+      paddingVertical: 8,
+      paddingHorizontal: 12,
+      fontSize: 14,
+      color: disabled
+        ? srgbToHex(tokens.textSecondary.srgb)
+        : srgbToHex(tokens.textPrimary.srgb),
+      opacity: disabled ? 0.5 : 1,
+    },
+  });
+}

package/src/Select/Select.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import type { SelectProps } from './Select.types';
+import { useTokens } from '../tokens/useTokens';
+import { getSelectStyles } from './Select.styles';
+
+/**
+ * Select dropdown component.
+ *
+ * Renders a native HTML <select> element styled with design tokens.
+ * On web (via react-native-web), View renders as a div which can contain
+ * standard HTML elements.
+ */
+export function Select({
+  options,
+  value,
+  onValueChange,
+  label,
+  disabled = false,
+  style,
+}: SelectProps) {
+  const tokens = useTokens(1);
+
+  const styles = React.useMemo(
+    () => getSelectStyles(tokens, disabled),
+    [tokens, disabled]
+  );
+
+  const handleChange = React.useCallback(
+    (e: React.ChangeEvent<HTMLSelectElement>) => {
+      onValueChange(e.target.value);
+    },
+    [onValueChange]
+  );
+
+  // Flatten StyleSheet styles into inline style for the native <select>
+  const selectStyle = StyleSheet.flatten(styles.select);
+
+  return (
+    <View style={[styles.container, ...(Array.isArray(style) ? style : [style])]}>
+      {label && <Text style={styles.label}>{label}</Text>}
+      <select
+        value={value}
+        onChange={handleChange}
+        disabled={disabled}
+        style={{
+          ...selectStyle,
+          cursor: disabled ? 'default' : 'pointer',
+          appearance: 'auto',
+        } as React.CSSProperties}
+      >
+        {options.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+    </View>
+  );
+}

package/src/Select/Select.types.ts

@@ -0,0 +1,15 @@
+import type { ViewStyle } from 'react-native';
+
+export interface SelectOption {
+  readonly label: string;
+  readonly value: string;
+}
+
+export interface SelectProps {
+  readonly options: readonly SelectOption[];
+  readonly value: string;
+  readonly onValueChange: (value: string) => void;
+  readonly label?: string;
+  readonly disabled?: boolean;
+  readonly style?: ViewStyle | ViewStyle[];
+}

package/src/Select/index.ts

@@ -0,0 +1,2 @@
+export { Select } from './Select';
+export type { SelectProps, SelectOption } from './Select.types';

package/src/Slider/Slider.styles.ts

@@ -0,0 +1,45 @@
+import { StyleSheet } from 'react-native';
+import { srgbToHex } from 'newtone';
+import type { ResolvedTokens } from '../tokens/types';
+
+export function getSliderStyles(tokens: ResolvedTokens) {
+  return StyleSheet.create({
+    container: {
+      gap: 4,
+    },
+    labelRow: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+    },
+    label: {
+      fontSize: 12,
+      fontWeight: '600',
+      color: srgbToHex(tokens.textSecondary.srgb),
+    },
+    value: {
+      fontSize: 12,
+      fontWeight: '500',
+      color: srgbToHex(tokens.textPrimary.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

@@ -0,0 +1,57 @@
+import React from 'react';
+import { View, Text } from 'react-native';
+import type { SliderProps } from './Slider.types';
+import { useTokens } from '../tokens/useTokens';
+import { getSliderStyles, getSliderInputStyle } from './Slider.styles';
+
+export function Slider({
+  value,
+  onValueChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  label,
+  showValue = false,
+  disabled = false,
+  style,
+}: SliderProps) {
+  const tokens = useTokens(1);
+
+  const styles = React.useMemo(
+    () => getSliderStyles(tokens),
+    [tokens]
+  );
+
+  const inputStyle = React.useMemo(
+    () => getSliderInputStyle(tokens, disabled),
+    [tokens, disabled]
+  );
+
+  const handleChange = React.useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      onValueChange(Number(e.target.value));
+    },
+    [onValueChange]
+  );
+
+  return (
+    <View style={[styles.container, ...(Array.isArray(style) ? style : [style])]}>
+      {(label || showValue) && (
+        <View style={styles.labelRow}>
+          {label && <Text style={styles.label}>{label}</Text>}
+          {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>
+  );
+}

package/src/Slider/Slider.types.ts

@@ -0,0 +1,13 @@
+import type { ViewStyle } from 'react-native';
+
+export interface SliderProps {
+  readonly value: number;
+  readonly onValueChange: (value: number) => void;
+  readonly min?: number;
+  readonly max?: number;
+  readonly step?: number;
+  readonly label?: string;
+  readonly showValue?: boolean;
+  readonly disabled?: boolean;
+  readonly style?: ViewStyle | ViewStyle[];
+}

package/src/Slider/index.ts

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

package/src/TextInput/TextInput.styles.ts

@@ -0,0 +1,29 @@
+import { StyleSheet } from 'react-native';
+import { srgbToHex } from 'newtone';
+import type { ResolvedTokens } from '../tokens/types';
+
+export function getTextInputStyles(tokens: ResolvedTokens, disabled: boolean) {
+  return StyleSheet.create({
+    container: {
+      gap: 4,
+    },
+    label: {
+      fontSize: 12,
+      fontWeight: '600',
+      color: srgbToHex(tokens.textSecondary.srgb),
+    },
+    input: {
+      backgroundColor: srgbToHex(tokens.backgroundSunken.srgb),
+      borderWidth: 1,
+      borderColor: srgbToHex(tokens.border.srgb),
+      borderRadius: 6,
+      paddingVertical: 8,
+      paddingHorizontal: 12,
+      fontSize: 14,
+      color: disabled
+        ? srgbToHex(tokens.textSecondary.srgb)
+        : srgbToHex(tokens.textPrimary.srgb),
+      opacity: disabled ? 0.5 : 1,
+    },
+  });
+}

package/src/TextInput/TextInput.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { View, Text, TextInput as RNTextInput } from 'react-native';
+import type { TextInputProps } from './TextInput.types';
+import { useTokens } from '../tokens/useTokens';
+import { getTextInputStyles } from './TextInput.styles';
+import { srgbToHex } from 'newtone';
+
+export function TextInput({
+  label,
+  disabled = false,
+  style,
+  ...textInputProps
+}: TextInputProps) {
+  const tokens = useTokens(1);
+
+  const styles = React.useMemo(
+    () => getTextInputStyles(tokens, disabled),
+    [tokens, disabled]
+  );
+
+  return (
+    <View style={[styles.container, ...(Array.isArray(style) ? style : [style])]}>
+      {label && <Text style={styles.label}>{label}</Text>}
+      <RNTextInput
+        style={styles.input}
+        editable={!disabled}
+        placeholderTextColor={srgbToHex(tokens.textSecondary.srgb)}
+        {...textInputProps}
+      />
+    </View>
+  );
+}

package/src/TextInput/TextInput.types.ts

@@ -0,0 +1,7 @@
+import type { TextInputProps as RNTextInputProps, ViewStyle } from 'react-native';
+
+export interface TextInputProps extends Omit<RNTextInputProps, 'style'> {
+  readonly label?: string;
+  readonly disabled?: boolean;
+  readonly style?: ViewStyle | ViewStyle[];
+}

package/src/TextInput/index.ts

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

package/src/Toggle/Toggle.styles.ts

@@ -0,0 +1,45 @@
+import { StyleSheet } from 'react-native';
+import { srgbToHex } from 'newtone';
+import type { ResolvedTokens } from '../tokens/types';
+
+const TRACK_WIDTH = 40;
+const TRACK_HEIGHT = 22;
+const THUMB_SIZE = 18;
+const THUMB_OFFSET = 2;
+
+export function getToggleStyles(
+  tokens: ResolvedTokens,
+  value: boolean,
+  disabled: boolean
+) {
+  return StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8,
+      opacity: disabled ? 0.5 : 1,
+    },
+    label: {
+      fontSize: 12,
+      fontWeight: '600',
+      color: srgbToHex(tokens.textSecondary.srgb),
+    },
+    track: {
+      width: TRACK_WIDTH,
+      height: TRACK_HEIGHT,
+      borderRadius: TRACK_HEIGHT / 2,
+      backgroundColor: value
+        ? srgbToHex(tokens.interactive.srgb)
+        : srgbToHex(tokens.border.srgb),
+      justifyContent: 'center',
+      paddingHorizontal: THUMB_OFFSET,
+    },
+    thumb: {
+      width: THUMB_SIZE,
+      height: THUMB_SIZE,
+      borderRadius: THUMB_SIZE / 2,
+      backgroundColor: srgbToHex(tokens.background.srgb),
+      alignSelf: value ? 'flex-end' : 'flex-start',
+    },
+  });
+}

package/src/Toggle/Toggle.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import type { ToggleProps } from './Toggle.types';
+import { useTokens } from '../tokens/useTokens';
+import { getToggleStyles } from './Toggle.styles';
+
+export function Toggle({
+  value,
+  onValueChange,
+  label,
+  disabled = false,
+  style,
+}: ToggleProps) {
+  const tokens = useTokens(1);
+
+  const styles = React.useMemo(
+    () => getToggleStyles(tokens, value, disabled),
+    [tokens, value, disabled]
+  );
+
+  const handlePress = React.useCallback(() => {
+    if (!disabled) {
+      onValueChange(!value);
+    }
+  }, [disabled, value, onValueChange]);
+
+  return (
+    <View style={[styles.container, ...(Array.isArray(style) ? style : [style])]}>
+      {label && <Text style={styles.label}>{label}</Text>}
+      <Pressable
+        onPress={handlePress}
+        disabled={disabled}
+        accessibilityRole="switch"
+        accessibilityState={{ checked: value, disabled }}
+      >
+        <View style={styles.track}>
+          <View style={styles.thumb} />
+        </View>
+      </Pressable>
+    </View>
+  );
+}

package/src/Toggle/Toggle.types.ts

@@ -0,0 +1,9 @@
+import type { ViewStyle } from 'react-native';
+
+export interface ToggleProps {
+  readonly value: boolean;
+  readonly onValueChange: (value: boolean) => void;
+  readonly label?: string;
+  readonly disabled?: boolean;
+  readonly style?: ViewStyle | ViewStyle[];
+}

package/src/Toggle/index.ts

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

package/src/index.ts

@@ -0,0 +1,49 @@
+// Theme system
+export { NewtoneProvider, useNewtoneTheme } from './theme/NewtoneProvider';
+export type {
+  ColorMode,
+  ThemeName,
+  ElevationLevel,
+  ThemeMapping,
+  ColorSystemConfig,
+  NewtoneThemeConfig,
+  NewtoneThemeContext,
+} from './theme/types';
+export { DEFAULT_THEME_CONFIG } from './theme/defaults';
+
+// Tokens
+export { useTokens } from './tokens/useTokens';
+export { computeTokens } from './tokens/computeTokens';
+export type { ResolvedTokens } from './tokens/types';
+
+// Components
+export { Button } from './Button/Button';
+export type { ButtonProps, ButtonVariant, ButtonSize } from './Button/Button.types';
+
+export { Card } from './Card/Card';
+export type { CardProps } from './Card/Card.types';
+
+export { TextInput } from './TextInput/TextInput';
+export type { TextInputProps } from './TextInput/TextInput.types';
+
+export { Select } from './Select/Select';
+export type { SelectProps, SelectOption } from './Select/Select.types';
+
+export { Toggle } from './Toggle/Toggle';
+export type { ToggleProps } from './Toggle/Toggle.types';
+
+export { Slider } from './Slider/Slider';
+export type { SliderProps } from './Slider/Slider.types';
+
+export { HueSlider } from './HueSlider/HueSlider';
+export type { HueSliderProps } from './HueSlider/HueSlider.types';
+
+// Re-export core engine types for convenience
+export type {
+  DynamicRange,
+  PaletteConfig,
+  ColorResult,
+  Srgb,
+  Oklch,
+  HexColor,
+} from 'newtone';