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

package/dist/admin.css

@@ -1,8 +1,7 @@
 /**
- * Custom admin panel styles
- *
- * Override Payload's default CSS variables to match your brand
+ * Orion Studios Admin Theme System
  *
+ * Import all theme files and overrides.
  * Usage in payload.config.ts:
  * export default buildConfig({
  *   admin: {
@@ -11,64 +10,76 @@
  * })
  */
 
+/* Default brand colors (overridden by configureAdmin) */
 :root {
-  /* Brand colors - customize these */
   --brand-primary: #3b82f6;
-  --brand-primary-dark: #2563eb;
-  --brand-primary-light: #60a5fa;
-
-  /* Override Payload theme colors */
-  --theme-bg: #ffffff;
-  --theme-elevation-50: #f9fafb;
-  --theme-elevation-100: #f3f4f6;
-  --theme-elevation-150: #e5e7eb;
-  --theme-elevation-200: #d1d5db;
-  --theme-elevation-300: #9ca3af;
-  --theme-elevation-400: #6b7280;
-  --theme-elevation-500: #4b5563;
-  --theme-elevation-600: #374151;
-  --theme-elevation-700: #1f2937;
-  --theme-elevation-800: #111827;
-  --theme-elevation-900: #030712;
-
-  /* Text colors */
-  --theme-text: #111827;
-  --theme-text-muted: #6b7280;
-
-  /* Success/warning/error colors */
-  --theme-success-50: #f0fdf4;
-  --theme-success-500: #22c55e;
-  --theme-success-600: #16a34a;
-
-  --theme-warning-50: #fffbeb;
-  --theme-warning-500: #f59e0b;
-  --theme-warning-600: #d97706;
-
-  --theme-error-50: #fef2f2;
-  --theme-error-500: #ef4444;
-  --theme-error-600: #dc2626;
-
-  /* Use brand color for primary actions */
-  --theme-input-border-color: var(--brand-primary);
+  --brand-secondary: #8b5cf6;
 }
 
-/* Make buttons use brand color */
-button[type="submit"],
-.btn--style-primary {
-  background-color: var(--brand-primary) !important;
-}
+/* Theme files */
+@import './themes/light.css';
+@import './themes/dark.css';
+@import './themes/brand-light.css';
+@import './themes/brand-dark.css';
 
-button[type="submit"]:hover,
-.btn--style-primary:hover {
-  background-color: var(--brand-primary-dark) !important;
-}
-
-/* Customize the sidebar */
-.nav {
-  background-color: var(--theme-elevation-50);
-}
+/* Payload UI overrides */
+@import './overrides.css';
 
-/* Add smooth transitions */
-* {
-  transition: background-color 0.15s ease, border-color 0.15s ease;
+/* Default to light theme when no data-theme attribute is set */
+:root:not([data-theme]) {
+  --admin-bg: #ffffff;
+  --admin-surface: #f9fafb;
+  --admin-surface-elevated: #ffffff;
+  --admin-border: #e5e7eb;
+  --admin-border-subtle: #f3f4f6;
+  --admin-text: #111827;
+  --admin-text-secondary: #4b5563;
+  --admin-text-muted: #9ca3af;
+  --admin-text-inverse: #ffffff;
+  --admin-accent: #3b82f6;
+  --admin-accent-hover: #2563eb;
+  --admin-accent-subtle: #eff6ff;
+  --admin-accent-secondary: #8b5cf6;
+  --admin-accent-secondary-hover: #7c3aed;
+  --admin-accent-secondary-subtle: #f5f3ff;
+  --admin-nav-bg: #f8fafc;
+  --admin-nav-text: #374151;
+  --admin-nav-text-active: #111827;
+  --admin-nav-item-hover: #f1f5f9;
+  --admin-nav-item-active: #e0e7ff;
+  --admin-nav-group-text: #6b7280;
+  --admin-nav-border: #e2e8f0;
+  --admin-input-bg: #ffffff;
+  --admin-input-border: #d1d5db;
+  --admin-input-border-focus: var(--admin-accent);
+  --admin-input-placeholder: #9ca3af;
+  --admin-card-bg: #ffffff;
+  --admin-card-border: #e5e7eb;
+  --admin-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
+  --admin-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
+  --admin-success: #16a34a;
+  --admin-success-bg: #f0fdf4;
+  --admin-warning: #d97706;
+  --admin-warning-bg: #fffbeb;
+  --admin-error: #dc2626;
+  --admin-error-bg: #fef2f2;
+  --admin-info: #0284c7;
+  --admin-info-bg: #f0f9ff;
+  --admin-tooltip-bg: #1f2937;
+  --admin-tooltip-text: #f9fafb;
+  --admin-overlay: rgba(0, 0, 0, 0.3);
+  --admin-scrollbar-track: #f1f5f9;
+  --admin-scrollbar-thumb: #cbd5e1;
+  --admin-scrollbar-thumb-hover: #94a3b8;
+  --admin-focus-ring: 0 0 0 2px #eff6ff, 0 0 0 4px #3b82f6;
+  --admin-radius-sm: 6px;
+  --admin-radius-md: 8px;
+  --admin-radius-lg: 12px;
+  --admin-radius-xl: 16px;
+  --admin-badge-draft-bg: #fef3c7;
+  --admin-badge-draft-text: #92400e;
+  --admin-badge-published-bg: #dcfce7;
+  --admin-badge-published-text: #166534;
+  --admin-badge-changed-bg: #dbeafe;
+  --admin-badge-changed-text: #1e40af;
 }

package/dist/index.d.mts

@@ -1,4 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { CollectionConfig, GlobalConfig, Field } from 'payload';
 
 declare function Logo(): react_jsx_runtime.JSX.Element;
 
@@ -6,4 +8,120 @@ declare function Icon(): react_jsx_runtime.JSX.Element;
 
 declare function Dashboard(): react_jsx_runtime.JSX.Element;
 
-export { Dashboard, Icon, Logo };
+declare function ThemeSwitcher(): react_jsx_runtime.JSX.Element;
+declare function ThemeProvider({ children }: {
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+
+declare function HelpTooltip({ content, position, }: {
+    content: string;
+    position?: 'top' | 'right' | 'bottom' | 'left';
+}): react_jsx_runtime.JSX.Element;
+
+type BadgeStatus = 'draft' | 'published' | 'changed';
+declare function StatusBadge({ status, size, }: {
+    status: BadgeStatus;
+    size?: 'sm' | 'md';
+}): react_jsx_runtime.JSX.Element;
+
+declare function EmptyState({ icon, title, description, actionLabel, actionHref, }: {
+    icon?: ReactNode;
+    title: string;
+    description: string;
+    actionLabel?: string;
+    actionHref?: string;
+}): react_jsx_runtime.JSX.Element;
+
+interface BlockOption {
+    slug: string;
+    label: string;
+    description?: string;
+    icon?: React.ReactNode;
+    imageURL?: string;
+}
+declare function BlockPicker({ blocks, onSelect, }: {
+    blocks: BlockOption[];
+    onSelect: (slug: string) => void;
+}): react_jsx_runtime.JSX.Element;
+
+interface TabConfig {
+    label: string;
+    icon?: React.ReactNode;
+    content: React.ReactNode;
+}
+declare function SectionTabs({ tabs, defaultTab, }: {
+    tabs: TabConfig[];
+    defaultTab?: number;
+}): react_jsx_runtime.JSX.Element | null;
+
+declare function WelcomeHeader({ title, description, tooltip, actions, }: {
+    title: string;
+    description?: string;
+    tooltip?: string;
+    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;
+    setTheme: (newTheme: ThemeOption) => void;
+    isDark: boolean;
+    isBrand: boolean;
+    isLoading: boolean;
+    toggleDarkMode: () => void;
+    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,4 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { CollectionConfig, GlobalConfig, Field } from 'payload';
 
 declare function Logo(): react_jsx_runtime.JSX.Element;
 
@@ -6,4 +8,120 @@ declare function Icon(): react_jsx_runtime.JSX.Element;
 
 declare function Dashboard(): react_jsx_runtime.JSX.Element;
 
-export { Dashboard, Icon, Logo };
+declare function ThemeSwitcher(): react_jsx_runtime.JSX.Element;
+declare function ThemeProvider({ children }: {
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+
+declare function HelpTooltip({ content, position, }: {
+    content: string;
+    position?: 'top' | 'right' | 'bottom' | 'left';
+}): react_jsx_runtime.JSX.Element;
+
+type BadgeStatus = 'draft' | 'published' | 'changed';
+declare function StatusBadge({ status, size, }: {
+    status: BadgeStatus;
+    size?: 'sm' | 'md';
+}): react_jsx_runtime.JSX.Element;
+
+declare function EmptyState({ icon, title, description, actionLabel, actionHref, }: {
+    icon?: ReactNode;
+    title: string;
+    description: string;
+    actionLabel?: string;
+    actionHref?: string;
+}): react_jsx_runtime.JSX.Element;
+
+interface BlockOption {
+    slug: string;
+    label: string;
+    description?: string;
+    icon?: React.ReactNode;
+    imageURL?: string;
+}
+declare function BlockPicker({ blocks, onSelect, }: {
+    blocks: BlockOption[];
+    onSelect: (slug: string) => void;
+}): react_jsx_runtime.JSX.Element;
+
+interface TabConfig {
+    label: string;
+    icon?: React.ReactNode;
+    content: React.ReactNode;
+}
+declare function SectionTabs({ tabs, defaultTab, }: {
+    tabs: TabConfig[];
+    defaultTab?: number;
+}): react_jsx_runtime.JSX.Element | null;
+
+declare function WelcomeHeader({ title, description, tooltip, actions, }: {
+    title: string;
+    description?: string;
+    tooltip?: string;
+    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;
+    setTheme: (newTheme: ThemeOption) => void;
+    isDark: boolean;
+    isBrand: boolean;
+    isLoading: boolean;
+    toggleDarkMode: () => void;
+    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 };