@vadimcomanescu/nadicode-design-system 4.0.11 → 5.0.1

package/dist/{chunk-HQKORL27.js → chunk-6LD76RMU.js}

@@ -1,9 +1,8 @@
 import { BarChart } from './chunk-JICACDAV.js';
-import { ScrollFadeIn } from './chunk-I23DDSU7.js';
 import { Card, CardHeader, CardTitle, CardDescription, CardContent } from './chunk-7UY24UWL.js';
+import { ScrollFadeIn } from './chunk-I23DDSU7.js';
 import { SmartphoneIcon } from './chunk-HNY45VUQ.js';
 import { MonitorIcon } from './chunk-R5XP45PD.js';
-import { cn } from './chunk-QYZT24TS.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var defaultData = [
@@ -18,22 +17,20 @@ var defaultConfig = {
   desktop: {
     label: "Desktop",
     color: "rgb(var(--chart-1))",
-    icon: ({ ...props }) => /* @__PURE__ */ jsx(MonitorIcon, { size: 16, ...props })
+    icon: ({ ...iconProps }) => /* @__PURE__ */ jsx(MonitorIcon, { size: 16, ...iconProps })
   },
   mobile: {
     label: "Mobile",
     color: "rgb(var(--chart-2))",
-    icon: ({ ...props }) => /* @__PURE__ */ jsx(SmartphoneIcon, { size: 16, ...props })
+    icon: ({ ...iconProps }) => /* @__PURE__ */ jsx(SmartphoneIcon, { size: 16, ...iconProps })
   }
 };
-function ChartBlock({
-  data = defaultData,
-  config = defaultConfig,
-  title = "Analytics",
-  description = "January - June 2024",
-  className
-}) {
-  return /* @__PURE__ */ jsx(ScrollFadeIn, { children: /* @__PURE__ */ jsxs(Card, { className: cn(className), children: [
+function ChartBlock({ props }) {
+  const data = props.data ?? defaultData;
+  const config = props.config ?? defaultConfig;
+  const title = props.title ?? "Analytics";
+  const description = props.description ?? "January - June 2024";
+  return /* @__PURE__ */ jsx(ScrollFadeIn, { children: /* @__PURE__ */ jsxs(Card, { children: [
     /* @__PURE__ */ jsxs(CardHeader, { children: [
       /* @__PURE__ */ jsx(CardTitle, { children: title }),
       /* @__PURE__ */ jsx(CardDescription, { children: description })

package/dist/{chunk-L3WRHSHM.js → chunk-6NL36QN3.js}

@@ -1,8 +1,7 @@
-import { Typography } from './chunk-PC6VMNDY.js';
+import { Typography } from './chunk-Q7PCHHVJ.js';
 import { Heading } from './chunk-UXX6HHPS.js';
-import { Dialog, DialogTrigger, DialogContent } from './chunk-C6MJQDPC.js';
+import { Dialog, DialogTrigger, DialogContent } from './chunk-KHLMOBAU.js';
 import { ScrollFadeIn } from './chunk-I23DDSU7.js';
-import { cn } from './chunk-QYZT24TS.js';
 import Image from 'next/image';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
@@ -15,12 +14,13 @@ var defaultImages = [
   { src: "https://picsum.photos/seed/f/600/600", alt: "Icon set", caption: "Animated icons showcase" }
 ];
 function GalleryBlock({
-  images = defaultImages,
-  columns = 3,
-  title = "Gallery",
-  className
+  props,
+  emit
 }) {
-  return /* @__PURE__ */ jsx("section", { className: cn("py-16 md:py-24", className), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-6xl px-6", children: [
+  const images = props.images ?? defaultImages;
+  const columns = props.columns ?? 3;
+  const title = props.title ?? "Gallery";
+  return /* @__PURE__ */ jsx("section", { className: "py-16 md:py-24", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-6xl px-6", children: [
     !!title && /* @__PURE__ */ jsx(ScrollFadeIn, { children: /* @__PURE__ */ jsx(Heading, { level: 2, size: "section", className: "mb-8 text-text-primary", children: title }) }),
     /* @__PURE__ */ jsx(
       "div",
@@ -32,6 +32,7 @@ function GalleryBlock({
             "button",
             {
               className: "group relative w-full overflow-hidden rounded-lg border border-border bg-surface focus-visible:ring-1 focus-visible:ring-accent focus-visible:outline-none",
+              onClick: () => emit("select"),
               children: [
                 /* @__PURE__ */ jsx("div", { className: "relative aspect-[4/3] overflow-hidden", children: /* @__PURE__ */ jsx(
                   Image,

package/dist/chunk-6NND57T2.js

@@ -0,0 +1,79 @@
+import { Typography } from './chunk-Q7PCHHVJ.js';
+import { Heading } from './chunk-UXX6HHPS.js';
+import { Avatar, AvatarFallback } from './chunk-NAAU5IWU.js';
+import { Button } from './chunk-7KIDDF3I.js';
+import { ArrowLeftIcon } from './chunk-74RKVIBV.js';
+import { Badge } from './chunk-S4JAHKOP.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function BlogDetailBlock({
+  props,
+  emit,
+  children
+}) {
+  const title = props.title;
+  const author = props.author;
+  const authorFallback = props.authorFallback ?? props.author.slice(0, 2).toUpperCase();
+  const publishedAt = props.publishedAt;
+  const readTimeLabel = props.readTimeLabel;
+  const tags = props.tags;
+  const bodyHtml = props.bodyHtml;
+  const excerpt = props.excerpt;
+  const className = props.className;
+  return /* @__PURE__ */ jsxs("article", { className: cn("space-y-6", className), children: [
+    props.heroImage ? /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: props.heroImage,
+        alt: "",
+        className: "aspect-video w-full rounded-lg object-cover"
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs("header", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "sm",
+          onClick: () => emit("backToIndex"),
+          className: "gap-1",
+          children: [
+            /* @__PURE__ */ jsx(ArrowLeftIcon, { size: 14 }),
+            props.backLabel ?? "Back"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(Heading, { level: 2, children: title }),
+      excerpt ? /* @__PURE__ */ jsx(Typography, { variant: "muted", children: excerpt }) : null,
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3 border-y border-border/70 py-3", children: [
+        /* @__PURE__ */ jsx(Avatar, { className: "h-9 w-9", children: /* @__PURE__ */ jsx(AvatarFallback, { children: authorFallback }) }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "small",
+              className: "font-medium text-text-primary",
+              children: author
+            }
+          ),
+          /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-text-secondary", children: [
+            publishedAt,
+            readTimeLabel ? ` \xB7 ${readTimeLabel}` : ""
+          ] })
+        ] })
+      ] }),
+      tags && tags.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: tags.map((tag) => /* @__PURE__ */ jsx(Badge, { variant: "outline", children: tag }, tag)) }) : null
+    ] }),
+    children ?? (bodyHtml ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "prose prose-sm max-w-none dark:prose-invert",
+        dangerouslySetInnerHTML: { __html: bodyHtml }
+      }
+    ) : null)
+  ] });
+}
+
+export { BlogDetailBlock };

package/dist/{chunk-TBJPLMUE.js → chunk-6OBT3A5O.js}

@@ -1,18 +1,15 @@
-import { SidebarMenu, SidebarMenuItem, SidebarMenuButton } from './chunk-FF3XUIZO.js';
+import { SidebarMenu, SidebarMenuItem, SidebarMenuButton } from './chunk-4DWRAIM2.js';
 import { LayoutDashboardIcon } from './chunk-O74AEVHW.js';
-import { cn } from './chunk-QYZT24TS.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var DEFAULT_NAME = "My Workspace";
 var DEFAULT_PLAN = "Free Plan";
 var DEFAULT_HREF = "/dashboard";
-function WorkspaceSwitcherBlock({
-  name = DEFAULT_NAME,
-  plan = DEFAULT_PLAN,
-  href = DEFAULT_HREF,
-  className
-}) {
-  return /* @__PURE__ */ jsx(SidebarMenu, { className: cn(className), children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(SidebarMenuButton, { size: "lg", asChild: true, children: /* @__PURE__ */ jsxs("a", { href, children: [
+function WorkspaceSwitcherBlock({ props, emit }) {
+  const name = props.name ?? DEFAULT_NAME;
+  const plan = props.plan ?? DEFAULT_PLAN;
+  const href = props.href ?? DEFAULT_HREF;
+  return /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(SidebarMenuButton, { size: "lg", asChild: true, children: /* @__PURE__ */ jsxs("a", { href, className: "min-h-10", onClick: () => emit("press"), children: [
     /* @__PURE__ */ jsx("div", { className: "flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground", children: /* @__PURE__ */ jsx(LayoutDashboardIcon, { size: 16 }) }),
     /* @__PURE__ */ jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
       /* @__PURE__ */ jsx("span", { className: "truncate font-semibold text-text-primary", children: name }),

package/dist/{chunk-4INNXURW.js → chunk-767GZSNJ.js}

@@ -1,6 +1,5 @@
 import { HeatmapChart } from './chunk-ENZ2HF3I.js';
 import { Card, CardHeader, CardTitle, CardDescription, CardContent } from './chunk-7UY24UWL.js';
-import { cn } from './chunk-QYZT24TS.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var defaultData = [
@@ -39,14 +38,12 @@ var defaultConfig = {
     color: "rgb(var(--chart-1))"
   }
 };
-function HeatmapChartBlock({
-  data = defaultData,
-  config = defaultConfig,
-  title = "User Activity Heatmap",
-  description = "Intensity of user interactions by Day and Time",
-  className
-}) {
-  return /* @__PURE__ */ jsxs(Card, { className: cn("w-full", className), children: [
+function HeatmapChartBlock({ props }) {
+  const data = props.data ?? defaultData;
+  const config = props.config ?? defaultConfig;
+  const title = props.title ?? "User Activity Heatmap";
+  const description = props.description ?? "Intensity of user interactions by Day and Time";
+  return /* @__PURE__ */ jsxs(Card, { className: "w-full", children: [
     /* @__PURE__ */ jsxs(CardHeader, { children: [
       /* @__PURE__ */ jsx(CardTitle, { children: title }),
       /* @__PURE__ */ jsx(CardDescription, { children: description })

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-7LYRUSWM.js

@@ -0,0 +1,77 @@
+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 { useBoundProp } from '@json-render/react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var SHAKE_TRANSITION = { duration: 0.3, ease: bezier["out-cubic"] };
+function OTPBlock({ props, bindings, 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 [boundOtp, setBoundOtp] = useBoundProp(props.value, bindings?.value);
+  const [localOtp, setLocalOtp] = React.useState("");
+  const isOtpBound = !!bindings?.value;
+  const otp = isOtpBound ? boundOtp ?? "" : localOtp;
+  const setOtp = isOtpBound ? setBoundOtp : setLocalOtp;
+  const [shake, setShake] = React.useState(false);
+  React.useEffect(() => {
+    if (error) {
+      setShake(true);
+      setOtp("");
+      const timeout = setTimeout(() => setShake(false), 300);
+      return () => clearTimeout(timeout);
+    }
+  }, [error, setOtp]);
+  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 };

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"
       }