@prasadj28/react-neu 1.0.29 → 1.0.30

package/dist/react-neu.css

@@ -0,0 +1 @@
+:root{--_1wjpzpi0: #e0e0e0;--_1wjpzpi1: #1e1e1e;--_1wjpzpi2: #3b82f6;--_1wjpzpi3: 145deg;--_1wjpzpi4: .15}body{margin:0;padding:0;box-sizing:border-box;background-color:var(--_1wjpzpi0);color:var(--_1wjpzpi1);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100vh}*{box-sizing:border-box}.v9ajg60{display:flex;flex-direction:column;padding:20px;box-sizing:border-box;color:var(--_1wjpzpi1);transition:all .3s ease-in-out}.dgtiea0{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;padding:0;overflow:hidden}._1gsbumb0{display:inline-flex;align-items:center;justify-content:center;font-family:inherit;font-size:1rem;font-weight:600;color:var(--_1wjpzpi1);border:none;outline:none;cursor:pointer;text-decoration:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:manipulation}.kou9xh0{position:relative;display:inline-flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;cursor:pointer;transition:transform .1s ease;isolation:isolate}.kou9xh0:active{transform:scale(.95)}.kou9xh1{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.4,0,.2,1)}.kou9xh2{width:50%;height:50%;fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;transition:all .3s ease}._199tft90{font-family:inherit;width:100%;box-sizing:border-box;cursor:text;transition:all .25s ease;border:none;outline:none}.gbo3hi0{display:inline-flex;align-items:center;gap:12px;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:1rem;position:relative}.gbo3hi1{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.gbo3hi2{position:relative;display:flex;align-items:center;justify-content:center;transition:all .3s ease;box-sizing:border-box}.gbo3hi3{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;pointer-events:none}.gbo3hi4{width:60%;height:60%;stroke-linecap:round;stroke-linejoin:round;fill:none;transition:all .3s cubic-bezier(.175,.885,.32,1.275)}._1q2jya40{display:inline-flex;align-items:center;gap:12px;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:1rem;position:relative}._1q2jya41{position:absolute;opacity:0;cursor:pointer;height:0;width:0}._1q2jya42{position:relative;display:flex;align-items:center;justify-content:center;transition:all .3s ease;box-sizing:border-box}._1q2jya43{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;pointer-events:none}._1q2jya44{width:50%;height:50%;border-radius:50%;background-color:currentColor;transition:transform .2s cubic-bezier(.175,.885,.32,1.275),opacity .2s ease}._1q2jya45{width:60%;height:60%;stroke-linecap:round;stroke-linejoin:round;fill:none;transition:all .3s cubic-bezier(.175,.885,.32,1.275)}.ir7c9x0{display:inline-flex;align-items:center;gap:12px;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}.ir7c9x1{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.ir7c9x2{position:relative;transition:all .3s ease;display:flex;align-items:center;box-sizing:border-box}.ir7c9x3{position:absolute;display:flex;align-items:center;justify-content:center;transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s ease;z-index:2}.ir7c9x4{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;pointer-events:none}.ir7c9x5{width:60%;height:60%;stroke-linecap:round;stroke-linejoin:round;fill:none;transition:all .3s cubic-bezier(.175,.885,.32,1.275)}._17y2xzl0{position:relative;width:100%;height:32px;display:flex;align-items:center;touch-action:none;cursor:pointer;-webkit-user-select:none;user-select:none}._17y2xzl1{width:100%;height:12px;position:relative}._17y2xzl2{position:absolute;top:50%;width:24px;height:24px;border-radius:50%;transform:translate(-50%,-50%);cursor:grab;transition:box-shadow .2s ease,transform .1s ease;z-index:2}._17y2xzl2:active{cursor:grabbing;transform:translate(-50%,-50%) scale(.95)}

package/dist/styles/colorUtils.d.ts

@@ -0,0 +1,3 @@
+export declare function hexToRgb(hex: string): number[];
+export declare function lighten(hex: string, amount: number): string;
+export declare function darken(hex: string, amount: number): string;

package/dist/styles/neumorphicEngine.d.ts

@@ -0,0 +1,14 @@
+import { NeumorphicProps } from './types';
+interface EngineOptions extends NeumorphicProps {
+    state?: "default" | "hover" | "active";
+}
+export declare function getNeumorphicStyle(options: EngineOptions): {
+    background: string;
+    boxShadow: string;
+    borderRadius: string;
+    border: string;
+    transform: string;
+    outline: string;
+    transition: string;
+};
+export {};

package/dist/styles/theme.css.d.ts

@@ -0,0 +1,11 @@
+export declare const neuVars: {
+    colors: {
+        background: `var(--${string})`;
+        text: `var(--${string})`;
+        primary: `var(--${string})`;
+    };
+    physics: {
+        angle: `var(--${string})`;
+        intensity: `var(--${string})`;
+    };
+};

package/dist/styles/types.d.ts

@@ -0,0 +1,31 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type NeuVariant = "flat" | "pop" | "sink" | "inset";
+export type NeuShape = "square" | "rounded" | "circle" | "pill";
+export type NeuSurface = "flat" | "convex" | "concave";
+export interface NeumorphicConfig {
+    distance: number;
+    blur: number;
+    intensity: number;
+    angleDeg: number;
+    color: string;
+}
+export interface NeumorphicProps {
+    variant?: NeuVariant;
+    surface?: NeuSurface;
+    shape?: NeuShape;
+    color?: string;
+    elevation?: number;
+    intensity?: number;
+    angleDeg?: number;
+    border?: boolean;
+    /**
+     * If true, active/focus state keeps the outer drop shadow while adding an inner shadow.
+     * Creates a "trench" or "ridge" effect where edges stay raised but center sinks.
+     * Only applies to 'pop' variant.
+     */
+    ridge?: boolean;
+}
+export type NeuComponentProps<T extends HTMLElement> = HTMLAttributes<T> & NeumorphicProps & {
+    disabled?: boolean;
+    children?: ReactNode;
+};

package/dist/utils/colorUtils.d.ts

@@ -0,0 +1,3 @@
+export declare function hexToRgb(hex: string): number[];
+export declare function lighten(hex: string, amount: number): string;
+export declare function darken(hex: string, amount: number): string;

package/dist/utils/neuEngine.d.ts

@@ -0,0 +1,13 @@
+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;
+    blur?: number;
+    intensity?: number;
+    elevation?: number;
+    border?: boolean;
+    state?: NeumorphicState;
+}

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prasadj28/react-neu",
-  "version": "1.0.29",
+  "version": "1.0.30",
   "description": "Neumorphic components for react frontend",
   "private": false,
   "type": "module",
@@ -28,15 +28,14 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
-    "./style.css": "./dist/style.css"
+    "./style.css": "./dist/react-neu.css"
   },
   "files": [
     "dist"
   ],
   "scripts": {
-    "dev": "vite --open",
-    "build": "tsup src/index.ts --format esm,cjs --dts --clean",
-    "build:vite": "LIB=true vite build",
+    "dev": "vite",
+    "build": "LIB=true vite build",
     "lint": "eslint .",
     "preview": "vite preview"
   },
@@ -45,8 +44,6 @@
     "react-dom": "^19.1.1"
   },
   "devDependencies": {
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
     "@eslint/js": "^9.36.0",
     "@types/node": "^24.6.0",
     "@types/react": "^19.1.16",
@@ -54,13 +51,17 @@
     "@vanilla-extract/css": "^1.17.4",
     "@vanilla-extract/vite-plugin": "^5.1.1",
     "@vitejs/plugin-react": "^5.0.4",
+    "ajv": "^8.17.1",
     "eslint": "^9.36.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.22",
     "globals": "^16.4.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
     "tsup": "^8.5.1",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.45.0",
-    "vite": "^7.1.7"
+    "vite": "^7.1.7",
+    "vite-plugin-dts": "^4.5.4"
   }
 }

package/dist/index.d.cts

@@ -1,165 +0,0 @@
-import React, { HTMLAttributes, ReactNode } from 'react';
-
-type NeuVariant = "flat" | "pop" | "sink" | "inset";
-type NeuShape = "square" | "rounded" | "circle" | "pill";
-type NeuSurface = "flat" | "convex" | "concave";
-interface NeumorphicProps {
-    variant?: NeuVariant;
-    surface?: NeuSurface;
-    shape?: NeuShape;
-    color?: string;
-    elevation?: number;
-    intensity?: number;
-    angleDeg?: number;
-    border?: boolean;
-    /**
-     * If true, active/focus state keeps the outer drop shadow while adding an inner shadow.
-     * Creates a "trench" or "ridge" effect where edges stay raised but center sinks.
-     * Only applies to 'pop' variant.
-     */
-    ridge?: boolean;
-}
-type NeuComponentProps<T extends HTMLElement> = HTMLAttributes<T> & NeumorphicProps & {
-    disabled?: boolean;
-    children?: ReactNode;
-};
-
-declare const NeuCard: React.FC<NeuComponentProps<HTMLDivElement>>;
-
-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;
-}
-declare const NeuRidge: React.FC<RidgeProps>;
-
-declare const NeuButton: React.FC<NeuComponentProps<HTMLButtonElement>>;
-
-type IconName = "heart" | "bookmark" | "comment" | "star" | "circle" | "square" | "triangle" | "diamond" | "user" | "gear" | "bell" | "search" | "share" | "mail" | "send" | "camera" | "mic";
-
-interface IconProps extends NeumorphicProps {
-    icon: IconName;
-    filled?: boolean;
-    fillColor?: string;
-    size?: string;
-    /** * If true, removes the background button shape entirely.
-     * You will see ONLY the icon.
-     */
-    transparent?: boolean;
-    className?: string;
-    style?: React.CSSProperties;
-    onClick?: () => void;
-}
-declare const NeuIcon: React.FC<IconProps>;
-
-type TextInputProps = NeumorphicProps & React.InputHTMLAttributes<HTMLInputElement>;
-declare const NeuTextInput: React.FC<TextInputProps>;
-
-interface CheckboxProps extends NeumorphicProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "color"> {
-    /**
-     * The visual style when checked.
-     * - 'check': Shows a checkmark.
-     * - 'cross': Shows an X.
-     * - 'fill': No icon, the button just sinks (simulates pressing/filling).
-     */
-    selectionStyle?: "check" | "cross" | "fill";
-    /**
-     * Color of the Check or Cross icon.
-     * @default "#333"
-     */
-    selectedColor?: string;
-    /**
-     * Width/Height of the checkbox.
-     * @default "26px"
-     */
-    size?: number | string;
-}
-declare const NeuCheckbox: React.FC<CheckboxProps>;
-
-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;
-}
-declare const NeuRadio: React.FC<RadioProps>;
-
-interface SwitchProps extends NeumorphicProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "color" | "shape"> {
-    /**
-     * Visual style of the thumb when active.
-     * - 'plain': Standard empty thumb.
-     * - 'check': Shows a checkmark when ON.
-     * - 'cross': Shows an X when ON.
-     */
-    selectionStyle?: "plain" | "check" | "cross";
-    /**
-     * Color of the Icon (if used).
-     * @default "#1e1e1e"
-     */
-    selectedColor?: string;
-    /**
-     * Width of the switch track. Height is automatically calculated (approx 1/2 of width).
-     * @default "50px"
-     */
-    width?: string;
-    /**
-     * Shape of the switch.
-     * - 'pill': Standard capsule.
-     * - 'square': Rectangular box.
-     */
-    shape?: "pill" | "square" | "rounded";
-}
-declare const NeuSwitch: React.FC<SwitchProps>;
-
-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;
-}
-declare const NeuSlider: React.FC<SliderProps>;
-
-interface EngineOptions extends NeumorphicProps {
-    state?: "default" | "hover" | "active";
-}
-declare function getNeumorphicStyle(options: EngineOptions): {
-    background: string;
-    boxShadow: string;
-    borderRadius: string;
-    border: string;
-    transform: string;
-    outline: string;
-    transition: string;
-};
-
-declare function hexToRgb(hex: string): number[];
-declare function lighten(hex: string, amount: number): string;
-declare function darken(hex: string, amount: number): string;
-
-export { type IconName, NeuButton, NeuCard, NeuCheckbox, type NeuComponentProps, NeuIcon, NeuRadio, NeuRidge, type NeuShape, NeuSlider, type NeuSurface, NeuSwitch, NeuTextInput, type NeuVariant, type NeumorphicProps, darken, getNeumorphicStyle, hexToRgb, lighten };