npm - rothzerg-ui - Versions diffs - 0.1.0 - Mend

rothzerg-ui 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1593) hide show

package/rothzerg.config.example.js ADDED Viewed

@@ -0,0 +1,161 @@
+/**
+ * Rothzerg UI Configuration Example
+ *
+ * Copy this file to your project root as:
+ *   rothzerg.config.js   (JavaScript)
+ *   rothzerg.config.ts   (TypeScript — recommended)
+ *
+ * Then pass it to RothzergProvider:
+ *
+ *   import config from './rothzerg.config';
+ *   <RothzergProvider config={config}>...</RothzergProvider>
+ *
+ * Use defineConfig() for TypeScript intellisense:
+ *   import { defineConfig } from 'rothzerg-ui';
+ *   export default defineConfig({ ... });
+ */
+/** @type {import('rothzerg-ui').RothzergConfig} */
+export default {
+  /**
+   * Theme tokens
+   * All values become CSS custom properties on :root (--rz-color-primary, etc.)
+   */
+  theme: {
+    /**
+     * Light mode colors
+     * Every key maps to a --rz-color-{key} CSS custom property
+     */
+    colors: {
+      // Brand
+      primary: '#6366f1',               // --rz-color-primary
+      primaryForeground: '#ffffff',     // --rz-color-primary-foreground
+      // Neutrals
+      secondary: '#f1f5f9',
+      secondaryForeground: '#0f172a',
+      muted: '#f8fafc',
+      mutedForeground: '#64748b',
+      accent: '#f1f5f9',
+      accentForeground: '#0f172a',
+      // Feedback
+      destructive: '#ef4444',
+      destructiveForeground: '#ffffff',
+      success: '#22c55e',
+      successForeground: '#f0fdf4',
+      warning: '#f59e0b',
+      warningForeground: '#fffbeb',
+      info: '#3b82f6',
+      infoForeground: '#eff6ff',
+      // Surface
+      background: '#ffffff',
+      foreground: '#0f172a',
+      card: '#ffffff',
+      cardForeground: '#0f172a',
+      popover: '#ffffff',
+      popoverForeground: '#0f172a',
+      // Borders & inputs
+      border: '#e2e8f0',
+      input: '#e2e8f0',
+      ring: '#6366f1',                  // Focus ring color
+    },
+    /**
+     * Dark mode color overrides
+     * Only specify tokens that differ in dark mode
+     */
+    darkColors: {
+      primary: '#818cf8',
+      primaryForeground: '#ffffff',
+      secondary: '#1e293b',
+      secondaryForeground: '#f8fafc',
+      muted: '#1e293b',
+      mutedForeground: '#94a3b8',
+      accent: '#1e293b',
+      accentForeground: '#f8fafc',
+      background: '#0f172a',
+      foreground: '#f8fafc',
+      card: '#1e293b',
+      cardForeground: '#f8fafc',
+      popover: '#1e293b',
+      popoverForeground: '#f8fafc',
+      border: '#334155',
+      input: '#334155',
+      ring: '#818cf8',
+    },
+    /**
+     * Border radius scale
+     * Maps to --rz-radius-{key}
+     */
+    borderRadius: {
+      none: '0',
+      xs: '0.125rem',
+      sm: '0.25rem',
+      md: '0.5rem',     // Used by most components by default
+      lg: '0.75rem',
+      xl: '1rem',
+      '2xl': '1.5rem',
+      full: '9999px',
+    },
+    /**
+     * Font families
+     * Maps to --rz-font-{key}
+     */
+    fonts: {
+      sans: "'Inter', system-ui, -apple-system, sans-serif",
+      mono: "'JetBrains Mono', 'Fira Code', monospace",
+    },
+    /**
+     * Animation settings
+     */
+    animation: {
+      duration: '150ms',           // Fast transitions (buttons, hover)
+      durationSlow: '300ms',       // Slow transitions (drawers, dialogs)
+      easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
+      easingBounce: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
+    },
+    /**
+     * Box shadows
+     * Maps to --rz-shadow-{key}
+     */
+    shadows: {
+      sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+      md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+      lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+      xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
+    },
+  },
+  /**
+   * Dark mode strategy
+   * - 'class': Toggle dark mode by adding/removing 'dark' class on <html>
+   *            document.documentElement.classList.toggle('dark')
+   * - 'media': Automatically follow OS dark mode preference
+   * - false:   Disable dark mode entirely
+   */
+  darkMode: 'class',
+  /**
+   * Per-component default prop values
+   * Override the built-in defaults for your design needs
+   */
+  components: {
+    button: {
+      defaultVariant: 'default',  // Which variant to use when none is specified
+      defaultSize: 'md',
+    },
+    badge: {
+      defaultVariant: 'secondary',
+    },
+    input: {
+      defaultVariant: 'default',
+    },
+  },
+};