@poodle-kit/ui 0.1.0 → 0.3.0

package/dist/theme/index.d.ts

@@ -0,0 +1,287 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type Theme = 'light' | 'dark' | 'system' | string;
+type ColorValue = string | {
+    DEFAULT: string;
+    foreground: string;
+};
+interface ThemeColors {
+    background?: ColorValue;
+    foreground?: ColorValue;
+    muted?: ColorValue;
+    accent?: ColorValue;
+    card?: ColorValue;
+    popover?: ColorValue;
+    primary?: ColorValue;
+    secondary?: ColorValue;
+    info?: ColorValue;
+    danger?: ColorValue;
+    warning?: ColorValue;
+    success?: ColorValue;
+    destructive?: ColorValue;
+    border?: ColorValue;
+    input?: ColorValue;
+    ring?: ColorValue;
+    [key: string]: ColorValue | undefined;
+}
+interface ThemeConfig {
+    colors: ThemeColors;
+    spacing?: Record<string, string>;
+    radius?: Record<string, string>;
+    fontSize?: Record<string, string | [string, {
+        lineHeight: string;
+        letterSpacing?: string;
+    }]>;
+    fontFamily?: Record<string, string[]>;
+    fontWeight?: Record<string, string>;
+    shadows?: Record<string, string>;
+    zIndex?: Record<string, string>;
+    animation?: {
+        duration?: Record<string, string>;
+        ease?: Record<string, string>;
+    };
+    [key: string]: unknown;
+}
+interface CustomThemeDefinition {
+    dark?: boolean;
+    cssVars?: Record<string, string>;
+}
+interface ThemeProviderProps {
+    children: React.ReactNode;
+    defaultTheme?: Theme;
+    storageKey?: string;
+    /** Custom theme configuration for light mode */
+    config?: ThemeConfig;
+    /** Custom theme configuration for dark mode */
+    darkConfig?: ThemeConfig;
+    /** Legacy: Custom theme definitions (deprecated, use config instead) */
+    customThemes?: Record<string, CustomThemeDefinition>;
+    enableColorSchemeSync?: boolean;
+}
+interface ThemeProviderState {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+}
+declare function defineTheme<T extends ThemeConfig>(config: T): T;
+
+declare function ThemeProvider({ children, defaultTheme, storageKey, config, darkConfig, customThemes, enableColorSchemeSync, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+
+declare function useTheme(): ThemeProviderState;
+
+/**
+ * Convert ThemeConfig to CSS variables object
+ */
+declare function themeToCssVars(theme: ThemeConfig): Record<string, string>;
+/**
+ * Apply CSS variables to an element
+ */
+declare function applyCssVars(element: HTMLElement, cssVars: Record<string, string>): void;
+/**
+ * Remove CSS variables from an element
+ */
+declare function removeCssVars(element: HTMLElement, keys: string[]): void;
+/**
+ * Format CSS variables object to CSS string
+ * Useful for build-time CSS generation
+ *
+ * @example
+ * ```ts
+ * const cssVars = themeToCssVars(myTheme);
+ * const cssString = formatCssVars(cssVars);
+ * console.log(cssString);
+ * // Output:
+ * //   --color-primary: oklch(0.5 0.2 250);
+ * //   --color-primary-foreground: oklch(1 0 0);
+ * ```
+ */
+declare function formatCssVars(cssVars: Record<string, string>): string;
+/**
+ * Generate CSS variables string from theme config
+ * Combines themeToCssVars + formatCssVars for convenience
+ *
+ * @example
+ * ```ts
+ * import { defineTheme, generateThemeCss } from '@poodle-kit/ui/theme';
+ *
+ * const myTheme = defineTheme({ colors: { ... } });
+ * const cssString = generateThemeCss(myTheme);
+ * console.log(cssString);
+ * // Output:
+ * //   --color-primary: oklch(0.5 0.2 250);
+ * //   --color-primary-foreground: oklch(1 0 0);
+ * ```
+ */
+declare function generateThemeCss(theme: ThemeConfig): string;
+
+/**
+ * Default Theme Tokens
+ *
+ * This is a reference implementation showing how to define themes.
+ * Copy this pattern to your project and customize the values.
+ *
+ * @example
+ * ```tsx
+ * // your-app/src/theme/my-theme.ts
+ * import { defineTheme } from '@poodle-kit/ui/theme';
+ *
+ * export const myLightTheme = defineTheme({
+ *   colors: {
+ *     primary: { DEFAULT: 'oklch(0.5 0.2 250)', foreground: 'oklch(1 0 0)' },
+ *     // ... your custom colors
+ *   },
+ *   radius: { md: '0.5rem' },
+ * });
+ *
+ * export const myDarkTheme = defineTheme({
+ *   colors: {
+ *     primary: { DEFAULT: 'oklch(0.7 0.2 250)', foreground: 'oklch(0.09 0 0)' },
+ *     // ... your custom colors
+ *   },
+ *   radius: { md: '0.5rem' },
+ * });
+ * ```
+ *
+ * Then use in your app:
+ * ```tsx
+ * import { ThemeProvider } from '@poodle-kit/ui';
+ * import { myLightTheme, myDarkTheme } from './theme/my-theme';
+ *
+ * <ThemeProvider config={myLightTheme} darkConfig={myDarkTheme}>
+ *   <App />
+ * </ThemeProvider>
+ * ```
+ */
+/**
+ * Default Light Theme
+ * Clean neutral design with semantic color tokens
+ */
+declare const defaultLightTheme: {
+    colors: {
+        background: {
+            DEFAULT: string;
+            foreground: string;
+        };
+        muted: {
+            DEFAULT: string;
+            foreground: string;
+        };
+        accent: {
+            DEFAULT: string;
+            foreground: string;
+        };
+        card: {
+            DEFAULT: string;
+            foreground: string;
+        };
+        popover: {
+            DEFAULT: string;
+            foreground: string;
+        };
+        primary: {
+            DEFAULT: string;
+            foreground: string;
+        };
+        secondary: {
+            DEFAULT: string;
+            foreground: string;
+        };
+        info: {
+            DEFAULT: string;
+            foreground: string;
+        };
+        danger: {
+            DEFAULT: string;
+            foreground: string;
+        };
+        warning: {
+            DEFAULT: string;
+            foreground: string;
+        };
+        success: {
+            DEFAULT: string;
+            foreground: string;
+        };
+        border: string;
+        input: string;
+        ring: string;
+    };
+    radius: {
+        none: string;
+        sm: string;
+        base: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        full: string;
+    };
+};
+/**
+ * Default Dark Theme
+ * Clean neutral design with semantic color tokens
+ */
+declare const defaultDarkTheme: {
+    colors: {
+        background: {
+            DEFAULT: string;
+            foreground: string;
+        };
+        muted: {
+            DEFAULT: string;
+            foreground: string;
+        };
+        accent: {
+            DEFAULT: string;
+            foreground: string;
+        };
+        card: {
+            DEFAULT: string;
+            foreground: string;
+        };
+        popover: {
+            DEFAULT: string;
+            foreground: string;
+        };
+        primary: {
+            DEFAULT: string;
+            foreground: string;
+        };
+        secondary: {
+            DEFAULT: string;
+            foreground: string;
+        };
+        info: {
+            DEFAULT: string;
+            foreground: string;
+        };
+        danger: {
+            DEFAULT: string;
+            foreground: string;
+        };
+        warning: {
+            DEFAULT: string;
+            foreground: string;
+        };
+        success: {
+            DEFAULT: string;
+            foreground: string;
+        };
+        border: string;
+        input: string;
+        ring: string;
+    };
+    radius: {
+        none: string;
+        sm: string;
+        base: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        full: string;
+    };
+};
+
+export { type CustomThemeDefinition, type Theme, type ThemeColors, type ThemeConfig, ThemeProvider, type ThemeProviderProps, type ThemeProviderState, applyCssVars, defaultDarkTheme, defaultLightTheme, defineTheme, formatCssVars, generateThemeCss, removeCssVars, themeToCssVars, useTheme };

package/dist/theme/index.js

@@ -0,0 +1,386 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/theme/index.ts
+var theme_exports = {};
+__export(theme_exports, {
+  ThemeProvider: () => ThemeProvider,
+  applyCssVars: () => applyCssVars,
+  defaultDarkTheme: () => defaultDarkTheme,
+  defaultLightTheme: () => defaultLightTheme,
+  defineTheme: () => defineTheme,
+  formatCssVars: () => formatCssVars,
+  generateThemeCss: () => generateThemeCss,
+  removeCssVars: () => removeCssVars,
+  themeToCssVars: () => themeToCssVars,
+  useTheme: () => useTheme
+});
+module.exports = __toCommonJS(theme_exports);
+
+// src/theme/provider.tsx
+var import_react = require("react");
+
+// src/theme/theme-to-css-vars.ts
+function themeToCssVars(theme) {
+  const cssVars = {};
+  if (theme.colors) {
+    Object.entries(theme.colors).forEach(([key, value]) => {
+      if (typeof value === "string") {
+        cssVars[`--color-${key}`] = value;
+      } else if (typeof value === "object" && value !== null) {
+        if ("DEFAULT" in value) {
+          cssVars[`--color-${key}`] = value.DEFAULT;
+        }
+        if ("foreground" in value) {
+          cssVars[`--color-${key}-foreground`] = value.foreground;
+        }
+      }
+    });
+  }
+  if (theme.radius) {
+    Object.entries(theme.radius).forEach(([key, value]) => {
+      cssVars[`--radius-${key}`] = value;
+    });
+  }
+  if (theme.fontSize) {
+    Object.entries(theme.fontSize).forEach(([key, value]) => {
+      if (Array.isArray(value)) {
+        const [size, config] = value;
+        cssVars[`--text-${key}`] = size;
+        if (config.lineHeight) {
+          cssVars[`--leading-${key}`] = config.lineHeight;
+        }
+      } else {
+        cssVars[`--text-${key}`] = value;
+      }
+    });
+  }
+  if (theme.fontFamily) {
+    Object.entries(theme.fontFamily).forEach(([key, value]) => {
+      cssVars[`--font-${key}`] = value.join(", ");
+    });
+  }
+  if (theme.fontWeight) {
+    Object.entries(theme.fontWeight).forEach(([key, value]) => {
+      cssVars[`--font-weight-${key}`] = value;
+    });
+  }
+  if (theme.shadows) {
+    Object.entries(theme.shadows).forEach(([key, value]) => {
+      cssVars[`--shadow-${key}`] = value;
+    });
+  }
+  if (theme.zIndex) {
+    Object.entries(theme.zIndex).forEach(([key, value]) => {
+      cssVars[`--z-${key}`] = value.toString();
+    });
+  }
+  if (theme.animation) {
+    if (theme.animation.duration) {
+      Object.entries(theme.animation.duration).forEach(
+        ([key, value]) => {
+          cssVars[`--duration-${key}`] = value;
+        }
+      );
+    }
+    if (theme.animation.ease) {
+      Object.entries(theme.animation.ease).forEach(([key, value]) => {
+        cssVars[`--ease-${key}`] = value;
+      });
+    }
+  }
+  if (theme.spacing) {
+    Object.entries(theme.spacing).forEach(([key, value]) => {
+      cssVars[`--spacing-${key}`] = value;
+    });
+  }
+  return cssVars;
+}
+function applyCssVars(element, cssVars) {
+  Object.entries(cssVars).forEach(([key, value]) => {
+    element.style.setProperty(key, value);
+  });
+}
+function removeCssVars(element, keys) {
+  keys.forEach((key) => {
+    element.style.removeProperty(key);
+  });
+}
+function formatCssVars(cssVars) {
+  return Object.entries(cssVars).map(([key, value]) => `  ${key}: ${value};`).join("\n");
+}
+function generateThemeCss(theme) {
+  const cssVars = themeToCssVars(theme);
+  return formatCssVars(cssVars);
+}
+
+// src/theme/provider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var ThemeContext = (0, import_react.createContext)(void 0);
+function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = "poodle-ui-theme",
+  config,
+  darkConfig,
+  customThemes = {},
+  enableColorSchemeSync = true
+}) {
+  const [theme, setTheme] = (0, import_react.useState)(() => {
+    if (typeof window === "undefined") {
+      return defaultTheme;
+    }
+    try {
+      return localStorage.getItem(storageKey) || defaultTheme;
+    } catch {
+      return defaultTheme;
+    }
+  });
+  const lightCssVars = (0, import_react.useMemo)(
+    () => config ? themeToCssVars(config) : null,
+    [config]
+  );
+  const darkCssVars = (0, import_react.useMemo)(
+    () => darkConfig ? themeToCssVars(darkConfig) : null,
+    [darkConfig]
+  );
+  (0, import_react.useEffect)(() => {
+    var _a, _b;
+    const root = window.document.documentElement;
+    root.classList.remove(
+      "light",
+      "dark",
+      ...Object.keys(customThemes)
+    );
+    let actualTheme;
+    if (theme === "system") {
+      actualTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    } else {
+      actualTheme = theme;
+    }
+    root.classList.add(actualTheme);
+    if (enableColorSchemeSync) {
+      const isDark = actualTheme === "dark" || ((_a = customThemes[actualTheme]) == null ? void 0 : _a.dark);
+      root.style.colorScheme = isDark ? "dark" : "light";
+    }
+    if (actualTheme === "light" && lightCssVars) {
+      applyCssVars(root, lightCssVars);
+    } else if (actualTheme === "dark" && darkCssVars) {
+      applyCssVars(root, darkCssVars);
+    } else if ((_b = customThemes[actualTheme]) == null ? void 0 : _b.cssVars) {
+      Object.entries(customThemes[actualTheme].cssVars).forEach(
+        ([key, value2]) => {
+          root.style.setProperty(key, value2);
+        }
+      );
+    }
+  }, [
+    theme,
+    lightCssVars,
+    darkCssVars,
+    customThemes,
+    enableColorSchemeSync
+  ]);
+  (0, import_react.useEffect)(() => {
+    if (theme !== "system") return;
+    const mediaQuery = window.matchMedia(
+      "(prefers-color-scheme: dark)"
+    );
+    const handler = () => {
+      setTheme("system");
+    };
+    mediaQuery.addEventListener("change", handler);
+    return () => mediaQuery.removeEventListener("change", handler);
+  }, [theme]);
+  const handleSetTheme = (newTheme) => {
+    try {
+      localStorage.setItem(storageKey, newTheme);
+    } catch {
+    }
+    setTheme(newTheme);
+  };
+  const value = {
+    theme,
+    setTheme: handleSetTheme
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value, children });
+}
+
+// src/theme/use-theme.ts
+var import_react2 = require("react");
+function useTheme() {
+  const context = (0, import_react2.useContext)(ThemeContext);
+  if (context === void 0) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}
+
+// src/theme/types.ts
+function defineTheme(config) {
+  return config;
+}
+
+// src/theme/defaults/default.ts
+var defaultLightTheme = defineTheme({
+  colors: {
+    // Page & Container colors
+    background: {
+      DEFAULT: "oklch(1 0 0)",
+      foreground: "oklch(0.09 0 0)"
+    },
+    muted: {
+      DEFAULT: "oklch(0.96 0 0)",
+      foreground: "oklch(0.45 0 0)"
+    },
+    accent: {
+      DEFAULT: "oklch(0.96 0 0)",
+      foreground: "oklch(0.09 0 0)"
+    },
+    card: {
+      DEFAULT: "oklch(1 0 0)",
+      foreground: "oklch(0.09 0 0)"
+    },
+    popover: {
+      DEFAULT: "oklch(1 0 0)",
+      foreground: "oklch(0.09 0 0)"
+    },
+    // Brand & Action colors
+    primary: {
+      DEFAULT: "oklch(0.09 0 0)",
+      foreground: "oklch(0.98 0 0)"
+    },
+    secondary: {
+      DEFAULT: "oklch(0.45 0 0)",
+      foreground: "oklch(0.98 0 0)"
+    },
+    // Semantic colors
+    info: {
+      DEFAULT: "oklch(0.55 0.15 250)",
+      foreground: "oklch(0.98 0 0)"
+    },
+    danger: {
+      DEFAULT: "oklch(0.576 0.204 27.325)",
+      foreground: "oklch(0.98 0 0)"
+    },
+    warning: {
+      DEFAULT: "oklch(0.75 0.15 75)",
+      foreground: "oklch(0.09 0 0)"
+    },
+    success: {
+      DEFAULT: "oklch(0.60 0.15 145)",
+      foreground: "oklch(0.98 0 0)"
+    },
+    // Border & Input colors
+    border: "oklch(0.90 0 0)",
+    input: "oklch(0.90 0 0)",
+    ring: "oklch(0.09 0 0)"
+  },
+  radius: {
+    none: "0",
+    sm: "0.125rem",
+    base: "0.25rem",
+    md: "0.375rem",
+    lg: "0.5rem",
+    xl: "0.75rem",
+    "2xl": "1rem",
+    "3xl": "1.5rem",
+    full: "9999px"
+  }
+});
+var defaultDarkTheme = defineTheme({
+  colors: {
+    // Page & Container colors
+    background: {
+      DEFAULT: "oklch(0.09 0 0)",
+      foreground: "oklch(0.98 0 0)"
+    },
+    muted: {
+      DEFAULT: "oklch(0.17 0 0)",
+      foreground: "oklch(0.65 0 0)"
+    },
+    accent: {
+      DEFAULT: "oklch(0.17 0 0)",
+      foreground: "oklch(0.98 0 0)"
+    },
+    card: {
+      DEFAULT: "oklch(0.09 0 0)",
+      foreground: "oklch(0.98 0 0)"
+    },
+    popover: {
+      DEFAULT: "oklch(0.09 0 0)",
+      foreground: "oklch(0.98 0 0)"
+    },
+    // Brand & Action colors
+    primary: {
+      DEFAULT: "oklch(0.98 0 0)",
+      foreground: "oklch(0.09 0 0)"
+    },
+    secondary: {
+      DEFAULT: "oklch(0.65 0 0)",
+      foreground: "oklch(0.09 0 0)"
+    },
+    // Semantic colors
+    info: {
+      DEFAULT: "oklch(0.65 0.15 250)",
+      foreground: "oklch(0.09 0 0)"
+    },
+    danger: {
+      DEFAULT: "oklch(0.701 0.191 29.234)",
+      foreground: "oklch(0.09 0 0)"
+    },
+    warning: {
+      DEFAULT: "oklch(0.80 0.15 75)",
+      foreground: "oklch(0.09 0 0)"
+    },
+    success: {
+      DEFAULT: "oklch(0.70 0.15 145)",
+      foreground: "oklch(0.09 0 0)"
+    },
+    // Border & Input colors
+    border: "oklch(0.27 0 0)",
+    input: "oklch(0.27 0 0)",
+    ring: "oklch(0.98 0 0)"
+  },
+  radius: {
+    none: "0",
+    sm: "0.125rem",
+    base: "0.25rem",
+    md: "0.375rem",
+    lg: "0.5rem",
+    xl: "0.75rem",
+    "2xl": "1rem",
+    "3xl": "1.5rem",
+    full: "9999px"
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ThemeProvider,
+  applyCssVars,
+  defaultDarkTheme,
+  defaultLightTheme,
+  defineTheme,
+  formatCssVars,
+  generateThemeCss,
+  removeCssVars,
+  themeToCssVars,
+  useTheme
+});
+//# sourceMappingURL=index.js.map