@newtonedev/components 0.1.13 → 0.1.14

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,
     },
   });
 }

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

@@ -4,7 +4,7 @@ import { srgbToHex } from 'newtone';
 import { oklchToP3Css } from '@newtonedev/colors';
 import type { Oklch } from '@newtonedev/colors';
 import type { ColorScaleSliderProps } from './ColorScaleSlider.types';
-import { useTokens } from 'newtone-api';
+import { useTokens, useNewtoneTheme } from 'newtone-api';
 import { getColorScaleSliderStyles, THUMB_SIZE } from './ColorScaleSlider.styles';
 
 /**
@@ -30,9 +30,10 @@ export function ColorScaleSlider({
   style,
 }: ColorScaleSliderProps) {
   const tokens = useTokens(1);
+  const { gamut } = useNewtoneTheme();
 
   const styles = React.useMemo(
-    () => getColorScaleSliderStyles(tokens, tokens.gamut, disabled),
+    () => getColorScaleSliderStyles(tokens, disabled),
     [tokens, disabled]
   );
 
@@ -146,7 +147,7 @@ export function ColorScaleSlider({
       >
         <View style={styles.gradientTrack}>
           {visibleColors.map((color, i) => (
-            <View key={i} style={[styles.segment, { backgroundColor: tokens.gamut === 'p3' ? oklchToP3Css(color.oklch) : srgbToHex(color.srgb) }]} />
+            <View key={i} style={[styles.segment, { backgroundColor: gamut === 'p3' ? oklchToP3Css(color.oklch) : srgbToHex(color.srgb) }]} />
           ))}
         </View>
         <Animated.View style={[styles.thumb, { left: thumbAnim }]} />

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

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native';
 import { srgbToHex, gamutMapToSrgb } from 'newtone';
-import type { ResolvedTokens, ColorGamut } from 'newtone-api';
+import type { ResolvedTokens } from 'newtone-api';
 
 const TRACK_HEIGHT = 22;
 export const THUMB_SIZE = 18;
@@ -22,7 +22,7 @@ export function buildHueSegments(min: number, max: number): string[] {
   });
 }
 
-export function getHueSliderStyles(tokens: ResolvedTokens, gamut: ColorGamut, disabled: boolean) {
+export function getHueSliderStyles(tokens: ResolvedTokens, disabled: boolean) {
   return StyleSheet.create({
     container: {
       gap: tokens.spacing['04'],
@@ -37,23 +37,23 @@ export function getHueSliderStyles(tokens: ResolvedTokens, gamut: ColorGamut, di
       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,
     },
     value: {
       fontFamily: tokens.typography.fonts.main.family,
       fontSize: tokens.typography.fontSizes['04'],
       fontWeight: tokens.typography.fonts.main.weights.medium as any,
-      color: tokens.textPrimary[gamut],
+      color: tokens.colors.primary.main.divider,
     },
     valueInput: {
       width: 48,
       paddingVertical: 0,
       paddingHorizontal: 4,
       borderWidth: 1,
-      borderColor: tokens.border[gamut],
+      borderColor: tokens.colors.primary.main.fontSecondary,
       borderRadius: 4,
       backgroundColor: 'transparent',
-      color: tokens.textPrimary[gamut],
+      color: tokens.colors.primary.main.divider,
       fontFamily: tokens.typography.fonts.main.family,
       fontSize: tokens.typography.fontSizes['04'],
       fontWeight: tokens.typography.fonts.main.weights.medium as any,
@@ -83,7 +83,7 @@ export function getHueSliderStyles(tokens: ResolvedTokens, gamut: ColorGamut, di
       borderRadius: THUMB_SIZE / 2,
       backgroundColor: '#ffffff',
       borderWidth: 2,
-      borderColor: tokens.border[gamut],
+      borderColor: tokens.colors.primary.main.fontSecondary,
     },
   });
 }

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

@@ -31,7 +31,7 @@ export function HueSlider({
   const tokens = useTokens(1);
 
   const styles = React.useMemo(
-    () => getHueSliderStyles(tokens, tokens.gamut, disabled),
+    () => getHueSliderStyles(tokens, disabled),
     [tokens, disabled]
   );
 

package/src/composites/range-inputs/Slider/Slider.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 = 6;
 export const THUMB_SIZE = 16;
 
-export function getSliderStyles(tokens: ResolvedTokens, gamut: ColorGamut, disabled: boolean) {
+export function getSliderStyles(tokens: ResolvedTokens, disabled: boolean) {
   return StyleSheet.create({
     container: {
       gap: tokens.spacing['04'],
@@ -19,23 +19,23 @@ export function getSliderStyles(tokens: ResolvedTokens, gamut: ColorGamut, disab
       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,
     },
     value: {
       fontFamily: tokens.typography.fonts.main.family,
       fontSize: tokens.typography.fontSizes['04'],
       fontWeight: tokens.typography.fonts.main.weights.medium as any,
-      color: tokens.textPrimary[gamut],
+      color: tokens.colors.primary.main.divider,
     },
     valueInput: {
       width: 48,
       paddingVertical: 0,
       paddingHorizontal: 4,
       borderWidth: 1,
-      borderColor: tokens.border[gamut],
+      borderColor: tokens.colors.primary.main.fontSecondary,
       borderRadius: 4,
       backgroundColor: 'transparent',
-      color: tokens.textPrimary[gamut],
+      color: tokens.colors.primary.main.divider,
       fontFamily: tokens.typography.fonts.main.family,
       fontSize: tokens.typography.fontSizes['04'],
       fontWeight: tokens.typography.fonts.main.weights.medium as any,
@@ -52,21 +52,21 @@ export function getSliderStyles(tokens: ResolvedTokens, gamut: ColorGamut, disab
       right: 0,
       height: TRACK_HEIGHT,
       borderRadius: TRACK_HEIGHT / 2,
-      backgroundColor: tokens.border[gamut],
+      backgroundColor: tokens.colors.primary.main.fontSecondary,
     },
     trackFill: {
       position: 'absolute',
       left: 0,
       height: TRACK_HEIGHT,
       borderRadius: TRACK_HEIGHT / 2,
-      backgroundColor: tokens.accent.fill[gamut],
+      backgroundColor: tokens.colors.primary.emphasis.divider,
     },
     thumb: {
       position: 'absolute',
       width: THUMB_SIZE,
       height: THUMB_SIZE,
       borderRadius: THUMB_SIZE / 2,
-      backgroundColor: tokens.accent.fill[gamut],
+      backgroundColor: tokens.colors.primary.emphasis.divider,
     },
   });
 }

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

@@ -19,7 +19,7 @@ export function Slider({
   const tokens = useTokens(1);
 
   const styles = React.useMemo(
-    () => getSliderStyles(tokens, tokens.gamut, disabled),
+    () => getSliderStyles(tokens, disabled),
     [tokens, disabled]
   );