@vorplex/solid 0.0.8 → 0.0.11

package/dist/components/for-in/for-in.component.d.ts

@@ -0,0 +1,6 @@
+import { type JSX } from 'solid-js';
+export interface ForInProps<TKey extends string, TValue> {
+    each: Record<TKey, TValue>;
+    children: (value: TValue, key: TKey) => JSX.Element;
+}
+export declare function ForIn<T extends string, TT>(props: ForInProps<T, TT>): JSX.Element;

package/dist/components/for-in/for-in.component.jsx

@@ -0,0 +1,4 @@
+import { For } from 'solid-js';
+export function ForIn(props) {
+    return (<For each={Object.entries(props.each)}>{([key, value]) => props.children(value, key)}</For>);
+}

package/dist/components/icon/icons.component.d.ts

@@ -0,0 +1,140 @@
+import type { JSX } from 'solid-js';
+export type IconPack = {
+    Key: string;
+    Cube: string;
+    FileLines: string;
+    Download: string;
+    List: string;
+    MagnifyingGlassMinus: string;
+    MagnifyingGlassPlus: string;
+    Rocket: string;
+    RulerCombined: string;
+    Shapes: string;
+    Hand: string;
+    RightLeft: string;
+    Server: string;
+    Globe: string;
+    CalenderDays: string;
+    Error: string;
+    Warning: string;
+    AddressCard: string;
+    PuzzlePiece: string;
+    ObjectGroup: string;
+    Tv: string;
+    Code: string;
+    FileCode: string;
+    Cubes: string;
+    FolderPlus: string;
+    Foursquare: string;
+    LayerGroup: string;
+    OutlineCircleQuestion: string;
+    CircleQuestion: string;
+    CubesStacked: string;
+    Message: string;
+    CloudArrowUp: string;
+    ArrowUpRightFromSquare: string;
+    PenToSquare: string;
+    Sliders: string;
+    PaintBrush: string;
+    BarsStaggered: string;
+    FolderTree: string;
+    Star: string;
+    StarOutline: string;
+    CartPlus: string;
+    Equals: string;
+    Clock: string;
+    ListCheck: string;
+    Eye: string;
+    EyeSlash: string;
+    Comment: string;
+    ICursor: string;
+    SquareCaretDown: string;
+    SquareCaretUp: string;
+    Link: string;
+    LinkSlash: string;
+    SquarePen: string;
+    Clone: string;
+    Copy: string;
+    CodeBranch: string;
+    Stopwatch: string;
+    PlusCircle: string;
+    MinusCircle: string;
+    ClipboardList: string;
+    Expand: string;
+    Swatchbook: string;
+    Gears: string;
+    Computer: string;
+    HouseLaptop: string;
+    Desktop: string;
+    MagnifyingGlass: string;
+    ClipboardQuestion: string;
+    Pause: string;
+    CircleNodes: string;
+    FileCirclePlus: string;
+    ArrowRight: string;
+    ArrowRightToBracket: string;
+    PaperPlane: string;
+    Box: string;
+    Database: string;
+    Diagram: string;
+    Screen: string;
+    Move: string;
+    Circle: string;
+    OutlineCircle: string;
+    Check: string;
+    CheckCircle: string;
+    OutlineCheckCircle: string;
+    CheckSquare: string;
+    TimesCircle: string;
+    TimesSquare: string;
+    CaretDown: string;
+    ChevronDown: string;
+    ChevronRight: string;
+    ChevronUp: string;
+    CaretUp: string;
+    CaretRight: string;
+    Flag: string;
+    Trash: string;
+    Plus: string;
+    Spinner: string;
+    Folder: string;
+    File: string;
+    Times: string;
+    Minus: string;
+    MinusSquare: string;
+    Square: string;
+    Rectangle: string;
+    Refresh: string;
+    Info: string;
+    Bolt: string;
+    User: string;
+    Gear: string;
+    Stack: string;
+    Network: string;
+    Ellipsis: string;
+    History: string;
+    Boxes: string;
+    Bell: string;
+    Play: string;
+    Reset: string;
+    Test: string;
+    SignIn: string;
+    Home: string;
+    Settings: string;
+    Account: string;
+    Cursor: string;
+    Mouse: string;
+    Resize: string;
+    Terminal: string;
+    Font: string;
+    Button: string;
+    None: string;
+};
+export declare const IconPacks: {
+    FontAwesome: IconPack;
+};
+export declare const ActiveIconPack: IconPack;
+export declare function Icon(props: {
+    icon: keyof IconPack;
+    class?: string;
+} & JSX.HTMLAttributes<HTMLDivElement>): JSX.Element;

package/dist/components/icon/icons.component.jsx

@@ -0,0 +1,159 @@
+import { classNames } from '@vorplex/web';
+import { createStyle } from '../../functions/create-style.function';
+if (!document.querySelector('link[data-fontawesome-icons]')) {
+    const link = document.createElement('link');
+    link.setAttribute('data-fontawesome-icons', '');
+    link.href = 'https://unpkg.com/@fortawesome/fontawesome-free@6.1.1/css/all.min.css';
+    link.rel = 'stylesheet';
+    document.head.append(link);
+}
+export const IconPacks = {
+    // https://fontawesome.com/search?ic=free&o=r
+    FontAwesome: {
+        None: '',
+        Key: 'fas fa-fw fa-key',
+        Cube: 'fas fa-fw fa-cube',
+        FileLines: 'fas fa-fw fa-file-lines',
+        Download: 'fas fa-fw fa-download',
+        List: 'fas fa-fw fa-list',
+        MagnifyingGlassMinus: 'fas fa-fw fa-magnifying-glass-minus',
+        MagnifyingGlassPlus: 'fas fa-fw fa-magnifying-glass-plus',
+        Rocket: 'fas fa-fw fa-rocket',
+        RulerCombined: 'fas fa-fw fa-ruler-combined',
+        Shapes: 'fas fa-fw fa-shapes',
+        Hand: 'fas fa-fw fa-hand',
+        RightLeft: 'fas fa-fw fa-right-left',
+        Server: 'fas fa-fw fa-server',
+        Globe: 'fas fa-fw fa-globe',
+        CalenderDays: 'fas fa-fw fa-calendar-days',
+        Error: 'fas fa-fw fa-circle-exclamation',
+        Warning: 'fas fa-fw fa-triangle-exclamation',
+        AddressCard: 'fas fa-fw fa-address-card',
+        PuzzlePiece: 'fas fa-fw fa-puzzle-piece',
+        ObjectGroup: 'fas fa-fw fa-object-group',
+        Code: 'fas fa-fw fa-code',
+        FileCode: 'fas fa-fw fa-file-code',
+        Tv: 'fas fa-fw fa-tv',
+        Cubes: 'fas fa-fw fa-cube',
+        FolderPlus: 'fas fa-folder-plus',
+        Foursquare: 'fa-brands fa-foursquare',
+        LayerGroup: 'fas fa-layer-group',
+        OutlineCircleQuestion: 'fa-regular fa-circle-question',
+        CircleQuestion: 'fas fa-circle-question',
+        CubesStacked: 'fas fa-cubes-stacked',
+        Message: 'fas fa-message',
+        CloudArrowUp: 'fas fa-cloud-arrow-up',
+        ArrowUpRightFromSquare: 'fas fa-arrow-up-right-from-square',
+        PenToSquare: 'fas fa-pen-to-square',
+        Sliders: 'fas fa-sliders',
+        PaintBrush: 'fas fa-paint-brush',
+        BarsStaggered: 'fas fa-bars-staggered',
+        FolderTree: 'fas fa-folder-tree',
+        Star: 'fa-fw fas fa-star',
+        StarOutline: 'fa-fw far fa-star',
+        CartPlus: 'fa-fw fas fa-cart-plus',
+        Equals: 'fa-fw fas fa-equals',
+        Clock: 'fa-fw fas fa-clock',
+        ListCheck: 'fa-fw fas fa-list-check',
+        Eye: 'fa-fw fas fa-eye',
+        EyeSlash: 'fa-fw fas fa-eye-slash',
+        Comment: 'fa-fw fas fa-comment',
+        ICursor: 'fa-fw fas fa-i-cursor',
+        SquareCaretDown: 'fa-fw fas fa-square-caret-down',
+        SquareCaretUp: 'fa-fw fas fa-square-caret-up',
+        Link: 'fa-fw fas fa-link',
+        LinkSlash: 'fa-fw fas fa-link-slash',
+        SquarePen: 'fa-fw fas fa-square-pen',
+        Clone: 'fa-fw fas fa-clone',
+        Copy: 'fa-fw fas fa-copy',
+        CodeBranch: 'fa-fw fas fa-code-branch',
+        Stopwatch: 'fa-fw fas fa-stopwatch',
+        PlusCircle: 'fa-fw fas fa-plus-circle',
+        MinusCircle: 'fa-fw fas fa-minus-circle',
+        ClipboardList: 'fa-fw fas fa-clipboard-list',
+        Expand: 'fa-fw fas fa-expand',
+        Swatchbook: 'fa-fw fas fa-swatchbook',
+        Gears: 'fw-fw fas fa-gears',
+        Computer: 'fa-fw fas fa-computer',
+        HouseLaptop: 'fa-fw fas fa-house-laptop',
+        Desktop: 'fa-fw fas fa-desktop',
+        MagnifyingGlass: 'fa-fw fas fa-magnifying-glass',
+        ClipboardQuestion: 'fa-fw fas fa-clipboard-question',
+        Pause: 'fa-fw fas fa-pause',
+        CircleNodes: 'fa-fw fas fa-circle-nodes',
+        FileCirclePlus: 'fa-fw fas fa-file-circle-plus',
+        ArrowRight: 'fa-fw fas fa-arrow-right',
+        ArrowRightToBracket: 'fa-fw fas fa-arrow-right-to-bracket',
+        PaperPlane: 'fa-fw fas fa-paper-plane',
+        Box: 'fa-fw fas fa-archive',
+        Database: 'fa-fw fas fa-database',
+        Diagram: 'fa-fw fas fa-project-diagram',
+        Screen: 'fa-fw fas fa-desktop',
+        Move: 'fa-fw fas fa-arrows-alt',
+        Circle: 'fa-fw fas fa-circle',
+        OutlineCircle: 'fa-fw far fa-circle',
+        Check: 'fa-fw fas fa-check',
+        CheckCircle: 'fa-fw fas fa-check-circle',
+        OutlineCheckCircle: 'fa-fw fa-regular fa-check-circle',
+        CheckSquare: 'fa-fw fas fa-check-square',
+        TimesCircle: 'fa-fw fas fa-times-circle',
+        TimesSquare: 'fa-fw fas fa-square-xmark',
+        CaretDown: 'fa-fw fas fa-caret-down',
+        ChevronDown: 'fa-fw fas fa-chevron-down',
+        ChevronRight: 'fa-fw fas fa-chevron-right',
+        ChevronUp: 'fa-fw fas fa-chevron-up',
+        CaretUp: 'fa-fw fas fa-caret-up',
+        CaretRight: 'fa-fw fas fa-caret-right',
+        Flag: 'fa-fw fas fa-flag',
+        Trash: 'fa-fw fas fa-trash',
+        Plus: 'fa-fw fas fa-plus',
+        Spinner: 'fa-fw fas fa-circle-notch fa-spin',
+        Folder: 'fa-fw fas fa-folder',
+        File: 'fa-fw fas fa-file',
+        Times: 'fa-fw fas fa-times',
+        Minus: 'fa-fw fas fa-minus',
+        MinusSquare: 'fa-fw fas fa-square-minus',
+        Square: 'fa-fw far fa-square',
+        Rectangle: 'fa-fw far fa-square',
+        Refresh: 'fa-fw fas fa-sync',
+        Info: 'fa-fw fas fa-info-circle',
+        Bolt: 'fa-fw fas fa-bolt',
+        User: 'fa-fw fas fa-user',
+        Gear: 'fa-fw fas fa-cog',
+        Stack: 'fa-fw fas fa-layer-group',
+        Network: 'fa-fw fas fa-network-wired',
+        Ellipsis: 'fa-fw fas fa-ellipsis-h',
+        History: 'fa-fw fas fa-history',
+        Boxes: 'fa-fw fas fa-boxes',
+        Bell: 'fa-fw fas fa-bell',
+        Play: 'fa-fw fas fa-play',
+        Reset: 'fa-fw fas fa-eraser',
+        Test: 'fa-fw fas fa-flask',
+        SignIn: 'fa-fw fas fa-sign-in-alt',
+        Home: 'fa-fw fas fa-home',
+        Settings: 'fa-fw fas fa-cog',
+        Account: 'fa-fw fas fa-user-circle',
+        Cursor: 'fa-fw fas fa-mouse-pointer',
+        Mouse: 'fa-fw fas fa-mouse',
+        Resize: 'fa-fw fas fa-expand-arrows-alt',
+        Terminal: 'fa-fw fas fa-terminal',
+        Font: 'fa-fw fas fa-font',
+        Button: 'fa-fw fas fa-ad',
+    },
+};
+export const ActiveIconPack = IconPacks.FontAwesome;
+const classes = createStyle(() => ({
+    icon: {
+        display: 'inline-grid',
+        justifyContent: 'center',
+        alignContent: 'center',
+        boxSizing: 'content-box',
+        minWidth: '1.25em',
+        minHeight: '1.25em',
+    },
+}));
+export function Icon(props) {
+    return (<div {...props} class={classNames(classes().icon, props.class)}>
+            <i class={ActiveIconPack[props.icon]}></i>
+        </div>);
+}

package/dist/components/injector/injector.component.d.ts

@@ -0,0 +1,11 @@
+import { Injector, type Instance, type Type } from '@vorplex/core';
+import { type JSX } from 'solid-js';
+export declare const InjectorContext: import("solid-js").Context<Injector>;
+export declare function useInjector<T extends any[]>(map: T): {
+    [K in keyof T]: Instance<T[K]>;
+};
+export declare function useInjector<T extends Record<string, Type>>(map: T): Instance<T>;
+export declare function InjectorComponent(props: {
+    inject?: (injector: Injector) => Injector;
+    children: JSX.Element | ((injector: Injector) => JSX.Element);
+}): JSX.Element;

package/dist/components/injector/injector.component.jsx

@@ -0,0 +1,17 @@
+import { Injector } from '@vorplex/core';
+import { createContext, useContext } from 'solid-js';
+export const InjectorContext = createContext(new Injector());
+export function useInjector(map) {
+    const injector = useContext(InjectorContext);
+    if (Array.isArray(map)) {
+        return map.map((type) => injector.get(type));
+    }
+    else {
+        return injector.map(map);
+    }
+}
+export function InjectorComponent(props) {
+    let injector = useContext(InjectorContext).scope();
+    injector = props.inject?.(injector) ?? useContext(InjectorContext).scope();
+    return (<InjectorContext.Provider value={injector}>{typeof props.children === 'function' ? props.children(injector) : props.children}</InjectorContext.Provider>);
+}

package/dist/components/shadow-dom/shadow-dom.component.d.ts

@@ -0,0 +1,6 @@
+import { JSX } from 'solid-js/jsx-runtime';
+export declare const ShadowDomContext: import("solid-js").Context<ShadowRoot>;
+export declare function ShadowDomComponent(props: {
+    ref?: (root: ShadowRoot) => void;
+    children: JSX.Element;
+}): JSX.Element;

package/dist/components/shadow-dom/shadow-dom.component.jsx

@@ -0,0 +1,13 @@
+import { createContext, onCleanup, onMount } from 'solid-js';
+import { render } from 'solid-js/web';
+export const ShadowDomContext = createContext();
+export function ShadowDomComponent(props) {
+    let ref;
+    onMount(() => {
+        const root = ref.attachShadow({ mode: 'open' });
+        const dispose = render(() => <ShadowDomContext.Provider value={root}>{props.children}</ShadowDomContext.Provider>, root);
+        props.ref?.(root);
+        onCleanup(() => dispose?.());
+    });
+    return <div ref={ref} style={{ display: 'contents' }}/>;
+}

package/dist/effects/use-state.effect.d.ts

@@ -0,0 +1,6 @@
+import { State } from '@vorplex/core';
+import { type Accessor } from 'solid-js';
+export declare function useState<TState, TValue = TState>(state: State<TState>, select?: (state: TState) => TValue): Accessor<TValue>;
+export declare function useState<T extends any[], TValue>(state: {
+    [K in keyof T]: State<T[K]>;
+}, select?: (state: T) => TValue): Accessor<TValue>;

package/dist/effects/use-state.effect.js

@@ -0,0 +1,29 @@
+import { $Value, State } from '@vorplex/core';
+import { createMemo, createSignal, onCleanup } from 'solid-js';
+export function useState(state, select) {
+    const [get, set] = createSignal();
+    createMemo(() => {
+        let current = null;
+        const subscription = State.combineLatest(Array.isArray(state) ? state : [state], (action) => {
+            try {
+                let value = Array.isArray(state) ? action : action[0];
+                if (select)
+                    value = select(value);
+                if (!$Value.equals(current, value)) {
+                    current = value;
+                    set(value);
+                }
+            }
+            catch (error) {
+                set(error instanceof Error ? error : new Error(error));
+            }
+        });
+        onCleanup(() => subscription.unsubscribe());
+    });
+    return () => {
+        const value = get();
+        if (value instanceof Error)
+            throw value;
+        return value;
+    };
+}

package/dist/effects/use-subscription.d.ts

@@ -0,0 +1,2 @@
+import { Subscribable } from '@vorplex/core';
+export declare function useSubscription<T>(subscribable: Subscribable<T>, defaultValue?: T): import("solid-js").Accessor<T>;

package/dist/effects/use-subscription.js

@@ -0,0 +1,8 @@
+import { createSignal, onCleanup, onMount } from 'solid-js';
+export function useSubscription(subscribable, defaultValue) {
+    const [value, setValue] = createSignal(defaultValue, { equals: false });
+    let subscription;
+    onMount(() => subscription = subscribable.subscribe(change => setValue(() => change)));
+    onCleanup(() => subscription?.unsubscribe());
+    return value;
+}

package/dist/functions/create-popup.function.d.ts

@@ -0,0 +1,11 @@
+import type { Point } from '@vorplex/core';
+import { type JSXElement } from 'solid-js';
+import { type Portal } from './create-portal.function';
+export type PopupOptions = {
+    location: Point;
+    ghost?: boolean;
+    autoTransform?: boolean;
+    render: (menu: Portal) => JSXElement;
+    onDestroy?: () => void;
+};
+export declare function createPopup(options: PopupOptions): Portal;

package/dist/functions/create-popup.function.jsx

@@ -0,0 +1,42 @@
+import { onCleanup, onMount } from 'solid-js';
+import { createPortal } from './create-portal.function';
+import { $Element } from '@vorplex/web';
+export function createPopup(options) {
+    const portal = createPortal({
+        render: (portal) => {
+            onMount(() => {
+                const dispose = $Element.addEventListener(document, 'keyup', event => {
+                    if (event.code === 'Escape')
+                        portal.destroy();
+                });
+                onCleanup(() => dispose());
+            });
+            return (<div style={{
+                    position: 'fixed',
+                    top: '0px',
+                    left: '0px',
+                    border: 'none',
+                    width: '100vw',
+                    height: '100vh',
+                    'pointer-events': options.ghost ? 'none' : 'initial',
+                }} onPointerUp={(event) => {
+                    if (options.ghost)
+                        return;
+                    if (event.currentTarget !== event.target)
+                        return;
+                    portal.destroy();
+                }}>
+                    <div style={{
+                    position: 'fixed',
+                    top: `${options.location.y}px`,
+                    left: `${options.location.x}px`,
+                    transform: options.autoTransform ? `translate(${options.location.x > window.innerWidth / 2 ? '-100%' : '0%'}, ${options.location.y > window.innerHeight / 2 ? '-100%' : '0%'})` : undefined
+                }}>
+                        {options.render(portal)}
+                    </div>
+                </div>);
+        },
+        onDestroy: options.onDestroy
+    });
+    return portal;
+}

package/dist/functions/create-portal.function.d.ts

@@ -0,0 +1,10 @@
+import { type JSX } from 'solid-js';
+export type Portal = {
+    container: HTMLDivElement;
+    destroy: () => void;
+};
+export interface PortalOptions {
+    render: (portal: Portal) => JSX.Element;
+    onDestroy?: () => void;
+}
+export declare function createPortal(options: PortalOptions): Portal;

package/dist/functions/create-portal.function.jsx

@@ -0,0 +1,37 @@
+import { createMemo } from 'solid-js';
+import { render } from 'solid-js/web';
+import { createStyle } from './create-style.function';
+const classes = createStyle(() => ({
+    container: {
+        position: 'fixed',
+        left: '0px',
+        top: '0px',
+        width: '100vw',
+        height: '100vh',
+        overflow: 'hidden',
+        pointerEvents: 'none',
+        '& > *': {
+            pointerEvents: 'initial',
+        },
+    },
+}));
+export function createPortal(options) {
+    const container = document.createElement('div');
+    container.style.zIndex = '1';
+    createMemo(() => container.className = classes().container);
+    document.body.appendChild(container);
+    let disposed = false;
+    const portal = {
+        container,
+        destroy: () => {
+            if (dispose)
+                dispose();
+            else
+                disposed = true;
+            container.remove();
+            options.onDestroy?.();
+        },
+    };
+    const dispose = disposed ? () => { } : render(() => options.render(portal), container);
+    return portal;
+}

package/dist/functions/create-style.function.d.ts

@@ -0,0 +1,3 @@
+import { Accessor } from 'solid-js';
+import { type StyleClasses, type StyleNames } from '../utils/style-sheet.util';
+export declare function createStyle<T extends object>(styles: () => StyleClasses<T>, container?: Node): Accessor<StyleNames<T>>;

package/dist/functions/create-style.function.jsx

@@ -0,0 +1,7 @@
+import { onCleanup } from 'solid-js';
+import { $StyleSheet } from '../utils/style-sheet.util';
+export function createStyle(styles, container) {
+    const style = $StyleSheet.create(styles, container);
+    onCleanup(() => style().element.remove());
+    return () => style().classes;
+}

package/dist/functions/use-cached-signal.function.d.ts

@@ -0,0 +1,2 @@
+import { Signal } from 'solid-js';
+export declare function useCachedSignal<T>(cacheKey: string, value?: T): Signal<T>;

package/dist/functions/use-cached-signal.function.jsx

@@ -0,0 +1,12 @@
+import { createSignal } from 'solid-js';
+const SignalCache = {};
+export function useCachedSignal(cacheKey, value) {
+    const [get, set] = createSignal(SignalCache[cacheKey] ?? value);
+    return [
+        get,
+        ((value) => {
+            SignalCache[cacheKey] = value;
+            set(value);
+        })
+    ];
+}

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+export * from './effects/use-state.effect';
+export * from './effects/use-subscription';
+export * from './utils/style-sheet.util';
+export * from './components/for-in/for-in.component';
+export * from './components/icon/icons.component';
+export * from './components/injector/injector.component';
+export * from './components/shadow-dom/shadow-dom.component';
+export * from './functions/create-popup.function';
+export * from './functions/create-portal.function';
+export * from './functions/create-style.function';
+export * from './functions/use-cached-signal.function';

package/dist/index.js

@@ -0,0 +1,13 @@
+// **/*.ts
+export * from './effects/use-state.effect';
+export * from './effects/use-subscription';
+export * from './utils/style-sheet.util';
+// **/*.tsx
+export * from './components/for-in/for-in.component';
+export * from './components/icon/icons.component';
+export * from './components/injector/injector.component';
+export * from './components/shadow-dom/shadow-dom.component';
+export * from './functions/create-popup.function';
+export * from './functions/create-portal.function';
+export * from './functions/create-style.function';
+export * from './functions/use-cached-signal.function';

package/dist/utils/style-sheet.util.d.ts

@@ -0,0 +1,40 @@
+import { type CamelToKebab, type Update } from '@vorplex/core';
+import { Accessor, type JSX } from 'solid-js';
+export type StyleNames<T> = {
+    [name in keyof T]: string;
+};
+export type StyleClass = CssProperties | {
+    [property: string]: StyleClass;
+};
+export type StyleClasses<T extends object = any> = {
+    [name in keyof T]: StyleClass;
+};
+export type StyleSheet = {
+    element: HTMLStyleElement;
+    css: string;
+};
+export type ClassStyleSheet<T extends object> = StyleSheet & {
+    classes: StyleNames<T>;
+    value: StyleClasses<T>;
+};
+export type AnimationStyleSheet = StyleSheet & {
+    name: string;
+};
+export type CssProperties = {
+    [key in keyof JSX.CSSProperties as CamelToKebab<key>]: JSX.CSSProperties[key] | CssProperties;
+};
+export declare class $StyleSheet {
+    private constructor();
+    static parseClass(selector: string, properties: CssProperties): string;
+    static parseAnimation(name: string, animation: Record<string, CssProperties>): string;
+    static parse<T extends {
+        [rule: string]: CssProperties;
+    }>(style: T, classNames?: StyleNames<T>): {
+        classes: StyleNames<T>;
+        css: string;
+    };
+    static create<T extends object>(styles: () => StyleClasses<T>, container?: Node): Accessor<ClassStyleSheet<T>>;
+    static createAnimation(animation: Record<string, CssProperties>): AnimationStyleSheet;
+    static update<T extends object>(style: ClassStyleSheet<T>, changes?: Update<StyleClasses<T>>): ClassStyleSheet<T>;
+    static updateSheet<T extends object>(element: HTMLStyleElement, styles: StyleClasses<T>): ClassStyleSheet<T>;
+}

package/dist/utils/style-sheet.util.js

@@ -0,0 +1,101 @@
+import { $Id, $String, $Value, State } from '@vorplex/core';
+import { createMemo, onCleanup } from 'solid-js';
+export class $StyleSheet {
+    constructor() { }
+    static parseClass(selector, properties) {
+        let css = `${selector} {\n`;
+        let suffix = '';
+        for (const rule in properties) {
+            const value = properties[rule];
+            if (typeof value === 'string') {
+                css += `\t${$String.kebabCase(rule)}: ${value};\n`;
+            }
+            else {
+                for (const childSelector of rule.split(',')) {
+                    suffix += $StyleSheet.parseClass(childSelector.trim().split('&').join(selector), value);
+                }
+            }
+        }
+        css += `}`;
+        return `${css}\n${suffix}\n`;
+    }
+    static parseAnimation(name, animation) {
+        let css = `@keyframes ${name} {\n`;
+        for (const state in animation) {
+            css += `${state} {\n`;
+            for (const rule in animation[state]) {
+                const value = animation[state][rule];
+                css += `\t${$String.kebabCase(rule)}: ${value};\n`;
+            }
+            css += `}\n`;
+        }
+        css += '}\n';
+        return css;
+    }
+    static parse(style, classNames) {
+        const classes = classNames ?? {};
+        let css = '';
+        for (const name in style) {
+            if (name === '_') {
+                for (const key in style[name]) {
+                    css += $StyleSheet.parseClass(key, style[name][key]);
+                }
+            }
+            else {
+                classes[name] = classes[name] ?? `${name}-${$Id.uid()}`;
+                css += $StyleSheet.parseClass(`.${classes[name]}`, style[name]);
+            }
+        }
+        return {
+            classes,
+            css,
+        };
+    }
+    static create(styles, container) {
+        container ??= document.head;
+        const sheet = document.createElement('style');
+        sheet.toggleAttribute('style-classes');
+        container.appendChild(sheet);
+        onCleanup(() => sheet.remove());
+        return createMemo(() => $StyleSheet.updateSheet(sheet, styles()));
+    }
+    static createAnimation(animation) {
+        const element = document.createElement('style');
+        element.toggleAttribute('animation');
+        document.head.appendChild(element);
+        const name = `anim-${$Id.uid()}`;
+        const css = $StyleSheet.parseAnimation(name, animation);
+        element.innerHTML = css;
+        return {
+            element,
+            css,
+            name,
+        };
+    }
+    static update(style, changes = {}) {
+        changes = State.update(style.value, changes);
+        if ($Value.equals(style.value, changes))
+            return style;
+        const { classes, css } = $StyleSheet.parse(changes, style.classes);
+        style.element.innerHTML = css;
+        style.value = changes;
+        return {
+            element: style.element,
+            css,
+            classes: classes,
+            value: style.value,
+        };
+    }
+    static updateSheet(element, styles) {
+        const { classes, css } = $StyleSheet.parse(styles);
+        if (element.innerHTML !== css) {
+            element.innerHTML = css;
+        }
+        return {
+            element: element,
+            css,
+            classes,
+            value: styles,
+        };
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vorplex/solid",
-  "version": "0.0.8",
+  "version": "0.0.11",
   "type": "module",
   "sideEffects": false,
   "files": [
@@ -16,8 +16,8 @@
   "main": "./dist/index.js",
   "dependencies": {
     "tslib": "^2.8.1",
-    "@vorplex/web": "0.0.8",
-    "@vorplex/core": "0.0.8"
+    "@vorplex/core": "0.0.11",
+    "@vorplex/web": "0.0.11"
   },
   "devDependencies": {
     "@types/jest": "^29.5.2",