@framingui/ui 0.6.3 → 0.6.4

package/dist/templates/index.mjs

@@ -10,28 +10,28 @@ import {
   Input,
   Label,
   Separator
-} from "../chunk-7UBERMRE.mjs";
+} from "../chunk-RWYATDH5.mjs";
 
 // src/templates/types.ts
 var DEFAULT_RESPONSIVE_LAYOUT = {
   mobile: {
-    padding: "var(--tekton-layout-padding-mobile)",
+    padding: "var(--layout-padding-mobile)",
     // 16px
-    gap: "var(--tekton-layout-gap-mobile)",
+    gap: "var(--layout-gap-mobile)",
     // 16px
     columns: 4
   },
   tablet: {
-    padding: "var(--tekton-layout-padding-tablet)",
+    padding: "var(--layout-padding-tablet)",
     // 32px
-    gap: "var(--tekton-layout-gap-tablet)",
+    gap: "var(--layout-gap-tablet)",
     // 24px
     columns: 8
   },
   desktop: {
-    padding: "var(--tekton-layout-padding-desktop)",
+    padding: "var(--layout-padding-desktop)",
     // 64px
-    gap: "var(--tekton-layout-gap-desktop)",
+    gap: "var(--layout-gap-desktop)",
     // 32px
     columns: 12
   }
@@ -229,40 +229,40 @@ function LoginTemplateComponent({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `min-h-screen flex items-center justify-center p-[var(--tekton-spacing-4)] ${className}`,
+      className: `min-h-screen flex items-center justify-center p-[var(--spacing-4)] ${className}`,
       children: [
         /* @__PURE__ */ jsxs(Card, { className: "w-full max-w-md", children: [
           /* @__PURE__ */ jsxs(CardHeader, { children: [
-            slots.logo && /* @__PURE__ */ jsx("div", { className: "mb-[var(--tekton-spacing-4)]", children: slots.logo }),
+            slots.logo && /* @__PURE__ */ jsx("div", { className: "mb-[var(--spacing-4)]", children: slots.logo }),
             /* @__PURE__ */ jsx(CardTitle, { children: title }),
             /* @__PURE__ */ jsx(CardDescription, { children: subtitle })
           ] }),
-          /* @__PURE__ */ jsxs(CardContent, { className: "space-y-[var(--tekton-spacing-4)]", children: [
-            /* @__PURE__ */ jsxs("div", { className: "space-y-[var(--tekton-spacing-2)]", children: [
+          /* @__PURE__ */ jsxs(CardContent, { className: "space-y-[var(--spacing-4)]", children: [
+            /* @__PURE__ */ jsxs("div", { className: "space-y-[var(--spacing-2)]", children: [
               /* @__PURE__ */ jsx(Label, { htmlFor: "email", children: "Email" }),
               /* @__PURE__ */ jsx(Input, { id: "email", type: "email", placeholder: "Enter your email" })
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "space-y-[var(--tekton-spacing-2)]", children: [
+            /* @__PURE__ */ jsxs("div", { className: "space-y-[var(--spacing-2)]", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
                 /* @__PURE__ */ jsx(Label, { htmlFor: "password", children: "Password" }),
                 slots.forgotPassword && /* @__PURE__ */ jsx("div", { children: slots.forgotPassword })
               ] }),
               /* @__PURE__ */ jsx(Input, { id: "password", type: "password", placeholder: "Enter your password" })
             ] }),
-            showRememberMe && slots.rememberMe && /* @__PURE__ */ jsx("div", { className: "flex items-center space-x-[var(--tekton-spacing-2)]", children: slots.rememberMe }),
+            showRememberMe && slots.rememberMe && /* @__PURE__ */ jsx("div", { className: "flex items-center space-x-[var(--spacing-2)]", children: slots.rememberMe }),
             /* @__PURE__ */ jsx(Button, { className: "w-full", children: buttonLabel }),
             showSocialLogin && slots.socialLogin && /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsxs("div", { className: "relative", children: [
                 /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center", children: /* @__PURE__ */ jsx(Separator, {}) }),
-                /* @__PURE__ */ jsx("div", { className: "relative flex justify-center text-xs uppercase", children: /* @__PURE__ */ jsx("span", { className: "bg-[var(--tekton-bg-background)] px-[var(--tekton-spacing-2)] text-[var(--tekton-text-muted-foreground)]", children: "Or continue with" }) })
+                /* @__PURE__ */ jsx("div", { className: "relative flex justify-center text-xs uppercase", children: /* @__PURE__ */ jsx("span", { className: "bg-[var(--bg-background)] px-[var(--spacing-2)] text-[var(--text-muted-foreground)]", children: "Or continue with" }) })
               ] }),
-              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-[var(--tekton-spacing-4)]", children: slots.socialLogin })
+              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-[var(--spacing-4)]", children: slots.socialLogin })
             ] })
           ] }),
-          /* @__PURE__ */ jsx(CardFooter, { children: slots.footer || /* @__PURE__ */ jsxs("p", { className: "text-sm text-center w-full text-[var(--tekton-text-muted-foreground)]", children: [
+          /* @__PURE__ */ jsx(CardFooter, { children: slots.footer || /* @__PURE__ */ jsxs("p", { className: "text-sm text-center w-full text-[var(--text-muted-foreground)]", children: [
             "Don't have an account?",
             " ",
-            /* @__PURE__ */ jsx("a", { href: "#", className: "text-[var(--tekton-text-primary)] hover:underline", children: "Sign up" })
+            /* @__PURE__ */ jsx("a", { href: "#", className: "text-[var(--text-primary)] hover:underline", children: "Sign up" })
           ] }) })
         ] }),
         children
@@ -288,45 +288,45 @@ function SignupTemplateComponent({
   return /* @__PURE__ */ jsxs2(
     "div",
     {
-      className: `min-h-screen flex items-center justify-center p-[var(--tekton-spacing-4)] ${className}`,
+      className: `min-h-screen flex items-center justify-center p-[var(--spacing-4)] ${className}`,
       children: [
         /* @__PURE__ */ jsxs2(Card, { className: "w-full max-w-md", children: [
           /* @__PURE__ */ jsxs2(CardHeader, { children: [
-            slots.logo && /* @__PURE__ */ jsx2("div", { className: "mb-[var(--tekton-spacing-4)]", children: slots.logo }),
+            slots.logo && /* @__PURE__ */ jsx2("div", { className: "mb-[var(--spacing-4)]", children: slots.logo }),
             /* @__PURE__ */ jsx2(CardTitle, { children: title }),
             /* @__PURE__ */ jsx2(CardDescription, { children: subtitle })
           ] }),
-          /* @__PURE__ */ jsxs2(CardContent, { className: "space-y-[var(--tekton-spacing-4)]", children: [
-            /* @__PURE__ */ jsxs2("div", { className: "space-y-[var(--tekton-spacing-2)]", children: [
+          /* @__PURE__ */ jsxs2(CardContent, { className: "space-y-[var(--spacing-4)]", children: [
+            /* @__PURE__ */ jsxs2("div", { className: "space-y-[var(--spacing-2)]", children: [
               /* @__PURE__ */ jsx2(Label, { htmlFor: "name", children: "Name" }),
               /* @__PURE__ */ jsx2(Input, { id: "name", type: "text", placeholder: "Enter your name" })
             ] }),
-            /* @__PURE__ */ jsxs2("div", { className: "space-y-[var(--tekton-spacing-2)]", children: [
+            /* @__PURE__ */ jsxs2("div", { className: "space-y-[var(--spacing-2)]", children: [
               /* @__PURE__ */ jsx2(Label, { htmlFor: "email", children: "Email" }),
               /* @__PURE__ */ jsx2(Input, { id: "email", type: "email", placeholder: "Enter your email" })
             ] }),
-            /* @__PURE__ */ jsxs2("div", { className: "space-y-[var(--tekton-spacing-2)]", children: [
+            /* @__PURE__ */ jsxs2("div", { className: "space-y-[var(--spacing-2)]", children: [
               /* @__PURE__ */ jsx2(Label, { htmlFor: "password", children: "Password" }),
               /* @__PURE__ */ jsx2(Input, { id: "password", type: "password", placeholder: "Enter your password" })
             ] }),
-            /* @__PURE__ */ jsxs2("div", { className: "space-y-[var(--tekton-spacing-2)]", children: [
+            /* @__PURE__ */ jsxs2("div", { className: "space-y-[var(--spacing-2)]", children: [
               /* @__PURE__ */ jsx2(Label, { htmlFor: "password-confirm", children: "Confirm Password" }),
               /* @__PURE__ */ jsx2(Input, { id: "password-confirm", type: "password", placeholder: "Confirm your password" })
             ] }),
-            slots.termsCheckbox && /* @__PURE__ */ jsx2("div", { className: "flex items-start space-x-[var(--tekton-spacing-2)]", children: slots.termsCheckbox }),
+            slots.termsCheckbox && /* @__PURE__ */ jsx2("div", { className: "flex items-start space-x-[var(--spacing-2)]", children: slots.termsCheckbox }),
             /* @__PURE__ */ jsx2(Button, { className: "w-full", children: buttonLabel }),
             showSocialSignup && slots.socialSignup && /* @__PURE__ */ jsxs2(Fragment2, { children: [
               /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
                 /* @__PURE__ */ jsx2("div", { className: "absolute inset-0 flex items-center", children: /* @__PURE__ */ jsx2(Separator, {}) }),
-                /* @__PURE__ */ jsx2("div", { className: "relative flex justify-center text-xs uppercase", children: /* @__PURE__ */ jsx2("span", { className: "bg-[var(--tekton-bg-background)] px-[var(--tekton-spacing-2)] text-[var(--tekton-text-muted-foreground)]", children: "Or sign up with" }) })
+                /* @__PURE__ */ jsx2("div", { className: "relative flex justify-center text-xs uppercase", children: /* @__PURE__ */ jsx2("span", { className: "bg-[var(--bg-background)] px-[var(--spacing-2)] text-[var(--text-muted-foreground)]", children: "Or sign up with" }) })
               ] }),
-              /* @__PURE__ */ jsx2("div", { className: "grid grid-cols-2 gap-[var(--tekton-spacing-4)]", children: slots.socialSignup })
+              /* @__PURE__ */ jsx2("div", { className: "grid grid-cols-2 gap-[var(--spacing-4)]", children: slots.socialSignup })
             ] })
           ] }),
-          /* @__PURE__ */ jsx2(CardFooter, { children: slots.footer || /* @__PURE__ */ jsxs2("p", { className: "text-sm text-center w-full text-[var(--tekton-text-muted-foreground)]", children: [
+          /* @__PURE__ */ jsx2(CardFooter, { children: slots.footer || /* @__PURE__ */ jsxs2("p", { className: "text-sm text-center w-full text-[var(--text-muted-foreground)]", children: [
             "Already have an account?",
             " ",
-            /* @__PURE__ */ jsx2("a", { href: "#", className: "text-[var(--tekton-text-primary)] hover:underline", children: "Sign in" })
+            /* @__PURE__ */ jsx2("a", { href: "#", className: "text-[var(--text-primary)] hover:underline", children: "Sign in" })
           ] }) })
         ] }),
         children
@@ -350,25 +350,25 @@ function ForgotPasswordTemplateComponent({
   return /* @__PURE__ */ jsxs3(
     "div",
     {
-      className: `min-h-screen flex items-center justify-center p-[var(--tekton-spacing-4)] ${className}`,
+      className: `min-h-screen flex items-center justify-center p-[var(--spacing-4)] ${className}`,
       children: [
         /* @__PURE__ */ jsxs3(Card, { className: "w-full max-w-md", children: [
           /* @__PURE__ */ jsxs3(CardHeader, { children: [
-            slots.logo && /* @__PURE__ */ jsx3("div", { className: "mb-[var(--tekton-spacing-4)]", children: slots.logo }),
+            slots.logo && /* @__PURE__ */ jsx3("div", { className: "mb-[var(--spacing-4)]", children: slots.logo }),
             /* @__PURE__ */ jsx3(CardTitle, { children: title }),
             /* @__PURE__ */ jsx3(CardDescription, { children: subtitle })
           ] }),
-          /* @__PURE__ */ jsxs3(CardContent, { className: "space-y-[var(--tekton-spacing-4)]", children: [
-            /* @__PURE__ */ jsxs3("div", { className: "space-y-[var(--tekton-spacing-2)]", children: [
+          /* @__PURE__ */ jsxs3(CardContent, { className: "space-y-[var(--spacing-4)]", children: [
+            /* @__PURE__ */ jsxs3("div", { className: "space-y-[var(--spacing-2)]", children: [
               /* @__PURE__ */ jsx3(Label, { htmlFor: "email", children: "Email" }),
               /* @__PURE__ */ jsx3(Input, { id: "email", type: "email", placeholder: "Enter your email" })
             ] }),
             /* @__PURE__ */ jsx3(Button, { className: "w-full", children: buttonLabel })
           ] }),
-          /* @__PURE__ */ jsx3(CardFooter, { children: slots.footer || /* @__PURE__ */ jsxs3("p", { className: "text-sm text-center w-full text-[var(--tekton-text-muted-foreground)]", children: [
+          /* @__PURE__ */ jsx3(CardFooter, { children: slots.footer || /* @__PURE__ */ jsxs3("p", { className: "text-sm text-center w-full text-[var(--text-muted-foreground)]", children: [
             "Remember your password?",
             " ",
-            /* @__PURE__ */ jsx3("a", { href: "#", className: "text-[var(--tekton-text-primary)] hover:underline", children: "Back to login" })
+            /* @__PURE__ */ jsx3("a", { href: "#", className: "text-[var(--text-primary)] hover:underline", children: "Back to login" })
           ] }) })
         ] }),
         children
@@ -398,27 +398,27 @@ function VerificationTemplateComponent({
   return /* @__PURE__ */ jsxs4(
     "div",
     {
-      className: `min-h-screen flex items-center justify-center p-[var(--tekton-spacing-4)] ${className}`,
+      className: `min-h-screen flex items-center justify-center p-[var(--spacing-4)] ${className}`,
       children: [
         /* @__PURE__ */ jsxs4(Card, { className: "w-full max-w-md", children: [
           /* @__PURE__ */ jsxs4(CardHeader, { children: [
-            slots.icon && /* @__PURE__ */ jsx4("div", { className: "mb-[var(--tekton-spacing-4)]", children: slots.icon }),
+            slots.icon && /* @__PURE__ */ jsx4("div", { className: "mb-[var(--spacing-4)]", children: slots.icon }),
             /* @__PURE__ */ jsx4(CardTitle, { children: title }),
             /* @__PURE__ */ jsx4(CardDescription, { children: subtitle })
           ] }),
-          /* @__PURE__ */ jsxs4(CardContent, { className: "space-y-[var(--tekton-spacing-4)]", children: [
-            /* @__PURE__ */ jsx4("div", { className: "bg-[var(--tekton-bg-muted)] p-[var(--tekton-spacing-3)] rounded-[var(--tekton-radius-md)] text-center", children: /* @__PURE__ */ jsx4("p", { className: "text-sm font-medium", children: userEmail }) }),
+          /* @__PURE__ */ jsxs4(CardContent, { className: "space-y-[var(--spacing-4)]", children: [
+            /* @__PURE__ */ jsx4("div", { className: "bg-[var(--bg-muted)] p-[var(--spacing-3)] rounded-[var(--radius-md)] text-center", children: /* @__PURE__ */ jsx4("p", { className: "text-sm font-medium", children: userEmail }) }),
             /* @__PURE__ */ jsx4(Button, { className: "w-full", children: buttonLabel }),
-            showResend && /* @__PURE__ */ jsx4("div", { className: "text-center", children: /* @__PURE__ */ jsxs4("p", { className: "text-sm text-[var(--tekton-text-muted-foreground)]", children: [
+            showResend && /* @__PURE__ */ jsx4("div", { className: "text-center", children: /* @__PURE__ */ jsxs4("p", { className: "text-sm text-[var(--text-muted-foreground)]", children: [
               "Didn't receive the email?",
               " ",
-              /* @__PURE__ */ jsx4("button", { className: "text-[var(--tekton-text-primary)] hover:underline", children: "Resend" })
+              /* @__PURE__ */ jsx4("button", { className: "text-[var(--text-primary)] hover:underline", children: "Resend" })
             ] }) })
           ] }),
-          /* @__PURE__ */ jsx4(CardFooter, { children: slots.footer || /* @__PURE__ */ jsxs4("p", { className: "text-sm text-center w-full text-[var(--tekton-text-muted-foreground)]", children: [
+          /* @__PURE__ */ jsx4(CardFooter, { children: slots.footer || /* @__PURE__ */ jsxs4("p", { className: "text-sm text-center w-full text-[var(--text-muted-foreground)]", children: [
             "Wrong email?",
             " ",
-            /* @__PURE__ */ jsx4("a", { href: "#", className: "text-[var(--tekton-text-primary)] hover:underline", children: "Change email address" })
+            /* @__PURE__ */ jsx4("a", { href: "#", className: "text-[var(--text-primary)] hover:underline", children: "Change email address" })
           ] }) })
         ] }),
         children
@@ -443,17 +443,17 @@ function LandingTemplateComponent({
   const subtitle = texts.subtitle || "Start a new conversation or continue where you left off";
   const ctaLabel = texts.cta_label || "New Conversation";
   return /* @__PURE__ */ jsxs5("div", { className: `min-h-screen flex ${className}`, children: [
-    slots.sidebar && /* @__PURE__ */ jsx5("aside", { className: "w-64 border-r border-[var(--tekton-border-default)] bg-[var(--tekton-bg-muted)]", children: slots.sidebar }),
+    slots.sidebar && /* @__PURE__ */ jsx5("aside", { className: "w-64 border-r border-[var(--border-default)] bg-[var(--bg-muted)]", children: slots.sidebar }),
     /* @__PURE__ */ jsxs5("main", { className: "flex-1 flex flex-col", children: [
-      slots.header && /* @__PURE__ */ jsx5("header", { className: "border-b border-[var(--tekton-border-default)] p-[var(--tekton-spacing-4)]", children: slots.header }),
-      /* @__PURE__ */ jsx5("div", { className: "flex-1 flex flex-col items-center justify-center p-[var(--tekton-spacing-8)]", children: /* @__PURE__ */ jsxs5("div", { className: "max-w-2xl w-full text-center space-y-[var(--tekton-spacing-6)]", children: [
-        /* @__PURE__ */ jsxs5("div", { className: "space-y-[var(--tekton-spacing-2)]", children: [
+      slots.header && /* @__PURE__ */ jsx5("header", { className: "border-b border-[var(--border-default)] p-[var(--spacing-4)]", children: slots.header }),
+      /* @__PURE__ */ jsx5("div", { className: "flex-1 flex flex-col items-center justify-center p-[var(--spacing-8)]", children: /* @__PURE__ */ jsxs5("div", { className: "max-w-2xl w-full text-center space-y-[var(--spacing-6)]", children: [
+        /* @__PURE__ */ jsxs5("div", { className: "space-y-[var(--spacing-2)]", children: [
           /* @__PURE__ */ jsx5("h1", { className: "text-3xl font-bold", children: title }),
-          /* @__PURE__ */ jsx5("p", { className: "text-[var(--tekton-text-muted-foreground)]", children: subtitle })
+          /* @__PURE__ */ jsx5("p", { className: "text-[var(--text-muted-foreground)]", children: subtitle })
         ] }),
         /* @__PURE__ */ jsx5("div", { children: /* @__PURE__ */ jsx5(Button, { size: "lg", children: ctaLabel }) }),
-        slots.recentActivity && /* @__PURE__ */ jsx5("div", { className: "mt-[var(--tekton-spacing-8)]", children: slots.recentActivity }),
-        slots.suggestions && /* @__PURE__ */ jsx5("div", { className: "mt-[var(--tekton-spacing-6)]", children: slots.suggestions })
+        slots.recentActivity && /* @__PURE__ */ jsx5("div", { className: "mt-[var(--spacing-8)]", children: slots.recentActivity }),
+        slots.suggestions && /* @__PURE__ */ jsx5("div", { className: "mt-[var(--spacing-6)]", children: slots.suggestions })
       ] }) })
     ] }),
     children
@@ -473,13 +473,13 @@ function PreferencesTemplateComponent({
   const subtitle = texts.subtitle || "Manage your account settings and preferences";
   const saveLabel = texts.save_label || "Save Changes";
   return /* @__PURE__ */ jsxs6("div", { className: `min-h-screen flex ${className}`, children: [
-    slots.settingsNav && /* @__PURE__ */ jsx6("aside", { className: "w-64 border-r border-[var(--tekton-border-default)] p-[var(--tekton-spacing-4)] bg-[var(--tekton-bg-muted)]", children: slots.settingsNav }),
-    /* @__PURE__ */ jsx6("main", { className: "flex-1 p-[var(--tekton-spacing-8)]", children: /* @__PURE__ */ jsxs6("div", { className: "max-w-3xl", children: [
-      /* @__PURE__ */ jsxs6("div", { className: "mb-[var(--tekton-spacing-8)]", children: [
-        /* @__PURE__ */ jsx6("h1", { className: "text-3xl font-bold mb-[var(--tekton-spacing-2)]", children: title }),
-        /* @__PURE__ */ jsx6("p", { className: "text-[var(--tekton-text-muted-foreground)]", children: subtitle })
+    slots.settingsNav && /* @__PURE__ */ jsx6("aside", { className: "w-64 border-r border-[var(--border-default)] p-[var(--spacing-4)] bg-[var(--bg-muted)]", children: slots.settingsNav }),
+    /* @__PURE__ */ jsx6("main", { className: "flex-1 p-[var(--spacing-8)]", children: /* @__PURE__ */ jsxs6("div", { className: "max-w-3xl", children: [
+      /* @__PURE__ */ jsxs6("div", { className: "mb-[var(--spacing-8)]", children: [
+        /* @__PURE__ */ jsx6("h1", { className: "text-3xl font-bold mb-[var(--spacing-2)]", children: title }),
+        /* @__PURE__ */ jsx6("p", { className: "text-[var(--text-muted-foreground)]", children: subtitle })
       ] }),
-      /* @__PURE__ */ jsxs6("div", { className: "space-y-[var(--tekton-spacing-6)]", children: [
+      /* @__PURE__ */ jsxs6("div", { className: "space-y-[var(--spacing-6)]", children: [
         slots.generalSettings && /* @__PURE__ */ jsxs6(Card, { children: [
           /* @__PURE__ */ jsxs6(CardHeader, { children: [
             /* @__PURE__ */ jsx6(CardTitle, { children: "General" }),
@@ -503,7 +503,7 @@ function PreferencesTemplateComponent({
         ] }),
         slots.additionalSettings && slots.additionalSettings
       ] }),
-      /* @__PURE__ */ jsxs6("div", { className: "mt-[var(--tekton-spacing-8)] flex justify-end gap-[var(--tekton-spacing-4)]", children: [
+      /* @__PURE__ */ jsxs6("div", { className: "mt-[var(--spacing-8)] flex justify-end gap-[var(--spacing-4)]", children: [
         /* @__PURE__ */ jsx6(Button, { variant: "outline", children: "Cancel" }),
         /* @__PURE__ */ jsx6(Button, { children: saveLabel })
       ] })
@@ -530,40 +530,40 @@ function ProfileTemplateComponent({
   const saveLabel = texts.save_label || "Save Changes";
   const userName = String(options.user_name || "John Doe");
   const userEmail = String(options.user_email || "john@example.com");
-  return /* @__PURE__ */ jsxs7("div", { className: `min-h-screen p-[var(--tekton-spacing-8)] ${className}`, children: [
+  return /* @__PURE__ */ jsxs7("div", { className: `min-h-screen p-[var(--spacing-8)] ${className}`, children: [
     /* @__PURE__ */ jsxs7("div", { className: "max-w-3xl mx-auto", children: [
-      /* @__PURE__ */ jsxs7("div", { className: "mb-[var(--tekton-spacing-8)]", children: [
-        /* @__PURE__ */ jsx7("h1", { className: "text-3xl font-bold mb-[var(--tekton-spacing-2)]", children: title }),
-        /* @__PURE__ */ jsx7("p", { className: "text-[var(--tekton-text-muted-foreground)]", children: subtitle })
+      /* @__PURE__ */ jsxs7("div", { className: "mb-[var(--spacing-8)]", children: [
+        /* @__PURE__ */ jsx7("h1", { className: "text-3xl font-bold mb-[var(--spacing-2)]", children: title }),
+        /* @__PURE__ */ jsx7("p", { className: "text-[var(--text-muted-foreground)]", children: subtitle })
       ] }),
       /* @__PURE__ */ jsxs7(Card, { children: [
         /* @__PURE__ */ jsxs7(CardHeader, { children: [
           /* @__PURE__ */ jsx7(CardTitle, { children: "Personal Information" }),
           /* @__PURE__ */ jsx7(CardDescription, { children: "Update your profile details" })
         ] }),
-        /* @__PURE__ */ jsxs7(CardContent, { className: "space-y-[var(--tekton-spacing-6)]", children: [
-          slots.avatar && /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-[var(--tekton-spacing-4)]", children: [
+        /* @__PURE__ */ jsxs7(CardContent, { className: "space-y-[var(--spacing-6)]", children: [
+          slots.avatar && /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-[var(--spacing-4)]", children: [
             /* @__PURE__ */ jsx7("div", { children: slots.avatar }),
             /* @__PURE__ */ jsxs7("div", { children: [
               /* @__PURE__ */ jsx7(Button, { variant: "outline", size: "sm", children: "Change Photo" }),
-              /* @__PURE__ */ jsx7("p", { className: "text-xs text-[var(--tekton-text-muted-foreground)] mt-[var(--tekton-spacing-2)]", children: "JPG, PNG. Max 2MB" })
+              /* @__PURE__ */ jsx7("p", { className: "text-xs text-[var(--text-muted-foreground)] mt-[var(--spacing-2)]", children: "JPG, PNG. Max 2MB" })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs7("div", { className: "space-y-[var(--tekton-spacing-2)]", children: [
+          /* @__PURE__ */ jsxs7("div", { className: "space-y-[var(--spacing-2)]", children: [
             /* @__PURE__ */ jsx7(Label, { htmlFor: "name", children: "Name" }),
             /* @__PURE__ */ jsx7(Input, { id: "name", type: "text", defaultValue: userName })
           ] }),
-          /* @__PURE__ */ jsxs7("div", { className: "space-y-[var(--tekton-spacing-2)]", children: [
+          /* @__PURE__ */ jsxs7("div", { className: "space-y-[var(--spacing-2)]", children: [
             /* @__PURE__ */ jsx7(Label, { htmlFor: "email", children: "Email" }),
             /* @__PURE__ */ jsx7(Input, { id: "email", type: "email", defaultValue: userEmail, disabled: true }),
-            /* @__PURE__ */ jsx7("p", { className: "text-xs text-[var(--tekton-text-muted-foreground)]", children: "Contact support to change your email address" })
+            /* @__PURE__ */ jsx7("p", { className: "text-xs text-[var(--text-muted-foreground)]", children: "Contact support to change your email address" })
           ] }),
-          slots.bioField && /* @__PURE__ */ jsx7("div", { className: "space-y-[var(--tekton-spacing-2)]", children: slots.bioField }),
+          slots.bioField && /* @__PURE__ */ jsx7("div", { className: "space-y-[var(--spacing-2)]", children: slots.bioField }),
           slots.additionalFields && slots.additionalFields
         ] })
       ] }),
-      slots.additionalSections && /* @__PURE__ */ jsx7("div", { className: "mt-[var(--tekton-spacing-6)]", children: slots.additionalSections }),
-      /* @__PURE__ */ jsxs7("div", { className: "mt-[var(--tekton-spacing-8)] flex justify-end gap-[var(--tekton-spacing-4)]", children: [
+      slots.additionalSections && /* @__PURE__ */ jsx7("div", { className: "mt-[var(--spacing-6)]", children: slots.additionalSections }),
+      /* @__PURE__ */ jsxs7("div", { className: "mt-[var(--spacing-8)] flex justify-end gap-[var(--spacing-4)]", children: [
         /* @__PURE__ */ jsx7(Button, { variant: "outline", children: "Cancel" }),
         /* @__PURE__ */ jsx7(Button, { children: saveLabel })
       ] })
@@ -587,11 +587,11 @@ function LoadingTemplateComponent({
   return /* @__PURE__ */ jsxs8(
     "div",
     {
-      className: `min-h-screen flex items-center justify-center p-[var(--tekton-spacing-4)] ${className}`,
+      className: `min-h-screen flex items-center justify-center p-[var(--spacing-4)] ${className}`,
       children: [
-        /* @__PURE__ */ jsxs8("div", { className: "flex flex-col items-center gap-[var(--tekton-spacing-4)]", children: [
-          slots.spinner || /* @__PURE__ */ jsx8("div", { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-[var(--tekton-border-primary)]" }),
-          showMessage && /* @__PURE__ */ jsx8("p", { className: "text-sm text-[var(--tekton-text-muted-foreground)]", children: message })
+        /* @__PURE__ */ jsxs8("div", { className: "flex flex-col items-center gap-[var(--spacing-4)]", children: [
+          slots.spinner || /* @__PURE__ */ jsx8("div", { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-[var(--border-primary)]" }),
+          showMessage && /* @__PURE__ */ jsx8("p", { className: "text-sm text-[var(--text-muted-foreground)]", children: message })
         ] }),
         children
       ]
@@ -619,14 +619,14 @@ function ErrorTemplateComponent({
   return /* @__PURE__ */ jsxs9(
     "div",
     {
-      className: `min-h-screen flex items-center justify-center p-[var(--tekton-spacing-4)] ${className}`,
+      className: `min-h-screen flex items-center justify-center p-[var(--spacing-4)] ${className}`,
       children: [
-        /* @__PURE__ */ jsxs9("div", { className: "max-w-md text-center space-y-[var(--tekton-spacing-6)]", children: [
-          slots.icon || /* @__PURE__ */ jsx9("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx9("div", { className: "rounded-full bg-[var(--tekton-bg-destructive)] bg-opacity-10 p-[var(--tekton-spacing-4)]", children: /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsxs9("div", { className: "max-w-md text-center space-y-[var(--spacing-6)]", children: [
+          slots.icon || /* @__PURE__ */ jsx9("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx9("div", { className: "rounded-full bg-[var(--bg-destructive)] bg-opacity-10 p-[var(--spacing-4)]", children: /* @__PURE__ */ jsx9(
             "svg",
             {
               xmlns: "http://www.w3.org/2000/svg",
-              className: "h-12 w-12 text-[var(--tekton-text-destructive)]",
+              className: "h-12 w-12 text-[var(--text-destructive)]",
               fill: "none",
               viewBox: "0 0 24 24",
               stroke: "currentColor",
@@ -641,12 +641,12 @@ function ErrorTemplateComponent({
               )
             }
           ) }) }),
-          /* @__PURE__ */ jsxs9("div", { className: "space-y-[var(--tekton-spacing-2)]", children: [
+          /* @__PURE__ */ jsxs9("div", { className: "space-y-[var(--spacing-2)]", children: [
             /* @__PURE__ */ jsx9("h2", { className: "text-2xl font-bold", children: title }),
-            /* @__PURE__ */ jsx9("p", { className: "text-[var(--tekton-text-muted-foreground)]", children: message })
+            /* @__PURE__ */ jsx9("p", { className: "text-[var(--text-muted-foreground)]", children: message })
           ] }),
-          slots.errorDetails && /* @__PURE__ */ jsx9("div", { className: "text-left bg-[var(--tekton-bg-muted)] p-[var(--tekton-spacing-4)] rounded-[var(--tekton-radius-md)] text-sm", children: slots.errorDetails }),
-          /* @__PURE__ */ jsxs9("div", { className: "flex flex-col gap-[var(--tekton-spacing-3)]", children: [
+          slots.errorDetails && /* @__PURE__ */ jsx9("div", { className: "text-left bg-[var(--bg-muted)] p-[var(--spacing-4)] rounded-[var(--radius-md)] text-sm", children: slots.errorDetails }),
+          /* @__PURE__ */ jsxs9("div", { className: "flex flex-col gap-[var(--spacing-3)]", children: [
             showRetry && /* @__PURE__ */ jsx9(Button, { className: "w-full", children: retryLabel }),
             slots.additionalActions && slots.additionalActions
           ] })
@@ -674,14 +674,14 @@ function EmptyTemplateComponent({
   return /* @__PURE__ */ jsxs10(
     "div",
     {
-      className: `min-h-screen flex items-center justify-center p-[var(--tekton-spacing-4)] ${className}`,
+      className: `min-h-screen flex items-center justify-center p-[var(--spacing-4)] ${className}`,
       children: [
-        /* @__PURE__ */ jsxs10("div", { className: "max-w-md text-center space-y-[var(--tekton-spacing-6)]", children: [
-          slots.illustration || /* @__PURE__ */ jsx10("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx10("div", { className: "rounded-full bg-[var(--tekton-bg-muted)] p-[var(--tekton-spacing-8)]", children: /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsxs10("div", { className: "max-w-md text-center space-y-[var(--spacing-6)]", children: [
+          slots.illustration || /* @__PURE__ */ jsx10("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx10("div", { className: "rounded-full bg-[var(--bg-muted)] p-[var(--spacing-8)]", children: /* @__PURE__ */ jsx10(
             "svg",
             {
               xmlns: "http://www.w3.org/2000/svg",
-              className: "h-16 w-16 text-[var(--tekton-text-muted-foreground)]",
+              className: "h-16 w-16 text-[var(--text-muted-foreground)]",
               fill: "none",
               viewBox: "0 0 24 24",
               stroke: "currentColor",
@@ -696,12 +696,12 @@ function EmptyTemplateComponent({
               )
             }
           ) }) }),
-          /* @__PURE__ */ jsxs10("div", { className: "space-y-[var(--tekton-spacing-2)]", children: [
+          /* @__PURE__ */ jsxs10("div", { className: "space-y-[var(--spacing-2)]", children: [
             /* @__PURE__ */ jsx10("h2", { className: "text-2xl font-bold", children: title }),
-            /* @__PURE__ */ jsx10("p", { className: "text-[var(--tekton-text-muted-foreground)]", children: message })
+            /* @__PURE__ */ jsx10("p", { className: "text-[var(--text-muted-foreground)]", children: message })
           ] }),
           showCta && /* @__PURE__ */ jsx10("div", { children: /* @__PURE__ */ jsx10(Button, { size: "lg", children: ctaLabel }) }),
-          slots.helpText && /* @__PURE__ */ jsx10("div", { className: "text-sm text-[var(--tekton-text-muted-foreground)]", children: slots.helpText })
+          slots.helpText && /* @__PURE__ */ jsx10("div", { className: "text-sm text-[var(--text-muted-foreground)]", children: slots.helpText })
         ] }),
         children
       ]
@@ -727,16 +727,16 @@ function ConfirmationTemplateComponent({
   return /* @__PURE__ */ jsxs11(
     "div",
     {
-      className: `min-h-screen flex items-center justify-center p-[var(--tekton-spacing-4)] ${className}`,
+      className: `min-h-screen flex items-center justify-center p-[var(--spacing-4)] ${className}`,
       children: [
         /* @__PURE__ */ jsxs11(Card, { className: "w-full max-w-md", children: [
           /* @__PURE__ */ jsxs11(CardHeader, { children: [
-            isDestructive && slots.warningIcon && /* @__PURE__ */ jsx11("div", { className: "mb-[var(--tekton-spacing-2)]", children: slots.warningIcon }),
+            isDestructive && slots.warningIcon && /* @__PURE__ */ jsx11("div", { className: "mb-[var(--spacing-2)]", children: slots.warningIcon }),
             /* @__PURE__ */ jsx11(CardTitle, { children: title }),
             /* @__PURE__ */ jsx11(CardDescription, { children: message })
           ] }),
-          /* @__PURE__ */ jsx11(CardContent, { children: slots.details && /* @__PURE__ */ jsx11("div", { className: "bg-[var(--tekton-bg-muted)] p-[var(--tekton-spacing-4)] rounded-[var(--tekton-radius-md)] text-sm", children: slots.details }) }),
-          /* @__PURE__ */ jsxs11(CardFooter, { className: "flex justify-end gap-[var(--tekton-spacing-3)]", children: [
+          /* @__PURE__ */ jsx11(CardContent, { children: slots.details && /* @__PURE__ */ jsx11("div", { className: "bg-[var(--bg-muted)] p-[var(--spacing-4)] rounded-[var(--radius-md)] text-sm", children: slots.details }) }),
+          /* @__PURE__ */ jsxs11(CardFooter, { className: "flex justify-end gap-[var(--spacing-3)]", children: [
             /* @__PURE__ */ jsx11(Button, { variant: "outline", children: cancelLabel }),
             /* @__PURE__ */ jsx11(Button, { variant: isDestructive ? "destructive" : "default", children: confirmLabel })
           ] })
@@ -767,14 +767,14 @@ function SuccessTemplateComponent({
   return /* @__PURE__ */ jsxs12(
     "div",
     {
-      className: `min-h-screen flex items-center justify-center p-[var(--tekton-spacing-4)] ${className}`,
+      className: `min-h-screen flex items-center justify-center p-[var(--spacing-4)] ${className}`,
       children: [
-        /* @__PURE__ */ jsxs12("div", { className: "max-w-md text-center space-y-[var(--tekton-spacing-6)]", children: [
-          slots.icon || /* @__PURE__ */ jsx12("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx12("div", { className: "rounded-full bg-[var(--tekton-bg-success)] bg-opacity-10 p-[var(--tekton-spacing-4)]", children: /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsxs12("div", { className: "max-w-md text-center space-y-[var(--spacing-6)]", children: [
+          slots.icon || /* @__PURE__ */ jsx12("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx12("div", { className: "rounded-full bg-[var(--bg-success)] bg-opacity-10 p-[var(--spacing-4)]", children: /* @__PURE__ */ jsx12(
             "svg",
             {
               xmlns: "http://www.w3.org/2000/svg",
-              className: "h-12 w-12 text-[var(--tekton-text-success)]",
+              className: "h-12 w-12 text-[var(--text-success)]",
               fill: "none",
               viewBox: "0 0 24 24",
               stroke: "currentColor",
@@ -789,13 +789,13 @@ function SuccessTemplateComponent({
               )
             }
           ) }) }),
-          /* @__PURE__ */ jsxs12("div", { className: "space-y-[var(--tekton-spacing-2)]", children: [
+          /* @__PURE__ */ jsxs12("div", { className: "space-y-[var(--spacing-2)]", children: [
             /* @__PURE__ */ jsx12("h2", { className: "text-2xl font-bold", children: title }),
-            /* @__PURE__ */ jsx12("p", { className: "text-[var(--tekton-text-muted-foreground)]", children: message })
+            /* @__PURE__ */ jsx12("p", { className: "text-[var(--text-muted-foreground)]", children: message })
           ] }),
-          slots.details && /* @__PURE__ */ jsx12("div", { className: "text-left bg-[var(--tekton-bg-muted)] p-[var(--tekton-spacing-4)] rounded-[var(--tekton-radius-md)] text-sm", children: slots.details }),
+          slots.details && /* @__PURE__ */ jsx12("div", { className: "text-left bg-[var(--bg-muted)] p-[var(--spacing-4)] rounded-[var(--radius-md)] text-sm", children: slots.details }),
           showCta && /* @__PURE__ */ jsx12("div", { children: /* @__PURE__ */ jsx12(Button, { className: "w-full", size: "lg", children: ctaLabel }) }),
-          slots.additionalActions && /* @__PURE__ */ jsx12("div", { className: "flex flex-col gap-[var(--tekton-spacing-3)]", children: slots.additionalActions })
+          slots.additionalActions && /* @__PURE__ */ jsx12("div", { className: "flex flex-col gap-[var(--spacing-3)]", children: slots.additionalActions })
         ] }),
         children
       ]
@@ -818,21 +818,21 @@ function DashboardTemplateComponent({
   const title = texts.title || "Dashboard";
   const subtitle = texts.subtitle || "Welcome to your dashboard";
   return /* @__PURE__ */ jsxs13("div", { className: `min-h-screen flex ${className}`, children: [
-    slots.sidebar && /* @__PURE__ */ jsx13("aside", { className: "w-64 border-r border-[var(--tekton-border-default)] bg-[var(--tekton-bg-card)] hidden lg:block", children: slots.sidebar }),
-    /* @__PURE__ */ jsxs13("main", { className: "flex-1 overflow-auto bg-[var(--tekton-bg-background)]", children: [
-      /* @__PURE__ */ jsx13("header", { className: "sticky top-0 z-10 border-b border-[var(--tekton-border-default)] bg-[var(--tekton-bg-background)]/80 backdrop-blur-md p-[var(--tekton-spacing-4)]", children: /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-between", children: [
+    slots.sidebar && /* @__PURE__ */ jsx13("aside", { className: "w-64 border-r border-[var(--border-default)] bg-[var(--bg-card)] hidden lg:block", children: slots.sidebar }),
+    /* @__PURE__ */ jsxs13("main", { className: "flex-1 overflow-auto bg-[var(--bg-background)]", children: [
+      /* @__PURE__ */ jsx13("header", { className: "sticky top-0 z-10 border-b border-[var(--border-default)] bg-[var(--bg-background)]/80 backdrop-blur-md p-[var(--spacing-4)]", children: /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsxs13("div", { children: [
-          /* @__PURE__ */ jsx13("h1", { className: "text-2xl font-bold text-[var(--tekton-text-foreground)]", children: title }),
-          /* @__PURE__ */ jsx13("p", { className: "text-sm text-[var(--tekton-text-muted-foreground)]", children: subtitle })
+          /* @__PURE__ */ jsx13("h1", { className: "text-2xl font-bold text-[var(--text-foreground)]", children: title }),
+          /* @__PURE__ */ jsx13("p", { className: "text-sm text-[var(--text-muted-foreground)]", children: subtitle })
         ] }),
         slots.headerActions && /* @__PURE__ */ jsx13("div", { children: slots.headerActions })
       ] }) }),
-      /* @__PURE__ */ jsxs13("div", { className: "py-[var(--tekton-layout-section-py,var(--tekton-spacing-6))] px-[var(--tekton-layout-container-px,var(--tekton-spacing-6))] space-y-[var(--tekton-layout-stack-gap,var(--tekton-spacing-6))] max-w-[var(--tekton-layout-container-xl)] mx-auto", children: [
-        slots.metrics && /* @__PURE__ */ jsx13("div", { className: "grid gap-[var(--tekton-spacing-4)] grid-cols-2 lg:grid-cols-4", children: slots.metrics }),
+      /* @__PURE__ */ jsxs13("div", { className: "py-[var(--layout-section-py,var(--spacing-6))] px-[var(--layout-container-px,var(--spacing-6))] space-y-[var(--layout-stack-gap,var(--spacing-6))] max-w-[var(--layout-container-xl)] mx-auto", children: [
+        slots.metrics && /* @__PURE__ */ jsx13("div", { className: "grid gap-[var(--spacing-4)] grid-cols-2 lg:grid-cols-4", children: slots.metrics }),
         /* @__PURE__ */ jsx13(Separator, {}),
-        /* @__PURE__ */ jsxs13("div", { className: "grid gap-x-[var(--tekton-layout-grid-gap-x,var(--tekton-spacing-6))] gap-y-[var(--tekton-layout-grid-gap-y,var(--tekton-spacing-6))] lg:grid-cols-12", children: [
-          slots.primaryContent && /* @__PURE__ */ jsx13("div", { className: "lg:col-span-8 space-y-[var(--tekton-layout-stack-gap,var(--tekton-spacing-6))]", children: slots.primaryContent }),
-          slots.secondaryContent && /* @__PURE__ */ jsx13("div", { className: "lg:col-span-4 space-y-[var(--tekton-layout-stack-gap,var(--tekton-spacing-6))]", children: /* @__PURE__ */ jsxs13(Card, { className: "h-full", children: [
+        /* @__PURE__ */ jsxs13("div", { className: "grid gap-x-[var(--layout-grid-gap-x,var(--spacing-6))] gap-y-[var(--layout-grid-gap-y,var(--spacing-6))] lg:grid-cols-12", children: [
+          slots.primaryContent && /* @__PURE__ */ jsx13("div", { className: "lg:col-span-8 space-y-[var(--layout-stack-gap,var(--spacing-6))]", children: slots.primaryContent }),
+          slots.secondaryContent && /* @__PURE__ */ jsx13("div", { className: "lg:col-span-4 space-y-[var(--layout-stack-gap,var(--spacing-6))]", children: /* @__PURE__ */ jsxs13(Card, { className: "h-full", children: [
             /* @__PURE__ */ jsxs13(CardHeader, { children: [
               /* @__PURE__ */ jsx13(CardTitle, { children: texts.secondary_title || "Activity" }),
               /* @__PURE__ */ jsx13(CardDescription, { children: texts.secondary_description || "Recent updates" })