bun.lock

@@ -1,6 +1,5 @@
 {
   "lockfileVersion": 1,
-  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "forge",

src/index.tsx

@@ -4,16 +4,26 @@ import { type TagDef, UnitlessProps, NonStyleKeys } from './types'
 export const styles: Record<string, Record<string, string>> = {}
 const themes: Record<string, Record<string, any>> = {}
 
+// Type registry for theme variables (will be auto-populated)
+let registeredThemeKeys: Set<string> = new Set()
+
+// Clear all registered styles
 export function clearStyles() {
   for (const key in styles) delete styles[key]
   for (const key in themes) delete themes[key]
+  registeredThemeKeys.clear()
 }
 
-// HMR support - clear styles when module is replaced
+// Register a theme with CSS custom properties
-import.meta.hot?.dispose(() => clearStyles())
+export function createTheme<const T extends Record<string, string | number>>(
+  name: string,
+  values: T
+): T {
+  themes[name] = values as Record<string, string>
+
+  // track for runtime validation
+  Object.keys(values).forEach(key => registeredThemeKeys.add(key))
 
-export function createTheme<const T extends Record<string, string | number>>(name: string, values: T): T {
-  themes[name] = values as Record<string, string | number>
   return values
 }
 
@@ -42,20 +52,16 @@ export function createThemedVar<T extends Record<string, any>>(_themes: T) {
   }
 }
 
+// Simplified API: register multiple themes and get typed themeVar in one call
 type Theme = Record<string, string | number>
+export function createThemes<T extends Record<string, Theme>>(themes: T) {
+  const registeredThemes = {} as T
 
-export function createThemes<T extends Record<string, Theme>>(themeDefs: T) {
+  for (const [name, values] of Object.entries(themes)) {
-  for (const [name, values] of Object.entries(themeDefs))
+    (registeredThemes as any)[name] = createTheme(name, values)
-    createTheme(name, values)
-
-  return (name: keyof T[keyof T]) => `var(--theme-${name as string})`
   }
 
-export function extendThemes(overrides: Record<string, Theme>) {
+  return createThemedVar(registeredThemes)
-  for (const [name, values] of Object.entries(overrides))
-    themes[name] = { ...themes[name], ...values }
-
-  return (name: string) => `var(--theme-${name})`
 }
 
 // Generic themeVar (untyped fallback)
@@ -282,7 +288,11 @@ export function define(nameOrDef: string | TagDef, defIfNamed?: TagDef) {
   const def = defIfNamed ?? nameOrDef as TagDef
   const name = defIfNamed ? (nameOrDef as string) : anonName(def)
 
-  if (styles[name]) throw `${name} is already defined! Must use unique names.`
+  // Clear any existing styles for this component (supports HMR/hot reload)
+  for (const key in styles) {
+    if (key === name || key.startsWith(`${name}_`) || key.startsWith(`${name}.`) || key.startsWith(`${name}:`))
+      delete styles[key]
+  }
   registerStyles(name, def)
 
   return (props: Record<string, any>) => {