@pyreon/ui-core 0.11.4 → 0.11.6

package/src/config.ts

@@ -1,6 +1,6 @@
-import type { StyledFunction } from "@pyreon/styler"
-import { css, keyframes, styled } from "@pyreon/styler"
-import type { HTMLTags } from "./html"
+import type { StyledFunction } from '@pyreon/styler'
+import { css, keyframes, styled } from '@pyreon/styler'
+import type { HTMLTags } from './html'
 
 /**
  * Describes the shape of the CSS-in-JS engine.
@@ -19,7 +19,7 @@ interface PlatformConfig {
   createMediaQueries?: (props: {
     breakpoints: Record<string, number>
     rootSize: number
-    css: CSSEngineConnector["css"]
+    css: CSSEngineConnector['css']
   }) => Record<string, (...args: any[]) => any>
 }
 
@@ -36,9 +36,9 @@ class Configuration {
   css = css
   styled: StyledFunction = styled
   keyframes = keyframes
-  component: string | HTMLTags = "div"
-  textComponent: string | HTMLTags = "span"
-  createMediaQueries: PlatformConfig["createMediaQueries"] = undefined
+  component: string | HTMLTags = 'div'
+  textComponent: string | HTMLTags = 'span'
+  createMediaQueries: PlatformConfig['createMediaQueries'] = undefined
 
   init = (props: InitConfig) => {
     if (props.css) this.css = props.css

package/src/context.tsx

@@ -1,13 +1,30 @@
-import type { VNodeChild } from "@pyreon/core"
-import { createContext, provide } from "@pyreon/core"
-import isEmpty from "./isEmpty"
-import type { Breakpoints } from "./types"
+import type { VNodeChild } from '@pyreon/core'
+import { createReactiveContext, provide } from '@pyreon/core'
+import isEmpty from './isEmpty'
+import type { Breakpoints } from './types'
 
 /**
- * Internal context shared across all @pyreon packages.
- * Carries the theme object plus any extra provider props.
+ * Core context value shared across all @pyreon UI packages.
  */
-const context = createContext<any>({})
+export interface CoreContextValue {
+  theme: Record<string, unknown>
+  mode: 'light' | 'dark'
+  isDark: boolean
+  isLight: boolean
+}
+
+/**
+ * Internal reactive context shared across all @pyreon packages.
+ * Carries the theme object, mode, and derived dark/light flags.
+ *
+ * ReactiveContext means useContext() returns `() => CoreContextValue`.
+ */
+const context = createReactiveContext<CoreContextValue>({
+  theme: {},
+  mode: 'light',
+  isDark: false,
+  isLight: true,
+})
 
 type Theme = Partial<
   {
@@ -24,13 +41,31 @@ type ProviderType = Partial<
 >
 
 /**
+ * @internal Low-level provider — use `PyreonUI` from `@pyreon/ui-core` instead.
+ *
  * Provider that feeds the internal Pyreon context with the theme.
  * When no theme is supplied, renders children directly.
+ *
+ * @deprecated Prefer `<PyreonUI theme={theme}>` which handles all context layers.
  */
+const __DEV__ = typeof process !== 'undefined' && process?.env?.NODE_ENV !== 'production'
+
 function Provider({ theme, children, ...props }: ProviderType): VNodeChild {
+  if (__DEV__) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      '[Pyreon] CoreProvider is internal. Use <PyreonUI theme={theme}> instead — it handles all context layers (styler, core, mode) in one component.',
+    )
+  }
   if (isEmpty(theme) || !theme) return children ?? null
 
-  provide(context, { theme, ...props })
+  provide(context, () => ({
+    theme: theme as Record<string, unknown>,
+    mode: (props.mode as 'light' | 'dark') ?? 'light',
+    isDark: props.isDark as boolean ?? false,
+    isLight: props.isLight as boolean ?? true,
+    ...props,
+  }))
 
   return children ?? null
 }

package/src/hoistNonReactStatics.ts

@@ -25,7 +25,7 @@ const hoistNonReactStatics = <T, S>(
   source: S,
   excludeList?: Record<string, true>,
 ): T => {
-  if (typeof source === "string") return target
+  if (typeof source === 'string') return target
 
   const proto = Object.getPrototypeOf(source)
   if (proto && proto !== Object.prototype) {

package/src/html/htmlTags.ts

@@ -1,149 +1,149 @@
 const HTML_TAGS = [
-  "a",
-  "abbr",
-  "address",
-  "area",
-  "article",
-  "aside",
-  "audio",
-  "b",
-  "bdi",
-  "bdo",
-  "big",
-  "blockquote",
-  "body",
-  "br",
-  "button",
-  "canvas",
-  "caption",
-  "cite",
-  "code",
-  "col",
-  "colgroup",
-  "data",
-  "datalist",
-  "dd",
-  "del",
-  "details",
-  "dfn",
-  "dialog",
-  "div",
-  "dl",
-  "dt",
-  "em",
-  "embed",
-  "fieldset",
-  "figcaption",
-  "figure",
-  "footer",
-  "form",
-  "h1",
-  "h2",
-  "h3",
-  "h4",
-  "h5",
-  "h6",
-  "header",
-  "hr",
-  "html",
-  "i",
-  "iframe",
-  "img",
-  "input",
-  "ins",
-  "kbd",
-  "label",
-  "legend",
-  "li",
-  "main",
-  "map",
-  "mark",
-  "meter",
-  "nav",
-  "object",
-  "ol",
-  "optgroup",
-  "option",
-  "output",
-  "p",
-  "picture",
-  "pre",
-  "progress",
-  "q",
-  "rp",
-  "rt",
-  "ruby",
-  "s",
-  "samp",
-  "section",
-  "select",
-  "small",
-  "source",
-  "span",
-  "strong",
-  "sub",
-  "summary",
-  "sup",
-  "svg",
-  "table",
-  "tbody",
-  "td",
-  "template",
-  "textarea",
-  "tfoot",
-  "th",
-  "thead",
-  "time",
-  "tr",
-  "track",
-  "u",
-  "ul",
-  "var",
-  "video",
-  "wbr",
+  'a',
+  'abbr',
+  'address',
+  'area',
+  'article',
+  'aside',
+  'audio',
+  'b',
+  'bdi',
+  'bdo',
+  'big',
+  'blockquote',
+  'body',
+  'br',
+  'button',
+  'canvas',
+  'caption',
+  'cite',
+  'code',
+  'col',
+  'colgroup',
+  'data',
+  'datalist',
+  'dd',
+  'del',
+  'details',
+  'dfn',
+  'dialog',
+  'div',
+  'dl',
+  'dt',
+  'em',
+  'embed',
+  'fieldset',
+  'figcaption',
+  'figure',
+  'footer',
+  'form',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'header',
+  'hr',
+  'html',
+  'i',
+  'iframe',
+  'img',
+  'input',
+  'ins',
+  'kbd',
+  'label',
+  'legend',
+  'li',
+  'main',
+  'map',
+  'mark',
+  'meter',
+  'nav',
+  'object',
+  'ol',
+  'optgroup',
+  'option',
+  'output',
+  'p',
+  'picture',
+  'pre',
+  'progress',
+  'q',
+  'rp',
+  'rt',
+  'ruby',
+  's',
+  'samp',
+  'section',
+  'select',
+  'small',
+  'source',
+  'span',
+  'strong',
+  'sub',
+  'summary',
+  'sup',
+  'svg',
+  'table',
+  'tbody',
+  'td',
+  'template',
+  'textarea',
+  'tfoot',
+  'th',
+  'thead',
+  'time',
+  'tr',
+  'track',
+  'u',
+  'ul',
+  'var',
+  'video',
+  'wbr',
 ] as const
 
 const HTML_TEXT_TAGS = [
-  "abbr",
-  "b",
-  "bdi",
-  "bdo",
-  "big",
-  "blockquote",
-  "cite",
-  "code",
-  "del",
-  "div",
-  "dl",
-  "dt",
-  "em",
-  "figcaption",
-  "h1",
-  "h2",
-  "h3",
-  "h4",
-  "h5",
-  "h6",
-  "i",
-  "ins",
-  "kbd",
-  "label",
-  "legend",
-  "li",
-  "p",
-  "pre",
-  "q",
-  "rp",
-  "rt",
-  "s",
-  "small",
-  "span",
-  "strong",
-  "sub",
-  "summary",
-  "sup",
-  "time",
-  "u",
+  'abbr',
+  'b',
+  'bdi',
+  'bdo',
+  'big',
+  'blockquote',
+  'cite',
+  'code',
+  'del',
+  'div',
+  'dl',
+  'dt',
+  'em',
+  'figcaption',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'i',
+  'ins',
+  'kbd',
+  'label',
+  'legend',
+  'li',
+  'p',
+  'pre',
+  'q',
+  'rp',
+  'rt',
+  's',
+  'small',
+  'span',
+  'strong',
+  'sub',
+  'summary',
+  'sup',
+  'time',
+  'u',
 ] as const
 
 export type HTMLTags = (typeof HTML_TAGS)[number]

package/src/html/index.ts

@@ -1,6 +1,6 @@
-import type { HTMLElementAttrs } from "./htmlElementAttrs"
-import type { HTMLTags, HTMLTextTags } from "./htmlTags"
-import { HTML_TAGS, HTML_TEXT_TAGS } from "./htmlTags"
+import type { HTMLElementAttrs } from './htmlElementAttrs'
+import type { HTMLTags, HTMLTextTags } from './htmlTags'
+import { HTML_TAGS, HTML_TEXT_TAGS } from './htmlTags'
 
 type HTMLTagAttrsByTag<T extends HTMLTags> = T extends HTMLTags
   ? HTMLElementAttrs[T]

package/src/index.ts

@@ -1,25 +1,27 @@
-import compose from "./compose"
-import config, { init } from "./config"
-import Provider, { context } from "./context"
-import hoistNonReactStatics from "./hoistNonReactStatics"
-import type { HTMLElementAttrs, HTMLTagAttrsByTag, HTMLTags, HTMLTextTags } from "./html"
-import { HTML_TAGS, HTML_TEXT_TAGS } from "./html"
-import type { IsEmpty } from "./isEmpty"
-import isEmpty from "./isEmpty"
-import isEqual from "./isEqual"
-import type { PyreonUIProps, ThemeMode, ThemeModeInput } from "./PyreonUI"
-import { PyreonUI, useMode } from "./PyreonUI"
-import type { Render } from "./render"
-import render from "./render"
-import type { BreakpointKeys, Breakpoints } from "./types"
-import useStableValue from "./useStableValue"
-import { get, merge, omit, pick, set, throttle } from "./utils"
+import compose from './compose'
+import config, { init } from './config'
+import type { CoreContextValue } from './context'
+import Provider, { context } from './context'
+import hoistNonReactStatics from './hoistNonReactStatics'
+import type { HTMLElementAttrs, HTMLTagAttrsByTag, HTMLTags, HTMLTextTags } from './html'
+import { HTML_TAGS, HTML_TEXT_TAGS } from './html'
+import type { IsEmpty } from './isEmpty'
+import isEmpty from './isEmpty'
+import isEqual from './isEqual'
+import type { PyreonUIProps, ThemeMode, ThemeModeInput } from './PyreonUI'
+import { PyreonUI, useMode } from './PyreonUI'
+import type { Render } from './render'
+import render from './render'
+import type { BreakpointKeys, Breakpoints } from './types'
+import useStableValue from './useStableValue'
+import { get, merge, omit, pick, set, throttle } from './utils'
 
-export type { CSSEngineConnector } from "./config"
+export type { CSSEngineConnector } from './config'
 
 export type {
   BreakpointKeys,
   Breakpoints,
+  CoreContextValue,
   HTMLElementAttrs,
   HTMLTagAttrsByTag,
   HTMLTags,

package/src/isEmpty.ts

@@ -12,7 +12,7 @@ export type IsEmpty = <T extends Record<number | string, any> | any[] | null | u
 
 const isEmpty = (<T extends Record<number | string, any> | any[] | null | undefined>(param: T) => {
   if (!param) return true
-  if (typeof param !== "object") return true
+  if (typeof param !== 'object') return true
   if (Array.isArray(param)) return param.length === 0
   return Object.keys(param).length === 0
 }) as IsEmpty

package/src/isEqual.ts

@@ -18,7 +18,7 @@ const isObjectEqual = (a: Record<string, unknown>, b: Record<string, unknown>):
 
 const isEqual = (a: unknown, b: unknown): boolean => {
   if (Object.is(a, b)) return true
-  if (typeof a !== typeof b || a == null || b == null || typeof a !== "object") return false
+  if (typeof a !== typeof b || a == null || b == null || typeof a !== 'object') return false
   if (Array.isArray(a)) return Array.isArray(b) && isArrayEqual(a, b)
   if (Array.isArray(b)) return false
   return isObjectEqual(a as Record<string, unknown>, b as Record<string, unknown>)

package/src/render.tsx

@@ -1,5 +1,5 @@
-import type { ComponentFn, Props, VNodeChild } from "@pyreon/core"
-import { h } from "@pyreon/core"
+import type { ComponentFn, Props, VNodeChild } from '@pyreon/core'
+import { h } from '@pyreon/core'
 
 type RenderProps<T extends Record<string, unknown> | undefined> = (props: Partial<T>) => VNodeChild
 
@@ -21,7 +21,7 @@ const render: Render = (content, attachProps) => {
   if (!content) return null
 
   const t = typeof content
-  if (t === "string" || t === "number" || t === "boolean" || t === "bigint") {
+  if (t === 'string' || t === 'number' || t === 'boolean' || t === 'bigint') {
     return content as VNodeChild
   }
 
@@ -29,10 +29,10 @@ const render: Render = (content, attachProps) => {
     return content as VNodeChild
   }
 
-  if (typeof content === "function") {
+  if (typeof content === 'function') {
     // Extract key from props — it's a VNode concept, not a component prop.
     // Passing key inside props causes JSX runtime warnings.
-    if (attachProps && "key" in attachProps) {
+    if (attachProps && 'key' in attachProps) {
       const { key, ...rest } = attachProps
       return h(content as string | ComponentFn, rest as Props)
     }
@@ -40,7 +40,7 @@ const render: Render = (content, attachProps) => {
   }
 
   // VNode object — return directly
-  if (typeof content === "object") {
+  if (typeof content === 'object') {
     return content as VNodeChild
   }
 

package/src/useStableValue.ts

@@ -1,5 +1,5 @@
-import { signal } from "@pyreon/reactivity"
-import isEqual from "./isEqual"
+import { signal } from '@pyreon/reactivity'
+import isEqual from './isEqual'
 
 /**
  * Returns a referentially stable version of `value`. The returned reference

package/src/utils.ts

@@ -39,7 +39,7 @@ const parsePath = (path: string | string[]): string[] => {
 }
 
 const isUnsafeKey = (key: string): boolean =>
-  key === "__proto__" || key === "prototype" || key === "constructor"
+  key === '__proto__' || key === 'prototype' || key === 'constructor'
 
 export const get = (obj: any, path: string | string[], defaultValue?: any): any => {
   const keys = parsePath(path)
@@ -132,7 +132,7 @@ export const throttle = <T extends (...args: any[]) => any>(
 
 const isPlainObject = (value: unknown): value is Record<string, any> =>
   value !== null &&
-  typeof value === "object" &&
+  typeof value === 'object' &&
   !Array.isArray(value) &&
   Object.getPrototypeOf(value) === Object.prototype
 
@@ -143,7 +143,7 @@ export const merge = <T extends Record<string, any>>(
   for (const source of sources) {
     if (source == null) continue
     for (const key of Object.keys(source)) {
-      if (key === "__proto__" || key === "constructor" || key === "prototype") continue
+      if (key === '__proto__' || key === 'constructor' || key === 'prototype') continue
       const targetVal = (target as Record<string, unknown>)[key]
       const sourceVal = source[key]
       if (isPlainObject(targetVal) && isPlainObject(sourceVal)) {