@orion-studios/payload-admin-components 0.2.0-beta.0 → 0.2.0-beta.2

package/dist/index.d.mts

@@ -1,6 +1,58 @@
+import { CollectionConfig, GlobalConfig, Field } from 'payload';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
-import { CollectionConfig, GlobalConfig, Field } from 'payload';
+
+interface AdminConfig {
+    brandName: string;
+    brandPrimary?: string;
+    brandSecondary?: string;
+    logoUrl?: string;
+}
+declare function configureAdmin(config: AdminConfig): {
+    admin: {
+        components: {
+            graphics: {
+                Logo: {
+                    exportName: string;
+                    path: string;
+                };
+                Icon: {
+                    exportName: string;
+                    path: string;
+                };
+            };
+            views: {
+                dashboard: {
+                    Component: {
+                        exportName: string;
+                        path: string;
+                    };
+                };
+            };
+            providers: {
+                exportName: string;
+                path: string;
+            }[];
+            afterNavLinks: {
+                exportName: string;
+                path: string;
+            }[];
+        };
+        meta: {
+            titleSuffix: string;
+        };
+    };
+    brandName: string;
+    brandPrimary: string;
+    brandSecondary: string;
+    brandCssVars: string;
+    wrapUsers(usersCollection: CollectionConfig): CollectionConfig;
+    wrapGlobals(globals: GlobalConfig[]): GlobalConfig[];
+};
+
+declare function withTooltips(fields: Field[], customTooltips?: Record<string, string>): Field[];
+
+declare const themePreferenceField: Field;
 
 declare function Logo(): react_jsx_runtime.JSX.Element;
 
@@ -61,56 +113,6 @@ declare function WelcomeHeader({ title, description, tooltip, actions, }: {
     actions?: React.ReactNode;
 }): react_jsx_runtime.JSX.Element;
 
-interface AdminConfig {
-    brandName: string;
-    brandPrimary?: string;
-    brandSecondary?: string;
-    logoUrl?: string;
-}
-declare function configureAdmin(config: AdminConfig): {
-    admin: {
-        components: {
-            graphics: {
-                Logo: {
-                    exportName: string;
-                    path: string;
-                };
-                Icon: {
-                    exportName: string;
-                    path: string;
-                };
-            };
-            views: {
-                dashboard: {
-                    Component: {
-                        exportName: string;
-                        path: string;
-                    };
-                };
-            };
-            providers: {
-                exportName: string;
-                path: string;
-            }[];
-            afterNavLinks: {
-                exportName: string;
-                path: string;
-            }[];
-        };
-        meta: {
-            titleSuffix: string;
-        };
-    };
-    brandName: string;
-    brandPrimary: string;
-    brandSecondary: string;
-    brandCssVars: string;
-    wrapUsers(usersCollection: CollectionConfig): CollectionConfig;
-    wrapGlobals(globals: GlobalConfig[]): GlobalConfig[];
-};
-
-declare function withTooltips(fields: Field[], customTooltips?: Record<string, string>): Field[];
-
 type ThemeOption = 'light' | 'dark' | 'brand-light' | 'brand-dark';
 declare function useTheme(): {
     theme: ThemeOption;
@@ -122,6 +124,4 @@ declare function useTheme(): {
     toggleBrandMode: () => void;
 };
 
-declare const themePreferenceField: Field;
-
 export { type AdminConfig, BlockPicker, Dashboard, EmptyState, HelpTooltip, Icon, Logo, SectionTabs, StatusBadge, type ThemeOption, ThemeProvider, ThemeSwitcher, WelcomeHeader, configureAdmin, themePreferenceField, useTheme, withTooltips };

package/dist/index.d.ts

@@ -1,6 +1,58 @@
+import { CollectionConfig, GlobalConfig, Field } from 'payload';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
-import { CollectionConfig, GlobalConfig, Field } from 'payload';
+
+interface AdminConfig {
+    brandName: string;
+    brandPrimary?: string;
+    brandSecondary?: string;
+    logoUrl?: string;
+}
+declare function configureAdmin(config: AdminConfig): {
+    admin: {
+        components: {
+            graphics: {
+                Logo: {
+                    exportName: string;
+                    path: string;
+                };
+                Icon: {
+                    exportName: string;
+                    path: string;
+                };
+            };
+            views: {
+                dashboard: {
+                    Component: {
+                        exportName: string;
+                        path: string;
+                    };
+                };
+            };
+            providers: {
+                exportName: string;
+                path: string;
+            }[];
+            afterNavLinks: {
+                exportName: string;
+                path: string;
+            }[];
+        };
+        meta: {
+            titleSuffix: string;
+        };
+    };
+    brandName: string;
+    brandPrimary: string;
+    brandSecondary: string;
+    brandCssVars: string;
+    wrapUsers(usersCollection: CollectionConfig): CollectionConfig;
+    wrapGlobals(globals: GlobalConfig[]): GlobalConfig[];
+};
+
+declare function withTooltips(fields: Field[], customTooltips?: Record<string, string>): Field[];
+
+declare const themePreferenceField: Field;
 
 declare function Logo(): react_jsx_runtime.JSX.Element;
 
@@ -61,56 +113,6 @@ declare function WelcomeHeader({ title, description, tooltip, actions, }: {
     actions?: React.ReactNode;
 }): react_jsx_runtime.JSX.Element;
 
-interface AdminConfig {
-    brandName: string;
-    brandPrimary?: string;
-    brandSecondary?: string;
-    logoUrl?: string;
-}
-declare function configureAdmin(config: AdminConfig): {
-    admin: {
-        components: {
-            graphics: {
-                Logo: {
-                    exportName: string;
-                    path: string;
-                };
-                Icon: {
-                    exportName: string;
-                    path: string;
-                };
-            };
-            views: {
-                dashboard: {
-                    Component: {
-                        exportName: string;
-                        path: string;
-                    };
-                };
-            };
-            providers: {
-                exportName: string;
-                path: string;
-            }[];
-            afterNavLinks: {
-                exportName: string;
-                path: string;
-            }[];
-        };
-        meta: {
-            titleSuffix: string;
-        };
-    };
-    brandName: string;
-    brandPrimary: string;
-    brandSecondary: string;
-    brandCssVars: string;
-    wrapUsers(usersCollection: CollectionConfig): CollectionConfig;
-    wrapGlobals(globals: GlobalConfig[]): GlobalConfig[];
-};
-
-declare function withTooltips(fields: Field[], customTooltips?: Record<string, string>): Field[];
-
 type ThemeOption = 'light' | 'dark' | 'brand-light' | 'brand-dark';
 declare function useTheme(): {
     theme: ThemeOption;
@@ -122,6 +124,4 @@ declare function useTheme(): {
     toggleBrandMode: () => void;
 };
 
-declare const themePreferenceField: Field;
-
 export { type AdminConfig, BlockPicker, Dashboard, EmptyState, HelpTooltip, Icon, Logo, SectionTabs, StatusBadge, type ThemeOption, ThemeProvider, ThemeSwitcher, WelcomeHeader, configureAdmin, themePreferenceField, useTheme, withTooltips };

package/dist/index.js

@@ -38,6 +38,168 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
+// src/fields/themePreference.ts
+var themePreferenceField = {
+  name: "themePreference",
+  type: "select",
+  defaultValue: "light",
+  options: [
+    { label: "Light", value: "light" },
+    { label: "Dark", value: "dark" },
+    { label: "Brand Light", value: "brand-light" },
+    { label: "Brand Dark", value: "brand-dark" }
+  ],
+  admin: {
+    position: "sidebar",
+    condition: () => false
+    // Hidden from form — managed by ThemeSwitcher
+  }
+};
+
+// src/helpers/configureAdmin.ts
+function configureAdmin(config) {
+  const { brandName, brandPrimary, brandSecondary } = config;
+  const brandCssVars = [
+    brandPrimary ? `--brand-primary: ${brandPrimary};` : "",
+    brandSecondary ? `--brand-secondary: ${brandSecondary};` : ""
+  ].filter(Boolean).join("\n  ");
+  return {
+    admin: {
+      components: {
+        graphics: {
+          Logo: {
+            exportName: "Logo",
+            path: "@orion-studios/payload-admin-components/client"
+          },
+          Icon: {
+            exportName: "Icon",
+            path: "@orion-studios/payload-admin-components/client"
+          }
+        },
+        views: {
+          dashboard: {
+            Component: {
+              exportName: "Dashboard",
+              path: "@orion-studios/payload-admin-components/client"
+            }
+          }
+        },
+        providers: [
+          {
+            exportName: "ThemeProvider",
+            path: "@orion-studios/payload-admin-components/client"
+          }
+        ],
+        afterNavLinks: [
+          {
+            exportName: "ThemeSwitcher",
+            path: "@orion-studios/payload-admin-components/client"
+          }
+        ]
+      },
+      meta: {
+        titleSuffix: ` \u2014 ${brandName}`
+      }
+    },
+    brandName,
+    brandPrimary: brandPrimary || "#3b82f6",
+    brandSecondary: brandSecondary || "#8b5cf6",
+    brandCssVars,
+    /**
+     * Wraps the Users collection to add theme preference field.
+     */
+    wrapUsers(usersCollection) {
+      return {
+        ...usersCollection,
+        fields: [...usersCollection.fields || [], themePreferenceField]
+      };
+    },
+    /**
+     * Wraps globals with intuitive group labels.
+     * Maps common global slugs to the "Site Design" group with user-friendly labels.
+     */
+    wrapGlobals(globals) {
+      const labelMap = {
+        header: { group: "Site Design", label: "Header & Navigation" },
+        footer: { group: "Site Design", label: "Footer" },
+        "site-settings": { group: "Site Design", label: "Website Settings" }
+      };
+      return globals.map((global) => {
+        const mapping = labelMap[global.slug];
+        if (!mapping) return global;
+        return {
+          ...global,
+          admin: {
+            ...global.admin,
+            group: mapping.group
+          },
+          label: mapping.label
+        };
+      });
+    }
+  };
+}
+
+// src/helpers/withTooltips.ts
+var defaultTooltips = {
+  title: "The main title displayed on this page.",
+  slug: 'The URL-friendly name for this page (e.g., "about-us"). This appears in the web address.',
+  template: "Choose a layout template. This controls the overall structure of the page.",
+  parent: "Select a parent page to nest this page under. This affects the URL path.",
+  path: "The full URL path for this page. This is automatically generated from the slug and parent.",
+  layout: "Add and arrange content sections on your page. Each section is a building block.",
+  metaTitle: "The title shown in search engine results and browser tabs. Keep under 60 characters.",
+  metaDescription: "A brief summary shown in search results. Keep under 160 characters for best results.",
+  canonicalUrl: "The preferred URL for this page. Used to prevent duplicate content in search engines.",
+  ogImage: "The image shown when this page is shared on social media (Facebook, LinkedIn, etc.).",
+  noIndex: "When enabled, search engines will not list this page in results.",
+  noFollow: "When enabled, search engines will not follow links on this page.",
+  publishedAt: "The date and time this page was first published.",
+  alt: "Describe this image for screen readers and search engines. Be specific and concise.",
+  navItems: "The links shown in your website's navigation menu.",
+  copyright: "The copyright text displayed in your website footer.",
+  contactEmail: "The email address displayed in your footer and contact sections.",
+  contactPhone: "The phone number displayed in your footer and contact sections.",
+  siteName: "Your website's name. Appears in browser tabs and search results.",
+  tagline: "A short phrase describing your business. Used in SEO and site metadata.",
+  canonicalBaseUrl: 'The base URL of your website (e.g., "https://example.com"). Used for generating canonical URLs.'
+};
+function withTooltips(fields, customTooltips) {
+  const tooltips = { ...defaultTooltips, ...customTooltips };
+  return fields.map((field) => addTooltipToField(field, tooltips));
+}
+function addTooltipToField(field, tooltips) {
+  if ("name" in field && field.name && tooltips[field.name]) {
+    const tooltip = tooltips[field.name];
+    const admin = field.admin;
+    if (!admin?.description) {
+      return {
+        ...field,
+        admin: {
+          ...admin,
+          description: tooltip
+        }
+      };
+    }
+  }
+  if ("fields" in field && Array.isArray(field.fields)) {
+    return {
+      ...field,
+      fields: field.fields.map((f) => addTooltipToField(f, tooltips))
+    };
+  }
+  if ("tabs" in field && Array.isArray(field.tabs)) {
+    return {
+      ...field,
+      tabs: field.tabs.map((tab) => ({
+        ...tab,
+        fields: tab.fields ? tab.fields.map((f) => addTooltipToField(f, tooltips)) : tab.fields
+      }))
+    };
+  }
+  return field;
+}
+
 // src/components/Logo.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function Logo() {
@@ -1149,168 +1311,6 @@ function WelcomeHeader({
     }
   );
 }
-
-// src/fields/themePreference.ts
-var themePreferenceField = {
-  name: "themePreference",
-  type: "select",
-  defaultValue: "light",
-  options: [
-    { label: "Light", value: "light" },
-    { label: "Dark", value: "dark" },
-    { label: "Brand Light", value: "brand-light" },
-    { label: "Brand Dark", value: "brand-dark" }
-  ],
-  admin: {
-    position: "sidebar",
-    condition: () => false
-    // Hidden from form — managed by ThemeSwitcher
-  }
-};
-
-// src/helpers/configureAdmin.ts
-function configureAdmin(config) {
-  const { brandName, brandPrimary, brandSecondary } = config;
-  const brandCssVars = [
-    brandPrimary ? `--brand-primary: ${brandPrimary};` : "",
-    brandSecondary ? `--brand-secondary: ${brandSecondary};` : ""
-  ].filter(Boolean).join("\n  ");
-  return {
-    admin: {
-      components: {
-        graphics: {
-          Logo: {
-            exportName: "Logo",
-            path: "@orion-studios/payload-admin-components"
-          },
-          Icon: {
-            exportName: "Icon",
-            path: "@orion-studios/payload-admin-components"
-          }
-        },
-        views: {
-          dashboard: {
-            Component: {
-              exportName: "Dashboard",
-              path: "@orion-studios/payload-admin-components"
-            }
-          }
-        },
-        providers: [
-          {
-            exportName: "ThemeProvider",
-            path: "@orion-studios/payload-admin-components"
-          }
-        ],
-        afterNavLinks: [
-          {
-            exportName: "ThemeSwitcher",
-            path: "@orion-studios/payload-admin-components"
-          }
-        ]
-      },
-      meta: {
-        titleSuffix: ` \u2014 ${brandName}`
-      }
-    },
-    brandName,
-    brandPrimary: brandPrimary || "#3b82f6",
-    brandSecondary: brandSecondary || "#8b5cf6",
-    brandCssVars,
-    /**
-     * Wraps the Users collection to add theme preference field.
-     */
-    wrapUsers(usersCollection) {
-      return {
-        ...usersCollection,
-        fields: [...usersCollection.fields || [], themePreferenceField]
-      };
-    },
-    /**
-     * Wraps globals with intuitive group labels.
-     * Maps common global slugs to the "Site Design" group with user-friendly labels.
-     */
-    wrapGlobals(globals) {
-      const labelMap = {
-        header: { group: "Site Design", label: "Header & Navigation" },
-        footer: { group: "Site Design", label: "Footer" },
-        "site-settings": { group: "Site Design", label: "Website Settings" }
-      };
-      return globals.map((global) => {
-        const mapping = labelMap[global.slug];
-        if (!mapping) return global;
-        return {
-          ...global,
-          admin: {
-            ...global.admin,
-            group: mapping.group
-          },
-          label: mapping.label
-        };
-      });
-    }
-  };
-}
-
-// src/helpers/withTooltips.ts
-var defaultTooltips = {
-  title: "The main title displayed on this page.",
-  slug: 'The URL-friendly name for this page (e.g., "about-us"). This appears in the web address.',
-  template: "Choose a layout template. This controls the overall structure of the page.",
-  parent: "Select a parent page to nest this page under. This affects the URL path.",
-  path: "The full URL path for this page. This is automatically generated from the slug and parent.",
-  layout: "Add and arrange content sections on your page. Each section is a building block.",
-  metaTitle: "The title shown in search engine results and browser tabs. Keep under 60 characters.",
-  metaDescription: "A brief summary shown in search results. Keep under 160 characters for best results.",
-  canonicalUrl: "The preferred URL for this page. Used to prevent duplicate content in search engines.",
-  ogImage: "The image shown when this page is shared on social media (Facebook, LinkedIn, etc.).",
-  noIndex: "When enabled, search engines will not list this page in results.",
-  noFollow: "When enabled, search engines will not follow links on this page.",
-  publishedAt: "The date and time this page was first published.",
-  alt: "Describe this image for screen readers and search engines. Be specific and concise.",
-  navItems: "The links shown in your website's navigation menu.",
-  copyright: "The copyright text displayed in your website footer.",
-  contactEmail: "The email address displayed in your footer and contact sections.",
-  contactPhone: "The phone number displayed in your footer and contact sections.",
-  siteName: "Your website's name. Appears in browser tabs and search results.",
-  tagline: "A short phrase describing your business. Used in SEO and site metadata.",
-  canonicalBaseUrl: 'The base URL of your website (e.g., "https://example.com"). Used for generating canonical URLs.'
-};
-function withTooltips(fields, customTooltips) {
-  const tooltips = { ...defaultTooltips, ...customTooltips };
-  return fields.map((field) => addTooltipToField(field, tooltips));
-}
-function addTooltipToField(field, tooltips) {
-  if ("name" in field && field.name && tooltips[field.name]) {
-    const tooltip = tooltips[field.name];
-    const admin = field.admin;
-    if (!admin?.description) {
-      return {
-        ...field,
-        admin: {
-          ...admin,
-          description: tooltip
-        }
-      };
-    }
-  }
-  if ("fields" in field && Array.isArray(field.fields)) {
-    return {
-      ...field,
-      fields: field.fields.map((f) => addTooltipToField(f, tooltips))
-    };
-  }
-  if ("tabs" in field && Array.isArray(field.tabs)) {
-    return {
-      ...field,
-      tabs: field.tabs.map((tab) => ({
-        ...tab,
-        fields: tab.fields ? tab.fields.map((f) => addTooltipToField(f, tooltips)) : tab.fields
-      }))
-    };
-  }
-  return field;
-}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BlockPicker,