@pattern-stack/frontend-patterns 0.2.0-alpha.12 → 0.2.0-alpha.14

package/dist/index.js

@@ -4164,7 +4164,7 @@ const Button = React.forwardRef(
         children: [
           loading && /* @__PURE__ */ jsxRuntime.jsx(Spinner$1, { className: "w-4 h-4 mr-2" }),
           !loading && icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("inline-flex shrink-0", children && "mr-2"), children: icon }),
-          children && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(iconOnlyMobile && "hidden sm:inline"), children }),
+          children && (iconOnlyMobile ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children })),
           !loading && iconAfter && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("inline-flex shrink-0", children && "ml-2"), children: iconAfter })
         ]
       }
@@ -10693,7 +10693,7 @@ const SidebarButton = ({
     }
   );
 };
-const Sidebar = ({ className }) => {
+const Sidebar = ({ className, footer }) => {
   const { isExpanded, toggleSidebar } = useSidebar();
   const { navigation } = useNavigation();
   const location = reactRouterDom.useLocation();
@@ -10767,35 +10767,23 @@ const Sidebar = ({ className }) => {
             item.value
           );
         }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
+        footer != null && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: cn("p-4 border-t border-border", !isExpanded && "px-3"),
             "data-component-name": "SidebarFooter",
-            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: cn(
-                    "text-xs text-muted-foreground text-center",
-                    "absolute inset-0 transition-opacity duration-200 ease-out",
-                    !isExpanded ? "opacity-100" : "opacity-0"
-                  ),
-                  children: "v1.0"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: cn(
-                    "text-xs text-muted-foreground whitespace-nowrap",
-                    "transition-opacity duration-200 ease-out",
-                    isExpanded ? "opacity-100" : "opacity-0"
-                  ),
-                  children: "AloeVera v1.0"
-                }
-              )
-            ] })
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "text-xs text-muted-foreground",
+                  "transition-opacity duration-200 ease-out",
+                  isExpanded ? "opacity-100" : "opacity-70",
+                  !isExpanded && "text-center"
+                ),
+                children: footer
+              }
+            )
           }
         )
       ]
@@ -10809,9 +10797,9 @@ const AppHeader = ({
   className,
   branding,
   searchPlaceholder = "Search models, tests, jobs, and components...",
-  showSearch = true,
-  showUserMenu = true,
-  showConnectionStatus = true
+  showSearch = false,
+  showUserMenu = false,
+  showConnectionStatus = false
 }) => {
   const isTrialMode = false;
   const brandingNode = (() => {
@@ -10840,7 +10828,7 @@ const AppHeader = ({
       ),
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto max-w-7xl px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-16 items-center justify-between", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3", children: brandingNode }),
-        showSearch && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 max-w-2xl mx-8", children: /* @__PURE__ */ jsxRuntime.jsx(GlobalSearch, { className: "w-full", placeholder: searchPlaceholder }) }),
+        showSearch && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 max-w-md mx-8", children: /* @__PURE__ */ jsxRuntime.jsx(GlobalSearch, { className: "w-full", placeholder: searchPlaceholder }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-4", children: [
           showConnectionStatus && /* @__PURE__ */ jsxRuntime.jsx(ConnectionStatus, {}),
           showUserMenu && /* @__PURE__ */ jsxRuntime.jsx(UserMenu, { category: 8 })
@@ -10849,12 +10837,12 @@ const AppHeader = ({
     }
   );
 };
-const AppLayout = ({ header } = {}) => {
+const AppLayout = ({ header, sidebar } = {}) => {
   const { isExpanded } = useSidebar();
   const hideHeader = header === false;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-screen bg-background", children: [
     !hideHeader && /* @__PURE__ */ jsxRuntime.jsx(AppHeader, { ...header ?? {} }),
-    /* @__PURE__ */ jsxRuntime.jsx(Sidebar, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(Sidebar, { footer: sidebar == null ? void 0 : sidebar.footer }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "main",
       {
@@ -15663,6 +15651,7 @@ function createReactApp(config) {
     navigation,
     customProviders = [],
     header,
+    sidebar,
     persistQueryCache = false,
     queryCacheKey = "PATTERN_STACK_QUERY_CACHE"
   } = appConfig;
@@ -15758,8 +15747,10 @@ function createReactApp(config) {
         }
         return component;
       };
-      const AppContent = () => /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center min-h-screen", children: "Loading..." }), children: /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Routes, { children: /* @__PURE__ */ jsxRuntime.jsxs(reactRouterDom.Route, { path: "/", element: /* @__PURE__ */ jsxRuntime.jsx(AppLayout, { header }), children: [
-        /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { index: true, element: wrapWithProtection("/", /* @__PURE__ */ jsxRuntime.jsx(DefaultHome, {})) }),
+      const consumerHasRoot = routes.some((r) => r.path === "/");
+      const showDefaultHome = routes.length === 0;
+      const AppContent = () => /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center min-h-screen", children: "Loading..." }), children: /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Routes, { children: /* @__PURE__ */ jsxRuntime.jsxs(reactRouterDom.Route, { path: "/", element: /* @__PURE__ */ jsxRuntime.jsx(AppLayout, { header, sidebar }), children: [
+        showDefaultHome && !consumerHasRoot && /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { index: true, element: wrapWithProtection("/", /* @__PURE__ */ jsxRuntime.jsx(DefaultHome, {})) }),
         routes.map(({ path, component }, index) => /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path, element: wrapWithProtection(path, component) }, index))
       ] }) }) });
       return createProviderTree(/* @__PURE__ */ jsxRuntime.jsx(AppContent, {}));