@newtonedev/components 0.1.4 → 0.1.6

package/dist/tokens/useTokens.d.ts

@@ -1,5 +1,12 @@
 import type { ElevationLevel } from '../theme/types';
 import type { ResolvedTokens } from './types';
+/**
+ * Extended tokens result that includes the resolved elevation level.
+ * This allows components to make elevation-aware styling decisions.
+ */
+export interface UseTokensResult extends ResolvedTokens {
+    elevation: ElevationLevel;
+}
 /**
  * Hook to compute design tokens for the current theme/mode/elevation.
  *
@@ -8,22 +15,12 @@ import type { ResolvedTokens } from './types';
  * 2. FrameContext values (from nearest parent Frame) are used when elevation is omitted
  * 3. Falls back to NewtoneProvider theme + elevation 1
  *
- * Theme always reads from FrameContext if present, falling back to NewtoneProvider.
+ * When inside a Frame and no explicit elevation override is given, reuses the
+ * Frame's pre-computed tokens to avoid redundant computeTokens calls.
  *
  * @param elevation - Elevation level (0=sunken, 1=default, 2=elevated).
  *                    When omitted, reads from FrameContext or defaults to 1.
- * @returns Resolved design tokens with all necessary colors
- *
- * @example
- * ```tsx
- * // Inside a <Frame theme="primary" elevation={1}>:
- * function MyComponent() {
- *   const tokens = useTokens(); // Gets primary theme, elevation 2 (mapped from Frame's 1)
- *   return (
- *     <View style={{ backgroundColor: srgbToHex(tokens.background.srgb) }} />
- *   );
- * }
- * ```
+ * @returns Resolved design tokens with all necessary colors + resolved elevation
  */
-export declare function useTokens(elevation?: ElevationLevel): ResolvedTokens;
+export declare function useTokens(elevation?: ElevationLevel): UseTokensResult;
 //# sourceMappingURL=useTokens.d.ts.map

package/dist/tokens/useTokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTokens.d.ts","sourceRoot":"","sources":["../../src/tokens/useTokens.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,SAAS,CAAC,SAAS,CAAC,EAAE,cAAc,GAAG,cAAc,CAwBpE"}
+{"version":3,"file":"useTokens.d.ts","sourceRoot":"","sources":["../../src/tokens/useTokens.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C;;;GAGG;AACH,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACrD,SAAS,EAAE,cAAc,CAAC;CAC3B;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,SAAS,CAAC,SAAS,CAAC,EAAE,cAAc,GAAG,eAAe,CA+BrE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newtonedev/components",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "React + React Native Web component library for Newtone",
   "license": "MIT",
   "repository": {

package/src/composites/actions/Button/Button.styles.ts

@@ -0,0 +1,338 @@
+import { srgbToHex } from 'newtone';
+import type { UseTokensResult } from '../../../tokens/useTokens';
+import type { PaletteTokens } from '../../../tokens/types';
+import type { ButtonVariant, ButtonSemantic, ButtonSize } from './Button.types';
+import type { TextSize } from '../../../primitives/Text/Text.types';
+
+/**
+ * Configuration returned by getButtonConfig
+ */
+export interface ButtonConfig {
+  variantColors: {
+    bg: string;
+    hoveredBg: string;
+    pressedBg: string;
+    textColor: string;
+    iconColor: string;
+    borderWidth: number;
+    borderColor?: string;
+  };
+  sizeTokens: {
+    padding: number;
+    gap: number;
+    borderRadius: number;
+    textSize: TextSize;
+    iconSize: number;
+  };
+}
+
+/**
+ * Padding object for asymmetric horizontal padding
+ */
+export interface ButtonPadding {
+  paddingLeft: number;
+  paddingRight: number;
+  paddingTop: number;
+  paddingBottom: number;
+}
+
+/**
+ * Compute asymmetric button padding based on icon/text presence.
+ *
+ * Text appears visually closer to borders than icons, so we add 8px extra
+ * horizontal padding on the text side for optical balance.
+ *
+ * @param size - Button size (determines base padding)
+ * @param hasIcon - Whether button has an icon
+ * @param hasText - Whether button has text
+ * @param iconPosition - Icon position relative to text
+ * @returns Padding object with all four sides
+ */
+export function computeButtonPadding(
+  size: ButtonSize,
+  hasIcon: boolean,
+  hasText: boolean,
+  iconPosition: 'left' | 'right'
+): ButtonPadding {
+  // Size-specific base padding
+  const basePadding: Record<ButtonSize, number> = {
+    sm: 8,
+    md: 12,
+    lg: 16,
+  };
+
+  const base = basePadding[size];
+  const textExtra = 8; // Optical correction for text vs icon
+
+  // Icon-only: square button
+  if (!hasText && hasIcon) {
+    return {
+      paddingLeft: base,
+      paddingRight: base,
+      paddingTop: base,
+      paddingBottom: base,
+    };
+  }
+
+  // Text-only: extra padding on both sides
+  if (hasText && !hasIcon) {
+    return {
+      paddingLeft: base + textExtra,
+      paddingRight: base + textExtra,
+      paddingTop: base,
+      paddingBottom: base,
+    };
+  }
+
+  // Icon + text: extra padding on text side only
+  if (hasText && hasIcon) {
+    if (iconPosition === 'left') {
+      return {
+        paddingLeft: base,
+        paddingRight: base + textExtra,
+        paddingTop: base,
+        paddingBottom: base,
+      };
+    } else {
+      return {
+        paddingLeft: base + textExtra,
+        paddingRight: base,
+        paddingTop: base,
+        paddingBottom: base,
+      };
+    }
+  }
+
+  // Fallback: symmetric base padding
+  return {
+    paddingLeft: base,
+    paddingRight: base,
+    paddingTop: base,
+    paddingBottom: base,
+  };
+}
+
+/**
+ * Resolve the PaletteTokens for a given semantic.
+ * Returns undefined for 'neutral' (handled separately).
+ */
+function getPaletteTokens(semantic: ButtonSemantic, tokens: UseTokensResult): PaletteTokens | undefined {
+  switch (semantic) {
+    case 'accent': return tokens.accent;
+    case 'success': return tokens.success;
+    case 'error': return tokens.error;
+    case 'warning': return tokens.warning;
+    default: return undefined;
+  }
+}
+
+/**
+ * Compute button configuration based on variant, semantic, size, and state.
+ *
+ * This function ONLY computes variant colors + size tokens.
+ * Layout concerns (flexbox, spacing, alignment) are handled by Wrapper primitive.
+ * Typography concerns (font, size, weight) are handled by Text primitive.
+ *
+ * Elevation-aware: neutral primary uses backgroundInteractive for consistent contrast.
+ * Semantic variants use proper PaletteTokens — no opacity hacks.
+ *
+ * @param variant - Button type (primary, secondary, tertiary)
+ * @param semantic - Button semantic meaning (neutral, accent, success, error, warning)
+ * @param size - Button size (sm, md, lg)
+ * @param disabled - Whether button is disabled
+ * @param tokens - Resolved tokens for current elevation
+ * @returns ButtonConfig with variantColors and sizeTokens
+ */
+export function getButtonConfig(
+  variant: ButtonVariant,
+  semantic: ButtonSemantic,
+  size: ButtonSize,
+  disabled: boolean,
+  tokens: UseTokensResult
+): ButtonConfig {
+  // Get size configuration
+  const sizeConfig = getSizeConfig(size, tokens);
+
+  // Get variant-specific colors
+  const variantColors = getVariantColors(variant, semantic, disabled, tokens);
+
+  return {
+    variantColors,
+    sizeTokens: {
+      padding: sizeConfig.padding,
+      gap: sizeConfig.gap,
+      borderRadius: sizeConfig.borderRadius,
+      textSize: sizeConfig.textSize,
+      iconSize: sizeConfig.iconSize,
+    },
+  };
+}
+
+/**
+ * Get size configuration with unified icon/text sizes across all sizes.
+ * Only padding and radius scale with size.
+ */
+function getSizeConfig(size: ButtonSize, tokens: UseTokensResult) {
+  const configs: Record<ButtonSize, {
+    padding: number;
+    gap: number;
+    borderRadius: number;
+    textSize: TextSize;
+    iconSize: number;
+  }> = {
+    sm: {
+      padding: 8,
+      gap: tokens.spacing['08'],
+      borderRadius: 8,
+      textSize: 'base', // 16px
+      iconSize: 24,
+    },
+    md: {
+      padding: 12,
+      gap: tokens.spacing['08'],
+      borderRadius: 12,
+      textSize: 'base', // 16px
+      iconSize: 24,
+    },
+    lg: {
+      padding: 16,
+      gap: tokens.spacing['08'],
+      borderRadius: 16,
+      textSize: 'base', // 16px
+      iconSize: 24,
+    },
+  };
+
+  return configs[size];
+}
+
+/**
+ * Get variant-specific colors from theme tokens.
+ * Handles disabled state override for all variants.
+ */
+function getVariantColors(
+  variant: ButtonVariant,
+  semantic: ButtonSemantic,
+  disabled: boolean,
+  tokens: UseTokensResult
+) {
+  // Disabled state overrides for all variants
+  if (disabled) {
+    const baseColors = getVariantColorsForState(variant, semantic, tokens);
+    const disabledBg = srgbToHex(tokens.backgroundSunken.srgb);
+    return {
+      ...baseColors,
+      bg: disabledBg,
+      hoveredBg: disabledBg,
+      pressedBg: disabledBg,
+      textColor: srgbToHex(tokens.textSecondary.srgb),
+      iconColor: srgbToHex(tokens.textSecondary.srgb),
+    };
+  }
+
+  return getVariantColorsForState(variant, semantic, tokens);
+}
+
+/**
+ * Get variant colors for non-disabled state.
+ * Implements 3 types × 5 semantics = 15 combinations.
+ * Uses proper PaletteTokens for all semantic variants — no opacity hacks.
+ */
+function getVariantColorsForState(
+  variant: ButtonVariant,
+  semantic: ButtonSemantic,
+  tokens: UseTokensResult
+) {
+  const paletteTokens = getPaletteTokens(semantic, tokens);
+
+  // PRIMARY VARIANT: Filled background
+  if (variant === 'primary') {
+    if (semantic === 'neutral') {
+      // Neutral primary - uses backgroundInteractive tokens for consistent contrast across elevations
+      return {
+        bg: srgbToHex(tokens.backgroundInteractive.srgb),
+        hoveredBg: srgbToHex(tokens.backgroundInteractiveHover.srgb),
+        pressedBg: srgbToHex(tokens.backgroundInteractiveActive.srgb),
+        textColor: srgbToHex(tokens.textPrimary.srgb),
+        iconColor: srgbToHex(tokens.textPrimary.srgb),
+        borderWidth: 1,
+        borderColor: 'transparent',
+      };
+    }
+
+    // Semantic primary (accent, success, error, warning) — uses palette fill tokens
+    return {
+      bg: srgbToHex(paletteTokens!.fill.srgb),
+      hoveredBg: srgbToHex(paletteTokens!.fillHover.srgb),
+      pressedBg: srgbToHex(paletteTokens!.fillActive.srgb),
+      textColor: srgbToHex(paletteTokens!.onFill.srgb),
+      iconColor: srgbToHex(paletteTokens!.onFill.srgb),
+      borderWidth: 1,
+      borderColor: 'transparent',
+    };
+  }
+
+  // SECONDARY VARIANT: Outlined (border + subtle background for non-neutral)
+  if (variant === 'secondary') {
+    if (semantic === 'neutral') {
+      // Shifted action scale: transparent → 01 (hover) → 02 (pressed)
+      return {
+        bg: 'transparent',
+        hoveredBg: srgbToHex(tokens.backgroundInteractive.srgb),
+        pressedBg: srgbToHex(tokens.backgroundInteractiveHover.srgb),
+        textColor: srgbToHex(tokens.textPrimary.srgb),
+        iconColor: srgbToHex(tokens.textPrimary.srgb),
+        borderWidth: 1,
+        borderColor: srgbToHex(tokens.border.srgb),
+      };
+    }
+
+    // Semantic secondary — uses palette surface tokens for subtle bg
+    return {
+      bg: srgbToHex(paletteTokens!.background.srgb),
+      hoveredBg: srgbToHex(paletteTokens!.backgroundInteractive.srgb),
+      pressedBg: srgbToHex(paletteTokens!.backgroundInteractiveHover.srgb),
+      textColor: srgbToHex(paletteTokens!.fill.srgb),
+      iconColor: srgbToHex(paletteTokens!.fill.srgb),
+      borderWidth: 1,
+      borderColor: 'transparent',
+    };
+  }
+
+  // TERTIARY VARIANT: Ghost (text-only, no visible border)
+  if (variant === 'tertiary') {
+    if (semantic === 'neutral') {
+      // Shifted action scale: transparent → 01 (hover) → 02 (pressed)
+      return {
+        bg: 'transparent',
+        hoveredBg: srgbToHex(tokens.backgroundInteractive.srgb),
+        pressedBg: srgbToHex(tokens.backgroundInteractiveHover.srgb),
+        textColor: srgbToHex(tokens.textPrimary.srgb),
+        iconColor: srgbToHex(tokens.textPrimary.srgb),
+        borderWidth: 1,
+        borderColor: 'transparent',
+      };
+    }
+
+    // Semantic tertiary — uses palette surface tokens for hover/pressed
+    return {
+      bg: 'transparent',
+      hoveredBg: srgbToHex(paletteTokens!.background.srgb),
+      pressedBg: srgbToHex(paletteTokens!.backgroundInteractive.srgb),
+      textColor: srgbToHex(paletteTokens!.fill.srgb),
+      iconColor: srgbToHex(paletteTokens!.fill.srgb),
+      borderWidth: 1,
+      borderColor: 'transparent',
+    };
+  }
+
+  // Fallback (should never reach here with proper types)
+  return {
+    bg: 'transparent',
+    hoveredBg: 'transparent',
+    pressedBg: 'transparent',
+    textColor: srgbToHex(tokens.textPrimary.srgb),
+    iconColor: srgbToHex(tokens.textPrimary.srgb),
+    borderWidth: 0,
+  };
+}

package/src/composites/actions/Button/Button.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import { Pressable } from 'react-native';
+import type { ButtonProps } from './Button.types';
+import { getButtonConfig, computeButtonPadding } from './Button.styles';
+import { useTokens } from '../../../tokens/useTokens';
+import { Icon } from '../../../primitives/Icon/Icon';
+import { Text } from '../../../primitives/Text/Text';
+import { Wrapper } from '../../../primitives/Wrapper/Wrapper';
+
+/**
+ * Button — A composite component demonstrating the primitive composition pattern.
+ *
+ * **Composition Architecture:**
+ * - Pressable (RN primitive) — handles interaction
+ * - Wrapper (primitive) — handles layout (direction, gap, padding, alignment)
+ * - Icon (primitive) — handles icon rendering with theme tokens
+ * - Text (primitive) — handles typography with theme tokens
+ *
+ * This component does NOT manually compute flexbox, spacing, or typography styles.
+ * Instead, it delegates to primitives which already handle these concerns.
+ *
+ * Automatically adapts to the current theme and mode from NewtoneProvider.
+ *
+ * @example
+ * ```tsx
+ * <Button variant="primary" semantic="accent" size="md" onPress={() => console.log('Pressed')}>
+ *   Click me
+ * </Button>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Button icon="add" variant="primary" semantic="accent" onPress={handleAdd}>
+ *   New Item
+ * </Button>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Button icon="delete" variant="tertiary" semantic="neutral" size="sm" onPress={handleDelete} />
+ * ```
+ */
+export function Button({
+  children,
+  icon,
+  iconPosition = 'left',
+  variant = 'primary',
+  semantic = 'neutral',
+  size = 'md',
+  disabled = false,
+  style,
+  textStyle,
+  ...pressableProps
+}: ButtonProps) {
+  // Read tokens from current elevation context
+  // backgroundInteractive provides consistent contrast across all elevations
+  const tokens = useTokens();
+
+  // Get color tokens + size config (now using backgroundInteractive for consistent contrast)
+  const { variantColors, sizeTokens } = React.useMemo(
+    () => getButtonConfig(variant, semantic, size, disabled, tokens),
+    [variant, semantic, size, disabled, tokens]
+  );
+
+  // Compute asymmetric padding (+8px on text side for optical balance)
+  const padding = React.useMemo(
+    () => computeButtonPadding(size, !!icon, !!children, iconPosition),
+    [size, icon, children, iconPosition]
+  );
+
+  return (
+    <Pressable disabled={disabled} {...pressableProps}>
+      {({ pressed, hovered }: { pressed: boolean; hovered?: boolean }) => (
+        // Wrapper handles layout: direction, gap, alignment (padding via style)
+        <Wrapper
+          direction="horizontal"
+          align="center"
+          justify="center"
+          gap={sizeTokens.gap}
+          style={[
+            {
+              ...padding, // Asymmetric horizontal padding for text optical balance
+              backgroundColor: pressed && !disabled
+                ? variantColors.pressedBg
+                : hovered && !disabled
+                  ? variantColors.hoveredBg
+                  : variantColors.bg,
+              borderRadius: sizeTokens.borderRadius,
+              borderWidth: variantColors.borderWidth, // Always 1 for consistent sizing
+              borderColor: variantColors.borderColor || 'transparent',
+              opacity: disabled ? 0.4 : 1,
+            },
+            ...(Array.isArray(style) ? style : style ? [style] : []),
+          ]}
+        >
+          {icon && iconPosition === 'left' && (
+            <Icon name={icon} size={sizeTokens.iconSize} color={variantColors.iconColor} />
+          )}
+          {children && (
+            // Text primitive with semantic props + color style override
+            <Text
+              size={sizeTokens.textSize}
+              weight="semibold"
+              style={[
+                { color: variantColors.textColor },
+                ...(Array.isArray(textStyle) ? textStyle : textStyle ? [textStyle] : []),
+              ]}
+            >
+              {children}
+            </Text>
+          )}
+          {icon && iconPosition === 'right' && (
+            <Icon name={icon} size={sizeTokens.iconSize} color={variantColors.iconColor} />
+          )}
+        </Wrapper>
+      )}
+    </Pressable>
+  );
+}

package/src/{Button → composites/actions/Button}/Button.types.ts

@@ -1,9 +1,14 @@
 import type { PressableProps, ViewStyle, TextStyle } from 'react-native';
 
 /**
- * Visual variants for the Button component
+ * Visual type for the Button component (describes visual weight)
  */
-export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'outline';
+export type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
+
+/**
+ * Semantic meaning for the Button component (describes color purpose)
+ */
+export type ButtonSemantic = 'neutral' | 'accent' | 'success' | 'error' | 'warning';
 
 /**
  * Size presets for the Button component
@@ -38,11 +43,17 @@ export interface ButtonProps extends Omit<PressableProps, 'children' | 'style'>
   readonly iconPosition?: ButtonIconPosition;
 
   /**
-   * Visual variant
+   * Visual type (describes visual weight: filled, outlined, ghost)
    * @default 'primary'
    */
   readonly variant?: ButtonVariant;
 
+  /**
+   * Semantic meaning (describes color purpose: neutral, accent, success, error, warning)
+   * @default 'neutral'
+   */
+  readonly semantic?: ButtonSemantic;
+
   /**
    * Size preset
    * @default 'md'

package/src/{Select → composites/form-controls/Select}/Select.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 getSelectStyles(
   tokens: ResolvedTokens,

package/src/{Select → composites/form-controls/Select}/Select.tsx

@@ -2,11 +2,11 @@ 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 } from '../../../tokens/useTokens';
 import { getSelectStyles } from './Select.styles';
-import { Icon } from '../primitives/Icon/Icon';
-import { Popover } from '../Popover/Popover';
-import { usePopover } from '../Popover/usePopover';
+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';

package/src/{Select → composites/form-controls/Select}/SelectOption.tsx

@@ -1,8 +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 { Icon } from '../primitives/Icon/Icon';
+import { useTokens } from '../../../tokens/useTokens';
+import { Icon } from '../../../primitives/Icon/Icon';
 import { srgbToHex } from 'newtone';
 
 interface SelectOptionRowProps {
@@ -80,7 +80,7 @@ export function SelectOptionRow({
           },
           isSelected && {
             fontWeight: tokens.typography.weight.semibold as any,
-            color: srgbToHex(tokens.interactive.srgb),
+            color: srgbToHex(tokens.accent.fill.srgb),
           },
           option.disabled && {
             color: srgbToHex(tokens.textSecondary.srgb),
@@ -95,7 +95,7 @@ export function SelectOptionRow({
           <Icon
             name="check"
             size={fontSize}
-            color={srgbToHex(tokens.interactive.srgb)}
+            color={srgbToHex(tokens.accent.fill.srgb)}
           />
         </View>
       )}

package/src/{TextInput → composites/form-controls/TextInput}/TextInput.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 getTextInputStyles(tokens: ResolvedTokens, disabled: boolean) {
   return StyleSheet.create({

package/src/{TextInput → composites/form-controls/TextInput}/TextInput.tsx

@@ -1,7 +1,7 @@
 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 } from '../../../tokens/useTokens';
 import { getTextInputStyles } from './TextInput.styles';
 import { srgbToHex } from 'newtone';
 

package/src/{Toggle → composites/form-controls/Toggle}/Toggle.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_WIDTH = 40;
 const TRACK_HEIGHT = 22;
@@ -30,7 +30,7 @@ export function getToggleStyles(
       height: TRACK_HEIGHT,
       borderRadius: TRACK_HEIGHT / 2,
       backgroundColor: value
-        ? srgbToHex(tokens.interactive.srgb)
+        ? srgbToHex(tokens.accent.fill.srgb)
         : srgbToHex(tokens.border.srgb),
       justifyContent: 'center',
       paddingHorizontal: THUMB_OFFSET,

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

package/src/{AppShell → composites/layout/AppShell}/AppShell.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 getAppShellStyles(tokens: ResolvedTokens) {
   return StyleSheet.create({

package/src/{AppShell → composites/layout/AppShell}/AppShell.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
 import type { AppShellProps } from './AppShell.types';
-import { useTokens } from '../tokens/useTokens';
+import { useTokens } from '../../../tokens/useTokens';
 import { getAppShellStyles } from './AppShell.styles';
 
 export function AppShell({ sidebar, children }: AppShellProps) {

package/src/{Card → composites/layout/Card}/Card.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 getCardStyles(tokens: ResolvedTokens, disabled: boolean) {
   return StyleSheet.create({