@vadimcomanescu/nadicode-design-system 2.0.0

package/dist/lib/motion.d.ts

@@ -0,0 +1,281 @@
+/**
+ * Centralized Motion variants, spring presets, and reduced motion logic.
+ * All animation components should import from here instead of defining their own.
+ */
+import { m } from "motion/react";
+export { m };
+export declare const motionSpring: {
+    readonly snappy: {
+        readonly type: "spring";
+        readonly stiffness: 400;
+        readonly damping: 28;
+        readonly mass: 0.8;
+    };
+    readonly gentle: {
+        readonly type: "spring";
+        readonly stiffness: 200;
+        readonly damping: 20;
+        readonly mass: 1;
+    };
+    readonly bouncy: {
+        readonly type: "spring";
+        readonly stiffness: 300;
+        readonly damping: 14;
+        readonly mass: 0.8;
+    };
+    readonly dramatic: {
+        readonly type: "spring";
+        readonly stiffness: 500;
+        readonly damping: 24;
+        readonly mass: 1.2;
+    };
+};
+export declare function useStyleMotion(): {
+    spring: {
+        readonly snappy: {
+            readonly type: "spring";
+            readonly stiffness: 400;
+            readonly damping: 28;
+            readonly mass: 0.8;
+        };
+        readonly gentle: {
+            readonly type: "spring";
+            readonly stiffness: 200;
+            readonly damping: 20;
+            readonly mass: 1;
+        };
+        readonly bouncy: {
+            readonly type: "spring";
+            readonly stiffness: 300;
+            readonly damping: 14;
+            readonly mass: 0.8;
+        };
+        readonly dramatic: {
+            readonly type: "spring";
+            readonly stiffness: 500;
+            readonly damping: 24;
+            readonly mass: 1.2;
+        };
+    } | {
+        readonly snappy: {
+            readonly type: "spring";
+            readonly stiffness: 300;
+            readonly damping: 16;
+            readonly mass: 0.6;
+        };
+        readonly gentle: {
+            readonly type: "spring";
+            readonly stiffness: 150;
+            readonly damping: 12;
+            readonly mass: 0.8;
+        };
+        readonly bouncy: {
+            readonly type: "spring";
+            readonly stiffness: 200;
+            readonly damping: 8;
+            readonly mass: 0.5;
+        };
+        readonly dramatic: {
+            readonly type: "spring";
+            readonly stiffness: 250;
+            readonly damping: 8;
+            readonly mass: 0.6;
+        };
+        readonly wobbly: {
+            readonly type: "spring";
+            readonly stiffness: 180;
+            readonly damping: 6;
+            readonly mass: 0.4;
+        };
+    };
+    distance: {
+        readonly sm: 16;
+        readonly md: 32;
+        readonly lg: 56;
+    } | {
+        readonly sm: 20;
+        readonly md: 40;
+        readonly lg: 72;
+    };
+    scale: {
+        readonly subtle: 0.9;
+        readonly normal: 0.8;
+    } | {
+        readonly subtle: 0.85;
+        readonly normal: 0.7;
+    };
+    blur: {
+        readonly subtle: 4;
+        readonly normal: 8;
+    } | {
+        readonly subtle: 6;
+        readonly normal: 12;
+    };
+    style: import("./ThemeProvider").Style;
+};
+export declare const fadeIn: {
+    readonly initial: {
+        readonly opacity: 0;
+    };
+    readonly animate: {
+        readonly opacity: 1;
+        readonly transition: {
+            readonly type: "spring";
+            readonly stiffness: 400;
+            readonly damping: 28;
+            readonly mass: 0.8;
+        };
+    };
+};
+export declare const fadeInUp: {
+    readonly initial: {
+        readonly opacity: 0;
+        readonly y: 32;
+        readonly filter: "blur(4px)";
+    };
+    readonly animate: {
+        readonly opacity: 1;
+        readonly y: 0;
+        readonly filter: "blur(0px)";
+        readonly transition: {
+            readonly type: "spring";
+            readonly stiffness: 400;
+            readonly damping: 28;
+            readonly mass: 0.8;
+        };
+    };
+};
+export declare const fadeInDown: {
+    readonly initial: {
+        readonly opacity: 0;
+        readonly y: -32;
+        readonly filter: "blur(4px)";
+    };
+    readonly animate: {
+        readonly opacity: 1;
+        readonly y: 0;
+        readonly filter: "blur(0px)";
+        readonly transition: {
+            readonly type: "spring";
+            readonly stiffness: 400;
+            readonly damping: 28;
+            readonly mass: 0.8;
+        };
+    };
+};
+export declare const scaleIn: {
+    readonly initial: {
+        readonly opacity: 0;
+        readonly scale: 0.85;
+        readonly filter: "blur(6px)";
+    };
+    readonly animate: {
+        readonly opacity: 1;
+        readonly scale: 1;
+        readonly filter: "blur(0px)";
+        readonly transition: {
+            readonly type: "spring";
+            readonly stiffness: 400;
+            readonly damping: 28;
+            readonly mass: 0.8;
+        };
+    };
+};
+export declare const slideInLeft: {
+    readonly initial: {
+        readonly opacity: 0;
+        readonly x: -30;
+    };
+    readonly animate: {
+        readonly opacity: 1;
+        readonly x: 0;
+        readonly transition: {
+            readonly type: "spring";
+            readonly stiffness: 200;
+            readonly damping: 20;
+            readonly mass: 1;
+        };
+    };
+};
+export declare const slideInRight: {
+    readonly initial: {
+        readonly opacity: 0;
+        readonly x: 30;
+    };
+    readonly animate: {
+        readonly opacity: 1;
+        readonly x: 0;
+        readonly transition: {
+            readonly type: "spring";
+            readonly stiffness: 200;
+            readonly damping: 20;
+            readonly mass: 1;
+        };
+    };
+};
+export declare function staggerContainer(delayMs?: number): {
+    readonly initial: {};
+    readonly animate: {
+        readonly transition: {
+            readonly staggerChildren: number;
+        };
+    };
+};
+export declare const blockStagger: {
+    readonly container: (delayMs?: number) => {
+        visible: {
+            transition: {
+                staggerChildren: number;
+            };
+        };
+        hidden: {};
+    };
+    readonly child: {
+        readonly hidden: {
+            readonly opacity: 0;
+            readonly y: 24;
+        };
+        readonly visible: {
+            readonly opacity: 1;
+            readonly y: 0;
+            readonly transition: {
+                readonly type: "spring";
+                readonly stiffness: 400;
+                readonly damping: 28;
+                readonly mass: 0.8;
+            };
+        };
+    };
+};
+export declare const heroStagger: {
+    readonly container: {
+        readonly visible: {
+            readonly transition: {
+                readonly staggerChildren: 0.1;
+                readonly delayChildren: 0.1;
+            };
+        };
+        readonly hidden: {};
+    };
+    readonly child: {
+        readonly hidden: {
+            readonly opacity: 0;
+            readonly y: 36;
+        };
+        readonly visible: {
+            readonly opacity: 1;
+            readonly y: 0;
+            readonly transition: {
+                readonly type: "spring";
+                readonly stiffness: 200;
+                readonly damping: 20;
+                readonly mass: 1;
+            };
+        };
+    };
+};
+export declare function useMotionConfig(): {
+    duration: number;
+} | {
+    duration?: undefined;
+};

package/dist/lib/motion.js

@@ -0,0 +1,4 @@
+'use client';
+export { blockStagger, fadeIn, fadeInDown, fadeInUp, heroStagger, m, motionSpring, scaleIn, slideInLeft, slideInRight, staggerContainer, useMotionConfig, useStyleMotion } from '../chunk-PD2YEH3H.js';
+import '../chunk-CRY67BIF.js';
+import '../chunk-HJC6U46F.js';

package/dist/lib/patterns.d.ts

@@ -0,0 +1,11 @@
+import type React from 'react';
+export interface Pattern {
+    id: string;
+    name?: string;
+    category: string;
+    badge?: string;
+    description?: string;
+    style: React.CSSProperties;
+    code: string;
+}
+export declare const gridPatterns: Pattern[];

package/dist/lib/patterns.js

@@ -0,0 +1,174 @@
+// src/lib/patterns.ts
+var noise = `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E")`;
+var boxshadowStars = "367px 308px #FFF, 143px 1041px #FFF, 1979px 258px #FFF, 908px 1435px #FFF, 785px 1686px #FFF, 1861px 1408px #FFF, 646px 1295px #FFF, 1561px 1125px #FFF, 1709px 1874px #FFF, 129px 364px #FFF, 435px 842px #FFF, 1121px 1073px #FFF, 1425px 904px #FFF, 280px 823px #FFF, 147px 51px #FFF, 1538px 1865px #FFF, 1350px 255px #FFF, 1493px 683px #FFF, 258px 343px #FFF, 655px 1211px #FFF, 983px 1053px #FFF, 1554px 327px #FFF, 820px 268px #FFF, 1936px 1737px #FFF, 1547px 1454px #FFF, 1860px 1003px #FFF, 843px 531px #FFF, 585px 1043px #FFF, 1667px 41px #FFF, 1837px 1776px #FFF, 1766px 1161px #FFF, 1929px 416px #FFF, 736px 380px #FFF, 923px 153px #FFF, 787px 1686px #FFF, 251px 878px #FFF, 1372px 1099px #FFF, 1442px 501px #FFF, 1999px 1327px #FFF, 863px 819px #FFF, 153px 1204px #FFF, 1480px 1634px #FFF, 401px 1668px #FFF, 1175px 1529px #FFF, 43px 1464px #FFF, 685px 1222px #FFF, 1072px 680px #FFF, 1618px 254px #FFF, 1471px 400px #FFF, 1007px 495px #FFF, 522px 528px #FFF, 879px 1323px #FFF, 1043px 1165px #FFF, 247px 1146px #FFF, 1576px 1478px #FFF, 1603px 672px #FFF, 278px 1314px #FFF, 936px 652px #FFF, 1547px 259px #FFF, 1623px 1078px #FFF, 1838px 1849px #FFF, 1854px 596px #FFF, 757px 459px #FFF, 1497px 849px #FFF, 1788px 1267px #FFF, 1857px 19px #FFF, 1461px 1653px #FFF, 1948px 1239px #FFF, 248px 804px #FFF, 1499px 494px #FFF, 982px 1841px #FFF, 1767px 539px #FFF, 661px 1959px #FFF, 791px 377px #FFF, 672px 145px #FFF, 1154px 1985px #FFF, 1829px 33px #FFF, 1944px 1980px #FFF, 655px 1502px #FFF, 1092px 1904px #FFF, 1506px 1749px #FFF, 832px 1186px #FFF, 235px 1088px #FFF, 1899px 1783px #FFF, 1716px 1418px #FFF, 484px 705px #FFF, 804px 400px #FFF, 190px 1507px #FFF, 978px 581px #FFF, 1918px 834px #FFF, 827px 1977px #FFF, 531px 1244px #FFF, 1150px 518px #FFF, 1024px 1229px #FFF, 280px 575px #FFF, 1013px 1437px #FFF, 1419px 1437px #FFF, 928px 3px #FFF, 1544px 1547px #FFF, 587px 1799px #FFF, 1973px 1953px #FFF, 523px 170px #FFF, 243px 1317px #FFF, 1962px 1593px #FFF, 696px 1562px #FFF, 321px 298px #FFF, 1955px 797px #FFF, 1542px 1081px #FFF, 694px 266px #FFF, 789px 384px #FFF, 972px 257px #FFF, 56px 1833px #FFF, 5px 938px #FFF, 219px 64px #FFF, 1871px 957px #FFF, 771px 1318px #FFF, 535px 995px #FFF, 1043px 1158px #FFF, 1516px 1250px #FFF, 1750px 419px #FFF, 1672px 1308px #FFF";
+var gridPatterns = [
+  {
+    id: "synthetic-aurora",
+    name: "Synthetic Aurora",
+    category: "mesh",
+    badge: "2026",
+    description: "Deep, shifting mesh gradient with neon accents.",
+    style: {
+      backgroundColor: "rgb(var(--color-background))",
+      backgroundImage: `
+        ${noise},
+        radial-gradient(at 0% 0%, rgb(var(--chart-1) / 0.12) 0px, transparent 50%),
+        radial-gradient(at 100% 0%, rgb(var(--chart-2) / 0.12) 0px, transparent 50%),
+        radial-gradient(at 100% 100%, rgb(var(--chart-5) / 0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgb(var(--chart-4) / 0.12) 0px, transparent 50%)
+      `
+    },
+    code: `<div className="w-full min-h-dvh" style={{
+      backgroundColor: "rgb(var(--color-background))",
+      backgroundImage: \`
+        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E"),
+        radial-gradient(at 0% 0%, rgba(var(--chart-1), 0.12) 0px, transparent 50%),
+        radial-gradient(at 100% 0%, rgba(var(--chart-2), 0.12) 0px, transparent 50%),
+        radial-gradient(at 100% 100%, rgba(var(--chart-5), 0.12) 0px, transparent 50%),
+        radial-gradient(at 0% 100%, rgba(var(--chart-4), 0.12) 0px, transparent 50%)
+      \`
+    }} />`
+  },
+  {
+    id: "holographic-pearl",
+    name: "Holographic Pearl",
+    category: "mesh",
+    badge: "2026",
+    description: "Subtle, iridescent mesh for light mode.",
+    style: {
+      backgroundColor: "rgb(var(--color-background))",
+      backgroundImage: `
+        ${noise},
+        radial-gradient(circle at 50% 50%, rgb(var(--color-surface) / 1) 0%, transparent 100%),
+        radial-gradient(at 0% 0%, rgb(var(--chart-2) / 0.1) 0px, transparent 40%),
+        radial-gradient(at 50% 100%, rgb(var(--chart-3) / 0.1) 0px, transparent 40%),
+        radial-gradient(at 100% 0%, rgb(var(--chart-4) / 0.1) 0px, transparent 40%)
+      `
+    },
+    code: `<div className="w-full min-h-dvh" style={{
+      backgroundColor: "rgb(var(--color-background))",
+      backgroundImage: \`
+        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E"),
+        radial-gradient(circle at 50% 50%, rgba(var(--color-surface), 1) 0%, transparent 100%),
+        radial-gradient(at 0% 0%, rgba(var(--chart-2), 0.1) 0px, transparent 40%),
+        radial-gradient(at 50% 100%, rgba(var(--chart-3), 0.1) 0px, transparent 40%),
+        radial-gradient(at 100% 0%, rgba(var(--chart-4), 0.1) 0px, transparent 40%)
+      \`
+    }} />`
+  },
+  {
+    id: "neon-nebula",
+    name: "Neon Nebula",
+    category: "mesh",
+    badge: "2026",
+    description: "Centralized intense glow.",
+    style: {
+      backgroundColor: "rgb(var(--color-background))",
+      backgroundImage: `
+            ${noise},
+            radial-gradient(circle at 50% 50%, rgb(var(--chart-1) / 0.15) 0%, transparent 60%),
+            radial-gradient(circle at 80% 20%, rgb(var(--chart-5) / 0.15) 0%, transparent 40%)
+          `
+    },
+    code: `<div className="w-full min-h-dvh" style={{
+        backgroundColor: "rgb(var(--color-background))",
+        backgroundImage: \`
+          url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E"),
+          radial-gradient(circle at 50% 50%, rgba(var(--chart-1), 0.15) 0%, transparent 60%),
+          radial-gradient(circle at 80% 20%, rgba(var(--chart-5), 0.15) 0%, transparent 40%)
+        \`
+      }} />`
+  },
+  {
+    id: "cyber-grid-2026",
+    name: "Cyber Grid 2026",
+    category: "geometric",
+    badge: "Structure",
+    style: {
+      backgroundColor: "rgb(var(--color-background))",
+      backgroundImage: `
+            linear-gradient(rgb(var(--color-border) / 0.1) 1px, transparent 1px),
+            linear-gradient(90deg, rgb(var(--color-border) / 0.1) 1px, transparent 1px),
+            radial-gradient(circle at 50% 50%, rgb(var(--color-background) / 0) 0%, rgb(var(--color-background) / 1) 100%)
+          `,
+      backgroundSize: "40px 40px, 40px 40px, 100% 100%"
+    },
+    code: `<div className="w-full min-h-dvh" style={{
+       backgroundColor: "rgb(var(--color-background))",
+       backgroundImage: \`
+         linear-gradient(rgba(var(--color-border), 0.1) 1px, transparent 1px),
+         linear-gradient(90deg, rgba(var(--color-border), 0.1) 1px, transparent 1px),
+         radial-gradient(circle at 50% 50%, rgba(var(--color-background), 0) 0%, rgba(var(--color-background), 1) 100%)
+       \`,
+       backgroundSize: "40px 40px, 40px 40px, 100% 100%"
+      }} />`
+  },
+  {
+    id: "porcelain-network",
+    name: "Porcelain Network",
+    category: "mesh",
+    badge: "Light",
+    description: "Subtle, clean white pattern with tech feel.",
+    style: {
+      backgroundColor: "rgb(var(--color-surface))",
+      backgroundImage: `
+             radial-gradient(at 100% 0%, rgb(var(--color-secondary) / 0.5) 0px, transparent 50%),
+             radial-gradient(at 0% 100%, rgb(var(--color-border) / 0.5) 0px, transparent 50%)
+          `
+    },
+    code: `<div className="w-full min-h-dvh bg-surface relative overflow-hidden">
+          <div className="absolute inset-0 opacity-30" 
+              style={{
+                  backgroundImage: "radial-gradient(#000 1px, transparent 1px)",
+                  backgroundSize: "32px 32px"
+              }} 
+          />
+      </div>`
+  },
+  {
+    id: "galactic-night",
+    name: "Galactic Night",
+    category: "animated",
+    badge: "2026",
+    description: "Interactive drifting starfield (CSS Box Shadow).",
+    style: {
+      backgroundColor: "rgb(var(--color-background))",
+      backgroundImage: "radial-gradient(ellipse at bottom, rgb(var(--color-surface)), rgb(var(--color-background)))"
+    },
+    code: `<div className="w-full min-h-dvh bg-background relative overflow-hidden">
+        <style>{\`
+          @keyframes animStar {
+            from { transform: translateY(0px); }
+            to { transform: translateY(-2000px); }
+          }
+        \`}</style>
+        <div style={{
+            width: '1px',
+            height: '1px',
+            background: 'transparent',
+            boxShadow: '${boxshadowStars}',
+            animation: 'animStar 50s linear infinite'
+        }} />
+      </div>`
+  },
+  {
+    id: "neural-noise",
+    name: "Neural Noise",
+    category: "animated",
+    badge: "2026",
+    description: "Animated SVG noise overlay for organic feel.",
+    style: {
+      backgroundColor: "rgb(var(--color-background))"
+    },
+    code: `<div className="w-full min-h-dvh relative bg-background">
+      <svg className="opacity-20 fixed inset-0 w-full h-full pointer-events-none">
+        <filter id="noise">
+            <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" stitchTiles="stitch" />
+        </filter>
+        <rect width="100%" height="100%" filter="url(#noise)" />
+      </svg>
+    </div>`
+  }
+];
+
+export { gridPatterns };

package/dist/lib/react-utils.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+/**
+ * Check whether `children` contains an element whose component has
+ * the given `displayName`. Used by Dialog/Drawer/Sheet/AnimatedDialog
+ * to detect whether Title or Description children were provided (for a11y).
+ *
+ * IMPORTANT: Wrapper components must set `.displayName` for this to work.
+ * Radix primitives have displayName (e.g. "DialogTitle"), but our wrappers
+ * (e.g. SheetTitle) do not inherit it. Each wrapper must explicitly set
+ * `MyComponent.displayName = "MyComponent"` after its definition.
+ */
+export declare function hasChildWithDisplayName(children: React.ReactNode, displayName: string): boolean;

package/dist/lib/react-utils.js

@@ -0,0 +1 @@
+export { hasChildWithDisplayName } from '../chunk-6FOHUNXR.js';

package/dist/lib/shader-presets.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Shader preset registry for the Nadicode Design System.
+ *
+ * Maps 21 Paper Design shaders x 3 themes x 4 intents to hardcoded color/param configs.
+ * Colors are static hex values per preset (no runtime CSS var reads) for SSR safety.
+ *
+ * Excluded shaders (require `image` prop): FlutedGlass, Water, ImageDithering,
+ * HalftoneDots, HalftoneCmyk, PaperTexture, Heatmap.
+ */
+export type ShaderName = 'meshGradient' | 'smokeRing' | 'neuroNoise' | 'dotOrbit' | 'dotGrid' | 'simplexNoise' | 'metaballs' | 'waves' | 'perlinNoise' | 'voronoi' | 'warp' | 'godRays' | 'spiral' | 'swirl' | 'dithering' | 'grainGradient' | 'pulsingBorder' | 'colorPanels' | 'staticMeshGradient' | 'staticRadialGradient' | 'liquidMetal';
+export type ThemeKey = 'arctic-light' | 'arctic-dark' | 'bloom';
+export type ShaderIntent = 'hero' | 'section' | 'ambient' | 'card';
+export type ShaderPresetConfig = Record<string, unknown>;
+export declare const SHADER_NAMES: readonly ShaderName[];
+export declare function getShaderPreset(shader: ShaderName, theme: ThemeKey, intent?: ShaderIntent): ShaderPresetConfig;

package/dist/lib/shader-presets.js

@@ -0,0 +1 @@
+export { SHADER_NAMES, getShaderPreset } from '../chunk-DF47R6LN.js';