astralkit 0.5.0 → 0.7.0

package/lib/theme-context.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react'
+
+export interface AkThemeContextValue {
+  dark: boolean
+}
+
+/**
+ * Provides dark mode state to descendants — including Radix portaled content,
+ * which escapes the data-ak-dark-* attribute scope on ancestor elements.
+ */
+export declare function AkThemeProvider(props: {
+  dark: boolean
+  children: React.ReactNode
+}): React.ReactElement
+
+/** Read the nearest AkThemeProvider's dark flag. Defaults to { dark: false }. */
+export declare function useAkTheme(): AkThemeContextValue

package/lib/theme-context.js

@@ -0,0 +1,33 @@
+'use client'
+
+import { createContext, createElement, useContext } from 'react'
+
+/**
+ * AkThemeContext — propagates dark mode state to Radix portaled content.
+ *
+ * Problem: Radix Dialog/DropdownMenu/Popover portal content to document.body,
+ * which exits the CSS custom property inheritance chain from data-ak-dark-*
+ * attributes on ancestor elements.
+ *
+ * Solution: Every component that uses Radix portals reads this context and
+ * applies the dark mode data attributes directly onto the portaled content.
+ *
+ * Usage:
+ *   <AkThemeProvider dark={isDark}>
+ *     <MyComponentWithRadixPortals />
+ *   </AkThemeProvider>
+ *
+ *   // Inside the component:
+ *   const { dark } = useAkTheme()
+ *   <DropdownMenu.Content data-ak-dark-panel={dark || undefined}>
+ */
+
+const AkThemeContext = createContext({ dark: false })
+
+export function AkThemeProvider({ dark, children }) {
+  return createElement(AkThemeContext.Provider, { value: { dark } }, children)
+}
+
+export function useAkTheme() {
+  return useContext(AkThemeContext)
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astralkit",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "Design tokens and component primitives for accessible UI — Tailwind CSS v3 & v4",
   "type": "module",
   "exports": {
@@ -11,8 +11,10 @@
     "./tailwind.cjs": "./tailwind.cjs",
     "./utils": "./lib/utils.js",
     "./motion": "./lib/motion.js",
+    "./theme-context": "./lib/theme-context.js",
     "./ai-rules": "./ai-rules.md",
-    "./palettes": "./palettes.css"
+    "./palettes": "./palettes.css",
+    "./presets": "./lib/presets/index.js"
   },
   "files": [
     "astralkit-theme.css",
@@ -32,11 +34,15 @@
     "tailwind-merge": "^2.2.0 || ^3.0.0"
   },
   "peerDependencies": {
-    "tailwindcss": ">=3.0.0"
+    "tailwindcss": ">=3.0.0",
+    "react": ">=18.0.0"
   },
   "peerDependenciesMeta": {
     "tailwindcss": {
       "optional": false
+    },
+    "react": {
+      "optional": true
     }
   },
   "keywords": [