@vadimcomanescu/nadicode-design-system 2.0.9 → 4.0.1

package/dist/chunk-DEZXWNYF.js

@@ -0,0 +1,165 @@
+import { CrudListDetailPageKit } from './chunk-OJ7OO3QB.js';
+import { Typography } from './chunk-N53OMWW2.js';
+import { RoleBadge } from './chunk-OHCQPI3W.js';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from './chunk-CQEUNASC.js';
+import { Avatar, AvatarImage, AvatarFallback } from './chunk-NAAU5IWU.js';
+import { Button } from './chunk-7KIDDF3I.js';
+import { EllipsisIcon } from './chunk-5ESF6N36.js';
+import { Badge } from './chunk-S4JAHKOP.js';
+import { useMemo } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var EMPTY_MEMBER_ACTIONS = [];
+function statusBadge(status) {
+  switch (status) {
+    case "active":
+      return /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "border-success/20 bg-success/10 text-success", children: "Active" });
+    case "invited":
+      return /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "border-warning/20 bg-warning/10 text-warning", children: "Invited" });
+    case "suspended":
+      return /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "border-destructive/20 bg-destructive/10 text-destructive", children: "Suspended" });
+  }
+}
+function mapState(state) {
+  switch (state) {
+    case void 0:
+      return void 0;
+    case "invited-member":
+    case "active-member":
+      return "selected-row";
+    case "saving":
+      return "loading";
+    case "fatal-error":
+      return "error";
+    default:
+      return state;
+  }
+}
+function TeamSettingsPageKit({
+  shell,
+  state,
+  members,
+  seatSummary,
+  search,
+  inviteAction,
+  memberActions = EMPTY_MEMBER_ACTIONS,
+  onMemberAction,
+  selectedMemberId = null,
+  onSelectedMemberChange,
+  errorMessage,
+  className
+}) {
+  const membersById = useMemo(
+    () => new Map(members.map((member) => [member.id, member])),
+    [members]
+  );
+  const mappedRows = useMemo(
+    () => members.map((member) => ({
+      id: member.id,
+      summaryLabel: member.name,
+      cells: {
+        member: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsxs(Avatar, { className: "h-9 w-9 border border-border-subtle", children: [
+            member.avatarUrl ? /* @__PURE__ */ jsx(AvatarImage, { src: member.avatarUrl, alt: member.name }) : null,
+            /* @__PURE__ */ jsx(AvatarFallback, { children: member.avatarFallback ?? member.name.slice(0, 1).toUpperCase() })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium text-text-primary", children: member.name }),
+            /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-text-secondary", children: member.email })
+          ] })
+        ] }),
+        role: /* @__PURE__ */ jsx(RoleBadge, { role: member.role }),
+        status: statusBadge(member.status),
+        joined: member.joinedLabel ?? "-",
+        actions: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", "aria-label": `Actions for ${member.name}`, children: /* @__PURE__ */ jsx(EllipsisIcon, { size: 16 }) }) }),
+          /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", children: memberActions.map((action) => /* @__PURE__ */ jsx(
+            DropdownMenuItem,
+            {
+              className: action.tone === "destructive" ? "text-destructive focus:text-destructive" : void 0,
+              onClick: () => onMemberAction?.(member.id, action.id),
+              children: action.label
+            },
+            action.id
+          )) })
+        ] })
+      }
+    })),
+    [memberActions, members, onMemberAction]
+  );
+  const inviteDisabled = inviteAction.canInvite === false;
+  return /* @__PURE__ */ jsx(
+    CrudListDetailPageKit,
+    {
+      shell,
+      title: "Team settings",
+      description: "Manage members, roles, and seat usage through a consistent workspace roster contract.",
+      state: mapState(state),
+      columns: [
+        { id: "member", header: "Member" },
+        { id: "role", header: "Role" },
+        { id: "status", header: "Status" },
+        { id: "joined", header: "Joined" },
+        { id: "actions", header: "Actions", headerClassName: "w-[80px]" }
+      ],
+      rows: mappedRows,
+      filterControls: [
+        {
+          id: "team-search",
+          label: search.label ?? "Search members",
+          value: search.value,
+          onChange: search.onChange,
+          placeholder: search.placeholder
+        }
+      ],
+      selectedRowId: selectedMemberId,
+      onRowSelect: onSelectedMemberChange,
+      detailPanel: {
+        title: "Member detail",
+        description: "Inspect role, status, and contact details for the selected member.",
+        mode: "inline",
+        renderDetail: (row) => {
+          const member = membersById.get(row.id);
+          if (!member) {
+            return null;
+          }
+          return /* @__PURE__ */ jsxs("div", { className: "space-y-2 text-sm", children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-text-secondary", children: member.email }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+              /* @__PURE__ */ jsx(RoleBadge, { role: member.role }),
+              statusBadge(member.status)
+            ] }),
+            /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-text-secondary", children: [
+              "Joined ",
+              member.joinedLabel ?? "-"
+            ] })
+          ] });
+        }
+      },
+      emptyState: {
+        title: "No team members",
+        description: "Invite your first member to start collaborating."
+      },
+      pagination: {
+        page: 1,
+        totalPages: 1,
+        onPageChange: () => {
+        }
+      },
+      errorMessage: errorMessage ?? "Team settings are unavailable. Retry shortly.",
+      headerActions: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end gap-1", children: [
+        /* @__PURE__ */ jsx(Button, { onClick: inviteAction.onInvite, disabled: inviteDisabled, children: inviteAction.label }),
+        /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-text-secondary", children: [
+          seatSummary.usedSeats,
+          " of ",
+          seatSummary.totalSeats,
+          " seats used"
+        ] }),
+        inviteDisabled && inviteAction.disabledReason ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-warning", children: inviteAction.disabledReason }) : null
+      ] }),
+      className
+    }
+  );
+}
+
+export { TeamSettingsPageKit };

package/dist/chunk-DNJEVMDY.js

@@ -0,0 +1,40 @@
+import { AccountLockedBlock } from './chunk-FX23F33E.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function AccountLockedPageKit({
+  reason = "too_many_attempts",
+  unlockMinutes,
+  onContactSupport,
+  onBackToLogin,
+  title,
+  description,
+  errorMessage,
+  className,
+  cardClassName
+}) {
+  return /* @__PURE__ */ jsx("section", { className: cn("min-h-dvh w-full bg-background px-4 py-12 md:px-8 md:py-20", className), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex w-full max-w-5xl flex-col items-center justify-center gap-4", children: [
+    errorMessage ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "alert",
+        className: "w-full max-w-sm rounded-md border border-destructive/40 bg-destructive/10 px-4 py-3 text-sm text-destructive",
+        children: errorMessage
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(
+      AccountLockedBlock,
+      {
+        className: cn("w-full", cardClassName),
+        reason,
+        unlockMinutes,
+        onContactSupport,
+        onBackToLogin,
+        title,
+        description
+      }
+    )
+  ] }) });
+}
+
+export { AccountLockedPageKit };

package/dist/chunk-DNJOBML6.js

@@ -0,0 +1,66 @@
+import { Typography } from './chunk-N53OMWW2.js';
+import { Button } from './chunk-7KIDDF3I.js';
+import { useMotionConfig, m, motionSpring } from './chunk-PD2YEH3H.js';
+import { InfoIcon } from './chunk-W3B3UOEG.js';
+import { AlertTriangleIcon } from './chunk-SXHYB7JB.js';
+import { XIcon } from './chunk-UIUMTURU.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { useState } from 'react';
+import { AnimatePresence } from 'motion/react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var variantStyles = {
+  info: "border-info/30 bg-info/5 text-info",
+  warning: "border-warning/30 bg-warning/5 text-warning",
+  accent: "border-accent/30 bg-accent/5 text-accent"
+};
+var variantIcons = {
+  info: /* @__PURE__ */ jsx(InfoIcon, { size: 16, className: "shrink-0" }),
+  warning: /* @__PURE__ */ jsx(AlertTriangleIcon, { size: 16, className: "shrink-0" }),
+  accent: /* @__PURE__ */ jsx(InfoIcon, { size: 16, className: "shrink-0" })
+};
+function BannerBlock({
+  children,
+  variant = "info",
+  dismissible = true,
+  onDismiss,
+  className
+}) {
+  const motionConfig = useMotionConfig();
+  const [visible, setVisible] = useState(true);
+  const handleDismiss = () => {
+    setVisible(false);
+    onDismiss?.();
+  };
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: !!visible && /* @__PURE__ */ jsxs(
+    m.div,
+    {
+      initial: { opacity: 0, y: -12 },
+      animate: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: -12 },
+      transition: { ...motionSpring.snappy, ...motionConfig },
+      className: cn(
+        "flex items-center gap-4 rounded-lg border px-4 py-4",
+        variantStyles[variant],
+        className
+      ),
+      children: [
+        variantIcons[variant],
+        /* @__PURE__ */ jsx(Typography, { variant: "small", className: "flex-1 font-medium", children }),
+        !!dismissible && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            className: "shrink-0 hover:bg-transparent",
+            onClick: handleDismiss,
+            "aria-label": "Dismiss",
+            children: /* @__PURE__ */ jsx(XIcon, { size: 14 })
+          }
+        )
+      ]
+    }
+  ) });
+}
+
+export { BannerBlock };

package/dist/chunk-FTGFOK6T.js

@@ -0,0 +1,69 @@
+import { Typography } from './chunk-N53OMWW2.js';
+import { Heading } from './chunk-WI547C47.js';
+import { Dialog, DialogTrigger, DialogContent } from './chunk-W73JAOHW.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';
+
+var defaultImages = [
+  { src: "https://picsum.photos/seed/a/600/400", alt: "Abstract gradient", caption: "Design exploration #1" },
+  { src: "https://picsum.photos/seed/b/600/600", alt: "Dark interface", caption: "Dashboard concept" },
+  { src: "https://picsum.photos/seed/c/600/400", alt: "Color study", caption: "Arctic Glow palette study" },
+  { src: "https://picsum.photos/seed/d/600/500", alt: "Typography layout", caption: "Type specimen" },
+  { src: "https://picsum.photos/seed/e/600/400", alt: "Component grid", caption: "Component inventory" },
+  { src: "https://picsum.photos/seed/f/600/600", alt: "Icon set", caption: "Animated icons showcase" }
+];
+function GalleryBlock({
+  images = defaultImages,
+  columns = 3,
+  title = "Gallery",
+  className
+}) {
+  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: [
+    !!title && /* @__PURE__ */ jsx(ScrollFadeIn, { children: /* @__PURE__ */ jsx(Heading, { level: 2, size: "section", className: "mb-8 text-text-primary", children: title }) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "grid gap-4",
+        style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` },
+        children: images.map((image, index) => /* @__PURE__ */ jsx(ScrollFadeIn, { delay: index * 0.05, children: /* @__PURE__ */ jsxs(Dialog, { children: [
+          /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+            "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",
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "relative aspect-[4/3] overflow-hidden", children: /* @__PURE__ */ jsx(
+                  Image,
+                  {
+                    src: image.src,
+                    alt: image.alt,
+                    className: "h-full w-full object-cover transition-transform duration-300 group-hover:scale-105",
+                    fill: true,
+                    sizes: "(max-width: 768px) 100vw, 33vw"
+                  }
+                ) }),
+                image.caption && /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 bottom-0 bg-gradient-to-t from-overlay/80 to-transparent px-4 py-2", children: /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-overlay-foreground", children: image.caption }) })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-3xl p-0 overflow-hidden", children: [
+            /* @__PURE__ */ jsx(
+              Image,
+              {
+                src: image.src,
+                alt: image.alt,
+                className: "w-full",
+                width: 600,
+                height: 400
+              }
+            ),
+            image.caption && /* @__PURE__ */ jsx("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsx(Typography, { variant: "body", className: "text-text-primary", children: image.caption }) })
+          ] })
+        ] }) }, index))
+      }
+    )
+  ] }) });
+}
+
+export { GalleryBlock };

package/dist/{chunk-7A2RXKGH.js → chunk-GJ557DGH.js}

@@ -3,7 +3,7 @@ import { AnimatedGradientText } from './chunk-XZ3A33GP.js';
 import { Heading } from './chunk-WI547C47.js';
 import { siteConfig } from './chunk-A7NUWD76.js';
 import { Card, CardHeader, CardContent } from './chunk-AH6YSYYT.js';
-import { MouseGlow } from './chunk-DSMGCFMJ.js';
+import { MouseGlow } from './chunk-POFFOUQW.js';
 import { Button } from './chunk-7KIDDF3I.js';
 import { m, heroStagger } from './chunk-PD2YEH3H.js';
 import { ZapIcon } from './chunk-FLF5AMNO.js';

package/dist/chunk-HFBJ6L6O.js

@@ -0,0 +1,104 @@
+import { toast } from './chunk-5Y4BOIYO.js';
+import { Textarea } from './chunk-4OBE2FS2.js';
+import { StaggerChildren } from './chunk-DQPK2XRL.js';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from './chunk-WH62BE24.js';
+import { Form, FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage } from './chunk-UN2SJ42K.js';
+import { Input } from './chunk-AP3XXYAY.js';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from './chunk-AH6YSYYT.js';
+import { Button } from './chunk-7KIDDF3I.js';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var profileFormSchema = z.object({
+  username: z.string().min(2, {
+    message: "Username must be at least 2 characters."
+  }).max(30, {
+    message: "Username must not be longer than 30 characters."
+  }),
+  email: z.string({
+    error: "Please select an email to display."
+  }).email(),
+  bio: z.string().max(160).min(4)
+});
+var defaultFormValues = {
+  bio: "I own a computer."
+};
+function CreateBlock({
+  title = "Create Profile",
+  description = "Example of a complex form with Zod validation.",
+  submitLabel = "Update profile",
+  onSubmit: onSubmitProp,
+  className
+}) {
+  const form = useForm({
+    resolver: zodResolver(profileFormSchema),
+    defaultValues: defaultFormValues,
+    mode: "onChange"
+  });
+  function handleSubmit(data) {
+    if (onSubmitProp) {
+      onSubmitProp(data);
+      return;
+    }
+    toast({
+      title: "You submitted the following values:",
+      description: /* @__PURE__ */ jsx("pre", { className: "mt-2 w-full max-w-[340px] overflow-x-auto rounded-md bg-surface-active p-4", children: /* @__PURE__ */ jsx("code", { className: "text-text-primary", children: JSON.stringify(data, null, 2) }) })
+    });
+  }
+  return /* @__PURE__ */ jsxs(Card, { className: className ?? "w-full max-w-2xl mx-auto", children: [
+    /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsx(CardTitle, { children: title }),
+      /* @__PURE__ */ jsx(CardDescription, { children: description })
+    ] }),
+    /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(Form, { ...form, children: /* @__PURE__ */ jsx(StaggerChildren, { staggerMs: 60, className: "space-y-8 text-text-primary", children: /* @__PURE__ */ jsxs("form", { onSubmit: form.handleSubmit(handleSubmit), className: "contents", children: [
+      /* @__PURE__ */ jsx(
+        FormField,
+        {
+          control: form.control,
+          name: "username",
+          render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
+            /* @__PURE__ */ jsx(FormLabel, { children: "Username" }),
+            /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Input, { placeholder: "shadcn", ...field }) }),
+            /* @__PURE__ */ jsx(FormDescription, { children: "Public display name." }),
+            /* @__PURE__ */ jsx(FormMessage, {})
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FormField,
+        {
+          control: form.control,
+          name: "email",
+          render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
+            /* @__PURE__ */ jsx(FormLabel, { children: "Email" }),
+            /* @__PURE__ */ jsxs(Select, { onValueChange: field.onChange, defaultValue: field.value, children: [
+              /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select email" }) }) }),
+              /* @__PURE__ */ jsxs(SelectContent, { children: [
+                /* @__PURE__ */ jsx(SelectItem, { value: "m@example.com", children: "m@example.com" }),
+                /* @__PURE__ */ jsx(SelectItem, { value: "m@google.com", children: "m@google.com" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(FormMessage, {})
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FormField,
+        {
+          control: form.control,
+          name: "bio",
+          render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
+            /* @__PURE__ */ jsx(FormLabel, { children: "Bio" }),
+            /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Textarea, { placeholder: "Bio...", ...field }) }),
+            /* @__PURE__ */ jsx(FormMessage, {})
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { type: "submit", children: submitLabel })
+    ] }) }) }) })
+  ] });
+}
+
+export { CreateBlock };

package/dist/chunk-HPTHS7SX.js

@@ -0,0 +1,52 @@
+import { Typography } from './chunk-N53OMWW2.js';
+import { Card, CardHeader, CardTitle, CardContent } from './chunk-AH6YSYYT.js';
+import { Button } from './chunk-7KIDDF3I.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function variantLabel(variant) {
+  switch (variant) {
+    case "not-found":
+      return "Not found";
+    case "server-error":
+      return "Server error";
+    case "generic-fallback":
+      return "Fallback";
+  }
+}
+function ErrorPageKit({
+  variant,
+  title,
+  description,
+  metadata,
+  primaryAction,
+  secondaryAction,
+  supportContent,
+  className
+}) {
+  const metadataEntries = [
+    ...metadata?.statusCode ? [["Status", metadata.statusCode]] : [],
+    ...metadata?.errorCode ? [["Error code", metadata.errorCode]] : [],
+    ...metadata?.incidentId ? [["Incident", metadata.incidentId]] : []
+  ];
+  return /* @__PURE__ */ jsx("section", { className: cn("min-h-[70dvh] bg-background px-6 py-12 text-text-primary", className), children: /* @__PURE__ */ jsx("div", { className: "mx-auto flex w-full max-w-2xl flex-col items-center justify-center", children: /* @__PURE__ */ jsxs(Card, { className: "w-full", children: [
+    /* @__PURE__ */ jsxs(CardHeader, { className: "space-y-3", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "small", className: "uppercase tracking-[0.18em] text-text-tertiary", children: variantLabel(variant) }),
+      /* @__PURE__ */ jsx(CardTitle, { children: title }),
+      /* @__PURE__ */ jsx(Typography, { variant: "muted", children: description })
+    ] }),
+    /* @__PURE__ */ jsxs(CardContent, { className: "space-y-5", children: [
+      metadataEntries.length > 0 ? /* @__PURE__ */ jsx("div", { className: "grid gap-2 rounded-md border border-border/70 bg-surface/40 p-3 text-sm", children: metadataEntries.map(([label, value]) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-text-secondary", children: label }),
+        /* @__PURE__ */ jsx("span", { className: "font-medium text-text-primary", children: value })
+      ] }, label)) }) : null,
+      supportContent ? /* @__PURE__ */ jsx("div", { className: "rounded-md border border-border/60 bg-surface/30 px-3 py-2 text-sm text-text-secondary", children: supportContent }) : null,
+      primaryAction || secondaryAction ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+        primaryAction ? /* @__PURE__ */ jsx(Button, { type: "button", onClick: primaryAction.onAction, children: primaryAction.label }) : null,
+        secondaryAction ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: secondaryAction.onAction, children: secondaryAction.label }) : null
+      ] }) : null
+    ] })
+  ] }) }) });
+}
+
+export { ErrorPageKit };