@newtonedev/components 0.1.4 → 0.1.6

package/src/{Card → 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 '../../../tokens/useTokens';
 import { getCardStyles } from './Card.styles';
 
 export function Card({

package/src/{Card → 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 '../../../theme/types';
 
 export interface CardProps {
   readonly children: React.ReactNode;

package/src/{Navbar → composites/layout/Navbar}/Navbar.styles.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native';
 import { srgbToHex } from 'newtone';
-import type { ResolvedTokens } from '../tokens/types';
+import type { ResolvedTokens } from '../../../tokens/types';
 
 interface NavbarStyleInput {
   readonly tokens: ResolvedTokens;

package/src/{Navbar → 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 '../../../tokens/useTokens';
 import { getNavbarStyles } from './Navbar.styles';
 
 export function Navbar({

package/src/{Sidebar → composites/layout/Sidebar}/Sidebar.styles.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native';
 import { srgbToHex } from 'newtone';
-import type { ResolvedTokens } from '../tokens/types';
+import type { ResolvedTokens } from '../../../tokens/types';
 
 interface SidebarStyleInput {
   readonly tokens: ResolvedTokens;

package/src/{Sidebar → 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 '../../../tokens/useTokens';
 import { getSidebarStyles } from './Sidebar.styles';
 
 export function Sidebar({

package/src/{Popover → composites/overlays/Popover}/Popover.styles.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native';
 import { srgbToHex } from 'newtone';
-import type { ResolvedTokens } from '../tokens/types';
+import type { ResolvedTokens } from '../../../tokens/types';
 
 export function getPopoverStyles(
   tokens: ResolvedTokens,

package/src/{Popover → 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 '../../../tokens/useTokens';
 import { getPopoverStyles } from './Popover.styles';
 
 // Module-level: set of close callbacks for all open Popovers.

package/src/{ColorScaleSlider → composites/range-inputs/ColorScaleSlider}/ColorScaleSlider.styles.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native';
 import { srgbToHex } from 'newtone';
-import type { ResolvedTokens } from '../tokens/types';
+import type { ResolvedTokens } from '../../../tokens/types';
 
 const TRACK_HEIGHT = 22;
 export const THUMB_SIZE = 18;
@@ -52,7 +52,7 @@ export function getColorScaleSliderStyles(tokens: ResolvedTokens, disabled: bool
       fontFamily: tokens.typography.fonts.default,
       fontSize: tokens.typography.size.xs,
       fontWeight: tokens.typography.weight.medium as any,
-      color: srgbToHex(tokens.error.srgb),
+      color: srgbToHex(tokens.error.fill.srgb),
     },
   });
 }

package/src/{ColorScaleSlider → composites/range-inputs/ColorScaleSlider}/ColorScaleSlider.tsx

@@ -2,7 +2,7 @@ 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 { useTokens } from '../../../tokens/useTokens';
 import { getColorScaleSliderStyles, THUMB_SIZE } from './ColorScaleSlider.styles';
 
 /**

package/src/{HueSlider → composites/range-inputs/HueSlider}/HueSlider.styles.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native';
 import { srgbToHex } from 'newtone';
-import type { ResolvedTokens } from '../tokens/types';
+import type { ResolvedTokens } from '../../../tokens/types';
 
 const TRACK_HEIGHT = 22;
 export const THUMB_SIZE = 18;

package/src/{HueSlider → 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 '../../../tokens/useTokens';
 import {
   getHueSliderStyles,
   buildHueSegments,

package/src/{Slider → composites/range-inputs/Slider}/Slider.styles.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native';
 import { srgbToHex } from 'newtone';
-import type { ResolvedTokens } from '../tokens/types';
+import type { ResolvedTokens } from '../../../tokens/types';
 
 const TRACK_HEIGHT = 6;
 export const THUMB_SIZE = 16;
@@ -60,14 +60,14 @@ export function getSliderStyles(tokens: ResolvedTokens, disabled: boolean) {
       left: 0,
       height: TRACK_HEIGHT,
       borderRadius: TRACK_HEIGHT / 2,
-      backgroundColor: srgbToHex(tokens.interactive.srgb),
+      backgroundColor: srgbToHex(tokens.accent.fill.srgb),
     },
     thumb: {
       position: 'absolute',
       width: THUMB_SIZE,
       height: THUMB_SIZE,
       borderRadius: THUMB_SIZE / 2,
-      backgroundColor: srgbToHex(tokens.interactive.srgb),
+      backgroundColor: srgbToHex(tokens.accent.fill.srgb),
     },
   });
 }

package/src/{Slider → 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 '../../../tokens/useTokens';
 import { getSliderStyles, THUMB_SIZE } from './Slider.styles';
 
 export function Slider({

package/src/index.ts

@@ -2,14 +2,13 @@
 export { NewtoneProvider, useNewtoneTheme } from './theme/NewtoneProvider';
 export type {
   ColorMode,
-  ThemeName,
   ElevationLevel,
   FrameElevation,
-  ThemeMapping,
   ColorSystemConfig,
   NewtoneThemeConfig,
   NewtoneThemeContext,
   FontConfig,
+  TokenOverrides,
 } from './theme/types';
 export { useFrameContext } from './theme/FrameContext';
 export type { FrameContextValue } from './theme/FrameContext';
@@ -17,15 +16,23 @@ 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, ButtonIconPosition } from './Button/Button.types';
-
-export { Card } from './Card/Card';
-export type { CardProps } from './Card/Card.types';
+export {
+  computeTokens,
+  NEUTRAL_DEFAULTS,
+  ACCENT_DEFAULTS,
+  SUCCESS_DEFAULTS,
+  WARNING_DEFAULTS,
+  ERROR_DEFAULTS,
+} from './tokens/computeTokens';
+export type { PaletteDefaults } from './tokens/computeTokens';
+export type { ResolvedTokens, PaletteTokens } from './tokens/types';
+
+// Composite Components
+export { Button } from './composites/actions/Button/Button';
+export type { ButtonProps, ButtonVariant, ButtonSemantic, ButtonSize, ButtonIconPosition } from './composites/actions/Button/Button.types';
+
+export { Card } from './composites/layout/Card/Card';
+export type { CardProps } from './composites/layout/Card/Card.types';
 
 export { useFocusVisible } from './primitives/useFocusVisible';
 export type { FocusVisibleResult } from './primitives/useFocusVisible';
@@ -52,28 +59,28 @@ export type {
 } from './primitives/Frame/Frame.types';
 export type { ResolvedCorners } from './primitives/Frame/Frame.utils';
 
-export { TextInput } from './TextInput/TextInput';
-export type { TextInputProps } from './TextInput/TextInput.types';
+export { TextInput } from './composites/form-controls/TextInput/TextInput';
+export type { TextInputProps } from './composites/form-controls/TextInput/TextInput.types';
 
-export { Popover } from './Popover/Popover';
-export type { PopoverProps, PopoverPlacement } from './Popover/Popover.types';
-export { usePopover } from './Popover/usePopover';
+export { Popover } from './composites/overlays/Popover/Popover';
+export type { PopoverProps, PopoverPlacement } from './composites/overlays/Popover/Popover.types';
+export { usePopover } from './composites/overlays/Popover/usePopover';
 
-export { Select } from './Select/Select';
-export type { SelectProps, SelectOption, SelectOptionGroup, SelectItem } from './Select/Select.types';
-export { isOptionGroup } from './Select/Select.types';
+export { Select } from './composites/form-controls/Select/Select';
+export type { SelectProps, SelectOption, SelectOptionGroup, SelectItem } from './composites/form-controls/Select/Select.types';
+export { isOptionGroup } from './composites/form-controls/Select/Select.types';
 
-export { Toggle } from './Toggle/Toggle';
-export type { ToggleProps } from './Toggle/Toggle.types';
+export { Toggle } from './composites/form-controls/Toggle/Toggle';
+export type { ToggleProps } from './composites/form-controls/Toggle/Toggle.types';
 
-export { Slider } from './Slider/Slider';
-export type { SliderProps } from './Slider/Slider.types';
+export { Slider } from './composites/range-inputs/Slider/Slider';
+export type { SliderProps } from './composites/range-inputs/Slider/Slider.types';
 
-export { HueSlider } from './HueSlider/HueSlider';
-export type { HueSliderProps } from './HueSlider/HueSlider.types';
+export { HueSlider } from './composites/range-inputs/HueSlider/HueSlider';
+export type { HueSliderProps } from './composites/range-inputs/HueSlider/HueSlider.types';
 
-export { ColorScaleSlider } from './ColorScaleSlider/ColorScaleSlider';
-export type { ColorScaleSliderProps } from './ColorScaleSlider/ColorScaleSlider.types';
+export { ColorScaleSlider } from './composites/range-inputs/ColorScaleSlider/ColorScaleSlider';
+export type { ColorScaleSliderProps } from './composites/range-inputs/ColorScaleSlider/ColorScaleSlider.types';
 
 export { Icon } from './primitives/Icon/Icon';
 export type { IconProps } from './primitives/Icon/Icon.types';
@@ -92,14 +99,14 @@ export type {
   TextAlign,
 } from './primitives/Text/Text.types';
 
-export { AppShell } from './AppShell/AppShell';
-export type { AppShellProps } from './AppShell/AppShell.types';
+export { AppShell } from './composites/layout/AppShell/AppShell';
+export type { AppShellProps } from './composites/layout/AppShell/AppShell.types';
 
-export { Sidebar } from './Sidebar/Sidebar';
-export type { SidebarProps } from './Sidebar/Sidebar.types';
+export { Sidebar } from './composites/layout/Sidebar/Sidebar';
+export type { SidebarProps } from './composites/layout/Sidebar/Sidebar.types';
 
-export { Navbar } from './Navbar/Navbar';
-export type { NavbarProps } from './Navbar/Navbar.types';
+export { Navbar } from './composites/layout/Navbar/Navbar';
+export type { NavbarProps } from './composites/layout/Navbar/Navbar.types';
 
 // Component registry + code generation
 export type {

package/src/primitives/Frame/Frame.tsx

@@ -61,7 +61,7 @@ function toElevationLevel(frameElevation: FrameElevation): ElevationLevel {
  * // Basic layout
  * <Frame direction="horizontal" gap="md" padding="lg" align="center">
  *   <Button onPress={() => {}}>Save</Button>
- *   <Button variant="ghost" onPress={() => {}}>Cancel</Button>
+ *   <Button variant="tertiary" onPress={() => {}}>Cancel</Button>
  * </Frame>
  * ```
  *
@@ -69,7 +69,6 @@ function toElevationLevel(frameElevation: FrameElevation): ElevationLevel {
  * ```tsx
  * // Card-like frame
  * <Frame
- *   theme="primary"
  *   elevation={2}
  *   radius="lg"
  *   padding="xl"
@@ -92,8 +91,7 @@ function toElevationLevel(frameElevation: FrameElevation): ElevationLevel {
  */
 export function Frame({
   children,
-  // Theme & elevation
-  theme,
+  // Elevation
   elevation,
   // Layout
   layout,
@@ -132,15 +130,11 @@ export function Frame({
   // Style override
   style,
 }: FrameProps) {
-  // Read the global theme configuration, current color mode (light/dark),
-  // and the default theme name from the nearest NewtoneProvider.
-  const { config, mode, theme: providerTheme } = useNewtoneTheme();
-  // Read the theme/elevation from the nearest parent Frame (if nested).
+  // Read the global theme configuration and current color mode (light/dark).
+  const { config, mode } = useNewtoneTheme();
+  // Read the elevation from the nearest parent Frame (if nested).
   const parentFrameCtx = useFrameContext();
 
-  // Decide which theme to use. Priority: this Frame's prop > parent Frame > NewtoneProvider.
-  const resolvedTheme = theme ?? parentFrameCtx?.theme ?? providerTheme;
-
   // The user-facing elevation (-2 to 2) controls visual depth (shadows, background).
   const resolvedFrameElevation: FrameElevation = elevation ?? 0;
 
@@ -156,19 +150,17 @@ export function Frame({
   // so it needs to compute fresh tokens from the resolved theme/elevation.
   // Wrapped in useMemo so it only recalculates when the theme/mode/elevation changes.
   const tokens = useMemo(() => {
-    const themeMapping = config.themes[resolvedTheme];
     return computeTokens(
       config.colorSystem,
       mode,
-      themeMapping,
       resolvedElevation,
-      config.elevation.offsets,
       config.spacing,
       config.radius,
       config.typography,
       config.icons,
+      config.tokenOverrides,
     );
-  }, [config, mode, resolvedTheme, resolvedElevation]);
+  }, [config, mode, resolvedElevation]);
 
   // Calculate all visual styles (background, layout, border, shadow, etc.).
   // Only recalculates when one of the style-related props changes.
@@ -208,8 +200,8 @@ export function Frame({
   // This is the value that child components will inherit via FrameContext.
   // Any nested Frame, Text, Icon, etc. will read this theme and elevation.
   const contextValue = useMemo(
-    () => ({ theme: resolvedTheme, elevation: resolvedElevation }),
-    [resolvedTheme, resolvedElevation],
+    () => ({ elevation: resolvedElevation, tokens }),
+    [resolvedElevation, tokens],
   );
 
   // Some styles only work on web browsers (CSS grid, inset shadows).
@@ -241,7 +233,7 @@ export function Frame({
   const focusRingStyle = isFocusVisible && !disabled ? {
     outlineWidth: 2,
     outlineStyle: 'solid',
-    outlineColor: srgbToHex(tokens.interactive.srgb),
+    outlineColor: srgbToHex(tokens.accent.fill.srgb),
     outlineOffset: 2,
   } as unknown as ViewStyle : undefined; // web-only
 

package/src/primitives/Frame/Frame.types.ts

@@ -1,5 +1,5 @@
 import type { View, ViewStyle, GestureResponderEvent } from 'react-native';
-import type { ThemeName, FrameElevation } from '../../theme/types';
+import type { FrameElevation } from '../../theme/types';
 
 // ── Spacing Types ──────────────────────────────────────────────
 
@@ -115,14 +115,14 @@ export type Justification = 'start' | 'center' | 'end' | 'between' | 'around' |
  * // Horizontal toolbar with consistent spacing
  * <Frame direction="horizontal" gap="md" padding="lg" align="center">
  *   <Button onPress={() => {}}>Save</Button>
- *   <Button variant="ghost" onPress={() => {}}>Cancel</Button>
+ *   <Button variant="tertiary" onPress={() => {}}>Cancel</Button>
  * </Frame>
  * ```
  *
  * @example
  * ```tsx
- * // Elevated card with primary theme
- * <Frame theme="primary" elevation={2} radius="lg" padding="xl" bordered>
+ * // Elevated card
+ * <Frame elevation={2} radius="lg" padding="xl" bordered>
  *   <Text>Elevated card content</Text>
  * </Frame>
  * ```
@@ -142,19 +142,7 @@ export interface FrameProps {
    */
   readonly children: React.ReactNode;
 
-  // ── Theme & Elevation ──
-
-  /**
-   * Theme override for this frame and all descendants.
-   * When omitted, inherits from parent Frame or NewtoneProvider.
-   *
-   * @example
-   * ```tsx
-   * <Frame theme="primary">  // Blue-ish surface
-   * <Frame theme="strong">   // High-contrast surface
-   * ```
-   */
-  readonly theme?: ThemeName;
+  // ── Elevation ──
 
   /**
    * Surface elevation: controls background lightness and shadow.

package/src/primitives/Icon/Icon.tsx

@@ -42,8 +42,20 @@ export function Icon({
   const iconStyle = useMemo<TextStyle>(() => {
     // Use the provided size, or fall back to the theme's default text size.
     const fontSize = size ?? tokens.typography.size.base;
+
+    // Round to nearest Material Symbols optical size (20, 24, 40, 48)
+    // for optimal stroke weight and detail rendering.
+    const getOpticalSize = (size: number): number => {
+      if (size <= 22) return 20;
+      if (size <= 32) return 24;
+      if (size <= 44) return 40;
+      return 48;
+    };
+
     // Optical size adjusts stroke weight for readability at small sizes.
-    const opsz = opticalSize ?? fontSize;
+    // Use explicit opticalSize if provided, otherwise auto-calculate from fontSize.
+    const opsz = opticalSize ?? getOpticalSize(fontSize);
+
     // Use the provided color, or fall back to the theme's primary text color.
     const iconColor = color ?? srgbToHex(tokens.textPrimary.srgb);
 
@@ -62,6 +74,9 @@ export function Icon({
     return {
       fontFamily,
       fontSize,
+      width: fontSize, // Explicit width ensures square rendering
+      height: fontSize, // Explicit height ensures square rendering
+      lineHeight: fontSize, // Prevent text line-height from affecting total height
       color: iconColor,
       userSelect: 'none', // web-only: prevents users from selecting the icon as text
       fontVariationSettings, // web-only: controls the variable font axes listed above

package/src/primitives/Text/Text.tsx

@@ -3,15 +3,25 @@ import { Text as RNText } from 'react-native';
 import type { TextStyle } from 'react-native';
 import { srgbToHex } from 'newtone';
 import { useTokens } from '../../tokens/useTokens';
+import type { UseTokensResult } from '../../tokens/useTokens';
 import type { TextProps, TextColor } from './Text.types';
 
-// Maps user-friendly color names to the actual token keys in the theme.
-// Example: color="primary" → looks up tokens.textPrimary to get the hex color.
-const COLOR_MAP: Record<TextColor, 'textPrimary' | 'textSecondary' | 'interactive'> = {
-  primary: 'textPrimary',
-  secondary: 'textSecondary',
-  interactive: 'interactive',
-};
+/**
+ * Resolve a semantic text color to a hex string from the current tokens.
+ * Neutral text colors are top-level; palette colors use nested PaletteTokens.fill.
+ */
+function resolveTextColor(color: TextColor, tokens: UseTokensResult): string {
+  switch (color) {
+    case 'primary': return srgbToHex(tokens.textPrimary.srgb);
+    case 'secondary': return srgbToHex(tokens.textSecondary.srgb);
+    case 'tertiary': return srgbToHex(tokens.textTertiary.srgb);
+    case 'disabled': return srgbToHex(tokens.textDisabled.srgb);
+    case 'accent': return srgbToHex(tokens.accent.fill.srgb);
+    case 'success': return srgbToHex(tokens.success.fill.srgb);
+    case 'warning': return srgbToHex(tokens.warning.fill.srgb);
+    case 'error': return srgbToHex(tokens.error.fill.srgb);
+  }
+}
 
 /**
  * Token-aware text primitive.
@@ -61,7 +71,7 @@ export function Text({
       // Font weight is stored as a number (e.g. 400, 600) but React Native expects a string.
       fontWeight: String(tokens.typography.weight[weight]) as TextStyle['fontWeight'],
       // Convert the theme color from internal sRGB format to a hex string (e.g. '#1a1a1a').
-      color: srgbToHex(tokens[COLOR_MAP[color]].srgb),
+      color: resolveTextColor(color, tokens),
       // Line height = font size × multiplier (e.g. 16px × 1.5 = 24px line height).
       lineHeight: fontSize * tokens.typography.lineHeight[lineHeight],
       textAlign: align,

package/src/primitives/Text/Text.types.ts

@@ -8,7 +8,7 @@ export type TextSize = 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | 'xxl';
 export type TextWeight = 'regular' | 'medium' | 'semibold' | 'bold';
 
 /** Semantic text color tokens — resolved from the current theme's token palette. */
-export type TextColor = 'primary' | 'secondary' | 'interactive';
+export type TextColor = 'primary' | 'secondary' | 'tertiary' | 'disabled' | 'accent' | 'success' | 'warning' | 'error';
 
 /** Font family tokens — maps to `tokens.typography.fonts.*` font stacks. */
 export type TextFont = 'default' | 'display' | 'mono';
@@ -58,9 +58,14 @@ export interface TextProps {
   /**
    * Semantic color token.
    *
-   * - `'primary'` — Main text color (default)
-   * - `'secondary'` — Subdued/muted text
-   * - `'interactive'` — Accent color for links/actions
+   * - `'primary'` — Main text color, high contrast
+   * - `'secondary'` — Subdued/muted text (captions, labels)
+   * - `'tertiary'` — Hints, placeholders
+   * - `'disabled'` — Disabled text elements
+   * - `'accent'` — Accent palette color for links/actions
+   * - `'success'` — Success palette color for positive indicators
+   * - `'warning'` — Warning palette color for caution indicators
+   * - `'error'` — Error palette color for destructive/error indicators
    *
    * @default 'primary'
    */

package/src/primitives/Wrapper/Wrapper.tsx

@@ -18,7 +18,7 @@ import { useTokens } from '../../tokens/useTokens';
  * ```tsx
  * <Wrapper direction="horizontal" gap="md" align="center">
  *   <Button onPress={() => {}}>Save</Button>
- *   <Button variant="ghost" onPress={() => {}}>Cancel</Button>
+ *   <Button variant="tertiary" onPress={() => {}}>Cancel</Button>
  * </Wrapper>
  * ```
  *

package/src/primitives/Wrapper/Wrapper.types.ts

@@ -23,7 +23,7 @@ import type {
  * // Horizontal row with spacing
  * <Wrapper direction="horizontal" gap="md" align="center">
  *   <Button onPress={() => {}}>Save</Button>
- *   <Button variant="ghost" onPress={() => {}}>Cancel</Button>
+ *   <Button variant="tertiary" onPress={() => {}}>Cancel</Button>
  * </Wrapper>
  * ```
  *