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

package/dist/index.mjs

@@ -1,3 +1,165 @@
+// 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
 import { jsx, jsxs } from "react/jsx-runtime";
 function Logo() {
@@ -1109,168 +1271,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;
-}
 export {
   BlockPicker,
   Dashboard,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orion-studios/payload-admin-components",
-  "version": "0.2.0-beta.0",
+  "version": "0.2.0-beta.2",
   "description": "Custom admin UI components for Payload CMS",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -11,6 +11,11 @@
       "require": "./dist/index.js",
       "import": "./dist/index.mjs"
     },
+    "./client": {
+      "types": "./dist/client.d.ts",
+      "require": "./dist/client.js",
+      "import": "./dist/client.mjs"
+    },
     "./admin.css": "./src/styles/admin.css"
   },
   "files": [
@@ -18,7 +23,7 @@
     "src"
   ],
   "scripts": {
-    "build": "tsup src/index.ts --format cjs,esm --dts && node -e \"const fs=require('fs'),path=require('path');function copyDir(s,d){fs.mkdirSync(d,{recursive:true});for(const f of fs.readdirSync(s)){const sp=path.join(s,f),dp=path.join(d,f);fs.statSync(sp).isDirectory()?copyDir(sp,dp):fs.copyFileSync(sp,dp)}}copyDir('src/styles','dist/styles');fs.copyFileSync('src/styles/admin.css','dist/admin.css')\"",
+    "build": "tsup && node -e \"const fs=require('fs'),path=require('path');function copyDir(s,d){fs.mkdirSync(d,{recursive:true});for(const f of fs.readdirSync(s)){const sp=path.join(s,f),dp=path.join(d,f);fs.statSync(sp).isDirectory()?copyDir(sp,dp):fs.copyFileSync(sp,dp)}}copyDir('src/styles','dist/styles');fs.copyFileSync('src/styles/admin.css','dist/admin.css')\"",
     "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
     "typecheck": "tsc --noEmit"
   },

package/src/client.ts

@@ -0,0 +1,17 @@
+'use client'
+
+// Client-side React components
+export { Logo } from './components/Logo'
+export { Icon } from './components/Icon'
+export { Dashboard } from './components/Dashboard'
+export { ThemeSwitcher, ThemeProvider } from './components/ThemeSwitcher'
+export { HelpTooltip } from './components/HelpTooltip'
+export { StatusBadge } from './components/StatusBadge'
+export { EmptyState } from './components/EmptyState'
+export { BlockPicker } from './components/BlockPicker'
+export { SectionTabs } from './components/SectionTabs'
+export { WelcomeHeader } from './components/WelcomeHeader'
+
+// Client-side hooks
+export { useTheme } from './hooks/useTheme'
+export type { ThemeOption } from './hooks/useTheme'

package/src/helpers/configureAdmin.ts

@@ -45,31 +45,31 @@ export function configureAdmin(config: AdminConfig) {
         graphics: {
           Logo: {
             exportName: 'Logo',
-            path: '@orion-studios/payload-admin-components',
+            path: '@orion-studios/payload-admin-components/client',
           },
           Icon: {
             exportName: 'Icon',
-            path: '@orion-studios/payload-admin-components',
+            path: '@orion-studios/payload-admin-components/client',
           },
         },
         views: {
           dashboard: {
             Component: {
               exportName: 'Dashboard',
-              path: '@orion-studios/payload-admin-components',
+              path: '@orion-studios/payload-admin-components/client',
             },
           },
         },
         providers: [
           {
             exportName: 'ThemeProvider',
-            path: '@orion-studios/payload-admin-components',
+            path: '@orion-studios/payload-admin-components/client',
           },
         ],
         afterNavLinks: [
           {
             exportName: 'ThemeSwitcher',
-            path: '@orion-studios/payload-admin-components',
+            path: '@orion-studios/payload-admin-components/client',
           },
         ],
       },

package/src/index.ts

@@ -1,4 +1,11 @@
-// Components
+// Server-safe exports (used in payload.config.ts, collection configs, etc.)
+export { configureAdmin } from './helpers/configureAdmin'
+export type { AdminConfig } from './helpers/configureAdmin'
+export { withTooltips } from './helpers/withTooltips'
+export { themePreferenceField } from './fields/themePreference'
+
+// Re-export client components so they can be resolved by Payload's import map
+// These are referenced by path string in configureAdmin, not directly imported
 export { Logo } from './components/Logo'
 export { Icon } from './components/Icon'
 export { Dashboard } from './components/Dashboard'
@@ -9,19 +16,5 @@ export { EmptyState } from './components/EmptyState'
 export { BlockPicker } from './components/BlockPicker'
 export { SectionTabs } from './components/SectionTabs'
 export { WelcomeHeader } from './components/WelcomeHeader'
-
-// Helpers
-export { configureAdmin } from './helpers/configureAdmin'
-export type { AdminConfig } from './helpers/configureAdmin'
-export { withTooltips } from './helpers/withTooltips'
-
-// Hooks
 export { useTheme } from './hooks/useTheme'
 export type { ThemeOption } from './hooks/useTheme'
-
-// Fields
-export { themePreferenceField } from './fields/themePreference'
-
-// CSS styles are exported via package.json exports map
-// Import in your payload.config.ts:
-// css: require.resolve('@orion-studios/payload-admin-components/dist/admin.css')