@newtonedev/components 0.1.14 → 0.1.16

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-export { NewtoneProvider, useNewtoneTheme, useScheme, FrameContext, useFrameContext, useBreakpoint, DEFAULT_THEME_CONFIG, DEFAULT_FONT_SIZES, DEFAULT_LINE_HEIGHTS, DEFAULT_ROLE_SCALES, useTokens, computeTokens, computeSwatches, computeColors, resolveTheme, PRIMARY_DEFAULTS, SECONDARY_DEFAULTS, TERTIARY_DEFAULTS, SUCCESS_DEFAULTS, WARNING_DEFAULTS, ERROR_DEFAULTS, DEFAULT_THEME_MAPPINGS, buildGoogleFontsUrl, measureAvgCharWidth, useLocalCalibration, useTypographyCalibrations, enqueueObservation, } from 'newtone-api';
-export type { ColorMode, ColorGamut, ElevationLevel, FrameElevation, ColorSystemConfig, ColorSystemPaletteConfig, NewtoneThemeConfig, NewtoneThemeContext, FontConfig, FontWeights, FontSlot, TokenColor, TokenName, ContrastLevel, PaletteId, ThemeName, AppearanceName, ColorRef, AppearanceMapping, ThemeMapping, ThemeMappings, FontSizeScale, LineHeightScale, RoleSizeStep, RoleScale, RoleScales, BreakpointKey, Breakpoints, BreakpointRoleScales, FontRuntimeMetrics, FrameContextValue, UseTokensResult, PaletteDefaults, ContrastLevelDefaults, SwatchDefaults, ResolvedTokens, ResolvedSwatches, PaletteColors, ContrastLevelColors, ElevationColors, ElevationName, AppearanceTokens, ThemeTokens, ResolvedColor, DynamicRange, ColorResult, Srgb, Oklch, HexColor, } from 'newtone-api';
+export { NewtoneProvider, useNewtoneTheme, useScheme, FrameContext, useFrameContext, useBreakpoint, DEFAULT_THEME_CONFIG, DEFAULT_FONT_SIZES, DEFAULT_LINE_HEIGHTS, DEFAULT_ROLE_SCALES, useTokens, computeTokens, computeSwatches, computeColors, resolveTheme, PRIMARY_DEFAULTS, SECONDARY_DEFAULTS, TERTIARY_DEFAULTS, SUCCESS_DEFAULTS, WARNING_DEFAULTS, ERROR_DEFAULTS, NON_PRIMARY_RELATIVE_DEFAULTS, DEFAULT_THEME_MAPPINGS, buildGoogleFontsUrl, measureAvgCharWidth, useLocalCalibration, useTypographyCalibrations, enqueueObservation, } from 'newtone-api';
+export type { ColorMode, ColorGamut, ElevationLevel, FrameElevation, ColorSystemConfig, ColorSystemPaletteConfig, NewtoneThemeConfig, NewtoneThemeContext, FontConfig, FontWeights, FontSlot, TokenColor, TokenName, SwatchSlotName, ContrastLevel, PaletteId, ThemeName, AppearanceName, ColorRef, AppearanceMapping, ThemeMapping, ThemeMappings, FontSizeScale, LineHeightScale, RoleSizeStep, RoleScale, RoleScales, BreakpointKey, Breakpoints, BreakpointRoleScales, FontRuntimeMetrics, FrameContextValue, UseTokensResult, PaletteDefaults, ContrastLevelDefaults, SwatchDefaults, RelativeContrastDefaults, RelativePaletteDefaults, PaletteKeySteps, RelativeSwatchDefaults, ResolvedTokens, ResolvedSwatches, PaletteColors, ContrastLevelColors, ElevationColors, ElevationName, AppearanceTokens, ThemeTokens, ResolvedColor, DynamicRange, ColorResult, Srgb, Oklch, HexColor, } from 'newtone-api';
 export { useFocusVisible } from './primitives/useFocusVisible';
 export type { FocusVisibleResult } from './primitives/useFocusVisible';
 export { Frame } from './primitives/Frame/Frame';
@@ -12,7 +12,7 @@ export type { WrapperProps } from './primitives/Wrapper/Wrapper.types';
 export { Text } from './primitives/Text';
 export type { TextProps, TextSize, TextWeight, TextColor, TextScope, TextRole, TextAlign, TextSpanProps, } from './primitives/Text';
 export { Button } from './composites/actions/Button/Button';
-export type { ButtonProps, ButtonVariant, ButtonSemantic, ButtonSize, ButtonIconPosition } from './composites/actions/Button/Button.types';
+export type { ButtonProps, ButtonVariant, ButtonSize, ButtonIconPosition } from './composites/actions/Button/Button.types';
 export { Card } from './composites/layout/Card/Card';
 export type { CardProps } from './composites/layout/Card/Card.types';
 export { Chip } from './composites/display/Chip/Chip';

package/dist/index.d.ts.map

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

package/dist/index.js

@@ -1,5 +1,5 @@
 import { useTokens, useNewtoneTheme, useFrameContext, useBreakpoint, useTypographyCalibrations, useLocalCalibration, enqueueObservation, computeTokens, _ThemeContext, FrameContext } from 'newtone-api';
-export { DEFAULT_FONT_SIZES, DEFAULT_LINE_HEIGHTS, DEFAULT_ROLE_SCALES, DEFAULT_THEME_CONFIG, DEFAULT_THEME_MAPPINGS, ERROR_DEFAULTS, FrameContext, NewtoneProvider, PRIMARY_DEFAULTS, SECONDARY_DEFAULTS, SUCCESS_DEFAULTS, TERTIARY_DEFAULTS, WARNING_DEFAULTS, buildGoogleFontsUrl, computeColors, computeSwatches, computeTokens, enqueueObservation, measureAvgCharWidth, resolveTheme, useBreakpoint, useFrameContext, useLocalCalibration, useNewtoneTheme, useScheme, useTokens, useTypographyCalibrations } from 'newtone-api';
+export { DEFAULT_FONT_SIZES, DEFAULT_LINE_HEIGHTS, DEFAULT_ROLE_SCALES, DEFAULT_THEME_CONFIG, DEFAULT_THEME_MAPPINGS, ERROR_DEFAULTS, FrameContext, NON_PRIMARY_RELATIVE_DEFAULTS, NewtoneProvider, PRIMARY_DEFAULTS, SECONDARY_DEFAULTS, SUCCESS_DEFAULTS, TERTIARY_DEFAULTS, WARNING_DEFAULTS, buildGoogleFontsUrl, computeColors, computeSwatches, computeTokens, enqueueObservation, measureAvgCharWidth, resolveTheme, useBreakpoint, useFrameContext, useLocalCalibration, useNewtoneTheme, useScheme, useTokens, useTypographyCalibrations } from 'newtone-api';
 import React16, { createContext, useState, useMemo, useEffect, useContext, useCallback, useRef } from 'react';
 import { Text, View, Pressable, TextInput as TextInput$1, ScrollView, PanResponder, Animated, StyleSheet } from 'react-native';
 import { SEMANTIC_WEIGHT_MAP, ROLE_DEFAULT_WEIGHTS, BREAKPOINT_ROLE_SCALE, scaleRoleStep, resolveResponsiveSize, estimateLineWidths, REFERENCE_LINE_HEIGHT_RATIO, buildFontFeatureSettings } from '@newtonedev/fonts';
@@ -377,7 +377,8 @@ function Frame({
       resolvedConfig.typography,
       resolvedConfig.icons,
       resolvedConfig.themeMappings,
-      resolvedConfig.swatchDefaults
+      resolvedConfig.swatchDefaults,
+      resolvedConfig.relativeSwatchDefaults
     );
   }, [resolvedConfig, mode, gamut, resolvedElevation]);
   const styles = useMemo(
@@ -957,64 +958,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,
@@ -1026,147 +1006,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({
@@ -1174,7 +1096,6 @@ function Button({
   icon,
   iconPosition = "left",
   variant = "primary",
-  semantic = "neutral",
   size = "md",
   disabled = false,
   loading = false,
@@ -1184,58 +1105,54 @@ function Button({
   ...pressableProps
 }) {
   const tokens = useTokens();
+  const frameCtx = useFrameContext();
+  const theme = frameCtx?.theme ?? "primary";
   const isDisabled = disabled || loading;
   const { variantColors, sizeTokens } = React16.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.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.createElement(Pressable, { disabled: isDisabled, ...pressableProps }, ({ pressed, hovered }) => (
-    // Wrapper handles layout: direction, gap, alignment (padding via style)
-    /* @__PURE__ */ React16.createElement(
-      Wrapper,
+  return /* @__PURE__ */ React16.createElement(Pressable, { disabled: isDisabled, ...pressableProps }, ({ pressed, hovered }) => /* @__PURE__ */ React16.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.createElement(Icon, { name: icon, size: sizeTokens.iconSize, color: variantColors.iconColor }),
+    children && /* @__PURE__ */ React16.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.createElement(Icon, { name: icon, size: sizeTokens.iconSize, color: variantColors.iconColor }),
-      children && // Text primitive with semantic props + color style override
-      /* @__PURE__ */ React16.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.createElement(Icon, { name: icon, size: sizeTokens.iconSize, color: variantColors.iconColor })
-    )
+      children
+    ),
+    icon && iconPosition === "right" && /* @__PURE__ */ React16.createElement(Icon, { name: icon, size: sizeTokens.iconSize, color: variantColors.iconColor })
   ));
 }
 function getCardStyles(tokens, disabled, theme = "primary", appearance = "main") {
@@ -1269,7 +1186,7 @@ function Card({
 }
 
 // src/composites/display/Chip/Chip.styles.ts
-function semanticToTheme2(semantic) {
+function semanticToTheme(semantic) {
   if (semantic === "accent") return "primary";
   return semantic;
 }
@@ -1292,7 +1209,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,
@@ -1326,7 +1243,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,
@@ -1349,7 +1266,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,
@@ -1371,7 +1288,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,
@@ -2942,17 +2859,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: [
       {
@@ -2962,23 +2875,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",
@@ -2986,7 +2886,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"
       },