@vadimcomanescu/nadicode-design-system 4.0.11 → 5.0.0

package/dist/{chunk-2S4727W3.js → chunk-7AUNUDHM.js}

@@ -1,41 +1,45 @@
-import { SidebarProvider, Sidebar, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarGroupContent, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarMenuAction } from './chunk-FF3XUIZO.js';
-import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator } from './chunk-CQEUNASC.js';
+import { SidebarProvider, Sidebar, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarGroupContent, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarMenuAction } from './chunk-4DWRAIM2.js';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator } from './chunk-ETS5O4ZQ.js';
 import { Empty, EmptyDescription } from './chunk-4TF4QFIM.js';
-import { UsersIcon } from './chunk-WUO7OONN.js';
 import { Trash2Icon } from './chunk-S4GKGKON.js';
+import { UsersIcon } from './chunk-WUO7OONN.js';
 import { StarIcon } from './chunk-ELKIUARM.js';
 import { SettingsIcon } from './chunk-OITJWGFV.js';
 import { LayoutDashboardIcon } from './chunk-O74AEVHW.js';
-import { HomeIcon } from './chunk-IQEBXXB5.js';
 import { FolderIcon } from './chunk-I3TH7PIB.js';
+import { HomeIcon } from './chunk-IQEBXXB5.js';
 import { EllipsisIcon } from './chunk-5ESF6N36.js';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var defaultNavItems = [
-  { name: "Home", icon: /* @__PURE__ */ jsx(HomeIcon, { size: 16 }), isActive: true },
-  { name: "Dashboard", icon: /* @__PURE__ */ jsx(LayoutDashboardIcon, { size: 16 }) },
-  { name: "Team", icon: /* @__PURE__ */ jsx(UsersIcon, { size: 16 }) },
-  { name: "Settings", icon: /* @__PURE__ */ jsx(SettingsIcon, { size: 16 }) }
+  { name: "Home", icon: "HomeIcon", isActive: true },
+  { name: "Dashboard", icon: "LayoutDashboardIcon", isActive: null },
+  { name: "Team", icon: "UsersIcon", isActive: null },
+  { name: "Settings", icon: "SettingsIcon", isActive: null }
 ];
 var defaultProjects = [
   { name: "Design Engineering", url: "#" },
   { name: "Sales & Marketing", url: "#" },
   { name: "Travel", url: "#" }
 ];
-function DirectoryBlock({
-  navItems = defaultNavItems,
-  projects = defaultProjects,
-  className
-}) {
+var NAV_ICONS = {
+  HomeIcon: /* @__PURE__ */ jsx(HomeIcon, { size: 16 }),
+  LayoutDashboardIcon: /* @__PURE__ */ jsx(LayoutDashboardIcon, { size: 16 }),
+  UsersIcon: /* @__PURE__ */ jsx(UsersIcon, { size: 16 }),
+  SettingsIcon: /* @__PURE__ */ jsx(SettingsIcon, { size: 16 })
+};
+function DirectoryBlock({ props }) {
+  const navItems = props.navItems ?? defaultNavItems;
+  const projects = props.projects ?? defaultProjects;
   const t = useTranslations("blocks.directoryBlock");
-  return /* @__PURE__ */ jsxs("div", { className: className ?? "h-[500px] border border-border rounded-lg overflow-hidden flex bg-surface text-text-primary", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "h-[500px] border border-border rounded-lg overflow-hidden flex bg-surface text-text-primary", children: [
     /* @__PURE__ */ jsx(SidebarProvider, { className: "h-full", children: /* @__PURE__ */ jsx(Sidebar, { collapsible: "none", className: "h-full border-r border-border", children: /* @__PURE__ */ jsxs(SidebarContent, { children: [
       /* @__PURE__ */ jsxs(SidebarGroup, { children: [
         /* @__PURE__ */ jsx(SidebarGroupLabel, { children: t("platform") }),
-        /* @__PURE__ */ jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsx(SidebarMenu, { children: navItems.map((item) => /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(SidebarMenuButton, { isActive: item.isActive, children: [
-          item.icon,
+        /* @__PURE__ */ jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsx(SidebarMenu, { children: navItems.map((item) => /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(SidebarMenuButton, { isActive: item.isActive ?? false, children: [
+          NAV_ICONS[item.icon] ?? /* @__PURE__ */ jsx("span", { children: item.icon }),
           /* @__PURE__ */ jsx("span", { children: item.name })
         ] }) }, item.name)) }) })
       ] }),

package/dist/chunk-7IVXTSZK.js

@@ -0,0 +1,185 @@
+import { useMotionConfig, m, motionSpring } from './chunk-PD2YEH3H.js';
+import { ChevronRightIcon } from './chunk-G24VV5NO.js';
+import { cn } from './chunk-QYZT24TS.js';
+import * as React from 'react';
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+import { AnimatePresence } from 'motion/react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function getVisibleTreeItems(container) {
+  return Array.from(container.querySelectorAll('[role="treeitem"]'));
+}
+function TreeView({ data, onSelect, className, ref, ...props }) {
+  const [selectedId, setSelectedId] = React.useState(null);
+  const treeRef = React.useRef(null);
+  const handleSelect = React.useCallback(
+    (node) => {
+      setSelectedId(node.id);
+      onSelect?.(node);
+    },
+    [onSelect]
+  );
+  const handleTreeKeyDown = React.useCallback(
+    (e) => {
+      if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
+      const container = treeRef.current;
+      if (!container) return;
+      const items = getVisibleTreeItems(container);
+      const activeEl = document.activeElement;
+      const idx = items.indexOf(activeEl);
+      if (idx === -1) return;
+      e.preventDefault();
+      const next = e.key === "ArrowDown" ? idx + 1 : idx - 1;
+      if (next >= 0 && next < items.length) {
+        items[next].focus();
+      }
+    },
+    []
+  );
+  const setRefs = React.useCallback(
+    (el) => {
+      treeRef.current = el;
+      if (typeof ref === "function") ref(el);
+      else if (ref) ref.current = el;
+    },
+    [ref]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: setRefs,
+      role: "tree",
+      className: cn("text-sm", className),
+      onKeyDown: handleTreeKeyDown,
+      ...props,
+      children: data.map((node, index) => /* @__PURE__ */ jsx(
+        TreeItem,
+        {
+          node,
+          depth: 0,
+          selectedId,
+          onSelect: handleSelect,
+          siblingCount: data.length,
+          positionInSet: index + 1
+        },
+        node.id
+      ))
+    }
+  );
+}
+function TreeItem({ node, depth, selectedId, onSelect, siblingCount, positionInSet }) {
+  const [open, setOpen] = React.useState(false);
+  const motionConfig = useMotionConfig();
+  const hasChildren = node.children && node.children.length > 0;
+  const isSelected = selectedId === node.id;
+  const handleKeyDown = React.useCallback(
+    (e) => {
+      switch (e.key) {
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          if (hasChildren) {
+            setOpen((prev) => !prev);
+          }
+          onSelect(node);
+          break;
+        case "ArrowRight":
+          if (hasChildren && !open) {
+            e.preventDefault();
+            setOpen(true);
+          }
+          break;
+        case "ArrowLeft":
+          if (hasChildren && open) {
+            e.preventDefault();
+            setOpen(false);
+          }
+          break;
+      }
+    },
+    [hasChildren, open, node, onSelect]
+  );
+  if (!hasChildren) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "treeitem",
+        tabIndex: 0,
+        "aria-selected": isSelected,
+        "aria-level": depth + 1,
+        "aria-setsize": siblingCount,
+        "aria-posinset": positionInSet,
+        className: cn(
+          "flex items-center gap-2 rounded-md px-2 py-1.5 cursor-pointer transition-colors duration-fast ease-out-cubic hover:bg-surface-hover focus:outline-none focus:ring-1 focus:ring-accent",
+          isSelected && "bg-accent/10 text-accent"
+        ),
+        style: { paddingLeft: `${depth * 16 + 8}px` },
+        onClick: () => onSelect(node),
+        onKeyDown: handleKeyDown,
+        children: [
+          node.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: node.icon }),
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: node.label })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(CollapsiblePrimitive.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(CollapsiblePrimitive.CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "treeitem",
+        tabIndex: 0,
+        "aria-expanded": open,
+        "aria-selected": isSelected,
+        "aria-level": depth + 1,
+        "aria-setsize": siblingCount,
+        "aria-posinset": positionInSet,
+        className: cn(
+          "flex items-center gap-2 rounded-md px-2 py-1.5 cursor-pointer transition-colors duration-fast ease-out-cubic hover:bg-surface-hover focus:outline-none focus:ring-1 focus:ring-accent",
+          isSelected && "bg-accent/10 text-accent"
+        ),
+        style: { paddingLeft: `${depth * 16 + 8}px` },
+        onClick: () => onSelect(node),
+        onKeyDown: handleKeyDown,
+        children: [
+          /* @__PURE__ */ jsx(
+            m.span,
+            {
+              className: "shrink-0",
+              animate: { rotate: open ? 90 : 0 },
+              transition: { ...motionSpring.snappy, ...motionConfig },
+              children: /* @__PURE__ */ jsx(ChevronRightIcon, { size: 16, className: "text-text-tertiary" })
+            }
+          ),
+          node.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: node.icon }),
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: node.label })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: !!open && /* @__PURE__ */ jsx(CollapsiblePrimitive.CollapsibleContent, { forceMount: true, asChild: true, children: /* @__PURE__ */ jsx(
+      m.div,
+      {
+        role: "group",
+        initial: { height: 0, opacity: 0 },
+        animate: { height: "auto", opacity: 1 },
+        exit: { height: 0, opacity: 0 },
+        transition: { ...motionSpring.snappy, ...motionConfig },
+        style: { overflow: "hidden" },
+        children: node.children?.map((child, index) => /* @__PURE__ */ jsx(
+          TreeItem,
+          {
+            node: child,
+            depth: depth + 1,
+            selectedId,
+            onSelect,
+            siblingCount: node.children.length,
+            positionInSet: index + 1
+          },
+          child.id
+        ))
+      }
+    ) }) })
+  ] });
+}
+
+export { TreeView };

package/dist/{chunk-UGIHLU2V.js → chunk-7OOO22KB.js}

@@ -1,8 +1,8 @@
 import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './chunk-7UY24UWL.js';
-import { Alert, AlertDescription } from './chunk-6CLSVCWP.js';
 import { Button } from './chunk-7KIDDF3I.js';
 import { useMotionConfig, m, scaleIn, motionSpring } from './chunk-PD2YEH3H.js';
 import { LockIcon } from './chunk-RYOTIXZO.js';
+import { Alert, AlertDescription } from './chunk-6CLSVCWP.js';
 import { cn } from './chunk-QYZT24TS.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
@@ -11,17 +11,12 @@ var reasonMessages = {
   suspicious_activity: () => "We detected unusual activity on your account.",
   admin: () => "Your account has been locked by an administrator."
 };
-function AccountLockedBlock({
-  className,
-  reason = "too_many_attempts",
-  unlockMinutes,
-  onContactSupport,
-  onBackToLogin,
-  title = "Account locked",
-  description = "Your account has been temporarily locked for security"
-}) {
+function AccountLockedBlock({ props, emit }) {
   const motionConfig = useMotionConfig();
-  return /* @__PURE__ */ jsx(m.div, { ...scaleIn, className: cn("w-full max-w-md mx-auto", className), children: /* @__PURE__ */ jsxs(Card, { children: [
+  const reason = props.reason ?? "too_many_attempts";
+  const title = props.title ?? "Account locked";
+  const description = props.description ?? "Your account has been temporarily locked for security";
+  return /* @__PURE__ */ jsx(m.div, { ...scaleIn, className: cn("w-full max-w-md mx-auto"), children: /* @__PURE__ */ jsxs(Card, { children: [
     /* @__PURE__ */ jsxs(CardHeader, { className: "text-center", children: [
       /* @__PURE__ */ jsx(
         m.div,
@@ -37,16 +32,16 @@ function AccountLockedBlock({
       /* @__PURE__ */ jsx(CardDescription, { children: description })
     ] }),
     /* @__PURE__ */ jsxs(CardContent, { className: "grid gap-4", children: [
-      /* @__PURE__ */ jsx(Alert, { variant: "warning", children: /* @__PURE__ */ jsx(AlertDescription, { children: reasonMessages[reason](unlockMinutes) }) }),
-      reason === "too_many_attempts" && unlockMinutes && /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-text-tertiary", children: "Your account will be automatically unlocked after the waiting period." }),
+      /* @__PURE__ */ jsx(Alert, { variant: "warning", children: /* @__PURE__ */ jsx(AlertDescription, { children: reasonMessages[reason](props.unlockMinutes) }) }),
+      reason === "too_many_attempts" && props.unlockMinutes && /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-text-tertiary", children: "Your account will be automatically unlocked after the waiting period." }),
       (reason === "suspicious_activity" || reason === "admin") && /* @__PURE__ */ jsx("p", { className: "text-center text-sm text-text-tertiary", children: "Please contact support to regain access to your account." }),
-      /* @__PURE__ */ jsx(Button, { variant: "outline", className: "w-full", onClick: onContactSupport, children: "Contact support" })
+      /* @__PURE__ */ jsx(Button, { variant: "outline", className: "w-full", onClick: () => emit("contactSupport"), children: "Contact support" })
     ] }),
     /* @__PURE__ */ jsx(CardFooter, { className: "justify-center", children: /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
-        onClick: onBackToLogin,
+        onClick: () => emit("backToLogin"),
         className: "text-sm text-text-tertiary hover:text-text-primary transition-colors",
         children: "Back to login"
       }

package/dist/chunk-7PTI46BS.js

@@ -0,0 +1,119 @@
+import { Badge } from './chunk-S4JAHKOP.js';
+import { cn } from './chunk-QYZT24TS.js';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var sourceCitationVariants = cva(
+  "",
+  {
+    variants: {
+      size: {
+        inline: "inline-flex items-center gap-1.5",
+        default: "space-y-2"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+function scoreVariant(score) {
+  if (score > 0.8) return "accent";
+  if (score > 0.5) return "secondary";
+  return "outline";
+}
+function SourceCitation({ className, size, sources, ref, ...props }) {
+  const [expandedId, setExpandedId] = React.useState(null);
+  const sourcePanelBaseId = React.useId();
+  if (size === "inline") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(sourceCitationVariants({ size }), className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-xs text-text-tertiary", children: [
+            sources.length,
+            " source",
+            sources.length !== 1 ? "s" : ""
+          ] }),
+          sources.slice(0, 3).map((s) => /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "text-[10px] px-1.5 py-0", children: s.title }, s.id)),
+          sources.length > 3 && /* @__PURE__ */ jsxs("span", { className: "text-xs text-text-tertiary", children: [
+            "+",
+            sources.length - 3
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(sourceCitationVariants({ size }), className),
+      ...props,
+      children: sources.map((source, index) => {
+        const isExpanded = expandedId === source.id;
+        const snippetId = `${sourcePanelBaseId}-snippet-${index}`;
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "glass-panel rounded-lg p-4 space-y-1.5",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+                /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 min-w-0", children: source.url ? /* @__PURE__ */ jsx(
+                  "a",
+                  {
+                    href: source.url,
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    className: "text-sm font-medium text-accent hover:underline truncate",
+                    children: source.title
+                  }
+                ) : /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-text-primary truncate", children: source.title }) }),
+                source.score != null && /* @__PURE__ */ jsx(
+                  Badge,
+                  {
+                    variant: scoreVariant(source.score),
+                    className: "text-[10px] px-1.5 py-0 shrink-0",
+                    children: source.score.toFixed(2)
+                  }
+                )
+              ] }),
+              source.snippet && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setExpandedId(isExpanded ? null : source.id),
+                    "aria-expanded": isExpanded,
+                    "aria-controls": snippetId,
+                    className: "text-xs text-text-tertiary hover:text-text-secondary transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent rounded-sm",
+                    children: isExpanded ? "Hide snippet" : "Show snippet"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    id: snippetId,
+                    className: cn(
+                      "text-xs text-text-secondary leading-relaxed border-l-2 border-border pl-2",
+                      !isExpanded && "hidden"
+                    ),
+                    "aria-hidden": !isExpanded,
+                    children: source.snippet
+                  }
+                )
+              ] })
+            ]
+          },
+          source.id
+        );
+      })
+    }
+  );
+}
+
+export { SourceCitation, sourceCitationVariants };

package/dist/chunk-7SOMHO2L.js

@@ -0,0 +1,181 @@
+import { z } from 'zod';
+
+// src/catalog/definitions/effects.ts
+var effectsDefinitions = {
+  AnimatedBackground: {
+    props: z.object({
+      className: z.string().nullable()
+    }),
+    description: "Full-bleed animated background with layered gradient orbs, perspective grid overlay, and noise texture. Uses CSS blob animations for a lava-lamp aurora effect.",
+    example: { className: null }
+  },
+  ConfettiBurst: {
+    props: z.object({
+      count: z.number().nullable(),
+      spread: z.number().nullable(),
+      trigger: z.boolean().nullable(),
+      className: z.string().nullable()
+    }),
+    description: "Burst of animated confetti particles. Trigger controls when the burst fires. Respects prefers-reduced-motion.",
+    example: { count: 50, spread: 120, trigger: true, className: null }
+  },
+  InfiniteSlider: {
+    props: z.object({
+      gap: z.number().nullable(),
+      speed: z.number().nullable(),
+      direction: z.enum(["horizontal", "vertical"]).nullable(),
+      reverse: z.boolean().nullable(),
+      className: z.string().nullable()
+    }),
+    slots: ["default"],
+    description: "Infinitely scrolling carousel that duplicates children and animates them horizontally or vertically. speed is the CSS animation duration in seconds (lower = faster). Gap is in pixels.",
+    example: { gap: 16, speed: 30, direction: "horizontal", reverse: false, className: null }
+  },
+  MeteorShower: {
+    props: z.object({
+      count: z.number().nullable(),
+      className: z.string().nullable()
+    }),
+    description: "Decorative meteor-shower overlay. Renders count randomised diagonal streaks with staggered animation. Positioned absolute; place inside a relative container.",
+    example: { count: 20, className: null }
+  },
+  MouseGlow: {
+    props: z.object({
+      dotColor: z.string().nullable(),
+      overlayColor: z.string().nullable(),
+      gap: z.number().nullable(),
+      maskRadius: z.number().nullable(),
+      overlayRadius: z.number().nullable(),
+      className: z.string().nullable()
+    }),
+    description: "Full-viewport dot-grid overlay that follows the mouse cursor via a radial mask. Portals to document.body. dotColor and overlayColor accept any CSS color string. gap controls dot grid spacing in pixels.",
+    example: { dotColor: "rgba(255,255,255,0.3)", overlayColor: "rgba(29,78,216,0.15)", gap: 24, maskRadius: 200, overlayRadius: 400, className: null }
+  },
+  MouseSpotlight: {
+    props: z.object({
+      color: z.string().nullable(),
+      size: z.number().nullable(),
+      className: z.string().nullable()
+    }),
+    slots: ["default"],
+    description: "Relative-positioned wrapper that renders a radial gradient spotlight following the mouse cursor. Uses Framer Motion for smooth tracking. Respects prefers-reduced-motion. Wrap interactive cards or containers to add a hover-reveal spotlight effect.",
+    example: { color: "rgba(255,255,255,0.06)", size: 250, className: null }
+  },
+  ScrollFadeIn: {
+    props: z.object({
+      delay: z.number().nullable(),
+      direction: z.enum(["up", "down", "left", "right"]).nullable(),
+      distance: z.number().nullable(),
+      className: z.string().nullable()
+    }),
+    slots: ["default"],
+    description: "Scroll-triggered fade-in wrapper. Children animate from the given direction with optional delay (ms) and distance (px). Fires once when the element enters the viewport. Respects prefers-reduced-motion.",
+    example: { delay: 200, direction: "up", distance: 24, className: null }
+  },
+  ShaderBackground: {
+    props: z.object({
+      shader: z.enum([
+        "meshGradient",
+        "smokeRing",
+        "neuroNoise",
+        "dotOrbit",
+        "dotGrid",
+        "simplexNoise",
+        "metaballs",
+        "waves",
+        "perlinNoise",
+        "voronoi",
+        "warp",
+        "godRays",
+        "spiral",
+        "swirl",
+        "dithering",
+        "grainGradient",
+        "pulsingBorder",
+        "colorPanels",
+        "staticMeshGradient",
+        "staticRadialGradient",
+        "liquidMetal"
+      ]),
+      intent: z.enum(["hero", "section", "ambient", "card"]).nullable(),
+      opacity: z.number().nullable(),
+      static: z.boolean().nullable(),
+      className: z.string().nullable(),
+      overrides: z.record(z.string(), z.unknown()).nullable()
+    }),
+    slots: ["default"],
+    description: "GPU-accelerated shader background powered by @paper-design/shaders-react. intent controls animation speed and color palette complexity. opacity layers the shader over the container. Set static to freeze animation. overrides pass per-instance shader parameter tweaks. Children render above the shader layer.",
+    example: { shader: "meshGradient", intent: "hero", opacity: 0.3, static: false, className: null, overrides: null }
+  },
+  MagneticElement: {
+    props: z.object({
+      strength: z.number().nullable(),
+      className: z.string().nullable()
+    }),
+    slots: ["default"],
+    description: "Wrapper that pulls children toward the cursor with spring physics. strength (0-1) controls pull intensity. Respects prefers-reduced-motion.",
+    example: { strength: 0.5, className: null }
+  },
+  MovingBorder: {
+    props: z.object({
+      duration: z.string().nullable(),
+      borderRadius: z.string().nullable(),
+      className: z.string().nullable()
+    }),
+    slots: ["default"],
+    description: 'Animated conic-gradient border that spins around children. duration is a CSS time value (e.g. "3s"). borderRadius controls corner rounding.',
+    example: { duration: "3s", borderRadius: "0.75rem", className: null }
+  },
+  ProgressiveBlur: {
+    props: z.object({
+      direction: z.enum(["left", "right", "top", "bottom"]).nullable(),
+      blurIntensity: z.number().nullable(),
+      className: z.string().nullable()
+    }),
+    description: "Positioned blur overlay that fades content in one direction. direction controls gradient angle. blurIntensity scales the backdrop blur strength. Absolutely positioned; place inside a relative container.",
+    example: { direction: "bottom", blurIntensity: 8, className: null }
+  },
+  SpringHover: {
+    props: z.object({
+      hoverScale: z.number().nullable(),
+      pressScale: z.number().nullable(),
+      disabled: z.boolean().nullable(),
+      className: z.string().nullable()
+    }),
+    slots: ["default"],
+    description: "Spring-physics hover/tap wrapper. hoverScale and pressScale control transform on interaction. disabled bypasses animation and renders a plain div. Style-aware (bloom adds subtle rotation).",
+    example: { hoverScale: 1.05, pressScale: 0.97, disabled: false, className: null }
+  },
+  StaggerChildren: {
+    props: z.object({
+      staggerMs: z.number().nullable(),
+      direction: z.enum(["up", "down", "left", "right"]).nullable(),
+      distance: z.number().nullable(),
+      once: z.boolean().nullable(),
+      className: z.string().nullable()
+    }),
+    slots: ["default"],
+    description: "Scroll-triggered stagger wrapper. Each direct child animates in sequentially with staggerMs delay between them. Respects prefers-reduced-motion.",
+    example: { staggerMs: 100, direction: "up", distance: 20, once: true, className: null }
+  },
+  StaggeredEntrance: {
+    props: z.object({
+      delayMs: z.number().nullable(),
+      className: z.string().nullable()
+    }),
+    slots: ["default"],
+    description: "CSS-only staggered entrance animation. Each direct child gets an incremental animation-delay based on delayMs. Uses fade-in-up keyframe with fill-mode backwards.",
+    example: { delayMs: 80, className: null }
+  },
+  TiltCard: {
+    props: z.object({
+      maxTilt: z.number().nullable(),
+      className: z.string().nullable()
+    }),
+    slots: ["default"],
+    description: "Perspective tilt card that rotates toward the cursor on hover. maxTilt caps rotation degrees (clamped to 8). Respects prefers-reduced-motion.",
+    example: { maxTilt: 6, className: null }
+  }
+};
+
+export { effectsDefinitions };

package/dist/chunk-7SRNVMBY.js

@@ -0,0 +1,72 @@
+import { InputOTP, InputOTPGroup, InputOTPSlot } from './chunk-WN5ONOHC.js';
+import { Separator } from './chunk-CUZJIDU7.js';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './chunk-7UY24UWL.js';
+import { Button } from './chunk-7KIDDF3I.js';
+import { m, scaleIn } from './chunk-PD2YEH3H.js';
+import { bezier } from './chunk-CRY67BIF.js';
+import { Alert, AlertDescription } from './chunk-6CLSVCWP.js';
+import { cn } from './chunk-QYZT24TS.js';
+import * as React from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var SHAKE_TRANSITION = { duration: 0.3, ease: bezier["out-cubic"] };
+function OTPBlock({ props, emit }) {
+  const title = props.title ?? "One-Time Password";
+  const description = props.description ?? "Please enter the one-time password sent to your phone.";
+  const maxLength = props.maxLength ?? 6;
+  const buttonText = props.buttonText ?? "Verify";
+  const error = props.error ?? null;
+  const backupCodeLink = props.backupCodeLink ?? null;
+  const [otp, setOtp] = React.useState("");
+  const [shake, setShake] = React.useState(false);
+  React.useEffect(() => {
+    if (error) {
+      setShake(true);
+      setOtp("");
+      const timeout = setTimeout(() => setShake(false), 300);
+      return () => clearTimeout(timeout);
+    }
+  }, [error]);
+  return /* @__PURE__ */ jsx(m.div, { ...scaleIn, className: cn("w-full max-w-sm mx-auto"), children: /* @__PURE__ */ jsxs(Card, { className: "text-center", children: [
+    /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsx(CardTitle, { className: "text-2xl", children: title }),
+      /* @__PURE__ */ jsx(CardDescription, { children: description })
+    ] }),
+    /* @__PURE__ */ jsxs(CardContent, { className: "grid gap-4 justify-center", children: [
+      /* @__PURE__ */ jsx(
+        m.div,
+        {
+          className: "flex justify-center",
+          animate: shake ? { x: [-4, 4, -4, 4, 0] } : {},
+          transition: SHAKE_TRANSITION,
+          children: /* @__PURE__ */ jsx(InputOTP, { maxLength, value: otp, onChange: setOtp, children: /* @__PURE__ */ jsx(InputOTPGroup, { children: Array.from({ length: maxLength }, (_, i) => /* @__PURE__ */ jsx(InputOTPSlot, { index: i }, i)) }) })
+        }
+      ),
+      !!error && /* @__PURE__ */ jsx(Alert, { variant: "destructive", children: /* @__PURE__ */ jsx(AlertDescription, { children: error }) }),
+      /* @__PURE__ */ jsx(Button, { className: "w-full", onClick: () => emit("verify"), children: buttonText }),
+      !!backupCodeLink && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Separator, {}),
+        /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => emit("useBackupCode"),
+            className: "text-sm text-accent hover:text-accent/80 transition-colors",
+            children: backupCodeLink
+          }
+        ) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(CardFooter, { className: "justify-center", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => emit("backToLogin"),
+        className: "text-sm text-text-tertiary hover:text-text-primary transition-colors",
+        children: "Back to login"
+      }
+    ) })
+  ] }) });
+}
+
+export { OTPBlock };