@poodle-kit/ui 0.1.0 → 0.3.0

package/dist/theme/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/theme/index.ts","../../src/theme/provider.tsx","../../src/theme/theme-to-css-vars.ts","../../src/theme/use-theme.ts","../../src/theme/types.ts","../../src/theme/defaults/default.ts"],"sourcesContent":["export { ThemeProvider } from './provider';\r\nexport { useTheme } from './use-theme';\r\nexport type {\r\n  Theme,\r\n  ThemeColors,\r\n  ThemeConfig,\r\n  ThemeProviderProps,\r\n  ThemeProviderState,\r\n  CustomThemeDefinition,\r\n} from './types';\r\nexport { defineTheme } from './types';\r\nexport {\r\n  themeToCssVars,\r\n  applyCssVars,\r\n  removeCssVars,\r\n  formatCssVars,\r\n  generateThemeCss,\r\n} from './theme-to-css-vars';\r\nexport {\r\n  defaultLightTheme,\r\n  defaultDarkTheme,\r\n} from './defaults/default';\r\n","import React, {\r\n  createContext,\r\n  useEffect,\r\n  useState,\r\n  useMemo,\r\n} from 'react';\r\nimport type {\r\n  Theme,\r\n  ThemeProviderProps,\r\n  ThemeProviderState,\r\n} from './types';\r\nimport { themeToCssVars, applyCssVars } from './theme-to-css-vars';\r\n\r\nexport const ThemeContext = createContext<\r\n  ThemeProviderState | undefined\r\n>(undefined);\r\n\r\nexport function ThemeProvider({\r\n  children,\r\n  defaultTheme = 'system',\r\n  storageKey = 'poodle-ui-theme',\r\n  config,\r\n  darkConfig,\r\n  customThemes = {},\r\n  enableColorSchemeSync = true,\r\n}: ThemeProviderProps) {\r\n  const [theme, setTheme] = useState<Theme>(() => {\r\n    if (typeof window === 'undefined') {\r\n      return defaultTheme;\r\n    }\r\n    try {\r\n      return (\r\n        (localStorage.getItem(storageKey) as Theme) || defaultTheme\r\n      );\r\n    } catch {\r\n      return defaultTheme;\r\n    }\r\n  });\r\n\r\n  // Convert theme configs to CSS variables (memoized)\r\n  const lightCssVars = useMemo(\r\n    () => (config ? themeToCssVars(config) : null),\r\n    [config],\r\n  );\r\n\r\n  const darkCssVars = useMemo(\r\n    () => (darkConfig ? themeToCssVars(darkConfig) : null),\r\n    [darkConfig],\r\n  );\r\n\r\n  useEffect(() => {\r\n    const root = window.document.documentElement;\r\n\r\n    root.classList.remove(\r\n      'light',\r\n      'dark',\r\n      ...Object.keys(customThemes),\r\n    );\r\n\r\n    let actualTheme: string;\r\n\r\n    if (theme === 'system') {\r\n      actualTheme = window.matchMedia('(prefers-color-scheme: dark)')\r\n        .matches\r\n        ? 'dark'\r\n        : 'light';\r\n    } else {\r\n      actualTheme = theme;\r\n    }\r\n\r\n    root.classList.add(actualTheme);\r\n\r\n    if (enableColorSchemeSync) {\r\n      const isDark =\r\n        actualTheme === 'dark' || customThemes[actualTheme]?.dark;\r\n      root.style.colorScheme = isDark ? 'dark' : 'light';\r\n    }\r\n\r\n    // Apply custom theme config (priority: config > customThemes)\r\n    if (actualTheme === 'light' && lightCssVars) {\r\n      applyCssVars(root, lightCssVars);\r\n    } else if (actualTheme === 'dark' && darkCssVars) {\r\n      applyCssVars(root, darkCssVars);\r\n    } else if (customThemes[actualTheme]?.cssVars) {\r\n      // Legacy support for customThemes\r\n      Object.entries(customThemes[actualTheme].cssVars!).forEach(\r\n        ([key, value]) => {\r\n          root.style.setProperty(key, value);\r\n        },\r\n      );\r\n    }\r\n  }, [\r\n    theme,\r\n    lightCssVars,\r\n    darkCssVars,\r\n    customThemes,\r\n    enableColorSchemeSync,\r\n  ]);\r\n\r\n  useEffect(() => {\r\n    if (theme !== 'system') return;\r\n\r\n    const mediaQuery = window.matchMedia(\r\n      '(prefers-color-scheme: dark)',\r\n    );\r\n    const handler = () => {\r\n      setTheme('system');\r\n    };\r\n\r\n    mediaQuery.addEventListener('change', handler);\r\n    return () => mediaQuery.removeEventListener('change', handler);\r\n  }, [theme]);\r\n\r\n  const handleSetTheme = (newTheme: Theme) => {\r\n    try {\r\n      localStorage.setItem(storageKey, newTheme);\r\n    } catch {\r\n      // localStorage not available\r\n    }\r\n    setTheme(newTheme);\r\n  };\r\n\r\n  const value: ThemeProviderState = {\r\n    theme,\r\n    setTheme: handleSetTheme,\r\n  };\r\n\r\n  return (\r\n    <ThemeContext.Provider value={value}>\r\n      {children}\r\n    </ThemeContext.Provider>\r\n  );\r\n}\r\n","import type { ThemeConfig } from './types';\r\n\r\n/**\r\n * Convert ThemeConfig to CSS variables object\r\n */\r\nexport function themeToCssVars(\r\n  theme: ThemeConfig,\r\n): Record<string, string> {\r\n  const cssVars: Record<string, string> = {};\r\n\r\n  // Colors\r\n  if (theme.colors) {\r\n    Object.entries(theme.colors).forEach(([key, value]) => {\r\n      if (typeof value === 'string') {\r\n        cssVars[`--color-${key}`] = value;\r\n      } else if (typeof value === 'object' && value !== null) {\r\n        if ('DEFAULT' in value) {\r\n          cssVars[`--color-${key}`] = value.DEFAULT;\r\n        }\r\n        if ('foreground' in value) {\r\n          cssVars[`--color-${key}-foreground`] = value.foreground;\r\n        }\r\n      }\r\n    });\r\n  }\r\n\r\n  // Radius\r\n  if (theme.radius) {\r\n    Object.entries(theme.radius).forEach(([key, value]) => {\r\n      cssVars[`--radius-${key}`] = value;\r\n    });\r\n  }\r\n\r\n  // Font sizes\r\n  if (theme.fontSize) {\r\n    Object.entries(theme.fontSize).forEach(([key, value]) => {\r\n      if (Array.isArray(value)) {\r\n        const [size, config] = value;\r\n        cssVars[`--text-${key}`] = size;\r\n        if (config.lineHeight) {\r\n          cssVars[`--leading-${key}`] = config.lineHeight;\r\n        }\r\n      } else {\r\n        cssVars[`--text-${key}`] = value;\r\n      }\r\n    });\r\n  }\r\n\r\n  // Font families\r\n  if (theme.fontFamily) {\r\n    Object.entries(theme.fontFamily).forEach(([key, value]) => {\r\n      cssVars[`--font-${key}`] = value.join(', ');\r\n    });\r\n  }\r\n\r\n  // Font weights\r\n  if (theme.fontWeight) {\r\n    Object.entries(theme.fontWeight).forEach(([key, value]) => {\r\n      cssVars[`--font-weight-${key}`] = value;\r\n    });\r\n  }\r\n\r\n  // Shadows\r\n  if (theme.shadows) {\r\n    Object.entries(theme.shadows).forEach(([key, value]) => {\r\n      cssVars[`--shadow-${key}`] = value;\r\n    });\r\n  }\r\n\r\n  // Z-index\r\n  if (theme.zIndex) {\r\n    Object.entries(theme.zIndex).forEach(([key, value]) => {\r\n      cssVars[`--z-${key}`] = value.toString();\r\n    });\r\n  }\r\n\r\n  // Animation\r\n  if (theme.animation) {\r\n    if (theme.animation.duration) {\r\n      Object.entries(theme.animation.duration).forEach(\r\n        ([key, value]) => {\r\n          cssVars[`--duration-${key}`] = value;\r\n        },\r\n      );\r\n    }\r\n    if (theme.animation.ease) {\r\n      Object.entries(theme.animation.ease).forEach(([key, value]) => {\r\n        cssVars[`--ease-${key}`] = value;\r\n      });\r\n    }\r\n  }\r\n\r\n  // Spacing (Tailwind v4 compatible)\r\n  if (theme.spacing) {\r\n    Object.entries(theme.spacing).forEach(([key, value]) => {\r\n      cssVars[`--spacing-${key}`] = value;\r\n    });\r\n  }\r\n\r\n  return cssVars;\r\n}\r\n\r\n/**\r\n * Apply CSS variables to an element\r\n */\r\nexport function applyCssVars(\r\n  element: HTMLElement,\r\n  cssVars: Record<string, string>,\r\n): void {\r\n  Object.entries(cssVars).forEach(([key, value]) => {\r\n    element.style.setProperty(key, value);\r\n  });\r\n}\r\n\r\n/**\r\n * Remove CSS variables from an element\r\n */\r\nexport function removeCssVars(\r\n  element: HTMLElement,\r\n  keys: string[],\r\n): void {\r\n  keys.forEach((key) => {\r\n    element.style.removeProperty(key);\r\n  });\r\n}\r\n\r\n/**\r\n * Format CSS variables object to CSS string\r\n * Useful for build-time CSS generation\r\n *\r\n * @example\r\n * ```ts\r\n * const cssVars = themeToCssVars(myTheme);\r\n * const cssString = formatCssVars(cssVars);\r\n * console.log(cssString);\r\n * // Output:\r\n * //   --color-primary: oklch(0.5 0.2 250);\r\n * //   --color-primary-foreground: oklch(1 0 0);\r\n * ```\r\n */\r\nexport function formatCssVars(\r\n  cssVars: Record<string, string>,\r\n): string {\r\n  return Object.entries(cssVars)\r\n    .map(([key, value]) => `  ${key}: ${value};`)\r\n    .join('\\n');\r\n}\r\n\r\n/**\r\n * Generate CSS variables string from theme config\r\n * Combines themeToCssVars + formatCssVars for convenience\r\n *\r\n * @example\r\n * ```ts\r\n * import { defineTheme, generateThemeCss } from '@poodle-kit/ui/theme';\r\n *\r\n * const myTheme = defineTheme({ colors: { ... } });\r\n * const cssString = generateThemeCss(myTheme);\r\n * console.log(cssString);\r\n * // Output:\r\n * //   --color-primary: oklch(0.5 0.2 250);\r\n * //   --color-primary-foreground: oklch(1 0 0);\r\n * ```\r\n */\r\nexport function generateThemeCss(theme: ThemeConfig): string {\r\n  const cssVars = themeToCssVars(theme);\r\n  return formatCssVars(cssVars);\r\n}\r\n","import { useContext } from 'react';\r\nimport { ThemeContext } from './provider';\r\nimport type { ThemeProviderState } from './types';\r\n\r\nexport function useTheme(): ThemeProviderState {\r\n  const context = useContext(ThemeContext);\r\n\r\n  if (context === undefined) {\r\n    throw new Error('useTheme must be used within a ThemeProvider');\r\n  }\r\n\r\n  return context;\r\n}\r\n","export type Theme = 'light' | 'dark' | 'system' | string;\r\n\r\nexport type ColorValue =\r\n  | string\r\n  | {\r\n      DEFAULT: string;\r\n      foreground: string;\r\n    };\r\n\r\nexport interface ThemeColors {\r\n  // Page & Container colors\r\n  background?: ColorValue;\r\n  foreground?: ColorValue;\r\n  muted?: ColorValue;\r\n  accent?: ColorValue;\r\n  card?: ColorValue;\r\n  popover?: ColorValue;\r\n\r\n  // Brand & Action colors\r\n  primary?: ColorValue;\r\n  secondary?: ColorValue;\r\n\r\n  // Semantic colors\r\n  info?: ColorValue;\r\n  danger?: ColorValue;\r\n  warning?: ColorValue;\r\n  success?: ColorValue;\r\n  destructive?: ColorValue;\r\n\r\n  // Border & Input colors\r\n  border?: ColorValue;\r\n  input?: ColorValue;\r\n  ring?: ColorValue;\r\n\r\n  // Custom colors\r\n  [key: string]: ColorValue | undefined;\r\n}\r\n\r\nexport interface ThemeConfig {\r\n  colors: ThemeColors;\r\n  spacing?: Record<string, string>;\r\n  radius?: Record<string, string>;\r\n  fontSize?: Record<\r\n    string,\r\n    string | [string, { lineHeight: string; letterSpacing?: string }]\r\n  >;\r\n  fontFamily?: Record<string, string[]>;\r\n  fontWeight?: Record<string, string>;\r\n  shadows?: Record<string, string>;\r\n  zIndex?: Record<string, string>;\r\n  animation?: {\r\n    duration?: Record<string, string>;\r\n    ease?: Record<string, string>;\r\n  };\r\n  [key: string]: unknown;\r\n}\r\n\r\nexport interface CustomThemeDefinition {\r\n  dark?: boolean;\r\n  cssVars?: Record<string, string>;\r\n}\r\n\r\nexport interface ThemeProviderProps {\r\n  children: React.ReactNode;\r\n  defaultTheme?: Theme;\r\n  storageKey?: string;\r\n  /** Custom theme configuration for light mode */\r\n  config?: ThemeConfig;\r\n  /** Custom theme configuration for dark mode */\r\n  darkConfig?: ThemeConfig;\r\n  /** Legacy: Custom theme definitions (deprecated, use config instead) */\r\n  customThemes?: Record<string, CustomThemeDefinition>;\r\n  enableColorSchemeSync?: boolean;\r\n}\r\n\r\nexport interface ThemeProviderState {\r\n  theme: Theme;\r\n  setTheme: (theme: Theme) => void;\r\n}\r\n\r\nexport function defineTheme<T extends ThemeConfig>(config: T): T {\r\n  return config;\r\n}\r\n","/**\r\n * Default Theme Tokens\r\n *\r\n * This is a reference implementation showing how to define themes.\r\n * Copy this pattern to your project and customize the values.\r\n *\r\n * @example\r\n * ```tsx\r\n * // your-app/src/theme/my-theme.ts\r\n * import { defineTheme } from '@poodle-kit/ui/theme';\r\n *\r\n * export const myLightTheme = defineTheme({\r\n *   colors: {\r\n *     primary: { DEFAULT: 'oklch(0.5 0.2 250)', foreground: 'oklch(1 0 0)' },\r\n *     // ... your custom colors\r\n *   },\r\n *   radius: { md: '0.5rem' },\r\n * });\r\n *\r\n * export const myDarkTheme = defineTheme({\r\n *   colors: {\r\n *     primary: { DEFAULT: 'oklch(0.7 0.2 250)', foreground: 'oklch(0.09 0 0)' },\r\n *     // ... your custom colors\r\n *   },\r\n *   radius: { md: '0.5rem' },\r\n * });\r\n * ```\r\n *\r\n * Then use in your app:\r\n * ```tsx\r\n * import { ThemeProvider } from '@poodle-kit/ui';\r\n * import { myLightTheme, myDarkTheme } from './theme/my-theme';\r\n *\r\n * <ThemeProvider config={myLightTheme} darkConfig={myDarkTheme}>\r\n *   <App />\r\n * </ThemeProvider>\r\n * ```\r\n */\r\n\r\nimport { defineTheme } from '../types';\r\n\r\n/**\r\n * Default Light Theme\r\n * Clean neutral design with semantic color tokens\r\n */\r\nexport const defaultLightTheme = defineTheme({\r\n  colors: {\r\n    // Page & Container colors\r\n    background: {\r\n      DEFAULT: 'oklch(1 0 0)',\r\n      foreground: 'oklch(0.09 0 0)',\r\n    },\r\n\r\n    muted: {\r\n      DEFAULT: 'oklch(0.96 0 0)',\r\n      foreground: 'oklch(0.45 0 0)',\r\n    },\r\n\r\n    accent: {\r\n      DEFAULT: 'oklch(0.96 0 0)',\r\n      foreground: 'oklch(0.09 0 0)',\r\n    },\r\n\r\n    card: {\r\n      DEFAULT: 'oklch(1 0 0)',\r\n      foreground: 'oklch(0.09 0 0)',\r\n    },\r\n\r\n    popover: {\r\n      DEFAULT: 'oklch(1 0 0)',\r\n      foreground: 'oklch(0.09 0 0)',\r\n    },\r\n\r\n    // Brand & Action colors\r\n    primary: {\r\n      DEFAULT: 'oklch(0.09 0 0)',\r\n      foreground: 'oklch(0.98 0 0)',\r\n    },\r\n\r\n    secondary: {\r\n      DEFAULT: 'oklch(0.45 0 0)',\r\n      foreground: 'oklch(0.98 0 0)',\r\n    },\r\n\r\n    // Semantic colors\r\n    info: {\r\n      DEFAULT: 'oklch(0.55 0.15 250)',\r\n      foreground: 'oklch(0.98 0 0)',\r\n    },\r\n\r\n    danger: {\r\n      DEFAULT: 'oklch(0.576 0.204 27.325)',\r\n      foreground: 'oklch(0.98 0 0)',\r\n    },\r\n\r\n    warning: {\r\n      DEFAULT: 'oklch(0.75 0.15 75)',\r\n      foreground: 'oklch(0.09 0 0)',\r\n    },\r\n\r\n    success: {\r\n      DEFAULT: 'oklch(0.60 0.15 145)',\r\n      foreground: 'oklch(0.98 0 0)',\r\n    },\r\n\r\n    // Border & Input colors\r\n    border: 'oklch(0.90 0 0)',\r\n    input: 'oklch(0.90 0 0)',\r\n    ring: 'oklch(0.09 0 0)',\r\n  },\r\n\r\n  radius: {\r\n    none: '0',\r\n    sm: '0.125rem',\r\n    base: '0.25rem',\r\n    md: '0.375rem',\r\n    lg: '0.5rem',\r\n    xl: '0.75rem',\r\n    '2xl': '1rem',\r\n    '3xl': '1.5rem',\r\n    full: '9999px',\r\n  },\r\n});\r\n\r\n/**\r\n * Default Dark Theme\r\n * Clean neutral design with semantic color tokens\r\n */\r\nexport const defaultDarkTheme = defineTheme({\r\n  colors: {\r\n    // Page & Container colors\r\n    background: {\r\n      DEFAULT: 'oklch(0.09 0 0)',\r\n      foreground: 'oklch(0.98 0 0)',\r\n    },\r\n\r\n    muted: {\r\n      DEFAULT: 'oklch(0.17 0 0)',\r\n      foreground: 'oklch(0.65 0 0)',\r\n    },\r\n\r\n    accent: {\r\n      DEFAULT: 'oklch(0.17 0 0)',\r\n      foreground: 'oklch(0.98 0 0)',\r\n    },\r\n\r\n    card: {\r\n      DEFAULT: 'oklch(0.09 0 0)',\r\n      foreground: 'oklch(0.98 0 0)',\r\n    },\r\n\r\n    popover: {\r\n      DEFAULT: 'oklch(0.09 0 0)',\r\n      foreground: 'oklch(0.98 0 0)',\r\n    },\r\n\r\n    // Brand & Action colors\r\n    primary: {\r\n      DEFAULT: 'oklch(0.98 0 0)',\r\n      foreground: 'oklch(0.09 0 0)',\r\n    },\r\n\r\n    secondary: {\r\n      DEFAULT: 'oklch(0.65 0 0)',\r\n      foreground: 'oklch(0.09 0 0)',\r\n    },\r\n\r\n    // Semantic colors\r\n    info: {\r\n      DEFAULT: 'oklch(0.65 0.15 250)',\r\n      foreground: 'oklch(0.09 0 0)',\r\n    },\r\n\r\n    danger: {\r\n      DEFAULT: 'oklch(0.701 0.191 29.234)',\r\n      foreground: 'oklch(0.09 0 0)',\r\n    },\r\n\r\n    warning: {\r\n      DEFAULT: 'oklch(0.80 0.15 75)',\r\n      foreground: 'oklch(0.09 0 0)',\r\n    },\r\n\r\n    success: {\r\n      DEFAULT: 'oklch(0.70 0.15 145)',\r\n      foreground: 'oklch(0.09 0 0)',\r\n    },\r\n\r\n    // Border & Input colors\r\n    border: 'oklch(0.27 0 0)',\r\n    input: 'oklch(0.27 0 0)',\r\n    ring: 'oklch(0.98 0 0)',\r\n  },\r\n\r\n  radius: {\r\n    none: '0',\r\n    sm: '0.125rem',\r\n    base: '0.25rem',\r\n    md: '0.375rem',\r\n    lg: '0.5rem',\r\n    xl: '0.75rem',\r\n    '2xl': '1rem',\r\n    '3xl': '1.5rem',\r\n    full: '9999px',\r\n  },\r\n});\r\n"],"mappings":"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","names":["value","import_react"]}

package/dist/theme/index.mjs

@@ -0,0 +1,355 @@
+// src/theme/provider.tsx
+import {
+  createContext,
+  useEffect,
+  useState,
+  useMemo
+} from "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
+import { jsx } from "react/jsx-runtime";
+var ThemeContext = createContext(void 0);
+function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = "poodle-ui-theme",
+  config,
+  darkConfig,
+  customThemes = {},
+  enableColorSchemeSync = true
+}) {
+  const [theme, setTheme] = useState(() => {
+    if (typeof window === "undefined") {
+      return defaultTheme;
+    }
+    try {
+      return localStorage.getItem(storageKey) || defaultTheme;
+    } catch {
+      return defaultTheme;
+    }
+  });
+  const lightCssVars = useMemo(
+    () => config ? themeToCssVars(config) : null,
+    [config]
+  );
+  const darkCssVars = useMemo(
+    () => darkConfig ? themeToCssVars(darkConfig) : null,
+    [darkConfig]
+  );
+  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
+  ]);
+  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__ */ jsx(ThemeContext.Provider, { value, children });
+}
+
+// src/theme/use-theme.ts
+import { useContext } from "react";
+function useTheme() {
+  const context = 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"
+  }
+});
+export {
+  ThemeProvider,
+  applyCssVars,
+  defaultDarkTheme,
+  defaultLightTheme,
+  defineTheme,
+  formatCssVars,
+  generateThemeCss,
+  removeCssVars,
+  themeToCssVars,
+  useTheme
+};
+//# sourceMappingURL=index.mjs.map

package/dist/theme/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/theme/provider.tsx","../../src/theme/theme-to-css-vars.ts","../../src/theme/use-theme.ts","../../src/theme/types.ts","../../src/theme/defaults/default.ts"],"sourcesContent":["import React, {\r\n  createContext,\r\n  useEffect,\r\n  useState,\r\n  useMemo,\r\n} from 'react';\r\nimport type {\r\n  Theme,\r\n  ThemeProviderProps,\r\n  ThemeProviderState,\r\n} from './types';\r\nimport { themeToCssVars, applyCssVars } from './theme-to-css-vars';\r\n\r\nexport const ThemeContext = createContext<\r\n  ThemeProviderState | undefined\r\n>(undefined);\r\n\r\nexport function ThemeProvider({\r\n  children,\r\n  defaultTheme = 'system',\r\n  storageKey = 'poodle-ui-theme',\r\n  config,\r\n  darkConfig,\r\n  customThemes = {},\r\n  enableColorSchemeSync = true,\r\n}: ThemeProviderProps) {\r\n  const [theme, setTheme] = useState<Theme>(() => {\r\n    if (typeof window === 'undefined') {\r\n      return defaultTheme;\r\n    }\r\n    try {\r\n      return (\r\n        (localStorage.getItem(storageKey) as Theme) || defaultTheme\r\n      );\r\n    } catch {\r\n      return defaultTheme;\r\n    }\r\n  });\r\n\r\n  // Convert theme configs to CSS variables (memoized)\r\n  const lightCssVars = useMemo(\r\n    () => (config ? themeToCssVars(config) : null),\r\n    [config],\r\n  );\r\n\r\n  const darkCssVars = useMemo(\r\n    () => (darkConfig ? themeToCssVars(darkConfig) : null),\r\n    [darkConfig],\r\n  );\r\n\r\n  useEffect(() => {\r\n    const root = window.document.documentElement;\r\n\r\n    root.classList.remove(\r\n      'light',\r\n      'dark',\r\n      ...Object.keys(customThemes),\r\n    );\r\n\r\n    let actualTheme: string;\r\n\r\n    if (theme === 'system') {\r\n      actualTheme = window.matchMedia('(prefers-color-scheme: dark)')\r\n        .matches\r\n        ? 'dark'\r\n        : 'light';\r\n    } else {\r\n      actualTheme = theme;\r\n    }\r\n\r\n    root.classList.add(actualTheme);\r\n\r\n    if (enableColorSchemeSync) {\r\n      const isDark =\r\n        actualTheme === 'dark' || customThemes[actualTheme]?.dark;\r\n      root.style.colorScheme = isDark ? 'dark' : 'light';\r\n    }\r\n\r\n    // Apply custom theme config (priority: config > customThemes)\r\n    if (actualTheme === 'light' && lightCssVars) {\r\n      applyCssVars(root, lightCssVars);\r\n    } else if (actualTheme === 'dark' && darkCssVars) {\r\n      applyCssVars(root, darkCssVars);\r\n    } else if (customThemes[actualTheme]?.cssVars) {\r\n      // Legacy support for customThemes\r\n      Object.entries(customThemes[actualTheme].cssVars!).forEach(\r\n        ([key, value]) => {\r\n          root.style.setProperty(key, value);\r\n        },\r\n      );\r\n    }\r\n  }, [\r\n    theme,\r\n    lightCssVars,\r\n    darkCssVars,\r\n    customThemes,\r\n    enableColorSchemeSync,\r\n  ]);\r\n\r\n  useEffect(() => {\r\n    if (theme !== 'system') return;\r\n\r\n    const mediaQuery = window.matchMedia(\r\n      '(prefers-color-scheme: dark)',\r\n    );\r\n    const handler = () => {\r\n      setTheme('system');\r\n    };\r\n\r\n    mediaQuery.addEventListener('change', handler);\r\n    return () => mediaQuery.removeEventListener('change', handler);\r\n  }, [theme]);\r\n\r\n  const handleSetTheme = (newTheme: Theme) => {\r\n    try {\r\n      localStorage.setItem(storageKey, newTheme);\r\n    } catch {\r\n      // localStorage not available\r\n    }\r\n    setTheme(newTheme);\r\n  };\r\n\r\n  const value: ThemeProviderState = {\r\n    theme,\r\n    setTheme: handleSetTheme,\r\n  };\r\n\r\n  return (\r\n    <ThemeContext.Provider value={value}>\r\n      {children}\r\n    </ThemeContext.Provider>\r\n  );\r\n}\r\n","import type { ThemeConfig } from './types';\r\n\r\n/**\r\n * Convert ThemeConfig to CSS variables object\r\n */\r\nexport function themeToCssVars(\r\n  theme: ThemeConfig,\r\n): Record<string, string> {\r\n  const cssVars: Record<string, string> = {};\r\n\r\n  // Colors\r\n  if (theme.colors) {\r\n    Object.entries(theme.colors).forEach(([key, value]) => {\r\n      if (typeof value === 'string') {\r\n        cssVars[`--color-${key}`] = value;\r\n      } else if (typeof value === 'object' && value !== null) {\r\n        if ('DEFAULT' in value) {\r\n          cssVars[`--color-${key}`] = value.DEFAULT;\r\n        }\r\n        if ('foreground' in value) {\r\n          cssVars[`--color-${key}-foreground`] = value.foreground;\r\n        }\r\n      }\r\n    });\r\n  }\r\n\r\n  // Radius\r\n  if (theme.radius) {\r\n    Object.entries(theme.radius).forEach(([key, value]) => {\r\n      cssVars[`--radius-${key}`] = value;\r\n    });\r\n  }\r\n\r\n  // Font sizes\r\n  if (theme.fontSize) {\r\n    Object.entries(theme.fontSize).forEach(([key, value]) => {\r\n      if (Array.isArray(value)) {\r\n        const [size, config] = value;\r\n        cssVars[`--text-${key}`] = size;\r\n        if (config.lineHeight) {\r\n          cssVars[`--leading-${key}`] = config.lineHeight;\r\n        }\r\n      } else {\r\n        cssVars[`--text-${key}`] = value;\r\n      }\r\n    });\r\n  }\r\n\r\n  // Font families\r\n  if (theme.fontFamily) {\r\n    Object.entries(theme.fontFamily).forEach(([key, value]) => {\r\n      cssVars[`--font-${key}`] = value.join(', ');\r\n    });\r\n  }\r\n\r\n  // Font weights\r\n  if (theme.fontWeight) {\r\n    Object.entries(theme.fontWeight).forEach(([key, value]) => {\r\n      cssVars[`--font-weight-${key}`] = value;\r\n    });\r\n  }\r\n\r\n  // Shadows\r\n  if (theme.shadows) {\r\n    Object.entries(theme.shadows).forEach(([key, value]) => {\r\n      cssVars[`--shadow-${key}`] = value;\r\n    });\r\n  }\r\n\r\n  // Z-index\r\n  if (theme.zIndex) {\r\n    Object.entries(theme.zIndex).forEach(([key, value]) => {\r\n      cssVars[`--z-${key}`] = value.toString();\r\n    });\r\n  }\r\n\r\n  // Animation\r\n  if (theme.animation) {\r\n    if (theme.animation.duration) {\r\n      Object.entries(theme.animation.duration).forEach(\r\n        ([key, value]) => {\r\n          cssVars[`--duration-${key}`] = value;\r\n        },\r\n      );\r\n    }\r\n    if (theme.animation.ease) {\r\n      Object.entries(theme.animation.ease).forEach(([key, value]) => {\r\n        cssVars[`--ease-${key}`] = value;\r\n      });\r\n    }\r\n  }\r\n\r\n  // Spacing (Tailwind v4 compatible)\r\n  if (theme.spacing) {\r\n    Object.entries(theme.spacing).forEach(([key, value]) => {\r\n      cssVars[`--spacing-${key}`] = value;\r\n    });\r\n  }\r\n\r\n  return cssVars;\r\n}\r\n\r\n/**\r\n * Apply CSS variables to an element\r\n */\r\nexport function applyCssVars(\r\n  element: HTMLElement,\r\n  cssVars: Record<string, string>,\r\n): void {\r\n  Object.entries(cssVars).forEach(([key, value]) => {\r\n    element.style.setProperty(key, value);\r\n  });\r\n}\r\n\r\n/**\r\n * Remove CSS variables from an element\r\n */\r\nexport function removeCssVars(\r\n  element: HTMLElement,\r\n  keys: string[],\r\n): void {\r\n  keys.forEach((key) => {\r\n    element.style.removeProperty(key);\r\n  });\r\n}\r\n\r\n/**\r\n * Format CSS variables object to CSS string\r\n * Useful for build-time CSS generation\r\n *\r\n * @example\r\n * ```ts\r\n * const cssVars = themeToCssVars(myTheme);\r\n * const cssString = formatCssVars(cssVars);\r\n * console.log(cssString);\r\n * // Output:\r\n * //   --color-primary: oklch(0.5 0.2 250);\r\n * //   --color-primary-foreground: oklch(1 0 0);\r\n * ```\r\n */\r\nexport function formatCssVars(\r\n  cssVars: Record<string, string>,\r\n): string {\r\n  return Object.entries(cssVars)\r\n    .map(([key, value]) => `  ${key}: ${value};`)\r\n    .join('\\n');\r\n}\r\n\r\n/**\r\n * Generate CSS variables string from theme config\r\n * Combines themeToCssVars + formatCssVars for convenience\r\n *\r\n * @example\r\n * ```ts\r\n * import { defineTheme, generateThemeCss } from '@poodle-kit/ui/theme';\r\n *\r\n * const myTheme = defineTheme({ colors: { ... } });\r\n * const cssString = generateThemeCss(myTheme);\r\n * console.log(cssString);\r\n * // Output:\r\n * //   --color-primary: oklch(0.5 0.2 250);\r\n * //   --color-primary-foreground: oklch(1 0 0);\r\n * ```\r\n */\r\nexport function generateThemeCss(theme: ThemeConfig): string {\r\n  const cssVars = themeToCssVars(theme);\r\n  return formatCssVars(cssVars);\r\n}\r\n","import { useContext } from 'react';\r\nimport { ThemeContext } from './provider';\r\nimport type { ThemeProviderState } from './types';\r\n\r\nexport function useTheme(): ThemeProviderState {\r\n  const context = useContext(ThemeContext);\r\n\r\n  if (context === undefined) {\r\n    throw new Error('useTheme must be used within a ThemeProvider');\r\n  }\r\n\r\n  return context;\r\n}\r\n","export type Theme = 'light' | 'dark' | 'system' | string;\r\n\r\nexport type ColorValue =\r\n  | string\r\n  | {\r\n      DEFAULT: string;\r\n      foreground: string;\r\n    };\r\n\r\nexport interface ThemeColors {\r\n  // Page & Container colors\r\n  background?: ColorValue;\r\n  foreground?: ColorValue;\r\n  muted?: ColorValue;\r\n  accent?: ColorValue;\r\n  card?: ColorValue;\r\n  popover?: ColorValue;\r\n\r\n  // Brand & Action colors\r\n  primary?: ColorValue;\r\n  secondary?: ColorValue;\r\n\r\n  // Semantic colors\r\n  info?: ColorValue;\r\n  danger?: ColorValue;\r\n  warning?: ColorValue;\r\n  success?: ColorValue;\r\n  destructive?: ColorValue;\r\n\r\n  // Border & Input colors\r\n  border?: ColorValue;\r\n  input?: ColorValue;\r\n  ring?: ColorValue;\r\n\r\n  // Custom colors\r\n  [key: string]: ColorValue | undefined;\r\n}\r\n\r\nexport interface ThemeConfig {\r\n  colors: ThemeColors;\r\n  spacing?: Record<string, string>;\r\n  radius?: Record<string, string>;\r\n  fontSize?: Record<\r\n    string,\r\n    string | [string, { lineHeight: string; letterSpacing?: string }]\r\n  >;\r\n  fontFamily?: Record<string, string[]>;\r\n  fontWeight?: Record<string, string>;\r\n  shadows?: Record<string, string>;\r\n  zIndex?: Record<string, string>;\r\n  animation?: {\r\n    duration?: Record<string, string>;\r\n    ease?: Record<string, string>;\r\n  };\r\n  [key: string]: unknown;\r\n}\r\n\r\nexport interface CustomThemeDefinition {\r\n  dark?: boolean;\r\n  cssVars?: Record<string, string>;\r\n}\r\n\r\nexport interface ThemeProviderProps {\r\n  children: React.ReactNode;\r\n  defaultTheme?: Theme;\r\n  storageKey?: string;\r\n  /** Custom theme configuration for light mode */\r\n  config?: ThemeConfig;\r\n  /** Custom theme configuration for dark mode */\r\n  darkConfig?: ThemeConfig;\r\n  /** Legacy: Custom theme definitions (deprecated, use config instead) */\r\n  customThemes?: Record<string, CustomThemeDefinition>;\r\n  enableColorSchemeSync?: boolean;\r\n}\r\n\r\nexport interface ThemeProviderState {\r\n  theme: Theme;\r\n  setTheme: (theme: Theme) => void;\r\n}\r\n\r\nexport function defineTheme<T extends ThemeConfig>(config: T): T {\r\n  return config;\r\n}\r\n","/**\r\n * Default Theme Tokens\r\n *\r\n * This is a reference implementation showing how to define themes.\r\n * Copy this pattern to your project and customize the values.\r\n *\r\n * @example\r\n * ```tsx\r\n * // your-app/src/theme/my-theme.ts\r\n * import { defineTheme } from '@poodle-kit/ui/theme';\r\n *\r\n * export const myLightTheme = defineTheme({\r\n *   colors: {\r\n *     primary: { DEFAULT: 'oklch(0.5 0.2 250)', foreground: 'oklch(1 0 0)' },\r\n *     // ... your custom colors\r\n *   },\r\n *   radius: { md: '0.5rem' },\r\n * });\r\n *\r\n * export const myDarkTheme = defineTheme({\r\n *   colors: {\r\n *     primary: { DEFAULT: 'oklch(0.7 0.2 250)', foreground: 'oklch(0.09 0 0)' },\r\n *     // ... your custom colors\r\n *   },\r\n *   radius: { md: '0.5rem' },\r\n * });\r\n * ```\r\n *\r\n * Then use in your app:\r\n * ```tsx\r\n * import { ThemeProvider } from '@poodle-kit/ui';\r\n * import { myLightTheme, myDarkTheme } from './theme/my-theme';\r\n *\r\n * <ThemeProvider config={myLightTheme} darkConfig={myDarkTheme}>\r\n *   <App />\r\n * </ThemeProvider>\r\n * ```\r\n */\r\n\r\nimport { defineTheme } from '../types';\r\n\r\n/**\r\n * Default Light Theme\r\n * Clean neutral design with semantic color tokens\r\n */\r\nexport const defaultLightTheme = defineTheme({\r\n  colors: {\r\n    // Page & Container colors\r\n    background: {\r\n      DEFAULT: 'oklch(1 0 0)',\r\n      foreground: 'oklch(0.09 0 0)',\r\n    },\r\n\r\n    muted: {\r\n      DEFAULT: 'oklch(0.96 0 0)',\r\n      foreground: 'oklch(0.45 0 0)',\r\n    },\r\n\r\n    accent: {\r\n      DEFAULT: 'oklch(0.96 0 0)',\r\n      foreground: 'oklch(0.09 0 0)',\r\n    },\r\n\r\n    card: {\r\n      DEFAULT: 'oklch(1 0 0)',\r\n      foreground: 'oklch(0.09 0 0)',\r\n    },\r\n\r\n    popover: {\r\n      DEFAULT: 'oklch(1 0 0)',\r\n      foreground: 'oklch(0.09 0 0)',\r\n    },\r\n\r\n    // Brand & Action colors\r\n    primary: {\r\n      DEFAULT: 'oklch(0.09 0 0)',\r\n      foreground: 'oklch(0.98 0 0)',\r\n    },\r\n\r\n    secondary: {\r\n      DEFAULT: 'oklch(0.45 0 0)',\r\n      foreground: 'oklch(0.98 0 0)',\r\n    },\r\n\r\n    // Semantic colors\r\n    info: {\r\n      DEFAULT: 'oklch(0.55 0.15 250)',\r\n      foreground: 'oklch(0.98 0 0)',\r\n    },\r\n\r\n    danger: {\r\n      DEFAULT: 'oklch(0.576 0.204 27.325)',\r\n      foreground: 'oklch(0.98 0 0)',\r\n    },\r\n\r\n    warning: {\r\n      DEFAULT: 'oklch(0.75 0.15 75)',\r\n      foreground: 'oklch(0.09 0 0)',\r\n    },\r\n\r\n    success: {\r\n      DEFAULT: 'oklch(0.60 0.15 145)',\r\n      foreground: 'oklch(0.98 0 0)',\r\n    },\r\n\r\n    // Border & Input colors\r\n    border: 'oklch(0.90 0 0)',\r\n    input: 'oklch(0.90 0 0)',\r\n    ring: 'oklch(0.09 0 0)',\r\n  },\r\n\r\n  radius: {\r\n    none: '0',\r\n    sm: '0.125rem',\r\n    base: '0.25rem',\r\n    md: '0.375rem',\r\n    lg: '0.5rem',\r\n    xl: '0.75rem',\r\n    '2xl': '1rem',\r\n    '3xl': '1.5rem',\r\n    full: '9999px',\r\n  },\r\n});\r\n\r\n/**\r\n * Default Dark Theme\r\n * Clean neutral design with semantic color tokens\r\n */\r\nexport const defaultDarkTheme = defineTheme({\r\n  colors: {\r\n    // Page & Container colors\r\n    background: {\r\n      DEFAULT: 'oklch(0.09 0 0)',\r\n      foreground: 'oklch(0.98 0 0)',\r\n    },\r\n\r\n    muted: {\r\n      DEFAULT: 'oklch(0.17 0 0)',\r\n      foreground: 'oklch(0.65 0 0)',\r\n    },\r\n\r\n    accent: {\r\n      DEFAULT: 'oklch(0.17 0 0)',\r\n      foreground: 'oklch(0.98 0 0)',\r\n    },\r\n\r\n    card: {\r\n      DEFAULT: 'oklch(0.09 0 0)',\r\n      foreground: 'oklch(0.98 0 0)',\r\n    },\r\n\r\n    popover: {\r\n      DEFAULT: 'oklch(0.09 0 0)',\r\n      foreground: 'oklch(0.98 0 0)',\r\n    },\r\n\r\n    // Brand & Action colors\r\n    primary: {\r\n      DEFAULT: 'oklch(0.98 0 0)',\r\n      foreground: 'oklch(0.09 0 0)',\r\n    },\r\n\r\n    secondary: {\r\n      DEFAULT: 'oklch(0.65 0 0)',\r\n      foreground: 'oklch(0.09 0 0)',\r\n    },\r\n\r\n    // Semantic colors\r\n    info: {\r\n      DEFAULT: 'oklch(0.65 0.15 250)',\r\n      foreground: 'oklch(0.09 0 0)',\r\n    },\r\n\r\n    danger: {\r\n      DEFAULT: 'oklch(0.701 0.191 29.234)',\r\n      foreground: 'oklch(0.09 0 0)',\r\n    },\r\n\r\n    warning: {\r\n      DEFAULT: 'oklch(0.80 0.15 75)',\r\n      foreground: 'oklch(0.09 0 0)',\r\n    },\r\n\r\n    success: {\r\n      DEFAULT: 'oklch(0.70 0.15 145)',\r\n      foreground: 'oklch(0.09 0 0)',\r\n    },\r\n\r\n    // Border & Input colors\r\n    border: 'oklch(0.27 0 0)',\r\n    input: 'oklch(0.27 0 0)',\r\n    ring: 'oklch(0.98 0 0)',\r\n  },\r\n\r\n  radius: {\r\n    none: '0',\r\n    sm: '0.125rem',\r\n    base: '0.25rem',\r\n    md: '0.375rem',\r\n    lg: '0.5rem',\r\n    xl: '0.75rem',\r\n    '2xl': '1rem',\r\n    '3xl': '1.5rem',\r\n    full: '9999px',\r\n  },\r\n});\r\n"],"mappings":"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","names":["value"]}

package/dist/theme/theme.css

@@ -0,0 +1,110 @@
+/**
+ * Default Theme Tokens
+ *
+ * These are fallback values when no custom theme is provided.
+ * Users should override these by passing `config` and `darkConfig` to ThemeProvider.
+ *
+ * @example
+ * ```tsx
+ * import { ThemeProvider, defineTheme } from '@poodle-kit/ui';
+ *
+ * const myTheme = defineTheme({
+ *   colors: {
+ *     primary: { DEFAULT: 'oklch(0.5 0.2 250)', foreground: 'oklch(1 0 0)' }
+ *   }
+ * });
+ *
+ * <ThemeProvider config={myTheme} darkConfig={myDarkTheme}>
+ *   <App />
+ * </ThemeProvider>
+ * ```
+ */
+
+@import 'tailwindcss';
+
+/* ==================== Light Mode (Default) ==================== */
+
+@theme {
+  /* Page & Container colors */
+  --color-background: oklch(1 0 0);
+  --color-background-foreground: oklch(0.09 0 0);
+  --color-foreground: oklch(0.09 0 0);
+  --color-muted: oklch(0.96 0 0);
+  --color-muted-foreground: oklch(0.45 0 0);
+  --color-accent: oklch(0.96 0 0);
+  --color-accent-foreground: oklch(0.09 0 0);
+  --color-card: oklch(1 0 0);
+  --color-card-foreground: oklch(0.09 0 0);
+  --color-popover: oklch(1 0 0);
+  --color-popover-foreground: oklch(0.09 0 0);
+
+  /* Brand & Action colors */
+  --color-primary: oklch(0.09 0 0);
+  --color-primary-foreground: oklch(0.98 0 0);
+  --color-secondary: oklch(0.45 0 0);
+  --color-secondary-foreground: oklch(0.98 0 0);
+
+  /* Semantic colors */
+  --color-info: oklch(0.55 0.15 250);
+  --color-info-foreground: oklch(0.98 0 0);
+  --color-danger: oklch(0.576 0.204 27.325);
+  --color-danger-foreground: oklch(0.98 0 0);
+  --color-warning: oklch(0.75 0.15 75);
+  --color-warning-foreground: oklch(0.09 0 0);
+  --color-success: oklch(0.60 0.15 145);
+  --color-success-foreground: oklch(0.98 0 0);
+
+  /* Border & Input colors */
+  --color-border: oklch(0.90 0 0);
+  --color-input: oklch(0.90 0 0);
+  --color-ring: oklch(0.09 0 0);
+
+  /* Radius */
+  --radius-none: 0;
+  --radius-sm: 0.125rem;
+  --radius-base: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-3xl: 1.5rem;
+  --radius-full: 9999px;
+}
+
+/* ==================== Dark Mode ==================== */
+
+.dark {
+  /* Page & Container colors */
+  --color-background: oklch(0.09 0 0);
+  --color-background-foreground: oklch(0.98 0 0);
+  --color-foreground: oklch(0.98 0 0);
+  --color-muted: oklch(0.17 0 0);
+  --color-muted-foreground: oklch(0.65 0 0);
+  --color-accent: oklch(0.17 0 0);
+  --color-accent-foreground: oklch(0.98 0 0);
+  --color-card: oklch(0.09 0 0);
+  --color-card-foreground: oklch(0.98 0 0);
+  --color-popover: oklch(0.09 0 0);
+  --color-popover-foreground: oklch(0.98 0 0);
+
+  /* Brand & Action colors */
+  --color-primary: oklch(0.98 0 0);
+  --color-primary-foreground: oklch(0.09 0 0);
+  --color-secondary: oklch(0.65 0 0);
+  --color-secondary-foreground: oklch(0.09 0 0);
+
+  /* Semantic colors */
+  --color-info: oklch(0.65 0.15 250);
+  --color-info-foreground: oklch(0.09 0 0);
+  --color-danger: oklch(0.701 0.191 29.234);
+  --color-danger-foreground: oklch(0.09 0 0);
+  --color-warning: oklch(0.80 0.15 75);
+  --color-warning-foreground: oklch(0.09 0 0);
+  --color-success: oklch(0.70 0.15 145);
+  --color-success-foreground: oklch(0.09 0 0);
+
+  /* Border & Input colors */
+  --color-border: oklch(0.27 0 0);
+  --color-input: oklch(0.27 0 0);
+  --color-ring: oklch(0.98 0 0);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@poodle-kit/ui",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "React UI component library with Tailwind CSS",
   "author": "",
   "license": "MIT",
@@ -19,19 +19,26 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/index.js"
     },
-    "./styles.css": "./dist/index.css"
+    "./theme": {
+      "types": "./dist/theme/index.d.ts",
+      "import": "./dist/theme/index.mjs",
+      "require": "./dist/theme/index.js"
+    },
+    "./utils": {
+      "types": "./dist/lib/cn.d.ts",
+      "import": "./dist/lib/cn.mjs",
+      "require": "./dist/lib/cn.js"
+    },
+    "./styles.css": "./dist/index.css",
+    "./theme.css": "./dist/theme/theme.css"
   },
   "files": [
     "dist"
   ],
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch"
-  },
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18"
@@ -43,5 +50,16 @@
     "react-dom": "^18.2.0",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3"
+  },
+  "dependencies": {
+    "@radix-ui/react-slot": "^1.2.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.4.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit"
   }
-}
+}