@schandlergarcia/sf-web-components 1.9.6 → 1.9.8

package/dist/components/library/ui/UIButton.d.ts

@@ -1,11 +1,11 @@
 import * as React from "react";
 declare const VARIANT_CLASSES: {
-    readonly primary: "bg-brand-600 text-white hover:bg-brand-500 dark:bg-brand-500 dark:hover:bg-brand-400 border-transparent";
+    readonly primary: "bg-blue-600 text-white hover:bg-blue-500 dark:bg-blue-500 dark:hover:bg-blue-400 border-transparent";
     readonly secondary: "bg-slate-900 text-white hover:bg-slate-800 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-slate-200 border-transparent";
     readonly destructive: "bg-red-600 text-white hover:bg-red-500 dark:bg-red-500 dark:hover:bg-red-400 border-transparent";
     readonly outline: "bg-transparent text-slate-900 hover:bg-slate-50 dark:text-slate-50 dark:hover:bg-slate-900 border-slate-200 dark:border-slate-800";
     readonly ghost: "bg-transparent text-slate-900 hover:bg-slate-100 dark:text-slate-50 dark:hover:bg-slate-900 border-transparent";
-    readonly link: "text-brand-600 underline-offset-4 hover:underline dark:text-brand-400 border-transparent";
+    readonly link: "text-blue-600 underline-offset-4 hover:underline dark:text-blue-400 border-transparent";
 };
 declare const SIZE_CLASSES: {
     readonly sm: "h-8 px-3 text-sm";

package/dist/components/library/ui/UIButton.js

@@ -1,47 +1,47 @@
-import { jsx as b } from "react/jsx-runtime";
+import { jsx as d } from "react/jsx-runtime";
 const i = {
-  primary: "bg-brand-600 text-white hover:bg-brand-500 dark:bg-brand-500 dark:hover:bg-brand-400 border-transparent",
+  primary: "bg-blue-600 text-white hover:bg-blue-500 dark:bg-blue-500 dark:hover:bg-blue-400 border-transparent",
   secondary: "bg-slate-900 text-white hover:bg-slate-800 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-slate-200 border-transparent",
   destructive: "bg-red-600 text-white hover:bg-red-500 dark:bg-red-500 dark:hover:bg-red-400 border-transparent",
   outline: "bg-transparent text-slate-900 hover:bg-slate-50 dark:text-slate-50 dark:hover:bg-slate-900 border-slate-200 dark:border-slate-800",
   ghost: "bg-transparent text-slate-900 hover:bg-slate-100 dark:text-slate-50 dark:hover:bg-slate-900 border-transparent",
-  link: "text-brand-600 underline-offset-4 hover:underline dark:text-brand-400 border-transparent"
-}, g = {
+  link: "text-blue-600 underline-offset-4 hover:underline dark:text-blue-400 border-transparent"
+}, u = {
   sm: "h-8 px-3 text-sm",
   md: "h-10 px-4 text-sm",
   lg: "h-12 px-5 text-base",
   icon: "h-10 w-10 p-0"
 };
-function u({
+function f({
   variant: e = "primary",
   size: t = "md",
   fullWidth: r = !1,
   disabled: a = !1,
   className: s = "",
-  children: n,
-  ...o
+  children: o,
+  ...n
 }) {
-  const d = i[e], l = g[t];
-  return /* @__PURE__ */ b(
+  const l = i[e], b = u[t];
+  return /* @__PURE__ */ d(
     "button",
     {
       type: "button",
       disabled: a,
       className: [
         "inline-flex items-center justify-center gap-2 rounded-lg border font-medium shadow-sm transition",
-        "focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-950",
+        "focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-950",
         "disabled:cursor-not-allowed disabled:opacity-60",
-        d,
         l,
+        b,
         r ? "w-full" : "",
         s
       ].filter(Boolean).join(" "),
-      ...o,
-      children: n
+      ...n,
+      children: o
     }
   );
 }
 export {
-  u as default
+  f as default
 };
 //# sourceMappingURL=UIButton.js.map

package/dist/components/library/ui/UIButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"UIButton.js","sources":["../../../../src/components/library/ui/UIButton.tsx"],"sourcesContent":["import * as React from \"react\";\n\nconst VARIANT_CLASSES = {\n  primary:\n    \"bg-brand-600 text-white hover:bg-brand-500 dark:bg-brand-500 dark:hover:bg-brand-400 border-transparent\",\n  secondary:\n    \"bg-slate-900 text-white hover:bg-slate-800 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-slate-200 border-transparent\",\n  destructive:\n    \"bg-red-600 text-white hover:bg-red-500 dark:bg-red-500 dark:hover:bg-red-400 border-transparent\",\n  outline:\n    \"bg-transparent text-slate-900 hover:bg-slate-50 dark:text-slate-50 dark:hover:bg-slate-900 border-slate-200 dark:border-slate-800\",\n  ghost:\n    \"bg-transparent text-slate-900 hover:bg-slate-100 dark:text-slate-50 dark:hover:bg-slate-900 border-transparent\",\n  link: \"text-brand-600 underline-offset-4 hover:underline dark:text-brand-400 border-transparent\"\n} as const;\n\nconst SIZE_CLASSES = {\n  sm: \"h-8 px-3 text-sm\",\n  md: \"h-10 px-4 text-sm\",\n  lg: \"h-12 px-5 text-base\",\n  icon: \"h-10 w-10 p-0\"\n} as const;\n\nexport interface UIButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: keyof typeof VARIANT_CLASSES;\n  size?: keyof typeof SIZE_CLASSES;\n  fullWidth?: boolean;\n}\n\nexport default function UIButton({\n  variant = \"primary\",\n  size = \"md\",\n  fullWidth = false,\n  disabled = false,\n  className = \"\",\n  children,\n  ...rest\n}: UIButtonProps) {\n  const variantClass = VARIANT_CLASSES[variant];\n  const sizeClass = SIZE_CLASSES[size];\n\n  return (\n    <button\n      type=\"button\"\n      disabled={disabled}\n      className={[\n        \"inline-flex items-center justify-center gap-2 rounded-lg border font-medium shadow-sm transition\",\n        \"focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-950\",\n        \"disabled:cursor-not-allowed disabled:opacity-60\",\n        variantClass,\n        sizeClass,\n        fullWidth ? \"w-full\" : \"\",\n        className\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      {...rest}\n    >\n      {children}\n    </button>\n  );\n}\n"],"names":["VARIANT_CLASSES","SIZE_CLASSES","UIButton","variant","size","fullWidth","disabled","className","children","rest","variantClass","sizeClass","jsx"],"mappings":";AAEA,MAAMA,IAAkB;AAAA,EACtB,SACE;AAAA,EACF,WACE;AAAA,EACF,aACE;AAAA,EACF,SACE;AAAA,EACF,OACE;AAAA,EACF,MAAM;AACR,GAEMC,IAAe;AAAA,EACnB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AACR;AAQA,SAAwBC,EAAS;AAAA,EAC/B,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,UAAAC;AAAA,EACA,GAAGC;AACL,GAAkB;AAChB,QAAMC,IAAeV,EAAgBG,CAAO,GACtCQ,IAAYV,EAAaG,CAAI;AAEnC,SACE,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,UAAAN;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACAI;AAAA,QACAC;AAAA,QACAN,IAAY,WAAW;AAAA,QACvBE;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACV,GAAGE;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"UIButton.js","sources":["../../../../src/components/library/ui/UIButton.tsx"],"sourcesContent":["import * as React from \"react\";\n\nconst VARIANT_CLASSES = {\n  primary:\n    \"bg-blue-600 text-white hover:bg-blue-500 dark:bg-blue-500 dark:hover:bg-blue-400 border-transparent\",\n  secondary:\n    \"bg-slate-900 text-white hover:bg-slate-800 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-slate-200 border-transparent\",\n  destructive:\n    \"bg-red-600 text-white hover:bg-red-500 dark:bg-red-500 dark:hover:bg-red-400 border-transparent\",\n  outline:\n    \"bg-transparent text-slate-900 hover:bg-slate-50 dark:text-slate-50 dark:hover:bg-slate-900 border-slate-200 dark:border-slate-800\",\n  ghost:\n    \"bg-transparent text-slate-900 hover:bg-slate-100 dark:text-slate-50 dark:hover:bg-slate-900 border-transparent\",\n  link: \"text-blue-600 underline-offset-4 hover:underline dark:text-blue-400 border-transparent\"\n} as const;\n\nconst SIZE_CLASSES = {\n  sm: \"h-8 px-3 text-sm\",\n  md: \"h-10 px-4 text-sm\",\n  lg: \"h-12 px-5 text-base\",\n  icon: \"h-10 w-10 p-0\"\n} as const;\n\nexport interface UIButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: keyof typeof VARIANT_CLASSES;\n  size?: keyof typeof SIZE_CLASSES;\n  fullWidth?: boolean;\n}\n\nexport default function UIButton({\n  variant = \"primary\",\n  size = \"md\",\n  fullWidth = false,\n  disabled = false,\n  className = \"\",\n  children,\n  ...rest\n}: UIButtonProps) {\n  const variantClass = VARIANT_CLASSES[variant];\n  const sizeClass = SIZE_CLASSES[size];\n\n  return (\n    <button\n      type=\"button\"\n      disabled={disabled}\n      className={[\n        \"inline-flex items-center justify-center gap-2 rounded-lg border font-medium shadow-sm transition\",\n        \"focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-950\",\n        \"disabled:cursor-not-allowed disabled:opacity-60\",\n        variantClass,\n        sizeClass,\n        fullWidth ? \"w-full\" : \"\",\n        className\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      {...rest}\n    >\n      {children}\n    </button>\n  );\n}\n"],"names":["VARIANT_CLASSES","SIZE_CLASSES","UIButton","variant","size","fullWidth","disabled","className","children","rest","variantClass","sizeClass","jsx"],"mappings":";AAEA,MAAMA,IAAkB;AAAA,EACtB,SACE;AAAA,EACF,WACE;AAAA,EACF,aACE;AAAA,EACF,SACE;AAAA,EACF,OACE;AAAA,EACF,MAAM;AACR,GAEMC,IAAe;AAAA,EACnB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AACR;AAQA,SAAwBC,EAAS;AAAA,EAC/B,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,UAAAC;AAAA,EACA,GAAGC;AACL,GAAkB;AAChB,QAAMC,IAAeV,EAAgBG,CAAO,GACtCQ,IAAYV,EAAaG,CAAI;AAEnC,SACE,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,UAAAN;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACAI;AAAA,QACAC;AAAA,QACAN,IAAY,WAAW;AAAA,QACvBE;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACV,GAAGE;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schandlergarcia/sf-web-components",
-  "version": "1.9.6",
+  "version": "1.9.8",
   "description": "Reusable Salesforce web components library with Tailwind CSS v4 and shadcn/ui",
   "type": "module",
   "main": "./dist/index.js",
@@ -65,7 +65,7 @@
     "world-atlas": "^2.0.0"
   },
   "dependencies": {
-    "@schandlergarcia/sf-web-components": "^1.9.0",
+    "@schandlergarcia/sf-web-components": "^1.9.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "glob": "^13.0.6",

package/scripts/postinstall.mjs

@@ -198,34 +198,19 @@ if (fs.existsSync(templatesDir)) {
   }
 }
 
-// Update routes.tsx to use the installed templates
+// Copy routes.tsx template with full configuration
+const routesTemplatePath = path.join(packageRoot, 'src/templates/config/routes.tsx.template');
 const routesPath = path.join(cwd, 'src/routes.tsx');
-if (fs.existsSync(routesPath) && installedTemplates.length > 0) {
-  console.log('\n🔄 Updating routes.tsx...\n');
 
-  try {
-    let routesContent = fs.readFileSync(routesPath, 'utf-8');
-    let routesUpdated = false;
-
-    for (const pageName of installedTemplates) {
-      // Match import statements like: import Home from './features/.../Home' or import Home from './pages/Home'
-      const importRegex = new RegExp(`import ${pageName} from ['"]\\./(features|pages)/[^'"]+/${pageName}['"];?`, 'g');
-
-      if (importRegex.test(routesContent)) {
-        routesContent = routesContent.replace(
-          importRegex,
-          `import ${pageName} from './pages/${pageName}';`
-        );
-        routesUpdated = true;
-        console.log(`  ✓ Updated ${pageName} import`);
-      }
-    }
+if (fs.existsSync(routesTemplatePath) && fs.existsSync(path.join(cwd, 'src'))) {
+  console.log('\n🔄 Installing routes configuration...\n');
 
-    if (routesUpdated) {
-      fs.writeFileSync(routesPath, routesContent, 'utf-8');
-    }
+  try {
+    const routesContent = fs.readFileSync(routesTemplatePath, 'utf-8');
+    fs.writeFileSync(routesPath, routesContent, 'utf-8');
+    console.log('  ✓ Installed complete routes.tsx with Account search and detail pages');
   } catch (error) {
-    console.error(`  ✗ Failed to update routes.tsx: ${error.message}`);
+    console.error(`  ✗ Failed to install routes.tsx: ${error.message}`);
   }
 }
 

package/src/components/library/ui/UIButton.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 
 const VARIANT_CLASSES = {
   primary:
-    "bg-brand-600 text-white hover:bg-brand-500 dark:bg-brand-500 dark:hover:bg-brand-400 border-transparent",
+    "bg-blue-600 text-white hover:bg-blue-500 dark:bg-blue-500 dark:hover:bg-blue-400 border-transparent",
   secondary:
     "bg-slate-900 text-white hover:bg-slate-800 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-slate-200 border-transparent",
   destructive:
@@ -11,7 +11,7 @@ const VARIANT_CLASSES = {
     "bg-transparent text-slate-900 hover:bg-slate-50 dark:text-slate-50 dark:hover:bg-slate-900 border-slate-200 dark:border-slate-800",
   ghost:
     "bg-transparent text-slate-900 hover:bg-slate-100 dark:text-slate-50 dark:hover:bg-slate-900 border-transparent",
-  link: "text-brand-600 underline-offset-4 hover:underline dark:text-brand-400 border-transparent"
+  link: "text-blue-600 underline-offset-4 hover:underline dark:text-blue-400 border-transparent"
 } as const;
 
 const SIZE_CLASSES = {
@@ -45,7 +45,7 @@ export default function UIButton({
       disabled={disabled}
       className={[
         "inline-flex items-center justify-center gap-2 rounded-lg border font-medium shadow-sm transition",
-        "focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-950",
+        "focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-slate-950",
         "disabled:cursor-not-allowed disabled:opacity-60",
         variantClass,
         sizeClass,

package/src/templates/config/routes.tsx.template

@@ -0,0 +1,33 @@
+import type { RouteObject } from 'react-router';
+import AppLayout from './appLayout';
+import Home from './features/object-search/__examples__/pages/Home';
+import AccountSearch from './features/object-search/__examples__/pages/AccountSearch';
+import AccountObjectDetailPage from './features/object-search/__examples__/pages/AccountObjectDetailPage';
+import NotFound from './pages/NotFound';
+
+export const routes: RouteObject[] = [
+  {
+    path: "/",
+    element: <AppLayout />,
+    children: [
+      {
+        index: true,
+        element: <Home />,
+        handle: { showInNavigation: true, label: "Home" }
+      },
+      {
+        path: 'accounts',
+        element: <AccountSearch />,
+        handle: { showInNavigation: true, label: "Accounts" }
+      },
+      {
+        path: 'accounts/:recordId',
+        element: <AccountObjectDetailPage />
+      },
+      {
+        path: '*',
+        element: <NotFound />
+      }
+    ]
+  }
+];

package/src/templates/pages/BlankDashboard.tsx.template

@@ -1,4 +1,3 @@
-import * as React from "react";
 import { RocketLaunchIcon } from "@heroicons/react/24/outline";
 import { EmptyState } from "@/components/library";