@newtonedev/components 0.1.0 → 0.1.2

package/dist/index.js

@@ -1,6 +1,6 @@
-import React7, { createContext, useState, useMemo, useContext } from 'react';
+import React11, { createContext, useState, useMemo, useContext, useRef, useCallback, useEffect } 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 { Pressable, Text, View, TextInput as TextInput$1, StyleSheet } from 'react-native';
+import { Text, Pressable, View, TextInput as TextInput$1, ScrollView, PanResponder, Animated, StyleSheet } from 'react-native';
 
 // src/theme/NewtoneProvider.tsx
 var DEFAULT_THEME_CONFIG = {
@@ -26,9 +26,145 @@ var DEFAULT_THEME_CONFIG = {
   elevation: {
     offsets: [-0.02, 0, 0.04]
     // [sunken, default, elevated]
+  },
+  spacing: {
+    xs: 4,
+    sm: 8,
+    md: 12,
+    lg: 16,
+    xl: 24,
+    xxl: 32
+  },
+  radius: {
+    none: 0,
+    sm: 4,
+    md: 6,
+    lg: 8,
+    xl: 12,
+    pill: 999
+  },
+  typography: {
+    fonts: {
+      mono: {
+        type: "system",
+        family: "ui-monospace",
+        fallback: "SFMono-Regular, Menlo, Monaco, Consolas, monospace"
+      },
+      display: {
+        type: "system",
+        family: "system-ui",
+        fallback: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
+      },
+      default: {
+        type: "system",
+        family: "system-ui",
+        fallback: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
+      }
+    },
+    scale: {
+      xs: 10,
+      // 16 / 1.25^2
+      sm: 13,
+      // 16 / 1.25
+      base: 16,
+      md: 20,
+      // 16 * 1.25
+      lg: 25,
+      // 16 * 1.25^2
+      xl: 31,
+      // 16 * 1.25^3
+      xxl: 39
+      // 16 * 1.25^4
+    },
+    lineHeight: { tight: 1.25, normal: 1.5, relaxed: 1.75 },
+    fontWeight: { regular: 400, medium: 500, semibold: 600, bold: 700 }
+  },
+  icons: {
+    variant: "rounded",
+    // Material Design 3 aesthetic
+    weight: 400,
+    // Normal weight
+    autoGrade: true
+    // Enable mode-aware grade
   }
 };
 
+// src/fonts/buildGoogleFontsUrl.ts
+function buildGoogleFontsUrl(fonts) {
+  const googleFonts = [fonts.mono, fonts.display, fonts.default].filter(
+    (f) => f.type === "google"
+  );
+  if (googleFonts.length === 0) return null;
+  const unique = [...new Map(googleFonts.map((f) => [f.family, f])).values()];
+  const families = unique.map((f) => {
+    const encoded = f.family.replace(/ /g, "+");
+    return `family=${encoded}:wght@400;500;600;700`;
+  });
+  return `https://fonts.googleapis.com/css2?${families.join("&")}&display=swap`;
+}
+
+// src/fonts/GoogleFontLoader.tsx
+function GoogleFontLoader({ fonts }) {
+  const linkRef = useRef(null);
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    const url = buildGoogleFontsUrl(fonts);
+    if (linkRef.current) {
+      linkRef.current.remove();
+      linkRef.current = null;
+    }
+    if (!url) return;
+    const links = Array.from(document.head.querySelectorAll('link[rel="stylesheet"]'));
+    if (links.some((el) => el.href === url)) return;
+    const link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.href = url;
+    document.head.appendChild(link);
+    linkRef.current = link;
+    return () => {
+      if (linkRef.current) {
+        linkRef.current.remove();
+        linkRef.current = null;
+      }
+    };
+  }, [
+    fonts.mono.family,
+    fonts.mono.type,
+    fonts.display.family,
+    fonts.display.type,
+    fonts.default.family,
+    fonts.default.type
+  ]);
+  return null;
+}
+function IconFontLoader({ icons }) {
+  const linkRef = useRef(null);
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    const variantName = icons.variant.charAt(0).toUpperCase() + icons.variant.slice(1);
+    const family = `Material+Symbols+${variantName}`;
+    const url = `https://fonts.googleapis.com/css2?family=${family}:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block`;
+    if (linkRef.current) {
+      linkRef.current.remove();
+      linkRef.current = null;
+    }
+    const links = Array.from(document.head.querySelectorAll('link[rel="stylesheet"]'));
+    if (links.some((el) => el.href === url)) return;
+    const link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.href = url;
+    document.head.appendChild(link);
+    linkRef.current = link;
+    return () => {
+      if (linkRef.current) {
+        linkRef.current.remove();
+        linkRef.current = null;
+      }
+    };
+  }, [icons.variant]);
+  return null;
+}
+
 // src/theme/NewtoneProvider.tsx
 var ThemeContext = createContext(null);
 function NewtoneProvider({
@@ -49,7 +185,7 @@ function NewtoneProvider({
     }),
     [config, mode, theme]
   );
-  return /* @__PURE__ */ React7.createElement(ThemeContext.Provider, { value }, children);
+  return /* @__PURE__ */ React11.createElement(ThemeContext.Provider, { value }, /* @__PURE__ */ React11.createElement(GoogleFontLoader, { fonts: config.typography.fonts }), /* @__PURE__ */ React11.createElement(IconFontLoader, { icons: config.icons }), children);
 }
 function useNewtoneTheme() {
   const context = useContext(ThemeContext);
@@ -58,7 +194,15 @@ function useNewtoneTheme() {
   }
   return context;
 }
-function computeTokens(config, mode, themeMapping, elevation, elevationOffsets) {
+var FrameContext = createContext(null);
+function useFrameContext() {
+  return useContext(FrameContext);
+}
+function fontConfigToFamily(font) {
+  const family = font.family.includes(" ") ? `"${font.family}"` : font.family;
+  return `${family}, ${font.fallback}`;
+}
+function computeTokens(config, mode, themeMapping, elevation, elevationOffsets, spacing, radius, typography, icons) {
   const { dynamicRange, palettes } = config;
   const palette = palettes[themeMapping.paletteIndex];
   if (!palette) {
@@ -101,7 +245,8 @@ function computeTokens(config, mode, themeMapping, elevation, elevationOffsets)
     4.5,
     effectiveTextMode,
     palette.desaturation,
-    palette.paletteHueGrading
+    palette.paletteHueGrading,
+    background
   );
   const textSecondary = getColorByContrast(
     palette.hue,
@@ -110,22 +255,33 @@ function computeTokens(config, mode, themeMapping, elevation, elevationOffsets)
     3,
     effectiveTextMode,
     palette.desaturation,
-    palette.paletteHueGrading
+    palette.paletteHueGrading,
+    background
   );
   const accentPalette = palettes[1];
   if (!accentPalette) {
     throw new Error("Accent palette (index 1) not found");
   }
-  const interactive = getColorByContrast(
+  const resolveKeyNv = (p) => mode === "dark" ? p.keyNormalizedValueDark : p.keyNormalizedValue;
+  const accentKeyNv = resolveKeyNv(accentPalette);
+  const interactive = accentKeyNv !== void 0 ? getColor(
+    accentPalette.hue,
+    accentPalette.saturation,
+    dynamicRange,
+    accentKeyNv,
+    accentPalette.desaturation,
+    accentPalette.paletteHueGrading
+  ) : getColorByContrast(
     accentPalette.hue,
     accentPalette.saturation,
     dynamicRange,
     4.5,
     effectiveTextMode,
     accentPalette.desaturation,
-    accentPalette.paletteHueGrading
+    accentPalette.paletteHueGrading,
+    background
   );
-  const interactiveNv = effectiveTextMode === "light" ? 0.3 : 0.7;
+  const interactiveNv = accentKeyNv ?? (effectiveTextMode === "light" ? 0.3 : 0.7);
   const interactiveHover = getColor(
     accentPalette.hue,
     accentPalette.saturation,
@@ -154,32 +310,59 @@ function computeTokens(config, mode, themeMapping, elevation, elevationOffsets)
   const successPalette = palettes[2];
   const warningPalette = palettes[3];
   const errorPalette = palettes[4];
-  const success = successPalette ? getColorByContrast(
+  const successKeyNv = successPalette ? resolveKeyNv(successPalette) : void 0;
+  const success = successPalette ? successKeyNv !== void 0 ? getColor(
+    successPalette.hue,
+    successPalette.saturation,
+    dynamicRange,
+    successKeyNv,
+    successPalette.desaturation,
+    successPalette.paletteHueGrading
+  ) : getColorByContrast(
     successPalette.hue,
     successPalette.saturation,
     dynamicRange,
     4.5,
     effectiveTextMode,
     successPalette.desaturation,
-    successPalette.paletteHueGrading
+    successPalette.paletteHueGrading,
+    background
   ) : interactive;
-  const warning = warningPalette ? getColorByContrast(
+  const warningKeyNv = warningPalette ? resolveKeyNv(warningPalette) : void 0;
+  const warning = warningPalette ? warningKeyNv !== void 0 ? getColor(
+    warningPalette.hue,
+    warningPalette.saturation,
+    dynamicRange,
+    warningKeyNv,
+    warningPalette.desaturation,
+    warningPalette.paletteHueGrading
+  ) : getColorByContrast(
     warningPalette.hue,
     warningPalette.saturation,
     dynamicRange,
     4.5,
     effectiveTextMode,
     warningPalette.desaturation,
-    warningPalette.paletteHueGrading
+    warningPalette.paletteHueGrading,
+    background
   ) : interactive;
-  const error = errorPalette ? getColorByContrast(
+  const errorKeyNv = errorPalette ? resolveKeyNv(errorPalette) : void 0;
+  const error = errorPalette ? errorKeyNv !== void 0 ? getColor(
+    errorPalette.hue,
+    errorPalette.saturation,
+    dynamicRange,
+    errorKeyNv,
+    errorPalette.desaturation,
+    errorPalette.paletteHueGrading
+  ) : getColorByContrast(
     errorPalette.hue,
     errorPalette.saturation,
     dynamicRange,
     4.5,
     effectiveTextMode,
     errorPalette.desaturation,
-    errorPalette.paletteHueGrading
+    errorPalette.paletteHueGrading,
+    background
   ) : interactive;
   return {
     background,
@@ -193,38 +376,86 @@ function computeTokens(config, mode, themeMapping, elevation, elevationOffsets)
     border,
     success,
     warning,
-    error
+    error,
+    spacing,
+    radius,
+    typography: {
+      fonts: {
+        mono: fontConfigToFamily(typography.fonts.mono),
+        display: fontConfigToFamily(typography.fonts.display),
+        default: fontConfigToFamily(typography.fonts.default)
+      },
+      size: typography.scale,
+      lineHeight: typography.lineHeight,
+      weight: typography.fontWeight
+    },
+    icons: {
+      variant: icons.variant,
+      weight: icons.weight,
+      grade: icons.autoGrade ? mode === "light" ? -25 : 200 : 0
+    }
   };
 }
 
 // src/tokens/useTokens.ts
-function useTokens(elevation = 1) {
-  const { config, mode, theme } = useNewtoneTheme();
+function useTokens(elevation) {
+  const { config, mode, theme: providerTheme } = useNewtoneTheme();
+  const frameCtx = useFrameContext();
+  const resolvedTheme = frameCtx?.theme ?? providerTheme;
+  const resolvedElevation = elevation ?? frameCtx?.elevation ?? 1;
   return useMemo(() => {
-    const themeMapping = config.themes[theme];
+    const themeMapping = config.themes[resolvedTheme];
     return computeTokens(
       config.colorSystem,
       mode,
       themeMapping,
-      elevation,
-      config.elevation.offsets
+      resolvedElevation,
+      config.elevation.offsets,
+      config.spacing,
+      config.radius,
+      config.typography,
+      config.icons
     );
-  }, [config, mode, theme, elevation]);
+  }, [config, mode, resolvedTheme, resolvedElevation]);
 }
-var SIZE_CONFIG = {
-  sm: { paddingVertical: 6, paddingHorizontal: 12, fontSize: 12, borderRadius: 4 },
-  md: { paddingVertical: 10, paddingHorizontal: 20, fontSize: 14, borderRadius: 6 },
-  lg: { paddingVertical: 14, paddingHorizontal: 28, fontSize: 16, borderRadius: 8 }
-};
-function getButtonStyles(tokens, variant, size, disabled) {
-  const sizeConfig = SIZE_CONFIG[size];
+function getSizeConfig(tokens) {
+  return {
+    sm: {
+      paddingVertical: tokens.spacing.xs,
+      paddingHorizontal: tokens.spacing.md,
+      fontSize: tokens.typography.size.sm,
+      borderRadius: tokens.radius.sm,
+      gap: tokens.spacing.xs,
+      iconSize: tokens.typography.size.sm
+    },
+    md: {
+      paddingVertical: tokens.spacing.sm,
+      paddingHorizontal: tokens.spacing.lg,
+      fontSize: tokens.typography.size.base,
+      borderRadius: tokens.radius.md,
+      gap: tokens.spacing.sm,
+      iconSize: tokens.typography.size.base
+    },
+    lg: {
+      paddingVertical: tokens.spacing.md,
+      paddingHorizontal: tokens.spacing.xl,
+      fontSize: tokens.typography.size.base,
+      borderRadius: tokens.radius.lg,
+      gap: tokens.spacing.sm,
+      iconSize: tokens.typography.size.base
+    }
+  };
+}
+function getButtonStyles(tokens, variant, size, disabled, isIconOnly) {
+  const sizeConfig = getSizeConfig(tokens)[size];
   const base = {
     paddingVertical: sizeConfig.paddingVertical,
-    paddingHorizontal: sizeConfig.paddingHorizontal,
+    paddingHorizontal: isIconOnly ? sizeConfig.paddingVertical : sizeConfig.paddingHorizontal,
     borderRadius: sizeConfig.borderRadius,
     alignItems: "center",
     justifyContent: "center",
-    flexDirection: "row"
+    flexDirection: "row",
+    gap: sizeConfig.gap
   };
   let backgroundColor;
   let textColor;
@@ -250,37 +481,77 @@ function getButtonStyles(tokens, variant, size, disabled) {
       textColor = srgbToHex(tokens.interactive.srgb);
       break;
   }
-  return 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: {
-      fontSize: sizeConfig.fontSize,
-      fontWeight: "600",
-      color: disabled ? srgbToHex(tokens.textSecondary.srgb) : textColor
-    },
-    textPressed: {
-      // Color changes handled by parent opacity
+  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
+      }
+    })
+  };
+}
+function Icon({
+  name,
+  size,
+  opticalSize,
+  fill = 0,
+  color,
+  elevation = 1,
+  style,
+  onPress
+}) {
+  const tokens = useTokens(elevation);
+  const fontSize = size ?? tokens.typography.size.base;
+  const opsz = opticalSize ?? 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 /* @__PURE__ */ React11.createElement(
+    Text,
+    {
+      style: {
+        fontFamily,
+        fontSize,
+        color: iconColor,
+        userSelect: "none",
+        fontVariationSettings,
+        ...style
+      },
+      onPress
     },
-    textDisabled: {
-      // Color already set in text style via disabled check
-    }
-  });
+    name
+  );
 }
 
 // src/Button/Button.tsx
 function Button({
   children,
+  icon,
+  iconPosition = "left",
   variant = "primary",
   size = "md",
   disabled = false,
@@ -289,11 +560,13 @@ function Button({
   ...pressableProps
 }) {
   const tokens = useTokens(1);
-  const styles = React7.useMemo(
-    () => getButtonStyles(tokens, variant, size, disabled),
-    [tokens, variant, size, disabled]
+  const isIconOnly = !!icon && !children;
+  const { styles, iconColor, iconSize } = React11.useMemo(
+    () => getButtonStyles(tokens, variant, size, disabled, isIconOnly),
+    [tokens, variant, size, disabled, isIconOnly]
   );
-  return /* @__PURE__ */ React7.createElement(
+  const renderIcon = () => /* @__PURE__ */ React11.createElement(Icon, { name: icon, size: iconSize, color: iconColor });
+  return /* @__PURE__ */ React11.createElement(
     Pressable,
     {
       style: ({ pressed }) => [
@@ -305,7 +578,7 @@ function Button({
       disabled,
       ...pressableProps
     },
-    ({ pressed }) => /* @__PURE__ */ React7.createElement(
+    ({ pressed }) => /* @__PURE__ */ React11.createElement(React11.Fragment, null, icon && iconPosition === "left" && renderIcon(), children != null && /* @__PURE__ */ React11.createElement(
       Text,
       {
         style: [
@@ -316,7 +589,7 @@ function Button({
         ]
       },
       children
-    )
+    ), icon && iconPosition === "right" && renderIcon())
   );
 }
 function getCardStyles(tokens, disabled) {
@@ -325,8 +598,8 @@ function getCardStyles(tokens, disabled) {
       backgroundColor: srgbToHex(tokens.background.srgb),
       borderWidth: 1,
       borderColor: srgbToHex(tokens.border.srgb),
-      borderRadius: 8,
-      padding: 16,
+      borderRadius: tokens.radius.lg,
+      padding: tokens.spacing.lg,
       opacity: disabled ? 0.5 : 1
     }
   });
@@ -340,30 +613,391 @@ function Card({
   disabled = false
 }) {
   const tokens = useTokens(elevation);
-  const styles = React7.useMemo(
+  const styles = React11.useMemo(
     () => getCardStyles(tokens, disabled),
     [tokens, disabled]
   );
-  return /* @__PURE__ */ React7.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, children);
+  return /* @__PURE__ */ React11.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, children);
+}
+
+// src/Frame/Frame.utils.ts
+function resolveSpacing(value, tokens) {
+  if (typeof value === "number") return value;
+  return tokens.spacing[value];
+}
+function resolvePadding(prop, tokens) {
+  if (typeof prop === "string" || typeof prop === "number") {
+    const px = resolveSpacing(prop, tokens);
+    return { top: px, right: px, bottom: px, left: px };
+  }
+  if ("x" in prop || "y" in prop) {
+    const axes = prop;
+    const x = axes.x !== void 0 ? resolveSpacing(axes.x, tokens) : 0;
+    const y = axes.y !== void 0 ? resolveSpacing(axes.y, tokens) : 0;
+    return { top: y, right: x, bottom: y, left: x };
+  }
+  const sides = prop;
+  return {
+    top: sides.top !== void 0 ? resolveSpacing(sides.top, tokens) : 0,
+    right: sides.right !== void 0 ? resolveSpacing(sides.right, tokens) : 0,
+    bottom: sides.bottom !== void 0 ? resolveSpacing(sides.bottom, tokens) : 0,
+    left: sides.left !== void 0 ? resolveSpacing(sides.left, tokens) : 0
+  };
+}
+function resolveGap(prop, tokens) {
+  if (typeof prop === "string" || typeof prop === "number") {
+    const px = resolveSpacing(prop, tokens);
+    return { rowGap: px, columnGap: px };
+  }
+  return {
+    rowGap: prop.row !== void 0 ? resolveSpacing(prop.row, tokens) : 0,
+    columnGap: prop.column !== void 0 ? resolveSpacing(prop.column, tokens) : 0
+  };
+}
+function resolveRadius(value, tokens) {
+  if (typeof value === "number") return value;
+  return tokens.radius[value];
+}
+function resolveRadiusCorners(prop, tokens) {
+  if (typeof prop === "string" || typeof prop === "number") {
+    const px = resolveRadius(prop, tokens);
+    return { topLeft: px, topRight: px, bottomLeft: px, bottomRight: px };
+  }
+  return {
+    topLeft: prop.topLeft !== void 0 ? resolveRadius(prop.topLeft, tokens) : 0,
+    topRight: prop.topRight !== void 0 ? resolveRadius(prop.topRight, tokens) : 0,
+    bottomLeft: prop.bottomLeft !== void 0 ? resolveRadius(prop.bottomLeft, tokens) : 0,
+    bottomRight: prop.bottomRight !== void 0 ? resolveRadius(prop.bottomRight, tokens) : 0
+  };
+}
+function hasPositiveRadius(corners) {
+  return corners.topLeft > 0 || corners.topRight > 0 || corners.bottomLeft > 0 || corners.bottomRight > 0;
+}
+function resolveSizing(width, height) {
+  const style = {};
+  if (width !== void 0) {
+    if (width === "fill") {
+      style.flexGrow = 1;
+      style.width = "100%";
+    } else if (typeof width === "number") {
+      style.width = width;
+    }
+  }
+  if (height !== void 0) {
+    if (height === "fill") {
+      style.flexGrow = style.flexGrow === 1 ? 1 : 1;
+      style.height = "100%";
+    } else if (typeof height === "number") {
+      style.height = height;
+    }
+  }
+  return style;
+}
+var ALIGN_MAP = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  stretch: "stretch",
+  baseline: "baseline"
+};
+var JUSTIFY_MAP = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  between: "space-between",
+  around: "space-around",
+  evenly: "space-evenly"
+};
+function resolveAlignment(align) {
+  return ALIGN_MAP[align];
+}
+function resolveJustification(justify) {
+  return JUSTIFY_MAP[justify];
+}
+function resolveFlexDirection(direction, reverse) {
+  if (direction === "horizontal") {
+    return reverse ? "row-reverse" : "row";
+  }
+  return reverse ? "column-reverse" : "column";
+}
+
+// src/Frame/Frame.styles.ts
+function getFrameStyles(input) {
+  const {
+    tokens,
+    frameElevation,
+    layout = "flex",
+    direction = "vertical",
+    wrap = false,
+    reverse = false,
+    columns,
+    rows,
+    align,
+    justify,
+    padding,
+    gap,
+    width,
+    height,
+    minWidth,
+    maxWidth,
+    minHeight,
+    maxHeight,
+    radius,
+    bordered = false,
+    disabled = false
+  } = input;
+  const container = {};
+  container.backgroundColor = srgbToHex(tokens.background.srgb);
+  container.color = srgbToHex(tokens.textPrimary.srgb);
+  if (layout === "flex") {
+    container.display = "flex";
+    container.flexDirection = resolveFlexDirection(direction, reverse);
+    if (wrap) container.flexWrap = "wrap";
+  }
+  if (layout === "grid") {
+    container.display = "flex";
+    container.flexDirection = "row";
+    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;
+  }
+  const sizing = resolveSizing(width, height);
+  Object.assign(container, sizing);
+  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;
+  if (radius !== void 0) {
+    const corners = resolveRadiusCorners(radius, tokens);
+    container.borderTopLeftRadius = corners.topLeft;
+    container.borderTopRightRadius = corners.topRight;
+    container.borderBottomLeftRadius = corners.bottomLeft;
+    container.borderBottomRightRadius = corners.bottomRight;
+    if (hasPositiveRadius(corners)) {
+      container.overflow = "hidden";
+    }
+  }
+  if (bordered) {
+    container.borderWidth = 1;
+    container.borderColor = srgbToHex(tokens.border.srgb);
+  }
+  if (frameElevation === 2) {
+    container.shadowColor = "#000";
+    container.shadowOffset = { width: 0, height: 2 };
+    container.shadowOpacity = 0.12;
+    container.shadowRadius = 6;
+    container.elevation = 4;
+  }
+  if (disabled) {
+    container.opacity = 0.5;
+  }
+  const pressed = StyleSheet.create({
+    s: { backgroundColor: srgbToHex(tokens.backgroundSunken.srgb) }
+  }).s;
+  let gridWebStyle = null;
+  if (layout === "grid") {
+    gridWebStyle = {
+      display: "grid",
+      gridTemplateColumns: columns ? `repeat(${columns}, 1fr)` : void 0,
+      gridTemplateRows: rows ? `repeat(${rows}, 1fr)` : void 0
+    };
+  }
+  const insetBoxShadow = frameElevation === -2 ? "inset 0 2px 4px rgba(0,0,0,0.12)" : null;
+  return {
+    container: StyleSheet.create({ c: container }).c,
+    pressed,
+    gridWebStyle,
+    insetBoxShadow
+  };
+}
+
+// src/Frame/Frame.tsx
+function wrapTextChildren(children, textStyle) {
+  return React11.Children.map(children, (child) => {
+    if (typeof child === "string" || typeof child === "number") {
+      return /* @__PURE__ */ React11.createElement(Text, { style: textStyle }, child);
+    }
+    return child;
+  });
+}
+function toElevationLevel(frameElevation) {
+  if (frameElevation <= -1) return 0;
+  if (frameElevation === 0) return 1;
+  return 2;
+}
+function Frame({
+  children,
+  // Theme & elevation
+  theme,
+  elevation,
+  // Layout
+  layout,
+  direction,
+  wrap,
+  reverse,
+  columns,
+  rows,
+  // Alignment
+  align,
+  justify,
+  // Spacing
+  padding,
+  gap,
+  // Sizing
+  width,
+  height,
+  minWidth,
+  maxWidth,
+  minHeight,
+  maxHeight,
+  // Appearance
+  radius,
+  bordered,
+  // Interactivity
+  onPress,
+  href,
+  disabled = false,
+  // Style override
+  style
+}) {
+  const { config, mode, theme: providerTheme } = useNewtoneTheme();
+  const parentFrameCtx = useFrameContext();
+  const resolvedTheme = theme ?? parentFrameCtx?.theme ?? providerTheme;
+  const resolvedFrameElevation = elevation ?? 0;
+  const resolvedElevation = elevation !== void 0 ? toElevationLevel(elevation) : parentFrameCtx?.elevation ?? 1;
+  const tokens = useMemo(() => {
+    const themeMapping = config.themes[resolvedTheme];
+    return computeTokens(
+      config.colorSystem,
+      mode,
+      themeMapping,
+      resolvedElevation,
+      config.elevation.offsets,
+      config.spacing,
+      config.radius,
+      config.typography,
+      config.icons
+    );
+  }, [config, mode, resolvedTheme, resolvedElevation]);
+  const styles = useMemo(
+    () => getFrameStyles({
+      tokens,
+      frameElevation: resolvedFrameElevation,
+      layout,
+      direction,
+      wrap,
+      reverse,
+      columns,
+      rows,
+      align,
+      justify,
+      padding,
+      gap,
+      width,
+      height,
+      minWidth,
+      maxWidth,
+      minHeight,
+      maxHeight,
+      radius,
+      bordered,
+      disabled
+    }),
+    [
+      tokens,
+      resolvedFrameElevation,
+      layout,
+      direction,
+      wrap,
+      reverse,
+      columns,
+      rows,
+      align,
+      justify,
+      padding,
+      gap,
+      width,
+      height,
+      minWidth,
+      maxWidth,
+      minHeight,
+      maxHeight,
+      radius,
+      bordered,
+      disabled
+    ]
+  );
+  const contextValue = useMemo(
+    () => ({ theme: resolvedTheme, elevation: resolvedElevation }),
+    [resolvedTheme, resolvedElevation]
+  );
+  const webOverrides = [];
+  if (styles.gridWebStyle) {
+    webOverrides.push(styles.gridWebStyle);
+  }
+  if (styles.insetBoxShadow) {
+    webOverrides.push({ boxShadow: styles.insetBoxShadow });
+  }
+  const userStyles = Array.isArray(style) ? style : style ? [style] : [];
+  const isInteractive = onPress !== void 0 || href !== void 0;
+  const textStyle = useMemo(
+    () => ({
+      color: srgbToHex(tokens.textPrimary.srgb),
+      fontSize: tokens.typography.size.base,
+      fontFamily: tokens.typography.fonts.default,
+      lineHeight: tokens.typography.size.base * tokens.typography.lineHeight.normal
+    }),
+    [tokens]
+  );
+  const wrappedChildren = wrapTextChildren(children, textStyle);
+  return /* @__PURE__ */ React11.createElement(FrameContext.Provider, { value: contextValue }, isInteractive ? /* @__PURE__ */ React11.createElement(
+    Pressable,
+    {
+      onPress,
+      disabled,
+      ...href ? { href, accessibilityRole: "link" } : { accessibilityRole: "button" },
+      style: ({ pressed }) => [
+        styles.container,
+        pressed && !disabled && styles.pressed,
+        ...webOverrides,
+        ...userStyles
+      ]
+    },
+    wrappedChildren
+  ) : /* @__PURE__ */ React11.createElement(View, { style: [styles.container, ...webOverrides, ...userStyles] }, wrappedChildren));
 }
 function getTextInputStyles(tokens, disabled) {
   return StyleSheet.create({
     container: {
-      gap: 4
+      gap: tokens.spacing.xs
     },
     label: {
-      fontSize: 12,
-      fontWeight: "600",
+      fontFamily: tokens.typography.fonts.default,
+      fontSize: tokens.typography.size.sm,
+      fontWeight: tokens.typography.weight.semibold,
       color: srgbToHex(tokens.textSecondary.srgb)
     },
     input: {
+      fontFamily: tokens.typography.fonts.default,
       backgroundColor: srgbToHex(tokens.backgroundSunken.srgb),
       borderWidth: 1,
       borderColor: srgbToHex(tokens.border.srgb),
-      borderRadius: 6,
-      paddingVertical: 8,
-      paddingHorizontal: 12,
-      fontSize: 14,
+      borderRadius: tokens.radius.md,
+      paddingVertical: tokens.spacing.sm,
+      paddingHorizontal: tokens.spacing.md,
+      fontSize: tokens.typography.size.base,
       color: disabled ? srgbToHex(tokens.textSecondary.srgb) : srgbToHex(tokens.textPrimary.srgb),
       opacity: disabled ? 0.5 : 1
     }
@@ -376,11 +1010,11 @@ function TextInput({
   ...textInputProps
 }) {
   const tokens = useTokens(1);
-  const styles = React7.useMemo(
+  const styles = React11.useMemo(
     () => getTextInputStyles(tokens, disabled),
     [tokens, disabled]
   );
-  return /* @__PURE__ */ React7.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, label && /* @__PURE__ */ React7.createElement(Text, { style: styles.label }, label), /* @__PURE__ */ React7.createElement(
+  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(
     TextInput$1,
     {
       style: styles.input,
@@ -390,64 +1024,486 @@ function TextInput({
     }
   ));
 }
-function getSelectStyles(tokens, disabled) {
+function getPopoverStyles(tokens, triggerHeight, offset, maxHeight, width, isOpen) {
+  const widthStyle = width === "trigger" ? { left: 0, right: 0 } : typeof width === "number" ? { width, left: 0 } : { left: 0 };
+  return StyleSheet.create({
+    container: {
+      position: "relative",
+      zIndex: isOpen ? 999 : 1
+    },
+    content: {
+      position: "absolute",
+      top: triggerHeight + offset,
+      ...widthStyle,
+      backgroundColor: srgbToHex(tokens.backgroundElevated.srgb),
+      borderWidth: 1,
+      borderColor: srgbToHex(tokens.border.srgb),
+      borderRadius: tokens.radius.md,
+      maxHeight,
+      zIndex: 1e3,
+      overflow: "hidden",
+      ...{ boxShadow: "0 4px 12px rgba(0,0,0,0.15)" }
+    }
+  });
+}
+
+// src/Popover/Popover.tsx
+var openPopovers = /* @__PURE__ */ new Set();
+function Popover({
+  isOpen,
+  onClose,
+  trigger,
+  children,
+  width = "trigger",
+  maxHeight = 240,
+  offset = 4,
+  closeOnEscape = true,
+  style,
+  contentStyle
+}) {
+  const tokens = useTokens(1);
+  const containerRef = useRef(null);
+  const [triggerHeight, setTriggerHeight] = useState(0);
+  const onTriggerLayout = useCallback(
+    (e) => {
+      setTriggerHeight(e.nativeEvent.layout.height);
+    },
+    []
+  );
+  useEffect(() => {
+    if (!isOpen) return;
+    openPopovers.forEach((closeFn) => closeFn());
+    openPopovers.clear();
+    openPopovers.add(onClose);
+    return () => {
+      openPopovers.delete(onClose);
+    };
+  }, [isOpen, onClose]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleMouseDown = (e) => {
+      const node = containerRef.current;
+      if (node && !node.contains(e.target)) {
+        onClose();
+      }
+    };
+    document.addEventListener("mousedown", handleMouseDown, true);
+    return () => document.removeEventListener("mousedown", handleMouseDown, true);
+  }, [isOpen, onClose]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (closeOnEscape && e.key === "Escape") {
+        e.stopPropagation();
+        onClose();
+      }
+    },
+    [closeOnEscape, onClose]
+  );
+  const styles = useMemo(
+    () => getPopoverStyles(tokens, triggerHeight, offset, maxHeight, width, isOpen),
+    [tokens, triggerHeight, offset, maxHeight, width, isOpen]
+  );
+  const containerStyles = useMemo(
+    () => [styles.container, ...Array.isArray(style) ? style : style ? [style] : []],
+    [styles.container, style]
+  );
+  const mergedContentStyles = useMemo(
+    () => [styles.content, ...Array.isArray(contentStyle) ? contentStyle : contentStyle ? [contentStyle] : []],
+    [styles.content, contentStyle]
+  );
+  const webProps = { onKeyDown: handleKeyDown };
+  return /* @__PURE__ */ React11.createElement(
+    View,
+    {
+      ref: containerRef,
+      style: containerStyles,
+      ...webProps
+    },
+    /* @__PURE__ */ React11.createElement(View, { onLayout: onTriggerLayout }, trigger),
+    isOpen && /* @__PURE__ */ React11.createElement(View, { style: mergedContentStyles }, children)
+  );
+}
+function usePopover(options) {
+  const [isOpen, setIsOpen] = useState(options?.initialOpen ?? false);
+  const open = useCallback(() => {
+    setIsOpen(true);
+    options?.onOpenChange?.(true);
+  }, [options]);
+  const close = useCallback(() => {
+    setIsOpen(false);
+    options?.onOpenChange?.(false);
+  }, [options]);
+  const toggle = useCallback(() => {
+    setIsOpen((prev) => {
+      const next = !prev;
+      options?.onOpenChange?.(next);
+      return next;
+    });
+  }, [options]);
+  return { isOpen, open, close, toggle };
+}
+
+// src/Select/Select.types.ts
+function isOptionGroup(item) {
+  return "options" in item;
+}
+function getSelectStyles(tokens, disabled, size, isOpen) {
+  const isSm = size === "sm";
+  const fontSize = isSm ? tokens.typography.size.sm : tokens.typography.size.base;
+  const iconSize = fontSize + 2;
+  const iconSpace = iconSize + tokens.spacing.sm;
+  const paddingVertical = isSm ? tokens.spacing.xs : tokens.spacing.sm;
+  const paddingHorizontal = isSm ? tokens.spacing.sm : tokens.spacing.md;
   return StyleSheet.create({
     container: {
-      gap: 4
+      gap: tokens.spacing.xs,
+      zIndex: isOpen ? 999 : 0
     },
     label: {
-      fontSize: 12,
-      fontWeight: "600",
+      fontFamily: tokens.typography.fonts.default,
+      fontSize: tokens.typography.size.sm,
+      fontWeight: tokens.typography.weight.semibold,
       color: srgbToHex(tokens.textSecondary.srgb)
     },
-    select: {
+    trigger: {
+      flexDirection: "row",
+      alignItems: "center",
       backgroundColor: srgbToHex(tokens.backgroundSunken.srgb),
       borderWidth: 1,
       borderColor: srgbToHex(tokens.border.srgb),
-      borderRadius: 6,
-      paddingVertical: 8,
-      paddingHorizontal: 12,
-      fontSize: 14,
-      color: disabled ? srgbToHex(tokens.textSecondary.srgb) : srgbToHex(tokens.textPrimary.srgb),
+      borderRadius: tokens.radius.md,
+      paddingVertical,
+      paddingLeft: paddingHorizontal,
+      paddingRight: iconSpace + (isSm ? tokens.spacing.xs : tokens.spacing.sm),
       opacity: disabled ? 0.5 : 1
+    },
+    triggerText: {
+      flex: 1,
+      fontFamily: tokens.typography.fonts.default,
+      fontSize,
+      color: disabled ? srgbToHex(tokens.textSecondary.srgb) : srgbToHex(tokens.textPrimary.srgb)
+    },
+    iconWrapper: {
+      position: "absolute",
+      right: isSm ? tokens.spacing.xs : tokens.spacing.sm,
+      top: 0,
+      bottom: 0,
+      justifyContent: "center"
+    },
+    groupLabel: {
+      fontFamily: tokens.typography.fonts.default,
+      fontSize: tokens.typography.size.xs,
+      fontWeight: tokens.typography.weight.semibold,
+      color: srgbToHex(tokens.textSecondary.srgb),
+      textTransform: "uppercase",
+      letterSpacing: 0.5,
+      paddingVertical: tokens.spacing.xs,
+      paddingHorizontal: isSm ? tokens.spacing.sm : tokens.spacing.md,
+      paddingTop: tokens.spacing.sm
     }
   });
 }
-
-// src/Select/Select.tsx
+function findNextEnabled(options, startIndex, direction) {
+  const len = options.length;
+  if (len === 0) return -1;
+  for (let i = 1; i <= len; i++) {
+    const idx = (startIndex + i * direction + len) % len;
+    if (!options[idx].disabled) return idx;
+  }
+  return -1;
+}
+function useSelect({
+  flatOptions,
+  value,
+  isOpen,
+  onSelect,
+  onClose,
+  onOpen
+}) {
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const typeAheadRef = useRef("");
+  const typeAheadTimerRef = useRef();
+  useEffect(() => {
+    if (isOpen) {
+      const selectedIdx = flatOptions.findIndex((o) => o.value === value);
+      if (selectedIdx >= 0 && !flatOptions[selectedIdx].disabled) {
+        setFocusedIndex(selectedIdx);
+      } else {
+        const firstEnabled = flatOptions.findIndex((o) => !o.disabled);
+        setFocusedIndex(firstEnabled >= 0 ? firstEnabled : -1);
+      }
+    } else {
+      setFocusedIndex(-1);
+    }
+  }, [isOpen, flatOptions, value]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      const key = e.key;
+      if (!isOpen) {
+        if (key === "ArrowDown" || key === "ArrowUp" || key === "Enter" || key === " ") {
+          e.preventDefault();
+          onOpen();
+        }
+        return;
+      }
+      switch (key) {
+        case "ArrowDown": {
+          e.preventDefault();
+          const next = findNextEnabled(flatOptions, focusedIndex, 1);
+          if (next >= 0) setFocusedIndex(next);
+          break;
+        }
+        case "ArrowUp": {
+          e.preventDefault();
+          const prev = findNextEnabled(flatOptions, focusedIndex, -1);
+          if (prev >= 0) setFocusedIndex(prev);
+          break;
+        }
+        case "Enter":
+        case " ": {
+          e.preventDefault();
+          if (focusedIndex >= 0 && !flatOptions[focusedIndex].disabled) {
+            onSelect(flatOptions[focusedIndex].value);
+          }
+          break;
+        }
+        case "Escape": {
+          e.preventDefault();
+          onClose();
+          break;
+        }
+        case "Home": {
+          e.preventDefault();
+          const first = flatOptions.findIndex((o) => !o.disabled);
+          if (first >= 0) setFocusedIndex(first);
+          break;
+        }
+        case "End": {
+          e.preventDefault();
+          const lastEnabled = [...flatOptions].reverse().findIndex((o) => !o.disabled);
+          if (lastEnabled >= 0) setFocusedIndex(flatOptions.length - 1 - lastEnabled);
+          break;
+        }
+        default: {
+          if (key.length === 1 && !e.ctrlKey && !e.metaKey) {
+            clearTimeout(typeAheadTimerRef.current);
+            typeAheadRef.current += key.toLowerCase();
+            const match = flatOptions.findIndex(
+              (o) => !o.disabled && o.label.toLowerCase().startsWith(typeAheadRef.current)
+            );
+            if (match >= 0) setFocusedIndex(match);
+            typeAheadTimerRef.current = setTimeout(() => {
+              typeAheadRef.current = "";
+            }, 500);
+          }
+          break;
+        }
+      }
+    },
+    [isOpen, focusedIndex, flatOptions, onSelect, onClose, onOpen]
+  );
+  return { focusedIndex, handleKeyDown };
+}
+function SelectOptionRow({
+  option,
+  isSelected,
+  isFocused,
+  onSelect,
+  renderOption,
+  size
+}) {
+  const tokens = useTokens(1);
+  const paddingVertical = size === "sm" ? tokens.spacing.xs : tokens.spacing.sm;
+  const paddingHorizontal = size === "sm" ? tokens.spacing.sm : tokens.spacing.md;
+  const fontSize = size === "sm" ? tokens.typography.size.sm : tokens.typography.size.base;
+  if (renderOption) {
+    return /* @__PURE__ */ React11.createElement(
+      Pressable,
+      {
+        onPress: option.disabled ? void 0 : onSelect,
+        disabled: option.disabled,
+        role: "option",
+        "aria-selected": isSelected
+      },
+      renderOption(option, { isSelected, isFocused })
+    );
+  }
+  return /* @__PURE__ */ React11.createElement(
+    Pressable,
+    {
+      onPress: option.disabled ? void 0 : onSelect,
+      disabled: option.disabled,
+      role: "option",
+      "aria-selected": isSelected,
+      style: ({ pressed }) => [
+        {
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "space-between",
+          paddingVertical,
+          paddingHorizontal
+        },
+        isSelected && {
+          backgroundColor: srgbToHex(tokens.backgroundSunken.srgb)
+        },
+        isFocused && !isSelected && {
+          backgroundColor: `${srgbToHex(tokens.border.srgb)}20`
+        },
+        option.disabled && {
+          opacity: 0.5
+        },
+        pressed && {
+          opacity: 0.7
+        }
+      ]
+    },
+    /* @__PURE__ */ React11.createElement(
+      Text,
+      {
+        style: [
+          {
+            flex: 1,
+            fontFamily: tokens.typography.fonts.default,
+            fontSize,
+            color: srgbToHex(tokens.textPrimary.srgb)
+          },
+          isSelected && {
+            fontWeight: tokens.typography.weight.semibold,
+            color: srgbToHex(tokens.interactive.srgb)
+          },
+          option.disabled && {
+            color: srgbToHex(tokens.textSecondary.srgb)
+          }
+        ],
+        numberOfLines: 1
+      },
+      option.label
+    ),
+    isSelected && /* @__PURE__ */ React11.createElement(View, { style: { marginLeft: tokens.spacing.sm } }, /* @__PURE__ */ React11.createElement(
+      Icon,
+      {
+        name: "check",
+        size: fontSize,
+        color: srgbToHex(tokens.interactive.srgb)
+      }
+    ))
+  );
+}
+function flattenOptions(items) {
+  const result = [];
+  for (const item of items) {
+    if ("options" in item) {
+      result.push(...item.options);
+    } else {
+      result.push(item);
+    }
+  }
+  return result;
+}
 function Select({
   options,
   value,
   onValueChange,
   label,
+  placeholder,
   disabled = false,
+  renderOption,
+  renderValue,
+  size = "md",
   style
 }) {
   const tokens = useTokens(1);
-  const styles = React7.useMemo(
-    () => getSelectStyles(tokens, disabled),
-    [tokens, disabled]
-  );
-  const handleChange = React7.useCallback(
-    (e) => {
-      onValueChange(e.target.value);
+  const { isOpen, open, close, toggle } = usePopover();
+  const flatOptions = useMemo(() => flattenOptions(options), [options]);
+  const { focusedIndex, handleKeyDown } = useSelect({
+    flatOptions,
+    value,
+    isOpen,
+    onSelect: (v) => {
+      onValueChange(v);
+      close();
     },
-    [onValueChange]
+    onClose: close,
+    onOpen: open
+  });
+  const styles = useMemo(
+    () => getSelectStyles(tokens, disabled, size, isOpen),
+    [tokens, disabled, size, isOpen]
   );
-  const selectStyle = StyleSheet.flatten(styles.select);
-  return /* @__PURE__ */ React7.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, label && /* @__PURE__ */ React7.createElement(Text, { style: styles.label }, label), /* @__PURE__ */ React7.createElement(
-    "select",
+  const selectedOption = flatOptions.find((o) => o.value === value);
+  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(
+    Pressable,
     {
-      value,
-      onChange: handleChange,
+      onPress: disabled ? void 0 : toggle,
       disabled,
-      style: {
-        ...selectStyle,
-        cursor: disabled ? "default" : "pointer",
-        appearance: "auto"
+      role: "combobox",
+      "aria-expanded": isOpen,
+      "aria-haspopup": "listbox",
+      ...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(
+      Icon,
+      {
+        name: isOpen ? "expand_less" : "expand_more",
+        size: size === "sm" ? tokens.typography.size.sm + 2 : tokens.typography.size.base + 2,
+        color: iconColor
       }
+    ))
+  );
+  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(
+    Popover,
+    {
+      isOpen: isOpen && !disabled,
+      onClose: close,
+      trigger
     },
-    options.map((option) => /* @__PURE__ */ React7.createElement("option", { key: option.value, value: option.value }, option.label))
+    /* @__PURE__ */ React11.createElement(
+      ScrollView,
+      {
+        bounces: false,
+        keyboardShouldPersistTaps: "handled",
+        role: "listbox"
+      },
+      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(
+            SelectOptionRow,
+            {
+              key: opt.value,
+              option: opt,
+              isSelected: opt.value === value,
+              isFocused: flatOptions[focusedIndex]?.value === opt.value,
+              onSelect: () => {
+                onValueChange(opt.value);
+                close();
+              },
+              renderOption,
+              size
+            }
+          )));
+        }
+        return /* @__PURE__ */ React11.createElement(
+          SelectOptionRow,
+          {
+            key: item.value,
+            option: item,
+            isSelected: item.value === value,
+            isFocused: flatOptions[focusedIndex]?.value === item.value,
+            onSelect: () => {
+              onValueChange(item.value);
+              close();
+            },
+            renderOption,
+            size
+          }
+        );
+      })
+    )
   ));
 }
 var TRACK_WIDTH = 40;
@@ -459,12 +1515,13 @@ function getToggleStyles(tokens, value, disabled) {
     container: {
       flexDirection: "row",
       alignItems: "center",
-      gap: 8,
+      gap: tokens.spacing.sm,
       opacity: disabled ? 0.5 : 1
     },
     label: {
-      fontSize: 12,
-      fontWeight: "600",
+      fontFamily: tokens.typography.fonts.default,
+      fontSize: tokens.typography.size.sm,
+      fontWeight: tokens.typography.weight.semibold,
       color: srgbToHex(tokens.textSecondary.srgb)
     },
     track: {
@@ -494,16 +1551,16 @@ function Toggle({
   style
 }) {
   const tokens = useTokens(1);
-  const styles = React7.useMemo(
+  const styles = React11.useMemo(
     () => getToggleStyles(tokens, value, disabled),
     [tokens, value, disabled]
   );
-  const handlePress = React7.useCallback(() => {
+  const handlePress = React11.useCallback(() => {
     if (!disabled) {
       onValueChange(!value);
     }
   }, [disabled, value, onValueChange]);
-  return /* @__PURE__ */ React7.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, label && /* @__PURE__ */ React7.createElement(Text, { style: styles.label }, label), /* @__PURE__ */ React7.createElement(
+  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(
     Pressable,
     {
       onPress: handlePress,
@@ -511,13 +1568,16 @@ function Toggle({
       accessibilityRole: "switch",
       accessibilityState: { checked: value, disabled }
     },
-    /* @__PURE__ */ React7.createElement(View, { style: styles.track }, /* @__PURE__ */ React7.createElement(View, { style: styles.thumb }))
+    /* @__PURE__ */ React11.createElement(View, { style: styles.track }, /* @__PURE__ */ React11.createElement(View, { style: styles.thumb }))
   ));
 }
-function getSliderStyles(tokens) {
+var TRACK_HEIGHT2 = 6;
+var THUMB_SIZE2 = 16;
+function getSliderStyles(tokens, disabled) {
   return StyleSheet.create({
     container: {
-      gap: 4
+      gap: tokens.spacing.xs,
+      opacity: disabled ? 0.5 : 1
     },
     labelRow: {
       flexDirection: "row",
@@ -525,28 +1585,60 @@ function getSliderStyles(tokens) {
       alignItems: "center"
     },
     label: {
-      fontSize: 12,
-      fontWeight: "600",
+      fontFamily: tokens.typography.fonts.default,
+      fontSize: tokens.typography.size.sm,
+      fontWeight: tokens.typography.weight.semibold,
       color: srgbToHex(tokens.textSecondary.srgb)
     },
     value: {
-      fontSize: 12,
-      fontWeight: "500",
+      fontFamily: tokens.typography.fonts.default,
+      fontSize: tokens.typography.size.sm,
+      fontWeight: tokens.typography.weight.medium,
       color: srgbToHex(tokens.textPrimary.srgb)
+    },
+    valueInput: {
+      width: 48,
+      paddingVertical: 0,
+      paddingHorizontal: 4,
+      borderWidth: 1,
+      borderColor: srgbToHex(tokens.border.srgb),
+      borderRadius: 4,
+      backgroundColor: "transparent",
+      color: srgbToHex(tokens.textPrimary.srgb),
+      fontFamily: tokens.typography.fonts.default,
+      fontSize: tokens.typography.size.sm,
+      fontWeight: tokens.typography.weight.medium,
+      textAlign: "right"
+    },
+    trackContainer: {
+      height: TRACK_HEIGHT2 + THUMB_SIZE2,
+      justifyContent: "center",
+      position: "relative"
+    },
+    trackRail: {
+      position: "absolute",
+      left: 0,
+      right: 0,
+      height: TRACK_HEIGHT2,
+      borderRadius: TRACK_HEIGHT2 / 2,
+      backgroundColor: srgbToHex(tokens.border.srgb)
+    },
+    trackFill: {
+      position: "absolute",
+      left: 0,
+      height: TRACK_HEIGHT2,
+      borderRadius: TRACK_HEIGHT2 / 2,
+      backgroundColor: srgbToHex(tokens.interactive.srgb)
+    },
+    thumb: {
+      position: "absolute",
+      width: THUMB_SIZE2,
+      height: THUMB_SIZE2,
+      borderRadius: THUMB_SIZE2 / 2,
+      backgroundColor: srgbToHex(tokens.interactive.srgb)
     }
   });
 }
-function getSliderInputStyle(tokens, disabled) {
-  return {
-    width: "100%",
-    height: 6,
-    borderRadius: 3,
-    appearance: "auto",
-    cursor: disabled ? "default" : "pointer",
-    opacity: disabled ? 0.5 : 1,
-    accentColor: srgbToHex(tokens.interactive.srgb)
-  };
-}
 
 // src/Slider/Slider.tsx
 function Slider({
@@ -557,39 +1649,108 @@ function Slider({
   step = 1,
   label,
   showValue = false,
+  editableValue = false,
   disabled = false,
   style
 }) {
   const tokens = useTokens(1);
-  const styles = React7.useMemo(
-    () => getSliderStyles(tokens),
-    [tokens]
-  );
-  const inputStyle = React7.useMemo(
-    () => getSliderInputStyle(tokens, disabled),
+  const styles = React11.useMemo(
+    () => getSliderStyles(tokens, disabled),
     [tokens, disabled]
   );
-  const handleChange = React7.useCallback(
-    (e) => {
-      onValueChange(Number(e.target.value));
+  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(() => {
+    onValueChangeRef.current = onValueChange;
+  }, [onValueChange]);
+  React11.useEffect(() => {
+    minRef.current = min;
+  }, [min]);
+  React11.useEffect(() => {
+    maxRef.current = max;
+  }, [max]);
+  React11.useEffect(() => {
+    stepRef.current = step;
+  }, [step]);
+  React11.useEffect(() => {
+    disabledRef.current = disabled;
+  }, [disabled]);
+  const computeValue = React11.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(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => !disabledRef.current,
+      onMoveShouldSetPanResponder: () => !disabledRef.current,
+      onPanResponderGrant: (evt) => {
+        onValueChangeRef.current(computeValue(evt.nativeEvent.pageX));
+      },
+      onPanResponderMove: (_evt, gestureState) => {
+        onValueChangeRef.current(computeValue(gestureState.moveX));
+      }
+    })
+  ).current;
+  const ratio = max > min ? (value - min) / (max - min) : 0;
+  const usableWidth = Math.max(0, trackWidth.current - THUMB_SIZE2);
+  const thumbLeft = ratio * usableWidth;
+  const fillWidth = thumbLeft + THUMB_SIZE2 / 2;
+  const handleValueTextSubmit = React11.useCallback(
+    (text) => {
+      const raw = Number(text);
+      if (!Number.isNaN(raw)) {
+        onValueChange(Math.min(max, Math.max(min, raw)));
+      }
     },
-    [onValueChange]
+    [onValueChange, min, max]
   );
-  return /* @__PURE__ */ React7.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, (label || showValue) && /* @__PURE__ */ React7.createElement(View, { style: styles.labelRow }, label && /* @__PURE__ */ React7.createElement(Text, { style: styles.label }, label), showValue && /* @__PURE__ */ React7.createElement(Text, { style: styles.value }, value)), /* @__PURE__ */ React7.createElement(
-    "input",
+  const [editText, setEditText] = React11.useState(String(value));
+  React11.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(
+    TextInput$1,
     {
-      type: "range",
-      min,
-      max,
-      step,
-      value,
-      onChange: handleChange,
-      disabled,
-      style: inputStyle
+      style: styles.valueInput,
+      value: editText,
+      keyboardType: "numeric",
+      onChangeText: setEditText,
+      onSubmitEditing: (e) => handleValueTextSubmit(e.nativeEvent.text),
+      onBlur: () => handleValueTextSubmit(editText),
+      selectTextOnFocus: true,
+      editable: !disabled
     }
+  ) : showValue && /* @__PURE__ */ React11.createElement(Text, { style: styles.value }, value)), /* @__PURE__ */ React11.createElement(
+    View,
+    {
+      ref: trackRef,
+      style: styles.trackContainer,
+      onLayout: (e) => {
+        trackWidth.current = e.nativeEvent.layout.width;
+        trackRef.current?.measure((_x, _y, _w, _h, pageX) => {
+          if (pageX != null) trackPageX.current = pageX;
+        });
+      },
+      ...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 }] })
   ));
 }
-var HUE_GRADIENT = "linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)";
+var TRACK_HEIGHT3 = 22;
+var THUMB_SIZE3 = 18;
+var SEGMENT_COUNT = 48;
 function hueToHex(hue) {
   const h = (hue % 360 + 360) % 360;
   const x = 1 - Math.abs(h / 60 % 2 - 1);
@@ -622,20 +1783,17 @@ function hueToHex(hue) {
   const toHex = (v) => Math.round(v * 255).toString(16).padStart(2, "0");
   return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
 }
-function buildHueGradient(min, max) {
-  if (min === 0 && max === 359) return HUE_GRADIENT;
-  const steps = 7;
-  const stops = [];
-  for (let i = 0; i <= steps; i++) {
-    const hue = min + (max - min) * (i / steps);
-    stops.push(hueToHex(hue));
-  }
-  return `linear-gradient(to right, ${stops.join(", ")})`;
+function buildHueSegments(min, max) {
+  return Array.from({ length: SEGMENT_COUNT }, (_, i) => {
+    const hue = min + (max - min) * (i / (SEGMENT_COUNT - 1));
+    return hueToHex(hue);
+  });
 }
-function getHueSliderStyles(tokens) {
+function getHueSliderStyles(tokens, disabled) {
   return StyleSheet.create({
     container: {
-      gap: 4
+      gap: tokens.spacing.xs,
+      opacity: disabled ? 0.5 : 1
     },
     labelRow: {
       flexDirection: "row",
@@ -643,33 +1801,59 @@ function getHueSliderStyles(tokens) {
       alignItems: "center"
     },
     label: {
-      fontSize: 12,
-      fontWeight: "600",
+      fontFamily: tokens.typography.fonts.default,
+      fontSize: tokens.typography.size.sm,
+      fontWeight: tokens.typography.weight.semibold,
       color: srgbToHex(tokens.textSecondary.srgb)
     },
     value: {
-      fontSize: 12,
-      fontWeight: "500",
+      fontFamily: tokens.typography.fonts.default,
+      fontSize: tokens.typography.size.sm,
+      fontWeight: tokens.typography.weight.medium,
       color: srgbToHex(tokens.textPrimary.srgb)
     },
-    sliderTrack: {
-      height: 22,
-      borderRadius: 11,
+    valueInput: {
+      width: 48,
+      paddingVertical: 0,
+      paddingHorizontal: 4,
+      borderWidth: 1,
+      borderColor: srgbToHex(tokens.border.srgb),
+      borderRadius: 4,
+      backgroundColor: "transparent",
+      color: srgbToHex(tokens.textPrimary.srgb),
+      fontFamily: tokens.typography.fonts.default,
+      fontSize: tokens.typography.size.sm,
+      fontWeight: tokens.typography.weight.medium,
+      textAlign: "right"
+    },
+    trackContainer: {
+      height: TRACK_HEIGHT3 + THUMB_SIZE3,
+      justifyContent: "center",
+      position: "relative"
+    },
+    gradientTrack: {
+      position: "absolute",
+      left: 0,
+      right: 0,
+      height: TRACK_HEIGHT3,
+      borderRadius: TRACK_HEIGHT3 / 2,
+      flexDirection: "row",
       overflow: "hidden"
+    },
+    segment: {
+      flex: 1
+    },
+    thumb: {
+      position: "absolute",
+      width: THUMB_SIZE3,
+      height: THUMB_SIZE3,
+      borderRadius: THUMB_SIZE3 / 2,
+      backgroundColor: "#ffffff",
+      borderWidth: 2,
+      borderColor: srgbToHex(tokens.border.srgb)
     }
   });
 }
-function getHueSliderInputStyle(disabled, min = 0, max = 359) {
-  return {
-    width: "100%",
-    height: 22,
-    borderRadius: 11,
-    cursor: disabled ? "default" : "pointer",
-    opacity: disabled ? 0.5 : 1,
-    background: buildHueGradient(min, max),
-    appearance: "auto"
-  };
-}
 
 // src/HueSlider/HueSlider.tsx
 function HueSlider({
@@ -679,41 +1863,936 @@ function HueSlider({
   max = 359,
   label,
   showValue = false,
+  editableValue = false,
   disabled = false,
   style
 }) {
   const tokens = useTokens(1);
-  const styles = React7.useMemo(
-    () => getHueSliderStyles(tokens),
-    [tokens]
+  const styles = React11.useMemo(
+    () => getHueSliderStyles(tokens, disabled),
+    [tokens, disabled]
   );
-  const inputStyle = React7.useMemo(
-    () => getHueSliderInputStyle(disabled, min, max),
-    [disabled, min, max]
+  const segments = React11.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(() => {
+    onValueChangeRef.current = onValueChange;
+  }, [onValueChange]);
+  React11.useEffect(() => {
+    minRef.current = min;
+  }, [min]);
+  React11.useEffect(() => {
+    maxRef.current = max;
+  }, [max]);
+  React11.useEffect(() => {
+    disabledRef.current = disabled;
+  }, [disabled]);
+  const computeHue = React11.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(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => !disabledRef.current,
+      onMoveShouldSetPanResponder: () => !disabledRef.current,
+      onPanResponderGrant: (evt) => {
+        onValueChangeRef.current(computeHue(evt.nativeEvent.pageX));
+      },
+      onPanResponderMove: (_evt, gestureState) => {
+        onValueChangeRef.current(computeHue(gestureState.moveX));
+      }
+    })
+  ).current;
   const sliderValue = max > 359 && value < min ? value + 360 : value;
-  const handleChange = React7.useCallback(
-    (e) => {
-      const raw = Number(e.target.value);
-      onValueChange((raw % 360 + 360) % 360);
+  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(
+    (text) => {
+      const raw = Number(text);
+      if (!Number.isNaN(raw)) {
+        onValueChange((raw % 360 + 360) % 360);
+      }
     },
     [onValueChange]
   );
-  return /* @__PURE__ */ React7.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, (label || showValue) && /* @__PURE__ */ React7.createElement(View, { style: styles.labelRow }, label && /* @__PURE__ */ React7.createElement(Text, { style: styles.label }, label), showValue && /* @__PURE__ */ React7.createElement(Text, { style: styles.value }, value, "\xB0")), /* @__PURE__ */ React7.createElement(
-    "input",
+  const [editText, setEditText] = React11.useState(String(value));
+  React11.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(
+    TextInput$1,
     {
-      type: "range",
-      min,
-      max,
-      step: 1,
-      value: sliderValue,
-      onChange: handleChange,
-      disabled,
-      style: inputStyle
+      style: styles.valueInput,
+      value: editText,
+      keyboardType: "numeric",
+      onChangeText: setEditText,
+      onSubmitEditing: (e) => handleValueTextSubmit(e.nativeEvent.text),
+      onBlur: () => handleValueTextSubmit(editText),
+      selectTextOnFocus: true,
+      editable: !disabled
     }
+  ) : showValue && /* @__PURE__ */ React11.createElement(Text, { style: styles.value }, value, "\xB0")), /* @__PURE__ */ React11.createElement(
+    View,
+    {
+      ref: trackRef,
+      style: styles.trackContainer,
+      onLayout: (e) => {
+        trackWidth.current = e.nativeEvent.layout.width;
+        trackRef.current?.measure((_x, _y, _w, _h, pageX) => {
+          if (pageX != null) trackPageX.current = pageX;
+        });
+      },
+      ...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 }] })
   ));
 }
+var TRACK_HEIGHT4 = 22;
+var THUMB_SIZE4 = 18;
+function getColorScaleSliderStyles(tokens, disabled) {
+  return StyleSheet.create({
+    container: {
+      gap: tokens.spacing.xs,
+      opacity: disabled ? 0.5 : 1
+    },
+    labelRow: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center"
+    },
+    label: {
+      fontFamily: tokens.typography.fonts.default,
+      fontSize: tokens.typography.size.sm,
+      fontWeight: tokens.typography.weight.semibold,
+      color: srgbToHex(tokens.textSecondary.srgb)
+    },
+    trackContainer: {
+      height: TRACK_HEIGHT4 + THUMB_SIZE4,
+      justifyContent: "center",
+      position: "relative"
+    },
+    gradientTrack: {
+      position: "absolute",
+      left: 0,
+      right: 0,
+      height: TRACK_HEIGHT4,
+      borderRadius: TRACK_HEIGHT4 / 2,
+      flexDirection: "row",
+      overflow: "hidden"
+    },
+    segment: {
+      flex: 1
+    },
+    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 getAppShellStyles(tokens) {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      flexDirection: "row",
+      overflow: "hidden",
+      backgroundColor: srgbToHex(tokens.background.srgb)
+    },
+    main: {
+      flex: 1,
+      flexDirection: "column",
+      minWidth: 0,
+      overflow: "hidden"
+    }
+  });
+}
+
+// src/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));
+}
+function getSidebarStyles({ tokens, width, bordered }) {
+  const borderColor = srgbToHex(tokens.border.srgb);
+  return StyleSheet.create({
+    container: {
+      width,
+      flexShrink: 0,
+      flexDirection: "column",
+      backgroundColor: srgbToHex(tokens.background.srgb),
+      borderRightWidth: bordered ? 1 : 0,
+      borderRightColor: borderColor
+    },
+    header: {
+      flexShrink: 0,
+      borderBottomWidth: 1,
+      borderBottomColor: borderColor
+    },
+    body: {
+      flex: 1
+    },
+    footer: {
+      flexShrink: 0,
+      borderTopWidth: 1,
+      borderTopColor: borderColor
+    }
+  });
+}
+
+// src/Sidebar/Sidebar.tsx
+function Sidebar({
+  children,
+  header,
+  footer,
+  width = 260,
+  bordered = true
+}) {
+  const tokens = useTokens();
+  const styles = React11.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));
+}
+function getNavbarStyles({ tokens, height, bordered }) {
+  const borderColor = srgbToHex(tokens.border.srgb);
+  return StyleSheet.create({
+    container: {
+      flexDirection: "row",
+      alignItems: "center",
+      height,
+      flexShrink: 0,
+      paddingHorizontal: 24,
+      backgroundColor: srgbToHex(tokens.background.srgb),
+      borderBottomWidth: bordered ? 1 : 0,
+      borderBottomColor: borderColor
+    },
+    left: {
+      flex: 1,
+      flexDirection: "row",
+      alignItems: "center"
+    },
+    right: {
+      flex: 1,
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "flex-end"
+    }
+  });
+}
+
+// src/Navbar/Navbar.tsx
+function Navbar({
+  children,
+  left,
+  right,
+  height = 56,
+  bordered = true
+}) {
+  const tokens = useTokens();
+  const styles = React11.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)));
+}
+
+// src/registry/registry.ts
+var CATEGORIES = [
+  { 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" }
+];
+var COMPONENTS = [
+  {
+    id: "button",
+    name: "Button",
+    importName: "Button",
+    categoryId: "actions",
+    description: "Interactive button with multiple variants, sizes, and optional icon",
+    hasChildren: true,
+    variants: [
+      { id: "primary-md", label: "Primary", props: { variant: "primary", size: "md" } },
+      { id: "secondary-md", label: "Secondary", props: { variant: "secondary", size: "md" } },
+      { id: "ghost-md", label: "Ghost", props: { variant: "ghost", size: "md" } },
+      { id: "outline-md", label: "Outline", props: { variant: "outline", 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: "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: "ghost", size: "md", icon: "settings" } }
+    ],
+    editableProps: [
+      {
+        name: "variant",
+        label: "Variant",
+        control: "select",
+        options: [
+          { label: "Primary", value: "primary" },
+          { label: "Secondary", value: "secondary" },
+          { label: "Ghost", value: "ghost" },
+          { label: "Outline", value: "outline" }
+        ],
+        defaultValue: "primary"
+      },
+      {
+        name: "size",
+        label: "Size",
+        control: "select",
+        options: [
+          { label: "Small", value: "sm" },
+          { label: "Medium", value: "md" },
+          { label: "Large", value: "lg" }
+        ],
+        defaultValue: "md"
+      },
+      {
+        name: "icon",
+        label: "Icon",
+        control: "text",
+        defaultValue: ""
+      },
+      {
+        name: "iconPosition",
+        label: "Icon Position",
+        control: "select",
+        options: [
+          { label: "Left", value: "left" },
+          { label: "Right", value: "right" }
+        ],
+        defaultValue: "left"
+      },
+      {
+        name: "disabled",
+        label: "Disabled",
+        control: "toggle",
+        defaultValue: false
+      }
+    ]
+  },
+  {
+    id: "text-input",
+    name: "TextInput",
+    importName: "TextInput",
+    categoryId: "form-controls",
+    description: "Text input field with label support",
+    hasChildren: false,
+    variants: [
+      { id: "default", label: "Default", props: { label: "Label", value: "Sample text" } },
+      { id: "empty", label: "Empty", props: { label: "Email", value: "" } },
+      { id: "disabled", label: "Disabled", props: { label: "Disabled", value: "Read only", disabled: true } }
+    ],
+    editableProps: [
+      {
+        name: "label",
+        label: "Label",
+        control: "text",
+        defaultValue: "Label"
+      },
+      {
+        name: "disabled",
+        label: "Disabled",
+        control: "toggle",
+        defaultValue: false
+      }
+    ]
+  },
+  {
+    id: "select",
+    name: "Select",
+    importName: "Select",
+    categoryId: "form-controls",
+    description: "Dropdown selector with options",
+    hasChildren: false,
+    variants: [
+      {
+        id: "default",
+        label: "Default",
+        props: {
+          label: "Choose an option",
+          value: "option-1",
+          options: [
+            { label: "Option 1", value: "option-1" },
+            { label: "Option 2", value: "option-2" },
+            { label: "Option 3", value: "option-3" }
+          ]
+        }
+      },
+      {
+        id: "disabled",
+        label: "Disabled",
+        props: {
+          label: "Disabled select",
+          value: "option-1",
+          disabled: true,
+          options: [{ label: "Option 1", value: "option-1" }]
+        }
+      }
+    ],
+    editableProps: [
+      {
+        name: "label",
+        label: "Label",
+        control: "text",
+        defaultValue: "Choose an option"
+      },
+      {
+        name: "disabled",
+        label: "Disabled",
+        control: "toggle",
+        defaultValue: false
+      }
+    ]
+  },
+  {
+    id: "toggle",
+    name: "Toggle",
+    importName: "Toggle",
+    categoryId: "form-controls",
+    description: "Binary switch component",
+    hasChildren: false,
+    variants: [
+      { id: "on", label: "On", props: { label: "Enabled", value: true } },
+      { id: "off", label: "Off", props: { label: "Disabled", value: false } },
+      { id: "disabled", label: "Disabled", props: { label: "Locked", value: true, disabled: true } }
+    ],
+    editableProps: [
+      {
+        name: "label",
+        label: "Label",
+        control: "text",
+        defaultValue: "Toggle"
+      },
+      {
+        name: "disabled",
+        label: "Disabled",
+        control: "toggle",
+        defaultValue: false
+      }
+    ]
+  },
+  {
+    id: "slider",
+    name: "Slider",
+    importName: "Slider",
+    categoryId: "range-inputs",
+    description: "Numeric range slider",
+    hasChildren: false,
+    variants: [
+      { id: "default", label: "Default", props: { label: "Volume", value: 50, min: 0, max: 100 } },
+      { id: "with-step", label: "With Step", props: { label: "Steps", value: 3, min: 0, max: 10, step: 1, showValue: true } }
+    ],
+    editableProps: [
+      {
+        name: "label",
+        label: "Label",
+        control: "text",
+        defaultValue: "Slider"
+      },
+      {
+        name: "min",
+        label: "Min",
+        control: "number",
+        defaultValue: 0
+      },
+      {
+        name: "max",
+        label: "Max",
+        control: "number",
+        defaultValue: 100
+      },
+      {
+        name: "showValue",
+        label: "Show Value",
+        control: "toggle",
+        defaultValue: false
+      },
+      {
+        name: "disabled",
+        label: "Disabled",
+        control: "toggle",
+        defaultValue: false
+      }
+    ]
+  },
+  {
+    id: "hue-slider",
+    name: "HueSlider",
+    importName: "HueSlider",
+    categoryId: "range-inputs",
+    description: "Specialized slider for hue selection (0-360\xB0)",
+    hasChildren: false,
+    variants: [
+      { id: "default", label: "Default", props: { label: "Hue", value: 180 } },
+      { id: "red", label: "Red", props: { label: "Warm Hue", value: 0 } },
+      { id: "blue", label: "Blue", props: { label: "Cool Hue", value: 240 } }
+    ],
+    editableProps: [
+      {
+        name: "label",
+        label: "Label",
+        control: "text",
+        defaultValue: "Hue"
+      },
+      {
+        name: "showValue",
+        label: "Show Value",
+        control: "toggle",
+        defaultValue: false
+      },
+      {
+        name: "disabled",
+        label: "Disabled",
+        control: "toggle",
+        defaultValue: false
+      }
+    ]
+  },
+  {
+    id: "frame",
+    name: "Frame",
+    importName: "Frame",
+    categoryId: "layout",
+    description: "Foundational layout container with theme, elevation, spacing, and interactivity",
+    hasChildren: true,
+    variants: [
+      { id: "default", label: "Default", props: {} },
+      { id: "primary", label: "Primary", props: { theme: "primary" } },
+      { id: "secondary", label: "Secondary", props: { theme: "secondary" } },
+      { id: "strong", label: "Strong", props: { theme: "strong" } },
+      { id: "deeply-sunken", label: "Deeply Sunken", props: { elevation: -2, radius: "md" } },
+      { id: "sunken", label: "Sunken", props: { elevation: -1 } },
+      { id: "elevated", label: "Elevated", props: { elevation: 1 } },
+      { id: "prominent", label: "Prominent", props: { elevation: 2, radius: "lg" } },
+      { id: "padded", label: "Padded", props: { padding: "lg", gap: "md" } },
+      { id: "horizontal", label: "Horizontal", props: { direction: "horizontal", gap: "md", align: "center" } },
+      { id: "grid-3col", label: "3-Column Grid", props: { layout: "grid", columns: 3, gap: "md" } },
+      { id: "card-like", label: "Card-like", props: { radius: "lg", padding: "lg", bordered: true, elevation: 1 } }
+    ],
+    editableProps: [
+      {
+        name: "theme",
+        label: "Theme",
+        control: "select",
+        options: [
+          { label: "Neutral", value: "neutral" },
+          { label: "Primary", value: "primary" },
+          { label: "Secondary", value: "secondary" },
+          { label: "Strong", value: "strong" }
+        ],
+        defaultValue: "neutral"
+      },
+      {
+        name: "elevation",
+        label: "Elevation",
+        control: "select",
+        options: [
+          { label: "Deeply Sunken (-2)", value: -2 },
+          { label: "Sunken (-1)", value: -1 },
+          { label: "Default (0)", value: 0 },
+          { label: "Elevated (1)", value: 1 },
+          { label: "Prominent (2)", value: 2 }
+        ],
+        defaultValue: 0
+      },
+      {
+        name: "direction",
+        label: "Direction",
+        control: "select",
+        options: [
+          { label: "Vertical", value: "vertical" },
+          { label: "Horizontal", value: "horizontal" }
+        ],
+        defaultValue: "vertical"
+      },
+      {
+        name: "padding",
+        label: "Padding",
+        control: "select",
+        options: [
+          { label: "None", value: "" },
+          { label: "Small", value: "sm" },
+          { label: "Medium", value: "md" },
+          { label: "Large", value: "lg" },
+          { label: "Extra Large", value: "xl" }
+        ],
+        defaultValue: ""
+      },
+      {
+        name: "gap",
+        label: "Gap",
+        control: "select",
+        options: [
+          { label: "None", value: "" },
+          { label: "Small", value: "sm" },
+          { label: "Medium", value: "md" },
+          { label: "Large", value: "lg" }
+        ],
+        defaultValue: ""
+      },
+      {
+        name: "radius",
+        label: "Radius",
+        control: "select",
+        options: [
+          { label: "None", value: "none" },
+          { label: "Small", value: "sm" },
+          { label: "Medium", value: "md" },
+          { label: "Large", value: "lg" },
+          { label: "Pill", value: "pill" }
+        ],
+        defaultValue: "none"
+      },
+      {
+        name: "bordered",
+        label: "Bordered",
+        control: "toggle",
+        defaultValue: false
+      }
+    ]
+  },
+  {
+    id: "card",
+    name: "Card",
+    importName: "Card",
+    categoryId: "layout",
+    description: "Surface container with elevation levels",
+    hasChildren: true,
+    variants: [
+      { id: "elevation-0", label: "Elevation 0", props: { elevation: 0 } },
+      { id: "elevation-1", label: "Elevation 1", props: { elevation: 1 } },
+      { id: "elevation-2", label: "Elevation 2", props: { elevation: 2 } }
+    ],
+    editableProps: [
+      {
+        name: "elevation",
+        label: "Elevation",
+        control: "select",
+        options: [
+          { label: "Level 0", value: 0 },
+          { label: "Level 1", value: 1 },
+          { label: "Level 2", value: 2 }
+        ],
+        defaultValue: 0
+      },
+      {
+        name: "disabled",
+        label: "Disabled",
+        control: "toggle",
+        defaultValue: false
+      }
+    ]
+  }
+];
+function getComponent(id) {
+  return COMPONENTS.find((c) => c.id === id);
+}
+function getCategory(id) {
+  return CATEGORIES.find((c) => c.id === id);
+}
+function getComponentsByCategory(categoryId) {
+  return COMPONENTS.filter((c) => c.categoryId === categoryId);
+}
+
+// src/registry/codegen.ts
+var HANDLER_PROPS = {
+  button: ["onPress={() => {}}"],
+  "text-input": ["value={value}", "onChangeText={setValue}"],
+  select: ["value={value}", "onValueChange={setValue}"],
+  toggle: ["value={value}", "onValueChange={setValue}"],
+  slider: ["value={value}", "onValueChange={setValue}"],
+  "hue-slider": ["value={value}", "onValueChange={setValue}"]
+};
+var CHILDREN_CONTENT = {
+  button: "Button",
+  card: "{/* content */}",
+  frame: "{/* content */}"
+};
+function generateComponentCode(component, propOverrides) {
+  const lines = [];
+  lines.push(`import { ${component.importName} } from '@newtonedev/components';`);
+  if (component.id === "select") {
+    lines.push("");
+    lines.push("const options = [");
+    lines.push("  { label: 'Option 1', value: 'option-1' },");
+    lines.push("  { label: 'Option 2', value: 'option-2' },");
+    lines.push("  { label: 'Option 3', value: 'option-3' },");
+    lines.push("];");
+  }
+  lines.push("");
+  const propEntries = [];
+  for (const prop of component.editableProps) {
+    const value = propOverrides[prop.name] ?? prop.defaultValue;
+    if (value === prop.defaultValue) continue;
+    propEntries.push(formatProp(prop.name, value));
+  }
+  const handlers = HANDLER_PROPS[component.id];
+  if (handlers) {
+    for (const handler of handlers) {
+      propEntries.push(handler);
+    }
+  }
+  if (component.id === "select") {
+    propEntries.push("options={options}");
+  }
+  const children = CHILDREN_CONTENT[component.id];
+  const hasProps = propEntries.length > 0;
+  const tag = component.importName;
+  if (component.hasChildren && children) {
+    if (hasProps && propEntries.length <= 3) {
+      lines.push(`<${tag} ${propEntries.join(" ")}>`);
+      lines.push(`  ${children}`);
+      lines.push(`</${tag}>`);
+    } else if (hasProps) {
+      lines.push(`<${tag}`);
+      for (const entry of propEntries) {
+        lines.push(`  ${entry}`);
+      }
+      lines.push(">");
+      lines.push(`  ${children}`);
+      lines.push(`</${tag}>`);
+    } else {
+      lines.push(`<${tag}>`);
+      lines.push(`  ${children}`);
+      lines.push(`</${tag}>`);
+    }
+  } else {
+    if (hasProps && propEntries.length <= 3) {
+      lines.push(`<${tag} ${propEntries.join(" ")} />`);
+    } else if (hasProps) {
+      lines.push(`<${tag}`);
+      for (const entry of propEntries) {
+        lines.push(`  ${entry}`);
+      }
+      lines.push("/>");
+    } else {
+      lines.push(`<${tag} />`);
+    }
+  }
+  return lines.join("\n");
+}
+function formatProp(name, value) {
+  if (typeof value === "string") {
+    return `${name}="${value}"`;
+  }
+  if (typeof value === "boolean") {
+    return value ? name : `${name}={false}`;
+  }
+  if (typeof value === "number") {
+    return `${name}={${value}}`;
+  }
+  return `${name}={${JSON.stringify(value)}}`;
+}
+
+// src/fonts/googleFonts.ts
+var GOOGLE_FONTS = [
+  // Sans-serif
+  { family: "Inter", category: "sans-serif", fallback: "sans-serif" },
+  { family: "Roboto", category: "sans-serif", fallback: "sans-serif" },
+  { family: "Open Sans", category: "sans-serif", fallback: "sans-serif" },
+  { family: "Lato", category: "sans-serif", fallback: "sans-serif" },
+  { family: "Montserrat", category: "sans-serif", fallback: "sans-serif" },
+  { family: "Poppins", category: "sans-serif", fallback: "sans-serif" },
+  { family: "Nunito", category: "sans-serif", fallback: "sans-serif" },
+  { family: "Source Sans 3", category: "sans-serif", fallback: "sans-serif" },
+  { family: "Work Sans", category: "sans-serif", fallback: "sans-serif" },
+  { family: "Raleway", category: "sans-serif", fallback: "sans-serif" },
+  { family: "DM Sans", category: "sans-serif", fallback: "sans-serif" },
+  { family: "Plus Jakarta Sans", category: "sans-serif", fallback: "sans-serif" },
+  { family: "Outfit", category: "sans-serif", fallback: "sans-serif" },
+  { family: "Space Grotesk", category: "sans-serif", fallback: "sans-serif" },
+  { family: "Manrope", category: "sans-serif", fallback: "sans-serif" },
+  // Serif
+  { family: "Playfair Display", category: "serif", fallback: "serif" },
+  { family: "Merriweather", category: "serif", fallback: "serif" },
+  { family: "Lora", category: "serif", fallback: "serif" },
+  { family: "Libre Baskerville", category: "serif", fallback: "serif" },
+  { family: "Source Serif 4", category: "serif", fallback: "serif" },
+  { family: "Bitter", category: "serif", fallback: "serif" },
+  { family: "Cormorant Garamond", category: "serif", fallback: "serif" },
+  { family: "EB Garamond", category: "serif", fallback: "serif" },
+  { family: "Crimson Text", category: "serif", fallback: "serif" },
+  { family: "Noto Serif", category: "serif", fallback: "serif" },
+  // Monospace
+  { family: "Fira Code", category: "monospace", fallback: "monospace" },
+  { family: "JetBrains Mono", category: "monospace", fallback: "monospace" },
+  { family: "Source Code Pro", category: "monospace", fallback: "monospace" },
+  { family: "IBM Plex Mono", category: "monospace", fallback: "monospace" },
+  { family: "Roboto Mono", category: "monospace", fallback: "monospace" },
+  { family: "Space Mono", category: "monospace", fallback: "monospace" },
+  { family: "Ubuntu Mono", category: "monospace", fallback: "monospace" },
+  { family: "Inconsolata", category: "monospace", fallback: "monospace" },
+  // Display
+  { family: "Abril Fatface", category: "display", fallback: "serif" },
+  { family: "Bebas Neue", category: "display", fallback: "sans-serif" },
+  { family: "Oswald", category: "display", fallback: "sans-serif" },
+  { family: "Righteous", category: "display", fallback: "sans-serif" },
+  { family: "Lobster", category: "display", fallback: "cursive" },
+  { family: "Pacifico", category: "display", fallback: "cursive" },
+  { family: "Comfortaa", category: "display", fallback: "sans-serif" },
+  { family: "Fredoka", category: "display", fallback: "sans-serif" }
+];
+var SYSTEM_FONTS = [
+  {
+    family: "system-ui",
+    category: "sans-serif",
+    fallback: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
+  },
+  {
+    family: "ui-monospace",
+    category: "monospace",
+    fallback: "SFMono-Regular, Menlo, Monaco, Consolas, monospace"
+  },
+  {
+    family: "ui-serif",
+    category: "serif",
+    fallback: 'Georgia, "Times New Roman", serif'
+  }
+];
 
-export { Button, Card, DEFAULT_THEME_CONFIG, HueSlider, NewtoneProvider, Select, Slider, TextInput, Toggle, computeTokens, useNewtoneTheme, useTokens };
+export { AppShell, Button, CATEGORIES, COMPONENTS, Card, ColorScaleSlider, DEFAULT_THEME_CONFIG, Frame, GOOGLE_FONTS, HueSlider, Icon, Navbar, NewtoneProvider, Popover, SYSTEM_FONTS, Select, Sidebar, Slider, TextInput, Toggle, buildGoogleFontsUrl, computeTokens, generateComponentCode, getCategory, getComponent, getComponentsByCategory, isOptionGroup, useFrameContext, useNewtoneTheme, usePopover, useTokens };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map