@newtonedev/components 0.1.13 → 0.1.15

package/src/composites/form-controls/Toggle/Toggle.styles.ts

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native';
-import type { ResolvedTokens, ColorGamut } from 'newtone-api';
+import type { ResolvedTokens, AppearanceTokens, ThemeName, AppearanceName } from 'newtone-api';
 
 const TRACK_WIDTH = 40;
 const TRACK_HEIGHT = 22;
@@ -8,10 +8,13 @@ const THUMB_OFFSET = 2;
 
 export function getToggleStyles(
   tokens: ResolvedTokens,
-  gamut: ColorGamut,
   value: boolean,
-  disabled: boolean
+  disabled: boolean,
+  theme: ThemeName = 'primary',
+  appearance: AppearanceName = 'main',
 ) {
+  const at: AppearanceTokens = tokens.colors[theme][appearance];
+  const emphasisAt: AppearanceTokens = tokens.colors[theme].emphasis;
   return StyleSheet.create({
     container: {
       flexDirection: 'row',
@@ -23,15 +26,15 @@ export function getToggleStyles(
       fontFamily: tokens.typography.fonts.main.family,
       fontSize: tokens.typography.fontSizes['04'],
       fontWeight: tokens.typography.fonts.main.weights.medium as any,
-      color: tokens.textSecondary[gamut],
+      color: at.fontTertiary,
     },
     track: {
       width: TRACK_WIDTH,
       height: TRACK_HEIGHT,
       borderRadius: TRACK_HEIGHT / 2,
       backgroundColor: value
-        ? tokens.accent.fill[gamut]
-        : tokens.border[gamut],
+        ? emphasisAt.divider
+        : at.fontSecondary,
       justifyContent: 'center',
       paddingHorizontal: THUMB_OFFSET,
     },
@@ -39,7 +42,7 @@ export function getToggleStyles(
       width: THUMB_SIZE,
       height: THUMB_SIZE,
       borderRadius: THUMB_SIZE / 2,
-      backgroundColor: tokens.background[gamut],
+      backgroundColor: at.background,
       alignSelf: value ? 'flex-end' : 'flex-start',
     },
   });

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 'newtone-api';
+import { useTokens, useFrameContext } from 'newtone-api';
 import { getToggleStyles } from './Toggle.styles';
 
 export function Toggle({
@@ -12,10 +12,11 @@ export function Toggle({
   style,
 }: ToggleProps) {
   const tokens = useTokens(1);
+  const frameCtx = useFrameContext();
 
   const styles = React.useMemo(
-    () => getToggleStyles(tokens, tokens.gamut, value, disabled),
-    [tokens, value, disabled]
+    () => getToggleStyles(tokens, value, disabled, frameCtx?.theme, frameCtx?.appearance),
+    [tokens, value, disabled, frameCtx?.theme, frameCtx?.appearance]
   );
 
   const handlePress = React.useCallback(() => {

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

@@ -1,13 +1,18 @@
 import { StyleSheet } from 'react-native';
-import type { ResolvedTokens, ColorGamut } from 'newtone-api';
+import type { ResolvedTokens, AppearanceTokens, ThemeName, AppearanceName } from 'newtone-api';
 
-export function getAppShellStyles(tokens: ResolvedTokens, gamut: ColorGamut) {
+export function getAppShellStyles(
+  tokens: ResolvedTokens,
+  theme: ThemeName = 'primary',
+  appearance: AppearanceName = 'main',
+) {
+  const at: AppearanceTokens = tokens.colors[theme][appearance];
   return StyleSheet.create({
     container: {
       flex: 1,
       flexDirection: 'row',
       overflow: 'hidden',
-      backgroundColor: tokens.background[gamut],
+      backgroundColor: at.background,
     },
     main: {
       flex: 1,

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

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

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

@@ -1,12 +1,18 @@
 import { StyleSheet } from 'react-native';
-import type { ResolvedTokens, ColorGamut } from 'newtone-api';
+import type { ResolvedTokens, AppearanceTokens, ThemeName, AppearanceName } from 'newtone-api';
 
-export function getCardStyles(tokens: ResolvedTokens, gamut: ColorGamut, disabled: boolean) {
+export function getCardStyles(
+  tokens: ResolvedTokens,
+  disabled: boolean,
+  theme: ThemeName = 'primary',
+  appearance: AppearanceName = 'main',
+) {
+  const at: AppearanceTokens = tokens.colors[theme][appearance];
   return StyleSheet.create({
     container: {
-      backgroundColor: tokens.background[gamut],
+      backgroundColor: at.background,
       borderWidth: 1,
-      borderColor: tokens.border[gamut],
+      borderColor: at.fontSecondary,
       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 'newtone-api';
+import { useTokens, useFrameContext } from 'newtone-api';
 import { getCardStyles } from './Card.styles';
 
 export function Card({
@@ -11,10 +11,11 @@ export function Card({
   disabled = false,
 }: CardProps) {
   const tokens = useTokens(elevation);
+  const frameCtx = useFrameContext();
 
   const styles = React.useMemo(
-    () => getCardStyles(tokens, tokens.gamut, disabled),
-    [tokens, disabled]
+    () => getCardStyles(tokens, disabled, frameCtx?.theme, frameCtx?.appearance),
+    [tokens, disabled, frameCtx?.theme, frameCtx?.appearance]
   );
 
   return (

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

@@ -0,0 +1,44 @@
+import type { ViewStyle } from 'react-native';
+import type { UseTokensResult } from 'newtone-api';
+import type { ContentCardVariant } from './ContentCard.types';
+
+/**
+ * Compute variant-specific styles for ContentCard.
+ * Uses `as ViewStyle` for web-only properties (cursor, borderBottomStyle)
+ * that react-native-web supports but RN types don't include.
+ */
+export function getContentCardStyles(
+  variant: ContentCardVariant,
+  isInteractive: boolean,
+  tokens: UseTokensResult
+): ViewStyle {
+  const dividerColor = tokens.colors.primary.main.divider;
+
+  const interactiveStyles = isInteractive
+    ? { cursor: 'pointer', textDecorationLine: 'none' } as ViewStyle
+    : {} as ViewStyle;
+
+  if (variant === 'elevated') {
+    return {
+      borderRadius: 12,
+      ...interactiveStyles,
+    } as ViewStyle;
+  }
+
+  if (variant === 'bordered') {
+    return {
+      borderWidth: 1,
+      borderColor: dividerColor,
+      borderStyle: 'solid',
+      borderRadius: 12,
+      ...interactiveStyles,
+    } as ViewStyle;
+  }
+
+  // flat variant — bottom border only
+  return {
+    borderBottomWidth: 1,
+    borderBottomColor: dividerColor,
+    ...interactiveStyles,
+  } as ViewStyle;
+}

package/src/composites/layout/ContentCard/ContentCard.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import type { ContentCardProps } from './ContentCard.types';
+import { getContentCardStyles } from './ContentCard.styles';
+import { useTokens } from 'newtone-api';
+import { Frame } from '../../../primitives/Frame/Frame';
+
+/**
+ * ContentCard — A content container with three visual treatments.
+ *
+ * **Variants:**
+ * - `elevated` — raised surface with tinted background (hero cards, featured content)
+ * - `bordered` — outlined container (related items, previews)
+ * - `flat` — bottom-border only (list rows, compact items)
+ *
+ * Delegates to Frame for layout, elevation, appearance, and interactivity.
+ *
+ * @example
+ * ```tsx
+ * // Elevated hero card
+ * <ContentCard variant="elevated" href="/articles/intro">
+ *   <Text role="heading" weight="bold">Featured Article</Text>
+ *   <Text role="body" color="secondary">Article excerpt...</Text>
+ * </ContentCard>
+ *
+ * // Bordered card
+ * <ContentCard variant="bordered" onPress={() => navigate(slug)}>
+ *   <Text role="body" weight="bold">Related Article</Text>
+ * </ContentCard>
+ *
+ * // Flat list item
+ * <ContentCard variant="flat" href={`/articles/${slug}`}>
+ *   <Text role="body" weight="bold">{title}</Text>
+ * </ContentCard>
+ * ```
+ */
+export function ContentCard({
+  children,
+  variant = 'bordered',
+  href,
+  onPress,
+  padding = 20,
+  gap = 8,
+  disabled = false,
+  style,
+}: ContentCardProps) {
+  const tokens = useTokens();
+  const isInteractive = !!(href || onPress);
+
+  const variantStyles = React.useMemo(
+    () => getContentCardStyles(variant, isInteractive, tokens),
+    [variant, isInteractive, tokens]
+  );
+
+  return (
+    <Frame
+      elevation={variant === 'elevated' ? 2 : undefined}
+      appearance={variant === 'elevated' ? 'tinted' : undefined}
+      href={href}
+      onPress={onPress}
+      disabled={disabled}
+      padding={padding}
+      gap={gap}
+      style={[
+        variantStyles,
+        ...(Array.isArray(style) ? style : style ? [style] : []),
+      ]}
+    >
+      {children}
+    </Frame>
+  );
+}

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

@@ -0,0 +1,60 @@
+import type { ViewStyle } from 'react-native';
+import type { PaddingProp, GapProp } from '../../../primitives/Frame/Frame.types';
+
+/**
+ * Visual variant for the ContentCard component
+ */
+export type ContentCardVariant = 'elevated' | 'bordered' | 'flat';
+
+/**
+ * Props for the ContentCard component
+ */
+export interface ContentCardProps {
+  /**
+   * Card content.
+   */
+  readonly children: React.ReactNode;
+
+  /**
+   * Visual variant:
+   * - `'elevated'` — raised surface with tinted background and elevation shadow
+   * - `'bordered'` — outlined container with border and rounded corners
+   * - `'flat'` — minimal, bottom-border only (for list rows)
+   *
+   * @default 'bordered'
+   */
+  readonly variant?: ContentCardVariant;
+
+  /**
+   * Navigation URL — makes the card a link.
+   */
+  readonly href?: string;
+
+  /**
+   * Press handler — makes the card interactive.
+   */
+  readonly onPress?: () => void;
+
+  /**
+   * Padding inside the card.
+   * @default 20
+   */
+  readonly padding?: PaddingProp;
+
+  /**
+   * Gap between children.
+   * @default 8
+   */
+  readonly gap?: GapProp;
+
+  /**
+   * Disabled state
+   * @default false
+   */
+  readonly disabled?: boolean;
+
+  /**
+   * Custom style overrides
+   */
+  readonly style?: ViewStyle | ViewStyle[];
+}

package/src/composites/layout/ContentCard/index.ts

@@ -0,0 +1,2 @@
+export { ContentCard } from './ContentCard';
+export type { ContentCardProps, ContentCardVariant } from './ContentCard.types';

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

@@ -0,0 +1,30 @@
+import type { ViewStyle } from 'react-native';
+import type { UseTokensResult } from 'newtone-api';
+import type { DividerOrientation } from './Divider.types';
+
+/**
+ * Compute divider styles based on orientation, spacing, and tokens.
+ */
+export function getDividerStyles(
+  orientation: DividerOrientation,
+  spacing: number | undefined,
+  tokens: UseTokensResult
+): ViewStyle {
+  const color = tokens.colors.primary.main.divider;
+
+  if (orientation === 'vertical') {
+    return {
+      width: 1,
+      height: '100%' as any,
+      backgroundColor: color,
+      ...(spacing != null && { marginLeft: spacing, marginRight: spacing }),
+    };
+  }
+
+  return {
+    height: 1,
+    width: '100%' as any,
+    backgroundColor: color,
+    ...(spacing != null && { marginTop: spacing, marginBottom: spacing }),
+  };
+}

package/src/composites/layout/Divider/Divider.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { DividerProps } from './Divider.types';
+import { getDividerStyles } from './Divider.styles';
+import { useTokens } from 'newtone-api';
+
+/**
+ * Divider — A horizontal or vertical separator line.
+ *
+ * Uses the theme's divider color from tokens automatically.
+ *
+ * @example
+ * ```tsx
+ * // Horizontal divider
+ * <Divider />
+ *
+ * // With spacing
+ * <Divider spacing={16} />
+ *
+ * // Vertical divider (inside a horizontal Wrapper)
+ * <Wrapper direction="horizontal" align="center">
+ *   <Text>Left</Text>
+ *   <Divider orientation="vertical" spacing={12} />
+ *   <Text>Right</Text>
+ * </Wrapper>
+ * ```
+ */
+export function Divider({
+  orientation = 'horizontal',
+  spacing,
+  style,
+}: DividerProps) {
+  const tokens = useTokens();
+
+  const dividerStyle = React.useMemo(
+    () => getDividerStyles(orientation, spacing, tokens),
+    [orientation, spacing, tokens]
+  );
+
+  return (
+    <View
+      style={[dividerStyle, ...(Array.isArray(style) ? style : style ? [style] : [])]}
+      accessibilityRole="none"
+    />
+  );
+}

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

@@ -0,0 +1,28 @@
+import type { ViewStyle } from 'react-native';
+
+/**
+ * Orientation of the divider line
+ */
+export type DividerOrientation = 'horizontal' | 'vertical';
+
+/**
+ * Props for the Divider component
+ */
+export interface DividerProps {
+  /**
+   * Orientation of the divider line.
+   * @default 'horizontal'
+   */
+  readonly orientation?: DividerOrientation;
+
+  /**
+   * Spacing around the divider (margin above+below for horizontal, left+right for vertical).
+   * Accepts a pixel number.
+   */
+  readonly spacing?: number;
+
+  /**
+   * Custom style overrides
+   */
+  readonly style?: ViewStyle | ViewStyle[];
+}

package/src/composites/layout/Divider/index.ts

@@ -0,0 +1,2 @@
+export { Divider } from './Divider';
+export type { DividerProps, DividerOrientation } from './Divider.types';

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

@@ -1,15 +1,17 @@
 import { StyleSheet } from 'react-native';
-import type { ResolvedTokens, ColorGamut } from 'newtone-api';
+import type { ResolvedTokens, AppearanceTokens, ThemeName, AppearanceName } from 'newtone-api';
 
 interface NavbarStyleInput {
   readonly tokens: ResolvedTokens;
-  readonly gamut: ColorGamut;
   readonly height: number;
   readonly bordered: boolean;
+  readonly theme?: ThemeName;
+  readonly appearance?: AppearanceName;
 }
 
-export function getNavbarStyles({ tokens, gamut, height, bordered }: NavbarStyleInput) {
-  const borderColor = tokens.border[gamut];
+export function getNavbarStyles({ tokens, height, bordered, theme = 'primary', appearance = 'main' }: NavbarStyleInput) {
+  const at: AppearanceTokens = tokens.colors[theme][appearance];
+  const borderColor = at.fontSecondary;
 
   return StyleSheet.create({
     container: {
@@ -18,7 +20,7 @@ export function getNavbarStyles({ tokens, gamut, height, bordered }: NavbarStyle
       height,
       flexShrink: 0,
       paddingHorizontal: 24,
-      backgroundColor: tokens.background[gamut],
+      backgroundColor: at.background,
       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 'newtone-api';
+import { useTokens, useFrameContext } from 'newtone-api';
 import { getNavbarStyles } from './Navbar.styles';
 
 export function Navbar({
@@ -12,9 +12,10 @@ export function Navbar({
   bordered = true,
 }: NavbarProps) {
   const tokens = useTokens();
+  const frameCtx = useFrameContext();
   const styles = React.useMemo(
-    () => getNavbarStyles({ tokens, gamut: tokens.gamut, height, bordered }),
-    [tokens, height, bordered]
+    () => getNavbarStyles({ tokens, height, bordered, theme: frameCtx?.theme, appearance: frameCtx?.appearance }),
+    [tokens, height, bordered, frameCtx?.theme, frameCtx?.appearance]
   );
 
   return (

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

@@ -1,22 +1,24 @@
 import { StyleSheet } from 'react-native';
-import type { ResolvedTokens, ColorGamut } from 'newtone-api';
+import type { ResolvedTokens, AppearanceTokens, ThemeName, AppearanceName } from 'newtone-api';
 
 interface SidebarStyleInput {
   readonly tokens: ResolvedTokens;
-  readonly gamut: ColorGamut;
   readonly width: number;
   readonly bordered: boolean;
+  readonly theme?: ThemeName;
+  readonly appearance?: AppearanceName;
 }
 
-export function getSidebarStyles({ tokens, gamut, width, bordered }: SidebarStyleInput) {
-  const borderColor = tokens.border[gamut];
+export function getSidebarStyles({ tokens, width, bordered, theme = 'primary', appearance = 'main' }: SidebarStyleInput) {
+  const at: AppearanceTokens = tokens.colors[theme][appearance];
+  const borderColor = at.fontSecondary;
 
   return StyleSheet.create({
     container: {
       width,
       flexShrink: 0,
       flexDirection: 'column',
-      backgroundColor: tokens.background[gamut],
+      backgroundColor: at.background,
       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 'newtone-api';
+import { useTokens, useFrameContext } from 'newtone-api';
 import { getSidebarStyles } from './Sidebar.styles';
 
 export function Sidebar({
@@ -12,9 +12,10 @@ export function Sidebar({
   bordered = true,
 }: SidebarProps) {
   const tokens = useTokens();
+  const frameCtx = useFrameContext();
   const styles = React.useMemo(
-    () => getSidebarStyles({ tokens, gamut: tokens.gamut, width, bordered }),
-    [tokens, width, bordered]
+    () => getSidebarStyles({ tokens, width, bordered, theme: frameCtx?.theme, appearance: frameCtx?.appearance }),
+    [tokens, width, bordered, frameCtx?.theme, frameCtx?.appearance]
   );
 
   return (

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

@@ -1,15 +1,17 @@
 import { StyleSheet } from 'react-native';
-import type { ResolvedTokens, ColorGamut } from 'newtone-api';
+import type { ResolvedTokens, AppearanceTokens, ThemeName, AppearanceName } from 'newtone-api';
 
 export function getPopoverStyles(
   tokens: ResolvedTokens,
-  gamut: ColorGamut,
   triggerHeight: number,
   offset: number,
   maxHeight: number,
   width: 'trigger' | 'auto' | number,
-  isOpen: boolean
+  isOpen: boolean,
+  theme: ThemeName = 'primary',
+  appearance: AppearanceName = 'main',
 ) {
+  const at: AppearanceTokens = tokens.colors[theme][appearance];
   const widthStyle =
     width === 'trigger'
       ? { left: 0 as const, right: 0 as const }
@@ -26,9 +28,9 @@ export function getPopoverStyles(
       position: 'absolute',
       top: triggerHeight + offset,
       ...widthStyle,
-      backgroundColor: tokens.backgroundElevated[gamut],
+      backgroundColor: at.fontPrimary,
       borderWidth: 1,
-      borderColor: tokens.border[gamut],
+      borderColor: at.fontSecondary,
       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 'newtone-api';
+import { useTokens, useFrameContext } from 'newtone-api';
 import { getPopoverStyles } from './Popover.styles';
 
 // Module-level: set of close callbacks for all open Popovers.
@@ -21,6 +21,7 @@ export function Popover({
   contentStyle,
 }: PopoverProps) {
   const tokens = useTokens(1);
+  const frameCtx = useFrameContext();
   const containerRef = useRef<View>(null);
   const [triggerHeight, setTriggerHeight] = useState(0);
 
@@ -68,8 +69,8 @@ export function Popover({
   );
 
   const styles = useMemo(
-    () => getPopoverStyles(tokens, tokens.gamut, triggerHeight, offset, maxHeight, width, isOpen),
-    [tokens, triggerHeight, offset, maxHeight, width, isOpen]
+    () => getPopoverStyles(tokens, triggerHeight, offset, maxHeight, width, isOpen, frameCtx?.theme, frameCtx?.appearance),
+    [tokens, triggerHeight, offset, maxHeight, width, isOpen, frameCtx?.theme, frameCtx?.appearance]
   );
 
   const containerStyles = useMemo(

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

@@ -1,10 +1,10 @@
 import { StyleSheet } from 'react-native';
-import type { ResolvedTokens, ColorGamut } from 'newtone-api';
+import type { ResolvedTokens } from 'newtone-api';
 
 const TRACK_HEIGHT = 22;
 export const THUMB_SIZE = 18;
 
-export function getColorScaleSliderStyles(tokens: ResolvedTokens, gamut: ColorGamut, disabled: boolean) {
+export function getColorScaleSliderStyles(tokens: ResolvedTokens, disabled: boolean) {
   return StyleSheet.create({
     container: {
       gap: tokens.spacing['04'],
@@ -19,7 +19,7 @@ export function getColorScaleSliderStyles(tokens: ResolvedTokens, gamut: ColorGa
       fontFamily: tokens.typography.fonts.main.family,
       fontSize: tokens.typography.fontSizes['04'],
       fontWeight: tokens.typography.fonts.main.weights.medium as any,
-      color: tokens.textSecondary[gamut],
+      color: tokens.colors.primary.main.fontTertiary,
     },
     trackContainer: {
       height: TRACK_HEIGHT + THUMB_SIZE,
@@ -45,13 +45,13 @@ export function getColorScaleSliderStyles(tokens: ResolvedTokens, gamut: ColorGa
       borderRadius: THUMB_SIZE / 2,
       backgroundColor: '#ffffff',
       borderWidth: 2,
-      borderColor: tokens.border[gamut],
+      borderColor: tokens.colors.primary.main.fontSecondary,
     },
     warning: {
       fontFamily: tokens.typography.fonts.main.family,
       fontSize: tokens.typography.fontSizes['01'],
       fontWeight: tokens.typography.fonts.main.weights.medium as any,
-      color: tokens.error.fill[gamut],
+      color: tokens.colors.error.emphasis.divider,
     },
   });
 }