@newtonedev/components 0.1.0

package/dist/index.js

@@ -0,0 +1,719 @@
+import React7, { createContext, useState, useMemo, useContext } 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';
+
+// src/theme/NewtoneProvider.tsx
+var DEFAULT_THEME_CONFIG = {
+  colorSystem: {
+    dynamicRange: {
+      lightest: 1,
+      darkest: 1
+    },
+    palettes: [
+      { hue: DEFAULT_NEUTRAL_HUE, saturation: DEFAULT_NEUTRAL_SATURATION },
+      { hue: DEFAULT_ACCENT_HUE, saturation: DEFAULT_ACCENT_SATURATION },
+      { hue: DEFAULT_SUCCESS_HUE, saturation: DEFAULT_SUCCESS_SATURATION },
+      { hue: DEFAULT_WARNING_HUE, saturation: DEFAULT_WARNING_SATURATION },
+      { hue: DEFAULT_ERROR_HUE, saturation: DEFAULT_ERROR_SATURATION }
+    ]
+  },
+  themes: {
+    neutral: { paletteIndex: 0, lightModeNv: 0.95, darkModeNv: 0.1 },
+    primary: { paletteIndex: 1, lightModeNv: 0.95, darkModeNv: 0.1 },
+    secondary: { paletteIndex: 1, lightModeNv: 0.85, darkModeNv: 0.15 },
+    strong: { paletteIndex: 0, lightModeNv: 0.1, darkModeNv: 0.95 }
+  },
+  elevation: {
+    offsets: [-0.02, 0, 0.04]
+    // [sunken, default, elevated]
+  }
+};
+
+// src/theme/NewtoneProvider.tsx
+var ThemeContext = createContext(null);
+function NewtoneProvider({
+  config = DEFAULT_THEME_CONFIG,
+  initialMode = "light",
+  initialTheme = "neutral",
+  children
+}) {
+  const [mode, setMode] = useState(initialMode);
+  const [theme, setTheme] = useState(initialTheme);
+  const value = useMemo(
+    () => ({
+      config,
+      mode,
+      theme,
+      setMode,
+      setTheme
+    }),
+    [config, mode, theme]
+  );
+  return /* @__PURE__ */ React7.createElement(ThemeContext.Provider, { value }, children);
+}
+function useNewtoneTheme() {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useNewtoneTheme must be used within NewtoneProvider");
+  }
+  return context;
+}
+function computeTokens(config, mode, themeMapping, elevation, elevationOffsets) {
+  const { dynamicRange, palettes } = config;
+  const palette = palettes[themeMapping.paletteIndex];
+  if (!palette) {
+    throw new Error(`Palette at index ${themeMapping.paletteIndex} not found`);
+  }
+  const baseNv = mode === "light" ? themeMapping.lightModeNv : themeMapping.darkModeNv;
+  const elevationOffset = elevationOffsets[elevation];
+  const backgroundNv = Math.max(0, Math.min(1, baseNv + elevationOffset));
+  const effectiveTextMode = backgroundNv >= 0.5 ? "light" : "dark";
+  const background = getColor(
+    palette.hue,
+    palette.saturation,
+    dynamicRange,
+    backgroundNv,
+    palette.desaturation,
+    palette.paletteHueGrading
+  );
+  const elevatedNv = Math.max(0, Math.min(1, baseNv + elevationOffsets[2]));
+  const backgroundElevated = getColor(
+    palette.hue,
+    palette.saturation,
+    dynamicRange,
+    elevatedNv,
+    palette.desaturation,
+    palette.paletteHueGrading
+  );
+  const sunkenNv = Math.max(0, Math.min(1, baseNv + elevationOffsets[0]));
+  const backgroundSunken = getColor(
+    palette.hue,
+    palette.saturation,
+    dynamicRange,
+    sunkenNv,
+    palette.desaturation,
+    palette.paletteHueGrading
+  );
+  const textPrimary = getColorByContrast(
+    palette.hue,
+    palette.saturation,
+    dynamicRange,
+    4.5,
+    effectiveTextMode,
+    palette.desaturation,
+    palette.paletteHueGrading
+  );
+  const textSecondary = getColorByContrast(
+    palette.hue,
+    palette.saturation,
+    dynamicRange,
+    3,
+    effectiveTextMode,
+    palette.desaturation,
+    palette.paletteHueGrading
+  );
+  const accentPalette = palettes[1];
+  if (!accentPalette) {
+    throw new Error("Accent palette (index 1) not found");
+  }
+  const interactive = getColorByContrast(
+    accentPalette.hue,
+    accentPalette.saturation,
+    dynamicRange,
+    4.5,
+    effectiveTextMode,
+    accentPalette.desaturation,
+    accentPalette.paletteHueGrading
+  );
+  const interactiveNv = effectiveTextMode === "light" ? 0.3 : 0.7;
+  const interactiveHover = getColor(
+    accentPalette.hue,
+    accentPalette.saturation,
+    dynamicRange,
+    interactiveNv + (effectiveTextMode === "light" ? -0.05 : 0.05),
+    accentPalette.desaturation,
+    accentPalette.paletteHueGrading
+  );
+  const interactiveActive = getColor(
+    accentPalette.hue,
+    accentPalette.saturation,
+    dynamicRange,
+    interactiveNv + (effectiveTextMode === "light" ? -0.1 : 0.1),
+    accentPalette.desaturation,
+    accentPalette.paletteHueGrading
+  );
+  const borderNv = effectiveTextMode === "light" ? backgroundNv - 0.1 : backgroundNv + 0.1;
+  const border = getColor(
+    palette.hue,
+    palette.saturation,
+    dynamicRange,
+    Math.max(0, Math.min(1, borderNv)),
+    palette.desaturation,
+    palette.paletteHueGrading
+  );
+  const successPalette = palettes[2];
+  const warningPalette = palettes[3];
+  const errorPalette = palettes[4];
+  const success = successPalette ? getColorByContrast(
+    successPalette.hue,
+    successPalette.saturation,
+    dynamicRange,
+    4.5,
+    effectiveTextMode,
+    successPalette.desaturation,
+    successPalette.paletteHueGrading
+  ) : interactive;
+  const warning = warningPalette ? getColorByContrast(
+    warningPalette.hue,
+    warningPalette.saturation,
+    dynamicRange,
+    4.5,
+    effectiveTextMode,
+    warningPalette.desaturation,
+    warningPalette.paletteHueGrading
+  ) : interactive;
+  const error = errorPalette ? getColorByContrast(
+    errorPalette.hue,
+    errorPalette.saturation,
+    dynamicRange,
+    4.5,
+    effectiveTextMode,
+    errorPalette.desaturation,
+    errorPalette.paletteHueGrading
+  ) : interactive;
+  return {
+    background,
+    backgroundElevated,
+    backgroundSunken,
+    textPrimary,
+    textSecondary,
+    interactive,
+    interactiveHover,
+    interactiveActive,
+    border,
+    success,
+    warning,
+    error
+  };
+}
+
+// src/tokens/useTokens.ts
+function useTokens(elevation = 1) {
+  const { config, mode, theme } = useNewtoneTheme();
+  return useMemo(() => {
+    const themeMapping = config.themes[theme];
+    return computeTokens(
+      config.colorSystem,
+      mode,
+      themeMapping,
+      elevation,
+      config.elevation.offsets
+    );
+  }, [config, mode, theme, elevation]);
+}
+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];
+  const base = {
+    paddingVertical: sizeConfig.paddingVertical,
+    paddingHorizontal: sizeConfig.paddingHorizontal,
+    borderRadius: sizeConfig.borderRadius,
+    alignItems: "center",
+    justifyContent: "center",
+    flexDirection: "row"
+  };
+  let backgroundColor;
+  let textColor;
+  let borderColor;
+  let borderWidth = 0;
+  switch (variant) {
+    case "primary":
+      backgroundColor = srgbToHex(tokens.interactive.srgb);
+      textColor = srgbToHex(tokens.background.srgb);
+      break;
+    case "secondary":
+      backgroundColor = srgbToHex(tokens.backgroundElevated.srgb);
+      textColor = srgbToHex(tokens.textPrimary.srgb);
+      break;
+    case "outline":
+      backgroundColor = "transparent";
+      textColor = srgbToHex(tokens.interactive.srgb);
+      borderColor = srgbToHex(tokens.border.srgb);
+      borderWidth = 1;
+      break;
+    case "ghost":
+      backgroundColor = "transparent";
+      textColor = srgbToHex(tokens.interactive.srgb);
+      break;
+  }
+  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
+    },
+    textDisabled: {
+      // Color already set in text style via disabled check
+    }
+  });
+}
+
+// src/Button/Button.tsx
+function Button({
+  children,
+  variant = "primary",
+  size = "md",
+  disabled = false,
+  style,
+  textStyle,
+  ...pressableProps
+}) {
+  const tokens = useTokens(1);
+  const styles = React7.useMemo(
+    () => getButtonStyles(tokens, variant, size, disabled),
+    [tokens, variant, size, disabled]
+  );
+  return /* @__PURE__ */ React7.createElement(
+    Pressable,
+    {
+      style: ({ pressed }) => [
+        styles.base,
+        pressed && !disabled && styles.pressed,
+        disabled && styles.disabled,
+        ...Array.isArray(style) ? style : [style]
+      ],
+      disabled,
+      ...pressableProps
+    },
+    ({ pressed }) => /* @__PURE__ */ React7.createElement(
+      Text,
+      {
+        style: [
+          styles.text,
+          pressed && !disabled && styles.textPressed,
+          disabled && styles.textDisabled,
+          ...Array.isArray(textStyle) ? textStyle : [textStyle]
+        ]
+      },
+      children
+    )
+  );
+}
+function getCardStyles(tokens, disabled) {
+  return StyleSheet.create({
+    container: {
+      backgroundColor: srgbToHex(tokens.background.srgb),
+      borderWidth: 1,
+      borderColor: srgbToHex(tokens.border.srgb),
+      borderRadius: 8,
+      padding: 16,
+      opacity: disabled ? 0.5 : 1
+    }
+  });
+}
+
+// src/Card/Card.tsx
+function Card({
+  children,
+  elevation = 1,
+  style,
+  disabled = false
+}) {
+  const tokens = useTokens(elevation);
+  const styles = React7.useMemo(
+    () => getCardStyles(tokens, disabled),
+    [tokens, disabled]
+  );
+  return /* @__PURE__ */ React7.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, children);
+}
+function getTextInputStyles(tokens, disabled) {
+  return StyleSheet.create({
+    container: {
+      gap: 4
+    },
+    label: {
+      fontSize: 12,
+      fontWeight: "600",
+      color: srgbToHex(tokens.textSecondary.srgb)
+    },
+    input: {
+      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),
+      opacity: disabled ? 0.5 : 1
+    }
+  });
+}
+function TextInput({
+  label,
+  disabled = false,
+  style,
+  ...textInputProps
+}) {
+  const tokens = useTokens(1);
+  const styles = React7.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(
+    TextInput$1,
+    {
+      style: styles.input,
+      editable: !disabled,
+      placeholderTextColor: srgbToHex(tokens.textSecondary.srgb),
+      ...textInputProps
+    }
+  ));
+}
+function getSelectStyles(tokens, disabled) {
+  return StyleSheet.create({
+    container: {
+      gap: 4
+    },
+    label: {
+      fontSize: 12,
+      fontWeight: "600",
+      color: srgbToHex(tokens.textSecondary.srgb)
+    },
+    select: {
+      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),
+      opacity: disabled ? 0.5 : 1
+    }
+  });
+}
+
+// src/Select/Select.tsx
+function Select({
+  options,
+  value,
+  onValueChange,
+  label,
+  disabled = false,
+  style
+}) {
+  const tokens = useTokens(1);
+  const styles = React7.useMemo(
+    () => getSelectStyles(tokens, disabled),
+    [tokens, disabled]
+  );
+  const handleChange = React7.useCallback(
+    (e) => {
+      onValueChange(e.target.value);
+    },
+    [onValueChange]
+  );
+  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",
+    {
+      value,
+      onChange: handleChange,
+      disabled,
+      style: {
+        ...selectStyle,
+        cursor: disabled ? "default" : "pointer",
+        appearance: "auto"
+      }
+    },
+    options.map((option) => /* @__PURE__ */ React7.createElement("option", { key: option.value, value: option.value }, option.label))
+  ));
+}
+var TRACK_WIDTH = 40;
+var TRACK_HEIGHT = 22;
+var THUMB_SIZE = 18;
+var THUMB_OFFSET = 2;
+function getToggleStyles(tokens, value, disabled) {
+  return StyleSheet.create({
+    container: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 8,
+      opacity: disabled ? 0.5 : 1
+    },
+    label: {
+      fontSize: 12,
+      fontWeight: "600",
+      color: srgbToHex(tokens.textSecondary.srgb)
+    },
+    track: {
+      width: TRACK_WIDTH,
+      height: TRACK_HEIGHT,
+      borderRadius: TRACK_HEIGHT / 2,
+      backgroundColor: value ? srgbToHex(tokens.interactive.srgb) : srgbToHex(tokens.border.srgb),
+      justifyContent: "center",
+      paddingHorizontal: THUMB_OFFSET
+    },
+    thumb: {
+      width: THUMB_SIZE,
+      height: THUMB_SIZE,
+      borderRadius: THUMB_SIZE / 2,
+      backgroundColor: srgbToHex(tokens.background.srgb),
+      alignSelf: value ? "flex-end" : "flex-start"
+    }
+  });
+}
+
+// src/Toggle/Toggle.tsx
+function Toggle({
+  value,
+  onValueChange,
+  label,
+  disabled = false,
+  style
+}) {
+  const tokens = useTokens(1);
+  const styles = React7.useMemo(
+    () => getToggleStyles(tokens, value, disabled),
+    [tokens, value, disabled]
+  );
+  const handlePress = React7.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(
+    Pressable,
+    {
+      onPress: handlePress,
+      disabled,
+      accessibilityRole: "switch",
+      accessibilityState: { checked: value, disabled }
+    },
+    /* @__PURE__ */ React7.createElement(View, { style: styles.track }, /* @__PURE__ */ React7.createElement(View, { style: styles.thumb }))
+  ));
+}
+function getSliderStyles(tokens) {
+  return StyleSheet.create({
+    container: {
+      gap: 4
+    },
+    labelRow: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center"
+    },
+    label: {
+      fontSize: 12,
+      fontWeight: "600",
+      color: srgbToHex(tokens.textSecondary.srgb)
+    },
+    value: {
+      fontSize: 12,
+      fontWeight: "500",
+      color: srgbToHex(tokens.textPrimary.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({
+  value,
+  onValueChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  label,
+  showValue = false,
+  disabled = false,
+  style
+}) {
+  const tokens = useTokens(1);
+  const styles = React7.useMemo(
+    () => getSliderStyles(tokens),
+    [tokens]
+  );
+  const inputStyle = React7.useMemo(
+    () => getSliderInputStyle(tokens, disabled),
+    [tokens, disabled]
+  );
+  const handleChange = React7.useCallback(
+    (e) => {
+      onValueChange(Number(e.target.value));
+    },
+    [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)), /* @__PURE__ */ React7.createElement(
+    "input",
+    {
+      type: "range",
+      min,
+      max,
+      step,
+      value,
+      onChange: handleChange,
+      disabled,
+      style: inputStyle
+    }
+  ));
+}
+var HUE_GRADIENT = "linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)";
+function hueToHex(hue) {
+  const h = (hue % 360 + 360) % 360;
+  const x = 1 - Math.abs(h / 60 % 2 - 1);
+  let r, g, b;
+  if (h < 60) {
+    r = 1;
+    g = x;
+    b = 0;
+  } else if (h < 120) {
+    r = x;
+    g = 1;
+    b = 0;
+  } else if (h < 180) {
+    r = 0;
+    g = 1;
+    b = x;
+  } else if (h < 240) {
+    r = 0;
+    g = x;
+    b = 1;
+  } else if (h < 300) {
+    r = x;
+    g = 0;
+    b = 1;
+  } else {
+    r = 1;
+    g = 0;
+    b = x;
+  }
+  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 getHueSliderStyles(tokens) {
+  return StyleSheet.create({
+    container: {
+      gap: 4
+    },
+    labelRow: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center"
+    },
+    label: {
+      fontSize: 12,
+      fontWeight: "600",
+      color: srgbToHex(tokens.textSecondary.srgb)
+    },
+    value: {
+      fontSize: 12,
+      fontWeight: "500",
+      color: srgbToHex(tokens.textPrimary.srgb)
+    },
+    sliderTrack: {
+      height: 22,
+      borderRadius: 11,
+      overflow: "hidden"
+    }
+  });
+}
+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({
+  value,
+  onValueChange,
+  min = 0,
+  max = 359,
+  label,
+  showValue = false,
+  disabled = false,
+  style
+}) {
+  const tokens = useTokens(1);
+  const styles = React7.useMemo(
+    () => getHueSliderStyles(tokens),
+    [tokens]
+  );
+  const inputStyle = React7.useMemo(
+    () => getHueSliderInputStyle(disabled, min, max),
+    [disabled, min, max]
+  );
+  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);
+    },
+    [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",
+    {
+      type: "range",
+      min,
+      max,
+      step: 1,
+      value: sliderValue,
+      onChange: handleChange,
+      disabled,
+      style: inputStyle
+    }
+  ));
+}
+
+export { Button, Card, DEFAULT_THEME_CONFIG, HueSlider, NewtoneProvider, Select, Slider, TextInput, Toggle, computeTokens, useNewtoneTheme, useTokens };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map