@vadimcomanescu/nadicode-design-system 4.0.11 → 5.0.1

package/dist/{chunk-4R7DT2NJ.js → chunk-JPA45CDE.js}

@@ -24,46 +24,83 @@ var ICON_COLORS = [
   "bg-chart-3/10 text-chart-3",
   "bg-chart-4/10 text-chart-4"
 ];
+var ICON_MAP = {
+  GlobeIcon: /* @__PURE__ */ jsx(GlobeIcon, { size: 20 }),
+  ZapIcon: /* @__PURE__ */ jsx(ZapIcon, { size: 20 }),
+  DatabaseIcon: /* @__PURE__ */ jsx(DatabaseIcon, { size: 20 }),
+  ShieldIcon: /* @__PURE__ */ jsx(ShieldIcon, { size: 20 }),
+  ChartBarIcon: /* @__PURE__ */ jsx(ChartBarIcon, { size: 20 }),
+  Code2Icon: /* @__PURE__ */ jsx(Code2Icon, { size: 20 }),
+  LayersIcon: /* @__PURE__ */ jsx(LayersIcon, { size: 24 }),
+  CloudIcon: /* @__PURE__ */ jsx(CloudIcon, { size: 96 }),
+  KeyIcon: /* @__PURE__ */ jsx(KeyIcon, { size: 16 }),
+  LaptopIcon: /* @__PURE__ */ jsx(LaptopIcon, { size: 16 })
+};
 var defaultGridFeatures = [
   {
     title: "Edge Network",
     description: "Deploy your AI models to the edge with a single click. Global low-latency inference.",
-    icon: /* @__PURE__ */ jsx(GlobeIcon, { size: 20 })
+    icon: "GlobeIcon",
+    badge: null,
+    bullets: null
   },
   {
     title: "Real-time Processing",
     description: "Process locally on device or in the cloud. WebGPU and WebAssembly support built-in.",
-    icon: /* @__PURE__ */ jsx(ZapIcon, { size: 20 })
+    icon: "ZapIcon",
+    badge: null,
+    bullets: null
   },
   {
     title: "Vector Database",
     description: "Integrated vector storage for semantic search and long-term memory retrieval.",
-    icon: /* @__PURE__ */ jsx(DatabaseIcon, { size: 20 })
+    icon: "DatabaseIcon",
+    badge: null,
+    bullets: null
   },
   {
     title: "End-to-End Encryption",
     description: "Your data is encrypted at rest and in transit. Enterprise-grade security standards.",
-    icon: /* @__PURE__ */ jsx(ShieldIcon, { size: 20 })
+    icon: "ShieldIcon",
+    badge: null,
+    bullets: null
   },
   {
     title: "Automated Scaling",
     description: "Scale from 0 to millions of requests without managing infrastructure.",
-    icon: /* @__PURE__ */ jsx(ChartBarIcon, { size: 20 })
+    icon: "ChartBarIcon",
+    badge: null,
+    bullets: null
   },
   {
     title: "API First",
     description: "Everything is available via API. Integrate with your existing stack seamlessly.",
-    icon: /* @__PURE__ */ jsx(Code2Icon, { size: 20 })
+    icon: "Code2Icon",
+    badge: null,
+    bullets: null
   }
 ];
-function FeatureGridVariant({
-  badge = "Capabilities",
-  title = "Everything you need to build",
-  description = "A complete toolkit for the next generation of intelligent applications.",
-  features = defaultGridFeatures,
-  className
-} = {}) {
-  return /* @__PURE__ */ jsx("section", { className: className ?? "py-24 relative", children: /* @__PURE__ */ jsxs("div", { className: "container mx-auto px-6 lg:px-8", children: [
+var defaultListFeatures = [
+  {
+    title: "Unified Component Architecture",
+    description: "Stop wrestling with fragmented libraries. Seed provides a cohesive set of primitives that work together perfectly out of the box. Themeable, accessible, and composable.",
+    icon: "LayersIcon",
+    badge: null,
+    bullets: ["Type-safe design tokens", "Radix UI primitives", "Automatic dark mode"]
+  },
+  {
+    title: "Secure by Default",
+    description: "Enterprise-ready security features including SSO, audit logs, and role-based access control. Compliant with SOC2 and GDPR.",
+    icon: "ShieldIcon",
+    badge: null,
+    bullets: ["End-to-end encryption", "SAML & OIDC support", "99.99% Uptime SLA"]
+  }
+];
+function resolveIcon(iconName, size) {
+  return ICON_MAP[iconName] ?? /* @__PURE__ */ jsx("span", { children: iconName });
+}
+function FeatureGridVariant({ features, badge, title, description }) {
+  return /* @__PURE__ */ jsx("section", { className: "py-24 relative", children: /* @__PURE__ */ jsxs("div", { className: "container mx-auto px-6 lg:px-8", children: [
     /* @__PURE__ */ jsxs("div", { className: "text-center mb-16 max-w-2xl mx-auto", children: [
       /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "mb-4", children: badge }),
       /* @__PURE__ */ jsx(Heading, { level: 2, size: "section", className: "text-text-primary sm:text-4xl mb-4", children: title }),
@@ -71,35 +108,18 @@ function FeatureGridVariant({
     ] }),
     /* @__PURE__ */ jsx(StaggerChildren, { staggerMs: 80, className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 [grid-auto-rows:1fr]", children: features.map((feature, i) => /* @__PURE__ */ jsxs(Card, { interactive: true, className: "h-full", children: [
       /* @__PURE__ */ jsxs(CardHeader, { className: "pb-2", children: [
-        /* @__PURE__ */ jsx("div", { className: cn("h-10 w-10 rounded-lg flex items-center justify-center mb-4", ICON_COLORS[i % ICON_COLORS.length]), children: feature.icon }),
+        /* @__PURE__ */ jsx("div", { className: cn("h-10 w-10 rounded-lg flex items-center justify-center mb-4", ICON_COLORS[i % ICON_COLORS.length]), children: resolveIcon(feature.icon) }),
         /* @__PURE__ */ jsx(CardTitle, { className: "text-lg", children: feature.title })
       ] }),
       /* @__PURE__ */ jsx(CardContent, { className: "flex-1", children: /* @__PURE__ */ jsx("p", { className: "text-text-secondary", children: feature.description }) })
     ] }, i)) })
   ] }) });
 }
-var defaultListFeatures = [
-  {
-    title: "Unified Component Architecture",
-    description: "Stop wrestling with fragmented libraries. Seed provides a cohesive set of primitives that work together perfectly out of the box. Themeable, accessible, and composable.",
-    icon: /* @__PURE__ */ jsx(LayersIcon, { size: 24 }),
-    bullets: ["Type-safe design tokens", "Radix UI primitives", "Automatic dark mode"],
-    buttonLabel: "Explore Architecture"
-  },
-  {
-    title: "Secure by Default",
-    description: "Enterprise-ready security features including SSO, audit logs, and role-based access control. Compliant with SOC2 and GDPR.",
-    icon: /* @__PURE__ */ jsx(ShieldIcon, { size: 24 }),
-    bullets: ["End-to-end encryption", "SAML & OIDC support", "99.99% Uptime SLA"],
-    buttonLabel: "View Security Docs"
-  }
-];
-function FeatureListVariant({
-  features = defaultListFeatures,
-  className
-} = {}) {
-  return /* @__PURE__ */ jsx("section", { className: className ?? "py-24 overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "container mx-auto px-6 lg:px-8 space-y-24", children: features.map((feature, i) => {
+function FeatureListVariant({ features }) {
+  return /* @__PURE__ */ jsx("section", { className: "py-24 overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "container mx-auto px-6 lg:px-8 space-y-24", children: features.map((feature, i) => {
     const isReversed = i % 2 !== 0;
+    const bullets = feature.bullets ?? [];
+    const buttonLabel = feature.badge ?? "Learn more";
     return /* @__PURE__ */ jsxs("div", { className: "grid lg:grid-cols-2 gap-12 items-center", children: [
       isReversed && /* @__PURE__ */ jsxs("div", { className: "order-2 lg:order-1 relative", children: [
         /* @__PURE__ */ jsx("div", { className: "absolute -inset-4 bg-primary/10 blur-3xl rounded-full" }),
@@ -125,14 +145,14 @@ function FeatureListVariant({
         /* @__PURE__ */ jsx("div", { className: cn(
           "h-12 w-12 rounded-xl flex items-center justify-center mb-6",
           isReversed ? "bg-primary/20 text-primary" : "bg-accent/20 text-accent"
-        ), children: feature.icon }),
+        ), children: resolveIcon(feature.icon) }),
         /* @__PURE__ */ jsx(Heading, { level: 3, size: "section", className: "text-text-primary mb-4", children: feature.title }),
         /* @__PURE__ */ jsx("p", { className: "text-lg text-text-secondary mb-8 leading-relaxed", children: feature.description }),
-        /* @__PURE__ */ jsx("ul", { className: "space-y-4 mb-8", children: feature.bullets.map((item) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-4 text-text-primary", children: [
+        /* @__PURE__ */ jsx("ul", { className: "space-y-4 mb-8", children: bullets.map((item) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-4 text-text-primary", children: [
           /* @__PURE__ */ jsx("div", { className: isReversed ? "h-1.5 w-1.5 rounded-full bg-primary" : "h-1.5 w-1.5 rounded-full bg-accent" }),
           item
         ] }, item)) }),
-        /* @__PURE__ */ jsx(Button, { variant: "outline", children: feature.buttonLabel })
+        /* @__PURE__ */ jsx(Button, { variant: "outline", children: buttonLabel })
       ] }),
       !isReversed && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsx("div", { className: "absolute -inset-4 bg-accent/10 blur-3xl rounded-full" }),
@@ -153,11 +173,16 @@ function FeatureListVariant({
     ] }, i);
   }) }) });
 }
-function FeatureBlock({ variant = "grid", ...props }) {
+function FeatureBlock({ props }) {
+  const variant = props.variant ?? "grid";
+  const badge = props.badge ?? "Capabilities";
+  const title = props.title ?? "Everything you need to build";
+  const description = props.description ?? "A complete toolkit for the next generation of intelligent applications.";
+  const features = props.features ?? (variant === "list" ? defaultListFeatures : defaultGridFeatures);
   if (variant === "list") {
-    return /* @__PURE__ */ jsx(FeatureListVariant, { ...props, features: props.features });
+    return /* @__PURE__ */ jsx(FeatureListVariant, { features });
   }
-  return /* @__PURE__ */ jsx(FeatureGridVariant, { ...props, features: props.features });
+  return /* @__PURE__ */ jsx(FeatureGridVariant, { features, badge, title, description });
 }
 
 export { FeatureBlock };

package/dist/chunk-JUAOQFC3.js

@@ -0,0 +1,32 @@
+import { useStyleMotion, useMotionConfig, m } from './chunk-PD2YEH3H.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { jsx } from 'react/jsx-runtime';
+
+function SpringHover({ children, className, hoverScale = 1.03, pressScale = 0.95, disabled = false, ref }) {
+  const { spring, style } = useStyleMotion();
+  const motionConfig = useMotionConfig();
+  if (disabled) {
+    return /* @__PURE__ */ jsx("div", { ref, className, children });
+  }
+  const hoverRotate = style === "bloom" ? 0.5 : 0;
+  return /* @__PURE__ */ jsx(
+    m.div,
+    {
+      ref,
+      className: cn("inline-block", className),
+      whileHover: {
+        scale: hoverScale,
+        rotate: hoverRotate,
+        transition: { ...spring.bouncy, ...motionConfig }
+      },
+      whileTap: {
+        scale: pressScale,
+        rotate: 0,
+        transition: { ...spring.snappy, ...motionConfig }
+      },
+      children
+    }
+  );
+}
+
+export { SpringHover };

package/dist/{chunk-3TZLHB2L.js → chunk-JVQQQS2M.js}

@@ -1,9 +1,9 @@
-import { Typography } from './chunk-PC6VMNDY.js';
+import { Typography } from './chunk-Q7PCHHVJ.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 { AlertTriangleIcon } from './chunk-SXHYB7JB.js';
 import { cn } from './chunk-QYZT24TS.js';
 import { useState } from 'react';
 import { AnimatePresence } from 'motion/react';
@@ -19,18 +19,14 @@ var variantIcons = {
   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
-}) {
+function BannerBlock({ props, emit, children }) {
   const motionConfig = useMotionConfig();
+  const variant = props.variant ?? "info";
+  const dismissible = props.dismissible ?? true;
   const [visible, setVisible] = useState(true);
   const handleDismiss = () => {
     setVisible(false);
-    onDismiss?.();
+    emit("dismiss");
   };
   return /* @__PURE__ */ jsx(AnimatePresence, { children: !!visible && /* @__PURE__ */ jsxs(
     m.div,
@@ -41,12 +37,11 @@ function BannerBlock({
       transition: { ...motionSpring.snappy, ...motionConfig },
       className: cn(
         "flex items-center gap-4 rounded-lg border px-4 py-4",
-        variantStyles[variant],
-        className
+        variantStyles[variant]
       ),
       children: [
         variantIcons[variant],
-        /* @__PURE__ */ jsx(Typography, { variant: "small", className: "flex-1 font-medium", children }),
+        /* @__PURE__ */ jsx(Typography, { variant: "small", className: "flex-1 font-medium", children: children ?? props.message ?? null }),
         !!dismissible && /* @__PURE__ */ jsx(
           Button,
           {

package/dist/chunk-KA44DDCB.js

@@ -0,0 +1,42 @@
+import { m, motionSpring } from './chunk-PD2YEH3H.js';
+import { ArrowRightIcon } from './chunk-T7H53CK2.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { useReducedMotion } from 'motion/react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var AgentChip = ({ agent }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+  agent.avatar && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: agent.avatar }),
+  /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-text-primary", children: agent.name })
+] });
+function HandoffIndicator({ className, fromAgent, toAgent, reason, ref, ...props }) {
+  const prefersReduced = useReducedMotion();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "inline-flex flex-col items-center gap-1.5 rounded-lg border border-border glass-panel p-4",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+          /* @__PURE__ */ jsx(AgentChip, { agent: fromAgent }),
+          /* @__PURE__ */ jsx(
+            m.div,
+            {
+              initial: prefersReduced ? void 0 : { x: -6, opacity: 0 },
+              animate: prefersReduced ? void 0 : { x: 0, opacity: 1 },
+              transition: prefersReduced ? void 0 : motionSpring.snappy,
+              children: /* @__PURE__ */ jsx(ArrowRightIcon, { size: 18, className: "text-accent" })
+            }
+          ),
+          /* @__PURE__ */ jsx(AgentChip, { agent: toAgent })
+        ] }),
+        !!reason && /* @__PURE__ */ jsx("span", { className: "text-xs text-text-tertiary", children: reason })
+      ]
+    }
+  );
+}
+
+export { HandoffIndicator };

package/dist/{chunk-O2W6C3K2.js → chunk-KANK5FAG.js}

@@ -1,5 +1,4 @@
-import { NavigationShellPageKit } from './chunk-ZBQLUB3B.js';
-import { Typography } from './chunk-PC6VMNDY.js';
+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';
@@ -9,22 +8,22 @@ import { Card, CardHeader, CardTitle, CardContent } from './chunk-7UY24UWL.js';
 import { Button } from './chunk-7KIDDF3I.js';
 import { Badge } from './chunk-S4JAHKOP.js';
 import { cn } from './chunk-QYZT24TS.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 var EMPTY_SECTIONS = [];
 var ALERT_CLASS = "rounded-md border border-destructive/40 bg-destructive/10 px-4 py-3 text-sm text-destructive";
-function renderFieldInput(field, onFieldChange) {
-  const disabled = field.disabled || field.readOnly;
+function renderFieldInput(field, emit) {
+  const disabled = field.disabled === true || field.readOnly === true;
   if (field.type === "textarea") {
     return /* @__PURE__ */ jsx(
       Textarea,
       {
         id: field.id,
         value: field.value,
-        placeholder: field.placeholder,
+        placeholder: field.placeholder ?? void 0,
         disabled,
-        readOnly: field.readOnly,
-        onChange: (event) => onFieldChange?.(field.id, event.target.value)
+        readOnly: field.readOnly ?? void 0,
+        onChange: () => emit("fieldChange")
       }
     );
   }
@@ -34,7 +33,7 @@ function renderFieldInput(field, onFieldChange) {
       {
         value: field.value,
         disabled,
-        onValueChange: (value) => onFieldChange?.(field.id, value),
+        onValueChange: () => emit("fieldChange"),
         children: [
           /* @__PURE__ */ jsx(SelectTrigger, { id: field.id, "aria-label": field.label, children: /* @__PURE__ */ jsx(SelectValue, { placeholder: field.placeholder ?? "Select value" }) }),
           /* @__PURE__ */ jsx(SelectContent, { children: (field.options ?? []).map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
@@ -48,32 +47,32 @@ function renderFieldInput(field, onFieldChange) {
       id: field.id,
       type: field.type ?? "text",
       value: field.value,
-      placeholder: field.placeholder,
+      placeholder: field.placeholder ?? void 0,
       disabled,
-      readOnly: field.readOnly,
-      onChange: (event) => onFieldChange?.(field.id, event.target.value)
+      readOnly: field.readOnly ?? void 0,
+      onChange: () => emit("fieldChange")
     }
   );
 }
-function CrudFormPageKit({
-  shell,
-  title = "CRUD form",
-  description = "Create and edit entities through a stable form contract with explicit save and error states.",
-  state = "pristine",
-  sections = EMPTY_SECTIONS,
-  onFieldChange,
-  actions,
-  validationMessage,
-  fatalErrorMessage,
-  savedMessage = "Changes saved.",
-  className
+function FormFieldBlock({
+  props,
+  emit
 }) {
+  const title = props.title;
+  const description = props.description;
+  const state = props.state ?? "pristine";
+  const sections = props.sections ?? EMPTY_SECTIONS;
+  const validationMessage = props.validationMessage;
+  const fatalErrorMessage = props.fatalErrorMessage;
+  const savedMessage = props.savedMessage ?? "Changes saved.";
+  const actionLabels = props.actionLabels;
+  const className = props.className;
   const isBusy = state === "submitting" || state === "validating";
-  return /* @__PURE__ */ jsx(NavigationShellPageKit, { ...shell, children: /* @__PURE__ */ jsxs("section", { className: cn("space-y-6", className), children: [
-    /* @__PURE__ */ jsxs("header", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsx(Heading, { level: 3, children: title }),
-      /* @__PURE__ */ jsx(Typography, { variant: "muted", children: description })
-    ] }),
+  return /* @__PURE__ */ jsxs("section", { className: cn("space-y-6", className), children: [
+    title || description ? /* @__PURE__ */ jsxs("header", { className: "space-y-1", children: [
+      title ? /* @__PURE__ */ jsx(Heading, { level: 3, children: title }) : null,
+      description ? /* @__PURE__ */ jsx(Typography, { variant: "muted", children: description }) : null
+    ] }) : null,
     /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
       state === "dirty" ? /* @__PURE__ */ jsx(Badge, { variant: "outline", children: "Unsaved changes" }) : null,
       state === "validating" ? /* @__PURE__ */ jsx(Badge, { variant: "outline", children: "Validating" }) : null,
@@ -87,61 +86,65 @@ function CrudFormPageKit({
       /* @__PURE__ */ jsxs(CardHeader, { children: [
         /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ jsx("span", { children: section.title }),
-          section.optional ? /* @__PURE__ */ jsx(Badge, { variant: "outline", children: "Optional" }) : null
+          section.optional === true ? /* @__PURE__ */ jsx(Badge, { variant: "outline", children: "Optional" }) : null
         ] }),
-        section.description ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-text-secondary", children: section.description }) : null
+        section.description ? /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "small",
+            className: "text-text-secondary",
+            children: section.description
+          }
+        ) : null
       ] }),
-      /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
-        section.content ? /* @__PURE__ */ jsx("div", { children: section.content }) : null,
-        section.fields && section.fields.length > 0 ? /* @__PURE__ */ jsx(FieldSet, { children: section.fields.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
-          ] }),
-          renderFieldInput(field, onFieldChange),
-          field.description ? /* @__PURE__ */ jsx(FieldDescription, { children: field.description }) : null,
-          field.errorMessage ? /* @__PURE__ */ jsx(FieldError, { children: field.errorMessage }) : null
-        ] }, field.id)) }) : null
-      ] })
+      /* @__PURE__ */ jsx(CardContent, { className: "space-y-4", children: section.fields && section.fields.length > 0 ? /* @__PURE__ */ jsx(FieldSet, { children: section.fields.map((field) => /* @__PURE__ */ jsxs(Field, { children: [
+        /* @__PURE__ */ jsxs(FieldLabel, { htmlFor: field.id, children: [
+          field.label,
+          field.required === true ? /* @__PURE__ */ jsx("span", { className: "ml-1 text-destructive", children: "*" }) : null
+        ] }),
+        renderFieldInput(field, emit),
+        field.description ? /* @__PURE__ */ jsx(FieldDescription, { children: field.description }) : null,
+        field.errorMessage ? /* @__PURE__ */ jsx(FieldError, { children: field.errorMessage }) : null
+      ] }, field.id)) }) : null })
     ] }, section.id)) }),
-    actions ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [
-      actions.secondary ? /* @__PURE__ */ jsx(
+    actionLabels ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [
+      actionLabels.secondary ? /* @__PURE__ */ jsx(
         Button,
         {
           variant: "ghost",
-          onClick: actions.secondary.onAction,
-          disabled: actions.secondary.disabled || isBusy,
-          children: actions.secondary.label
+          onClick: () => emit("secondaryAction"),
+          disabled: isBusy,
+          children: actionLabels.secondary
         }
       ) : null,
-      actions.tertiary ? /* @__PURE__ */ jsx(
+      actionLabels.tertiary ? /* @__PURE__ */ jsx(
         Button,
         {
           variant: "outline",
-          onClick: actions.tertiary.onAction,
-          disabled: actions.tertiary.disabled || isBusy,
-          children: actions.tertiary.label
+          onClick: () => emit("tertiaryAction"),
+          disabled: isBusy,
+          children: actionLabels.tertiary
         }
       ) : null,
-      actions.destructive ? /* @__PURE__ */ jsx(
+      actionLabels.destructive ? /* @__PURE__ */ jsx(
         Button,
         {
           variant: "destructive",
-          onClick: actions.destructive.onAction,
-          disabled: actions.destructive.disabled || isBusy,
-          children: actions.destructive.label
+          onClick: () => emit("destructiveAction"),
+          disabled: isBusy,
+          children: actionLabels.destructive
         }
       ) : null,
-      actions.primary ? /* @__PURE__ */ jsx(
+      actionLabels.primary ? /* @__PURE__ */ jsx(
         Button,
         {
-          onClick: actions.primary.onAction,
-          disabled: actions.primary.disabled || isBusy,
-          children: actions.primary.label
+          onClick: () => emit("primaryAction"),
+          disabled: isBusy,
+          children: actionLabels.primary
         }
       ) : null
     ] }) : null
-  ] }) });
+  ] });
 }
 
-export { CrudFormPageKit };
+export { FormFieldBlock };

package/dist/chunk-KKBTPNXT.js

@@ -0,0 +1,110 @@
+import { LanguageSwitcher } from './chunk-SEMWC3IT.js';
+import { Dialog, DialogContent, DialogTitle, DialogDescription } from './chunk-KHLMOBAU.js';
+import { useMotionConfig, m, motionSpring } from './chunk-PD2YEH3H.js';
+import { UsersIcon } from './chunk-WUO7OONN.js';
+import { SettingsIcon } from './chunk-OITJWGFV.js';
+import { PaletteIcon } from './chunk-M7YSMMAC.js';
+import { LockIcon } from './chunk-RYOTIXZO.js';
+import { GlobeIcon } from './chunk-JL4MVVFH.js';
+import { CreditCardIcon } from './chunk-JHQTKMKG.js';
+import { BellIcon } from './chunk-JBK2LA6U.js';
+import { UserIcon } from './chunk-UHXGBV5N.js';
+import { cn } from './chunk-QYZT24TS.js';
+import React from 'react';
+import { AnimatePresence } from 'motion/react';
+import { useTranslations } from 'next-intl';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var defaultSettingsTabs = [
+  { id: "general", icon: /* @__PURE__ */ jsx(SettingsIcon, { size: 16 }) },
+  { id: "profile", icon: /* @__PURE__ */ jsx(UserIcon, { size: 16 }) },
+  { id: "team", icon: /* @__PURE__ */ jsx(UsersIcon, { size: 16 }) },
+  { id: "notifications", icon: /* @__PURE__ */ jsx(BellIcon, { size: 16 }) },
+  { id: "security", icon: /* @__PURE__ */ jsx(LockIcon, { size: 16 }) },
+  { id: "billing", icon: /* @__PURE__ */ jsx(CreditCardIcon, { size: 16 }) },
+  { id: "appearance", icon: /* @__PURE__ */ jsx(PaletteIcon, { size: 16 }) },
+  { id: "language", icon: /* @__PURE__ */ jsx(GlobeIcon, { size: 16 }) }
+];
+function DefaultTabContent({ tab }) {
+  const t = useTranslations("pages.settings");
+  if (tab === "language") {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "text-lg font-medium text-text-primary", children: t("language") }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-text-secondary mt-1", children: t("description") })
+      ] }),
+      /* @__PURE__ */ jsx(LanguageSwitcher, { className: "w-48" })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "flex h-[400px] items-center justify-center rounded-lg border border-dashed border-border", children: /* @__PURE__ */ jsxs("div", { className: "text-center space-y-2", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-lg font-medium text-text-primary", children: t(tab) }),
+    /* @__PURE__ */ jsx("p", { className: "text-sm text-text-secondary", children: t("underConstruction") })
+  ] }) });
+}
+function SettingsModal({
+  open = false,
+  onOpenChange,
+  defaultTab = "profile",
+  tabs = defaultSettingsTabs,
+  renderContent,
+  ContentComponent
+}) {
+  const t = useTranslations("pages.settings");
+  const motionConfig = useMotionConfig();
+  const [activeTab, setActiveTab] = React.useState(defaultTab);
+  const [prevDefaultTab, setPrevDefaultTab] = React.useState(defaultTab);
+  if (prevDefaultTab !== defaultTab) {
+    setPrevDefaultTab(defaultTab);
+    setActiveTab(defaultTab);
+  }
+  let content;
+  if (renderContent) {
+    content = renderContent(activeTab);
+  } else if (ContentComponent) {
+    content = /* @__PURE__ */ jsx(ContentComponent, { tab: activeTab });
+  } else {
+    content = /* @__PURE__ */ jsx(DefaultTabContent, { tab: activeTab });
+  }
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-4xl p-0 gap-0 h-[600px] max-h-[85dvh] overflow-hidden", children: [
+    /* @__PURE__ */ jsx(DialogTitle, { className: "sr-only", children: t("title") }),
+    /* @__PURE__ */ jsx(DialogDescription, { className: "sr-only", children: t("description") }),
+    /* @__PURE__ */ jsxs("div", { className: "flex h-full", children: [
+      /* @__PURE__ */ jsx(
+        "nav",
+        {
+          "aria-label": t("settingsNavigation"),
+          className: "w-52 shrink-0 border-r border-border/50 p-4 flex flex-col items-center justify-center gap-1",
+          children: tabs.map((tab) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => setActiveTab(tab.id),
+              className: cn(
+                "flex items-center gap-3 w-full px-3 py-2.5 rounded-lg text-sm font-medium transition-colors",
+                activeTab === tab.id ? "bg-primary/10 text-primary" : "text-text-secondary hover:text-text-primary hover:bg-surface-hover"
+              ),
+              children: [
+                tab.icon,
+                /* @__PURE__ */ jsx("span", { children: tab.label ?? t(tab.id) })
+              ]
+            },
+            tab.id
+          ))
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-6", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
+        m.div,
+        {
+          initial: { opacity: 0, y: 8 },
+          animate: { opacity: 1, y: 0 },
+          exit: { opacity: 0, y: -8 },
+          transition: { ...motionSpring.snappy, ...motionConfig },
+          children: content
+        },
+        activeTab
+      ) }) })
+    ] })
+  ] }) });
+}
+
+export { SettingsModal, defaultSettingsTabs };