@newtonedev/components 0.1.12 → 0.1.14

package/src/composites/display/Chip/Chip.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { Pressable } from 'react-native';
+import type { ChipProps } from './Chip.types';
+import { getChipConfig } from './Chip.styles';
+import { useTokens } from 'newtone-api';
+import { Icon } from '../../../primitives/Icon/Icon';
+import { Text } from '../../../primitives/Text';
+import { Wrapper } from '../../../primitives/Wrapper/Wrapper';
+
+/**
+ * Chip — A pill-shaped label for tags, filters, badges, and status indicators.
+ *
+ * **Composition Architecture:**
+ * - Pressable (RN primitive) — handles interaction (when onPress is provided)
+ * - Wrapper (primitive) — handles layout (direction, gap, padding, alignment)
+ * - Icon (primitive) — handles optional leading icon
+ * - Text (primitive) — handles typography with theme tokens
+ *
+ * @example
+ * ```tsx
+ * // Static label
+ * <Chip>Design Systems</Chip>
+ *
+ * // Interactive filter chip
+ * <Chip selected={isActive} onPress={() => toggle()}>Color Science</Chip>
+ *
+ * // With icon
+ * <Chip icon="check" semantic="success">Verified</Chip>
+ * ```
+ */
+export function Chip({
+  children,
+  variant = 'tinted',
+  size = 'md',
+  semantic = 'neutral',
+  selected = false,
+  onPress,
+  disabled = false,
+  icon,
+  style,
+}: ChipProps) {
+  const tokens = useTokens();
+
+  const { colors, sizeTokens } = React.useMemo(
+    () => getChipConfig(variant, semantic, size, selected, disabled, tokens),
+    [variant, semantic, size, selected, disabled, tokens]
+  );
+
+  const content = (state?: { pressed: boolean; hovered?: boolean }) => (
+    <Wrapper
+      direction="horizontal"
+      align="center"
+      gap={sizeTokens.gap}
+      style={[
+        {
+          paddingLeft: sizeTokens.paddingX,
+          paddingRight: sizeTokens.paddingX,
+          paddingTop: sizeTokens.paddingY,
+          paddingBottom: sizeTokens.paddingY,
+          backgroundColor: state?.pressed && !disabled
+            ? colors.pressedBg
+            : state?.hovered && !disabled
+              ? colors.hoveredBg
+              : colors.bg,
+          borderRadius: 99,
+          borderWidth: colors.borderWidth,
+          borderColor: colors.borderColor || 'transparent',
+          opacity: disabled ? 0.4 : 1,
+        },
+        ...(Array.isArray(style) ? style : style ? [style] : []),
+      ]}
+    >
+      {icon && (
+        <Icon name={icon} size={sizeTokens.iconSize} color={colors.iconColor} />
+      )}
+      <Text
+        role={sizeTokens.textRole}
+        weight={selected ? 'bold' : 'medium'}
+        style={{ color: colors.textColor }}
+      >
+        {children}
+      </Text>
+    </Wrapper>
+  );
+
+  if (onPress) {
+    return (
+      <Pressable onPress={onPress} disabled={disabled}>
+        {({ pressed, hovered }: { pressed: boolean; hovered?: boolean }) =>
+          content({ pressed, hovered })
+        }
+      </Pressable>
+    );
+  }
+
+  return content();
+}

package/src/composites/display/Chip/Chip.types.ts

@@ -0,0 +1,74 @@
+import type { ViewStyle } from 'react-native';
+
+/**
+ * Visual variant for the Chip component
+ */
+export type ChipVariant = 'filled' | 'tinted' | 'outlined';
+
+/**
+ * Semantic meaning for the Chip component (describes color purpose)
+ */
+export type ChipSemantic = 'neutral' | 'accent' | 'success' | 'error' | 'warning';
+
+/**
+ * Size presets for the Chip component
+ */
+export type ChipSize = 'sm' | 'md';
+
+/**
+ * Props for the Chip component
+ */
+export interface ChipProps {
+  /**
+   * Chip label content.
+   */
+  readonly children: React.ReactNode;
+
+  /**
+   * Visual variant (describes visual treatment)
+   * @default 'tinted'
+   */
+  readonly variant?: ChipVariant;
+
+  /**
+   * Size preset
+   * @default 'md'
+   */
+  readonly size?: ChipSize;
+
+  /**
+   * Semantic meaning (describes color purpose)
+   * @default 'neutral'
+   */
+  readonly semantic?: ChipSemantic;
+
+  /**
+   * Selected state — overrides appearance to "strong" with bold weight.
+   * Useful for filter bars and toggle groups.
+   * @default false
+   */
+  readonly selected?: boolean;
+
+  /**
+   * Press handler — makes the chip interactive.
+   * When provided, the chip renders as a Pressable.
+   */
+  readonly onPress?: () => void;
+
+  /**
+   * Disabled state
+   * @default false
+   */
+  readonly disabled?: boolean;
+
+  /**
+   * Material Symbol icon name (e.g. 'check', 'close').
+   * Renders a leading icon before the label.
+   */
+  readonly icon?: string;
+
+  /**
+   * Custom style overrides for container
+   */
+  readonly style?: ViewStyle | ViewStyle[];
+}

package/src/composites/display/Chip/index.ts

@@ -0,0 +1,2 @@
+export { Chip } from './Chip';
+export type { ChipProps, ChipVariant, ChipSemantic, ChipSize } from './Chip.types';

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

@@ -1,13 +1,15 @@
 import { StyleSheet } from 'react-native';
-import { srgbToHex } from 'newtone';
-import type { ResolvedTokens } from '../../../tokens/types';
+import type { ResolvedTokens, AppearanceTokens, ThemeName, AppearanceName } from 'newtone-api';
 
 export function getSelectStyles(
   tokens: ResolvedTokens,
   disabled: boolean,
   size: 'sm' | 'md',
-  isOpen: boolean
+  isOpen: boolean,
+  theme: ThemeName = 'primary',
+  appearance: AppearanceName = 'main',
 ) {
+  const at: AppearanceTokens = tokens.colors[theme][appearance];
   const isSm = size === 'sm';
   const fontSize = isSm ? tokens.typography.fontSizes['04'] : tokens.typography.fontSizes['05'];
   const iconSize = fontSize + 2;
@@ -24,14 +26,14 @@ export function getSelectStyles(
       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: at.fontTertiary,
     },
     trigger: {
       flexDirection: 'row',
       alignItems: 'center',
-      backgroundColor: srgbToHex(tokens.backgroundSunken.srgb),
+      backgroundColor: at.fontSecondary,
       borderWidth: 1,
-      borderColor: srgbToHex(tokens.border.srgb),
+      borderColor: at.fontSecondary,
       borderRadius: tokens.radius.md,
       paddingVertical,
       paddingLeft: paddingHorizontal,
@@ -42,9 +44,7 @@ export function getSelectStyles(
       flex: 1,
       fontFamily: tokens.typography.fonts.main.family,
       fontSize,
-      color: disabled
-        ? srgbToHex(tokens.textSecondary.srgb)
-        : srgbToHex(tokens.textPrimary.srgb),
+      color: disabled ? at.fontTertiary : at.divider,
     },
     iconWrapper: {
       position: 'absolute',
@@ -57,7 +57,7 @@ export function getSelectStyles(
       fontFamily: tokens.typography.fonts.main.family,
       fontSize: tokens.typography.fontSizes['01'],
       fontWeight: tokens.typography.fonts.main.weights.medium as any,
-      color: srgbToHex(tokens.textSecondary.srgb),
+      color: at.fontTertiary,
       textTransform: 'uppercase',
       letterSpacing: 0.5,
       paddingVertical: tokens.spacing['04'],

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

@@ -2,14 +2,13 @@ import React, { useMemo } from 'react';
 import { View, Text, Pressable, ScrollView } from 'react-native';
 import type { SelectProps, SelectOption } from './Select.types';
 import { isOptionGroup } from './Select.types';
-import { useTokens } from '../../../tokens/useTokens';
+import { useTokens, useFrameContext } from 'newtone-api';
 import { getSelectStyles } from './Select.styles';
 import { Icon } from '../../../primitives/Icon/Icon';
 import { Popover } from '../../overlays/Popover/Popover';
 import { usePopover } from '../../overlays/Popover/usePopover';
 import { useSelect } from './useSelect';
 import { SelectOptionRow } from './SelectOption';
-import { srgbToHex } from 'newtone';
 
 function flattenOptions(items: readonly (SelectOption | { readonly label: string; readonly options: readonly SelectOption[] })[]): SelectOption[] {
   const result: SelectOption[] = [];
@@ -36,6 +35,7 @@ export function Select({
   style,
 }: SelectProps) {
   const tokens = useTokens(1);
+  const frameCtx = useFrameContext();
   const { isOpen, open, close, toggle } = usePopover();
 
   const flatOptions = useMemo(() => flattenOptions(options), [options]);
@@ -52,17 +52,19 @@ export function Select({
     onOpen: open,
   });
 
+  const inheritedTheme = frameCtx?.theme;
+  const inheritedAppearance = frameCtx?.appearance;
+
   const styles = useMemo(
-    () => getSelectStyles(tokens, disabled, size, isOpen),
-    [tokens, disabled, size, isOpen]
+    () => getSelectStyles(tokens, disabled, size, isOpen, inheritedTheme, inheritedAppearance),
+    [tokens, disabled, size, isOpen, inheritedTheme, inheritedAppearance]
   );
 
   const selectedOption = flatOptions.find((o) => o.value === value);
   const displayLabel = selectedOption?.label ?? placeholder ?? value;
 
-  const iconColor = disabled
-    ? srgbToHex(tokens.textSecondary.srgb)
-    : srgbToHex(tokens.textPrimary.srgb);
+  const at = tokens.colors[inheritedTheme ?? 'primary'][inheritedAppearance ?? 'main'];
+  const iconColor = disabled ? at.fontTertiary : at.divider;
 
   // onKeyDown is a web-only prop supported by react-native-web but not in RN types
   const triggerWebProps = { onKeyDown: handleKeyDown } as any;

package/src/composites/form-controls/Select/SelectOption.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import { Pressable, Text, View } from 'react-native';
 import type { SelectOption as SelectOptionType, SelectProps } from './Select.types';
-import { useTokens } from '../../../tokens/useTokens';
+import { useTokens, useFrameContext } from 'newtone-api';
 import { Icon } from '../../../primitives/Icon/Icon';
-import { srgbToHex } from 'newtone';
 
 interface SelectOptionRowProps {
   readonly option: SelectOptionType;
@@ -23,6 +22,9 @@ export function SelectOptionRow({
   size,
 }: SelectOptionRowProps) {
   const tokens = useTokens(1);
+  const frameCtx = useFrameContext();
+  const at = tokens.colors[frameCtx?.theme ?? 'primary'][frameCtx?.appearance ?? 'main'];
+  const emphasisAt = tokens.colors[frameCtx?.theme ?? 'primary'].emphasis;
 
   const paddingVertical = size === 'sm' ? tokens.spacing['04'] : tokens.spacing['08'];
   const paddingHorizontal = size === 'sm' ? tokens.spacing['08'] : tokens.spacing['12'];
@@ -56,11 +58,11 @@ export function SelectOptionRow({
           paddingHorizontal,
         },
         isSelected && {
-          backgroundColor: srgbToHex(tokens.backgroundSunken.srgb),
+          backgroundColor: at.fontSecondary,
         },
         isFocused &&
           !isSelected && {
-            backgroundColor: `${srgbToHex(tokens.border.srgb)}20`,
+            backgroundColor: `${at.fontSecondary}20`,
           },
         option.disabled && {
           opacity: 0.5,
@@ -76,14 +78,14 @@ export function SelectOptionRow({
             flex: 1,
             fontFamily: tokens.typography.fonts.main.family,
             fontSize,
-            color: srgbToHex(tokens.textPrimary.srgb),
+            color: at.divider,
           },
           isSelected && {
             fontWeight: tokens.typography.fonts.main.weights.medium as any,
-            color: srgbToHex(tokens.accent.fill.srgb),
+            color: emphasisAt.divider,
           },
           option.disabled && {
-            color: srgbToHex(tokens.textSecondary.srgb),
+            color: at.fontTertiary,
           },
         ]}
         numberOfLines={1}
@@ -95,7 +97,7 @@ export function SelectOptionRow({
           <Icon
             name="check"
             size={fontSize}
-            color={srgbToHex(tokens.accent.fill.srgb)}
+            color={emphasisAt.divider}
           />
         </View>
       )}

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

@@ -1,8 +1,13 @@
 import { StyleSheet } from 'react-native';
-import { srgbToHex } from 'newtone';
-import type { ResolvedTokens } from '../../../tokens/types';
+import type { ResolvedTokens, AppearanceTokens, ThemeName, AppearanceName } from 'newtone-api';
 
-export function getTextInputStyles(tokens: ResolvedTokens, disabled: boolean) {
+export function getTextInputStyles(
+  tokens: ResolvedTokens,
+  disabled: boolean,
+  theme: ThemeName = 'primary',
+  appearance: AppearanceName = 'main',
+) {
+  const at: AppearanceTokens = tokens.colors[theme][appearance];
   return StyleSheet.create({
     container: {
       gap: tokens.spacing['04'],
@@ -11,20 +16,18 @@ export function getTextInputStyles(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: at.fontTertiary,
     },
     input: {
       fontFamily: tokens.typography.fonts.main.family,
-      backgroundColor: srgbToHex(tokens.backgroundSunken.srgb),
+      backgroundColor: at.fontSecondary,
       borderWidth: 1,
-      borderColor: srgbToHex(tokens.border.srgb),
+      borderColor: at.fontSecondary,
       borderRadius: tokens.radius.md,
       paddingVertical: tokens.spacing['08'],
       paddingHorizontal: tokens.spacing['12'],
       fontSize: tokens.typography.fontSizes['05'],
-      color: disabled
-        ? srgbToHex(tokens.textSecondary.srgb)
-        : srgbToHex(tokens.textPrimary.srgb),
+      color: disabled ? at.fontTertiary : at.divider,
       opacity: disabled ? 0.5 : 1,
     },
   });

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

@@ -1,9 +1,8 @@
 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 { useTokens, useFrameContext } from 'newtone-api';
 import { getTextInputStyles } from './TextInput.styles';
-import { srgbToHex } from 'newtone';
 
 export function TextInput({
   label,
@@ -12,10 +11,13 @@ export function TextInput({
   ...textInputProps
 }: TextInputProps) {
   const tokens = useTokens(1);
+  const frameCtx = useFrameContext();
+  const theme = frameCtx?.theme ?? 'primary';
+  const appearance = frameCtx?.appearance ?? 'main';
 
   const styles = React.useMemo(
-    () => getTextInputStyles(tokens, disabled),
-    [tokens, disabled]
+    () => getTextInputStyles(tokens, disabled, theme, appearance),
+    [tokens, disabled, theme, appearance]
   );
 
   return (
@@ -24,7 +26,7 @@ export function TextInput({
       <RNTextInput
         style={styles.input}
         editable={!disabled}
-        placeholderTextColor={srgbToHex(tokens.textSecondary.srgb)}
+        placeholderTextColor={tokens.colors[theme][appearance].fontTertiary}
         {...textInputProps}
       />
     </View>

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

@@ -1,6 +1,5 @@
 import { StyleSheet } from 'react-native';
-import { srgbToHex } from 'newtone';
-import type { ResolvedTokens } from '../../../tokens/types';
+import type { ResolvedTokens, AppearanceTokens, ThemeName, AppearanceName } from 'newtone-api';
 
 const TRACK_WIDTH = 40;
 const TRACK_HEIGHT = 22;
@@ -10,8 +9,12 @@ const THUMB_OFFSET = 2;
 export function getToggleStyles(
   tokens: ResolvedTokens,
   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: srgbToHex(tokens.textSecondary.srgb),
+      color: at.fontTertiary,
     },
     track: {
       width: TRACK_WIDTH,
       height: TRACK_HEIGHT,
       borderRadius: TRACK_HEIGHT / 2,
       backgroundColor: value
-        ? srgbToHex(tokens.accent.fill.srgb)
-        : srgbToHex(tokens.border.srgb),
+        ? 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: srgbToHex(tokens.background.srgb),
+      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 '../../../tokens/useTokens';
+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, 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,14 +1,18 @@
 import { StyleSheet } from 'react-native';
-import { srgbToHex } from 'newtone';
-import type { ResolvedTokens } from '../../../tokens/types';
+import type { ResolvedTokens, AppearanceTokens, ThemeName, AppearanceName } from 'newtone-api';
 
-export function getAppShellStyles(tokens: ResolvedTokens) {
+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: srgbToHex(tokens.background.srgb),
+      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 '../../../tokens/useTokens';
+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]);
+  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,13 +1,18 @@
 import { StyleSheet } from 'react-native';
-import { srgbToHex } from 'newtone';
-import type { ResolvedTokens } from '../../../tokens/types';
+import type { ResolvedTokens, AppearanceTokens, ThemeName, AppearanceName } from 'newtone-api';
 
-export function getCardStyles(tokens: ResolvedTokens, 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: srgbToHex(tokens.background.srgb),
+      backgroundColor: at.background,
       borderWidth: 1,
-      borderColor: srgbToHex(tokens.border.srgb),
+      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 '../../../tokens/useTokens';
+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, disabled),
-    [tokens, disabled]
+    () => getCardStyles(tokens, disabled, frameCtx?.theme, frameCtx?.appearance),
+    [tokens, disabled, frameCtx?.theme, frameCtx?.appearance]
   );
 
   return (

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/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;
+}