@pyreon/rocketstyle 0.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025-present Vit Bokisch
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,351 @@
+# @pyreon/rocketstyle
+
+Multi-dimensional styling system for Pyreon.
+
+Organize component styles by dimensions — states, sizes, variants — instead of flat props. Chain theme values, attach CSS via `@pyreon/styler`, and get full TypeScript inference. Built-in pseudo-state handling, light/dark mode, and provider/consumer patterns for parent-child state propagation.
+
+## Features
+
+- **Dimension-based theming** — define style variations as named dimensions (states, sizes, variants)
+- **Immutable chaining** — `.attrs()`, `.theme()`, `.states()`, `.sizes()`, `.styles()` and more
+- **Boolean shorthand** — `Button({ primary: true, lg: true })` instead of `Button({ state: 'primary', size: 'lg' })`
+- **Pseudo-state detection** — hover, focus, pressed tracked via signals and context
+- **Light/dark mode** — theme callbacks receive a mode parameter
+- **Provider/Consumer** — propagate parent state to children through context
+- **WeakMap caching** — computed themes cached per component instance
+- **TypeScript inference** — dimension values and prop types inferred through the chain
+
+## Installation
+
+```bash
+bun add @pyreon/rocketstyle
+```
+
+## Quick Start
+
+```ts
+import rocketstyle from '@pyreon/rocketstyle'
+import { Element } from '@pyreon/elements'
+
+const Button = rocketstyle()({
+  name: 'Button',
+  component: Element,
+})
+  .attrs({ tag: 'button' })
+  .theme({
+    fontSize: 16,
+    paddingX: 16,
+    paddingY: 8,
+    borderRadius: 4,
+    color: '#fff',
+    backgroundColor: '#0d6efd',
+    hover: {
+      backgroundColor: '#0b5ed7',
+    },
+  })
+  .states({
+    primary: {
+      backgroundColor: '#0d6efd',
+      hover: { backgroundColor: '#0b5ed7' },
+    },
+    danger: {
+      backgroundColor: '#dc3545',
+      hover: { backgroundColor: '#bb2d3b' },
+    },
+    success: {
+      backgroundColor: '#198754',
+      hover: { backgroundColor: '#157347' },
+    },
+  })
+  .sizes({
+    sm: { fontSize: 14, paddingX: 12, paddingY: 6 },
+    md: { fontSize: 16, paddingX: 16, paddingY: 8 },
+    lg: { fontSize: 18, paddingX: 20, paddingY: 10 },
+  })
+```
+
+```ts
+// Named props
+Button({ state: 'danger', size: 'lg', label: 'Delete' })
+
+// Boolean shorthand (when useBooleans is enabled)
+Button({ danger: true, lg: true, label: 'Delete' })
+```
+
+## Core Concepts
+
+### Dimensions
+
+A dimension is a named axis of style variation. The factory ships with four defaults:
+
+| Dimension | Prop name | Multi | Example |
+| --------- | --------- | ----- | ------- |
+| `states` | `state` | no | `primary`, `danger`, `success` |
+| `sizes` | `size` | no | `sm`, `md`, `lg` |
+| `variants` | `variant` | no | `outlined`, `filled` |
+| `multiple` | — | yes | `rounded`, `shadow` |
+
+Each dimension creates a chain method (`.states()`, `.sizes()`, etc.) and a corresponding prop on the component.
+
+**Multi dimensions** allow multiple values at once: `Button({ rounded: true, shadow: true })`.
+
+### Theme Object
+
+The `.theme()` method defines base CSS property values. Values are processed by `@pyreon/unistyle` — numbers convert to rem, shorthand properties expand automatically.
+
+Pseudo-state keys nest directly in the theme object:
+
+```ts
+.theme({
+  color: '#333',
+  fontSize: 16,
+  hover: { color: '#000' },
+  focus: { outline: '2px solid blue' },
+  active: { transform: 'scale(0.98)' },
+})
+```
+
+### Styles Function
+
+The `.styles()` method defines the CSS template that receives the computed theme:
+
+```ts
+.styles((css) => css`
+  ${({ $rocketstyle, $rocketstate }) => {
+    // $rocketstyle — computed theme values (base + active dimension values merged)
+    // $rocketstate — { hover, focus, pressed, active, disabled, pseudo }
+    return css`...`
+  }}
+`)
+```
+
+## API
+
+### rocketstyle(options?)
+
+Factory initializer. Returns a function that accepts component configuration.
+
+```ts
+const factory = rocketstyle({
+  dimensions: { /* custom dimensions */ },
+  useBooleans: true,
+})
+
+const Component = factory({
+  name: 'ComponentName',
+  component: BaseComponent,
+})
+```
+
+### .attrs(props | callback, options?)
+
+Same API as `@pyreon/attrs`. Define default props with optional priority and filter.
+
+```ts
+Button.attrs({ tag: 'button', role: 'button' })
+Button.attrs((props) => ({ 'aria-label': props.label }))
+```
+
+### .theme(values | callback)
+
+Base theme values applied to every instance.
+
+```ts
+// Object form
+Button.theme({
+  fontSize: 16,
+  color: '#fff',
+  hover: { opacity: 0.9 },
+})
+
+// Callback form — receives the theme context and mode
+Button.theme((theme, mode, css) => ({
+  fontSize: 16,
+  color: mode === 'dark' ? '#fff' : '#333',
+}))
+```
+
+### .states() / .sizes() / .variants() / .multiple()
+
+Define values for each dimension. Each key becomes a selectable option.
+
+```ts
+Button.states({
+  primary: { backgroundColor: '#0d6efd' },
+  danger: { backgroundColor: '#dc3545' },
+})
+
+Button.sizes({
+  sm: { fontSize: 14, paddingX: 8 },
+  lg: { fontSize: 18, paddingX: 20 },
+})
+
+// Multi dimension — multiple can be active at once
+Button.multiple({
+  rounded: { borderRadius: 999 },
+  shadow: { boxShadow: '0 2px 8px rgba(0,0,0,0.15)' },
+})
+```
+
+Dimension methods also accept callbacks:
+
+```ts
+Button.states((theme, mode, css) => ({
+  primary: { backgroundColor: theme.colors?.primary ?? '#0d6efd' },
+}))
+```
+
+### .styles(callback)
+
+Define the CSS template using `@pyreon/styler`'s `css` tagged template.
+
+```ts
+Button.styles((css) => css`
+  cursor: pointer;
+  border: none;
+  transition: all 0.2s;
+
+  ${({ $rocketstyle }) =>
+    makeItResponsive({ theme: $rocketstyle, styles, css })
+  }
+`)
+```
+
+### .config(options)
+
+Reconfigure the component.
+
+```ts
+Button.config({
+  name: 'PrimaryButton',    // change displayName
+  component: NewBase,        // swap base component
+  provider: true,            // make this component a context provider
+  consumer: (ctx) => ...,   // consume parent component context
+  inversed: true,            // invert theme mode
+  DEBUG: true,               // enable debug logging
+})
+```
+
+### .compose(hocs) / .statics(metadata)
+
+Same API as `@pyreon/attrs`:
+
+```ts
+Button.compose({ withTracking: trackingHoc })
+Button.statics({ category: 'action' })
+
+Button.meta.category // => 'action'
+```
+
+### isRocketComponent(value)
+
+Runtime type guard.
+
+```ts
+import { isRocketComponent } from '@pyreon/rocketstyle'
+
+isRocketComponent(Button) // => true
+```
+
+## Custom Dimensions
+
+Define your own dimensions by passing them to the factory:
+
+```ts
+const rocketButton = rocketstyle({
+  dimensions: {
+    intent: 'intent',                    // prop: intent="primary"
+    size: 'size',                        // prop: size="lg"
+    appearance: {
+      propName: 'appearance',
+      multi: true,                       // allows multiple values
+    },
+  },
+})
+```
+
+This creates `.intent()`, `.size()`, and `.appearance()` chain methods.
+
+## Transform Dimensions
+
+Mark a dimension as `transform: true` to make its values receive the accumulated theme from all prior dimensions. This is ideal for modifiers like `outlined` that derive styles from the active state:
+
+```ts
+const rocketButton = rocketstyle({
+  dimensions: {
+    states: 'state',
+    modifiers: { propName: 'modifier', multi: true, transform: true },
+  },
+})
+
+const Button = rocketButton({ name: 'Button', component: Element })
+  .theme({ backgroundColor: '#0d6efd', color: '#fff' })
+  .states({
+    danger: { backgroundColor: '#dc3545', color: '#fff' },
+  })
+  .modifiers({
+    outlined: (theme) => ({
+      color: theme.backgroundColor,
+      backgroundColor: 'transparent',
+    }),
+  })
+
+// outlined receives { backgroundColor: '#dc3545', color: '#fff' } from the danger state
+Button({ state: 'danger', modifier: 'outlined' })
+```
+
+## Provider / Consumer
+
+Propagate parent component state to children through Pyreon's context system.
+
+```ts
+// Parent provides its state
+const ButtonGroup = Button.config({ provider: true })
+
+// Child consumes parent state
+const ButtonIcon = rocketstyle()({
+  name: 'ButtonIcon',
+  component: Element,
+})
+  .config({
+    consumer: (ctx) => ctx(({ pseudo }) => ({
+      state: pseudo.hover ? 'active' : 'default',
+    })),
+  })
+  .states({
+    default: { color: '#666' },
+    active: { color: '#fff' },
+  })
+
+// Icon reacts to parent's hover state
+ButtonGroup({ state: 'primary', children: [
+  ButtonIcon({}),
+  'Label',
+]})
+```
+
+## Light / Dark Mode
+
+Theme callbacks receive a `mode` parameter:
+
+```ts
+Button.theme((theme, mode) => ({
+  color: mode === 'dark' ? '#fff' : '#1a1a1a',
+  backgroundColor: mode === 'dark' ? '#333' : '#fff',
+}))
+```
+
+Use `inversed: true` in `.config()` to flip the mode for a component subtree.
+
+## Peer Dependencies
+
+| Package | Version |
+| ------- | ------- |
+| @pyreon/core | * |
+| @pyreon/reactivity | * |
+| @pyreon/ui-core | * |
+| @pyreon/styler | * |
+
+## License
+
+MIT

package/lib/index.d.ts

@@ -0,0 +1,294 @@
+import { VNode, VNodeChild } from "@pyreon/core";
+import { config, context, render } from "@pyreon/ui-core";
+
+//#region src/context/context.d.ts
+type Theme$1 = {
+  rootSize: number;
+  breakpoints?: Record<string, number>;
+} & Record<string, unknown>;
+type TProvider = {
+  children: VNode | VNode[] | null;
+  theme?: Theme$1 | 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 pushContext/popContext instead of React.Provider.
+ */
+declare const Provider: ({
+  provider,
+  inversed,
+  ...props
+}: TProvider) => VNode | null;
+//#endregion
+//#region src/constants/defaultDimensions.d.ts
+/**
+ * Default dimension configuration for rocketstyle components.
+ * Defines four built-in dimensions: `states`, `sizes`, `variants`,
+ * and `multiple` (a multi-select dimension).
+ */
+declare const DEFAULT_DIMENSIONS: {
+  readonly states: "state";
+  readonly sizes: "size";
+  readonly variants: "variant";
+  readonly multiple: {
+    readonly propName: "multiple";
+    readonly multi: true;
+  };
+  readonly modifiers: {
+    readonly propName: "modifier";
+    readonly multi: true;
+    readonly transform: true;
+  };
+};
+type DefaultDimensions = typeof DEFAULT_DIMENSIONS;
+//#endregion
+//#region src/types/pseudo.d.ts
+type PseudoActions = {
+  onMouseEnter: (e: MouseEvent) => void;
+  onMouseLeave: (e: MouseEvent) => void;
+  onMouseDown: (e: MouseEvent) => void;
+  onMouseUp: (e: MouseEvent) => void;
+  onFocus: (e: FocusEvent) => void;
+  onBlur: (e: FocusEvent) => void;
+};
+type PseudoState = {
+  active: boolean;
+  hover: boolean;
+  focus: boolean;
+  pressed: boolean;
+  disabled: boolean;
+  readOnly: boolean;
+};
+type PseudoProps = Partial<PseudoState & PseudoActions>;
+//#endregion
+//#region src/types/utils.d.ts
+type TObj = Record<string, unknown>;
+type TFn = (...args: any) => any;
+type CallBackParam = TObj | TFn;
+/** In Pyreon, components are plain functions — no forwardRef needed. */
+type ComponentFn<P = any> = ((props: P) => VNode | null) & Partial<Record<string, any>>;
+type ElementType<T extends TObj | unknown = any> = ComponentFn<T>;
+type ValueOf<T> = T[keyof T];
+type ArrayOfValues<T> = T[keyof T][];
+type ArrayOfKeys<T> = Array<keyof T>;
+type IsFalseOrNullable<T> = T extends null | undefined | false ? never : true;
+type NullableKeys<T> = { [K in keyof T]: IsFalseOrNullable<T[K]> };
+type ReturnCbParam<P extends TFn | TObj> = P extends TFn ? ReturnType<P> : P;
+type Id<T> = T extends infer U ? { [K in keyof U]: U[K] } : never;
+type IsAny<T> = 0 extends 1 & T ? true : false;
+type ExtractNullableKeys<T> = { [P in keyof T as IsAny<T[P]> extends true ? P : [T[P]] extends [never] ? never : [T[P]] extends [null | undefined] ? never : P]: T[P] };
+type SpreadTwo<L, R> = Id<Pick<L, Exclude<keyof L, keyof R>> & R>;
+type Spread<A extends readonly [...any]> = A extends [infer L, ...infer R] ? SpreadTwo<L, Spread<R>> : unknown;
+type MergeTypes<A extends readonly [...any]> = ExtractNullableKeys<Spread<A>>;
+type ExtractProps<TComponentOrTProps> = TComponentOrTProps extends ComponentFn<infer TProps> ? TProps : TComponentOrTProps;
+//#endregion
+//#region src/types/styles.d.ts
+interface StylesDefault {}
+type Styles<S = unknown> = StylesDefault;
+type Css = typeof config.css;
+/**
+ * Props available inside `.styles()` interpolation functions.
+ *
+ * - `$rocketstyle` — computed theme (inferred from `.theme()` chain)
+ * - `$rocketstate` — active dimension values + pseudo state
+ */
+type RocketStyleInterpolationProps<CSS extends TObj = TObj> = {
+  $rocketstyle: CSS;
+  $rocketstate: Record<string, string | string[]> & {
+    pseudo: Partial<PseudoState>;
+  };
+} & Record<string, any>;
+/**
+ * A tagged-template css function whose interpolation functions
+ * receive typed props including `$rocketstyle` and `$rocketstate`.
+ */
+type RocketCss<CSS extends TObj = TObj> = (strings: TemplateStringsArray, ...values: Array<string | number | boolean | null | undefined | ((props: RocketStyleInterpolationProps<CSS>) => any) | any[]>) => any;
+type StylesCb<CSS extends TObj = TObj> = (css: RocketCss<CSS>) => ReturnType<Css>;
+type StylesCbArray = StylesCb[];
+//#endregion
+//#region src/constants/index.d.ts
+/** Supported theme mode flags. */
+declare const THEME_MODES: {
+  readonly light: true;
+  readonly dark: true;
+};
+//#endregion
+//#region src/types/theme.d.ts
+interface ThemeDefault {}
+type Theme<T> = T extends unknown ? ThemeDefault : MergeTypes<[ThemeDefault, T]>;
+type ThemeModeKeys = keyof typeof THEME_MODES;
+type ThemeModeCallback = <A = any, B = any>(light: A, dark: B) => (mode: "light" | "dark") => A | B;
+type ThemeMode = <A = any, B = any>(light: A, dark: B) => A | B;
+type ThemeCb<CSS, T> = (theme: T, mode: ThemeModeCallback, css: Css) => Partial<CSS>;
+//#endregion
+//#region src/types/dimensions.d.ts
+type ExtractNullableDimensionKeys<T> = { [P in keyof T as T[P] extends false ? never : P]: T[P] };
+type ExtractDimensionKey<T extends DimensionValue> = T extends DimensionValueObj ? T["propName"] : T;
+type ExtractDimensionMulti<T extends DimensionValue> = T extends DimensionValueObj ? true : false;
+type DimensionValuePrimitive = string;
+type DimensionValueObj = {
+  propName: string;
+  multi?: boolean; /** When true, this dimension is evaluated last and its values receive the accumulated theme as argument. */
+  transform?: boolean;
+};
+type DimensionValue = DimensionValuePrimitive | DimensionValueObj;
+type Dimensions = Record<string, DimensionValue>;
+type MultiKeys<T extends Dimensions = Dimensions> = Partial<Record<ExtractDimensionKey<T[keyof T]>, true>>;
+type DeepPartial<T> = { [K in keyof T]?: T[K] extends ((...args: any[]) => any) ? T[K] : NonNullable<T[K]> extends Record<string, any> ? DeepPartial<NonNullable<T[K]>> | Extract<T[K], null> : T[K] };
+type DimensionResult<CT, T = any> = Record<string, boolean | null | DeepPartial<CT> | ((theme: CT, appTheme: T, mode: ThemeModeCallback, css: Css) => DeepPartial<CT>)>;
+type DimensionObj<CT, T = any> = DimensionResult<CT, T>;
+type DimensionCb<T, CT> = (theme: T, mode: ThemeModeCallback, css: Css) => DimensionResult<CT, T>;
+type DimensionCallbackParam<T, CT> = DimensionObj<CT, T> | DimensionCb<T, CT>;
+type TDKP = Record<ExtractDimensionKey<Dimensions[keyof Dimensions]>, Record<string, boolean | never | Record<string, boolean>> | unknown>;
+type DimensionProps<K extends DimensionValue, D extends Dimensions, P extends CallBackParam, DKP extends TDKP> = { [I in ExtractDimensionKey<D[keyof D]>]: I extends ExtractDimensionKey<K> ? ExtractNullableDimensionKeys<Spread<[DKP[I], NullableKeys<ReturnCbParam<P>>]>> : DKP[I] };
+type DimensionTypesHelper<DKP extends TDKP> = { [I in keyof DKP]: keyof DKP[I] };
+type DimensionObjAttrs<D extends Dimensions, DKP extends TDKP> = { [I in keyof DKP]: ExtractDimensionMulti<D[I]> extends true ? Array<keyof DKP[I]> : keyof DKP[I] };
+type DimensionBooleanAttrs<DKP extends TDKP> = Partial<Record<ValueOf<DimensionTypesHelper<DKP>>, boolean>>;
+type ExtractDimensionProps<D extends Dimensions, DKP extends TDKP, UB extends boolean> = UB extends true ? Partial<ExtractNullableDimensionKeys<DimensionObjAttrs<D, DKP> & DimensionBooleanAttrs<DKP>>> : Partial<ExtractNullableDimensionKeys<DimensionObjAttrs<D, DKP>>>;
+type ExtractDimensions<D extends Dimensions, DKP extends TDKP> = ExtractNullableDimensionKeys<DimensionObjAttrs<D, DKP>>;
+//#endregion
+//#region src/types/config.d.ts
+type RocketComponentType = ElementType & {
+  IS_ROCKETSTYLE: true;
+  $$rocketstyle: Record<string, unknown>;
+};
+type RocketProviderState<T extends RocketComponentType | TObj | unknown = unknown> = T extends RocketComponentType ? Partial<T["$$rocketstyle"]> & {
+  pseudo: PseudoState;
+} : T;
+type ConsumerCtxCBValue<T extends RocketComponentType, D extends Dimensions, DKP extends TDKP> = (attrs: RocketProviderState<T>) => DKP extends TDKP ? Partial<ExtractDimensions<D, DKP> & {
+  pseudo: PseudoState;
+}> : TObj;
+type ConsumerCtxCb<D extends Dimensions, DKP extends TDKP = TDKP> = <T extends RocketComponentType>(attrs: ConsumerCtxCBValue<T, D, DKP>) => ReturnType<ConsumerCtxCBValue<T, D, DKP>>;
+type ConsumerCb<D extends Dimensions, DKP extends TDKP = TDKP> = (ctx: ConsumerCtxCb<D, DKP>) => ReturnType<ConsumerCtxCb<D, DKP>>;
+type ConfigAttrs<C extends ElementType | unknown, D extends Dimensions, DKP extends TDKP, UB extends boolean> = Partial<{
+  name: string;
+  component: C;
+  provider: boolean;
+  consumer: ConsumerCb<D, DKP>;
+  DEBUG: boolean;
+  inversed: boolean;
+  passProps: UB extends true ? keyof DimensionBooleanAttrs<DKP>[] : never;
+  styled: boolean;
+}>;
+//#endregion
+//#region src/types/configuration.d.ts
+type OptionFunc = (...arg: unknown[]) => Record<string, unknown>;
+type InitConfiguration<C, D> = {
+  name?: string | undefined;
+  component: C;
+  useBooleans: boolean;
+  dimensions: D;
+  dimensionKeys: ArrayOfKeys<D>;
+  dimensionValues: ArrayOfValues<D>;
+  multiKeys: MultiKeys;
+  transformKeys: Partial<Record<string, true>>;
+};
+type Configuration<C = ElementType | unknown, D extends Dimensions = Dimensions> = InitConfiguration<C, D> & {
+  provider?: boolean | undefined;
+  consumer?: ConsumerCb<D> | undefined;
+  DEBUG?: boolean | undefined;
+  inversed?: boolean | undefined;
+  passProps?: string[] | undefined;
+  styled?: boolean | undefined;
+  attrs: OptionFunc[];
+  priorityAttrs: OptionFunc[];
+  filterAttrs: string[];
+  theme: OptionFunc[];
+  styles: StylesCbArray;
+  compose: Record<string, TFn | null | undefined | false>;
+  statics: Record<string, any>;
+} & Record<string, any>;
+type DefaultProps = Partial<PseudoProps>;
+//#endregion
+//#region src/types/attrs.d.ts
+type AttrsCb<A, T> = (props: Partial<A>, theme: T, helpers: {
+  mode?: ThemeModeKeys;
+  isDark?: boolean;
+  isLight?: boolean;
+  createElement: typeof render;
+}) => Partial<A>;
+//#endregion
+//#region src/types/hoc.d.ts
+type GenericHoc = (component: ElementType) => ElementType;
+type ComposeParam = Record<string, GenericHoc | null | undefined | false>;
+//#endregion
+//#region src/types/rocketstyle.d.ts
+type RocketStyleComponent<OA extends TObj = TObj, EA extends TObj = TObj, T extends TObj = TObj, CSS extends TObj = TObj, S extends TObj = TObj, HOC extends TObj = TObj, D extends Dimensions = Dimensions, UB extends boolean = boolean, DKP extends TDKP = TDKP> = IRocketStyleComponent<OA, EA, T, CSS, S, HOC, D, UB, DKP> & { [I in keyof D]: <K extends DimensionValue = D[I], P extends DimensionCallbackParam<Theme<T>, Styles<CSS>> = DimensionCallbackParam<Theme<T>, Styles<CSS>>>(param: P) => P extends DimensionCallbackParam<Theme<T>, Styles<CSS>> ? RocketStyleComponent<OA, EA, T, CSS, S, HOC, D, UB, DimensionProps<K, D, P, DKP>> : RocketStyleComponent<OA, EA, T, CSS, S, HOC, D, UB, DKP> };
+/**
+ * @param OA   Origin component props params.
+ * @param EA   Extended prop types
+ * @param T    Theme passed via context.
+ * @param CSS  Custom theme accepted by styles.
+ * @param S    Defined statics
+ * @param D    Dimensions to be used for defining component states.
+ * @param UB   Use booleans value
+ * @param DKP  Dimensions key props.
+ * @param DFP  Calculated final component props
+ */
+interface IRocketStyleComponent<OA extends TObj = TObj, EA extends TObj = TObj, T extends TObj = TObj, CSS extends TObj = TObj, S extends TObj = TObj, HOC extends TObj = TObj, D extends Dimensions = Dimensions, UB extends boolean = boolean, DKP extends TDKP = TDKP, DFP = MergeTypes<[OA, EA, DefaultProps, ExtractDimensionProps<D, DKP, UB>]>> {
+  (props: DFP): VNode | null;
+  config: <NC extends ElementType | unknown = unknown>({
+    name,
+    component: NC,
+    provider,
+    consumer,
+    DEBUG,
+    inversed,
+    passProps
+  }: ConfigAttrs<NC, D, DKP, UB>) => NC extends ElementType ? RocketStyleComponent<ExtractProps<NC>, EA, T, CSS, S, HOC, D, UB, DKP> : RocketStyleComponent<OA, EA, T, CSS, S, HOC, D, UB, DKP>;
+  attrs: <P extends TObj | unknown = unknown>(param: P extends TObj ? Partial<MergeTypes<[DFP, P]>> | AttrsCb<MergeTypes<[DFP, P]>, Theme<T>> : Partial<DFP> | AttrsCb<DFP, Theme<T>>, config?: Partial<{
+    priority: boolean;
+    filter: P extends TObj ? Partial<keyof MergeTypes<[EA, P]>>[] : Partial<keyof EA>[];
+  }>) => P extends TObj ? RocketStyleComponent<OA, MergeTypes<[EA, P]>, T, CSS, S, HOC, D, UB, DKP> : RocketStyleComponent<OA, EA, T, CSS, S, HOC, D, UB, DKP>;
+  theme: <P extends TObj = TObj>(param: Partial<P> | Partial<Styles<CSS>> | ThemeCb<P, Theme<T>>) => RocketStyleComponent<OA, EA, T, MergeTypes<[CSS, P]>, S, HOC, D, UB, DKP>;
+  styles: (param: StylesCb<CSS>) => RocketStyleComponent<OA, EA, T, CSS, S, HOC, D, UB, DKP>;
+  compose: <P extends ComposeParam>(param: P) => P extends TObj ? RocketStyleComponent<OA, EA, T, CSS, S, MergeTypes<[HOC, P]>, D, UB, DKP> : RocketStyleComponent<OA, EA, T, CSS, S, HOC, D, UB, DKP>;
+  statics: <P extends TObj | unknown = unknown>(param: P) => P extends TObj ? RocketStyleComponent<OA, EA, T, CSS, MergeTypes<[S, P]>, HOC, D, UB, DKP> : RocketStyleComponent<OA, EA, T, CSS, S, HOC, D, UB, DKP>;
+  /** Access to all defined statics on the component. */
+  meta: S;
+  getStaticDimensions: (theme: TObj) => {
+    dimensions: DKP;
+    useBooleans: UB;
+    multiKeys: MultiKeys<D>;
+  };
+  getDefaultAttrs: (props: TObj, theme: TObj, mode: ThemeModeKeys) => TObj;
+  readonly $$rocketstyle: ExtractDimensions<D, DKP>;
+  readonly $$originTypes: OA;
+  readonly $$extendedTypes: EA;
+  readonly $$types: DFP;
+  IS_ROCKETSTYLE: true;
+  displayName: string;
+}
+//#endregion
+//#region src/types/rocketComponent.d.ts
+type RocketComponent<C extends ElementType = ElementType, T extends TObj = TObj, CSS extends TObj = TObj, D extends Dimensions = DefaultDimensions, UB extends boolean = boolean> = (props: Configuration<C, D>) => RocketStyleComponent<ExtractProps<C>, TObj, T, CSS, TObj, TObj, D, UB, Record<string, any>>;
+//#endregion
+//#region src/init.d.ts
+type Rocketstyle = <D extends Dimensions = DefaultDimensions, UB extends boolean = true>({
+  dimensions,
+  useBooleans
+}?: {
+  dimensions?: D;
+  useBooleans?: UB;
+}) => <C extends ElementType>({
+  name,
+  component
+}: {
+  name: string;
+  component: C;
+}) => ReturnType<RocketComponent<C, Record<string, unknown>, Record<string, unknown>, D, UB>>;
+declare const rocketstyle: Rocketstyle;
+//#endregion
+//#region src/isRocketComponent.d.ts
+type IsRocketComponent = <T>(component: T) => boolean;
+/** Runtime type guard — checks if a component was created by `rocketstyle()`. */
+declare const isRocketComponent: IsRocketComponent;
+//#endregion
+export { type AttrsCb, type ComponentFn, type ComposeParam, type ConfigAttrs, type ConsumerCb, type ConsumerCtxCBValue, type ConsumerCtxCb, type DefaultProps, type DimensionCallbackParam, type DimensionProps, type DimensionValue, type Dimensions, type ElementType, type ExtractDimensionProps, type ExtractDimensions, type ExtractProps, type GenericHoc, type IRocketStyleComponent, type IsRocketComponent, type MergeTypes, Provider, type RocketComponentType, type RocketProviderState, type RocketStyleComponent, type RocketStyleInterpolationProps, type Rocketstyle, type StylesCb, type StylesDefault, type TDKP, type TObj, type TProvider, type ThemeCb, type ThemeDefault, type ThemeMode, type ThemeModeCallback, type ThemeModeKeys, context, rocketstyle as default, rocketstyle, isRocketComponent };
+//# sourceMappingURL=index2.d.ts.map

package/lib/index.js

@@ -0,0 +1,657 @@
+import { createContext, onUnmount, popContext, pushContext, useContext } from "@pyreon/core";
+import { Provider as Provider$1, compose, config, context, get, hoistNonReactStatics, isEmpty, merge, omit, pick, render, set } from "@pyreon/ui-core";
+import { signal } from "@pyreon/reactivity";
+
+//#region src/constants/index.ts
+/** Default theme mode used when no mode is provided via context. */
+const MODE_DEFAULT = "light";
+/** Pseudo-state interaction keys tracked for styling (hover, active, focus, pressed). */
+const PSEUDO_KEYS = [
+	"hover",
+	"active",
+	"focus",
+	"pressed"
+];
+/** Meta pseudo-state keys representing non-interactive states (disabled, readOnly). */
+const PSEUDO_META_KEYS = ["disabled", "readOnly"];
+/** Supported theme mode flags. */
+const THEME_MODES = {
+	light: true,
+	dark: true
+};
+/** Maps each theme mode to its inverse (light -> dark, dark -> light). */
+const THEME_MODES_INVERSED = {
+	dark: "light",
+	light: "dark"
+};
+/** Reserved configuration keys accepted by the `.config()` chaining method. */
+const CONFIG_KEYS = [
+	"provider",
+	"consumer",
+	"DEBUG",
+	"name",
+	"component",
+	"inversed",
+	"passProps",
+	"styled"
+];
+/** Keys for theme and styles chaining methods. */
+const STYLING_KEYS = ["theme", "styles"];
+const STATIC_KEYS = [...STYLING_KEYS, "compose"];
+/** Union of all reserved keys that cannot be used as dimension names. */
+const ALL_RESERVED_KEYS = [
+	...Object.keys(THEME_MODES),
+	...CONFIG_KEYS,
+	...STATIC_KEYS,
+	"attrs"
+];
+
+//#endregion
+//#region src/context/context.ts
+/**
+* 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 pushContext/popContext instead of React.Provider.
+*/
+const Provider = ({ provider = Provider$1, inversed, ...props }) => {
+	const { theme, mode, provider: RocketstyleProvider, children } = {
+		...useContext(context),
+		...props,
+		provider
+	};
+	let newMode = MODE_DEFAULT;
+	if (mode) newMode = inversed ? THEME_MODES_INVERSED[mode] : mode;
+	return RocketstyleProvider({
+		mode: newMode,
+		isDark: newMode === "dark",
+		isLight: newMode === "light",
+		...theme !== void 0 ? { theme } : {},
+		provider,
+		children
+	}) ?? null;
+};
+
+//#endregion
+//#region src/constants/defaultDimensions.ts
+/**
+* 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
+	}
+};
+
+//#endregion
+//#region src/cache/LocalThemeManager.ts
+/**
+* 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.
+*/
+var ThemeManager = class {
+	baseTheme = /* @__PURE__ */ new WeakMap();
+	dimensionsThemes = /* @__PURE__ */ new WeakMap();
+	modeBaseTheme = {
+		light: /* @__PURE__ */ new WeakMap(),
+		dark: /* @__PURE__ */ new WeakMap()
+	};
+	modeDimensionTheme = {
+		light: /* @__PURE__ */ new WeakMap(),
+		dark: /* @__PURE__ */ new WeakMap()
+	};
+};
+
+//#endregion
+//#region src/context/localContext.ts
+/**
+* Local context for propagating pseudo-state (hover, focus, pressed)
+* and additional styling attributes from a parent provider component
+* to its rocketstyle children.
+*/
+const localContext = createContext({});
+const EMPTY_CTX = { pseudo: {} };
+const useLocalContext = (consumer) => {
+	const ctx = useContext(localContext);
+	if (!consumer) return EMPTY_CTX;
+	return {
+		pseudo: {},
+		...consumer((callback) => callback(ctx))
+	};
+};
+
+//#endregion
+//#region src/context/createLocalProvider.ts
+/**
+* Higher-order component that wraps a component with a LocalProvider,
+* detecting pseudo-states (hover, focus, pressed) via mouse/focus events
+* and broadcasting them through local context to child rocketstyle components.
+*
+* In Pyreon, context is provided via pushContext/popContext, and state is
+* managed with signals instead of useState.
+*/
+const createLocalProvider = (WrappedComponent) => {
+	const HOCComponent = ({ onMouseEnter, onMouseLeave, onMouseUp, onMouseDown, onFocus, onBlur, $rocketstate, ...props }) => {
+		const hover = signal(false);
+		const focus = signal(false);
+		const pressed = signal(false);
+		const pseudoState = () => ({
+			hover: hover(),
+			focus: focus(),
+			pressed: pressed()
+		});
+		const events = {
+			onMouseEnter: (e) => {
+				hover.set(true);
+				if (onMouseEnter) onMouseEnter(e);
+			},
+			onMouseLeave: (e) => {
+				hover.set(false);
+				pressed.set(false);
+				if (onMouseLeave) onMouseLeave(e);
+			},
+			onMouseDown: (e) => {
+				pressed.set(true);
+				if (onMouseDown) onMouseDown(e);
+			},
+			onMouseUp: (e) => {
+				pressed.set(false);
+				if (onMouseUp) onMouseUp(e);
+			},
+			onFocus: (e) => {
+				focus.set(true);
+				if (onFocus) onFocus(e);
+			},
+			onBlur: (e) => {
+				focus.set(false);
+				if (onBlur) onBlur(e);
+			}
+		};
+		const updatedState = {
+			...$rocketstate,
+			pseudo: {
+				...$rocketstate?.pseudo,
+				...pseudoState()
+			}
+		};
+		pushContext(new Map([[localContext.id, updatedState]]));
+		onUnmount(() => popContext());
+		return WrappedComponent({
+			...props,
+			...events,
+			$rocketstate: updatedState
+		});
+	};
+	return HOCComponent;
+};
+
+//#endregion
+//#region src/hooks/useTheme.ts
+/**
+* Retrieves the current theme object and resolved mode from context.
+* Supports mode inversion so nested components can flip between
+* light and dark without a new provider.
+*
+* In Pyreon, components run once — no useMemo needed.
+*/
+const useThemeAttrs = ({ inversed }) => {
+	const { theme = {}, mode: ctxMode = "light", isDark: ctxDark } = useContext(context) || {};
+	const mode = inversed ? THEME_MODES_INVERSED[ctxMode] : ctxMode;
+	const isDark = inversed ? !ctxDark : ctxDark;
+	return {
+		theme,
+		mode,
+		isDark,
+		isLight: !isDark
+	};
+};
+
+//#endregion
+//#region src/utils/attrs.ts
+const removeUndefinedProps = (props) => {
+	const result = {};
+	for (const key in props) if (props[key] !== void 0) result[key] = props[key];
+	return result;
+};
+/** Picks only the props whose keys exist in the dimension keywords lookup and have truthy values. */
+const pickStyledAttrs = (props, keywords) => {
+	const result = {};
+	for (const key of Object.keys(props)) if (keywords[key] && props[key]) result[key] = props[key];
+	return result;
+};
+const calculateChainOptions = (options) => (args) => {
+	if (!options || options.length === 0) return {};
+	return options.reduce((acc, item) => Object.assign(acc, item(...args)), {});
+};
+const calculateStylingAttrs = ({ useBooleans, multiKeys }) => ({ props, dimensions }) => {
+	const result = {};
+	Object.keys(dimensions).forEach((item) => {
+		const pickedProp = props[item];
+		const t = typeof pickedProp;
+		if (multiKeys?.[item] && Array.isArray(pickedProp)) result[item] = pickedProp;
+		else if (t === "string" || t === "number") result[item] = pickedProp;
+		else result[item] = void 0;
+	});
+	if (useBooleans) {
+		const propsKeys = Object.keys(props);
+		Object.entries(result).forEach(([key, value]) => {
+			const isMultiKey = multiKeys?.[key];
+			if (!value) {
+				let newDimensionValue;
+				const keywordSet = new Set(Object.keys(dimensions[key]));
+				if (isMultiKey) newDimensionValue = propsKeys.filter((propKey) => keywordSet.has(propKey));
+				else for (let i = propsKeys.length - 1; i >= 0; i--) {
+					const k = propsKeys[i];
+					if (keywordSet.has(k) && props[k]) {
+						newDimensionValue = k;
+						break;
+					}
+				}
+				result[key] = newDimensionValue;
+			}
+		});
+	}
+	return result;
+};
+
+//#endregion
+//#region src/hoc/rocketstyleAttrsHoc.ts
+/**
+* HOC that resolves the `.attrs()` chain before the inner component renders.
+* Evaluates both regular and priority attrs callbacks with the current theme
+* and mode, then merges the results with explicit props (priority attrs
+* are applied first, regular attrs can be overridden by direct props).
+*
+* In Pyreon, there is no forwardRef — ref flows as a normal prop.
+* Components are plain functions.
+*/
+const rocketStyleHOC = ({ inversed, attrs, priorityAttrs }) => {
+	const calculateAttrs = calculateChainOptions(attrs);
+	const calculatePriorityAttrs = calculateChainOptions(priorityAttrs);
+	const Enhanced = (WrappedComponent) => {
+		const HOCComponent = (props) => {
+			const { theme, mode, isDark, isLight } = useThemeAttrs({ inversed });
+			const callbackParams = [theme, {
+				render,
+				mode,
+				isDark,
+				isLight
+			}];
+			const filteredProps = removeUndefinedProps(props);
+			const prioritizedAttrs = calculatePriorityAttrs([filteredProps, ...callbackParams]);
+			const finalAttrs = calculateAttrs([{
+				...prioritizedAttrs,
+				...filteredProps
+			}, ...callbackParams]);
+			return WrappedComponent({
+				...prioritizedAttrs,
+				...finalAttrs,
+				...filteredProps
+			});
+		};
+		return HOCComponent;
+	};
+	return Enhanced;
+};
+
+//#endregion
+//#region src/utils/chaining.ts
+const chainOptions = (opts, defaultOpts = []) => {
+	const result = [...defaultOpts];
+	if (typeof opts === "function") result.push(opts);
+	else if (typeof opts === "object") result.push(() => opts);
+	return result;
+};
+const chainOrOptions = (keys, opts, defaultOpts) => keys.reduce((acc, item) => ({
+	...acc,
+	[item]: opts[item] || defaultOpts[item]
+}), {});
+const chainReservedKeyOptions = (keys, opts, defaultOpts) => keys.reduce((acc, item) => ({
+	...acc,
+	[item]: chainOptions(opts[item], defaultOpts[item] ?? [])
+}), {});
+
+//#endregion
+//#region src/utils/compose.ts
+const calculateHocsFuncs = (options = {}) => Object.values(options).filter((item) => typeof item === "function").reverse();
+
+//#endregion
+//#region src/utils/dimensions.ts
+const isValidKey = (value) => value !== void 0 && value !== null && value !== false;
+const isMultiKey = (value) => {
+	if (typeof value === "object" && value !== null) return [true, get(value, "propName")];
+	return [false, value];
+};
+const getDimensionsMap = ({ themes, useBooleans }) => {
+	const result = {
+		keysMap: {},
+		keywords: {}
+	};
+	if (isEmpty(themes)) return result;
+	return Object.entries(themes).reduce((accumulator, [key, value]) => {
+		const { keysMap, keywords } = accumulator;
+		keywords[key] = true;
+		Object.entries(value).forEach(([itemKey, itemValue]) => {
+			if (!isValidKey(itemValue)) return;
+			if (useBooleans) keywords[itemKey] = true;
+			set(keysMap, [key, itemKey], true);
+		});
+		return accumulator;
+	}, result);
+};
+const getKeys = (obj) => Object.keys(obj);
+const getValues = ((obj) => Object.values(obj));
+const getDimensionsValues = ((obj) => getValues(obj).map((item) => {
+	if (typeof item === "object") return item.propName;
+	return item;
+}));
+const getMultipleDimensions = (obj) => getValues(obj).reduce((accumulator, value) => {
+	if (typeof value === "object") {
+		if (value.multi === true) accumulator[value.propName] = true;
+	}
+	return accumulator;
+}, {});
+const getTransformDimensions = (obj) => getValues(obj).reduce((accumulator, value) => {
+	if (typeof value === "object") {
+		if (value.transform === true) accumulator[value.propName] = true;
+	}
+	return accumulator;
+}, {});
+
+//#endregion
+//#region src/utils/statics.ts
+const createStaticsChainingEnhancers = ({ context, dimensionKeys, func, options }) => {
+	[...dimensionKeys, ...STATIC_KEYS].forEach((item) => {
+		context[item] = (props) => func(options, { [item]: props });
+	});
+};
+const createStaticsEnhancers = ({ context, options }) => {
+	if (!isEmpty(options)) Object.assign(context, options);
+};
+
+//#endregion
+//#region src/utils/styles.ts
+const calculateStyles = (styles) => {
+	if (!styles) return [];
+	return styles.map((item) => item(config.css));
+};
+
+//#endregion
+//#region src/utils/collection.ts
+const removeNullableValues = (obj) => Object.entries(obj).filter(([, v]) => v != null && v !== false).reduce((acc, [k, v]) => ({
+	...acc,
+	[k]: v
+}), {});
+
+//#endregion
+//#region src/utils/theme.ts
+const MODE_CALLBACK_BRAND = Symbol.for("pyreon.themeModeCallback");
+/** Creates a mode-switching function that returns the light or dark value based on the active mode. */
+const themeModeCallback = (light, dark) => {
+	const fn = (mode) => {
+		if (!mode || mode === "light") return light;
+		return dark;
+	};
+	fn.__brand = MODE_CALLBACK_BRAND;
+	return fn;
+};
+const isModeCallback = (value) => typeof value === "function" && value.__brand === MODE_CALLBACK_BRAND;
+const getThemeFromChain = (options, theme) => {
+	const result = {};
+	if (!options || isEmpty(options)) return result;
+	return options.reduce((acc, item) => merge(acc, item(theme, themeModeCallback, config.css)), result);
+};
+const getDimensionThemes = (theme, options) => {
+	const result = {};
+	if (isEmpty(options.dimensions)) return result;
+	return Object.entries(options.dimensions).reduce((acc, [key, value]) => {
+		const [, dimension] = isMultiKey(value);
+		const helper = options[key];
+		if (Array.isArray(helper) && helper.length > 0) acc[dimension] = removeNullableValues(getThemeFromChain(helper, theme));
+		return acc;
+	}, result);
+};
+const getTheme = ({ rocketstate, themes, baseTheme, transformKeys, appTheme }) => {
+	let finalTheme = { ...baseTheme };
+	const deferredTransforms = [];
+	Object.entries(rocketstate).forEach(([key, value]) => {
+		const keyTheme = themes[key] ?? {};
+		const isTransform = transformKeys?.[key];
+		const mergeValue = (item) => {
+			const val = keyTheme[item];
+			if (isTransform && typeof val === "function") deferredTransforms.push(val);
+			else finalTheme = merge({}, finalTheme, val);
+		};
+		if (Array.isArray(value)) value.forEach(mergeValue);
+		else mergeValue(value);
+	});
+	for (const transform of deferredTransforms) finalTheme = merge({}, finalTheme, transform(finalTheme, appTheme ?? {}, themeModeCallback, config.css));
+	return finalTheme;
+};
+const getThemeByMode = (object, mode) => Object.keys(object).reduce((acc, key) => {
+	const value = object[key];
+	if (typeof value === "object" && value !== null) acc[key] = getThemeByMode(value, mode);
+	else if (isModeCallback(value)) acc[key] = value(mode);
+	else acc[key] = value;
+	return acc;
+}, {});
+
+//#endregion
+//#region src/rocketstyle.ts
+/** Clones the current configuration and merges new options, returning a fresh rocketComponent. */
+const cloneAndEnhance = (defaultOpts, opts) => rocketComponent({
+	...defaultOpts,
+	attrs: chainOptions(opts.attrs, defaultOpts.attrs),
+	filterAttrs: [...defaultOpts.filterAttrs ?? [], ...opts.filterAttrs ?? []],
+	priorityAttrs: chainOptions(opts.priorityAttrs, defaultOpts.priorityAttrs),
+	statics: {
+		...defaultOpts.statics,
+		...opts.statics
+	},
+	compose: {
+		...defaultOpts.compose,
+		...opts.compose
+	},
+	...chainOrOptions(CONFIG_KEYS, opts, defaultOpts),
+	...chainReservedKeyOptions([...defaultOpts.dimensionKeys, ...STYLING_KEYS], opts, defaultOpts)
+});
+const rocketComponent = (options) => {
+	const { component, styles } = options;
+	const { styled } = config;
+	const _calculateStylingAttrs = calculateStylingAttrs({
+		multiKeys: options.multiKeys,
+		useBooleans: options.useBooleans
+	});
+	const componentName = options.name ?? options.component.displayName ?? options.component.name;
+	const STYLED_COMPONENT = component.IS_ROCKETSTYLE ?? options.styled !== true ? component : styled(component, { boost: true })`
+          ${calculateStyles(styles)};
+        `;
+	const RenderComponent = options.provider ? createLocalProvider(STYLED_COMPONENT) : STYLED_COMPONENT;
+	const ThemeManager$1 = new ThemeManager();
+	const hocsFuncs = [rocketStyleHOC(options), ...calculateHocsFuncs(options.compose)];
+	const EnhancedComponent = (props) => {
+		const localCtx = useLocalContext(options.consumer);
+		const { theme, mode } = useThemeAttrs(options);
+		const baseThemeHelper = ThemeManager$1.baseTheme;
+		if (!baseThemeHelper.has(theme)) baseThemeHelper.set(theme, getThemeFromChain(options.theme, theme));
+		const baseTheme = baseThemeHelper.get(theme);
+		const dimHelper = ThemeManager$1.dimensionsThemes;
+		if (!dimHelper.has(theme)) dimHelper.set(theme, getDimensionThemes(theme, options));
+		const themes = dimHelper.get(theme);
+		const modeBaseHelper = ThemeManager$1.modeBaseTheme[mode];
+		if (!modeBaseHelper.has(baseTheme)) modeBaseHelper.set(baseTheme, getThemeByMode(baseTheme, mode));
+		const currentModeBaseTheme = modeBaseHelper.get(baseTheme);
+		const modeDimHelper = ThemeManager$1.modeDimensionTheme[mode];
+		if (!modeDimHelper.has(themes)) modeDimHelper.set(themes, getThemeByMode(themes, mode));
+		const currentModeThemes = modeDimHelper.get(themes);
+		const { keysMap: dimensions, keywords: reservedPropNames } = getDimensionsMap({
+			themes,
+			useBooleans: options.useBooleans
+		});
+		const RESERVED_STYLING_PROPS_KEYS = Object.keys(reservedPropNames);
+		const { pseudo, ...mergeProps } = {
+			...localCtx,
+			...props
+		};
+		const pseudoRocketstate = {
+			...pseudo,
+			...pick(props, [...PSEUDO_KEYS, ...PSEUDO_META_KEYS])
+		};
+		const rocketstate = _calculateStylingAttrs({
+			props: pickStyledAttrs(mergeProps, reservedPropNames),
+			dimensions
+		});
+		const finalRocketstate = {
+			...rocketstate,
+			pseudo: pseudoRocketstate
+		};
+		const computedRocketstyle = getTheme({
+			rocketstate,
+			themes: currentModeThemes,
+			baseTheme: currentModeBaseTheme,
+			transformKeys: options.transformKeys,
+			appTheme: theme
+		});
+		const finalProps = {
+			...omit(mergeProps, [
+				...RESERVED_STYLING_PROPS_KEYS,
+				...PSEUDO_KEYS,
+				...options.filterAttrs
+			]),
+			...options.passProps ? pick(mergeProps, options.passProps) : {},
+			ref: props.ref,
+			$rocketstyle: computedRocketstyle,
+			$rocketstate: finalRocketstate
+		};
+		if (process.env.NODE_ENV !== "production") {
+			finalProps["data-rocketstyle"] = componentName;
+			if (options.DEBUG) {
+				const debugPayload = {
+					component: componentName,
+					rocketstate: finalRocketstate,
+					rocketstyle: computedRocketstyle,
+					dimensions,
+					mode,
+					reservedPropNames: RESERVED_STYLING_PROPS_KEYS,
+					filteredAttrs: options.filterAttrs
+				};
+				console.debug(`[rocketstyle] ${componentName} render:`, debugPayload);
+			}
+		}
+		return RenderComponent(finalProps);
+	};
+	const FinalComponent = compose(...hocsFuncs)(EnhancedComponent);
+	FinalComponent.IS_ROCKETSTYLE = true;
+	FinalComponent.displayName = componentName;
+	hoistNonReactStatics(FinalComponent, options.component);
+	createStaticsChainingEnhancers({
+		context: FinalComponent,
+		dimensionKeys: options.dimensionKeys,
+		func: cloneAndEnhance,
+		options
+	});
+	FinalComponent.IS_ROCKETSTYLE = true;
+	FinalComponent.displayName = componentName;
+	FinalComponent.meta = {};
+	createStaticsEnhancers({
+		context: FinalComponent.meta,
+		options: options.statics
+	});
+	Object.assign(FinalComponent, {
+		attrs: (attrs, { priority, filter } = {}) => {
+			const result = {};
+			if (filter) result.filterAttrs = filter;
+			if (priority) {
+				result.priorityAttrs = attrs;
+				return cloneAndEnhance(options, result);
+			}
+			result.attrs = attrs;
+			return cloneAndEnhance(options, result);
+		},
+		config: (opts = {}) => {
+			return cloneAndEnhance(options, pick(opts, CONFIG_KEYS));
+		},
+		statics: (opts) => cloneAndEnhance(options, { statics: opts }),
+		getStaticDimensions: (theme) => {
+			const { keysMap, keywords } = getDimensionsMap({
+				themes: getDimensionThemes(theme, options),
+				useBooleans: options.useBooleans
+			});
+			return {
+				dimensions: keysMap,
+				keywords,
+				useBooleans: options.useBooleans,
+				multiKeys: options.multiKeys
+			};
+		},
+		getDefaultAttrs: (props, theme, mode) => calculateChainOptions(options.attrs)([
+			props,
+			theme,
+			{
+				render,
+				mode,
+				isDark: mode === "light",
+				isLight: mode === "dark"
+			}
+		])
+	});
+	return FinalComponent;
+};
+
+//#endregion
+//#region src/init.ts
+const validateInit = (name, component, dimensions) => {
+	const errors = {};
+	if (!component) errors.component = "Parameter `component` is missing in params!";
+	if (!name) errors.name = "Parameter `name` is missing in params!";
+	if (isEmpty(dimensions)) errors.dimensions = "Parameter `dimensions` is missing in params!";
+	else {
+		const definedDimensions = getKeys(dimensions);
+		if (ALL_RESERVED_KEYS.some((item) => definedDimensions.some((d) => d === item))) errors.invalidDimensions = `Some of your \`dimensions\` is invalid and uses reserved static keys which are
+          ${DEFAULT_DIMENSIONS.toString()}`;
+	}
+	if (!isEmpty(errors)) throw Error(JSON.stringify(errors));
+};
+const rocketstyle = ({ dimensions = DEFAULT_DIMENSIONS, useBooleans = true } = {}) => ({ name, component }) => {
+	if (process.env.NODE_ENV !== "production") validateInit(name, component, dimensions);
+	return rocketComponent({
+		name,
+		component,
+		useBooleans,
+		dimensions,
+		dimensionKeys: getKeys(dimensions),
+		dimensionValues: getDimensionsValues(dimensions),
+		multiKeys: getMultipleDimensions(dimensions),
+		transformKeys: getTransformDimensions(dimensions),
+		styled: true
+	});
+};
+
+//#endregion
+//#region src/isRocketComponent.ts
+/** Runtime type guard — checks if a component was created by `rocketstyle()`. */
+const isRocketComponent = (component) => {
+	if (component && (typeof component === "object" || typeof component === "function") && component !== null && Object.hasOwn(component, "IS_ROCKETSTYLE")) return true;
+	return false;
+};
+
+//#endregion
+//#region src/index.ts
+var src_default = rocketstyle;
+
+//#endregion
+export { Provider, context, src_default as default, isRocketComponent, rocketstyle };
+//# sourceMappingURL=index.js.map

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@pyreon/rocketstyle",
+  "version": "0.0.2",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    "source": "./src/index.ts",
+    "import": "./lib/index.js",
+    "types": "./lib/index.d.ts"
+  },
+  "types": "./lib/index.d.ts",
+  "main": "./lib/index.js",
+  "files": [
+    "lib",
+    "!lib/**/*.map",
+    "!lib/analysis",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">= 18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "prepublish": "bun run build",
+    "build": "bun run vl_rolldown_build",
+    "build:watch": "bun run vl_rolldown_build-watch",
+    "lint": "biome check src/",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "@pyreon/core": ">=0.3.0",
+    "@pyreon/reactivity": ">=0.3.0",
+    "@pyreon/ui-core": "^0.0.2",
+    "@pyreon/styler": "^0.0.2"
+  },
+  "devDependencies": {
+    "@vitus-labs/tools-rolldown": "^1.15.0",
+    "@vitus-labs/tools-typescript": "^1.15.0"
+  }
+}