@newtonedev/components 0.1.3 → 0.1.5

package/dist/primitives/Icon/Icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/primitives/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAIvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C;;;;;;;;;;;;GAYG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,IAAI,EACJ,WAAW,EACX,IAAQ,EACR,KAAK,EACL,SAAa,EACb,KAAK,EACL,OAAO,EAEP,kBAAkB,EAElB,MAAM,EACN,QAAQ,EACR,GAAG,GACJ,EAAE,SAAS,qBAsDX"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/primitives/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAIvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C;;;;;;;;;;;;GAYG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,IAAI,EACJ,WAAW,EACX,IAAQ,EACR,KAAK,EACL,SAAa,EACb,KAAK,EACL,OAAO,EAEP,kBAAkB,EAElB,MAAM,EACN,QAAQ,EACR,GAAG,GACJ,EAAE,SAAS,qBAqEX"}

package/dist/primitives/Wrapper/Wrapper.types.d.ts

@@ -41,7 +41,7 @@ export interface WrapperProps {
      * Child elements. Must be React Native elements (View, Text, etc.).
      * Unlike Frame, raw strings are NOT auto-wrapped in `<Text>`.
      */
-    readonly children: React.ReactNode;
+    readonly children?: React.ReactNode;
     /** Flex direction. @default 'vertical' */
     readonly direction?: Direction;
     /** Enable flex wrap. @default false */

package/dist/primitives/Wrapper/Wrapper.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Wrapper.types.d.ts","sourceRoot":"","sources":["../../../src/primitives/Wrapper/Wrapper.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,KAAK,EACV,SAAS,EACT,SAAS,EACT,aAAa,EACb,WAAW,EACX,OAAO,EACP,UAAU,EACX,MAAM,sBAAsB,CAAC;AAE9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,MAAM,WAAW,YAAY;IAC3B;;;OAGG;IACH,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAInC,0CAA0C;IAC1C,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC;IAE/B,uCAAuC;IACvC,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IAExB,6CAA6C;IAC7C,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAI3B,wCAAwC;IACxC,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAE3B,2CAA2C;IAC3C,QAAQ,CAAC,OAAO,CAAC,EAAE,aAAa,CAAC;IAIjC;;;;;;;;;;OAUG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC;IAE/B;;;;;;;;;OASG;IACH,QAAQ,CAAC,GAAG,CAAC,EAAE,OAAO,CAAC;IAIvB;;;;;;;OAOG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAE5B;;;;;;;OAOG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC;IAE7B,+BAA+B;IAC/B,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAE3B,+BAA+B;IAC/B,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAE3B,gCAAgC;IAChC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAE5B,gCAAgC;IAChC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAI5B,iFAAiF;IACjF,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAEzB,mFAAmF;IACnF,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAE3B,0CAA0C;IAC1C,QAAQ,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAI/B,6CAA6C;IAC7C,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CAC1C"}
+{"version":3,"file":"Wrapper.types.d.ts","sourceRoot":"","sources":["../../../src/primitives/Wrapper/Wrapper.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,KAAK,EACV,SAAS,EACT,SAAS,EACT,aAAa,EACb,WAAW,EACX,OAAO,EACP,UAAU,EACX,MAAM,sBAAsB,CAAC;AAE9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,MAAM,WAAW,YAAY;IAC3B;;;OAGG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAIpC,0CAA0C;IAC1C,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC;IAE/B,uCAAuC;IACvC,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IAExB,6CAA6C;IAC7C,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAI3B,wCAAwC;IACxC,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAE3B,2CAA2C;IAC3C,QAAQ,CAAC,OAAO,CAAC,EAAE,aAAa,CAAC;IAIjC;;;;;;;;;;OAUG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC;IAE/B;;;;;;;;;OASG;IACH,QAAQ,CAAC,GAAG,CAAC,EAAE,OAAO,CAAC;IAIvB;;;;;;;OAOG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAE5B;;;;;;;OAOG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC;IAE7B,+BAA+B;IAC/B,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAE3B,+BAA+B;IAC/B,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAE3B,gCAAgC;IAChC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAE5B,gCAAgC;IAChC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAI5B,iFAAiF;IACjF,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAEzB,mFAAmF;IACnF,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAE3B,0CAA0C;IAC1C,QAAQ,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAI/B,6CAA6C;IAC7C,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CAC1C"}

package/dist/registry/registry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../src/registry/registry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE3D,eAAO,MAAM,UAAU,EAAE,SAAS,YAAY,EAK7C,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,SAAS,aAAa,EA4X9C,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAAE,EAAE,MAAM,GAAG,aAAa,GAAG,SAAS,CAElE;AAED,wBAAgB,WAAW,CAAC,EAAE,EAAE,MAAM,GAAG,YAAY,GAAG,SAAS,CAEhE;AAED,wBAAgB,uBAAuB,CAAC,UAAU,EAAE,MAAM,GAAG,SAAS,aAAa,EAAE,CAEpF"}
+{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../src/registry/registry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE3D,eAAO,MAAM,UAAU,EAAE,SAAS,YAAY,EAO7C,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,SAAS,aAAa,EA8kB9C,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAAE,EAAE,MAAM,GAAG,aAAa,GAAG,SAAS,CAElE;AAED,wBAAgB,WAAW,CAAC,EAAE,EAAE,MAAM,GAAG,YAAY,GAAG,SAAS,CAEhE;AAED,wBAAgB,uBAAuB,CAAC,UAAU,EAAE,MAAM,GAAG,SAAS,aAAa,EAAE,CAEpF"}

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

@@ -1 +1 @@
-{"version":3,"file":"computeTokens.d.ts","sourceRoot":"","sources":["../../src/tokens/computeTokens.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"computeTokens.d.ts","sourceRoot":"","sources":["../../src/tokens/computeTokens.ts"],"names":[],"mappings":"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"}

package/dist/tokens/types.d.ts

@@ -9,6 +9,16 @@ export interface ResolvedTokens {
     readonly backgroundElevated: ColorResult;
     /** Background color for sunken surfaces (input fields, wells) */
     readonly backgroundSunken: ColorResult;
+    /**
+     * Background color for interactive components with neutral backgrounds.
+     * Uses a fixed -0.035 NV (luminosity) offset from current background to ensure
+     * consistent visual contrast across all elevations (-2 to 2).
+     *
+     * Use for: Button (neutral primary), and future components with neutral filled backgrounds.
+     * Don't use for: Semantic variants (accent/success/error/warning), transparent backgrounds,
+     * or primitives (Frame/Wrapper/Text/Icon already handle elevation correctly).
+     */
+    readonly backgroundInteractive: ColorResult;
     /** Primary text color (high contrast for body text) */
     readonly textPrimary: ColorResult;
     /** Secondary text color (lower contrast for captions, labels) */

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/tokens/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/tokens/types.ts"],"names":[],"mappings":"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"}

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.
  *
@@ -12,7 +19,7 @@ import type { ResolvedTokens } from './types';
  *
  * @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
+ * @returns Resolved design tokens with all necessary colors + resolved elevation
  *
  * @example
  * ```tsx
@@ -24,6 +31,17 @@ import type { ResolvedTokens } from './types';
  *   );
  * }
  * ```
+ *
+ * @example
+ * ```tsx
+ * // Elevation-aware component:
+ * function ElevationAwareButton() {
+ *   const tokens = useTokens();
+ *   // Use tokens.elevation to make color decisions
+ *   const bg = tokens.elevation === 2 ? tokens.background : tokens.backgroundSunken;
+ *   return <View style={{ backgroundColor: srgbToHex(bg.srgb) }} />;
+ * }
+ * ```
  */
-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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,wBAAgB,SAAS,CAAC,SAAS,CAAC,EAAE,cAAc,GAAG,eAAe,CA2BrE"}

package/package.json

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

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

@@ -0,0 +1,365 @@
+import { srgbToHex } from 'newtone';
+import type { UseTokensResult } from '../../../tokens/useTokens';
+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;
+    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;
+}
+
+/**
+ * Add opacity to a hex color string.
+ * @param hexColor - Hex color string (e.g., "#ff0000")
+ * @param opacity - Opacity value from 0 to 1
+ * @returns Hex color with alpha channel
+ */
+function withOpacity(hexColor: string, opacity: number): string {
+  const alpha = Math.round(opacity * 255).toString(16).padStart(2, '0');
+  return `${hexColor}${alpha}`;
+}
+
+/**
+ * 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,
+  };
+}
+
+/**
+ * Get elevation-aware background color for neutral primary button.
+ * Uses backgroundInteractive token for consistent contrast across all elevations.
+ *
+ * @param tokens - Resolved tokens for current elevation
+ * @returns Background color hex string
+ */
+function getNeutralPrimaryBg(tokens: UseTokensResult): string {
+  // Use the new backgroundInteractive token which maintains consistent
+  // contrast (-0.035 NV offset) across all elevations
+  return srgbToHex(tokens.backgroundInteractive.srgb);
+}
+
+/**
+ * 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.
+ *
+ * Now elevation-aware: neutral primary uses backgroundInteractive for consistent contrast.
+ *
+ * @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);
+    return {
+      ...baseColors,
+      bg: srgbToHex(tokens.backgroundSunken.srgb),
+      pressedBg: srgbToHex(tokens.backgroundSunken.srgb),
+      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.
+ */
+function getVariantColorsForState(
+  variant: ButtonVariant,
+  semantic: ButtonSemantic,
+  tokens: UseTokensResult
+) {
+  // Get semantic color
+  const getSemanticColor = (): string => {
+    switch (semantic) {
+      case 'accent':
+        return srgbToHex(tokens.interactive.srgb);
+      case 'success':
+        return srgbToHex(tokens.success.srgb);
+      case 'error':
+        return srgbToHex(tokens.error.srgb);
+      case 'warning':
+        return srgbToHex(tokens.warning.srgb);
+      default:
+        return srgbToHex(tokens.textPrimary.srgb);
+    }
+  };
+
+  // PRIMARY VARIANT: Filled background
+  if (variant === 'primary') {
+    if (semantic === 'neutral') {
+      // Neutral primary - uses backgroundInteractive for consistent contrast across elevations
+      const bg = getNeutralPrimaryBg(tokens);
+      return {
+        bg,
+        pressedBg: withOpacity(bg, 0.8), // Slightly darker on press
+        textColor: srgbToHex(tokens.textPrimary.srgb),
+        iconColor: srgbToHex(tokens.textPrimary.srgb),
+        borderWidth: 1,
+        borderColor: 'transparent', // Invisible border for consistent sizing
+      };
+    }
+
+    if (semantic === 'accent') {
+      // Accent primary = old primary (interactive bg, contrast text)
+      return {
+        bg: srgbToHex(tokens.interactive.srgb),
+        pressedBg: srgbToHex(tokens.interactiveActive.srgb),
+        textColor: srgbToHex(tokens.background.srgb), // Contrast inversion
+        iconColor: srgbToHex(tokens.background.srgb),
+        borderWidth: 1,
+        borderColor: 'transparent', // Invisible border for consistent sizing
+      };
+    }
+
+    // Semantic primary (success, error, warning)
+    const semanticColor = getSemanticColor();
+    return {
+      bg: semanticColor,
+      pressedBg: withOpacity(semanticColor, 0.8), // Darken on press
+      textColor: srgbToHex(tokens.background.srgb), // Contrast text
+      iconColor: srgbToHex(tokens.background.srgb),
+      borderWidth: 1,
+      borderColor: 'transparent', // Invisible border for consistent sizing
+    };
+  }
+
+  // SECONDARY VARIANT: Outlined (border + subtle background for non-neutral)
+  if (variant === 'secondary') {
+    if (semantic === 'neutral') {
+      // Neutral secondary = old outline (transparent bg)
+      return {
+        bg: 'transparent',
+        pressedBg: srgbToHex(tokens.backgroundSunken.srgb),
+        textColor: srgbToHex(tokens.textPrimary.srgb),
+        iconColor: srgbToHex(tokens.textPrimary.srgb),
+        borderWidth: 1,
+        borderColor: srgbToHex(tokens.border.srgb),
+      };
+    }
+
+    // Semantic secondary (accent, success, error, warning) - light bg, NO visible border
+    const semanticColor = getSemanticColor();
+    return {
+      bg: withOpacity(semanticColor, 0.1), // Light background tint
+      pressedBg: withOpacity(semanticColor, 0.15), // Slightly darker on press
+      textColor: semanticColor,
+      iconColor: semanticColor,
+      borderWidth: 1,
+      borderColor: 'transparent', // Invisible border for consistent sizing
+    };
+  }
+
+  // TERTIARY VARIANT: Ghost (text-only, no visible border)
+  if (variant === 'tertiary') {
+    if (semantic === 'neutral') {
+      // Neutral tertiary = old ghost
+      return {
+        bg: 'transparent',
+        pressedBg: srgbToHex(tokens.backgroundSunken.srgb),
+        textColor: srgbToHex(tokens.textPrimary.srgb),
+        iconColor: srgbToHex(tokens.textPrimary.srgb),
+        borderWidth: 1,
+        borderColor: 'transparent', // Invisible border for consistent sizing
+      };
+    }
+
+    // Semantic tertiary (accent, success, error, warning)
+    const semanticColor = getSemanticColor();
+    return {
+      bg: 'transparent',
+      pressedBg: withOpacity(semanticColor, 0.1), // Subtle background tint
+      textColor: semanticColor,
+      iconColor: semanticColor,
+      borderWidth: 1,
+      borderColor: 'transparent', // Invisible border for consistent sizing
+    };
+  }
+
+  // Fallback (should never reach here with proper types)
+  return {
+    bg: '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,115 @@
+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 }) => (
+        // 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 : 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';