@vadimcomanescu/nadicode-design-system 2.0.9 → 4.0.0

package/dist/chunk-KNR3WB5C.js

@@ -0,0 +1,147 @@
+import { WorkflowGraph } from './chunk-VCCI3NRD.js';
+import { Typography } from './chunk-N53OMWW2.js';
+import { Heading } from './chunk-WI547C47.js';
+import { ContextMeter } from './chunk-S2WSXZ7Y.js';
+import { AgentMetricsCard } from './chunk-OCQB4IU7.js';
+import { AgentTeamPanel } from './chunk-J3QL5UQ7.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var defaultAgents = [
+  {
+    id: "orchestrator",
+    name: "Orchestrator",
+    role: "planner",
+    status: "active",
+    model: "Claude Opus 4",
+    currentAction: "Coordinating the next tool run",
+    tokenCount: 24800,
+    cost: 0.124,
+    elapsedMs: 312e3,
+    stepsCompleted: 4,
+    stepsTotal: 7,
+    toolCalls: [
+      { name: "dispatch_task", status: "done" },
+      { name: "plan_next", status: "running" }
+    ]
+  },
+  {
+    id: "coder",
+    name: "Coder",
+    role: "developer",
+    status: "active",
+    model: "Claude Sonnet 4",
+    currentAction: "Editing workflow graph routing",
+    tokenCount: 12450,
+    cost: 0.042,
+    elapsedMs: 154e3,
+    stepsCompleted: 3,
+    stepsTotal: 7,
+    toolCalls: [
+      { name: "search_web", status: "done" },
+      { name: "edit_file", status: "running" }
+    ]
+  },
+  {
+    id: "reviewer",
+    name: "Reviewer",
+    role: "qa",
+    status: "idle"
+  }
+];
+var defaultMetrics = [
+  { label: "Active Agents", value: 2, trend: "flat" },
+  { label: "Tool Calls", value: 12, trend: "up" },
+  { label: "Latency", value: "1.2", unit: "s", trend: "down" },
+  { label: "Cost", value: "$0.18", trend: "down" }
+];
+var defaultContext = {
+  used: 85e3,
+  total: 128e3,
+  breakdown: { system: 15, user: 35, assistant: 50 }
+};
+var defaultWorkflow = {
+  title: "Execution graph",
+  nodes: [
+    { id: "plan", label: "Planner", status: "done", type: "llm", duration: 2500 },
+    { id: "search", label: "Web Search", status: "done", type: "tool", duration: 1200 },
+    { id: "code", label: "Coder", status: "active", type: "llm" },
+    { id: "review", label: "Guardrail", status: "pending", type: "conditional" },
+    { id: "deploy", label: "Operator", status: "pending", type: "human" }
+  ],
+  edges: [
+    { from: "plan", to: "search", label: "queries" },
+    { from: "plan", to: "code" },
+    { from: "search", to: "code", label: "context" },
+    { from: "code", to: "review" },
+    { from: "review", to: "deploy", label: "approved" }
+  ]
+};
+function AgentRunOverviewBlock({
+  className,
+  title = "Runtime overview",
+  description = "A compact operator view of team health, context pressure, and workflow state.",
+  teamTitle = "Team",
+  metricsTitle = "Run metrics",
+  contextTitle = "Context window",
+  workflow = defaultWorkflow,
+  agents = defaultAgents,
+  metrics = defaultMetrics,
+  context = defaultContext,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      ref,
+      className: cn("space-y-4", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Heading, { level: 2, size: "section", children: title }),
+          /* @__PURE__ */ jsx(Typography, { variant: "muted", children: description })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "grid gap-4 xl:grid-cols-[320px_minmax(0,1fr)]", children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "surface-solid rounded-lg p-4", children: [
+              /* @__PURE__ */ jsx(Heading, { level: 4, size: "title", className: "mb-4", children: teamTitle }),
+              /* @__PURE__ */ jsx(AgentTeamPanel, { agents })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "surface-solid rounded-lg p-4", children: [
+              /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center justify-between gap-2", children: [
+                /* @__PURE__ */ jsx(Heading, { level: 4, size: "title", children: contextTitle }),
+                /* @__PURE__ */ jsxs("span", { className: "text-xs text-text-tertiary", children: [
+                  context.used.toLocaleString(),
+                  " / ",
+                  context.total.toLocaleString()
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(
+                ContextMeter,
+                {
+                  used: context.used,
+                  total: context.total,
+                  breakdown: context.breakdown,
+                  size: "expanded"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "surface-solid rounded-lg p-4", children: [
+              /* @__PURE__ */ jsx(Heading, { level: 4, size: "title", className: "mb-4", children: metricsTitle }),
+              /* @__PURE__ */ jsx(AgentMetricsCard, { metrics })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "surface-solid rounded-lg p-4", children: [
+              /* @__PURE__ */ jsx(Heading, { level: 4, size: "title", className: "mb-4", children: workflow.title ?? defaultWorkflow.title }),
+              /* @__PURE__ */ jsx(WorkflowGraph, { nodes: workflow.nodes, edges: workflow.edges })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+export { AgentRunOverviewBlock };

package/dist/chunk-KQ7ZC6EM.js

@@ -0,0 +1,66 @@
+import { Typography } from './chunk-N53OMWW2.js';
+import { Progress } from './chunk-JWQXBRE7.js';
+import { Checkbox } from './chunk-756Q7AC5.js';
+import { Card, CardHeader, CardTitle, CardContent } from './chunk-AH6YSYYT.js';
+import { CheckIcon } from './chunk-CXACRCZ4.js';
+import { cn } from './chunk-QYZT24TS.js';
+import * as React from 'react';
+import { useTranslations } from 'next-intl';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var defaultSteps = [
+  { id: "account", title: "Create your account", description: "Sign up and verify your email address.", completed: true },
+  { id: "profile", title: "Complete your profile", description: "Add your name, avatar, and bio.", completed: true },
+  { id: "team", title: "Invite your team", description: "Add collaborators to your workspace.", completed: false },
+  { id: "project", title: "Create first project", description: "Set up your first design system project.", completed: false },
+  { id: "deploy", title: "Deploy to production", description: "Publish your component library.", completed: false }
+];
+function OnboardingBlock({
+  steps = defaultSteps,
+  title = "Getting started",
+  onToggle,
+  className
+}) {
+  const t = useTranslations("blocks.onboardingBlock");
+  const completedCount = React.useMemo(() => steps.filter((s) => s.completed).length, [steps]);
+  const progressPercent = steps.length > 0 ? Math.round(completedCount / steps.length * 100) : 0;
+  return /* @__PURE__ */ jsxs(Card, { className: cn("w-full max-w-lg", className), children: [
+    /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx(CardTitle, { className: "text-text-primary", children: title }),
+        /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-text-tertiary tabular-nums", children: [
+          completedCount,
+          "/",
+          steps.length
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(Progress, { value: progressPercent, "aria-label": t("onboardingProgress"), className: "mt-4" })
+    ] }),
+    /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("ul", { className: "space-y-4", children: steps.map((step) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "pt-0.5", children: step.completed ? /* @__PURE__ */ jsx("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-success text-success-foreground", children: /* @__PURE__ */ jsx(CheckIcon, { size: 12 }) }) : /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          checked: step.completed,
+          onCheckedChange: (checked) => onToggle?.(step.id, checked === true),
+          "aria-label": step.title
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "small",
+            className: cn(
+              "font-medium",
+              step.completed ? "text-text-tertiary line-through" : "text-text-primary"
+            ),
+            children: step.title
+          }
+        ),
+        /* @__PURE__ */ jsx(Typography, { variant: "muted", className: "text-xs", children: step.description })
+      ] })
+    ] }, step.id)) }) })
+  ] });
+}
+
+export { OnboardingBlock };

package/dist/chunk-LGW7FVG5.js

@@ -0,0 +1,83 @@
+import { MarketingShellPageKit } from './chunk-Z233ZQZE.js';
+import { Typography } from './chunk-N53OMWW2.js';
+import { FieldSet, Field, FieldLabel, FieldDescription } from './chunk-RX5EUODB.js';
+import { Input } from './chunk-AP3XXYAY.js';
+import { Card, CardHeader, CardTitle, CardContent } from './chunk-AH6YSYYT.js';
+import { Alert, AlertTitle, AlertDescription } from './chunk-GJUR6HT3.js';
+import { Button } from './chunk-7KIDDF3I.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function CheckoutPageKit({
+  shell,
+  state = "default",
+  summary,
+  billingFields,
+  onBillingFieldChange,
+  onSubmit,
+  onRetry,
+  onContinue,
+  errorMessage,
+  successMessage = "Payment successful. Your subscription is now active.",
+  processingMessage = "Processing payment confirmation...",
+  className
+}) {
+  const isBusy = state === "submitting" || state === "processing";
+  return /* @__PURE__ */ jsx(MarketingShellPageKit, { ...shell, children: /* @__PURE__ */ jsxs("section", { className: cn("mx-auto grid w-full max-w-6xl gap-6 px-6 pb-16 lg:grid-cols-[minmax(0,1.1fr)_420px]", className), children: [
+    /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { children: "Checkout" }) }),
+      /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-text-secondary", children: "Complete billing details and confirm payment with app-owned checkout orchestration." }),
+        state === "processing" ? /* @__PURE__ */ jsxs(Alert, { children: [
+          /* @__PURE__ */ jsx(AlertTitle, { children: "Processing" }),
+          /* @__PURE__ */ jsx(AlertDescription, { children: processingMessage })
+        ] }) : null,
+        state === "error" ? /* @__PURE__ */ jsxs(Alert, { variant: "destructive", children: [
+          /* @__PURE__ */ jsx(AlertTitle, { children: "Payment failed" }),
+          /* @__PURE__ */ jsx(AlertDescription, { children: errorMessage ?? "Payment failed. Review billing details and retry." })
+        ] }) : null,
+        state === "success" ? /* @__PURE__ */ jsxs(Alert, { children: [
+          /* @__PURE__ */ jsx(AlertTitle, { children: "Payment complete" }),
+          /* @__PURE__ */ jsx(AlertDescription, { children: successMessage })
+        ] }) : null,
+        /* @__PURE__ */ jsx(FieldSet, { children: billingFields.map((field) => /* @__PURE__ */ jsxs(Field, { children: [
+          /* @__PURE__ */ jsxs(FieldLabel, { htmlFor: field.id, children: [
+            field.label,
+            field.required ? /* @__PURE__ */ jsx("span", { className: "ml-1 text-destructive", children: "*" }) : null
+          ] }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: field.id,
+              name: field.id,
+              type: field.type ?? "text",
+              value: field.value,
+              placeholder: field.placeholder,
+              required: field.required,
+              disabled: isBusy || state === "success",
+              onChange: (event) => onBillingFieldChange?.(field.id, event.target.value)
+            }
+          ),
+          field.description ? /* @__PURE__ */ jsx(FieldDescription, { children: field.description }) : null
+        ] }, field.id)) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap justify-end gap-2", children: [
+          state === "error" ? /* @__PURE__ */ jsx(Button, { type: "button", onClick: onRetry, children: "Retry payment" }) : null,
+          state === "success" ? /* @__PURE__ */ jsx(Button, { type: "button", onClick: onContinue, children: "Continue" }) : null,
+          state !== "error" && state !== "success" ? /* @__PURE__ */ jsx(Button, { type: "button", disabled: isBusy, onClick: onSubmit, children: isBusy ? "Submitting..." : "Submit payment" }) : null
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsxs(CardHeader, { children: [
+        /* @__PURE__ */ jsx(CardTitle, { children: summary.title }),
+        /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-text-secondary", children: summary.amountLabel })
+      ] }),
+      /* @__PURE__ */ jsx(CardContent, { className: "space-y-3", children: summary.lineItems.map((lineItem) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 text-sm", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-text-secondary", children: lineItem.label }),
+        /* @__PURE__ */ jsx("span", { className: "font-medium text-text-primary", children: lineItem.value })
+      ] }, lineItem.id)) })
+    ] })
+  ] }) });
+}
+
+export { CheckoutPageKit };

package/dist/chunk-LP6ZZYOQ.js

@@ -0,0 +1,36 @@
+import { ResetPasswordBlock } from './chunk-X6VXWEDO.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function ResetPageKit({
+  onSubmit,
+  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(
+      ResetPasswordBlock,
+      {
+        className: cn("w-full", cardClassName),
+        onSubmit,
+        onBackToLogin,
+        title,
+        description
+      }
+    )
+  ] }) });
+}
+
+export { ResetPageKit };

package/dist/chunk-LV4P7WVM.js

@@ -0,0 +1,54 @@
+import { BarChart } from './chunk-UWHKZX4Y.js';
+import { ScrollFadeIn } from './chunk-I23DDSU7.js';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from './chunk-AH6YSYYT.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 = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 }
+];
+var defaultConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "rgb(var(--chart-1))",
+    icon: ({ ...props }) => /* @__PURE__ */ jsx(MonitorIcon, { size: 16, ...props })
+  },
+  mobile: {
+    label: "Mobile",
+    color: "rgb(var(--chart-2))",
+    icon: ({ ...props }) => /* @__PURE__ */ jsx(SmartphoneIcon, { size: 16, ...props })
+  }
+};
+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: [
+    /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsx(CardTitle, { children: title }),
+      /* @__PURE__ */ jsx(CardDescription, { children: description })
+    ] }),
+    /* @__PURE__ */ jsx(CardContent, { children: data.length > 0 && /* @__PURE__ */ jsx(
+      BarChart,
+      {
+        data,
+        config,
+        indexKey: "month",
+        bars: ["desktop", "mobile"],
+        className: "min-h-[200px] w-full"
+      }
+    ) })
+  ] }) });
+}
+
+export { ChartBlock };

package/dist/chunk-MGSGCARB.js

@@ -0,0 +1,164 @@
+import { SettingsPageKit } from './chunk-RKQPU75I.js';
+import { Typography } from './chunk-N53OMWW2.js';
+import { Switch } from './chunk-R7N7YLFT.js';
+import { Field, FieldLabel } from './chunk-RX5EUODB.js';
+import { Input } from './chunk-AP3XXYAY.js';
+import { Label } from './chunk-LIBXYD5Q.js';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from './chunk-AH6YSYYT.js';
+import { Avatar, AvatarImage, AvatarFallback } from './chunk-NAAU5IWU.js';
+import { Button } from './chunk-7KIDDF3I.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var DEFAULT_SECTIONS = [{ id: "profile", label: "Profile" }];
+var EMPTY_VALIDATION_ERRORS = {};
+function renderProfileSection({
+  profileFields,
+  notificationPreferences,
+  avatar,
+  mode,
+  validationErrors,
+  onFieldChange,
+  onNotificationChange
+}) {
+  const readOnlyMode = mode === "view";
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsxs(CardHeader, { children: [
+        /* @__PURE__ */ jsx(CardTitle, { children: "Avatar" }),
+        /* @__PURE__ */ jsx(CardDescription, { children: "Upload a profile image visible to your workspace." })
+      ] }),
+      /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-wrap items-center gap-4", children: [
+        /* @__PURE__ */ jsxs(Avatar, { className: "h-14 w-14", children: [
+          /* @__PURE__ */ jsx(AvatarImage, { src: avatar?.src, alt: "Profile avatar" }),
+          /* @__PURE__ */ jsx(AvatarFallback, { children: avatar?.fallback ?? "U" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "secondary",
+              onClick: avatar?.onUpload,
+              disabled: readOnlyMode || avatar?.status === "uploading",
+              children: avatar?.status === "uploading" ? "Uploading\u2026" : "Upload avatar"
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: avatar?.onRemove, disabled: readOnlyMode, children: "Remove" })
+        ] })
+      ] }),
+      avatar?.errorMessage ? /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-destructive", children: avatar.errorMessage }) }) : null
+    ] }),
+    /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsxs(CardHeader, { children: [
+        /* @__PURE__ */ jsx(CardTitle, { children: "Personal information" }),
+        /* @__PURE__ */ jsx(CardDescription, { children: "Control profile details used across your account." })
+      ] }),
+      /* @__PURE__ */ jsx(CardContent, { className: "space-y-4", children: profileFields.map((field) => {
+        const inputId = `profile-settings-field-${field.id}`;
+        const fieldError = validationErrors[field.id];
+        return /* @__PURE__ */ jsxs(Field, { children: [
+          /* @__PURE__ */ jsxs(FieldLabel, { htmlFor: inputId, children: [
+            field.label,
+            field.required ? " *" : ""
+          ] }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: inputId,
+              type: field.type ?? "text",
+              value: field.value,
+              placeholder: field.placeholder,
+              readOnly: readOnlyMode || field.readOnly,
+              disabled: readOnlyMode || field.readOnly,
+              onChange: (event) => onFieldChange?.(field.id, event.target.value)
+            }
+          ),
+          field.helperText ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-text-tertiary", children: field.helperText }) : null,
+          fieldError ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-destructive", children: fieldError }) : null
+        ] }, field.id);
+      }) })
+    ] }),
+    /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsxs(CardHeader, { children: [
+        /* @__PURE__ */ jsx(CardTitle, { children: "Notification preferences" }),
+        /* @__PURE__ */ jsx(CardDescription, { children: "Set communication and security notification behavior." })
+      ] }),
+      /* @__PURE__ */ jsx(CardContent, { className: "space-y-4", children: notificationPreferences.map((preference) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex flex-wrap items-center justify-between gap-3 rounded-lg border border-border-subtle bg-surface-hover p-4",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ jsx(Label, { htmlFor: `profile-settings-pref-${preference.id}`, children: preference.label }),
+              preference.description ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-text-secondary", children: preference.description }) : null
+            ] }),
+            /* @__PURE__ */ jsx(
+              Switch,
+              {
+                id: `profile-settings-pref-${preference.id}`,
+                checked: preference.enabled,
+                disabled: readOnlyMode || preference.disabled,
+                onCheckedChange: (checked) => onNotificationChange?.(preference.id, checked),
+                "aria-label": preference.label
+              }
+            )
+          ]
+        },
+        preference.id
+      )) })
+    ] })
+  ] });
+}
+function ProfileSettingsPageKit({
+  title = "Profile settings",
+  description = "Manage profile details, avatar controls, and personal notification preferences.",
+  sections = DEFAULT_SECTIONS,
+  activeSectionId,
+  onSectionChange,
+  profileFields,
+  notificationPreferences,
+  avatar,
+  mode = "edit",
+  saveState = "default",
+  validationErrors = EMPTY_VALIDATION_ERRORS,
+  validationMessage,
+  fatalErrorMessage,
+  onFieldChange,
+  onNotificationChange,
+  onSave,
+  onDiscard,
+  renderAdditionalSection
+}) {
+  const firstSectionId = sections[0]?.id ?? "profile";
+  const resolvedActiveSectionId = activeSectionId ?? firstSectionId;
+  return /* @__PURE__ */ jsx(
+    SettingsPageKit,
+    {
+      title,
+      description,
+      sections,
+      activeSectionId: resolvedActiveSectionId,
+      onSectionChange,
+      saveState,
+      validationMessage,
+      fatalErrorMessage,
+      onSave,
+      onDiscard,
+      renderSection: (section) => {
+        if (section.id === "profile") {
+          return renderProfileSection({
+            profileFields,
+            notificationPreferences,
+            avatar,
+            mode,
+            validationErrors,
+            onFieldChange,
+            onNotificationChange
+          });
+        }
+        return renderAdditionalSection ? renderAdditionalSection(section) : null;
+      }
+    }
+  );
+}
+
+export { ProfileSettingsPageKit };

package/dist/chunk-N3YFYMNZ.js

@@ -0,0 +1,73 @@
+import { LoginBlock } from './chunk-RGE5OQMZ.js';
+import { StaggerChildren } from './chunk-DQPK2XRL.js';
+import { Heading } from './chunk-WI547C47.js';
+import { siteConfig } from './chunk-A7NUWD76.js';
+import { AnimatedBackground } from './chunk-4GSFNJAJ.js';
+import { useMotionConfig, m, motionSpring } from './chunk-PD2YEH3H.js';
+import { SparklesIcon } from './chunk-CGUCH322.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var FORM_ENTRANCE_Y = 12;
+var VISUAL_STAGGER_MS = 100;
+var defaultLabels = {
+  headline: "Build the future, faster.",
+  quote: "This library has saved me countless hours of work and helped me deliver stunning designs to my clients faster than ever before.",
+  quoteAttribution: "Sofia Davis, Lead Engineer"
+};
+function AuthLayout({
+  mode = "login",
+  action,
+  error,
+  googleAction,
+  labels: userLabels,
+  className
+}) {
+  const motionConfig = useMotionConfig();
+  const labels = { ...defaultLabels, ...userLabels };
+  return /* @__PURE__ */ jsxs("div", { className: cn("w-full min-h-dvh lg:h-dvh lg:min-h-[800px] grid lg:grid-cols-2 overflow-hidden bg-background", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "hidden lg:flex relative h-full w-full flex-col bg-muted text-overlay-foreground dark:border-r border-border/50", children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-surface-active" }),
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsx(AnimatedBackground, {}) }),
+      /* @__PURE__ */ jsxs("div", { className: "relative z-20 flex items-center text-lg font-medium p-8", children: [
+        /* @__PURE__ */ jsx(SparklesIcon, { size: 24, className: "mr-2 text-accent" }),
+        siteConfig.name
+      ] }),
+      /* @__PURE__ */ jsxs(StaggerChildren, { staggerMs: VISUAL_STAGGER_MS, className: "relative z-20 m-auto max-w-lg text-center space-y-4", children: [
+        /* @__PURE__ */ jsx(Heading, { level: 2, size: "display", className: "font-bold bg-clip-text text-transparent bg-gradient-to-b from-overlay-foreground to-overlay-foreground/60 relative", children: labels.headline }),
+        /* @__PURE__ */ jsxs("blockquote", { className: "text-lg text-text-tertiary relative", children: [
+          /* @__PURE__ */ jsxs("p", { children: [
+            '"',
+            labels.quote,
+            '"'
+          ] }),
+          /* @__PURE__ */ jsx("footer", { className: "mt-2 text-sm", children: labels.quoteAttribution })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center p-8 bg-background relative overflow-y-auto", children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-background via-background to-accent/5 pointer-events-none" }),
+      /* @__PURE__ */ jsx(
+        m.div,
+        {
+          initial: { opacity: 0, y: FORM_ENTRANCE_Y },
+          animate: { opacity: 1, y: 0 },
+          transition: { ...motionSpring.gentle, ...motionConfig },
+          className: "relative z-10 w-full max-w-sm",
+          children: /* @__PURE__ */ jsx(
+            LoginBlock,
+            {
+              className: "w-full",
+              type: mode === "signup" ? "signup" : "login",
+              action,
+              error,
+              googleAction
+            }
+          )
+        }
+      )
+    ] })
+  ] });
+}
+
+export { AuthLayout };