@prasadj28/react-neu 1.0.27 → 1.0.28

package/react-neu/package.json

@@ -1,33 +0,0 @@
-{
-  "name": "react-neu",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite --open",
-    "build": "tsup src/index.ts --format esm,cjs --dts --clean",
-    "build:vite": "LIB=true vite build",
-    "lint": "eslint .",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.36.0",
-    "@types/node": "^24.6.0",
-    "@types/react": "^19.1.16",
-    "@types/react-dom": "^19.1.9",
-    "@vanilla-extract/css": "^1.17.4",
-    "@vanilla-extract/vite-plugin": "^5.1.1",
-    "@vitejs/plugin-react": "^5.0.4",
-    "eslint": "^9.36.0",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.22",
-    "globals": "^16.4.0",
-    "typescript": "~5.9.3",
-    "typescript-eslint": "^8.45.0",
-    "vite": "^7.1.7"
-  }
-}

package/react-neu/src/App.tsx

@@ -1,30 +0,0 @@
-import { NeuButton } from './components/Button/Button'
-import { NeuTextInput } from './components/TextInput/TextInput'
-function App() {
-
-  return (
-    <>
-    <NeuTextInput
-      placeholder="Enter your name"
-      variant="pressed"
-      color="#f6f5f4"
-      intensity={10}
-      elevation={2}
-    />
-    <br/>
-      Hello
-      <NeuButton variant="flat">Flat</NeuButton>
-      <NeuButton variant="convex" >Convex</NeuButton>
-      <NeuButton variant="concave" >Concave</NeuButton>
-      <NeuButton
-        variant="pressed"
-        intensity={10}
-       shadowintensity={10} 
-      >
-        Pressed
-      </NeuButton>
-    </>
-  )
-}
-
-export default App

package/react-neu/src/components/Button/Button.css.ts

@@ -1,12 +0,0 @@
-import { style } from "@vanilla-extract/css";
-import { neuVars } from "../../styles/theme.css";
-
-export const baseButton = style({
-  background: neuVars.color.background,
-  color: neuVars.color.text,
-  border: "none",
-  borderRadius: "0px",
-  padding: "14px 28px",
-  cursor: "pointer",
-  transition: "all 0.2s ease",
-});

package/react-neu/src/components/Button/Button.tsx

@@ -1,92 +0,0 @@
-import React from "react";
-import * as styles from "./Button.css";
-import { filterDOMProps } from "../../styles/filterDomProps";
-import { getNeumorphicStyle } from "../../styles/neumorphicEngine"; 
-
-export const NeuButton: React.FC<NeuButtonProps> = ({
-  // internal props
-  variant = "flat",
-  color = "#e0e0e0",
-  angleDeg = 135,
-  distance = 4,
-  blur = 6,
-  intensity = 5,
-  elevation = 2,
-  border = false,
-  radius = "0px",
-  padding = "14px 28px",
-  textColor = "#333",
-  fontSize = "1rem",
-  fontFamily = "inherit",
-  fontWeight = 500,
-  transition,
-  hoverStyle,
-  activeStyle,
-  disabledStyle,
-  style,
-  disabled,
-  onClick,
-  children,
-  ...props
-}) => {
-  const defaultProps = filterDOMProps(props);
-
-  const [state, setState] = React.useState<"default" | "hover" | "active" | "disabled">(
-    disabled ? "disabled" : "default"
-  );
-
-  const visualVariant =
-    state === "active"
-      ? "pressed"
-      : state === "hover"
-      ? variant === "concave"
-        ? "pressed"
-        : "convex"
-      : variant;
-
-  const { background, boxShadow, border: borderStyle } = getNeumorphicStyle({
-    variant: visualVariant,
-    color,
-    angleDeg,
-    distance,
-    blur,
-    intensity,
-    elevation,
-    border,
-    state,
-  });
-
-  const mergedStyle: React.CSSProperties = {
-    background,
-    boxShadow,
-    border: borderStyle,
-    borderRadius: radius,
-    padding,
-    color: textColor,
-    fontSize,
-    fontFamily,
-    fontWeight,
-    cursor: disabled ? "not-allowed" : "pointer",
-    transition: transition || "all 0.25s ease",
-    ...(state === "hover" && hoverStyle),
-    ...(state === "active" && activeStyle),
-    ...(state === "disabled" && disabledStyle),
-    ...style,
-  };
-
-  return (
-    <button
-      className={styles.baseButton}
-      style={mergedStyle}
-      disabled={disabled}
-      onClick={onClick}
-      onMouseEnter={() => !disabled && setState("hover")}
-      onMouseLeave={() => !disabled && setState("default")}
-      onMouseDown={() => !disabled && setState("active")}
-      onMouseUp={() => !disabled && setState("hover")}
-      {...defaultProps}
-    >
-      {children}
-    </button>
-  );
-};

package/react-neu/src/components/TextInput/TextInput.tsx

@@ -1,72 +0,0 @@
-import React from "react";
-import * as styles from "./TextInput.css";
-import { getNeumorphicStyle } from "../../styles/neumorphicEngine";
-import { filterDOMProps } from "../../styles/filterDomProps";
-
-export const NeuTextInput: React.FC<React.InputHTMLAttributes<HTMLInputElement>> = ({
-  variant = "pressed",
-  color = "#cccccc",
-  distance = 5,
-  blur = 10,
-  intensity = 6,
-  elevation = 2,
-  border = false,
-  radius = "15px",
-  padding = "1em",
-  fontSize = "1rem",
-  textColor = "#333",
-  transition = "all 0.3s ease-in-out",
-  style,
-  disabled,
-  ...props
-}) => {
-  const domProps = filterDOMProps(props);
-  const [focused, setFocused] = React.useState(false);
-
-  // Base neumorphic shadow (pressed = inset)
-  const { background, boxShadow } = getNeumorphicStyle({
-    variant: "pressed",
-    color,
-    distance,
-    blur,
-    intensity,
-    elevation,
-    border,
-    state: focused ? "active" : "default",
-  });
-
-  const mergedStyle: React.CSSProperties = {
-    WebkitAppearance: "none",
-    MozAppearance: "none",
-    appearance: "none",
-    background: background || color,
-    border: "none",
-    outline: "none",
-    borderRadius: radius,
-    padding,
-    color: textColor,
-    fontSize,
-    width: "100%",
-    boxSizing: "border-box",
-    transition,
-    boxShadow: focused
-      ? "13px 13px 100px #969696, -13px -13px 100px #ffffff" // your custom glow
-      : boxShadow || "inset 2px 5px 10px rgba(0,0,0,0.3)",
-    transform: focused ? "scale(1.05)" : "scale(1)",
-    backgroundColor: focused ? "white" : color,
-    cursor: disabled ? "not-allowed" : "text",
-    ...style,
-  };
-
-  return (
-    <input
-      className={styles.baseInput}
-      style={mergedStyle}
-      disabled={disabled}
-      onFocus={() => setFocused(true)}
-      onBlur={() => setFocused(false)}
-      {...domProps}
-    />
-  );
-};
-

package/react-neu/src/index.ts

@@ -1,3 +0,0 @@
-import "./styles/defaultTheme.css";
-export * from "./components";
-

package/react-neu/src/styles/defaults.css.ts

@@ -1,16 +0,0 @@
-import { createGlobalTheme } from "@vanilla-extract/css";
-import { neuVars } from "./theme.css";
-
-createGlobalTheme(":root", neuVars, {
-  color: {
-    background: "#e0e0e0",
-    primary: "#ffffff",
-    secondary: "#c8c8c8",
-    text: "#111111",
-  },
-  neumorphic: {
-    angle: "135deg",
-    depth: "0.3",
-    distance: "10px",
-  },
-});

package/react-neu/src/styles/filterDomProps.ts

@@ -1,28 +0,0 @@
-const internalProps = new Set([
-  "variant",
-  "color",
-  "angleDeg",
-  "distance",
-  "blur",
-  "intensity",
-  "elevation",
-  "border",
-  "radius",
-  "padding",
-  "textColor",
-  "fontSize",
-  "fontFamily",
-  "fontWeight",
-  "transition",
-  "hoverStyle",
-  "activeStyle",
-  "disabledStyle",
-]);
-
-export function filterDOMProps<T extends Record<string, any>>(props: T):Partial<T> {
-  const result: Partial<T> = {};
-  for(const key in props) {
-    if(!internalProps.has(key)) result[key] = props[key];
-  }
-  return result;
-}

package/react-neu/src/styles/global.css.ts

@@ -1,12 +0,0 @@
-import { globalStyle } from "@vanilla-extract/css";
-import { neuVars } from "./theme.css";
-
-globalStyle("body", {
-  margin: 0,
-  backgroundColor: neuVars.color.background,
-  fontFamily: "Inter, sans-serif",
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  height: "100vh",
-});

package/react-neu/src/styles/neumorphicEngine.ts

@@ -1,110 +0,0 @@
-// src/styles/neumorphicEngine.ts
-import { lighten, darken } from "./colorUtils";
-
-export type NeumorphicVariant = "flat" | "convex" | "concave" | "pressed";
-export type NeumorphicState = "default" | "hover" | "active" | "disabled" | "focus";
-
-export interface NeumorphicOptions {
-  variant?: NeumorphicVariant;
-  color?: string;
-  angleDeg?: number;
-  distance?: number;   // 1–10 (or px if you want)
-  blur?: number;       // 1–10
-  intensity?: number;  // 1–10
-  elevation?: number;  // 1–10
-  border?: boolean;
-  state?: NeumorphicState;
-
-  // New: control composite behavior without hardcoding in components
-  focusGlow?: boolean;     // add an outer glow on focus
-  glowScale?: number;      // multiplier for distance/blur on glow
-}
-
-function pairShadows({
-  color, intensity, distance, blur, angleDeg, inset = false,
-}: {
-  color: string;
-  intensity: number;
-  distance: number;
-  blur: number;
-  angleDeg: number;
-  inset?: boolean;
-}) {
-  const darkShadow = darken(color, intensity * 2);
-  const lightShadow = lighten(color, intensity * 2);
-  const ang = (angleDeg * Math.PI) / 180;
-  const ox = Math.cos(ang) * distance;
-  const oy = Math.sin(ang) * distance;
-  const pre = inset ? "inset " : "";
-  return `${pre}${ox}px ${oy}px ${blur}px ${darkShadow}, ${pre}${-ox}px ${-oy}px ${blur}px ${lightShadow}`;
-}
-
-export function getNeumorphicStyle({
-  variant = "convex",
-  color = "#f6f5f4",
-  angleDeg = 135,
-  distance = 6,
-  blur = 12,
-  intensity = 6,
-  elevation = 2,
-  border = false,
-  state = "default",
-  focusGlow = false,
-  glowScale = 3,
-}: NeumorphicOptions) {
-  // Elevation scaling (kept mild so component props remain the main control)
-  const level = Math.max(1, Math.min(10, elevation));
-  const effDistance = distance * level ** 1.2;
-  const effBlur = blur * level ** 1.2;
-
-  // Base background by variant
-  let background = color;
-  if (variant === "convex") {
-    background = `linear-gradient(225deg, ${lighten(color, 4)}, ${darken(color, 4)})`;
-  } else if (variant === "concave") {
-    background = `linear-gradient(225deg, ${darken(color, 4)}, ${lighten(color, 4)})`;
-  } else if (variant === "pressed") {
-    background = lighten(color, 3);
-  }
-
-  // Base shadows by variant
-  let base = "";
-  if (variant === "flat") {
-    base = pairShadows({ color, intensity, distance: effDistance, blur: effBlur, angleDeg });
-  } else if (variant === "convex") {
-    base = pairShadows({ color, intensity, distance: effDistance, blur: effBlur, angleDeg });
-  } else if (variant === "concave") {
-    base = pairShadows({ color, intensity, distance: effDistance, blur: effBlur, angleDeg, inset: true });
-  } else if (variant === "pressed") {
-    // deeper inset for pressed
-    base = pairShadows({
-      color,
-      intensity: intensity + 2,
-      distance: effDistance * 1.6,
-      blur: effBlur * 1.8,
-      angleDeg,
-      inset: true,
-    });
-  }
-
-  // Optional focus glow layer (outer) – engine-driven, not hardcoded
-  let composite = base;
-  if (state === "focus" && focusGlow) {
-    const glow = pairShadows({
-      color,
-      intensity: Math.max(1, intensity - 1),
-      distance: effDistance * glowScale,
-      blur: effBlur * glowScale,
-      angleDeg,
-      inset: false,
-    });
-    // outer glow first, then base inset so it feels “halo + pressed”
-    composite = `${glow}, ${base}`;
-    // Slight brighten on focus to mimic your white-on-focus without hardcoding white
-    background = lighten(color, 6);
-  }
-
-  const borderStyle = border ? `2px solid ${darken(color, 10)}` : "none";
-  return { background, boxShadow: composite, border: borderStyle };
-}
-

package/react-neu/src/styles/shadowUtils.ts

@@ -1,68 +0,0 @@
-// src/styles/shadowUtils.ts
-import { lighten, darken } from "./colorUtils";
-
-export type NeumorphicMode = "pop" | "drop";
-export type NeumorphicState = "default" | "hover" | "active";
-
-interface ShadowOptions {
-  mode?: NeumorphicMode;
-  color?: string;
-  intensity?: number; // base brightness delta
-  elevation?: number; // 1–10 scale
-  state?: NeumorphicState;
-  angleDeg?: number; // 0–360
-  customDistance?: number; // optional user override for offset
-  customDepth?: number;
-}
-
-export function getNeumorphicShadow({
-  mode,
-  color: buttonColor,
-  intensity = 12,
-  elevation = 1,
-  state = "default",
-  angleDeg = 135,
-  customDistance,
-  customDepth,
-}: ShadowOptions) {
-  if (!mode) return "none";
-
-  // Clamp elevation to 1–10
-  const level = Math.max(1, Math.min(10, elevation));
-
-  // Adjust for hover/active but maintain same strength feel
-  const elevationMap = {
-    default: level,
-    hover: level + 1.2,
-    active: level - 0.8,
-  } as const;
-  const effectiveElevation = elevationMap[state];
-  const color = buttonColor || "#e0e0e0";
-  // Make big changes to spatial distance and blur
-  // Elevation now multiplies both — this gives real visual separation
-  const distance = customDistance ?? 2 * effectiveElevation ** 1.4;
-  const blur = customDepth ?? 5 * effectiveElevation ** 1.4;
-
-
-  // Make contrast increase sharply with elevation
-  // 1 → soft, 10 → extremely strong
-  const effectiveIntensity = intensity + level * 15;
-
-  const darkBoost = 1 + Math.pow(level / 8, 2); // nonlinear dark boost
-  const lightBoost = 1 + Math.pow(level / 10, 1.5); // gentle brightening
-
-  const darkShadow = darken(color, intensity * 1.5 * darkBoost);
-  const lightShadow = lighten(color, intensity * lightBoost);
-
-  const inset = mode === "drop" ? "inset " : "";
-
-  const angleRad = (angleDeg * Math.PI) / 180;
-  const offsetX = Math.cos(angleRad) * distance;
-  const offsetY = Math.sin(angleRad) * distance;
-
- return `
-    ${inset}${offsetX.toFixed(1)}px ${offsetY.toFixed(1)}px ${blur.toFixed(1)}px ${darkShadow},
-    ${inset}${-offsetX.toFixed(1)}px ${-offsetY.toFixed(1)}px ${blur.toFixed(1)}px ${lightShadow}
-  `;
-}
-

package/react-neu/src/styles/theme.css.ts

@@ -1,26 +0,0 @@
-import { createVar, style, globalStyle } from "@vanilla-extract/css";
-
-export const neuVars = {
-  color: {
-    background: createVar(),
-    text: createVar(),
-    shadowLight: createVar(),
-    shadowDark: createVar(),
-  },
-  shadow: {
-    depth: createVar(),
-    distance: createVar(),
-  },
-};
-
-globalStyle(":root", {
-  vars: {
-    [neuVars.color.background]: "var(--background-color, #e0e0e0)",
-    [neuVars.color.text]: "var(--text-color, #2c2c2c)",
-    [neuVars.color.shadowLight]: "rgba(255,255,255,0.7)",
-    [neuVars.color.shadowDark]: "rgba(0,0,0,0.25)",
-    [neuVars.shadow.depth]: "0.3",
-    [neuVars.shadow.distance]: "8px",
-  },
-});
-

package/react-neu/tsconfig.json

@@ -1,7 +0,0 @@
-{
-  "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ]
-}