@pyreon/rocketstyle 0.24.4 → 0.24.6

package/src/__tests__/themeUtils.test.ts

@@ -1,463 +0,0 @@
-import {
-  calculateChainOptions,
-  getDimensionThemes,
-  getTheme,
-  getThemeByMode,
-  getThemeFromChain,
-  themeModeCallback,
-} from '../utils/theme'
-
-describe('themeModeCallback', () => {
-  it('returns light value for light mode', () => {
-    const cb = themeModeCallback('lightVal', 'darkVal')
-    expect(cb('light')).toBe('lightVal')
-  })
-
-  it('returns light value when mode is falsy', () => {
-    const cb = themeModeCallback('lightVal', 'darkVal')
-    expect(cb(undefined as any)).toBe('lightVal')
-    expect(cb('' as any)).toBe('lightVal')
-  })
-
-  it('returns dark value for dark mode', () => {
-    const cb = themeModeCallback('lightVal', 'darkVal')
-    expect(cb('dark')).toBe('darkVal')
-  })
-})
-
-describe('getThemeFromChain', () => {
-  it('returns empty for empty array', () => {
-    expect(getThemeFromChain([], {})).toEqual({})
-  })
-
-  it('returns empty for null', () => {
-    expect(getThemeFromChain(null, {})).toEqual({})
-  })
-
-  it('returns empty for undefined', () => {
-    expect(getThemeFromChain(undefined, {})).toEqual({})
-  })
-
-  it('evaluates chain of callbacks and deep-merges results', () => {
-    const fn1 = (_theme: any) => ({ color: 'blue' })
-    const fn2 = (theme: any) => ({ bg: theme.primary })
-    const result = getThemeFromChain([fn1, fn2], { primary: 'red' })
-    expect(result).toEqual({ color: 'blue', bg: 'red' })
-  })
-
-  it('later callbacks override earlier ones', () => {
-    const fn1 = () => ({ color: 'blue' })
-    const fn2 = () => ({ color: 'red' })
-    const result = getThemeFromChain([fn1, fn2], {})
-    expect(result).toEqual({ color: 'red' })
-  })
-
-  it('passes themeModeCallback and config.css to each callback', () => {
-    const fn = vi.fn(() => ({}))
-    getThemeFromChain([fn], { rootSize: 16 })
-    expect(fn).toHaveBeenCalledWith({ rootSize: 16 }, expect.any(Function), expect.anything())
-  })
-})
-
-describe('getDimensionThemes', () => {
-  it('returns empty for empty dimensions', () => {
-    expect(getDimensionThemes({}, { dimensions: {} })).toEqual({})
-  })
-
-  it('returns empty when dimensions is falsy', () => {
-    expect(getDimensionThemes({}, { dimensions: undefined })).toEqual({})
-  })
-
-  it('processes dimension theme chains', () => {
-    const theme = { primaryColor: 'blue' }
-    const options = {
-      dimensions: { states: 'state' },
-      states: [
-        (t: any) => ({
-          primary: { color: t.primaryColor },
-          secondary: { color: 'green' },
-        }),
-      ],
-    }
-    const result = getDimensionThemes(theme, options)
-    expect(result.state).toEqual({
-      primary: { color: 'blue' },
-      secondary: { color: 'green' },
-    })
-  })
-
-  it('skips dimensions without callback arrays', () => {
-    const options = {
-      dimensions: { states: 'state', sizes: 'size' },
-      states: [() => ({ primary: { color: 'red' } })],
-    }
-    const result = getDimensionThemes({}, options)
-    expect(result.state).toEqual({ primary: { color: 'red' } })
-    expect(result.size).toBeUndefined()
-  })
-
-  it('strips nullable values from results', () => {
-    const options = {
-      dimensions: { states: 'state' },
-      states: [() => ({ primary: { color: 'red' }, secondary: null })],
-    }
-    const result = getDimensionThemes({}, options)
-    expect(result.state.primary).toEqual({ color: 'red' })
-    expect(result.state.secondary).toBeUndefined()
-  })
-
-  it('handles multi-key dimensions', () => {
-    const options = {
-      dimensions: { multiple: { propName: 'multiple', multi: true } },
-      multiple: [() => ({ a: { weight: 'bold' } })],
-    }
-    const result = getDimensionThemes({}, options)
-    expect(result.multiple).toEqual({ a: { weight: 'bold' } })
-  })
-
-  it('skips empty callback arrays', () => {
-    const options = {
-      dimensions: { states: 'state' },
-      states: [],
-    }
-    const result = getDimensionThemes({}, options)
-    expect(result.state).toBeUndefined()
-  })
-})
-
-describe('calculateChainOptions (theme)', () => {
-  it('returns empty for null', () => {
-    expect(calculateChainOptions(null, [])).toEqual({})
-  })
-
-  it('returns empty for undefined', () => {
-    expect(calculateChainOptions(undefined, [])).toEqual({})
-  })
-
-  it('returns empty for empty array', () => {
-    expect(calculateChainOptions([], [])).toEqual({})
-  })
-
-  it('evaluates chain and deep-merges results', () => {
-    const fn1 = () => ({ nested: { a: 1 } })
-    const fn2 = () => ({ nested: { b: 2 } })
-    const result = calculateChainOptions([fn1, fn2], [])
-    expect(result).toEqual({ nested: { a: 1, b: 2 } })
-  })
-
-  it('passes args to each function', () => {
-    const fn = vi.fn(() => ({}))
-    calculateChainOptions([fn], ['arg1', 'arg2'])
-    expect(fn).toHaveBeenCalledWith('arg1', 'arg2')
-  })
-})
-
-describe('getTheme', () => {
-  it('returns baseTheme when rocketstate has no matching dimension themes', () => {
-    const result = getTheme({
-      rocketstate: { state: 'unknown' },
-      themes: { state: {} },
-      baseTheme: { color: 'blue' },
-    })
-    expect(result.color).toBe('blue')
-  })
-
-  it('merges dimension theme into baseTheme', () => {
-    const result = getTheme({
-      rocketstate: { state: 'primary' },
-      themes: { state: { primary: { color: 'red' } } },
-      baseTheme: { color: 'blue', bg: 'white' },
-    })
-    expect(result.color).toBe('red')
-    expect(result.bg).toBe('white')
-  })
-
-  it('handles array values for multi-key dimensions', () => {
-    const result = getTheme({
-      rocketstate: { multiple: ['a', 'b'] },
-      themes: {
-        multiple: { a: { weight: 'bold' }, b: { style: 'italic' } },
-      },
-      baseTheme: {},
-    })
-    expect(result.weight).toBe('bold')
-    expect(result.style).toBe('italic')
-  })
-
-  it('later dimensions override earlier ones', () => {
-    const result = getTheme({
-      rocketstate: { state: 'primary', size: 'large' },
-      themes: {
-        state: { primary: { fontSize: 14 } },
-        size: { large: { fontSize: 20 } },
-      },
-      baseTheme: {},
-    })
-    expect(result.fontSize).toBe(20)
-  })
-
-  it('does not mutate baseTheme', () => {
-    const baseTheme = { color: 'blue' }
-    getTheme({
-      rocketstate: { state: 'primary' },
-      themes: { state: { primary: { color: 'red' } } },
-      baseTheme,
-    })
-    expect(baseTheme.color).toBe('blue')
-  })
-})
-
-describe('getTheme with transform dimensions', () => {
-  it('applies transform function values after all static dimensions', () => {
-    const result = getTheme({
-      rocketstate: { state: 'primary', modifier: 'outlined' },
-      themes: {
-        state: { primary: { backgroundColor: 'blue', color: 'white' } },
-        modifier: {
-          outlined: (theme: any) => ({
-            color: theme.backgroundColor,
-            backgroundColor: 'transparent',
-          }),
-        },
-      },
-      baseTheme: { border: 'none' },
-      transformKeys: { modifier: true },
-    })
-    expect(result.color).toBe('blue')
-    expect(result.backgroundColor).toBe('transparent')
-    expect(result.border).toBe('none')
-  })
-
-  it('transform receives accumulated theme, appTheme, mode, and css', () => {
-    const transformFn = vi.fn((theme: any) => ({ derived: theme.color }))
-    const appTheme = { colors: { primary: 'blue' } }
-    getTheme({
-      rocketstate: { state: 'primary', modifier: 'test' },
-      themes: {
-        state: { primary: { color: 'red' } },
-        modifier: { test: transformFn },
-      },
-      baseTheme: { bg: 'white' },
-      transformKeys: { modifier: true },
-      appTheme,
-    })
-    expect(transformFn).toHaveBeenCalledWith(
-      expect.objectContaining({ bg: 'white', color: 'red' }),
-      appTheme,
-      expect.any(Function),
-      expect.anything(),
-    )
-  })
-
-  it('transform can use appTheme values', () => {
-    const appTheme = { spacing: { lg: '2rem' } }
-    const result = getTheme({
-      rocketstate: { modifier: 'withSpacing' },
-      themes: {
-        modifier: {
-          withSpacing: (_theme: any, app: any) => ({
-            padding: app.spacing.lg,
-          }),
-        },
-      },
-      baseTheme: { color: 'red' },
-      transformKeys: { modifier: true },
-      appTheme,
-    })
-    expect(result.padding).toBe('2rem')
-    expect(result.color).toBe('red')
-  })
-
-  it('supports multiple transform values (multi dimension)', () => {
-    const result = getTheme({
-      rocketstate: { modifier: ['outlined', 'rounded'] },
-      themes: {
-        modifier: {
-          outlined: (theme: any) => ({
-            color: theme.backgroundColor,
-            backgroundColor: 'transparent',
-          }),
-          rounded: () => ({ borderRadius: '999px' }),
-        },
-      },
-      baseTheme: { backgroundColor: 'blue', color: 'white' },
-      transformKeys: { modifier: true },
-    })
-    expect(result.color).toBe('blue')
-    expect(result.backgroundColor).toBe('transparent')
-    expect(result.borderRadius).toBe('999px')
-  })
-
-  it('transforms compose — later transform sees earlier transform results', () => {
-    const result = getTheme({
-      rocketstate: { modifier: ['first', 'second'] },
-      themes: {
-        modifier: {
-          first: () => ({ step: 'one' }),
-          second: (theme: any) => ({ sawStep: theme.step }),
-        },
-      },
-      baseTheme: {},
-      transformKeys: { modifier: true },
-    })
-    expect(result.step).toBe('one')
-    expect(result.sawStep).toBe('one')
-  })
-
-  it('works without transformKeys (backward compatible)', () => {
-    const result = getTheme({
-      rocketstate: { state: 'primary' },
-      themes: { state: { primary: { color: 'red' } } },
-      baseTheme: { bg: 'white' },
-    })
-    expect(result.color).toBe('red')
-    expect(result.bg).toBe('white')
-  })
-
-  it('non-transform dimension treats function values as regular merge (not called as transform)', () => {
-    const fn = vi.fn(() => ({ color: 'red' }))
-    getTheme({
-      rocketstate: { state: 'primary' },
-      themes: { state: { primary: fn } },
-      baseTheme: {},
-      transformKeys: {},
-    })
-    expect(fn).not.toHaveBeenCalled()
-  })
-
-  it('transform dimension not in rocketstate is ignored', () => {
-    const transformFn = vi.fn(() => ({ color: 'red' }))
-    const result = getTheme({
-      rocketstate: { state: 'primary' },
-      themes: {
-        state: { primary: { color: 'blue' } },
-        modifier: { outlined: transformFn },
-      },
-      baseTheme: {},
-      transformKeys: { modifier: true },
-    })
-    expect(transformFn).not.toHaveBeenCalled()
-    expect(result.color).toBe('blue')
-  })
-
-  it('transform does not mutate baseTheme', () => {
-    const baseTheme = { color: 'blue', bg: 'white' }
-    getTheme({
-      rocketstate: { modifier: 'flip' },
-      themes: {
-        modifier: {
-          flip: (theme: any) => ({ color: theme.bg, bg: theme.color }),
-        },
-      },
-      baseTheme,
-      transformKeys: { modifier: true },
-    })
-    expect(baseTheme.color).toBe('blue')
-    expect(baseTheme.bg).toBe('white')
-  })
-
-  it('transform with deep nested theme values', () => {
-    const result = getTheme({
-      rocketstate: { state: 'primary', modifier: 'outlined' },
-      themes: {
-        state: {
-          primary: {
-            backgroundColor: 'blue',
-            color: 'white',
-            hover: { backgroundColor: 'darkblue' },
-          },
-        },
-        modifier: {
-          outlined: (theme: any) => ({
-            color: theme.backgroundColor,
-            backgroundColor: 'transparent',
-            hover: {
-              backgroundColor: theme.backgroundColor,
-              color: theme.color,
-            },
-          }),
-        },
-      },
-      baseTheme: {},
-      transformKeys: { modifier: true },
-    })
-    expect(result.color).toBe('blue')
-    expect(result.backgroundColor).toBe('transparent')
-    const hover = result.hover as Record<string, any>
-    expect(hover.backgroundColor).toBe('blue')
-    expect(hover.color).toBe('white')
-  })
-
-  it('appTheme defaults to empty object when not provided', () => {
-    const transformFn = vi.fn(() => ({}))
-    getTheme({
-      rocketstate: { modifier: 'test' },
-      themes: { modifier: { test: transformFn } },
-      baseTheme: {},
-      transformKeys: { modifier: true },
-    })
-    expect(transformFn).toHaveBeenCalledWith(
-      expect.any(Object),
-      {},
-      expect.any(Function),
-      expect.anything(),
-    )
-  })
-
-  it('transform with mode callback produces light/dark values', () => {
-    const result = getTheme({
-      rocketstate: { modifier: 'themed' },
-      themes: {
-        modifier: {
-          themed: (_theme: any, _app: any, mode: any) => ({
-            shadow: mode('0 2px 4px rgba(0,0,0,0.1)', 'none'),
-          }),
-        },
-      },
-      baseTheme: {},
-      transformKeys: { modifier: true },
-    })
-    expect(typeof result.shadow).toBe('function')
-  })
-})
-
-describe('getThemeByMode', () => {
-  it('returns scalar values as-is', () => {
-    const result = getThemeByMode({ color: 'red', size: 16 }, 'light')
-    expect(result).toEqual({ color: 'red', size: 16 })
-  })
-
-  it('recursively processes nested objects', () => {
-    const result = getThemeByMode({ nested: { color: 'red' } }, 'light')
-    expect(result).toEqual({ nested: { color: 'red' } })
-  })
-
-  it('resolves mode callbacks for light', () => {
-    const cb = themeModeCallback('lightColor', 'darkColor')
-    const result: any = getThemeByMode({ color: cb }, 'light')
-    expect(result.color).toBe('lightColor')
-  })
-
-  it('resolves mode callbacks for dark', () => {
-    const cb = themeModeCallback('lightColor', 'darkColor')
-    const result: any = getThemeByMode({ color: cb }, 'dark')
-    expect(result.color).toBe('darkColor')
-  })
-
-  it('resolves nested mode callbacks', () => {
-    const cb = themeModeCallback('lightBg', 'darkBg')
-    const result: any = getThemeByMode({ nested: { bg: cb } }, 'light')
-    expect(result.nested.bg).toBe('lightBg')
-  })
-
-  it('handles mixed values and mode callbacks', () => {
-    const cb = themeModeCallback('#fff', '#000')
-    const result: any = getThemeByMode(
-      { bg: cb, fontSize: 16, nested: { color: 'static' } },
-      'dark',
-    )
-    expect(result.bg).toBe('#000')
-    expect(result.fontSize).toBe(16)
-    expect(result.nested.color).toBe('static')
-  })
-})

package/src/cache/LocalThemeManager.ts

@@ -1,14 +0,0 @@
-/**
- * WeakMap-based multi-tier cache for computed theme objects.
- * Maintains separate caches for base themes, dimension themes,
- * and their light/dark mode variants to avoid recalculation on re-renders.
- */
-export default class ThemeManager {
-  baseTheme = new WeakMap()
-
-  dimensionsThemes = new WeakMap()
-
-  modeBaseTheme = { light: new WeakMap(), dark: new WeakMap() }
-
-  modeDimensionTheme = { light: new WeakMap(), dark: new WeakMap() }
-}

package/src/cache/index.ts

@@ -1,3 +0,0 @@
-import LocalThemeManager from './LocalThemeManager'
-
-export { LocalThemeManager }

package/src/constants/booleanTags.ts

@@ -1,32 +0,0 @@
-/**
- * List of standard HTML boolean attributes. Used to identify props
- * that are valid boolean DOM attributes and should not be filtered
- * out as unknown styling props.
- */
-export default [
-  'allowFullScreen',
-  'allowPaymentRequest',
-  'async',
-  'autoFocus',
-  'autoPlay',
-  'checked',
-  'controls',
-  'default',
-  'defer',
-  'disabled',
-  'formNoValidate',
-  'hidden',
-  'isMap',
-  'itemScope',
-  'loop',
-  'multiple',
-  'muted',
-  'noModule',
-  'noValidate',
-  'open',
-  'readOnly',
-  'required',
-  'reversed',
-  'selected',
-  'typeMustMatch',
-]

package/src/constants/defaultDimensions.ts

@@ -1,23 +0,0 @@
-/**
- * Default dimension configuration for rocketstyle components.
- * Defines four built-in dimensions: `states`, `sizes`, `variants`,
- * and `multiple` (a multi-select dimension).
- */
-const DEFAULT_DIMENSIONS = {
-  states: 'state',
-  sizes: 'size',
-  variants: 'variant',
-  multiple: {
-    propName: 'multiple',
-    multi: true,
-  },
-  modifiers: {
-    propName: 'modifier',
-    multi: true,
-    transform: true,
-  },
-} as const
-
-export type DefaultDimensions = typeof DEFAULT_DIMENSIONS
-
-export default DEFAULT_DIMENSIONS

package/src/constants/index.ts

@@ -1,59 +0,0 @@
-// `import.meta.env.DEV` is provided by Vite/Rolldown at build time and
-// literal-replaced so prod bundles tree-shake the dev branch to zero bytes.
-// Typed through a narrowing interface so downstream packages don't need
-// `vite/client` in their tsconfigs to type-check this file transitively.
-/** Tree-shakeable dev-mode flag. `true` in dev, `false` (dead code eliminated) in prod. */
-export const __DEV__: boolean = process.env.NODE_ENV !== 'production'
-
-/** Default theme mode used when no mode is provided via context. */
-export const MODE_DEFAULT = 'light'
-
-/** Pseudo-state interaction keys tracked for styling (hover, active, focus, pressed). */
-export const PSEUDO_KEYS = ['hover', 'active', 'focus', 'pressed'] as const
-
-/** Meta pseudo-state keys representing non-interactive states (disabled, readOnly). */
-export const PSEUDO_META_KEYS = ['disabled', 'readOnly'] as const
-
-/**
- * Pre-merged interaction + meta keys. Hoisted from `rocketstyle.ts`'s
- * `rocketComponent` definition scope to module scope so the merged
- * 6-element array is allocated ONCE per process, not once per
- * rocketstyle definition. Ported from vitus-labs `00fdadc2`.
- */
-export const PSEUDO_AND_META_KEYS = [...PSEUDO_KEYS, ...PSEUDO_META_KEYS] as const
-
-/** Supported theme mode flags. */
-export const THEME_MODES = {
-  light: true,
-  dark: true,
-} as const
-
-/** Maps each theme mode to its inverse (light -> dark, dark -> light). */
-export const THEME_MODES_INVERSED = {
-  dark: 'light',
-  light: 'dark',
-} as const
-
-/** Reserved configuration keys accepted by the `.config()` chaining method. */
-export const CONFIG_KEYS = [
-  'provider',
-  'consumer',
-  'DEBUG',
-  'name',
-  'component',
-  'inversed',
-  'passProps',
-  'styled',
-] as const
-
-/** Keys for theme and styles chaining methods. */
-export const STYLING_KEYS = ['theme', 'styles'] as const
-export const STATIC_KEYS = [...STYLING_KEYS, 'compose'] as const
-
-/** Union of all reserved keys that cannot be used as dimension names. */
-export const ALL_RESERVED_KEYS = [
-  ...Object.keys(THEME_MODES),
-  ...CONFIG_KEYS,
-  ...STATIC_KEYS,
-  'attrs',
-] as const

package/src/context/context.ts

@@ -1,70 +0,0 @@
-import type { VNodeChild } from '@pyreon/core'
-import { nativeCompat, useContext } from '@pyreon/core'
-import { Provider as CoreProvider, context } from '@pyreon/ui-core'
-import { MODE_DEFAULT, THEME_MODES_INVERSED } from '../constants'
-
-// Both `rootSize` and `breakpoints` are OPTIONAL — the rest of the chain
-// handles their absence: `enrichTheme` defaults rootSize to 16,
-// `makeItResponsive` short-circuits to plain CSS when breakpoints are
-// empty, and `value()` defaults rootSize to 16 internally. Marking
-// either as required here over-constrained user themes downstream
-// (e.g. a minimal `{ colors: { primary: '#228be6' } }` theme passed
-// to the public Provider was a TS error even though it works at runtime).
-//
-// Shape matches `@pyreon/unistyle` `PyreonTheme` and the downstream
-// `@pyreon/ui-core` Provider's `Partial<...>`-wrapped theme — `?:` with
-// no explicit `| undefined` so the downstream Partial composition holds
-// under `exactOptionalPropertyTypes: true`.
-type Theme = {
-  rootSize?: number
-  breakpoints?: Record<string, number>
-} & Record<string, unknown>
-
-export type TProvider = {
-  children: VNodeChild
-  theme?: Theme | undefined
-  mode?: 'light' | 'dark' | undefined
-  inversed?: boolean | undefined
-  provider?: ((props: Record<string, unknown>) => VNodeChild) | undefined
-}
-
-/**
- * Top-level theme and mode provider for rocketstyle components.
- * Reads the parent context, merges incoming props, and resolves
- * the active mode (with optional inversion for nested dark/light switching).
- *
- * In Pyreon, context is provided via provide() instead of React.Provider.
- */
-const Provider = ({ provider = CoreProvider, inversed, ...props }: TProvider): VNodeChild => {
-  const getCtx = useContext(context)
-  const ctx = getCtx()
-
-  const merged = { ...ctx, ...props, provider } as unknown as TProvider & Record<string, unknown>
-  const { theme, mode, provider: RocketstyleProvider, children } = merged
-
-  let newMode = MODE_DEFAULT
-
-  if (mode) {
-    newMode = inversed ? THEME_MODES_INVERSED[mode] : mode
-  }
-
-  const FinalProvider = RocketstyleProvider ?? CoreProvider
-  const result = FinalProvider({
-    mode: newMode,
-    isDark: newMode === 'dark',
-    isLight: newMode === 'light',
-    ...(theme !== undefined ? { theme } : {}),
-    provider,
-    children,
-  })
-
-  return result ?? null
-}
-
-// Mark as native — reads useContext() and delegates to CoreProvider, both
-// of which need Pyreon's setup frame.
-nativeCompat(Provider)
-
-export { context }
-
-export default Provider