@vadimcomanescu/nadicode-design-system 4.0.10 → 5.0.0

package/dist/{chunk-X4HXVLER.js → chunk-OMI2LLXM.js}

@@ -1,10 +1,10 @@
-import { useSafeTimeout } from './chunk-MDAYDDTC.js';
-import { Typography } from './chunk-PC6VMNDY.js';
+import { Typography } from './chunk-Q7PCHHVJ.js';
 import { Textarea } from './chunk-4OBE2FS2.js';
 import { Spinner } from './chunk-ZLSWCV55.js';
 import { Heading } from './chunk-UXX6HHPS.js';
 import { Field, FieldLabel, FieldContent } from './chunk-RX5EUODB.js';
 import { Input } from './chunk-AP3XXYAY.js';
+import { useSafeTimeout } from './chunk-MDAYDDTC.js';
 import { Button } from './chunk-7KIDDF3I.js';
 import { CheckIcon } from './chunk-CXACRCZ4.js';
 import { cn } from './chunk-QYZT24TS.js';
@@ -12,16 +12,16 @@ import { useState } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function ContactBlock({
-  onSubmit,
-  title = "Get in touch",
-  description = "Have a question or want to work together? Drop us a message.",
-  className,
-  namePlaceholder = "Your name",
-  emailPlaceholder = "you@example.com",
-  messagePlaceholder = "Tell us what you need...",
-  successTitle = "Message sent",
-  submitLabel = "Send message"
+  props,
+  emit
 }) {
+  const title = props.title ?? "Get in touch";
+  const description = props.description ?? "Have a question or want to work together? Drop us a message.";
+  const namePlaceholder = props.namePlaceholder ?? "Your name";
+  const emailPlaceholder = props.emailPlaceholder ?? "you@example.com";
+  const messagePlaceholder = props.messagePlaceholder ?? "Tell us what you need...";
+  const successTitle = props.successTitle ?? "Message sent";
+  const submitLabel = props.submitLabel ?? "Send message";
   const [name, setName] = useState("");
   const [email, setEmail] = useState("");
   const [message, setMessage] = useState("");
@@ -31,10 +31,7 @@ function ContactBlock({
     e.preventDefault();
     if (!name.trim() || !email.trim() || !message.trim()) return;
     setStatus("loading");
-    try {
-      await onSubmit?.({ name, email, message });
-    } catch {
-    }
+    emit("submit");
     setSafeTimeout(() => {
       setStatus("success");
       setSafeTimeout(() => {
@@ -45,7 +42,7 @@ function ContactBlock({
       }, 2e3);
     }, 800);
   };
-  return /* @__PURE__ */ jsx("section", { className: cn("py-16 md:py-24", className), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-lg px-6", children: [
+  return /* @__PURE__ */ jsx("section", { className: cn("py-16 md:py-24"), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-lg px-6", children: [
     /* @__PURE__ */ jsxs("div", { className: "mb-8 text-center", children: [
       /* @__PURE__ */ jsx(Heading, { level: 2, size: "section", className: "text-text-primary", children: title }),
       /* @__PURE__ */ jsx(Typography, { variant: "body", className: "mt-2 text-text-secondary", children: description })
@@ -65,7 +62,7 @@ function ContactBlock({
           Input,
           {
             name: "name",
-            placeholder: namePlaceholder,
+            placeholder: namePlaceholder ?? void 0,
             value: name,
             onChange: (e) => setName(e.target.value),
             required: true
@@ -79,7 +76,7 @@ function ContactBlock({
           {
             name: "email",
             type: "email",
-            placeholder: emailPlaceholder,
+            placeholder: emailPlaceholder ?? void 0,
             value: email,
             onChange: (e) => setEmail(e.target.value),
             required: true
@@ -92,7 +89,7 @@ function ContactBlock({
           Textarea,
           {
             name: "message",
-            placeholder: messagePlaceholder,
+            placeholder: messagePlaceholder ?? void 0,
             rows: 4,
             value: message,
             onChange: (e) => setMessage(e.target.value),

package/dist/{chunk-UIZTZCAU.js → chunk-OS2BLQ2G.js}

@@ -1,5 +1,5 @@
-import { useSidebar, SidebarMenu, SidebarMenuItem, SidebarMenuButton } from './chunk-FF3XUIZO.js';
-import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuGroup, DropdownMenuItem } from './chunk-CQEUNASC.js';
+import { useSidebar, SidebarMenu, SidebarMenuItem, SidebarMenuButton } from './chunk-4DWRAIM2.js';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuGroup, DropdownMenuItem } from './chunk-ETS5O4ZQ.js';
 import { Avatar, AvatarImage, AvatarFallback } from './chunk-NAAU5IWU.js';
 import { ChevronsUpDownIcon } from './chunk-SW6QPJM4.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -7,9 +7,10 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 function getInitials(name) {
   return name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
 }
-var EMPTY_ITEMS = [];
-function NavUser({ user, items = EMPTY_ITEMS, footer }) {
+function NavUser({ props, children, emit }) {
   const { isMobile } = useSidebar();
+  const user = props.user;
+  const items = props.items ?? [];
   const initials = getInitials(user.name);
   return /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
     /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
@@ -60,21 +61,15 @@ function NavUser({ user, items = EMPTY_ITEMS, footer }) {
               DropdownMenuItem,
               {
                 asChild: !!item.href,
-                onClick: item.onClick,
-                children: item.href ? /* @__PURE__ */ jsxs("a", { href: item.href, children: [
-                  item.icon,
-                  item.label
-                ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                  item.icon,
-                  item.label
-                ] })
+                onClick: () => emit("select"),
+                children: item.href ? /* @__PURE__ */ jsx("a", { href: item.href, children: item.label }) : item.label
               },
               item.label
             )) })
           ] }),
-          !!footer && /* @__PURE__ */ jsxs(Fragment, { children: [
+          !!children && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-            footer
+            children
           ] })
         ]
       }

package/dist/chunk-OUXJUUCB.js

@@ -0,0 +1,131 @@
+import { nn } from './chunk-2NMP3J5R.js';
+import { Tabs, TabsList, TabsTrigger } from './chunk-MFZYC6QC.js';
+import { ResizablePanelGroup } from './chunk-PY7WBWKH.js';
+import { ScrollArea, ScrollBar } from './chunk-GLU236NN.js';
+import { Separator } from './chunk-CUZJIDU7.js';
+import { Collapsible } from './chunk-VJIL7W55.js';
+import { Card } from './chunk-7UY24UWL.js';
+import { BentoGrid } from './chunk-U3QOFPHD.js';
+import { AspectRatio } from './chunk-E5E3W2K4.js';
+import { AccordionItem, AccordionTrigger, AccordionContent, Accordion } from './chunk-W4YX7N46.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { useState } from 'react';
+import { useBoundProp } from '@json-render/react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var layoutComponents = {
+  Accordion: ({ props, emit }) => {
+    const items = props.items ?? [];
+    const isMultiple = props.type === "multiple";
+    const itemElements = items.map((item, i) => /* @__PURE__ */ jsxs(AccordionItem, { value: item.value, children: [
+      /* @__PURE__ */ jsx(AccordionTrigger, { children: item.title }),
+      /* @__PURE__ */ jsx(AccordionContent, { children: item.content })
+    ] }, item.value ?? i));
+    if (isMultiple) {
+      return /* @__PURE__ */ jsx(Accordion, { type: "multiple", className: "w-full", onValueChange: () => emit("valueChange"), children: itemElements });
+    }
+    return /* @__PURE__ */ jsx(Accordion, { type: "single", collapsible: true, className: "w-full", onValueChange: () => emit("valueChange"), children: itemElements });
+  },
+  BentoGrid: ({ props, children }) => {
+    return /* @__PURE__ */ jsx(BentoGrid, { columns: props.columns ?? 3, children });
+  },
+  Card: ({ props, children }) => {
+    return /* @__PURE__ */ jsx(
+      Card,
+      {
+        interactive: props.interactive ?? false,
+        accentBorder: props.accentBorder ?? false,
+        hoverGlow: props.hoverGlow ?? false,
+        showBrackets: props.showBrackets ?? false,
+        children
+      }
+    );
+  },
+  Collapsible: ({ props, bindings, children, emit }) => {
+    const [boundOpen, setBoundOpen] = useBoundProp(
+      props.open,
+      bindings?.open
+    );
+    const [localOpen, setLocalOpen] = useState(props.defaultOpen ?? false);
+    const isBound = !!bindings?.open;
+    const isOpen = isBound ? boundOpen ?? false : props.open != null ? props.open ?? false : localOpen;
+    const setOpen = isBound ? setBoundOpen : setLocalOpen;
+    return /* @__PURE__ */ jsx(
+      Collapsible,
+      {
+        open: isOpen,
+        onOpenChange: (v) => {
+          if (props.open == null) setOpen(v);
+          emit("openChange");
+        },
+        className: "w-full",
+        children
+      }
+    );
+  },
+  Grid: ({ props, children }) => {
+    const cols = props.cols ?? 1;
+    const gapMap = {
+      sm: "gap-2",
+      md: "gap-4",
+      lg: "gap-8",
+      xl: "gap-12"
+    };
+    const colsMap = {
+      1: "grid-cols-1",
+      2: "grid-cols-1 md:grid-cols-2",
+      3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
+      4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4"
+    };
+    const colsClass = colsMap[cols] ?? "grid-cols-1";
+    const gapClass = gapMap[props.gap ?? "md"] ?? "gap-4";
+    return /* @__PURE__ */ jsx("div", { className: cn("grid", colsClass, gapClass), children });
+  },
+  Resizable: ({ props, children }) => {
+    return /* @__PURE__ */ jsx(ResizablePanelGroup, { orientation: props.direction ?? "horizontal", children });
+  },
+  ScrollArea: ({ props, children }) => {
+    const orientation = props.orientation ?? "vertical";
+    return /* @__PURE__ */ jsxs(ScrollArea, { className: "h-full w-full", children: [
+      children,
+      /* @__PURE__ */ jsx(ScrollBar, { orientation })
+    ] });
+  },
+  Separator: ({ props }) => {
+    return /* @__PURE__ */ jsx(Separator, { orientation: props.orientation ?? "horizontal" });
+  },
+  Tabs: ({ props, bindings, children, emit }) => {
+    const items = props.items ?? [];
+    const isControlled = !!(props.value || bindings?.value);
+    const [boundValue, setBoundValue] = useBoundProp(
+      props.value,
+      bindings?.value
+    );
+    const [localValue, setLocalValue] = useState(
+      props.value ?? props.defaultValue ?? items[0]?.value ?? ""
+    );
+    const isBound = !!bindings?.value;
+    const value = isBound ? boundValue : localValue;
+    const setValue = isBound ? setBoundValue : setLocalValue;
+    const tabsProps = isControlled ? { value: value ?? items[0]?.value ?? "" } : { defaultValue: props.defaultValue ?? items[0]?.value };
+    return /* @__PURE__ */ jsxs(
+      Tabs,
+      {
+        ...tabsProps,
+        onValueChange: (v) => {
+          setValue(v);
+          emit("valueChange");
+        },
+        children: [
+          /* @__PURE__ */ jsx(TabsList, { children: items.map((tab) => /* @__PURE__ */ jsx(TabsTrigger, { value: tab.value, children: tab.label }, tab.value)) }),
+          children
+        ]
+      }
+    );
+  },
+  AspectRatio: ({ props, children }) => {
+    return /* @__PURE__ */ jsx(AspectRatio, { ratio: nn(props.ratio), className: nn(props.className), children });
+  }
+};
+
+export { layoutComponents };

package/dist/{chunk-QQOWC53X.js → chunk-OWWQP3YW.js}

@@ -84,15 +84,17 @@ var BRAND_LOGO_TEMPLATES = [
   { label: "Zapier", initials: "ZI", accent: "#f97316", accent2: "#9a3412" }
 ];
 var LOCAL_CLOUD_LOGOS = BRAND_LOGO_TEMPLATES.map((template, index) => ({
+  type: "image",
   src: createLogoDataUri(template),
   alt: `${template.label} Logo`,
   height: [20, 16, 16, 20, 16, 28, 20, 24, 16, 20, 20][index]
 }));
-var LOCAL_HERO_LOGOS = BRAND_LOGO_TEMPLATES.slice(0, 8).map((template, index) => ({
+BRAND_LOGO_TEMPLATES.slice(0, 8).map((template, index) => ({
+  type: "image",
   src: createLogoDataUri(template),
   alt: `${template.label} Logo`,
   height: String([20, 16, 16, 20, 20, 16, 28, 24][index])
 }));
 var LOCAL_NIKE_LOGO_SRC = createLogoDataUri(BRAND_LOGO_TEMPLATES[3]);
 
-export { LOCAL_CLOUD_LOGOS, LOCAL_HERO_LOGOS, LOCAL_NIKE_LOGO_SRC, createAvatarDataUri };
+export { LOCAL_CLOUD_LOGOS, LOCAL_NIKE_LOGO_SRC, createAvatarDataUri };