@vadimcomanescu/nadicode-design-system 2.0.6 → 2.0.8

package/dist/chunk-VZCB4APK.js

@@ -0,0 +1,94 @@
+import { Typography } from './chunk-N53OMWW2.js';
+import { Heading } from './chunk-WI547C47.js';
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from './chunk-PXDHNGTG.js';
+import { ScrollFadeIn } from './chunk-I23DDSU7.js';
+import { CheckIcon } from './chunk-CXACRCZ4.js';
+import { XIcon } from './chunk-UIUMTURU.js';
+import { Badge } from './chunk-S4JAHKOP.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var defaultPlans = [
+  {
+    name: "Starter",
+    features: {
+      "Components": "50+",
+      "Design Tokens": true,
+      "Dark Mode": true,
+      "TypeScript": true,
+      "Priority Support": false,
+      "Custom Branding": false,
+      "SSO / SAML": false,
+      "SLA Guarantee": false
+    }
+  },
+  {
+    name: "Pro",
+    featured: true,
+    features: {
+      "Components": "100+",
+      "Design Tokens": true,
+      "Dark Mode": true,
+      "TypeScript": true,
+      "Priority Support": true,
+      "Custom Branding": true,
+      "SSO / SAML": false,
+      "SLA Guarantee": false
+    }
+  },
+  {
+    name: "Enterprise",
+    features: {
+      "Components": "100+",
+      "Design Tokens": true,
+      "Dark Mode": true,
+      "TypeScript": true,
+      "Priority Support": true,
+      "Custom Branding": true,
+      "SSO / SAML": true,
+      "SLA Guarantee": true
+    }
+  }
+];
+function ComparisonBlock({
+  plans = defaultPlans,
+  title = "Compare plans",
+  description = "See which plan is right for your team.",
+  className
+}) {
+  const featureNames = plans.length > 0 ? Object.keys(plans[0].features) : [];
+  return /* @__PURE__ */ jsx("section", { className: cn("py-16 md:py-24", className), children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-5xl px-6", children: [
+    /* @__PURE__ */ jsx(ScrollFadeIn, { children: /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center", children: [
+      /* @__PURE__ */ jsx(Heading, { level: 2, size: "section", className: "text-text-primary", children: title }),
+      !!description && /* @__PURE__ */ jsx(Typography, { variant: "body", className: "mt-4 text-text-secondary", children: description })
+    ] }) }),
+    /* @__PURE__ */ jsx(ScrollFadeIn, { delay: 0.1, children: /* @__PURE__ */ jsx("div", { className: "overflow-x-auto rounded-lg border border-border", children: /* @__PURE__ */ jsxs(Table, { children: [
+      /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableHead, { className: "w-[200px] text-text-primary font-semibold", children: "Feature" }),
+        plans.map((plan) => /* @__PURE__ */ jsx(
+          TableHead,
+          {
+            className: cn(
+              "text-center font-semibold",
+              plan.featured && "text-accent"
+            ),
+            children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1.5", children: [
+              plan.name,
+              plan.featured && /* @__PURE__ */ jsx(Badge, { variant: "accent", className: "text-[10px]", children: "Popular" })
+            ] })
+          },
+          plan.name
+        ))
+      ] }) }),
+      /* @__PURE__ */ jsx(TableBody, { children: featureNames.map((feature) => /* @__PURE__ */ jsxs(TableRow, { className: "transition-colors hover:bg-surface-active/50", children: [
+        /* @__PURE__ */ jsx(TableCell, { className: "font-medium text-text-primary", children: feature }),
+        plans.map((plan) => {
+          const value = plan.features[feature];
+          return /* @__PURE__ */ jsx(TableCell, { className: "text-center", children: typeof value === "boolean" ? value ? /* @__PURE__ */ jsx(CheckIcon, { size: 16, className: "mx-auto text-success" }) : /* @__PURE__ */ jsx(XIcon, { size: 16, className: "mx-auto text-text-tertiary" }) : /* @__PURE__ */ jsx("span", { className: "text-sm text-text-primary", children: value }) }, plan.name);
+        })
+      ] }, feature)) })
+    ] }) }) })
+  ] }) });
+}
+
+export { ComparisonBlock };

package/dist/chunk-W7FXDRQJ.js

@@ -0,0 +1,94 @@
+import { InputOTP, InputOTPGroup, InputOTPSlot } from './chunk-WN5ONOHC.js';
+import { Separator } from './chunk-CUZJIDU7.js';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './chunk-AH6YSYYT.js';
+import { Alert, AlertDescription } from './chunk-GJUR6HT3.js';
+import { m, scaleIn } from './chunk-PD2YEH3H.js';
+import { bezier } from './chunk-CRY67BIF.js';
+import { ShieldCheckIcon } from './chunk-BFLN54VR.js';
+import { cn } from './chunk-QYZT24TS.js';
+import * as React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var SHAKE_TRANSITION = { duration: 0.3, ease: bezier["out-cubic"] };
+function TwoFactorChallengeBlock({
+  className,
+  onVerify,
+  onUseBackupCode,
+  onBackToLogin,
+  error,
+  title = "Two-factor authentication",
+  description = "Enter the 6-digit code from your authenticator app",
+  backupCodeLabel = "Use a backup code"
+}) {
+  const [code, setCode] = React.useState("");
+  const [shake, setShake] = React.useState(false);
+  React.useEffect(() => {
+    if (error) {
+      setShake(true);
+      setCode("");
+      const timeout = setTimeout(() => setShake(false), 300);
+      return () => clearTimeout(timeout);
+    }
+  }, [error]);
+  const handleComplete = (value) => {
+    setCode(value);
+    if (value.length === 6) {
+      onVerify?.(value);
+    }
+  };
+  return /* @__PURE__ */ jsx(m.div, { ...scaleIn, className: cn("w-full max-w-sm mx-auto", className), children: /* @__PURE__ */ jsxs(Card, { children: [
+    /* @__PURE__ */ jsxs(CardHeader, { className: "text-center", children: [
+      /* @__PURE__ */ jsx("div", { className: "mx-auto mb-2", children: /* @__PURE__ */ jsx(ShieldCheckIcon, { size: 32, className: "text-text-secondary" }) }),
+      /* @__PURE__ */ jsx(CardTitle, { className: "text-2xl", children: title }),
+      /* @__PURE__ */ jsx(CardDescription, { children: description })
+    ] }),
+    /* @__PURE__ */ jsxs(CardContent, { className: "grid gap-4", 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: 6,
+              value: code,
+              onChange: handleComplete,
+              children: /* @__PURE__ */ jsxs(InputOTPGroup, { children: [
+                /* @__PURE__ */ jsx(InputOTPSlot, { index: 0 }),
+                /* @__PURE__ */ jsx(InputOTPSlot, { index: 1 }),
+                /* @__PURE__ */ jsx(InputOTPSlot, { index: 2 }),
+                /* @__PURE__ */ jsx(InputOTPSlot, { index: 3 }),
+                /* @__PURE__ */ jsx(InputOTPSlot, { index: 4 }),
+                /* @__PURE__ */ jsx(InputOTPSlot, { index: 5 })
+              ] })
+            }
+          )
+        }
+      ),
+      !!error && /* @__PURE__ */ jsx(Alert, { variant: "destructive", children: /* @__PURE__ */ jsx(AlertDescription, { children: error }) }),
+      /* @__PURE__ */ jsx(Separator, {}),
+      /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onUseBackupCode,
+          className: "text-sm text-accent hover:text-accent/80 transition-colors",
+          children: backupCodeLabel
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx(CardFooter, { className: "justify-center", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onBackToLogin,
+        className: "text-sm text-text-tertiary hover:text-text-primary transition-colors",
+        children: "Back to login"
+      }
+    ) })
+  ] }) });
+}
+
+export { TwoFactorChallengeBlock };

package/dist/{chunk-5I3FWRC5.js → chunk-WOYBVPXK.js}

@@ -5,26 +5,26 @@ import { Button } from './chunk-7KIDDF3I.js';
 import { MenuIcon } from './chunk-JMCSAGZ3.js';
 import { XIcon } from './chunk-UIUMTURU.js';
 import { useTranslations } from 'next-intl';
-import React from 'react';
+import { useState, useRef } from 'react';
 import { useScroll, useMotionValueEvent } from 'motion/react';
 import Link from 'next/link';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var defaultMenuItems = siteConfig.nav.header;
-var HeroHeader = ({
+function HeaderBlock({
   menuItems = defaultMenuItems,
   loginLabel = "Login",
   signUpLabel = "Sign Up",
   loginHref = "#",
   signUpHref = "#",
   className
-}) => {
+}) {
   const t = useTranslations("blocks.headerBlock");
-  const [mobileOpen, setMobileOpen] = React.useState(false);
-  const navBarRef = React.useRef(null);
-  const innerRef = React.useRef(null);
-  const logoRef = React.useRef(null);
-  const wasScrolledRef = React.useRef(false);
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const navBarRef = useRef(null);
+  const innerRef = useRef(null);
+  const logoRef = useRef(null);
+  const wasScrolledRef = useRef(false);
   const { scrollYProgress } = useScroll();
   useMotionValueEvent(scrollYProgress, "change", (latest) => {
     const scrolled = latest > 0.05;
@@ -143,6 +143,6 @@ var HeroHeader = ({
       )
     }
   ) });
-};
+}
 
-export { HeroHeader };
+export { HeaderBlock };

package/dist/chunk-WST5NLLC.js

@@ -0,0 +1,73 @@
+import { cn } from './chunk-QYZT24TS.js';
+import * as React from 'react';
+import { formatDistanceToNow } from 'date-fns';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var TICK_INTERVAL_MS = 3e4;
+var listeners = [];
+var tick = 0;
+var intervalId = null;
+function subscribe(callback) {
+  listeners = [...listeners, callback];
+  if (listeners.length === 1) {
+    intervalId = setInterval(() => {
+      tick++;
+      listeners.forEach((l) => l());
+    }, TICK_INTERVAL_MS);
+  }
+  return () => {
+    listeners = listeners.filter((l) => l !== callback);
+    if (listeners.length === 0 && intervalId !== null) {
+      clearInterval(intervalId);
+      intervalId = null;
+    }
+  };
+}
+function getSnapshot() {
+  return tick;
+}
+function getServerSnapshot() {
+  return 0;
+}
+function DataFreshness({
+  lastUpdated,
+  isLive = false,
+  staleThresholdMs = 3e5,
+  className,
+  ref
+}) {
+  React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  const elapsedMs = Date.now() - lastUpdated.getTime();
+  const isStale = elapsedMs > staleThresholdMs;
+  const relativeTime = formatDistanceToNow(lastUpdated, { addSuffix: true });
+  let statusText;
+  if (isLive && !isStale) {
+    statusText = "Live";
+  } else if (isLive && isStale) {
+    statusText = `Stale \u2013 Updated ${relativeTime}`;
+  } else {
+    statusText = `Updated ${relativeTime}`;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn("flex items-center gap-2", className),
+      children: [
+        isLive && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-slot": "freshness-dot",
+            className: cn(
+              "size-2 shrink-0 rounded-full motion-reduce:animate-none",
+              isStale ? "bg-warning" : "bg-success animate-pulse"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-text-tertiary", children: statusText })
+      ]
+    }
+  );
+}
+
+export { DataFreshness };

package/dist/chunk-X6VXWEDO.js

@@ -0,0 +1,125 @@
+import { Spinner } from './chunk-ZLSWCV55.js';
+import { PasswordInput } from './chunk-UJDEGCCZ.js';
+import { Field, FieldLabel } from './chunk-RX5EUODB.js';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './chunk-AH6YSYYT.js';
+import { Button } from './chunk-7KIDDF3I.js';
+import { m, scaleIn } from './chunk-PD2YEH3H.js';
+import { KeyIcon } from './chunk-QSU23VYZ.js';
+import { CheckIcon } from './chunk-CXACRCZ4.js';
+import { XIcon } from './chunk-UIUMTURU.js';
+import { cn } from './chunk-QYZT24TS.js';
+import * as React from 'react';
+import { useTranslations } from 'next-intl';
+import { useReducedMotion } from 'motion/react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var RULE_TESTS = [
+  { key: "minLength", test: (v) => v.length >= 8 },
+  { key: "uppercase", test: (v) => /[A-Z]/.test(v) },
+  { key: "number", test: (v) => /\d/.test(v) },
+  { key: "special", test: (v) => /[^A-Za-z0-9]/.test(v) }
+];
+function ResetPasswordBlock({
+  className,
+  onSubmit,
+  onBackToLogin,
+  title,
+  description
+}) {
+  const prefersReduced = useReducedMotion();
+  const t = useTranslations("auth.reset");
+  const [password, setPassword] = React.useState("");
+  const [confirm, setConfirm] = React.useState("");
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState("");
+  const resolvedTitle = title ?? t("title");
+  const resolvedDescription = description ?? t("description");
+  const rules = React.useMemo(() => RULE_TESTS.map((r) => ({ label: t(`rules.${r.key}`), test: r.test })), [t]);
+  const allRulesPass = rules.every((r) => r.test(password));
+  const passwordsMatch = password === confirm && confirm.length > 0;
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!allRulesPass) return;
+    if (!passwordsMatch) {
+      setError(t("passwordMismatch"));
+      return;
+    }
+    setError("");
+    setLoading(true);
+    onSubmit?.(password);
+  };
+  return /* @__PURE__ */ jsx(m.div, { ...prefersReduced ? {} : scaleIn, className: cn("w-full max-w-sm mx-auto", className), children: /* @__PURE__ */ jsxs(Card, { children: [
+    /* @__PURE__ */ jsxs(CardHeader, { className: "text-center", children: [
+      /* @__PURE__ */ jsx("div", { className: "mx-auto mb-2", children: /* @__PURE__ */ jsx(KeyIcon, { size: 32, className: "text-text-secondary" }) }),
+      /* @__PURE__ */ jsx(CardTitle, { className: "text-2xl", children: resolvedTitle }),
+      /* @__PURE__ */ jsx(CardDescription, { children: resolvedDescription })
+    ] }),
+    /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("form", { noValidate: true, onSubmit: handleSubmit, className: "grid gap-4", children: [
+      /* @__PURE__ */ jsxs(Field, { children: [
+        /* @__PURE__ */ jsx(FieldLabel, { htmlFor: "new-password", children: t("newPassword") }),
+        /* @__PURE__ */ jsx(
+          PasswordInput,
+          {
+            name: "password",
+            id: "new-password",
+            value: password,
+            onChange: (e) => setPassword(e.target.value),
+            placeholder: t("newPasswordPlaceholder"),
+            autoComplete: "new-password"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(Field, { children: [
+        /* @__PURE__ */ jsx(FieldLabel, { htmlFor: "confirm-password", children: t("confirmPassword") }),
+        /* @__PURE__ */ jsx(
+          PasswordInput,
+          {
+            name: "confirmPassword",
+            id: "confirm-password",
+            value: confirm,
+            onChange: (e) => setConfirm(e.target.value),
+            placeholder: t("confirmPasswordPlaceholder"),
+            autoComplete: "new-password"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("ul", { className: "space-y-1.5 text-xs", "aria-label": "Password requirements", children: [
+        rules.map((rule) => {
+          const pass = rule.test(password);
+          return /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2", children: [
+            pass ? /* @__PURE__ */ jsx(CheckIcon, { size: 14, className: "text-success shrink-0" }) : /* @__PURE__ */ jsx(XIcon, { size: 14, className: "text-text-tertiary shrink-0" }),
+            /* @__PURE__ */ jsx("span", { className: pass ? "text-success" : "text-text-tertiary", children: rule.label })
+          ] }, rule.label);
+        }),
+        /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2", children: [
+          passwordsMatch ? /* @__PURE__ */ jsx(CheckIcon, { size: 14, className: "text-success shrink-0" }) : /* @__PURE__ */ jsx(XIcon, { size: 14, className: "text-text-tertiary shrink-0" }),
+          /* @__PURE__ */ jsx("span", { className: passwordsMatch ? "text-success" : "text-text-tertiary", children: t("rules.match") })
+        ] })
+      ] }),
+      !!error && /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-destructive", children: error }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "accent",
+          className: "w-full",
+          disabled: loading || !allRulesPass || !passwordsMatch,
+          children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Spinner, { className: "mr-2" }),
+            t("pending")
+          ] }) : t("submit")
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx(CardFooter, { className: "justify-center", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onBackToLogin,
+        className: "text-sm text-text-tertiary hover:text-text-primary transition-colors",
+        children: t("backToLogin")
+      }
+    ) })
+  ] }) });
+}
+
+export { ResetPasswordBlock };

package/dist/chunk-XTASI4IY.js

@@ -0,0 +1,60 @@
+import { useSafeTimeout } from './chunk-MDAYDDTC.js';
+import { ScrollFadeIn } from './chunk-I23DDSU7.js';
+import { Button } from './chunk-7KIDDF3I.js';
+import { CheckIcon } from './chunk-CXACRCZ4.js';
+import { CopyIcon } from './chunk-TV4RSQH4.js';
+import { cn } from './chunk-QYZT24TS.js';
+import * as React from 'react';
+import Prism from 'prismjs';
+import 'prismjs/themes/prism-tomorrow.css';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function CodeBlock({
+  code,
+  language = "javascript",
+  filename,
+  className,
+  ...props
+}) {
+  const [copied, setCopied] = React.useState(false);
+  const setSafeTimeout = useSafeTimeout();
+  React.useEffect(() => {
+    Prism.highlightAll();
+  }, [code, language]);
+  const onCopy = () => {
+    navigator.clipboard.writeText(code);
+    setCopied(true);
+    setSafeTimeout(() => setCopied(false), 2e3);
+  };
+  return /* @__PURE__ */ jsx(ScrollFadeIn, { children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative overflow-hidden rounded-lg glass-panel",
+        className
+      ),
+      ...props,
+      children: [
+        !!filename && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between border-b border-border/30 bg-surface-hover px-4 py-2 text-xs text-text-tertiary", children: /* @__PURE__ */ jsx("span", { children: filename }) }),
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              size: "icon",
+              variant: "ghost",
+              className: "absolute right-1 top-1 text-text-tertiary hover:bg-surface-hover hover:text-text-secondary",
+              onClick: onCopy,
+              children: [
+                copied ? /* @__PURE__ */ jsx(CheckIcon, { size: 14 }) : /* @__PURE__ */ jsx(CopyIcon, { size: 14 }),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Copy code" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "overflow-x-auto p-4", children: /* @__PURE__ */ jsx("pre", { className: "!m-0 !bg-transparent !p-0", children: /* @__PURE__ */ jsx("code", { className: `language-${language}`, children: code }) }) })
+        ] })
+      ]
+    }
+  ) });
+}
+
+export { CodeBlock };

package/dist/chunk-Z233ZQZE.js

@@ -0,0 +1,33 @@
+import { HeaderBlock } from './chunk-WOYBVPXK.js';
+import { FooterBlock } from './chunk-AYWL4IYM.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function MarketingShellPageKit({
+  navigationItems,
+  primaryAction,
+  secondaryAction,
+  announcement,
+  footerProps,
+  children,
+  className,
+  contentClassName
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("min-h-dvh bg-background text-text-primary", className), children: [
+    announcement ? /* @__PURE__ */ jsx("div", { className: "border-b border-border/70 bg-surface/60 px-4 py-2 text-center text-sm text-text-secondary", children: announcement }) : null,
+    /* @__PURE__ */ jsx(
+      HeaderBlock,
+      {
+        menuItems: navigationItems,
+        loginLabel: secondaryAction?.label,
+        loginHref: secondaryAction?.href,
+        signUpLabel: primaryAction?.label,
+        signUpHref: primaryAction?.href
+      }
+    ),
+    /* @__PURE__ */ jsx("main", { className: cn("pt-28 md:pt-32", contentClassName), children }),
+    /* @__PURE__ */ jsx(FooterBlock, { ...footerProps })
+  ] });
+}
+
+export { MarketingShellPageKit };

package/dist/chunk-ZKLB5N3Q.js

@@ -0,0 +1,110 @@
+import { SidebarProvider, Sidebar, SidebarHeader, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarSeparator, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarGroupContent, SidebarMenuBadge, SidebarInset, SidebarTrigger } from './chunk-J2DCQDXO.js';
+import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbPage, BreadcrumbLink, BreadcrumbSeparator } from './chunk-35EX5FP5.js';
+import { Avatar, AvatarFallback } from './chunk-NAAU5IWU.js';
+import { Badge } from './chunk-S4JAHKOP.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { useMemo, Fragment } from 'react';
+import Link from 'next/link';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var EMPTY_BREADCRUMBS = [];
+function filterItemsByRole(items, currentRole) {
+  return items.filter((item) => {
+    if (!item.roles || item.roles.length === 0) {
+      return true;
+    }
+    if (!currentRole) {
+      return true;
+    }
+    return item.roles.includes(currentRole);
+  });
+}
+function deriveAvatarFallback(workspaceName) {
+  const initials = workspaceName.split(/\s+/).filter(Boolean).slice(0, 2).map((part) => part.charAt(0).toUpperCase()).join("");
+  return initials || "WS";
+}
+function NavigationShellPageKit({
+  workspaceName,
+  workspaceHref = "#",
+  navigationGroups,
+  currentRole,
+  activeHref,
+  sidebarOpen,
+  onSidebarOpenChange,
+  defaultSidebarOpen = true,
+  breadcrumbs = EMPTY_BREADCRUMBS,
+  headerSearch,
+  headerNotifications,
+  headerActions,
+  user,
+  emptyNavigationMessage = "No navigation items",
+  children,
+  className
+}) {
+  const visibleGroups = useMemo(
+    () => navigationGroups.map((group) => ({
+      ...group,
+      items: filterItemsByRole(group.items, currentRole)
+    })).filter((group) => group.items.length > 0),
+    [currentRole, navigationGroups]
+  );
+  return /* @__PURE__ */ jsxs(
+    SidebarProvider,
+    {
+      className: cn("min-h-[640px] w-full", className),
+      open: sidebarOpen,
+      onOpenChange: onSidebarOpenChange,
+      defaultOpen: defaultSidebarOpen,
+      children: [
+        /* @__PURE__ */ jsxs(Sidebar, { variant: "inset", collapsible: "icon", children: [
+          /* @__PURE__ */ jsx(SidebarHeader, { children: /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(SidebarMenuButton, { asChild: true, size: "lg", isActive: true, children: /* @__PURE__ */ jsxs(Link, { href: workspaceHref, children: [
+            /* @__PURE__ */ jsx(Avatar, { className: "h-8 w-8", children: /* @__PURE__ */ jsx(AvatarFallback, { children: deriveAvatarFallback(workspaceName) }) }),
+            /* @__PURE__ */ jsx("span", { className: "truncate font-semibold", children: workspaceName })
+          ] }) }) }) }) }),
+          /* @__PURE__ */ jsx(SidebarSeparator, {}),
+          /* @__PURE__ */ jsx(SidebarContent, { children: /* @__PURE__ */ jsx("nav", { "aria-label": "Application navigation", children: visibleGroups.length === 0 ? /* @__PURE__ */ jsxs(SidebarGroup, { children: [
+            /* @__PURE__ */ jsx(SidebarGroupLabel, { children: "Navigation" }),
+            /* @__PURE__ */ jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsx("p", { className: "px-2 py-2 text-xs text-text-tertiary", children: emptyNavigationMessage }) })
+          ] }) : visibleGroups.map((group) => /* @__PURE__ */ jsxs(SidebarGroup, { children: [
+            /* @__PURE__ */ jsx(SidebarGroupLabel, { children: group.label }),
+            /* @__PURE__ */ jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsx(SidebarMenu, { children: group.items.map((item) => /* @__PURE__ */ jsxs(SidebarMenuItem, { children: [
+              /* @__PURE__ */ jsx(SidebarMenuButton, { asChild: true, isActive: item.isActive ?? activeHref === item.href, children: /* @__PURE__ */ jsxs(Link, { href: item.href, children: [
+                item.icon ? /* @__PURE__ */ jsx("span", { className: "shrink-0", children: item.icon }) : null,
+                /* @__PURE__ */ jsx("span", { className: "truncate", children: item.label })
+              ] }) }),
+              item.badge ? /* @__PURE__ */ jsx(SidebarMenuBadge, { children: item.badge }) : null
+            ] }, item.label)) }) })
+          ] }, group.label)) }) })
+        ] }),
+        /* @__PURE__ */ jsxs(SidebarInset, { children: [
+          /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-10 border-b border-border/70 bg-background/95", children: /* @__PURE__ */ jsxs("div", { className: "flex min-h-14 items-center gap-2 px-4 md:px-6", children: [
+            /* @__PURE__ */ jsx(SidebarTrigger, {}),
+            breadcrumbs.length > 0 ? /* @__PURE__ */ jsx(Breadcrumb, { className: "hidden md:block", children: /* @__PURE__ */ jsx(BreadcrumbList, { children: breadcrumbs.map((item, index) => {
+              const isLast = index === breadcrumbs.length - 1;
+              return /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(BreadcrumbItem, { children: isLast || !item.href ? /* @__PURE__ */ jsx(BreadcrumbPage, { children: item.label }) : /* @__PURE__ */ jsx(BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsx(Link, { href: item.href, children: item.label }) }) }),
+                !isLast ? /* @__PURE__ */ jsx(BreadcrumbSeparator, {}) : null
+              ] }, `${item.label}-${index}`);
+            }) }) }) : null,
+            /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-2", children: [
+              headerSearch ? /* @__PURE__ */ jsx("div", { className: "hidden sm:flex", children: headerSearch }) : null,
+              headerNotifications,
+              headerActions,
+              user ? /* @__PURE__ */ jsxs("div", { className: "hidden items-center gap-2 rounded-md border border-border/60 px-2 py-1 md:flex", children: [
+                /* @__PURE__ */ jsx(Avatar, { className: "h-7 w-7", children: /* @__PURE__ */ jsx(AvatarFallback, { children: user.avatarFallback ?? user.name.slice(0, 2).toUpperCase() }) }),
+                /* @__PURE__ */ jsxs("div", { className: "leading-tight", children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-text-primary", children: user.name }),
+                  user.email ? /* @__PURE__ */ jsx("p", { className: "text-xs text-text-tertiary", children: user.email }) : null
+                ] })
+              ] }) : null,
+              currentRole ? /* @__PURE__ */ jsx(Badge, { variant: "outline", children: currentRole }) : null
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx("main", { className: "flex-1 p-4 md:p-6", children })
+        ] })
+      ]
+    }
+  );
+}
+
+export { NavigationShellPageKit };