@newtonedev/components 0.1.12 → 0.1.13

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, Text, Pressable } from 'react-native';
 import type { ToggleProps } from './Toggle.types';
-import { useTokens } from '../../../tokens/useTokens';
+import { useTokens } from 'newtone-api';
 import { getToggleStyles } from './Toggle.styles';
 
 export function Toggle({
@@ -14,7 +14,7 @@ export function Toggle({
   const tokens = useTokens(1);
 
   const styles = React.useMemo(
-    () => getToggleStyles(tokens, value, disabled),
+    () => getToggleStyles(tokens, tokens.gamut, value, disabled),
     [tokens, value, disabled]
   );
 

package/src/composites/layout/AppShell/AppShell.styles.ts

@@ -1,14 +1,13 @@
 import { StyleSheet } from 'react-native';
-import { srgbToHex } from 'newtone';
-import type { ResolvedTokens } from '../../../tokens/types';
+import type { ResolvedTokens, ColorGamut } from 'newtone-api';
 
-export function getAppShellStyles(tokens: ResolvedTokens) {
+export function getAppShellStyles(tokens: ResolvedTokens, gamut: ColorGamut) {
   return StyleSheet.create({
     container: {
       flex: 1,
       flexDirection: 'row',
       overflow: 'hidden',
-      backgroundColor: srgbToHex(tokens.background.srgb),
+      backgroundColor: tokens.background[gamut],
     },
     main: {
       flex: 1,

package/src/composites/layout/AppShell/AppShell.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { View } from 'react-native';
 import type { AppShellProps } from './AppShell.types';
-import { useTokens } from '../../../tokens/useTokens';
+import { useTokens } from 'newtone-api';
 import { getAppShellStyles } from './AppShell.styles';
 
 export function AppShell({ sidebar, children }: AppShellProps) {
   const tokens = useTokens();
-  const styles = React.useMemo(() => getAppShellStyles(tokens), [tokens]);
+  const styles = React.useMemo(() => getAppShellStyles(tokens, tokens.gamut), [tokens]);
 
   return (
     <View style={styles.container}>

package/src/composites/layout/Card/Card.styles.ts

@@ -1,13 +1,12 @@
 import { StyleSheet } from 'react-native';
-import { srgbToHex } from 'newtone';
-import type { ResolvedTokens } from '../../../tokens/types';
+import type { ResolvedTokens, ColorGamut } from 'newtone-api';
 
-export function getCardStyles(tokens: ResolvedTokens, disabled: boolean) {
+export function getCardStyles(tokens: ResolvedTokens, gamut: ColorGamut, disabled: boolean) {
   return StyleSheet.create({
     container: {
-      backgroundColor: srgbToHex(tokens.background.srgb),
+      backgroundColor: tokens.background[gamut],
       borderWidth: 1,
-      borderColor: srgbToHex(tokens.border.srgb),
+      borderColor: tokens.border[gamut],
       borderRadius: tokens.radius.lg,
       padding: tokens.spacing['16'],
       opacity: disabled ? 0.5 : 1,

package/src/composites/layout/Card/Card.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
 import type { CardProps } from './Card.types';
-import { useTokens } from '../../../tokens/useTokens';
+import { useTokens } from 'newtone-api';
 import { getCardStyles } from './Card.styles';
 
 export function Card({
@@ -13,7 +13,7 @@ export function Card({
   const tokens = useTokens(elevation);
 
   const styles = React.useMemo(
-    () => getCardStyles(tokens, disabled),
+    () => getCardStyles(tokens, tokens.gamut, disabled),
     [tokens, disabled]
   );
 

package/src/composites/layout/Card/Card.types.ts

@@ -1,5 +1,5 @@
 import type { ViewStyle } from 'react-native';
-import type { ElevationLevel } from '../../../theme/types';
+import type { ElevationLevel } from 'newtone-api';
 
 export interface CardProps {
   readonly children: React.ReactNode;

package/src/composites/layout/Navbar/Navbar.styles.ts

@@ -1,15 +1,15 @@
 import { StyleSheet } from 'react-native';
-import { srgbToHex } from 'newtone';
-import type { ResolvedTokens } from '../../../tokens/types';
+import type { ResolvedTokens, ColorGamut } from 'newtone-api';
 
 interface NavbarStyleInput {
   readonly tokens: ResolvedTokens;
+  readonly gamut: ColorGamut;
   readonly height: number;
   readonly bordered: boolean;
 }
 
-export function getNavbarStyles({ tokens, height, bordered }: NavbarStyleInput) {
-  const borderColor = srgbToHex(tokens.border.srgb);
+export function getNavbarStyles({ tokens, gamut, height, bordered }: NavbarStyleInput) {
+  const borderColor = tokens.border[gamut];
 
   return StyleSheet.create({
     container: {
@@ -18,7 +18,7 @@ export function getNavbarStyles({ tokens, height, bordered }: NavbarStyleInput)
       height,
       flexShrink: 0,
       paddingHorizontal: 24,
-      backgroundColor: srgbToHex(tokens.background.srgb),
+      backgroundColor: tokens.background[gamut],
       borderBottomWidth: bordered ? 1 : 0,
       borderBottomColor: borderColor,
     },

package/src/composites/layout/Navbar/Navbar.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
 import type { NavbarProps } from './Navbar.types';
-import { useTokens } from '../../../tokens/useTokens';
+import { useTokens } from 'newtone-api';
 import { getNavbarStyles } from './Navbar.styles';
 
 export function Navbar({
@@ -13,7 +13,7 @@ export function Navbar({
 }: NavbarProps) {
   const tokens = useTokens();
   const styles = React.useMemo(
-    () => getNavbarStyles({ tokens, height, bordered }),
+    () => getNavbarStyles({ tokens, gamut: tokens.gamut, height, bordered }),
     [tokens, height, bordered]
   );
 

package/src/composites/layout/Sidebar/Sidebar.styles.ts

@@ -1,22 +1,22 @@
 import { StyleSheet } from 'react-native';
-import { srgbToHex } from 'newtone';
-import type { ResolvedTokens } from '../../../tokens/types';
+import type { ResolvedTokens, ColorGamut } from 'newtone-api';
 
 interface SidebarStyleInput {
   readonly tokens: ResolvedTokens;
+  readonly gamut: ColorGamut;
   readonly width: number;
   readonly bordered: boolean;
 }
 
-export function getSidebarStyles({ tokens, width, bordered }: SidebarStyleInput) {
-  const borderColor = srgbToHex(tokens.border.srgb);
+export function getSidebarStyles({ tokens, gamut, width, bordered }: SidebarStyleInput) {
+  const borderColor = tokens.border[gamut];
 
   return StyleSheet.create({
     container: {
       width,
       flexShrink: 0,
       flexDirection: 'column',
-      backgroundColor: srgbToHex(tokens.background.srgb),
+      backgroundColor: tokens.background[gamut],
       borderRightWidth: bordered ? 1 : 0,
       borderRightColor: borderColor,
     },

package/src/composites/layout/Sidebar/Sidebar.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, ScrollView } from 'react-native';
 import type { SidebarProps } from './Sidebar.types';
-import { useTokens } from '../../../tokens/useTokens';
+import { useTokens } from 'newtone-api';
 import { getSidebarStyles } from './Sidebar.styles';
 
 export function Sidebar({
@@ -13,7 +13,7 @@ export function Sidebar({
 }: SidebarProps) {
   const tokens = useTokens();
   const styles = React.useMemo(
-    () => getSidebarStyles({ tokens, width, bordered }),
+    () => getSidebarStyles({ tokens, gamut: tokens.gamut, width, bordered }),
     [tokens, width, bordered]
   );
 

package/src/composites/overlays/Popover/Popover.styles.ts

@@ -1,9 +1,9 @@
 import { StyleSheet } from 'react-native';
-import { srgbToHex } from 'newtone';
-import type { ResolvedTokens } from '../../../tokens/types';
+import type { ResolvedTokens, ColorGamut } from 'newtone-api';
 
 export function getPopoverStyles(
   tokens: ResolvedTokens,
+  gamut: ColorGamut,
   triggerHeight: number,
   offset: number,
   maxHeight: number,
@@ -26,9 +26,9 @@ export function getPopoverStyles(
       position: 'absolute',
       top: triggerHeight + offset,
       ...widthStyle,
-      backgroundColor: srgbToHex(tokens.backgroundElevated.srgb),
+      backgroundColor: tokens.backgroundElevated[gamut],
       borderWidth: 1,
-      borderColor: srgbToHex(tokens.border.srgb),
+      borderColor: tokens.border[gamut],
       borderRadius: tokens.radius.md,
       maxHeight,
       zIndex: 1000,

package/src/composites/overlays/Popover/Popover.tsx

@@ -1,7 +1,7 @@
 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 { useTokens } from 'newtone-api';
 import { getPopoverStyles } from './Popover.styles';
 
 // Module-level: set of close callbacks for all open Popovers.
@@ -68,7 +68,7 @@ export function Popover({
   );
 
   const styles = useMemo(
-    () => getPopoverStyles(tokens, triggerHeight, offset, maxHeight, width, isOpen),
+    () => getPopoverStyles(tokens, tokens.gamut, triggerHeight, offset, maxHeight, width, isOpen),
     [tokens, triggerHeight, offset, maxHeight, width, isOpen]
   );
 

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

@@ -1,11 +1,10 @@
 import { StyleSheet } from 'react-native';
-import { srgbToHex } from 'newtone';
-import type { ResolvedTokens } from '../../../tokens/types';
+import type { ResolvedTokens, ColorGamut } from 'newtone-api';
 
 const TRACK_HEIGHT = 22;
 export const THUMB_SIZE = 18;
 
-export function getColorScaleSliderStyles(tokens: ResolvedTokens, disabled: boolean) {
+export function getColorScaleSliderStyles(tokens: ResolvedTokens, gamut: ColorGamut, disabled: boolean) {
   return StyleSheet.create({
     container: {
       gap: tokens.spacing['04'],
@@ -20,7 +19,7 @@ export function getColorScaleSliderStyles(tokens: ResolvedTokens, disabled: bool
       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),
+      color: tokens.textSecondary[gamut],
     },
     trackContainer: {
       height: TRACK_HEIGHT + THUMB_SIZE,
@@ -46,13 +45,13 @@ export function getColorScaleSliderStyles(tokens: ResolvedTokens, disabled: bool
       borderRadius: THUMB_SIZE / 2,
       backgroundColor: '#ffffff',
       borderWidth: 2,
-      borderColor: srgbToHex(tokens.border.srgb),
+      borderColor: tokens.border[gamut],
     },
     warning: {
       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),
+      color: tokens.error.fill[gamut],
     },
   });
 }

package/src/composites/range-inputs/ColorScaleSlider/ColorScaleSlider.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import { View, Text, PanResponder, Animated } from 'react-native';
 import { srgbToHex } from 'newtone';
+import { oklchToP3Css } from '@newtonedev/colors';
+import type { Oklch } from '@newtonedev/colors';
 import type { ColorScaleSliderProps } from './ColorScaleSlider.types';
-import { useTokens } from '../../../tokens/useTokens';
+import { useTokens } from 'newtone-api';
 import { getColorScaleSliderStyles, THUMB_SIZE } from './ColorScaleSlider.styles';
 
 /**
@@ -24,12 +26,13 @@ export function ColorScaleSlider({
   snap = false,
   disabled = false,
   animateValue = false,
+  useP3: _useP3,
   style,
 }: ColorScaleSliderProps) {
   const tokens = useTokens(1);
 
   const styles = React.useMemo(
-    () => getColorScaleSliderStyles(tokens, disabled),
+    () => getColorScaleSliderStyles(tokens, tokens.gamut, disabled),
     [tokens, disabled]
   );
 
@@ -143,7 +146,7 @@ export function ColorScaleSlider({
       >
         <View style={styles.gradientTrack}>
           {visibleColors.map((color, i) => (
-            <View key={i} style={[styles.segment, { backgroundColor: srgbToHex(color.srgb) }]} />
+            <View key={i} style={[styles.segment, { backgroundColor: tokens.gamut === 'p3' ? oklchToP3Css(color.oklch) : srgbToHex(color.srgb) }]} />
           ))}
         </View>
         <Animated.View style={[styles.thumb, { left: thumbAnim }]} />

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

@@ -20,6 +20,8 @@ export interface ColorScaleSliderProps {
   readonly disabled?: boolean;
   /** Animate thumb position on prop-driven value changes (e.g., mode switch). Default: false */
   readonly animateValue?: boolean;
+  /** @deprecated Gamut is now read from context via `useTokens().gamut`. This prop is ignored. */
+  readonly useP3?: boolean;
   /** Optional style override */
   readonly style?: ViewStyle | ViewStyle[];
 }

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

@@ -1,24 +1,17 @@
 import { StyleSheet } from 'react-native';
-import { srgbToHex } from 'newtone';
-import type { ResolvedTokens } from '../../../tokens/types';
+import { srgbToHex, gamutMapToSrgb } from 'newtone';
+import type { ResolvedTokens, ColorGamut } from 'newtone-api';
 
 const TRACK_HEIGHT = 22;
 export const THUMB_SIZE = 18;
 const SEGMENT_COUNT = 48;
+const OKLCH_L = 0.7;
+const OKLCH_C = 0.4;
 
-/** 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;
-  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)}`;
+/** Convert an OKLCH hue [0, 360) to a hex string via gamut-mapped rendering. */
+export function hueToHex(oklchHue: number): string {
+  const { color } = gamutMapToSrgb({ L: OKLCH_L, C: OKLCH_C, h: oklchHue });
+  return srgbToHex(color);
 }
 
 /** Build an array of hex colors for the gradient track segments. */
@@ -29,7 +22,7 @@ export function buildHueSegments(min: number, max: number): string[] {
   });
 }
 
-export function getHueSliderStyles(tokens: ResolvedTokens, disabled: boolean) {
+export function getHueSliderStyles(tokens: ResolvedTokens, gamut: ColorGamut, disabled: boolean) {
   return StyleSheet.create({
     container: {
       gap: tokens.spacing['04'],
@@ -44,23 +37,23 @@ export function getHueSliderStyles(tokens: ResolvedTokens, disabled: boolean) {
       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),
+      color: tokens.textSecondary[gamut],
     },
     value: {
       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),
+      color: tokens.textPrimary[gamut],
     },
     valueInput: {
       width: 48,
       paddingVertical: 0,
       paddingHorizontal: 4,
       borderWidth: 1,
-      borderColor: srgbToHex(tokens.border.srgb),
+      borderColor: tokens.border[gamut],
       borderRadius: 4,
       backgroundColor: 'transparent',
-      color: srgbToHex(tokens.textPrimary.srgb),
+      color: tokens.textPrimary[gamut],
       fontFamily: tokens.typography.fonts.main.family,
       fontSize: tokens.typography.fontSizes['04'],
       fontWeight: tokens.typography.fonts.main.weights.medium as any,
@@ -90,7 +83,7 @@ export function getHueSliderStyles(tokens: ResolvedTokens, disabled: boolean) {
       borderRadius: THUMB_SIZE / 2,
       backgroundColor: '#ffffff',
       borderWidth: 2,
-      borderColor: srgbToHex(tokens.border.srgb),
+      borderColor: tokens.border[gamut],
     },
   });
 }

package/src/composites/range-inputs/HueSlider/HueSlider.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, Text, TextInput, PanResponder } from 'react-native';
 import type { HueSliderProps } from './HueSlider.types';
-import { useTokens } from '../../../tokens/useTokens';
+import { useTokens } from 'newtone-api';
 import {
   getHueSliderStyles,
   buildHueSegments,
@@ -11,18 +11,17 @@ import {
 /**
  * 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.
+ * Value range: OKLCH hue [0, 360).
  *
  * 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].
+ * For wrapping ranges, max may exceed 360;
+ * the returned value is always normalized to [0, 360).
  */
 export function HueSlider({
   value,
   onValueChange,
   min = 0,
-  max = 359,
+  max = 360,
   label,
   showValue = false,
   editableValue = false,
@@ -32,7 +31,7 @@ export function HueSlider({
   const tokens = useTokens(1);
 
   const styles = React.useMemo(
-    () => getHueSliderStyles(tokens, disabled),
+    () => getHueSliderStyles(tokens, tokens.gamut, disabled),
     [tokens, disabled]
   );
 
@@ -78,8 +77,8 @@ export function HueSlider({
     })
   ).current;
 
-  // For wrapping ranges (max > 359), convert stored value to slider range
-  const sliderValue = max > 359 && value < min ? value + 360 : value;
+  // For wrapping ranges (max > 360), convert stored value to slider range
+  const sliderValue = max > 360 && value < min ? value + 360 : value;
   const ratio = max > min ? (sliderValue - min) / (max - min) : 0;
   const usableWidth = Math.max(0, layoutWidth - THUMB_SIZE);
   const thumbLeft = ratio * usableWidth;

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

@@ -1,11 +1,10 @@
 import { StyleSheet } from 'react-native';
-import { srgbToHex } from 'newtone';
-import type { ResolvedTokens } from '../../../tokens/types';
+import type { ResolvedTokens, ColorGamut } from 'newtone-api';
 
 const TRACK_HEIGHT = 6;
 export const THUMB_SIZE = 16;
 
-export function getSliderStyles(tokens: ResolvedTokens, disabled: boolean) {
+export function getSliderStyles(tokens: ResolvedTokens, gamut: ColorGamut, disabled: boolean) {
   return StyleSheet.create({
     container: {
       gap: tokens.spacing['04'],
@@ -20,23 +19,23 @@ export function getSliderStyles(tokens: ResolvedTokens, disabled: boolean) {
       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),
+      color: tokens.textSecondary[gamut],
     },
     value: {
       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),
+      color: tokens.textPrimary[gamut],
     },
     valueInput: {
       width: 48,
       paddingVertical: 0,
       paddingHorizontal: 4,
       borderWidth: 1,
-      borderColor: srgbToHex(tokens.border.srgb),
+      borderColor: tokens.border[gamut],
       borderRadius: 4,
       backgroundColor: 'transparent',
-      color: srgbToHex(tokens.textPrimary.srgb),
+      color: tokens.textPrimary[gamut],
       fontFamily: tokens.typography.fonts.main.family,
       fontSize: tokens.typography.fontSizes['04'],
       fontWeight: tokens.typography.fonts.main.weights.medium as any,
@@ -53,21 +52,21 @@ export function getSliderStyles(tokens: ResolvedTokens, disabled: boolean) {
       right: 0,
       height: TRACK_HEIGHT,
       borderRadius: TRACK_HEIGHT / 2,
-      backgroundColor: srgbToHex(tokens.border.srgb),
+      backgroundColor: tokens.border[gamut],
     },
     trackFill: {
       position: 'absolute',
       left: 0,
       height: TRACK_HEIGHT,
       borderRadius: TRACK_HEIGHT / 2,
-      backgroundColor: srgbToHex(tokens.accent.fill.srgb),
+      backgroundColor: tokens.accent.fill[gamut],
     },
     thumb: {
       position: 'absolute',
       width: THUMB_SIZE,
       height: THUMB_SIZE,
       borderRadius: THUMB_SIZE / 2,
-      backgroundColor: srgbToHex(tokens.accent.fill.srgb),
+      backgroundColor: tokens.accent.fill[gamut],
     },
   });
 }

package/src/composites/range-inputs/Slider/Slider.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, Text, TextInput, PanResponder } from 'react-native';
 import type { SliderProps } from './Slider.types';
-import { useTokens } from '../../../tokens/useTokens';
+import { useTokens } from 'newtone-api';
 import { getSliderStyles, THUMB_SIZE } from './Slider.styles';
 
 export function Slider({
@@ -19,7 +19,7 @@ export function Slider({
   const tokens = useTokens(1);
 
   const styles = React.useMemo(
-    () => getSliderStyles(tokens, disabled),
+    () => getSliderStyles(tokens, tokens.gamut, disabled),
     [tokens, disabled]
   );