@newtonedev/components 0.1.14 → 0.1.16

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

@@ -1 +1 @@
-{"version":3,"file":"Frame.d.ts","sourceRoot":"","sources":["../../../src/primitives/Frame/Frame.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAuChD;;;;;;;;GAQG;AACH,wBAAgB,KAAK,CAAC,EACpB,QAAQ,EAER,SAAS,EAET,MAAM,EAEN,KAAK,EACL,UAAU,EAEV,MAAM,EACN,SAAS,EACT,IAAI,EACJ,OAAO,EACP,OAAO,EACP,IAAI,EAEJ,KAAK,EACL,OAAO,EAEP,OAAO,EACP,GAAG,EAEH,KAAK,EACL,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAS,EAET,QAAQ,EACR,GAAG,EACH,KAAK,EACL,MAAM,EACN,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,aAAa,EACb,OAAO,EAEP,MAAM,EACN,QAAQ,EAER,OAAO,EACP,IAAI,EACJ,QAAgB,EAEhB,kBAAkB,EAClB,iBAAiB,EAEjB,MAAM,EACN,QAAQ,EACR,GAAG,EAEH,KAAK,GACN,EAAE,UAAU,qBAuMZ"}
+{"version":3,"file":"Frame.d.ts","sourceRoot":"","sources":["../../../src/primitives/Frame/Frame.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAuChD;;;;;;;;GAQG;AACH,wBAAgB,KAAK,CAAC,EACpB,QAAQ,EAER,SAAS,EAET,MAAM,EAEN,KAAK,EACL,UAAU,EAEV,MAAM,EACN,SAAS,EACT,IAAI,EACJ,OAAO,EACP,OAAO,EACP,IAAI,EAEJ,KAAK,EACL,OAAO,EAEP,OAAO,EACP,GAAG,EAEH,KAAK,EACL,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAS,EAET,QAAQ,EACR,GAAG,EACH,KAAK,EACL,MAAM,EACN,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,aAAa,EACb,OAAO,EAEP,MAAM,EACN,QAAQ,EAER,OAAO,EACP,IAAI,EACJ,QAAgB,EAEhB,kBAAkB,EAClB,iBAAiB,EAEjB,MAAM,EACN,QAAQ,EACR,GAAG,EAEH,KAAK,GACN,EAAE,UAAU,qBAwMZ"}

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,EAM7C,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,SAAS,aAAa,EAimB9C,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,EAM7C,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,SAAS,aAAa,EAilB9C,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/package.json

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

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

@@ -1,7 +1,18 @@
 import type { UseTokensResult } from 'newtone-api';
-import type { ButtonVariant, ButtonSemantic, ButtonSize } from './Button.types';
+import type { ThemeName } from 'newtone-api';
+import type { ButtonVariant, ButtonSize } from './Button.types';
 import type { TextSize } from '../../../primitives/Text/Text.types';
 
+/**
+ * Fixed heights per size (px)
+ */
+export const BUTTON_HEIGHTS: Record<ButtonSize, number> = {
+  sm: 40,
+  md: 48,
+  lg: 56,
+  xl: 64,
+};
+
 /**
  * Configuration returned by getButtonConfig
  */
@@ -16,6 +27,7 @@ export interface ButtonConfig {
     borderColor?: string;
   };
   sizeTokens: {
+    height: number;
     padding: number;
     gap: number;
     borderRadius: number;
@@ -30,8 +42,6 @@ export interface ButtonConfig {
 export interface ButtonPadding {
   paddingLeft: number;
   paddingRight: number;
-  paddingTop: number;
-  paddingBottom: number;
 }
 
 /**
@@ -39,12 +49,6 @@ export interface ButtonPadding {
  *
  * 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,
@@ -52,106 +56,59 @@ export function computeButtonPadding(
   hasText: boolean,
   iconPosition: 'left' | 'right'
 ): ButtonPadding {
-  // Size-specific base padding
   const basePadding: Record<ButtonSize, number> = {
-    sm: 8,
-    md: 12,
-    lg: 16,
+    sm: 12,
+    md: 16,
+    lg: 20,
+    xl: 24,
   };
 
   const base = basePadding[size];
-  const textExtra = 8; // Optical correction for text vs icon
+  const textExtra = 8;
 
-  // Icon-only: square button
+  // Icon-only: symmetric
   if (!hasText && hasIcon) {
-    return {
-      paddingLeft: base,
-      paddingRight: base,
-      paddingTop: base,
-      paddingBottom: base,
-    };
+    return { paddingLeft: base, paddingRight: base };
   }
 
   // Text-only: extra padding on both sides
   if (hasText && !hasIcon) {
-    return {
-      paddingLeft: base + textExtra,
-      paddingRight: base + textExtra,
-      paddingTop: base,
-      paddingBottom: base,
-    };
+    return { paddingLeft: base + textExtra, paddingRight: base + textExtra };
   }
 
   // Icon + text: extra padding on text side only
   if (hasText && hasIcon) {
     if (iconPosition === 'left') {
-      return {
-        paddingLeft: base,
-        paddingRight: base + textExtra,
-        paddingTop: base,
-        paddingBottom: base,
-      };
+      return { paddingLeft: base, paddingRight: base + textExtra };
     } else {
-      return {
-        paddingLeft: base + textExtra,
-        paddingRight: base,
-        paddingTop: base,
-        paddingBottom: base,
-      };
+      return { paddingLeft: base + textExtra, paddingRight: base };
     }
   }
 
-  // Fallback: symmetric base padding
-  return {
-    paddingLeft: base,
-    paddingRight: base,
-    paddingTop: base,
-    paddingBottom: base,
-  };
+  return { paddingLeft: base, paddingRight: base };
 }
 
 /**
- * Map button semantic to theme name in the new token architecture.
- * 'accent' maps to 'primary'; others map directly.
- */
-function semanticToTheme(semantic: ButtonSemantic): 'primary' | 'success' | 'error' | 'warning' {
-  if (semantic === 'accent') return 'primary';
-  return semantic as 'success' | 'error' | 'warning';
-}
-
-/**
- * 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.
+ * Compute button configuration based on variant, size, and state.
  *
- * 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
+ * Colors are derived from the inherited theme (via FrameContext) rather than
+ * hardcoded to the primary palette. The `theme` parameter comes from the
+ * nearest Frame's `theme` prop, defaulting to 'primary'.
  */
 export function getButtonConfig(
   variant: ButtonVariant,
-  semantic: ButtonSemantic,
   size: ButtonSize,
   disabled: boolean,
-  tokens: UseTokensResult
+  tokens: UseTokensResult,
+  theme: ThemeName,
 ): ButtonConfig {
-  // Get size configuration
   const sizeConfig = getSizeConfig(size, tokens);
-
-  // Get variant-specific colors
-  const variantColors = getVariantColors(variant, semantic, disabled, tokens);
+  const variantColors = getVariantColors(variant, disabled, tokens, theme);
 
   return {
     variantColors,
     sizeTokens: {
+      height: sizeConfig.height,
       padding: sizeConfig.padding,
       gap: sizeConfig.gap,
       borderRadius: sizeConfig.borderRadius,
@@ -162,11 +119,12 @@ export function getButtonConfig(
 }
 
 /**
- * Get size configuration with unified icon/text sizes across all sizes.
+ * Get size configuration. Heights are fixed per size.
  * Only padding and radius scale with size.
  */
 function getSizeConfig(size: ButtonSize, tokens: UseTokensResult) {
   const configs: Record<ButtonSize, {
+    height: number;
     padding: number;
     gap: number;
     borderRadius: number;
@@ -174,24 +132,35 @@ function getSizeConfig(size: ButtonSize, tokens: UseTokensResult) {
     iconSize: number;
   }> = {
     sm: {
-      padding: 8,
+      height: BUTTON_HEIGHTS.sm,
+      padding: 12,
       gap: tokens.spacing['08'],
       borderRadius: 8,
-      textSize: 'md', // 16px
-      iconSize: 24,
+      textSize: 'md',
+      iconSize: 20,
     },
     md: {
-      padding: 12,
+      height: BUTTON_HEIGHTS.md,
+      padding: 16,
       gap: tokens.spacing['08'],
       borderRadius: 12,
-      textSize: 'md', // 16px
+      textSize: 'md',
       iconSize: 24,
     },
     lg: {
-      padding: 16,
+      height: BUTTON_HEIGHTS.lg,
+      padding: 20,
+      gap: tokens.spacing['08'],
+      borderRadius: 14,
+      textSize: 'md',
+      iconSize: 24,
+    },
+    xl: {
+      height: BUTTON_HEIGHTS.xl,
+      padding: 24,
       gap: tokens.spacing['08'],
       borderRadius: 16,
-      textSize: 'md', // 16px
+      textSize: 'lg',
       iconSize: 24,
     },
   };
@@ -200,156 +169,79 @@ function getSizeConfig(size: ButtonSize, tokens: UseTokensResult) {
 }
 
 /**
- * Get variant-specific colors from theme tokens.
+ * Get variant-specific colors from the inherited theme's tokens.
  * Handles disabled state override for all variants.
  */
 function getVariantColors(
   variant: ButtonVariant,
-  semantic: ButtonSemantic,
   disabled: boolean,
-  tokens: UseTokensResult
+  tokens: UseTokensResult,
+  theme: ThemeName,
 ) {
-  // Disabled state overrides for all variants
+  const t = tokens.colors[theme];
+
   if (disabled) {
-    const baseColors = getVariantColorsForState(variant, semantic, tokens);
-    const disabledBg = tokens.colors.primary.main.fontSecondary;
+    const baseColors = getVariantColorsForState(variant, tokens, theme);
     return {
       ...baseColors,
-      bg: disabledBg,
-      hoveredBg: disabledBg,
-      pressedBg: disabledBg,
-      textColor: tokens.colors.primary.main.fontTertiary,
-      iconColor: tokens.colors.primary.main.fontTertiary,
+      bg: 'transparent',
+      hoveredBg: 'transparent',
+      pressedBg: 'transparent',
+      textColor: t.main.fontDisabled,
+      iconColor: t.main.fontDisabled,
+      borderWidth: 1,
+      borderColor: t.main.divider,
     };
   }
 
-  return getVariantColorsForState(variant, semantic, tokens);
+  return getVariantColorsForState(variant, tokens, theme);
 }
 
 /**
  * Get variant colors for non-disabled state.
- * Implements 4 types × 5 semantics = 20 combinations.
- * Uses proper PaletteTokens for all semantic variants — no opacity hacks.
+ * Uses the inherited theme's tokens — no semantic prop needed.
  */
 function getVariantColorsForState(
   variant: ButtonVariant,
-  semantic: ButtonSemantic,
-  tokens: UseTokensResult
+  tokens: UseTokensResult,
+  theme: ThemeName,
 ) {
-  // PRIMARY VARIANT: Filled background
-  if (variant === 'primary') {
-    if (semantic === 'neutral') {
-      return {
-        bg: tokens.colors.primary.main.fontPrimary,
-        hoveredBg: tokens.colors.primary.main.fontSecondary,
-        pressedBg: tokens.colors.primary.main.fontPrimary,
-        textColor: tokens.colors.primary.main.divider,
-        iconColor: tokens.colors.primary.main.divider,
-        borderWidth: 1,
-        borderColor: 'transparent',
-      };
-    }
+  const t = tokens.colors[theme];
 
-    // Semantic primary (accent, success, error, warning)
-    const t = tokens.colors[semanticToTheme(semantic)];
+  // PRIMARY: Filled background using emphasis appearance
+  if (variant === 'primary') {
     return {
-      bg: t.emphasis.background,
-      hoveredBg: t.emphasis.fontPrimary,
-      pressedBg: t.emphasis.fontSecondary,
-      textColor: t.main.background,
-      iconColor: t.main.background,
-      borderWidth: 1,
+      bg: t.emphasis.actionEnabled,
+      hoveredBg: t.emphasis.actionHovered,
+      pressedBg: t.emphasis.actionPressed,
+      textColor: t.emphasis.accentSmall,
+      iconColor: t.emphasis.accentSmall,
+      borderWidth: 0,
       borderColor: 'transparent',
     };
   }
 
-  // SECONDARY VARIANT: Outlined (border + subtle background for non-neutral)
+  // SECONDARY: Outlined with subtle hover
   if (variant === 'secondary') {
-    if (semantic === 'neutral') {
-      return {
-        bg: 'transparent',
-        hoveredBg: tokens.colors.primary.main.fontPrimary,
-        pressedBg: tokens.colors.primary.main.fontSecondary,
-        textColor: tokens.colors.primary.main.divider,
-        iconColor: tokens.colors.primary.main.divider,
-        borderWidth: 1,
-        borderColor: tokens.colors.primary.main.fontSecondary,
-      };
-    }
-
-    // Semantic secondary
-    const t = tokens.colors[semanticToTheme(semantic)];
-    return {
-      bg: t.tinted.background,
-      hoveredBg: t.tinted.fontPrimary,
-      pressedBg: t.tinted.fontSecondary,
-      textColor: t.emphasis.divider,
-      iconColor: t.emphasis.divider,
-      borderWidth: 1,
-      borderColor: 'transparent',
-    };
-  }
-
-  // TERTIARY VARIANT: Ghost (text-only, no visible border)
-  if (variant === 'tertiary') {
-    if (semantic === 'neutral') {
-      return {
-        bg: 'transparent',
-        hoveredBg: tokens.colors.primary.main.fontPrimary,
-        pressedBg: tokens.colors.primary.main.fontSecondary,
-        textColor: tokens.colors.primary.main.divider,
-        iconColor: tokens.colors.primary.main.divider,
-        borderWidth: 1,
-        borderColor: 'transparent',
-      };
-    }
-
-    // Semantic tertiary
-    const t = tokens.colors[semanticToTheme(semantic)];
-    return {
-      bg: 'transparent',
-      hoveredBg: t.tinted.background,
-      pressedBg: t.tinted.fontPrimary,
-      textColor: t.emphasis.divider,
-      iconColor: t.emphasis.divider,
-      borderWidth: 1,
-      borderColor: 'transparent',
-    };
-  }
-
-  // LINK VARIANT: Text-only with underline on hover, no background
-  if (variant === 'link') {
-    if (semantic === 'neutral') {
-      return {
-        bg: 'transparent',
-        hoveredBg: 'transparent',
-        pressedBg: 'transparent',
-        textColor: tokens.colors.primary.main.fontSecondary,
-        iconColor: tokens.colors.primary.main.fontSecondary,
-        borderWidth: 0,
-        borderColor: 'transparent',
-      };
-    }
-
-    const t = tokens.colors[semanticToTheme(semantic)];
     return {
-      bg: 'transparent',
-      hoveredBg: 'transparent',
-      pressedBg: 'transparent',
-      textColor: t.emphasis.divider,
-      iconColor: t.emphasis.divider,
+      bg: t.main.actionEnabled,
+      hoveredBg: t.main.actionHovered,
+      pressedBg: t.main.actionPressed,
+      textColor: t.main.fontPrimary,
+      iconColor: t.main.fontPrimary,
       borderWidth: 0,
       borderColor: 'transparent',
     };
   }
 
-  // Fallback (should never reach here with proper types)
+  // GHOST: No border, transparent background, subtle hover
   return {
     bg: 'transparent',
-    hoveredBg: 'transparent',
-    pressedBg: 'transparent',
-    textColor: tokens.colors.primary.main.divider,
-    iconColor: tokens.colors.primary.main.divider,
+    hoveredBg: t.main.actionEnabled,
+    pressedBg: t.main.actionHovered,
+    textColor: t.main.fontSecondary,
+    iconColor: t.main.fontSecondary,
     borderWidth: 0,
+    borderColor: 'transparent',
   };
 }

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

@@ -3,51 +3,39 @@ import { Pressable } from 'react-native';
 import type { ButtonProps } from './Button.types';
 import { getButtonConfig, computeButtonPadding } from './Button.styles';
 import { useTokens } from 'newtone-api';
+import { useFrameContext } from 'newtone-api';
 import { Icon } from '../../../primitives/Icon/Icon';
 import { Text } from '../../../primitives/Text';
 import { Wrapper } from '../../../primitives/Wrapper/Wrapper';
 
 /**
- * Button — A composite component demonstrating the primitive composition pattern.
+ * Button — A composite component that inherits its color theme from the
+ * nearest parent Frame's `theme` prop (defaults to 'primary').
  *
- * **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
+ * **Variants:**
+ * - `primary` — Filled background (highest visual weight)
+ * - `secondary` — Outlined with subtle hover
+ * - `ghost` — No border, transparent, subtle hover
  *
- * 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.
+ * **Sizes (fixed heights):**
+ * - `sm` — 40px
+ * - `md` — 48px
+ * - `lg` — 56px
+ * - `xl` — 64px
  *
  * @example
  * ```tsx
- * <Button variant="primary" semantic="accent" size="md" onPress={() => console.log('Pressed')}>
+ * <Button variant="primary" 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} />
- * ```
- *
- * @example
- * ```tsx
- * <Button variant="link" semantic="accent" onPress={handleNav}>Learn more</Button>
- * ```
- *
- * @example
- * ```tsx
- * <Button loading onPress={handleSubmit}>Saving...</Button>
+ * // Inherits theme from parent Frame
+ * <Frame theme="error">
+ *   <Button variant="primary">Delete</Button>
+ * </Frame>
  * ```
  */
 export function Button({
@@ -55,7 +43,6 @@ export function Button({
   icon,
   iconPosition = 'left',
   variant = 'primary',
-  semantic = 'neutral',
   size = 'md',
   disabled = false,
   loading = false,
@@ -64,31 +51,29 @@ export function Button({
   textStyle,
   ...pressableProps
 }: ButtonProps) {
-  // Read tokens from current elevation context
   const tokens = useTokens();
+  const frameCtx = useFrameContext();
+
+  // Inherit theme from nearest Frame, default to 'primary'
+  const theme = frameCtx?.theme ?? 'primary';
 
-  // Loading implies disabled
   const isDisabled = disabled || loading;
 
-  // Get color tokens + size config
   const { variantColors, sizeTokens } = React.useMemo(
-    () => getButtonConfig(variant, semantic, size, isDisabled, tokens),
-    [variant, semantic, size, isDisabled, tokens]
+    () => getButtonConfig(variant, size, isDisabled, tokens, theme),
+    [variant, size, isDisabled, tokens, theme]
   );
 
   // Compute asymmetric padding (+8px on text side for optical balance)
-  // Link variant uses minimal padding
+  // Ghost variant with no icon uses standard padding
   const padding = React.useMemo(
-    () => variant === 'link'
-      ? { paddingLeft: 0, paddingRight: 0, paddingTop: 0, paddingBottom: 0 }
-      : computeButtonPadding(size, !!icon, !!children, iconPosition),
-    [size, icon, children, iconPosition, variant]
+    () => computeButtonPadding(size, !!icon, !!children, iconPosition),
+    [size, icon, children, iconPosition]
   );
 
   return (
     <Pressable disabled={isDisabled} {...pressableProps}>
       {({ pressed, hovered }: { pressed: boolean; hovered?: boolean }) => (
-        // Wrapper handles layout: direction, gap, alignment (padding via style)
         <Wrapper
           direction="horizontal"
           align="center"
@@ -96,16 +81,18 @@ export function Button({
           gap={sizeTokens.gap}
           style={[
             {
-              ...padding, // Asymmetric horizontal padding for text optical balance
+              height: sizeTokens.height,
+              paddingLeft: padding.paddingLeft,
+              paddingRight: padding.paddingRight,
               backgroundColor: pressed && !isDisabled
                 ? variantColors.pressedBg
                 : hovered && !isDisabled
                   ? variantColors.hoveredBg
                   : variantColors.bg,
-              borderRadius: variant === 'link' ? 0 : sizeTokens.borderRadius,
+              borderRadius: sizeTokens.borderRadius,
               borderWidth: variantColors.borderWidth,
               borderColor: variantColors.borderColor || 'transparent',
-              opacity: isDisabled ? (loading ? 0.6 : 0.4) : (variant === 'link' && pressed ? 0.7 : 1),
+              opacity: isDisabled ? (loading ? 0.6 : 0.4) : 1,
               ...(fullWidth && { width: '100%' as any, alignSelf: 'stretch' as any }),
             },
             ...(Array.isArray(style) ? style : style ? [style] : []),
@@ -115,16 +102,12 @@ export function Button({
             <Icon name={icon} size={sizeTokens.iconSize} color={variantColors.iconColor} />
           )}
           {children && (
-            // Text primitive with semantic props + color style override
             <Text
               role="label"
               size={sizeTokens.textSize}
               centerVertically
               style={[
-                {
-                  color: variantColors.textColor,
-                  ...(variant === 'link' && hovered && { textDecorationLine: 'underline' as any }),
-                },
+                { color: variantColors.textColor },
                 ...(Array.isArray(textStyle) ? textStyle : textStyle ? [textStyle] : []),
               ]}
             >

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

@@ -1,19 +1,14 @@
 import type { PressableProps, ViewStyle, TextStyle } from 'react-native';
 
 /**
- * Visual type for the Button component (describes visual weight)
+ * Visual variant for the Button component (describes visual weight)
  */
-export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'link';
-
-/**
- * Semantic meaning for the Button component (describes color purpose)
- */
-export type ButtonSemantic = 'neutral' | 'accent' | 'success' | 'error' | 'warning';
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost';
 
 /**
  * Size presets for the Button component
  */
-export type ButtonSize = 'sm' | 'md' | 'lg';
+export type ButtonSize = 'sm' | 'md' | 'lg' | 'xl';
 
 /**
  * Icon position relative to button text
@@ -43,17 +38,11 @@ export interface ButtonProps extends Omit<PressableProps, 'children' | 'style'>
   readonly iconPosition?: ButtonIconPosition;
 
   /**
-   * Visual type (describes visual weight: filled, outlined, ghost)
+   * Visual variant (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/composites/actions/Button/index.ts

@@ -1,2 +1,2 @@
 export { Button } from './Button';
-export type { ButtonProps, ButtonVariant, ButtonSize } from './Button.types';
+export type { ButtonProps, ButtonVariant, ButtonSize, ButtonIconPosition } from './Button.types';