@prasadj28/react-neu 1.0.27 → 1.0.28

package/src/components/Icon/IconPaths.tsx

@@ -0,0 +1,80 @@
+import React from "react";
+
+export type IconName =
+  | "heart" | "bookmark" | "comment" | "star"
+  | "circle" | "square" | "triangle" | "diamond"
+  | "user" | "gear" | "bell" | "search" | "share"
+  | "mail" | "send" | "camera" | "mic";
+
+// FIX: Changed 'JSX.Element' to 'React.ReactElement'
+export const iconRegistry: Record<IconName, React.ReactElement> = {
+  // --- SHAPES ---
+  heart: <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />,
+  bookmark: <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />,
+  comment: <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />,
+
+  // --- GEOMETRIC ---
+  circle: <circle cx="12" cy="12" r="10" />,
+  square: <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />,
+  triangle: <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />,
+  diamond: <path d="M12 2L2 12l10 10 10-10L12 2z" />,
+
+  // --- ICONS (Wrapped in <g> if multiple paths) ---
+  user: (
+    <g>
+      <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+      <circle cx="12" cy="7" r="4" />
+    </g>
+  ),
+  gear: (
+    <path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
+  ),
+  bell: (
+    <g>
+      <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
+      <path d="M13.73 21a2 2 0 0 1-3.46 0" />
+    </g>
+  ),
+  star: <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />,
+  search: (
+    <g>
+      <circle cx="11" cy="11" r="8" />
+      <line x1="21" y1="21" x2="16.65" y2="16.65" />
+    </g>
+  ),
+  share: (
+    <g>
+      <circle cx="18" cy="5" r="3" />
+      <circle cx="6" cy="12" r="3" />
+      <circle cx="18" cy="19" r="3" />
+      <line x1="8.59" y1="13.51" x2="15.42" y2="17.49" />
+      <line x1="15.41" y1="6.51" x2="8.59" y2="10.49" />
+    </g>
+  ),
+  mail: (
+    <g>
+      <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
+      <polyline points="22,6 12,13 2,6" />
+    </g>
+  ),
+  send: (
+    <g>
+      <line x1="22" y1="2" x2="11" y2="13" />
+      <polygon points="22 2 15 22 11 13 2 9 22 2" />
+    </g>
+  ),
+  camera: (
+    <g>
+      <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" />
+      <circle cx="12" cy="13" r="4" />
+    </g>
+  ),
+  mic: (
+    <g>
+      <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
+      <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
+      <line x1="12" y1="19" x2="12" y2="23" />
+      <line x1="8" y1="23" x2="16" y2="23" />
+    </g>
+  ),
+};

package/src/components/Radio/Radio.css.ts

@@ -0,0 +1,57 @@
+import { style } from "@vanilla-extract/css";
+
+export const radioLabel = style({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "12px",
+  cursor: "pointer",
+  userSelect: "none",
+  fontSize: "1rem",
+  position: "relative",
+});
+
+export const hiddenRadio = style({
+  position: "absolute",
+  opacity: 0,
+  cursor: "pointer",
+  height: 0,
+  width: 0,
+});
+
+export const visualBox = style({
+  position: "relative",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  transition: "all 0.3s ease",
+  boxSizing: "border-box",
+});
+
+export const iconContainer = style({
+  position: "absolute",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "100%",
+  height: "100%",
+  pointerEvents: "none",
+});
+
+// Standard Radio Dot
+export const radioDot = style({
+  width: "50%",
+  height: "50%",
+  borderRadius: "50%",
+  backgroundColor: "currentColor",
+  transition: "transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s ease",
+});
+
+// For Check/Cross styles
+export const svgIcon = style({
+  width: "60%",
+  height: "60%",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  fill: "none",
+  transition: "all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)",
+});

package/src/components/Radio/Radio.tsx

@@ -0,0 +1,130 @@
+import React from "react";
+import { radioLabel, hiddenRadio, visualBox, iconContainer, radioDot, svgIcon } from "./Radio.css";
+import { getNeumorphicStyle } from "../../styles/neumorphicEngine";
+import type { NeumorphicProps } from "../../styles/types";
+
+interface RadioProps extends NeumorphicProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "color"> {
+  /**
+   * Visual style when selected.
+   * - 'dot': Standard radio circle.
+   * - 'check': Checkmark.
+   * - 'cross': X mark.
+   * - 'fill': Sinks in (Inset) without an icon.
+   * @default "dot"
+   */
+  selectionStyle?: "dot" | "check" | "cross" | "fill";
+
+  /**
+   * Color of the Dot/Icon.
+   * @default "#1e1e1e"
+   */
+  selectedColor?: string;
+
+  /**
+   * Size of the radio button.
+   * @default "26px"
+   */
+  size?: number | string;
+}
+
+export const NeuRadio: React.FC<RadioProps> = ({
+  // Neumorphic Defaults
+  variant = "pop",
+  surface = "flat",
+  color,
+  elevation = 2,
+  intensity,
+  shape = "circle", // Default for Radio
+  angleDeg,
+  border = false,
+  ridge = false,
+
+  // Custom Logic
+  selectionStyle = "dot",
+  selectedColor = "#1e1e1e",
+  size = "26px",
+
+  // Standard Props
+  checked,
+  defaultChecked,
+  children,
+  className,
+  style,
+  disabled,
+  ...htmlProps
+}) => {
+  // Controlled/Uncontrolled logic
+  const isChecked = checked || false;
+
+  // LOGIC: If checked, we go "active" (pressed/sink) unless it's just a dot on a flat surface
+  const engineState = isChecked ? "active" : "default";
+
+  const boxStyle = getNeumorphicStyle({
+    variant,
+    surface,
+    color,
+    elevation,
+    intensity,
+    shape,
+    angleDeg,
+    border,
+    ridge,
+    state: engineState,
+  });
+
+  const showIcon = selectionStyle !== "fill";
+
+  return (
+    <label
+      className={`${radioLabel} ${className || ""}`}
+      style={{ opacity: disabled ? 0.6 : 1, ...style }}
+    >
+      <input
+        type="radio"
+        className={hiddenRadio}
+        checked={isChecked}
+        disabled={disabled}
+        {...htmlProps}
+      />
+
+      <div
+        className={visualBox}
+        style={{
+          width: size,
+          height: size,
+          ...boxStyle,
+          color: selectedColor, // Inherited by radioDot
+        }}
+      >
+        {showIcon && (
+          <div className={iconContainer} style={{ opacity: isChecked ? 1 : 0 }}>
+            {selectionStyle === "dot" ? (
+               // Standard Dot
+               <div
+                 className={radioDot}
+                 style={{ transform: isChecked ? "scale(1)" : "scale(0)" }}
+               />
+            ) : (
+               // SVG Icons (Check/Cross)
+               <svg
+                  viewBox="0 0 24 24"
+                  className={svgIcon}
+                  style={{ stroke: selectedColor, strokeWidth: 3 }}
+               >
+                 {selectionStyle === "check" && <polyline points="20 6 9 17 4 12" />}
+                 {selectionStyle === "cross" && (
+                   <>
+                     <line x1="18" y1="6" x2="6" y2="18" />
+                     <line x1="6" y1="6" x2="18" y2="18" />
+                   </>
+                 )}
+               </svg>
+            )}
+          </div>
+        )}
+      </div>
+
+      {children && <span>{children}</span>}
+    </label>
+  );
+};

package/src/components/Ridge/Ridge.css.ts

@@ -0,0 +1,11 @@
+import { style } from "@vanilla-extract/css";
+
+export const ridgeContainer = style({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  boxSizing: "border-box",
+  // Ensures no gaps between the ridge border and the child content
+  padding: 0,
+  overflow: "hidden",
+});

package/src/components/Ridge/Ridge.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import { ridgeContainer } from "./Ridge.css";
+import { getNeumorphicStyle } from "../../styles/neumorphicEngine";
+import type { NeumorphicProps } from "../../styles/types";
+
+interface RidgeProps extends NeumorphicProps {
+  children: React.ReactNode;
+  /**
+   * Sets the thickness of the ridge frame (padding).
+   * Can be a number (pixels) or string (e.g., "1rem").
+   * @default "10px"
+   */
+  ridgeWidth?: number | string;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export const NeuRidge: React.FC<RidgeProps> = ({
+  children,
+  // 1. Expose all Neumorphic Props with "Ridge-like" defaults
+  variant = "flat",     // Default to flat surface
+  surface = "flat",
+  color,
+  shape = "rounded",
+  elevation = 2,
+  intensity,
+  angleDeg,
+  border = true,        // Default to showing the seam
+  ridge = false,
+
+  // 2. New specific prop
+  ridgeWidth = "10px",
+
+  className,
+  style,
+}) => {
+  // Generate styles allowing full customization
+  const ridgeStyle = getNeumorphicStyle({
+    variant,
+    surface,
+    border,
+    color,
+    shape,
+    elevation,
+    intensity,
+    angleDeg,
+    ridge,
+    state: "default",
+  });
+
+  return (
+    <div
+      className={`${ridgeContainer} ${className || ""}`}
+      style={{
+        ...ridgeStyle,
+        ...style,
+        // Apply the custom width as padding
+        padding: typeof ridgeWidth === 'number' ? `${ridgeWidth}px` : ridgeWidth,
+        // Ridges are usually static structural elements
+        transition: style?.transition || "none",
+      }}
+    >
+      {children}
+    </div>
+  );
+};

package/src/components/Slider/Slider.css.ts

@@ -0,0 +1,36 @@
+import { style } from "@vanilla-extract/css";
+
+export const sliderContainer = style({
+  position: "relative",
+  width: "100%",
+  height: "32px", // Increased height for better touch target
+  display: "flex",
+  alignItems: "center",
+  touchAction: "none",
+  cursor: "pointer",
+  userSelect: "none",
+});
+
+export const sliderTrack = style({
+  width: "100%",
+  height: "12px", // Slightly thicker track for "Ridge" visibility
+  position: "relative",
+});
+
+export const sliderThumb = style({
+  position: "absolute",
+  top: "50%",
+  // We don't set 'left' here, it's set inline via React
+  width: "24px",
+  height: "24px",
+  borderRadius: "50%",
+  // Center the thumb vertically, but horizontally we handle it via calculation to prevent overflow
+  transform: "translate(-50%, -50%)",
+  cursor: "grab",
+  transition: "box-shadow 0.2s ease, transform 0.1s ease",
+  zIndex: 2,
+  ":active": {
+    cursor: "grabbing",
+    transform: "translate(-50%, -50%) scale(0.95)", // Subtle shrink on press
+  },
+});

package/src/components/Slider/Slider.tsx

@@ -0,0 +1,175 @@
+import React, { useRef, useState, useEffect } from "react";
+import { sliderContainer, sliderTrack, sliderThumb } from "./Slider.css";
+import { getNeumorphicStyle } from "../../styles/neumorphicEngine";
+import type { NeumorphicProps } from "../../styles/types";
+
+interface SliderProps extends NeumorphicProps {
+  min?: number;
+  max?: number;
+  step?: number;
+  value: number;
+  onChange: (value: number) => void;
+  className?: string;
+  style?: React.CSSProperties;
+  disabled?: boolean;
+  thumbSize?: string;
+}
+
+export const NeuSlider: React.FC<SliderProps> = ({
+  // Defaults
+  variant = "inset", // Used for the Track
+  surface = "flat",
+  color,
+  elevation = 2,
+  intensity,
+  angleDeg,
+  shape = "pill",
+  border = true,     // Slider tracks usually look best with a border
+  ridge = false,
+
+  // Logic
+  min = 0,
+  max = 100,
+  step = 1,
+  value,
+  onChange,
+  className,
+  style,
+  disabled,
+  thumbSize = "24px",
+}) => {
+  const trackRef = useRef<HTMLDivElement>(null);
+  const [isDragging, setIsDragging] = useState(false);
+
+  // Parse size to number for calculations
+  const sizeNum = parseInt(thumbSize) || 24;
+  const padding = 4; // Gap between thumb and track wall
+
+  // 1. STYLE: The Track (The Enclosure)
+  const trackStyle = getNeumorphicStyle({
+    variant,   // Use the prop (Default "inset")
+    surface,
+    shape,
+    color,
+    elevation,
+    intensity,
+    angleDeg,
+    border,    // Use the prop (Default true)
+    ridge,
+    state: "default",
+  });
+
+  // 2. STYLE: The Thumb (The Knob)
+  const thumbStyle = getNeumorphicStyle({
+    variant: "pop", // Thumbs are always popped
+    surface: "convex",
+    shape: "circle",
+    color,
+    elevation: 3,
+    intensity,
+    angleDeg,
+    state: isDragging ? "active" : "default",
+  });
+
+  // 3. LOGIC
+  const handleUpdate = (clientX: number) => {
+    if (disabled || !trackRef.current) return;
+    const rect = trackRef.current.getBoundingClientRect();
+
+    // Available width for the center of the thumb
+    const availableWidth = rect.width - (sizeNum + padding * 2);
+    const startX = rect.left + padding + sizeNum / 2;
+
+    // Calculate position relative to the "safe zone"
+    const x = clientX - startX;
+
+    let percent = x / availableWidth;
+
+    // Clamp
+    const rawValue = min + percent * (max - min);
+    const steppedValue = Math.round(rawValue / step) * step;
+    const finalValue = Math.max(min, Math.min(max, steppedValue));
+
+    if (finalValue !== value) {
+      onChange(finalValue);
+    }
+  };
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    if (disabled) return;
+    setIsDragging(true);
+    handleUpdate(e.clientX);
+  };
+
+  const handleTouchStart = (e: React.TouchEvent) => {
+    if (disabled) return;
+    setIsDragging(true);
+    handleUpdate(e.touches[0].clientX);
+  };
+
+  useEffect(() => {
+    if (!isDragging) return;
+
+    const onMove = (e: MouseEvent) => { e.preventDefault(); handleUpdate(e.clientX); };
+    const onUp = () => setIsDragging(false);
+
+    const onTouchMove = (e: TouchEvent) => { handleUpdate(e.touches[0].clientX); };
+
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+    window.addEventListener("touchmove", onTouchMove, { passive: false });
+    window.addEventListener("touchend", onUp);
+
+    return () => {
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+      window.removeEventListener("touchmove", onTouchMove);
+      window.removeEventListener("touchend", onUp);
+    };
+  }, [isDragging, min, max, step, sizeNum]);
+
+  // Visual Position
+  const percentage = Math.max(0, Math.min(100, ((value - min) / (max - min)) * 100));
+
+  return (
+    <div
+      className={`${sliderContainer} ${className || ""}`}
+      style={{
+        ...style,
+        opacity: disabled ? 0.6 : 1,
+        height: `${sizeNum + padding * 2}px`,
+      }}
+      onMouseDown={handleMouseDown}
+      onTouchStart={handleTouchStart}
+    >
+      {/* The Track acts as the Capsule Enclosure */}
+      <div
+        ref={trackRef}
+        className={sliderTrack}
+        style={{
+          ...trackStyle,
+          borderRadius: "999px",
+          height: "100%",
+          width: "100%",
+          position: "relative",
+          boxSizing: "border-box",
+        }}
+      >
+        {/* The Thumb */}
+        <div
+          className={sliderThumb}
+          style={{
+            ...thumbStyle,
+            // Dynamic Positioning using CSS Calc to stay within padding
+            left: `calc(${padding}px + (${percentage / 100} * (100% - ${sizeNum + padding * 2}px)))`,
+            top: "50%",
+            transform: "translateY(-50%)",
+            width: `${sizeNum}px`,
+            height: `${sizeNum}px`,
+            color: isDragging ? "#3b82f6" : "inherit"
+          }}
+        />
+      </div>
+    </div>
+  );
+};

package/src/components/TextInput/TextInput.tsx

@@ -0,0 +1,71 @@
+import React, { useState } from "react";
+import { baseInput } from "./TextInput.css";
+import { getNeumorphicStyle } from "../../styles/neumorphicEngine";
+import type { NeumorphicProps } from "../../styles/types";
+
+// FIX: Use InputHTMLAttributes instead of generic HTMLAttributes
+// This ensures 'placeholder', 'value', 'type', etc. are valid.
+type TextInputProps = NeumorphicProps & React.InputHTMLAttributes<HTMLInputElement>;
+
+export const NeuTextInput: React.FC<TextInputProps> = ({
+  // Default to 'inset' as that is standard for inputs
+  variant = "inset",
+  color,
+  elevation = 2,
+  intensity,
+  shape = "rounded",
+  angleDeg,
+  border = false,
+  ridge = false,
+
+  // Standard Props
+  className,
+  style,
+  disabled,
+  onFocus,
+  onBlur,
+  ...htmlProps
+}) => {
+  const [isFocused, setIsFocused] = useState(false);
+
+  // Map Focus -> Active
+  const neuStyles = getNeumorphicStyle({
+    variant,
+    color,
+    elevation,
+    intensity,
+    shape,
+    angleDeg,
+    border,
+    ridge,
+    state: isFocused ? "active" : "default",
+  });
+
+  return (
+    <input
+      className={`${baseInput} ${className || ""}`}
+      disabled={disabled}
+
+      // Events
+      onFocus={(e) => {
+        setIsFocused(true);
+        onFocus?.(e);
+      }}
+      onBlur={(e) => {
+        setIsFocused(false);
+        onBlur?.(e);
+      }}
+
+      // Styling
+      style={{
+        ...neuStyles,
+        ...style,
+        // Ensure background adapts if user overrides color
+        background: style?.background || neuStyles.background,
+        color: style?.color || "inherit",
+      }}
+
+      {...htmlProps}
+    />
+  );
+};

package/src/components/Toggle/Toggle.css.ts

@@ -0,0 +1,55 @@
+import { style } from "@vanilla-extract/css";
+
+export const switchLabel = style({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "12px",
+  cursor: "pointer",
+  userSelect: "none",
+  position: "relative",
+});
+
+export const hiddenInput = style({
+  position: "absolute",
+  opacity: 0,
+  cursor: "pointer",
+  height: 0,
+  width: 0,
+});
+
+export const switchTrack = style({
+  position: "relative",
+  transition: "all 0.3s ease",
+  display: "flex",
+  alignItems: "center",
+  boxSizing: "border-box",
+});
+
+export const switchThumb = style({
+  position: "absolute",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  transition: "transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1), box-shadow 0.3s ease",
+  zIndex: 2,
+});
+
+export const iconContainer = style({
+  position: "absolute",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "100%",
+  height: "100%",
+  pointerEvents: "none",
+});
+
+// Added missing export
+export const svgIcon = style({
+  width: "60%",
+  height: "60%",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  fill: "none",
+  transition: "all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)",
+});