@newtonedev/components 0.1.3 → 0.1.5

package/dist/index.js

@@ -1,6 +1,6 @@
-import React11, { createContext, useState, useMemo, useContext, useEffect, useCallback, useRef } from 'react';
+import React13, { createContext, useState, useMemo, useContext, useEffect, useCallback, useRef } from 'react';
 import { DEFAULT_NEUTRAL_SATURATION, DEFAULT_NEUTRAL_HUE, DEFAULT_ACCENT_SATURATION, DEFAULT_ACCENT_HUE, DEFAULT_SUCCESS_SATURATION, DEFAULT_SUCCESS_HUE, DEFAULT_WARNING_SATURATION, DEFAULT_WARNING_HUE, DEFAULT_ERROR_SATURATION, DEFAULT_ERROR_HUE, getColor, getColorByContrast, srgbToHex } from 'newtone';
-import { Text, Pressable, View, TextInput as TextInput$1, ScrollView, PanResponder, Animated, StyleSheet } from 'react-native';
+import { Text, View, Pressable, TextInput as TextInput$1, ScrollView, PanResponder, Animated, StyleSheet } from 'react-native';
 
 // src/theme/NewtoneProvider.tsx
 var DEFAULT_THEME_CONFIG = {
@@ -205,7 +205,7 @@ function NewtoneProvider({
     }),
     [config, mode, theme]
   );
-  return /* @__PURE__ */ React11.createElement(ThemeContext.Provider, { value }, /* @__PURE__ */ React11.createElement(GoogleFontLoader, { fonts: config.typography.fonts }), /* @__PURE__ */ React11.createElement(IconFontLoader, { icons: config.icons }), children);
+  return /* @__PURE__ */ React13.createElement(ThemeContext.Provider, { value }, /* @__PURE__ */ React13.createElement(GoogleFontLoader, { fonts: config.typography.fonts }), /* @__PURE__ */ React13.createElement(IconFontLoader, { icons: config.icons }), children);
 }
 function useNewtoneTheme() {
   const context = useContext(ThemeContext);
@@ -258,6 +258,16 @@ function computeTokens(config, mode, themeMapping, elevation, elevationOffsets,
     palette.desaturation,
     palette.paletteHueGrading
   );
+  const INTERACTIVE_COMPONENT_OFFSET = -0.035;
+  const interactiveComponentNv = Math.max(0, Math.min(1, backgroundNv + INTERACTIVE_COMPONENT_OFFSET));
+  const backgroundInteractive = getColor(
+    palette.hue,
+    palette.saturation,
+    dynamicRange,
+    interactiveComponentNv,
+    palette.desaturation,
+    palette.paletteHueGrading
+  );
   const textPrimary = getColorByContrast(
     palette.hue,
     palette.saturation,
@@ -388,6 +398,7 @@ function computeTokens(config, mode, themeMapping, elevation, elevationOffsets,
     background,
     backgroundElevated,
     backgroundSunken,
+    backgroundInteractive,
     textPrimary,
     textSecondary,
     interactive,
@@ -425,7 +436,7 @@ function useTokens(elevation) {
   const resolvedElevation = elevation ?? frameCtx?.elevation ?? 1;
   return useMemo(() => {
     const themeMapping = config.themes[resolvedTheme];
-    return computeTokens(
+    const tokens = computeTokens(
       config.colorSystem,
       mode,
       themeMapping,
@@ -436,102 +447,228 @@ function useTokens(elevation) {
       config.typography,
       config.icons
     );
+    return { ...tokens, elevation: resolvedElevation };
   }, [config, mode, resolvedTheme, resolvedElevation]);
 }
-function getSizeConfig(tokens) {
+function withOpacity(hexColor, opacity) {
+  const alpha = Math.round(opacity * 255).toString(16).padStart(2, "0");
+  return `${hexColor}${alpha}`;
+}
+function computeButtonPadding(size, hasIcon, hasText, iconPosition) {
+  const basePadding = {
+    sm: 8,
+    md: 12,
+    lg: 16
+  };
+  const base = basePadding[size];
+  const textExtra = 8;
+  if (!hasText && hasIcon) {
+    return {
+      paddingLeft: base,
+      paddingRight: base,
+      paddingTop: base,
+      paddingBottom: base
+    };
+  }
+  if (hasText && !hasIcon) {
+    return {
+      paddingLeft: base + textExtra,
+      paddingRight: base + textExtra,
+      paddingTop: base,
+      paddingBottom: base
+    };
+  }
+  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
+      };
+    }
+  }
+  return {
+    paddingLeft: base,
+    paddingRight: base,
+    paddingTop: base,
+    paddingBottom: base
+  };
+}
+function getNeutralPrimaryBg(tokens) {
+  return srgbToHex(tokens.backgroundInteractive.srgb);
+}
+function getButtonConfig(variant, semantic, size, disabled, tokens) {
+  const sizeConfig = getSizeConfig(size, tokens);
+  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
+    }
+  };
+}
+function getSizeConfig(size, tokens) {
+  const configs = {
     sm: {
-      paddingVertical: tokens.spacing["04"],
-      paddingHorizontal: tokens.spacing["12"],
-      fontSize: tokens.typography.size.sm,
-      borderRadius: tokens.radius.sm,
-      gap: tokens.spacing["04"],
-      iconSize: tokens.typography.size.sm
+      padding: 8,
+      gap: tokens.spacing["08"],
+      borderRadius: 8,
+      textSize: "base",
+      // 16px
+      iconSize: 24
     },
     md: {
-      paddingVertical: tokens.spacing["08"],
-      paddingHorizontal: tokens.spacing["16"],
-      fontSize: tokens.typography.size.base,
-      borderRadius: tokens.radius.md,
+      padding: 12,
       gap: tokens.spacing["08"],
-      iconSize: tokens.typography.size.base
+      borderRadius: 12,
+      textSize: "base",
+      // 16px
+      iconSize: 24
     },
     lg: {
-      paddingVertical: tokens.spacing["12"],
-      paddingHorizontal: tokens.spacing["24"],
-      fontSize: tokens.typography.size.base,
-      borderRadius: tokens.radius.lg,
+      padding: 16,
       gap: tokens.spacing["08"],
-      iconSize: tokens.typography.size.base
+      borderRadius: 16,
+      textSize: "base",
+      // 16px
+      iconSize: 24
     }
   };
+  return configs[size];
 }
-function getButtonStyles(tokens, variant, size, disabled, isIconOnly) {
-  const sizeConfig = getSizeConfig(tokens)[size];
-  const base = {
-    paddingVertical: sizeConfig.paddingVertical,
-    paddingHorizontal: isIconOnly ? sizeConfig.paddingVertical : sizeConfig.paddingHorizontal,
-    borderRadius: sizeConfig.borderRadius,
-    alignItems: "center",
-    justifyContent: "center",
-    flexDirection: "row",
-    gap: sizeConfig.gap
+function getVariantColors(variant, semantic, disabled, tokens) {
+  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);
+}
+function getVariantColorsForState(variant, semantic, tokens) {
+  const getSemanticColor = () => {
+    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);
+    }
   };
-  let backgroundColor;
-  let textColor;
-  let borderColor;
-  let borderWidth = 0;
-  switch (variant) {
-    case "primary":
-      backgroundColor = srgbToHex(tokens.interactive.srgb);
-      textColor = srgbToHex(tokens.background.srgb);
-      break;
-    case "secondary":
-      backgroundColor = srgbToHex(tokens.backgroundElevated.srgb);
-      textColor = srgbToHex(tokens.textPrimary.srgb);
-      break;
-    case "outline":
-      backgroundColor = "transparent";
-      textColor = srgbToHex(tokens.interactive.srgb);
-      borderColor = srgbToHex(tokens.border.srgb);
-      borderWidth = 1;
-      break;
-    case "ghost":
-      backgroundColor = "transparent";
-      textColor = srgbToHex(tokens.interactive.srgb);
-      break;
+  if (variant === "primary") {
+    if (semantic === "neutral") {
+      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") {
+      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
+      };
+    }
+    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
+    };
+  }
+  if (variant === "secondary") {
+    if (semantic === "neutral") {
+      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)
+      };
+    }
+    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
+    };
+  }
+  if (variant === "tertiary") {
+    if (semantic === "neutral") {
+      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
+      };
+    }
+    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
+    };
   }
-  const resolvedTextColor = disabled ? srgbToHex(tokens.textSecondary.srgb) : textColor;
   return {
-    iconColor: resolvedTextColor,
-    iconSize: sizeConfig.iconSize,
-    styles: StyleSheet.create({
-      base: {
-        ...base,
-        backgroundColor: disabled ? srgbToHex(tokens.backgroundSunken.srgb) : backgroundColor,
-        borderWidth,
-        ...borderColor && { borderColor }
-      },
-      pressed: {
-        backgroundColor: variant === "primary" ? srgbToHex(tokens.interactiveActive.srgb) : variant === "secondary" ? srgbToHex(tokens.backgroundSunken.srgb) : "transparent",
-        opacity: variant === "ghost" || variant === "outline" ? 0.7 : 1
-      },
-      disabled: {
-        opacity: 0.4
-      },
-      text: {
-        fontFamily: tokens.typography.fonts.default,
-        fontSize: sizeConfig.fontSize,
-        fontWeight: tokens.typography.weight.semibold,
-        color: resolvedTextColor
-      },
-      textPressed: {
-        // Color changes handled by parent opacity
-      },
-      textDisabled: {
-        // Color already set in text style via disabled check
-      }
-    })
+    bg: "transparent",
+    pressedBg: "transparent",
+    textColor: srgbToHex(tokens.textPrimary.srgb),
+    iconColor: srgbToHex(tokens.textPrimary.srgb),
+    borderWidth: 0
   };
 }
 function Icon({
@@ -553,13 +690,25 @@ function Icon({
   const tokens = useTokens(elevation);
   const iconStyle = useMemo(() => {
     const fontSize = size ?? tokens.typography.size.base;
-    const opsz = opticalSize ?? fontSize;
+    const getOpticalSize = (size2) => {
+      if (size2 <= 22) return 20;
+      if (size2 <= 32) return 24;
+      if (size2 <= 44) return 40;
+      return 48;
+    };
+    const opsz = opticalSize ?? getOpticalSize(fontSize);
     const iconColor = color ?? srgbToHex(tokens.textPrimary.srgb);
     const fontFamily = `Material Symbols ${tokens.icons.variant.charAt(0).toUpperCase() + tokens.icons.variant.slice(1)}`;
     const fontVariationSettings = `'FILL' ${fill}, 'wght' ${tokens.icons.weight}, 'GRAD' ${tokens.icons.grade}, 'opsz' ${opsz}`;
     return {
       fontFamily,
       fontSize,
+      width: fontSize,
+      // Explicit width ensures square rendering
+      height: fontSize,
+      // Explicit height ensures square rendering
+      lineHeight: fontSize,
+      // Prevent text line-height from affecting total height
       color: iconColor,
       userSelect: "none",
       // web-only: prevents users from selecting the icon as text
@@ -568,7 +717,7 @@ function Icon({
       ...style
     };
   }, [tokens, size, opticalSize, fill, color, style]);
-  return /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React13.createElement(
     Text,
     {
       ref,
@@ -582,121 +731,57 @@ function Icon({
     name
   );
 }
-
-// src/Button/Button.tsx
-function Button({
-  children,
-  icon,
-  iconPosition = "left",
-  variant = "primary",
-  size = "md",
-  disabled = false,
-  style,
-  textStyle,
-  ...pressableProps
-}) {
-  const tokens = useTokens(1);
-  const isIconOnly = !!icon && !children;
-  const { styles, iconColor, iconSize } = React11.useMemo(
-    () => getButtonStyles(tokens, variant, size, disabled, isIconOnly),
-    [tokens, variant, size, disabled, isIconOnly]
-  );
-  const renderIcon = () => /* @__PURE__ */ React11.createElement(Icon, { name: icon, size: iconSize, color: iconColor });
-  return /* @__PURE__ */ React11.createElement(
-    Pressable,
-    {
-      style: ({ pressed }) => [
-        styles.base,
-        pressed && !disabled && styles.pressed,
-        disabled && styles.disabled,
-        ...Array.isArray(style) ? style : [style]
-      ],
-      disabled,
-      ...pressableProps
-    },
-    ({ pressed }) => /* @__PURE__ */ React11.createElement(React11.Fragment, null, icon && iconPosition === "left" && renderIcon(), children != null && /* @__PURE__ */ React11.createElement(
-      Text,
-      {
-        style: [
-          styles.text,
-          pressed && !disabled && styles.textPressed,
-          disabled && styles.textDisabled,
-          ...Array.isArray(textStyle) ? textStyle : [textStyle]
-        ]
-      },
-      children
-    ), icon && iconPosition === "right" && renderIcon())
-  );
-}
-function getCardStyles(tokens, disabled) {
-  return StyleSheet.create({
-    container: {
-      backgroundColor: srgbToHex(tokens.background.srgb),
-      borderWidth: 1,
-      borderColor: srgbToHex(tokens.border.srgb),
-      borderRadius: tokens.radius.lg,
-      padding: tokens.spacing["16"],
-      opacity: disabled ? 0.5 : 1
-    }
-  });
-}
-
-// src/Card/Card.tsx
-function Card({
+var COLOR_MAP = {
+  primary: "textPrimary",
+  secondary: "textSecondary",
+  interactive: "interactive"
+};
+function Text2({
   children,
+  size = "base",
+  weight = "regular",
+  color = "primary",
+  font = "default",
+  lineHeight = "normal",
+  align,
+  numberOfLines,
   elevation = 1,
   style,
-  disabled = false
+  // Accessibility
+  accessibilityRole,
+  // Testing & platform
+  testID,
+  nativeID,
+  ref
 }) {
   const tokens = useTokens(elevation);
-  const styles = React11.useMemo(
-    () => getCardStyles(tokens, disabled),
-    [tokens, disabled]
+  const resolvedStyle = useMemo(() => {
+    const fontSize = tokens.typography.size[size];
+    return {
+      // Font family from the theme (e.g. 'default' → 'Inter', 'mono' → 'JetBrains Mono').
+      fontFamily: tokens.typography.fonts[font],
+      fontSize,
+      // Font weight is stored as a number (e.g. 400, 600) but React Native expects a string.
+      fontWeight: String(tokens.typography.weight[weight]),
+      // Convert the theme color from internal sRGB format to a hex string (e.g. '#1a1a1a').
+      color: srgbToHex(tokens[COLOR_MAP[color]].srgb),
+      // Line height = font size × multiplier (e.g. 16px × 1.5 = 24px line height).
+      lineHeight: fontSize * tokens.typography.lineHeight[lineHeight],
+      textAlign: align
+    };
+  }, [tokens, size, weight, color, font, lineHeight, align]);
+  return /* @__PURE__ */ React13.createElement(
+    Text,
+    {
+      ref,
+      testID,
+      nativeID,
+      accessibilityRole,
+      style: style ? [resolvedStyle, ...Array.isArray(style) ? style : [style]] : resolvedStyle,
+      numberOfLines
+    },
+    children
   );
-  return /* @__PURE__ */ React11.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, children);
-}
-var hadKeyboardEvent = false;
-var isListenerSetup = false;
-function setupModality() {
-  if (isListenerSetup || typeof document === "undefined") return;
-  isListenerSetup = true;
-  const NAVIGATION_KEYS = /* @__PURE__ */ new Set([
-    "Tab",
-    "ArrowUp",
-    "ArrowDown",
-    "ArrowLeft",
-    "ArrowRight",
-    "Enter",
-    " ",
-    "Escape"
-  ]);
-  document.addEventListener("keydown", (e) => {
-    if (NAVIGATION_KEYS.has(e.key)) {
-      hadKeyboardEvent = true;
-    }
-  }, true);
-  document.addEventListener("pointerdown", () => {
-    hadKeyboardEvent = false;
-  }, true);
-  document.addEventListener("mousedown", () => {
-    hadKeyboardEvent = false;
-  }, true);
-}
-function useFocusVisible() {
-  const [isFocusVisible, setIsFocusVisible] = useState(false);
-  useEffect(() => {
-    setupModality();
-  }, []);
-  const onFocus = useCallback(() => {
-    if (hadKeyboardEvent) {
-      setIsFocusVisible(true);
-    }
-  }, []);
-  const onBlur = useCallback(() => {
-    setIsFocusVisible(false);
-  }, []);
-  const focusProps = { onFocus, onBlur };
-  return { isFocusVisible, focusProps };
 }
 
 // src/primitives/Frame/Frame.utils.ts
@@ -799,8 +884,254 @@ function resolveFlexDirection(direction, reverse) {
   }
   return reverse ? "column-reverse" : "column";
 }
-
-// src/primitives/Frame/Frame.styles.ts
+
+// src/primitives/Wrapper/Wrapper.styles.ts
+function getWrapperStyles(input) {
+  const {
+    tokens,
+    direction = "vertical",
+    wrap = false,
+    reverse = false,
+    align,
+    justify,
+    padding,
+    gap,
+    width,
+    height,
+    minWidth,
+    maxWidth,
+    minHeight,
+    maxHeight
+  } = input;
+  const container = {};
+  container.flexDirection = resolveFlexDirection(direction, reverse);
+  if (wrap) container.flexWrap = "wrap";
+  if (align) container.alignItems = resolveAlignment(align);
+  if (justify) container.justifyContent = resolveJustification(justify);
+  if (padding !== void 0) {
+    const p = resolvePadding(padding, tokens);
+    container.paddingTop = p.top;
+    container.paddingRight = p.right;
+    container.paddingBottom = p.bottom;
+    container.paddingLeft = p.left;
+  }
+  if (gap !== void 0) {
+    const g = resolveGap(gap, tokens);
+    container.rowGap = g.rowGap;
+    container.columnGap = g.columnGap;
+  }
+  Object.assign(container, resolveSizing(width, height));
+  if (minWidth !== void 0) container.minWidth = minWidth;
+  if (maxWidth !== void 0) container.maxWidth = maxWidth;
+  if (minHeight !== void 0) container.minHeight = minHeight;
+  if (maxHeight !== void 0) container.maxHeight = maxHeight;
+  return StyleSheet.create({ c: container }).c;
+}
+
+// src/primitives/Wrapper/Wrapper.tsx
+function Wrapper({
+  children,
+  direction,
+  wrap,
+  reverse,
+  align,
+  justify,
+  padding,
+  gap,
+  width,
+  height,
+  minWidth,
+  maxWidth,
+  minHeight,
+  maxHeight,
+  style,
+  // Testing & platform
+  testID,
+  nativeID,
+  ref
+}) {
+  const tokens = useTokens(1);
+  const containerStyle = useMemo(
+    () => getWrapperStyles({
+      tokens,
+      direction,
+      wrap,
+      reverse,
+      align,
+      justify,
+      padding,
+      gap,
+      width,
+      height,
+      minWidth,
+      maxWidth,
+      minHeight,
+      maxHeight
+    }),
+    [
+      tokens,
+      direction,
+      wrap,
+      reverse,
+      align,
+      justify,
+      padding,
+      gap,
+      width,
+      height,
+      minWidth,
+      maxWidth,
+      minHeight,
+      maxHeight
+    ]
+  );
+  const userStyles = Array.isArray(style) ? style : style ? [style] : [];
+  return /* @__PURE__ */ React13.createElement(
+    View,
+    {
+      ref,
+      testID,
+      nativeID,
+      accessibilityRole: "none",
+      style: [containerStyle, ...userStyles]
+    },
+    children
+  );
+}
+
+// src/composites/actions/Button/Button.tsx
+function Button({
+  children,
+  icon,
+  iconPosition = "left",
+  variant = "primary",
+  semantic = "neutral",
+  size = "md",
+  disabled = false,
+  style,
+  textStyle,
+  ...pressableProps
+}) {
+  const tokens = useTokens();
+  const { variantColors, sizeTokens } = React13.useMemo(
+    () => getButtonConfig(variant, semantic, size, disabled, tokens),
+    [variant, semantic, size, disabled, tokens]
+  );
+  const padding = React13.useMemo(
+    () => computeButtonPadding(size, !!icon, !!children, iconPosition),
+    [size, icon, children, iconPosition]
+  );
+  return /* @__PURE__ */ React13.createElement(Pressable, { disabled, ...pressableProps }, ({ pressed }) => (
+    // Wrapper handles layout: direction, gap, alignment (padding via style)
+    /* @__PURE__ */ React13.createElement(
+      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" && /* @__PURE__ */ React13.createElement(Icon, { name: icon, size: sizeTokens.iconSize, color: variantColors.iconColor }),
+      children && // Text primitive with semantic props + color style override
+      /* @__PURE__ */ React13.createElement(
+        Text2,
+        {
+          size: sizeTokens.textSize,
+          weight: "semibold",
+          style: [
+            { color: variantColors.textColor },
+            ...Array.isArray(textStyle) ? textStyle : textStyle ? [textStyle] : []
+          ]
+        },
+        children
+      ),
+      icon && iconPosition === "right" && /* @__PURE__ */ React13.createElement(Icon, { name: icon, size: sizeTokens.iconSize, color: variantColors.iconColor })
+    )
+  ));
+}
+function getCardStyles(tokens, disabled) {
+  return StyleSheet.create({
+    container: {
+      backgroundColor: srgbToHex(tokens.background.srgb),
+      borderWidth: 1,
+      borderColor: srgbToHex(tokens.border.srgb),
+      borderRadius: tokens.radius.lg,
+      padding: tokens.spacing["16"],
+      opacity: disabled ? 0.5 : 1
+    }
+  });
+}
+
+// src/composites/layout/Card/Card.tsx
+function Card({
+  children,
+  elevation = 1,
+  style,
+  disabled = false
+}) {
+  const tokens = useTokens(elevation);
+  const styles = React13.useMemo(
+    () => getCardStyles(tokens, disabled),
+    [tokens, disabled]
+  );
+  return /* @__PURE__ */ React13.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, children);
+}
+var hadKeyboardEvent = false;
+var isListenerSetup = false;
+function setupModality() {
+  if (isListenerSetup || typeof document === "undefined") return;
+  isListenerSetup = true;
+  const NAVIGATION_KEYS = /* @__PURE__ */ new Set([
+    "Tab",
+    "ArrowUp",
+    "ArrowDown",
+    "ArrowLeft",
+    "ArrowRight",
+    "Enter",
+    " ",
+    "Escape"
+  ]);
+  document.addEventListener("keydown", (e) => {
+    if (NAVIGATION_KEYS.has(e.key)) {
+      hadKeyboardEvent = true;
+    }
+  }, true);
+  document.addEventListener("pointerdown", () => {
+    hadKeyboardEvent = false;
+  }, true);
+  document.addEventListener("mousedown", () => {
+    hadKeyboardEvent = false;
+  }, true);
+}
+function useFocusVisible() {
+  const [isFocusVisible, setIsFocusVisible] = useState(false);
+  useEffect(() => {
+    setupModality();
+  }, []);
+  const onFocus = useCallback(() => {
+    if (hadKeyboardEvent) {
+      setIsFocusVisible(true);
+    }
+  }, []);
+  const onBlur = useCallback(() => {
+    setIsFocusVisible(false);
+  }, []);
+  const focusProps = { onFocus, onBlur };
+  return { isFocusVisible, focusProps };
+}
 function getFrameStyles(input) {
   const {
     tokens,
@@ -907,9 +1238,9 @@ function getFrameStyles(input) {
 
 // src/primitives/Frame/Frame.tsx
 function wrapTextChildren(children, textStyle) {
-  return React11.Children.map(children, (child) => {
+  return React13.Children.map(children, (child) => {
     if (typeof child === "string" || typeof child === "number") {
-      return /* @__PURE__ */ React11.createElement(Text, { style: textStyle }, child);
+      return /* @__PURE__ */ React13.createElement(Text, { style: textStyle }, child);
     }
     return child;
   });
@@ -1062,10 +1393,10 @@ function Frame({
     () => wrapTextChildren(children, textStyle),
     [children, textStyle]
   );
-  return /* @__PURE__ */ React11.createElement(FrameContext.Provider, { value: contextValue }, isInteractive ? (
+  return /* @__PURE__ */ React13.createElement(FrameContext.Provider, { value: contextValue }, isInteractive ? (
     // Pressable handles taps. When href is set, react-native-web renders
     // it as an <a> tag so it works like a regular link on the web.
-    /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React13.createElement(
       Pressable,
       {
         ref,
@@ -1090,7 +1421,7 @@ function Frame({
     )
   ) : (
     // Non-interactive Frame: just a plain View with no tap handling.
-    /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React13.createElement(
       View,
       {
         ref,
@@ -1136,11 +1467,11 @@ function TextInput({
   ...textInputProps
 }) {
   const tokens = useTokens(1);
-  const styles = React11.useMemo(
+  const styles = React13.useMemo(
     () => getTextInputStyles(tokens, disabled),
     [tokens, disabled]
   );
-  return /* @__PURE__ */ React11.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, label && /* @__PURE__ */ React11.createElement(Text, { style: styles.label }, label), /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React13.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, label && /* @__PURE__ */ React13.createElement(Text, { style: styles.label }, label), /* @__PURE__ */ React13.createElement(
     TextInput$1,
     {
       style: styles.input,
@@ -1177,7 +1508,7 @@ function getPopoverStyles(tokens, triggerHeight, offset, maxHeight, width, isOpe
   });
 }
 
-// src/Popover/Popover.tsx
+// src/composites/overlays/Popover/Popover.tsx
 var openPopovers = /* @__PURE__ */ new Set();
 function Popover({
   isOpen,
@@ -1243,15 +1574,15 @@ function Popover({
     [styles.content, contentStyle]
   );
   const webProps = { onKeyDown: handleKeyDown };
-  return /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React13.createElement(
     View,
     {
       ref: containerRef,
       style: containerStyles,
       ...webProps
     },
-    /* @__PURE__ */ React11.createElement(View, { onLayout: onTriggerLayout }, trigger),
-    isOpen && /* @__PURE__ */ React11.createElement(View, { style: mergedContentStyles }, children)
+    /* @__PURE__ */ React13.createElement(View, { onLayout: onTriggerLayout }, trigger),
+    isOpen && /* @__PURE__ */ React13.createElement(View, { style: mergedContentStyles }, children)
   );
 }
 function usePopover(options) {
@@ -1274,7 +1605,7 @@ function usePopover(options) {
   return { isOpen, open, close, toggle };
 }
 
-// src/Select/Select.types.ts
+// src/composites/form-controls/Select/Select.types.ts
 function isOptionGroup(item) {
   return "options" in item;
 }
@@ -1448,7 +1779,7 @@ function SelectOptionRow({
   const paddingHorizontal = size === "sm" ? tokens.spacing["08"] : tokens.spacing["12"];
   const fontSize = size === "sm" ? tokens.typography.size.sm : tokens.typography.size.base;
   if (renderOption) {
-    return /* @__PURE__ */ React11.createElement(
+    return /* @__PURE__ */ React13.createElement(
       Pressable,
       {
         onPress: option.disabled ? void 0 : onSelect,
@@ -1459,7 +1790,7 @@ function SelectOptionRow({
       renderOption(option, { isSelected, isFocused })
     );
   }
-  return /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React13.createElement(
     Pressable,
     {
       onPress: option.disabled ? void 0 : onSelect,
@@ -1488,7 +1819,7 @@ function SelectOptionRow({
         }
       ]
     },
-    /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React13.createElement(
       Text,
       {
         style: [
@@ -1510,7 +1841,7 @@ function SelectOptionRow({
       },
       option.label
     ),
-    isSelected && /* @__PURE__ */ React11.createElement(View, { style: { marginLeft: tokens.spacing["08"] } }, /* @__PURE__ */ React11.createElement(
+    isSelected && /* @__PURE__ */ React13.createElement(View, { style: { marginLeft: tokens.spacing["08"] } }, /* @__PURE__ */ React13.createElement(
       Icon,
       {
         name: "check",
@@ -1565,7 +1896,7 @@ function Select({
   const displayLabel = selectedOption?.label ?? placeholder ?? value;
   const iconColor = disabled ? srgbToHex(tokens.textSecondary.srgb) : srgbToHex(tokens.textPrimary.srgb);
   const triggerWebProps = { onKeyDown: handleKeyDown };
-  const trigger = /* @__PURE__ */ React11.createElement(
+  const trigger = /* @__PURE__ */ React13.createElement(
     Pressable,
     {
       onPress: disabled ? void 0 : toggle,
@@ -1575,8 +1906,8 @@ function Select({
       ...triggerWebProps,
       style: styles.trigger
     },
-    renderValue ? renderValue(selectedOption) : /* @__PURE__ */ React11.createElement(Text, { style: styles.triggerText, numberOfLines: 1 }, displayLabel),
-    /* @__PURE__ */ React11.createElement(View, { style: styles.iconWrapper, pointerEvents: "none" }, /* @__PURE__ */ React11.createElement(
+    renderValue ? renderValue(selectedOption) : /* @__PURE__ */ React13.createElement(Text, { style: styles.triggerText, numberOfLines: 1 }, displayLabel),
+    /* @__PURE__ */ React13.createElement(View, { style: styles.iconWrapper, pointerEvents: "none" }, /* @__PURE__ */ React13.createElement(
       Icon,
       {
         name: isOpen ? "expand_less" : "expand_more",
@@ -1585,14 +1916,14 @@ function Select({
       }
     ))
   );
-  return /* @__PURE__ */ React11.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : style ? [style] : []] }, label && /* @__PURE__ */ React11.createElement(Text, { style: styles.label }, label), /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React13.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : style ? [style] : []] }, label && /* @__PURE__ */ React13.createElement(Text, { style: styles.label }, label), /* @__PURE__ */ React13.createElement(
     Popover,
     {
       isOpen: isOpen && !disabled,
       onClose: close,
       trigger
     },
-    /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React13.createElement(
       ScrollView,
       {
         bounces: false,
@@ -1601,7 +1932,7 @@ function Select({
       },
       options.map((item) => {
         if (isOptionGroup(item)) {
-          return /* @__PURE__ */ React11.createElement(View, { key: item.label }, /* @__PURE__ */ React11.createElement(Text, { style: styles.groupLabel }, item.label), item.options.map((opt) => /* @__PURE__ */ React11.createElement(
+          return /* @__PURE__ */ React13.createElement(View, { key: item.label }, /* @__PURE__ */ React13.createElement(Text, { style: styles.groupLabel }, item.label), item.options.map((opt) => /* @__PURE__ */ React13.createElement(
             SelectOptionRow,
             {
               key: opt.value,
@@ -1617,7 +1948,7 @@ function Select({
             }
           )));
         }
-        return /* @__PURE__ */ React11.createElement(
+        return /* @__PURE__ */ React13.createElement(
           SelectOptionRow,
           {
             key: item.value,
@@ -1672,7 +2003,7 @@ function getToggleStyles(tokens, value, disabled) {
   });
 }
 
-// src/Toggle/Toggle.tsx
+// src/composites/form-controls/Toggle/Toggle.tsx
 function Toggle({
   value,
   onValueChange,
@@ -1681,16 +2012,16 @@ function Toggle({
   style
 }) {
   const tokens = useTokens(1);
-  const styles = React11.useMemo(
+  const styles = React13.useMemo(
     () => getToggleStyles(tokens, value, disabled),
     [tokens, value, disabled]
   );
-  const handlePress = React11.useCallback(() => {
+  const handlePress = React13.useCallback(() => {
     if (!disabled) {
       onValueChange(!value);
     }
   }, [disabled, value, onValueChange]);
-  return /* @__PURE__ */ React11.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, label && /* @__PURE__ */ React11.createElement(Text, { style: styles.label }, label), /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React13.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, label && /* @__PURE__ */ React13.createElement(Text, { style: styles.label }, label), /* @__PURE__ */ React13.createElement(
     Pressable,
     {
       onPress: handlePress,
@@ -1698,7 +2029,7 @@ function Toggle({
       accessibilityRole: "switch",
       accessibilityState: { checked: value, disabled }
     },
-    /* @__PURE__ */ React11.createElement(View, { style: styles.track }, /* @__PURE__ */ React11.createElement(View, { style: styles.thumb }))
+    /* @__PURE__ */ React13.createElement(View, { style: styles.track }, /* @__PURE__ */ React13.createElement(View, { style: styles.thumb }))
   ));
 }
 var TRACK_HEIGHT2 = 6;
@@ -1770,7 +2101,7 @@ function getSliderStyles(tokens, disabled) {
   });
 }
 
-// src/Slider/Slider.tsx
+// src/composites/range-inputs/Slider/Slider.tsx
 function Slider({
   value,
   onValueChange,
@@ -1784,41 +2115,41 @@ function Slider({
   style
 }) {
   const tokens = useTokens(1);
-  const styles = React11.useMemo(
+  const styles = React13.useMemo(
     () => getSliderStyles(tokens, disabled),
     [tokens, disabled]
   );
-  const trackRef = React11.useRef(null);
-  const trackWidth = React11.useRef(0);
-  const trackPageX = React11.useRef(0);
-  const onValueChangeRef = React11.useRef(onValueChange);
-  const minRef = React11.useRef(min);
-  const maxRef = React11.useRef(max);
-  const stepRef = React11.useRef(step);
-  const disabledRef = React11.useRef(disabled);
-  React11.useEffect(() => {
+  const trackRef = React13.useRef(null);
+  const trackWidth = React13.useRef(0);
+  const trackPageX = React13.useRef(0);
+  const onValueChangeRef = React13.useRef(onValueChange);
+  const minRef = React13.useRef(min);
+  const maxRef = React13.useRef(max);
+  const stepRef = React13.useRef(step);
+  const disabledRef = React13.useRef(disabled);
+  React13.useEffect(() => {
     onValueChangeRef.current = onValueChange;
   }, [onValueChange]);
-  React11.useEffect(() => {
+  React13.useEffect(() => {
     minRef.current = min;
   }, [min]);
-  React11.useEffect(() => {
+  React13.useEffect(() => {
     maxRef.current = max;
   }, [max]);
-  React11.useEffect(() => {
+  React13.useEffect(() => {
     stepRef.current = step;
   }, [step]);
-  React11.useEffect(() => {
+  React13.useEffect(() => {
     disabledRef.current = disabled;
   }, [disabled]);
-  const computeValue = React11.useCallback((pageX) => {
+  const computeValue = React13.useCallback((pageX) => {
     const localX = pageX - trackPageX.current;
     const ratio2 = Math.min(1, Math.max(0, localX / trackWidth.current));
     const raw = minRef.current + ratio2 * (maxRef.current - minRef.current);
     const stepped = Math.round(raw / stepRef.current) * stepRef.current;
     return Math.min(maxRef.current, Math.max(minRef.current, stepped));
   }, []);
-  const panResponder = React11.useRef(
+  const panResponder = React13.useRef(
     PanResponder.create({
       onStartShouldSetPanResponder: () => !disabledRef.current,
       onMoveShouldSetPanResponder: () => !disabledRef.current,
@@ -1834,7 +2165,7 @@ function Slider({
   const usableWidth = Math.max(0, trackWidth.current - THUMB_SIZE2);
   const thumbLeft = ratio * usableWidth;
   const fillWidth = thumbLeft + THUMB_SIZE2 / 2;
-  const handleValueTextSubmit = React11.useCallback(
+  const handleValueTextSubmit = React13.useCallback(
     (text) => {
       const raw = Number(text);
       if (!Number.isNaN(raw)) {
@@ -1843,12 +2174,12 @@ function Slider({
     },
     [onValueChange, min, max]
   );
-  const [editText, setEditText] = React11.useState(String(value));
-  React11.useEffect(() => {
+  const [editText, setEditText] = React13.useState(String(value));
+  React13.useEffect(() => {
     setEditText(String(value));
   }, [value]);
   const showLabel = label || showValue || editableValue;
-  return /* @__PURE__ */ React11.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, showLabel && /* @__PURE__ */ React11.createElement(View, { style: styles.labelRow }, label && /* @__PURE__ */ React11.createElement(Text, { style: styles.label }, label), editableValue ? /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React13.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, showLabel && /* @__PURE__ */ React13.createElement(View, { style: styles.labelRow }, label && /* @__PURE__ */ React13.createElement(Text, { style: styles.label }, label), editableValue ? /* @__PURE__ */ React13.createElement(
     TextInput$1,
     {
       style: styles.valueInput,
@@ -1860,7 +2191,7 @@ function Slider({
       selectTextOnFocus: true,
       editable: !disabled
     }
-  ) : showValue && /* @__PURE__ */ React11.createElement(Text, { style: styles.value }, value)), /* @__PURE__ */ React11.createElement(
+  ) : showValue && /* @__PURE__ */ React13.createElement(Text, { style: styles.value }, value)), /* @__PURE__ */ React13.createElement(
     View,
     {
       ref: trackRef,
@@ -1873,9 +2204,9 @@ function Slider({
       },
       ...panResponder.panHandlers
     },
-    /* @__PURE__ */ React11.createElement(View, { style: styles.trackRail }),
-    /* @__PURE__ */ React11.createElement(View, { style: [styles.trackFill, { width: fillWidth }] }),
-    /* @__PURE__ */ React11.createElement(View, { style: [styles.thumb, { left: thumbLeft }] })
+    /* @__PURE__ */ React13.createElement(View, { style: styles.trackRail }),
+    /* @__PURE__ */ React13.createElement(View, { style: [styles.trackFill, { width: fillWidth }] }),
+    /* @__PURE__ */ React13.createElement(View, { style: [styles.thumb, { left: thumbLeft }] })
   ));
 }
 var TRACK_HEIGHT3 = 22;
@@ -1985,7 +2316,7 @@ function getHueSliderStyles(tokens, disabled) {
   });
 }
 
-// src/HueSlider/HueSlider.tsx
+// src/composites/range-inputs/HueSlider/HueSlider.tsx
 function HueSlider({
   value,
   onValueChange,
@@ -1998,41 +2329,41 @@ function HueSlider({
   style
 }) {
   const tokens = useTokens(1);
-  const styles = React11.useMemo(
+  const styles = React13.useMemo(
     () => getHueSliderStyles(tokens, disabled),
     [tokens, disabled]
   );
-  const segments = React11.useMemo(
+  const segments = React13.useMemo(
     () => buildHueSegments(min, max),
     [min, max]
   );
-  const trackRef = React11.useRef(null);
-  const trackWidth = React11.useRef(0);
-  const trackPageX = React11.useRef(0);
-  const onValueChangeRef = React11.useRef(onValueChange);
-  const minRef = React11.useRef(min);
-  const maxRef = React11.useRef(max);
-  const disabledRef = React11.useRef(disabled);
-  React11.useEffect(() => {
+  const trackRef = React13.useRef(null);
+  const trackWidth = React13.useRef(0);
+  const trackPageX = React13.useRef(0);
+  const onValueChangeRef = React13.useRef(onValueChange);
+  const minRef = React13.useRef(min);
+  const maxRef = React13.useRef(max);
+  const disabledRef = React13.useRef(disabled);
+  React13.useEffect(() => {
     onValueChangeRef.current = onValueChange;
   }, [onValueChange]);
-  React11.useEffect(() => {
+  React13.useEffect(() => {
     minRef.current = min;
   }, [min]);
-  React11.useEffect(() => {
+  React13.useEffect(() => {
     maxRef.current = max;
   }, [max]);
-  React11.useEffect(() => {
+  React13.useEffect(() => {
     disabledRef.current = disabled;
   }, [disabled]);
-  const computeHue = React11.useCallback((pageX) => {
+  const computeHue = React13.useCallback((pageX) => {
     const localX = pageX - trackPageX.current;
     const ratio2 = Math.min(1, Math.max(0, localX / trackWidth.current));
     const raw = minRef.current + ratio2 * (maxRef.current - minRef.current);
     const stepped = Math.round(raw);
     return (stepped % 360 + 360) % 360;
   }, []);
-  const panResponder = React11.useRef(
+  const panResponder = React13.useRef(
     PanResponder.create({
       onStartShouldSetPanResponder: () => !disabledRef.current,
       onMoveShouldSetPanResponder: () => !disabledRef.current,
@@ -2048,7 +2379,7 @@ function HueSlider({
   const ratio = max > min ? (sliderValue - min) / (max - min) : 0;
   const usableWidth = Math.max(0, trackWidth.current - THUMB_SIZE3);
   const thumbLeft = ratio * usableWidth;
-  const handleValueTextSubmit = React11.useCallback(
+  const handleValueTextSubmit = React13.useCallback(
     (text) => {
       const raw = Number(text);
       if (!Number.isNaN(raw)) {
@@ -2057,12 +2388,12 @@ function HueSlider({
     },
     [onValueChange]
   );
-  const [editText, setEditText] = React11.useState(String(value));
-  React11.useEffect(() => {
+  const [editText, setEditText] = React13.useState(String(value));
+  React13.useEffect(() => {
     setEditText(String(value));
   }, [value]);
   const showLabel = label || showValue || editableValue;
-  return /* @__PURE__ */ React11.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, showLabel && /* @__PURE__ */ React11.createElement(View, { style: styles.labelRow }, label && /* @__PURE__ */ React11.createElement(Text, { style: styles.label }, label), editableValue ? /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React13.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, showLabel && /* @__PURE__ */ React13.createElement(View, { style: styles.labelRow }, label && /* @__PURE__ */ React13.createElement(Text, { style: styles.label }, label), editableValue ? /* @__PURE__ */ React13.createElement(
     TextInput$1,
     {
       style: styles.valueInput,
@@ -2074,7 +2405,7 @@ function HueSlider({
       selectTextOnFocus: true,
       editable: !disabled
     }
-  ) : showValue && /* @__PURE__ */ React11.createElement(Text, { style: styles.value }, value, "\xB0")), /* @__PURE__ */ React11.createElement(
+  ) : showValue && /* @__PURE__ */ React13.createElement(Text, { style: styles.value }, value, "\xB0")), /* @__PURE__ */ React13.createElement(
     View,
     {
       ref: trackRef,
@@ -2087,8 +2418,8 @@ function HueSlider({
       },
       ...panResponder.panHandlers
     },
-    /* @__PURE__ */ React11.createElement(View, { style: styles.gradientTrack }, segments.map((color, i) => /* @__PURE__ */ React11.createElement(View, { key: i, style: [styles.segment, { backgroundColor: color }] }))),
-    /* @__PURE__ */ React11.createElement(View, { style: [styles.thumb, { left: thumbLeft }] })
+    /* @__PURE__ */ React13.createElement(View, { style: styles.gradientTrack }, segments.map((color, i) => /* @__PURE__ */ React13.createElement(View, { key: i, style: [styles.segment, { backgroundColor: color }] }))),
+    /* @__PURE__ */ React13.createElement(View, { style: [styles.thumb, { left: thumbLeft }] })
   ));
 }
 var TRACK_HEIGHT4 = 22;
@@ -2130,300 +2461,136 @@ function getColorScaleSliderStyles(tokens, disabled) {
     thumb: {
       position: "absolute",
       width: THUMB_SIZE4,
-      height: THUMB_SIZE4,
-      borderRadius: THUMB_SIZE4 / 2,
-      backgroundColor: "#ffffff",
-      borderWidth: 2,
-      borderColor: srgbToHex(tokens.border.srgb)
-    },
-    warning: {
-      fontFamily: tokens.typography.fonts.default,
-      fontSize: tokens.typography.size.xs,
-      fontWeight: tokens.typography.weight.medium,
-      color: srgbToHex(tokens.error.srgb)
-    }
-  });
-}
-
-// src/ColorScaleSlider/ColorScaleSlider.tsx
-function ColorScaleSlider({
-  colors,
-  value,
-  onValueChange,
-  label,
-  warning,
-  trimEnds = false,
-  snap = false,
-  disabled = false,
-  animateValue = false,
-  style
-}) {
-  const tokens = useTokens(1);
-  const styles = React11.useMemo(
-    () => getColorScaleSliderStyles(tokens, disabled),
-    [tokens, disabled]
-  );
-  const trackRef = React11.useRef(null);
-  const trackWidth = React11.useRef(0);
-  const trackPageX = React11.useRef(0);
-  const isDragging = React11.useRef(false);
-  const thumbAnim = React11.useRef(new Animated.Value(0)).current;
-  const onValueChangeRef = React11.useRef(onValueChange);
-  const disabledRef = React11.useRef(disabled);
-  const colorsLengthRef = React11.useRef(colors.length);
-  const trimEndsRef = React11.useRef(trimEnds);
-  const snapRef = React11.useRef(snap);
-  React11.useEffect(() => {
-    onValueChangeRef.current = onValueChange;
-  }, [onValueChange]);
-  React11.useEffect(() => {
-    disabledRef.current = disabled;
-  }, [disabled]);
-  React11.useEffect(() => {
-    colorsLengthRef.current = colors.length;
-  }, [colors.length]);
-  React11.useEffect(() => {
-    trimEndsRef.current = trimEnds;
-  }, [trimEnds]);
-  React11.useEffect(() => {
-    snapRef.current = snap;
-  }, [snap]);
-  const computeNv = React11.useCallback((pageX) => {
-    const localX = pageX - trackPageX.current;
-    const ratio2 = Math.min(1, Math.max(0, localX / trackWidth.current));
-    const totalSteps2 = colorsLengthRef.current - 1;
-    const minNV2 = trimEndsRef.current ? 1 / totalSteps2 : 0;
-    const maxNV2 = trimEndsRef.current ? 1 - 1 / totalSteps2 : 1;
-    const range2 = maxNV2 - minNV2;
-    let nv = maxNV2 - ratio2 * range2;
-    if (snapRef.current && totalSteps2 > 0) {
-      const stepNv = 1 / totalSteps2;
-      nv = Math.round(nv / stepNv) * stepNv;
-      nv = Math.min(maxNV2, Math.max(minNV2, nv));
-    }
-    return nv;
-  }, []);
-  const panResponder = React11.useRef(
-    PanResponder.create({
-      onStartShouldSetPanResponder: () => !disabledRef.current,
-      onMoveShouldSetPanResponder: () => !disabledRef.current,
-      onPanResponderGrant: (evt) => {
-        isDragging.current = true;
-        onValueChangeRef.current(computeNv(evt.nativeEvent.pageX));
-      },
-      onPanResponderMove: (_evt, gestureState) => {
-        onValueChangeRef.current(computeNv(gestureState.moveX));
-      },
-      onPanResponderRelease: () => {
-        isDragging.current = false;
-      },
-      onPanResponderTerminate: () => {
-        isDragging.current = false;
-      }
-    })
-  ).current;
-  const visibleColors = trimEnds ? colors.slice(1, -1) : colors;
-  const totalSteps = colors.length - 1;
-  const minNV = trimEnds ? 1 / totalSteps : 0;
-  const maxNV = trimEnds ? 1 - 1 / totalSteps : 1;
-  const range = maxNV - minNV;
-  const clampedValue = value !== void 0 ? Math.min(maxNV, Math.max(minNV, value)) : (maxNV + minNV) / 2;
-  const ratio = range > 0 ? (maxNV - clampedValue) / range : 0.5;
-  const usableWidth = Math.max(0, trackWidth.current - THUMB_SIZE4);
-  const thumbLeft = ratio * usableWidth;
-  React11.useEffect(() => {
-    if (isDragging.current || !animateValue) {
-      thumbAnim.setValue(thumbLeft);
-    } else {
-      Animated.timing(thumbAnim, {
-        toValue: thumbLeft,
-        duration: 300,
-        useNativeDriver: false
-      }).start();
-    }
-  }, [thumbLeft, animateValue, thumbAnim]);
-  return /* @__PURE__ */ React11.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, label && /* @__PURE__ */ React11.createElement(View, { style: styles.labelRow }, /* @__PURE__ */ React11.createElement(Text, { style: styles.label }, label)), /* @__PURE__ */ React11.createElement(
-    View,
-    {
-      ref: trackRef,
-      style: styles.trackContainer,
-      onLayout: (e) => {
-        trackWidth.current = e.nativeEvent.layout.width;
-        const newUsableWidth = Math.max(0, e.nativeEvent.layout.width - THUMB_SIZE4);
-        thumbAnim.setValue(ratio * newUsableWidth);
-        trackRef.current?.measure((_x, _y, _w, _h, pageX) => {
-          if (pageX != null) trackPageX.current = pageX;
-        });
-      },
-      ...panResponder.panHandlers
-    },
-    /* @__PURE__ */ React11.createElement(View, { style: styles.gradientTrack }, visibleColors.map((color, i) => /* @__PURE__ */ React11.createElement(View, { key: i, style: [styles.segment, { backgroundColor: srgbToHex(color.srgb) }] }))),
-    /* @__PURE__ */ React11.createElement(Animated.View, { style: [styles.thumb, { left: thumbAnim }] })
-  ), warning && /* @__PURE__ */ React11.createElement(Text, { style: styles.warning }, warning));
-}
-function getWrapperStyles(input) {
-  const {
-    tokens,
-    direction = "vertical",
-    wrap = false,
-    reverse = false,
-    align,
-    justify,
-    padding,
-    gap,
-    width,
-    height,
-    minWidth,
-    maxWidth,
-    minHeight,
-    maxHeight
-  } = input;
-  const container = {};
-  container.flexDirection = resolveFlexDirection(direction, reverse);
-  if (wrap) container.flexWrap = "wrap";
-  if (align) container.alignItems = resolveAlignment(align);
-  if (justify) container.justifyContent = resolveJustification(justify);
-  if (padding !== void 0) {
-    const p = resolvePadding(padding, tokens);
-    container.paddingTop = p.top;
-    container.paddingRight = p.right;
-    container.paddingBottom = p.bottom;
-    container.paddingLeft = p.left;
-  }
-  if (gap !== void 0) {
-    const g = resolveGap(gap, tokens);
-    container.rowGap = g.rowGap;
-    container.columnGap = g.columnGap;
-  }
-  Object.assign(container, resolveSizing(width, height));
-  if (minWidth !== void 0) container.minWidth = minWidth;
-  if (maxWidth !== void 0) container.maxWidth = maxWidth;
-  if (minHeight !== void 0) container.minHeight = minHeight;
-  if (maxHeight !== void 0) container.maxHeight = maxHeight;
-  return StyleSheet.create({ c: container }).c;
-}
-
-// src/primitives/Wrapper/Wrapper.tsx
-function Wrapper({
-  children,
-  direction,
-  wrap,
-  reverse,
-  align,
-  justify,
-  padding,
-  gap,
-  width,
-  height,
-  minWidth,
-  maxWidth,
-  minHeight,
-  maxHeight,
-  style,
-  // Testing & platform
-  testID,
-  nativeID,
-  ref
-}) {
-  const tokens = useTokens(1);
-  const containerStyle = useMemo(
-    () => getWrapperStyles({
-      tokens,
-      direction,
-      wrap,
-      reverse,
-      align,
-      justify,
-      padding,
-      gap,
-      width,
-      height,
-      minWidth,
-      maxWidth,
-      minHeight,
-      maxHeight
-    }),
-    [
-      tokens,
-      direction,
-      wrap,
-      reverse,
-      align,
-      justify,
-      padding,
-      gap,
-      width,
-      height,
-      minWidth,
-      maxWidth,
-      minHeight,
-      maxHeight
-    ]
-  );
-  const userStyles = Array.isArray(style) ? style : style ? [style] : [];
-  return /* @__PURE__ */ React11.createElement(
-    View,
-    {
-      ref,
-      testID,
-      nativeID,
-      accessibilityRole: "none",
-      style: [containerStyle, ...userStyles]
-    },
-    children
-  );
-}
-var COLOR_MAP = {
-  primary: "textPrimary",
-  secondary: "textSecondary",
-  interactive: "interactive"
-};
-function Text11({
-  children,
-  size = "base",
-  weight = "regular",
-  color = "primary",
-  font = "default",
-  lineHeight = "normal",
-  align,
-  numberOfLines,
-  elevation = 1,
-  style,
-  // Accessibility
-  accessibilityRole,
-  // Testing & platform
-  testID,
-  nativeID,
-  ref
+      height: THUMB_SIZE4,
+      borderRadius: THUMB_SIZE4 / 2,
+      backgroundColor: "#ffffff",
+      borderWidth: 2,
+      borderColor: srgbToHex(tokens.border.srgb)
+    },
+    warning: {
+      fontFamily: tokens.typography.fonts.default,
+      fontSize: tokens.typography.size.xs,
+      fontWeight: tokens.typography.weight.medium,
+      color: srgbToHex(tokens.error.srgb)
+    }
+  });
+}
+
+// src/composites/range-inputs/ColorScaleSlider/ColorScaleSlider.tsx
+function ColorScaleSlider({
+  colors,
+  value,
+  onValueChange,
+  label,
+  warning,
+  trimEnds = false,
+  snap = false,
+  disabled = false,
+  animateValue = false,
+  style
 }) {
-  const tokens = useTokens(elevation);
-  const resolvedStyle = useMemo(() => {
-    const fontSize = tokens.typography.size[size];
-    return {
-      // Font family from the theme (e.g. 'default' → 'Inter', 'mono' → 'JetBrains Mono').
-      fontFamily: tokens.typography.fonts[font],
-      fontSize,
-      // Font weight is stored as a number (e.g. 400, 600) but React Native expects a string.
-      fontWeight: String(tokens.typography.weight[weight]),
-      // Convert the theme color from internal sRGB format to a hex string (e.g. '#1a1a1a').
-      color: srgbToHex(tokens[COLOR_MAP[color]].srgb),
-      // Line height = font size × multiplier (e.g. 16px × 1.5 = 24px line height).
-      lineHeight: fontSize * tokens.typography.lineHeight[lineHeight],
-      textAlign: align
-    };
-  }, [tokens, size, weight, color, font, lineHeight, align]);
-  return /* @__PURE__ */ React11.createElement(
-    Text,
+  const tokens = useTokens(1);
+  const styles = React13.useMemo(
+    () => getColorScaleSliderStyles(tokens, disabled),
+    [tokens, disabled]
+  );
+  const trackRef = React13.useRef(null);
+  const trackWidth = React13.useRef(0);
+  const trackPageX = React13.useRef(0);
+  const isDragging = React13.useRef(false);
+  const thumbAnim = React13.useRef(new Animated.Value(0)).current;
+  const onValueChangeRef = React13.useRef(onValueChange);
+  const disabledRef = React13.useRef(disabled);
+  const colorsLengthRef = React13.useRef(colors.length);
+  const trimEndsRef = React13.useRef(trimEnds);
+  const snapRef = React13.useRef(snap);
+  React13.useEffect(() => {
+    onValueChangeRef.current = onValueChange;
+  }, [onValueChange]);
+  React13.useEffect(() => {
+    disabledRef.current = disabled;
+  }, [disabled]);
+  React13.useEffect(() => {
+    colorsLengthRef.current = colors.length;
+  }, [colors.length]);
+  React13.useEffect(() => {
+    trimEndsRef.current = trimEnds;
+  }, [trimEnds]);
+  React13.useEffect(() => {
+    snapRef.current = snap;
+  }, [snap]);
+  const computeNv = React13.useCallback((pageX) => {
+    const localX = pageX - trackPageX.current;
+    const ratio2 = Math.min(1, Math.max(0, localX / trackWidth.current));
+    const totalSteps2 = colorsLengthRef.current - 1;
+    const minNV2 = trimEndsRef.current ? 1 / totalSteps2 : 0;
+    const maxNV2 = trimEndsRef.current ? 1 - 1 / totalSteps2 : 1;
+    const range2 = maxNV2 - minNV2;
+    let nv = maxNV2 - ratio2 * range2;
+    if (snapRef.current && totalSteps2 > 0) {
+      const stepNv = 1 / totalSteps2;
+      nv = Math.round(nv / stepNv) * stepNv;
+      nv = Math.min(maxNV2, Math.max(minNV2, nv));
+    }
+    return nv;
+  }, []);
+  const panResponder = React13.useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => !disabledRef.current,
+      onMoveShouldSetPanResponder: () => !disabledRef.current,
+      onPanResponderGrant: (evt) => {
+        isDragging.current = true;
+        onValueChangeRef.current(computeNv(evt.nativeEvent.pageX));
+      },
+      onPanResponderMove: (_evt, gestureState) => {
+        onValueChangeRef.current(computeNv(gestureState.moveX));
+      },
+      onPanResponderRelease: () => {
+        isDragging.current = false;
+      },
+      onPanResponderTerminate: () => {
+        isDragging.current = false;
+      }
+    })
+  ).current;
+  const visibleColors = trimEnds ? colors.slice(1, -1) : colors;
+  const totalSteps = colors.length - 1;
+  const minNV = trimEnds ? 1 / totalSteps : 0;
+  const maxNV = trimEnds ? 1 - 1 / totalSteps : 1;
+  const range = maxNV - minNV;
+  const clampedValue = value !== void 0 ? Math.min(maxNV, Math.max(minNV, value)) : (maxNV + minNV) / 2;
+  const ratio = range > 0 ? (maxNV - clampedValue) / range : 0.5;
+  const usableWidth = Math.max(0, trackWidth.current - THUMB_SIZE4);
+  const thumbLeft = ratio * usableWidth;
+  React13.useEffect(() => {
+    if (isDragging.current || !animateValue) {
+      thumbAnim.setValue(thumbLeft);
+    } else {
+      Animated.timing(thumbAnim, {
+        toValue: thumbLeft,
+        duration: 300,
+        useNativeDriver: false
+      }).start();
+    }
+  }, [thumbLeft, animateValue, thumbAnim]);
+  return /* @__PURE__ */ React13.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, label && /* @__PURE__ */ React13.createElement(View, { style: styles.labelRow }, /* @__PURE__ */ React13.createElement(Text, { style: styles.label }, label)), /* @__PURE__ */ React13.createElement(
+    View,
     {
-      ref,
-      testID,
-      nativeID,
-      accessibilityRole,
-      style: style ? [resolvedStyle, ...Array.isArray(style) ? style : [style]] : resolvedStyle,
-      numberOfLines
+      ref: trackRef,
+      style: styles.trackContainer,
+      onLayout: (e) => {
+        trackWidth.current = e.nativeEvent.layout.width;
+        const newUsableWidth = Math.max(0, e.nativeEvent.layout.width - THUMB_SIZE4);
+        thumbAnim.setValue(ratio * newUsableWidth);
+        trackRef.current?.measure((_x, _y, _w, _h, pageX) => {
+          if (pageX != null) trackPageX.current = pageX;
+        });
+      },
+      ...panResponder.panHandlers
     },
-    children
-  );
+    /* @__PURE__ */ React13.createElement(View, { style: styles.gradientTrack }, visibleColors.map((color, i) => /* @__PURE__ */ React13.createElement(View, { key: i, style: [styles.segment, { backgroundColor: srgbToHex(color.srgb) }] }))),
+    /* @__PURE__ */ React13.createElement(Animated.View, { style: [styles.thumb, { left: thumbAnim }] })
+  ), warning && /* @__PURE__ */ React13.createElement(Text, { style: styles.warning }, warning));
 }
 function getAppShellStyles(tokens) {
   return StyleSheet.create({
@@ -2442,11 +2609,11 @@ function getAppShellStyles(tokens) {
   });
 }
 
-// src/AppShell/AppShell.tsx
+// src/composites/layout/AppShell/AppShell.tsx
 function AppShell({ sidebar, children }) {
   const tokens = useTokens();
-  const styles = React11.useMemo(() => getAppShellStyles(tokens), [tokens]);
-  return /* @__PURE__ */ React11.createElement(View, { style: styles.container }, sidebar, /* @__PURE__ */ React11.createElement(View, { style: styles.main }, children));
+  const styles = React13.useMemo(() => getAppShellStyles(tokens), [tokens]);
+  return /* @__PURE__ */ React13.createElement(View, { style: styles.container }, sidebar, /* @__PURE__ */ React13.createElement(View, { style: styles.main }, children));
 }
 function getSidebarStyles({ tokens, width, bordered }) {
   const borderColor = srgbToHex(tokens.border.srgb);
@@ -2475,7 +2642,7 @@ function getSidebarStyles({ tokens, width, bordered }) {
   });
 }
 
-// src/Sidebar/Sidebar.tsx
+// src/composites/layout/Sidebar/Sidebar.tsx
 function Sidebar({
   children,
   header,
@@ -2484,11 +2651,11 @@ function Sidebar({
   bordered = true
 }) {
   const tokens = useTokens();
-  const styles = React11.useMemo(
+  const styles = React13.useMemo(
     () => getSidebarStyles({ tokens, width, bordered }),
     [tokens, width, bordered]
   );
-  return /* @__PURE__ */ React11.createElement(View, { style: styles.container }, header && /* @__PURE__ */ React11.createElement(View, { style: styles.header }, header), /* @__PURE__ */ React11.createElement(ScrollView, { style: styles.body }, children), footer && /* @__PURE__ */ React11.createElement(View, { style: styles.footer }, footer));
+  return /* @__PURE__ */ React13.createElement(View, { style: styles.container }, header && /* @__PURE__ */ React13.createElement(View, { style: styles.header }, header), /* @__PURE__ */ React13.createElement(ScrollView, { style: styles.body }, children), footer && /* @__PURE__ */ React13.createElement(View, { style: styles.footer }, footer));
 }
 function getNavbarStyles({ tokens, height, bordered }) {
   const borderColor = srgbToHex(tokens.border.srgb);
@@ -2517,7 +2684,7 @@ function getNavbarStyles({ tokens, height, bordered }) {
   });
 }
 
-// src/Navbar/Navbar.tsx
+// src/composites/layout/Navbar/Navbar.tsx
 function Navbar({
   children,
   left,
@@ -2526,19 +2693,21 @@ function Navbar({
   bordered = true
 }) {
   const tokens = useTokens();
-  const styles = React11.useMemo(
+  const styles = React13.useMemo(
     () => getNavbarStyles({ tokens, height, bordered }),
     [tokens, height, bordered]
   );
-  return /* @__PURE__ */ React11.createElement(View, { style: styles.container }, children ? children : /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(View, { style: styles.left }, left), /* @__PURE__ */ React11.createElement(View, { style: styles.right }, right)));
+  return /* @__PURE__ */ React13.createElement(View, { style: styles.container }, children ? children : /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(View, { style: styles.left }, left), /* @__PURE__ */ React13.createElement(View, { style: styles.right }, right)));
 }
 
 // src/registry/registry.ts
 var CATEGORIES = [
+  { id: "primitives", name: "Design Primitives", description: "Core building blocks for theme-aware layouts and typography" },
   { id: "actions", name: "Actions", description: "Interactive elements that trigger actions" },
   { id: "form-controls", name: "Form Controls", description: "Input elements for user data entry" },
-  { id: "range-inputs", name: "Range Inputs", description: "Slider controls for numeric values" },
-  { id: "layout", name: "Layout", description: "Structural and container components" }
+  { id: "range-inputs", name: "Range Inputs", description: "Slider controls for numeric and continuous values" },
+  { id: "layout", name: "Layout", description: "Structural and container components" },
+  { id: "overlays", name: "Overlays", description: "Floating and portal-based UI elements" }
 ];
 var COMPONENTS = [
   {
@@ -2919,6 +3088,216 @@ var COMPONENTS = [
         defaultValue: false
       }
     ]
+  },
+  // ── Design Primitives ──
+  {
+    id: "text",
+    name: "Text",
+    importName: "Text",
+    categoryId: "primitives",
+    description: "Typography primitive with semantic size, weight, color, font, and lineHeight",
+    hasChildren: true,
+    variants: [
+      { id: "default", label: "Default", props: {} },
+      { id: "heading", label: "Heading", props: { size: "xl", weight: "bold" } },
+      { id: "subheading", label: "Subheading", props: { size: "lg", weight: "semibold" } },
+      { id: "body", label: "Body", props: { size: "base" } },
+      { id: "caption", label: "Caption", props: { size: "sm", color: "secondary" } },
+      { id: "link", label: "Link", props: { color: "interactive", weight: "medium" } },
+      { id: "mono", label: "Monospace", props: { font: "mono", size: "sm" } }
+    ],
+    editableProps: [
+      {
+        name: "size",
+        label: "Size",
+        control: "select",
+        options: [
+          { label: "Extra Small", value: "xs" },
+          { label: "Small", value: "sm" },
+          { label: "Base", value: "base" },
+          { label: "Medium", value: "md" },
+          { label: "Large", value: "lg" },
+          { label: "Extra Large", value: "xl" },
+          { label: "XXL", value: "xxl" }
+        ],
+        defaultValue: "base"
+      },
+      {
+        name: "weight",
+        label: "Weight",
+        control: "select",
+        options: [
+          { label: "Regular", value: "regular" },
+          { label: "Medium", value: "medium" },
+          { label: "Semibold", value: "semibold" },
+          { label: "Bold", value: "bold" }
+        ],
+        defaultValue: "regular"
+      },
+      {
+        name: "color",
+        label: "Color",
+        control: "select",
+        options: [
+          { label: "Primary", value: "primary" },
+          { label: "Secondary", value: "secondary" },
+          { label: "Interactive", value: "interactive" }
+        ],
+        defaultValue: "primary"
+      },
+      {
+        name: "font",
+        label: "Font",
+        control: "select",
+        options: [
+          { label: "Default", value: "default" },
+          { label: "Display", value: "display" },
+          { label: "Mono", value: "mono" }
+        ],
+        defaultValue: "default"
+      }
+    ]
+  },
+  {
+    id: "icon",
+    name: "Icon",
+    importName: "Icon",
+    categoryId: "primitives",
+    description: "Material Symbols icon with size, fill, and color",
+    hasChildren: false,
+    variants: [
+      { id: "home", label: "Home", props: { name: "home" } },
+      { id: "settings", label: "Settings", props: { name: "settings" } },
+      { id: "check", label: "Check", props: { name: "check" } },
+      { id: "add", label: "Add", props: { name: "add" } },
+      { id: "delete", label: "Delete", props: { name: "delete" } },
+      { id: "search", label: "Search", props: { name: "search" } },
+      { id: "filled", label: "Filled Icon", props: { name: "favorite", fill: 1 } },
+      { id: "large", label: "Large Icon", props: { name: "star", size: 32 } }
+    ],
+    editableProps: [
+      {
+        name: "name",
+        label: "Icon Name",
+        control: "text",
+        defaultValue: "home"
+      },
+      {
+        name: "size",
+        label: "Size",
+        control: "number",
+        defaultValue: 24
+      },
+      {
+        name: "fill",
+        label: "Fill",
+        control: "select",
+        options: [
+          { label: "Outlined", value: 0 },
+          { label: "Filled", value: 1 }
+        ],
+        defaultValue: 0
+      }
+    ]
+  },
+  {
+    id: "wrapper",
+    name: "Wrapper",
+    importName: "Wrapper",
+    categoryId: "primitives",
+    description: "Lightweight layout container with direction, spacing, and alignment (no theming)",
+    hasChildren: true,
+    variants: [
+      { id: "vertical", label: "Vertical Stack", props: { direction: "vertical", gap: "md" } },
+      { id: "horizontal", label: "Horizontal Row", props: { direction: "horizontal", gap: "md", align: "center" } },
+      { id: "padded", label: "Padded", props: { padding: "lg", gap: "md" } },
+      { id: "centered", label: "Centered", props: { align: "center", justify: "center", padding: "xl" } }
+    ],
+    editableProps: [
+      {
+        name: "direction",
+        label: "Direction",
+        control: "select",
+        options: [
+          { label: "Vertical", value: "vertical" },
+          { label: "Horizontal", value: "horizontal" }
+        ],
+        defaultValue: "vertical"
+      },
+      {
+        name: "gap",
+        label: "Gap",
+        control: "select",
+        options: [
+          { label: "None", value: "" },
+          { label: "Small", value: "sm" },
+          { label: "Medium", value: "md" },
+          { label: "Large", value: "lg" }
+        ],
+        defaultValue: ""
+      },
+      {
+        name: "padding",
+        label: "Padding",
+        control: "select",
+        options: [
+          { label: "None", value: "" },
+          { label: "Small", value: "sm" },
+          { label: "Medium", value: "md" },
+          { label: "Large", value: "lg" }
+        ],
+        defaultValue: ""
+      },
+      {
+        name: "align",
+        label: "Align",
+        control: "select",
+        options: [
+          { label: "Start", value: "start" },
+          { label: "Center", value: "center" },
+          { label: "End", value: "end" }
+        ],
+        defaultValue: "start"
+      },
+      {
+        name: "justify",
+        label: "Justify",
+        control: "select",
+        options: [
+          { label: "Start", value: "start" },
+          { label: "Center", value: "center" },
+          { label: "End", value: "end" },
+          { label: "Space Between", value: "space-between" }
+        ],
+        defaultValue: "start"
+      }
+    ]
+  },
+  // ── Range Inputs (Addition: ColorScaleSlider) ──
+  {
+    id: "color-scale-slider",
+    name: "ColorScaleSlider",
+    importName: "ColorScaleSlider",
+    categoryId: "range-inputs",
+    description: "Interactive palette preview slider with color segments",
+    hasChildren: false,
+    variants: [
+      { id: "default", label: "Default", props: { label: "Key Color" } }
+    ],
+    editableProps: [
+      {
+        name: "label",
+        label: "Label",
+        control: "text",
+        defaultValue: "Key Color"
+      },
+      {
+        name: "disabled",
+        label: "Disabled",
+        control: "toggle",
+        defaultValue: false
+      }
+    ]
   }
 ];
 function getComponent(id) {
@@ -3087,6 +3466,6 @@ var SYSTEM_FONTS = [
   }
 ];
 
-export { AppShell, Button, CATEGORIES, COMPONENTS, Card, ColorScaleSlider, DEFAULT_THEME_CONFIG, Frame, GOOGLE_FONTS, HueSlider, Icon, Navbar, NewtoneProvider, Popover, SYSTEM_FONTS, Select, Sidebar, Slider, Text11 as Text, TextInput, Toggle, Wrapper, buildGoogleFontsUrl, computeTokens, generateComponentCode, getCategory, getComponent, getComponentsByCategory, isOptionGroup, useFocusVisible, useFrameContext, useNewtoneTheme, usePopover, useTokens };
+export { AppShell, Button, CATEGORIES, COMPONENTS, Card, ColorScaleSlider, DEFAULT_THEME_CONFIG, Frame, GOOGLE_FONTS, HueSlider, Icon, Navbar, NewtoneProvider, Popover, SYSTEM_FONTS, Select, Sidebar, Slider, Text2 as Text, TextInput, Toggle, Wrapper, buildGoogleFontsUrl, computeTokens, generateComponentCode, getCategory, getComponent, getComponentsByCategory, isOptionGroup, useFocusVisible, useFrameContext, useNewtoneTheme, usePopover, useTokens };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map