@vadimcomanescu/nadicode-design-system 4.0.11 → 5.0.1

package/dist/chunk-33UWVOQ6.js

@@ -0,0 +1,227 @@
+import { Typography } from './chunk-Q7PCHHVJ.js';
+import { Textarea } from './chunk-4OBE2FS2.js';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from './chunk-WH62BE24.js';
+import { Heading } from './chunk-UXX6HHPS.js';
+import { Field, FieldLabel } from './chunk-RX5EUODB.js';
+import { FormWizard } from './chunk-U5QLJHYN.js';
+import { Input } from './chunk-AP3XXYAY.js';
+import { Button } from './chunk-7KIDDF3I.js';
+import { useMotionConfig, m, motionSpring } from './chunk-PD2YEH3H.js';
+import { RocketIcon } from './chunk-QPXTBZWN.js';
+import { CheckIcon } from './chunk-CXACRCZ4.js';
+import { useState } from 'react';
+import { useBoundProp } from '@json-render/react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function OnboardingFlowBlock({
+  props,
+  bindings,
+  emit,
+  on
+}) {
+  const motionConfig = useMotionConfig();
+  const [completed, setCompleted] = useState(false);
+  const [boundDisplayName, setBoundDisplayName] = useBoundProp(props.displayName, bindings?.displayName);
+  const [localDisplayName, setLocalDisplayName] = useState("");
+  const isDisplayNameBound = !!bindings?.displayName;
+  const displayNameValue = isDisplayNameBound ? boundDisplayName ?? "" : localDisplayName;
+  const setDisplayNameValue = isDisplayNameBound ? setBoundDisplayName : setLocalDisplayName;
+  const [boundOrganization, setBoundOrganization] = useBoundProp(props.organization, bindings?.organization);
+  const [localOrganization, setLocalOrganization] = useState("");
+  const isOrganizationBound = !!bindings?.organization;
+  const organizationValue = isOrganizationBound ? boundOrganization ?? "" : localOrganization;
+  const setOrganizationValue = isOrganizationBound ? setBoundOrganization : setLocalOrganization;
+  const [boundBio, setBoundBio] = useBoundProp(props.bio, bindings?.bio);
+  const [localBio, setLocalBio] = useState("");
+  const isBioBound = !!bindings?.bio;
+  const bioValue = isBioBound ? boundBio ?? "" : localBio;
+  const setBioValue = isBioBound ? setBoundBio : setLocalBio;
+  const [boundFramework, setBoundFramework] = useBoundProp(props.framework, bindings?.framework);
+  const [localFramework, setLocalFramework] = useState("");
+  const isFrameworkBound = !!bindings?.framework;
+  const frameworkValue = isFrameworkBound ? boundFramework ?? "" : localFramework;
+  const setFrameworkValue = isFrameworkBound ? setBoundFramework : setLocalFramework;
+  const [boundTeamSize, setBoundTeamSize] = useBoundProp(props.teamSize, bindings?.teamSize);
+  const [localTeamSize, setLocalTeamSize] = useState("");
+  const isTeamSizeBound = !!bindings?.teamSize;
+  const teamSizeValue = isTeamSizeBound ? boundTeamSize ?? "" : localTeamSize;
+  const setTeamSizeValue = isTeamSizeBound ? setBoundTeamSize : setLocalTeamSize;
+  const [boundUseCase, setBoundUseCase] = useBoundProp(props.useCase, bindings?.useCase);
+  const [localUseCase, setLocalUseCase] = useState("");
+  const isUseCaseBound = !!bindings?.useCase;
+  const useCaseValue = isUseCaseBound ? boundUseCase ?? "" : localUseCase;
+  const setUseCaseValue = isUseCaseBound ? setBoundUseCase : setLocalUseCase;
+  const heading = props.heading ?? "Welcome to Nadicode";
+  const subheading = props.subheading ?? "Let\u2019s get your workspace set up in a few steps.";
+  const completionHeading = props.completionHeading ?? "You\u2019re all set!";
+  const completionDescription = props.completionDescription ?? "Your workspace is ready. Start building something great.";
+  const completionButtonLabel = props.completionButtonLabel ?? "Go to Dashboard";
+  const welcomeTitle = props.welcomeStepTitle ?? "Welcome";
+  const welcomeDescription = props.welcomeStepDescription ?? "Get started";
+  const welcomeHeading = props.welcomeHeading ?? "Ready to launch?";
+  const welcomeBody = props.welcomeBody ?? "We\u2019ll walk you through setting up your profile, preferences, and first project. It only takes a minute.";
+  const profileTitle = props.profileStepTitle ?? "Profile";
+  const profileDescription = props.profileStepDescription ?? "Your details";
+  const displayNameLabel = props.displayNameLabel ?? "Display Name";
+  const displayNamePlaceholder = props.displayNamePlaceholder ?? "John Doe";
+  const organizationLabel = props.organizationLabel ?? "Organization";
+  const organizationPlaceholder = props.organizationPlaceholder ?? "Acme Inc.";
+  const bioLabel = props.bioLabel ?? "Bio";
+  const bioPlaceholder = props.bioPlaceholder ?? "Tell us about yourself...";
+  const preferencesTitle = props.preferencesStepTitle ?? "Preferences";
+  const preferencesDescription = props.preferencesStepDescription ?? "Customize";
+  const frameworkLabel = props.frameworkLabel ?? "Primary Framework";
+  const frameworkPlaceholder = props.frameworkPlaceholder ?? "Select framework";
+  const frameworkOptions = props.frameworkOptions ?? [
+    { value: "react", label: "React" },
+    { value: "next", label: "Next.js" },
+    { value: "vue", label: "Vue" },
+    { value: "svelte", label: "Svelte" }
+  ];
+  const teamSizeLabel = props.teamSizeLabel ?? "Team Size";
+  const teamSizePlaceholder = props.teamSizePlaceholder ?? "Select size";
+  const teamSizeOptions = props.teamSizeOptions ?? [
+    { value: "solo", label: "Just me" },
+    { value: "small", label: "2-10" },
+    { value: "medium", label: "11-50" },
+    { value: "large", label: "50+" }
+  ];
+  const useCaseLabel = props.useCaseLabel ?? "Primary Use Case";
+  const useCasePlaceholder = props.useCasePlaceholder ?? "Select use case";
+  const useCaseOptions = props.useCaseOptions ?? [
+    { value: "saas", label: "SaaS Application" },
+    { value: "dashboard", label: "Admin Dashboard" },
+    { value: "marketing", label: "Marketing Site" },
+    { value: "ecommerce", label: "E-commerce" }
+  ];
+  const reviewTitle = props.reviewStepTitle ?? "Complete";
+  const reviewHeading = props.reviewHeading ?? "All set!";
+  const reviewBody = props.reviewBody ?? "Review your details and click Complete to launch your workspace.";
+  const handleComplete = () => {
+    setCompleted(true);
+    emit("complete");
+  };
+  if (completed) {
+    return /* @__PURE__ */ jsx("div", { className: "flex min-h-dvh items-center justify-center bg-background px-6", children: /* @__PURE__ */ jsxs(
+      m.div,
+      {
+        className: "text-center space-y-4",
+        initial: { opacity: 0, y: 16 },
+        animate: { opacity: 1, y: 0 },
+        transition: { ...motionSpring.snappy, ...motionConfig },
+        children: [
+          /* @__PURE__ */ jsx(
+            m.div,
+            {
+              className: "mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-success/10 text-success",
+              initial: { opacity: 0, scale: 0.5 },
+              animate: { opacity: 1, scale: 1 },
+              transition: { ...motionSpring.bouncy, delay: 0.15, ...motionConfig },
+              children: /* @__PURE__ */ jsx(CheckIcon, { size: 32 })
+            }
+          ),
+          /* @__PURE__ */ jsx(Heading, { level: 2, children: completionHeading }),
+          /* @__PURE__ */ jsx(Typography, { variant: "body", className: "text-text-secondary max-w-sm mx-auto", children: completionDescription }),
+          /* @__PURE__ */ jsxs(Button, { variant: "accent", size: "lg", onClick: () => setCompleted(false), children: [
+            /* @__PURE__ */ jsx(RocketIcon, { size: 16, className: "mr-2" }),
+            completionButtonLabel
+          ] })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "flex min-h-dvh items-center justify-center bg-background px-6 py-12", children: /* @__PURE__ */ jsxs(
+    m.div,
+    {
+      className: "w-full max-w-2xl",
+      initial: { opacity: 0, y: 16 },
+      animate: { opacity: 1, y: 0 },
+      transition: { ...motionSpring.snappy, ...motionConfig },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-8 text-center", children: [
+          /* @__PURE__ */ jsx(Heading, { level: 2, children: heading }),
+          /* @__PURE__ */ jsx(Typography, { variant: "body", className: "mt-2 text-text-secondary", children: subheading })
+        ] }),
+        /* @__PURE__ */ jsx(
+          FormWizard,
+          {
+            props: { variant: "card", activeStep: null, nextLabel: null, backLabel: null, completeLabel: null, size: null, className: null },
+            emit: (event) => {
+              if (event === "complete") handleComplete();
+            },
+            on,
+            steps: [
+              {
+                id: "welcome",
+                title: welcomeTitle,
+                description: welcomeDescription,
+                content: /* @__PURE__ */ jsxs("div", { className: "space-y-4 py-4 text-center", children: [
+                  /* @__PURE__ */ jsx("div", { className: "mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-accent/10 text-accent", children: /* @__PURE__ */ jsx(RocketIcon, { size: 24 }) }),
+                  /* @__PURE__ */ jsx(Heading, { level: 3, children: welcomeHeading }),
+                  /* @__PURE__ */ jsx(Typography, { variant: "body", className: "text-text-secondary max-w-md mx-auto", children: welcomeBody })
+                ] })
+              },
+              {
+                id: "profile",
+                title: profileTitle,
+                description: profileDescription,
+                content: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+                  /* @__PURE__ */ jsxs(Field, { children: [
+                    /* @__PURE__ */ jsx(FieldLabel, { children: displayNameLabel }),
+                    /* @__PURE__ */ jsx(Input, { placeholder: displayNamePlaceholder, value: displayNameValue, onChange: (e) => setDisplayNameValue(e.target.value) })
+                  ] }),
+                  /* @__PURE__ */ jsxs(Field, { children: [
+                    /* @__PURE__ */ jsx(FieldLabel, { children: organizationLabel }),
+                    /* @__PURE__ */ jsx(Input, { placeholder: organizationPlaceholder, value: organizationValue, onChange: (e) => setOrganizationValue(e.target.value) })
+                  ] }),
+                  /* @__PURE__ */ jsxs(Field, { children: [
+                    /* @__PURE__ */ jsx(FieldLabel, { children: bioLabel }),
+                    /* @__PURE__ */ jsx(Textarea, { placeholder: bioPlaceholder, rows: 3, value: bioValue, onChange: (e) => setBioValue(e.target.value) })
+                  ] })
+                ] })
+              },
+              {
+                id: "preferences",
+                title: preferencesTitle,
+                description: preferencesDescription,
+                content: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+                  /* @__PURE__ */ jsxs(Field, { children: [
+                    /* @__PURE__ */ jsx(FieldLabel, { children: frameworkLabel }),
+                    /* @__PURE__ */ jsxs(Select, { value: frameworkValue || void 0, onValueChange: setFrameworkValue, children: [
+                      /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: frameworkPlaceholder }) }),
+                      /* @__PURE__ */ jsx(SelectContent, { children: frameworkOptions.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs(Field, { children: [
+                    /* @__PURE__ */ jsx(FieldLabel, { children: teamSizeLabel }),
+                    /* @__PURE__ */ jsxs(Select, { value: teamSizeValue || void 0, onValueChange: setTeamSizeValue, children: [
+                      /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: teamSizePlaceholder }) }),
+                      /* @__PURE__ */ jsx(SelectContent, { children: teamSizeOptions.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs(Field, { children: [
+                    /* @__PURE__ */ jsx(FieldLabel, { children: useCaseLabel }),
+                    /* @__PURE__ */ jsxs(Select, { value: useCaseValue || void 0, onValueChange: setUseCaseValue, children: [
+                      /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: useCasePlaceholder }) }),
+                      /* @__PURE__ */ jsx(SelectContent, { children: useCaseOptions.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value)) })
+                    ] })
+                  ] })
+                ] })
+              },
+              {
+                id: "complete",
+                title: reviewTitle,
+                content: /* @__PURE__ */ jsxs("div", { className: "text-center py-8 space-y-2", children: [
+                  /* @__PURE__ */ jsx(Heading, { level: 3, children: reviewHeading }),
+                  /* @__PURE__ */ jsx(Typography, { variant: "muted", children: reviewBody })
+                ] })
+              }
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+}
+
+export { OnboardingFlowBlock };

package/dist/chunk-34MKVVGB.js

@@ -0,0 +1,176 @@
+import { cn } from './chunk-QYZT24TS.js';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var itemVariants = cva("flex items-center gap-4 transition-colors", {
+  variants: {
+    variant: {
+      default: "bg-transparent",
+      outline: "rounded-lg border border-border bg-surface p-4 shadow-sm",
+      muted: "rounded-lg bg-secondary/50 p-4"
+    },
+    size: {
+      default: "py-4",
+      sm: "py-2 px-4 gap-4",
+      xs: "py-1.5 px-2 gap-2"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default"
+  }
+});
+function Item({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ref,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      className: cn(itemVariants({ variant, size }), className),
+      ...props
+    }
+  );
+}
+function ItemGroup({
+  className,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("div", { ref, className: cn("grid gap-1.5", className), ...props });
+}
+function ItemSeparator({
+  className,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("-mx-1.5 h-px bg-border", className),
+      ...props
+    }
+  );
+}
+var itemMediaVariants = cva("flex shrink-0 items-center justify-center", {
+  variants: {
+    variant: {
+      default: "",
+      icon: "h-9 w-9 rounded-md bg-secondary text-text-secondary [&>svg]:h-5 [&>svg]:w-5",
+      avatar: "h-10 w-10 overflow-hidden rounded-full",
+      image: "h-12 w-12 overflow-hidden rounded-md"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+function ItemMedia({
+  className,
+  variant,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(itemMediaVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+function ItemContent({
+  className,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("flex flex-1 flex-col gap-0.5 min-w-0", className),
+      ...props
+    }
+  );
+}
+function ItemTitle({
+  className,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      className: cn("text-sm font-medium leading-none text-text-primary truncate", className),
+      ...props
+    }
+  );
+}
+function ItemDescription({
+  className,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      className: cn("text-xs text-text-tertiary truncate", className),
+      ...props
+    }
+  );
+}
+function ItemActions({
+  className,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("ml-auto flex items-center gap-2", className),
+      ...props
+    }
+  );
+}
+function ItemHeader({
+  className,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("mb-2 flex items-center justify-between", className),
+      ...props
+    }
+  );
+}
+function ItemFooter({
+  className,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("mt-2 flex items-center justify-between", className),
+      ...props
+    }
+  );
+}
+
+export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, itemMediaVariants, itemVariants };

package/dist/{chunk-KFL4YCMI.js → chunk-37LY27CX.js}

@@ -1,4 +1,4 @@
-import { Dialog, DialogContent } from './chunk-C6MJQDPC.js';
+import { Dialog, DialogContent } from './chunk-KHLMOBAU.js';
 import { SearchIcon } from './chunk-T6BRD7TS.js';
 import { cn } from './chunk-QYZT24TS.js';
 import { Command as Command$1 } from 'cmdk';

package/dist/{chunk-LPED36AD.js → chunk-3BGWXRQC.js}

@@ -9,14 +9,12 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 var defaultDescription = `Join thousands of developers building premium interfaces with ${siteConfig.name}.`;
 var defaultPrimaryAction = { label: "Get Started", href: "#" };
 var defaultSecondaryAction = { label: "Book Demo", href: "#" };
-function CallToActionBlock({
-  title = "Start Building",
-  description = defaultDescription,
-  primaryAction = defaultPrimaryAction,
-  secondaryAction = defaultSecondaryAction,
-  className
-}) {
-  return /* @__PURE__ */ jsx("section", { className: className ?? "py-16 md:py-24", children: /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-5xl px-6", children: /* @__PURE__ */ jsxs(StaggerChildren, { staggerMs: 100, className: "text-center", children: [
+function CallToActionBlock({ props }) {
+  const title = props.title ?? "Start Building";
+  const description = props.description ?? defaultDescription;
+  const primaryAction = props.primaryAction ?? defaultPrimaryAction;
+  const secondaryAction = props.secondaryAction ?? defaultSecondaryAction;
+  return /* @__PURE__ */ jsx("section", { className: "py-16 md:py-24", children: /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-5xl px-6", children: /* @__PURE__ */ jsxs(StaggerChildren, { staggerMs: 100, className: "text-center", children: [
     /* @__PURE__ */ jsx(Heading, { level: 2, size: "section", className: "text-4xl lg:text-5xl", children: /* @__PURE__ */ jsx(
       ShimmeringText,
       {

package/dist/{chunk-I2ZI5RUM.js → chunk-3FJG5MAT.js}

@@ -1,8 +1,8 @@
 import { AreaChart } from './chunk-ZTNHUABC.js';
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from './chunk-WH62BE24.js';
 import { Card, CardHeader, CardTitle, CardDescription, CardContent } from './chunk-7UY24UWL.js';
-import { cn } from './chunk-QYZT24TS.js';
 import * as React from 'react';
+import { useBoundProp } from '@json-render/react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var defaultTimeRanges = [
@@ -239,15 +239,18 @@ var defaultConfig = {
     color: "rgb(var(--chart-2))"
   }
 };
-function InteractiveAreaChartBlock({
-  data = defaultData,
-  config = defaultConfig,
-  title = "Traffic Analysis",
-  description = "Showing total visitors for the last 3 months",
-  timeRanges = defaultTimeRanges,
-  className
-}) {
-  const [timeRange, setTimeRange] = React.useState(timeRanges[0]?.value ?? "90d");
+function InteractiveAreaChartBlock({ props, bindings, emit }) {
+  const data = props.data ?? defaultData;
+  const config = props.config ?? defaultConfig;
+  const title = props.title ?? "Traffic Analysis";
+  const description = props.description ?? "Showing total visitors for the last 3 months";
+  const timeRanges = props.timeRanges ?? defaultTimeRanges;
+  const defaultTimeRangeValue = timeRanges[0]?.value ?? "90d";
+  const [boundTimeRange, setBoundTimeRange] = useBoundProp(props.timeRange, bindings?.timeRange);
+  const [localTimeRange, setLocalTimeRange] = React.useState(defaultTimeRangeValue);
+  const isTimeRangeBound = !!bindings?.timeRange;
+  const timeRange = isTimeRangeBound ? boundTimeRange ?? defaultTimeRangeValue : localTimeRange;
+  const setTimeRange = isTimeRangeBound ? setBoundTimeRange : setLocalTimeRange;
   const filteredData = React.useMemo(() => data.filter((item) => {
     const date = new Date(item.date);
     const now = /* @__PURE__ */ new Date();
@@ -256,13 +259,16 @@ function InteractiveAreaChartBlock({
     now.setDate(now.getDate() - daysToSubtract);
     return date >= now;
   }), [data, timeRanges, timeRange]);
-  return /* @__PURE__ */ jsxs(Card, { className: cn(className), children: [
+  return /* @__PURE__ */ jsxs(Card, { children: [
     /* @__PURE__ */ jsxs(CardHeader, { className: "flex items-center gap-2 space-y-0 border-b border-border py-6 sm:flex-row", children: [
       /* @__PURE__ */ jsxs("div", { className: "grid flex-1 gap-1.5 text-center sm:text-left", children: [
         /* @__PURE__ */ jsx(CardTitle, { children: title }),
         /* @__PURE__ */ jsx(CardDescription, { children: description })
       ] }),
-      /* @__PURE__ */ jsxs(Select, { value: timeRange, onValueChange: setTimeRange, children: [
+      /* @__PURE__ */ jsxs(Select, { value: timeRange, onValueChange: (v) => {
+        setTimeRange(v);
+        emit("timeRangeChange");
+      }, children: [
         /* @__PURE__ */ jsx(
           SelectTrigger,
           {