@newtonedev/components 0.1.14 → 0.1.16

package/dist/index.cjs

@@ -382,7 +382,8 @@ function Frame({
       resolvedConfig.typography,
       resolvedConfig.icons,
       resolvedConfig.themeMappings,
-      resolvedConfig.swatchDefaults
+      resolvedConfig.swatchDefaults,
+      resolvedConfig.relativeSwatchDefaults
     );
   }, [resolvedConfig, mode, gamut, resolvedElevation]);
   const styles = React16.useMemo(
@@ -962,64 +963,43 @@ var Text3 = Object.assign(TextBase, {
 });
 
 // src/composites/actions/Button/Button.styles.ts
+var BUTTON_HEIGHTS = {
+  sm: 40,
+  md: 48,
+  lg: 56,
+  xl: 64
+};
 function computeButtonPadding(size, hasIcon, hasText, iconPosition) {
   const basePadding = {
-    sm: 8,
-    md: 12,
-    lg: 16
+    sm: 12,
+    md: 16,
+    lg: 20,
+    xl: 24
   };
   const base = basePadding[size];
   const textExtra = 8;
   if (!hasText && hasIcon) {
-    return {
-      paddingLeft: base,
-      paddingRight: base,
-      paddingTop: base,
-      paddingBottom: base
-    };
+    return { paddingLeft: base, paddingRight: base };
   }
   if (hasText && !hasIcon) {
-    return {
-      paddingLeft: base + textExtra,
-      paddingRight: base + textExtra,
-      paddingTop: base,
-      paddingBottom: base
-    };
+    return { paddingLeft: base + textExtra, paddingRight: base + textExtra };
   }
   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 };
     }
   }
-  return {
-    paddingLeft: base,
-    paddingRight: base,
-    paddingTop: base,
-    paddingBottom: base
-  };
-}
-function semanticToTheme(semantic) {
-  if (semantic === "accent") return "primary";
-  return semantic;
+  return { paddingLeft: base, paddingRight: base };
 }
-function getButtonConfig(variant, semantic, size, disabled, tokens) {
+function getButtonConfig(variant, size, disabled, tokens, theme) {
   const sizeConfig = getSizeConfig(size, tokens);
-  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,
@@ -1031,147 +1011,89 @@ function getButtonConfig(variant, semantic, size, disabled, tokens) {
 function getSizeConfig(size, tokens) {
   const configs = {
     sm: {
-      padding: 8,
+      height: BUTTON_HEIGHTS.sm,
+      padding: 12,
       gap: tokens.spacing["08"],
       borderRadius: 8,
       textSize: "md",
-      // 16px
-      iconSize: 24
+      iconSize: 20
     },
     md: {
-      padding: 12,
+      height: BUTTON_HEIGHTS.md,
+      padding: 16,
       gap: tokens.spacing["08"],
       borderRadius: 12,
       textSize: "md",
-      // 16px
       iconSize: 24
     },
     lg: {
-      padding: 16,
+      height: BUTTON_HEIGHTS.lg,
+      padding: 20,
       gap: tokens.spacing["08"],
-      borderRadius: 16,
+      borderRadius: 14,
       textSize: "md",
-      // 16px
+      iconSize: 24
+    },
+    xl: {
+      height: BUTTON_HEIGHTS.xl,
+      padding: 24,
+      gap: tokens.spacing["08"],
+      borderRadius: 16,
+      textSize: "lg",
       iconSize: 24
     }
   };
   return configs[size];
 }
-function getVariantColors(variant, semantic, disabled, tokens) {
+function getVariantColors(variant, disabled, tokens, theme) {
+  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);
 }
-function getVariantColorsForState(variant, semantic, tokens) {
+function getVariantColorsForState(variant, tokens, theme) {
+  const t = tokens.colors[theme];
   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[semanticToTheme(semantic)];
     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"
     };
   }
   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
-      };
-    }
-    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"
-    };
-  }
-  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"
-      };
-    }
-    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"
-    };
-  }
-  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"
     };
   }
   return {
     bg: "transparent",
-    hoveredBg: "transparent",
-    pressedBg: "transparent",
-    textColor: tokens.colors.primary.main.divider,
-    iconColor: tokens.colors.primary.main.divider,
-    borderWidth: 0
+    hoveredBg: t.main.actionEnabled,
+    pressedBg: t.main.actionHovered,
+    textColor: t.main.fontSecondary,
+    iconColor: t.main.fontSecondary,
+    borderWidth: 0,
+    borderColor: "transparent"
   };
 }
 function Button({
@@ -1179,7 +1101,6 @@ function Button({
   icon,
   iconPosition = "left",
   variant = "primary",
-  semantic = "neutral",
   size = "md",
   disabled = false,
   loading = false,
@@ -1189,58 +1110,54 @@ function Button({
   ...pressableProps
 }) {
   const tokens = newtoneApi.useTokens();
+  const frameCtx = newtoneApi.useFrameContext();
+  const theme = frameCtx?.theme ?? "primary";
   const isDisabled = disabled || loading;
   const { variantColors, sizeTokens } = React16__default.default.useMemo(
-    () => getButtonConfig(variant, semantic, size, isDisabled, tokens),
-    [variant, semantic, size, isDisabled, tokens]
+    () => getButtonConfig(variant, size, isDisabled, tokens, theme),
+    [variant, size, isDisabled, tokens, theme]
   );
   const padding = React16__default.default.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 /* @__PURE__ */ React16__default.default.createElement(reactNative.Pressable, { disabled: isDisabled, ...pressableProps }, ({ pressed, hovered }) => (
-    // Wrapper handles layout: direction, gap, alignment (padding via style)
-    /* @__PURE__ */ React16__default.default.createElement(
-      Wrapper,
+  return /* @__PURE__ */ React16__default.default.createElement(reactNative.Pressable, { disabled: isDisabled, ...pressableProps }, ({ pressed, hovered }) => /* @__PURE__ */ React16__default.default.createElement(
+    Wrapper,
+    {
+      direction: "horizontal",
+      align: "center",
+      justify: "center",
+      gap: sizeTokens.gap,
+      style: [
+        {
+          height: sizeTokens.height,
+          paddingLeft: padding.paddingLeft,
+          paddingRight: padding.paddingRight,
+          backgroundColor: pressed && !isDisabled ? variantColors.pressedBg : hovered && !isDisabled ? variantColors.hoveredBg : variantColors.bg,
+          borderRadius: sizeTokens.borderRadius,
+          borderWidth: variantColors.borderWidth,
+          borderColor: variantColors.borderColor || "transparent",
+          opacity: isDisabled ? loading ? 0.6 : 0.4 : 1,
+          ...fullWidth && { width: "100%", alignSelf: "stretch" }
+        },
+        ...Array.isArray(style) ? style : style ? [style] : []
+      ]
+    },
+    icon && iconPosition === "left" && /* @__PURE__ */ React16__default.default.createElement(Icon, { name: icon, size: sizeTokens.iconSize, color: variantColors.iconColor }),
+    children && /* @__PURE__ */ React16__default.default.createElement(
+      Text3,
       {
-        direction: "horizontal",
-        align: "center",
-        justify: "center",
-        gap: sizeTokens.gap,
+        role: "label",
+        size: sizeTokens.textSize,
+        centerVertically: true,
         style: [
-          {
-            ...padding,
-            // Asymmetric horizontal padding for text optical balance
-            backgroundColor: pressed && !isDisabled ? variantColors.pressedBg : hovered && !isDisabled ? variantColors.hoveredBg : variantColors.bg,
-            borderRadius: variant === "link" ? 0 : sizeTokens.borderRadius,
-            borderWidth: variantColors.borderWidth,
-            borderColor: variantColors.borderColor || "transparent",
-            opacity: isDisabled ? loading ? 0.6 : 0.4 : variant === "link" && pressed ? 0.7 : 1,
-            ...fullWidth && { width: "100%", alignSelf: "stretch" }
-          },
-          ...Array.isArray(style) ? style : style ? [style] : []
+          { color: variantColors.textColor },
+          ...Array.isArray(textStyle) ? textStyle : textStyle ? [textStyle] : []
         ]
       },
-      icon && iconPosition === "left" && /* @__PURE__ */ React16__default.default.createElement(Icon, { name: icon, size: sizeTokens.iconSize, color: variantColors.iconColor }),
-      children && // Text primitive with semantic props + color style override
-      /* @__PURE__ */ React16__default.default.createElement(
-        Text3,
-        {
-          role: "label",
-          size: sizeTokens.textSize,
-          centerVertically: true,
-          style: [
-            {
-              color: variantColors.textColor,
-              ...variant === "link" && hovered && { textDecorationLine: "underline" }
-            },
-            ...Array.isArray(textStyle) ? textStyle : textStyle ? [textStyle] : []
-          ]
-        },
-        children
-      ),
-      icon && iconPosition === "right" && /* @__PURE__ */ React16__default.default.createElement(Icon, { name: icon, size: sizeTokens.iconSize, color: variantColors.iconColor })
-    )
+      children
+    ),
+    icon && iconPosition === "right" && /* @__PURE__ */ React16__default.default.createElement(Icon, { name: icon, size: sizeTokens.iconSize, color: variantColors.iconColor })
   ));
 }
 function getCardStyles(tokens, disabled, theme = "primary", appearance = "main") {
@@ -1274,7 +1191,7 @@ function Card({
 }
 
 // src/composites/display/Chip/Chip.styles.ts
-function semanticToTheme2(semantic) {
+function semanticToTheme(semantic) {
   if (semantic === "accent") return "primary";
   return semantic;
 }
@@ -1297,7 +1214,7 @@ function getVariantColors2(variant, semantic, selected, disabled, tokens) {
         borderColor: "transparent"
       };
     }
-    const t2 = tokens.colors[semanticToTheme2(semantic)];
+    const t2 = tokens.colors[semanticToTheme(semantic)];
     return {
       bg: t2.emphasis.background,
       hoveredBg: t2.emphasis.fontPrimary,
@@ -1331,7 +1248,7 @@ function getVariantColors2(variant, semantic, selected, disabled, tokens) {
         borderColor: "transparent"
       };
     }
-    const t2 = tokens.colors[semanticToTheme2(semantic)];
+    const t2 = tokens.colors[semanticToTheme(semantic)];
     return {
       bg: t2.emphasis.background,
       hoveredBg: t2.emphasis.fontPrimary,
@@ -1354,7 +1271,7 @@ function getVariantColors2(variant, semantic, selected, disabled, tokens) {
         borderColor: "transparent"
       };
     }
-    const t2 = tokens.colors[semanticToTheme2(semantic)];
+    const t2 = tokens.colors[semanticToTheme(semantic)];
     return {
       bg: t2.tinted.background,
       hoveredBg: t2.tinted.fontPrimary,
@@ -1376,7 +1293,7 @@ function getVariantColors2(variant, semantic, selected, disabled, tokens) {
       borderColor: tokens.colors.primary.main.divider
     };
   }
-  const t = tokens.colors[semanticToTheme2(semantic)];
+  const t = tokens.colors[semanticToTheme(semantic)];
   return {
     bg: "transparent",
     hoveredBg: t.tinted.background,
@@ -2947,17 +2864,13 @@ var COMPONENTS = [
     variants: [
       { id: "primary-md", label: "Primary", props: { variant: "primary", size: "md" } },
       { id: "secondary-md", label: "Secondary", props: { variant: "secondary", size: "md" } },
-      { id: "tertiary-md", label: "Tertiary", props: { variant: "tertiary", size: "md" } },
+      { id: "ghost-md", label: "Ghost", props: { variant: "ghost", size: "md" } },
       { id: "primary-sm", label: "Primary Small", props: { variant: "primary", size: "sm" } },
       { id: "primary-lg", label: "Primary Large", props: { variant: "primary", size: "lg" } },
-      { id: "accent-primary", label: "Accent Primary", props: { variant: "primary", size: "md", semantic: "accent" } },
-      { id: "accent-secondary", label: "Accent Secondary", props: { variant: "secondary", size: "md", semantic: "accent" } },
-      { id: "success-primary", label: "Success Primary", props: { variant: "primary", size: "md", semantic: "success" } },
-      { id: "error-primary", label: "Error Primary", props: { variant: "primary", size: "md", semantic: "error" } },
-      { id: "warning-primary", label: "Warning Primary", props: { variant: "primary", size: "md", semantic: "warning" } },
+      { id: "primary-xl", label: "Primary XL", props: { variant: "primary", size: "xl" } },
       { id: "icon-left", label: "Icon Left", props: { variant: "primary", size: "md", icon: "add" } },
       { id: "icon-right", label: "Icon Right", props: { variant: "primary", size: "md", icon: "arrow_forward", iconPosition: "right" } },
-      { id: "icon-only", label: "Icon Only", props: { variant: "tertiary", size: "md", icon: "settings" } }
+      { id: "icon-only", label: "Icon Only", props: { variant: "ghost", size: "md", icon: "settings" } }
     ],
     editableProps: [
       {
@@ -2967,23 +2880,10 @@ var COMPONENTS = [
         options: [
           { label: "Primary", value: "primary" },
           { label: "Secondary", value: "secondary" },
-          { label: "Tertiary", value: "tertiary" }
+          { label: "Ghost", value: "ghost" }
         ],
         defaultValue: "primary"
       },
-      {
-        name: "semantic",
-        label: "Semantic",
-        control: "select",
-        options: [
-          { label: "Neutral", value: "neutral" },
-          { label: "Accent", value: "accent" },
-          { label: "Success", value: "success" },
-          { label: "Warning", value: "warning" },
-          { label: "Error", value: "error" }
-        ],
-        defaultValue: "neutral"
-      },
       {
         name: "size",
         label: "Size",
@@ -2991,7 +2891,8 @@ var COMPONENTS = [
         options: [
           { label: "Small", value: "sm" },
           { label: "Medium", value: "md" },
-          { label: "Large", value: "lg" }
+          { label: "Large", value: "lg" },
+          { label: "Extra Large", value: "xl" }
         ],
         defaultValue: "md"
       },
@@ -3901,6 +3802,10 @@ Object.defineProperty(exports, "FrameContext", {
   enumerable: true,
   get: function () { return newtoneApi.FrameContext; }
 });
+Object.defineProperty(exports, "NON_PRIMARY_RELATIVE_DEFAULTS", {
+  enumerable: true,
+  get: function () { return newtoneApi.NON_PRIMARY_RELATIVE_DEFAULTS; }
+});
 Object.defineProperty(exports, "NewtoneProvider", {
   enumerable: true,
   get: function () { return newtoneApi.NewtoneProvider; }