@0djek/sveltix 0.0.6

package/dist/heading/internal/DefaultHeadingStyles.js

@@ -0,0 +1,75 @@
+export class DefaultHeadingStyles {
+    _base = 'font-heading';
+    _themes = {
+        Primary: {
+            onContainer: 'text-primary-on',
+            onSurface: 'text-primary-on-surface',
+        },
+        Secondary: {
+            onContainer: 'text-secondary-on',
+            onSurface: 'text-secondary-on-surface',
+        },
+        Neutral: {
+            onContainer: 'text-neutral-on',
+            onSurface: 'text-neutral-on-surface',
+        },
+        Info: {
+            onContainer: 'text-info-on',
+            onSurface: 'text-info-on-surface',
+        },
+        Negative: {
+            onContainer: 'text-negative-on',
+            onSurface: 'text-negative-on-surface',
+        },
+        Positive: {
+            onContainer: 'text-positive-on',
+            onSurface: 'text-positive-on-surface',
+        },
+        Warning: {
+            onContainer: 'text-warning-on',
+            onSurface: 'text-warning-on-surface',
+        },
+    };
+    _tags = {
+        1: 'scroll-m-20 text-heading-1 font-extrabold tracking-tight',
+        2: 'scroll-m-20 text-heading-2 font-semibold tracking-tight',
+        3: 'scroll-m-20 text-heading-3 font-semibold tracking-tight',
+        4: 'scroll-m-20 text-heading-4 font-semibold tracking-tight',
+        5: 'scroll-m-20 text-heading-5 font-semibold tracking-tight',
+        6: 'scroll-m-20 text-heading-6 font-semibold tracking-tight',
+    };
+    getBase() {
+        return this._base;
+    }
+    setBase(classes) {
+        this._base = classes;
+    }
+    getTheme(theme, onContainer) {
+        return this._themes[theme][onContainer ? 'onContainer' : 'onSurface'];
+    }
+    setTheme(theme, onContainer, classes) {
+        this._themes[theme][onContainer ? 'onContainer' : 'onSurface'] = classes;
+    }
+    getTag(tag) {
+        return this._tags[tag];
+    }
+    setTag(tag, classes) {
+        this._tags[tag] = classes;
+    }
+    getDom(tag) {
+        switch (tag) {
+            case 1:
+                return 'h1';
+            case 2:
+                return 'h2';
+            case 3:
+                return 'h3';
+            case 4:
+                return 'h4';
+            case 5:
+                return 'h5';
+            case 6:
+                return 'h6';
+        }
+    }
+}

package/dist/heading/models/Align.d.ts

@@ -0,0 +1,8 @@
+export declare enum Align {
+    Left = "Left",
+    Center = "Center",
+    Right = "Right",
+    Justify = "Justify",
+    Start = "Start",
+    End = "End"
+}

package/dist/heading/models/Align.js

@@ -0,0 +1,9 @@
+export var Align;
+(function (Align) {
+    Align["Left"] = "Left";
+    Align["Center"] = "Center";
+    Align["Right"] = "Right";
+    Align["Justify"] = "Justify";
+    Align["Start"] = "Start";
+    Align["End"] = "End";
+})(Align || (Align = {}));

package/dist/heading/models/HeadingProps.d.ts

@@ -0,0 +1,25 @@
+import type { ThemableComponent } from '../../theme';
+import type { Snippet } from 'svelte';
+import type { HeadingTag } from './HeadingTag';
+import type { Align } from './Align';
+import type { HeadingStyles } from '../HeadingStyles';
+export interface HeadingProps extends ThemableComponent<HeadingStyles> {
+    /**
+     * Which heading to use
+     * @default 1
+     */
+    tag?: HeadingTag;
+    /**
+     * Is the heading on surface or on container.
+     * @default false
+     */
+    onContainer?: boolean;
+    /**
+     * Heading's text to render.
+     */
+    children?: Snippet;
+    /**
+     * How to align heading.
+     */
+    align?: Align;
+}

package/dist/heading/models/HeadingProps.js

@@ -0,0 +1 @@
+export {};

package/dist/heading/models/HeadingTag.d.ts

@@ -0,0 +1 @@
+export type HeadingTag = 1 | 2 | 3 | 4 | 5 | 6;

package/dist/heading/models/HeadingTag.js

@@ -0,0 +1 @@
+export {};

package/dist/heading/models/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Align';
+export * from './HeadingProps';
+export * from './HeadingTag';

package/dist/heading/models/index.js

@@ -0,0 +1,3 @@
+export * from './Align';
+export * from './HeadingProps';
+export * from './HeadingTag';

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+import { DiContainer } from './di/DiContainer';
+export declare const sveltix: DiContainer;

package/dist/index.js

@@ -0,0 +1,2 @@
+import { DiContainer } from './di/DiContainer';
+export const sveltix = new DiContainer();

package/dist/ordered-map/OrderedMap.svelte.d.ts

@@ -0,0 +1,27 @@
+interface Entry<TValue> {
+    key: string;
+    value: TValue;
+}
+export declare class OrderedMap<TValue> {
+    get entries(): TValue[];
+    private _map;
+    private _entries;
+    private _batchedAdd;
+    static create<TValue>(): OrderedMap<TValue>;
+    getByKey(key: string): TValue | undefined;
+    setByKey(key: string, value: TValue): void;
+    getByIndex(index: number): TValue | undefined;
+    clear(): void;
+    addBatched(key: string, value: TValue): void;
+    batchedFinish(): void;
+    addMultiple(entries: Entry<TValue>[]): void;
+    add(key: string, value: TValue): void;
+    addStart(key: string, value: TValue): void;
+    addEnd(key: string, value: TValue): void;
+    addAfter(key: string, value: TValue, after: string): void;
+    addBefore(key: string, value: TValue, after: string): void;
+    move(from: string, to: string, after: boolean): void;
+    remove(key: string): TValue | undefined;
+    private fixIndices;
+}
+export {};

package/dist/ordered-map/OrderedMap.svelte.js

@@ -0,0 +1,138 @@
+export class OrderedMap {
+    get entries() {
+        return this._entries.map((entry) => entry.value);
+    }
+    _map = new Map();
+    _entries = $state.raw([]);
+    _batchedAdd = [];
+    static create() {
+        return new OrderedMap();
+    }
+    getByKey(key) {
+        const index = this._map.get(key);
+        if (index == null) {
+            return undefined;
+        }
+        return this.getByIndex(index);
+    }
+    setByKey(key, value) {
+        const index = this._map.get(key);
+        if (index == null) {
+            return;
+        }
+        this._entries[index].value = value;
+    }
+    getByIndex(index) {
+        return this._entries.at(index)?.value;
+    }
+    clear() {
+        this._entries = [];
+        this._map.clear();
+    }
+    addBatched(key, value) {
+        this._batchedAdd.push({
+            key,
+            value,
+        });
+    }
+    batchedFinish() {
+        const lengthToStartFrom = this._entries.length - 1;
+        // TODO: Maybe batch this for big arrays?
+        this._entries.push(...this._batchedAdd);
+        this.fixIndices(lengthToStartFrom);
+        this._batchedAdd = [];
+    }
+    addMultiple(entries) {
+        for (const entry of entries) {
+            this.addBatched(entry.key, entry.value);
+        }
+        this.batchedFinish();
+    }
+    add(key, value) {
+        this._entries = [...this._entries, { key, value }];
+        this._map.set(key, this._entries.length - 1);
+    }
+    addStart(key, value) {
+        this._entries = [{ key, value }, ...this._entries];
+        this._map.set(key, this._entries.length - 1);
+        this.fixIndices();
+    }
+    addEnd(key, value) {
+        this._entries = [...this._entries, { key, value }];
+        this._map.set(key, this._entries.length - 1);
+        this.fixIndices(this._entries.length - 2);
+    }
+    addAfter(key, value, after) {
+        let indexToAddAfter = this._map.get(after);
+        if (indexToAddAfter == null) {
+            this.add(key, value);
+            return;
+        }
+        indexToAddAfter = Math.max(indexToAddAfter + 1, this._entries.length - 1);
+        const firstPart = this._entries.slice(0, indexToAddAfter - 1);
+        const secondPart = this._entries.slice(indexToAddAfter, this._entries.length);
+        this._entries = [...firstPart, { key, value }, ...secondPart];
+        this.fixIndices(indexToAddAfter);
+    }
+    addBefore(key, value, after) {
+        let indexToAddBefore = this._map.get(after);
+        if (indexToAddBefore == null) {
+            return;
+        }
+        indexToAddBefore = Math.min(indexToAddBefore - 1, 0);
+        const firstPart = this._entries.slice(0, indexToAddBefore - 1);
+        const secondPart = this._entries.slice(indexToAddBefore, this._entries.length);
+        this._entries = [...firstPart, { key, value }, ...secondPart];
+        this.fixIndices(indexToAddBefore);
+    }
+    move(from, to, after) {
+        const fromIndex = this._map.get(from);
+        if (fromIndex == null) {
+            console.log('From index is null');
+            return;
+        }
+        let toIndex = this._map.get(to);
+        if (toIndex == null) {
+            console.log('To index is null');
+            return;
+        }
+        if (after) {
+            toIndex += 1;
+        }
+        const itemToMove = this._entries[fromIndex];
+        const testArray = this._entries;
+        testArray.splice(fromIndex, 1);
+        testArray.splice(toIndex, 0, itemToMove);
+        this._entries = [...testArray];
+        this.fixIndices(fromIndex, toIndex);
+    }
+    remove(key) {
+        const index = this._map.get(key);
+        if (index == null) {
+            return undefined;
+        }
+        const entries = this._entries;
+        const removedEntry = entries.splice(index, 1);
+        this._entries = [...entries];
+        this._map.delete(key);
+        this.fixIndices(index);
+        return removedEntry[0].value;
+    }
+    fixIndices(startIndex, endIndex) {
+        if (startIndex == null || startIndex < 0) {
+            startIndex = 0;
+        }
+        if (endIndex == null) {
+            endIndex = this._entries.length;
+        }
+        for (let index = startIndex; index < endIndex; index++) {
+            try {
+                const entry = this._entries[index];
+                this._map.set(entry.key, index);
+            }
+            catch (error) {
+                console.error(error);
+            }
+        }
+    }
+}

package/dist/ordered-map/__tests__/builders/OrderedMapBuilder.d.ts

@@ -0,0 +1,9 @@
+import { OrderedMap, type Child } from '../../OrderedMap.svelte';
+export declare class OrderedMapBuilder<TValue> {
+    private _entriesToAdd;
+    private _child?;
+    static create<TValue>(): OrderedMapBuilder<TValue>;
+    entryToAdd(key: string, value: TValue): OrderedMapBuilder<TValue>;
+    withChild(child: Child<TValue>): OrderedMapBuilder<TValue>;
+    build(): OrderedMap<TValue>;
+}

package/dist/ordered-map/__tests__/builders/OrderedMapBuilder.js

@@ -0,0 +1,26 @@
+import { OrderedMap } from '../../OrderedMap.svelte';
+export class OrderedMapBuilder {
+    _entriesToAdd = [];
+    _child;
+    static create() {
+        return new OrderedMapBuilder();
+    }
+    entryToAdd(key, value) {
+        this._entriesToAdd.push({ key, value });
+        return this;
+    }
+    withChild(child) {
+        this._child = child;
+        return this;
+    }
+    build() {
+        const map = OrderedMap.create();
+        if (this._child != null) {
+            map.child = this._child;
+        }
+        for (const entry of this._entriesToAdd) {
+            map.add(entry.key, entry.value);
+        }
+        return map;
+    }
+}

package/dist/ordered-map/index.d.ts

@@ -0,0 +1 @@
+export * from './OrderedMap.svelte';

package/dist/ordered-map/index.js

@@ -0,0 +1 @@
+export * from './OrderedMap.svelte';

package/dist/paragraph/P.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { pKey } from '.';
+	import type { PProps } from './models/PProps';
+	import { PComponent } from './PComponents.svelte';
+
+	const props: PProps = $props();
+
+	const p = new PComponent(() => props, pKey);
+</script>
+
+<p
+	class={[
+		p.getStyles().getTheme(p.getTheme(), p.getOnContainer()),
+		p.getStyles().getSize(p.getSize()),
+		p.getStyles().getFont(p.getFont()),
+		{
+			italic: p.getItalic(),
+		},
+	]}>
+	{@render props.children?.()}
+</p>

package/dist/paragraph/P.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { PProps } from './models/PProps';
+declare const P: import("svelte").Component<PProps, {}, "">;
+type P = ReturnType<typeof P>;
+export default P;

package/dist/paragraph/PComponents.svelte.d.ts

@@ -0,0 +1,13 @@
+import { Component } from '../theme';
+import { PFont, PSize, type PProps } from './models';
+import type { ParagraphStyles } from './ParagraphStyles';
+export declare class PComponent extends Component<ParagraphStyles, PProps> {
+    private readonly _size;
+    private readonly _onContainer;
+    private readonly _font;
+    private readonly _italic;
+    getSize(): PSize;
+    getOnContainer(): boolean;
+    getFont(): PFont;
+    getItalic(): boolean;
+}

package/dist/paragraph/PComponents.svelte.js

@@ -0,0 +1,20 @@
+import { Component } from '../theme';
+import { PFont, PSize } from './models';
+export class PComponent extends Component {
+    _size = $derived.by(() => this._getProps().size ?? PSize.Default);
+    _onContainer = $derived.by(() => this._getProps().onContainer ?? false);
+    _font = $derived.by(() => this._getProps().font ?? PFont.Default);
+    _italic = $derived.by(() => this._getProps().italic ?? false);
+    getSize() {
+        return this._size;
+    }
+    getOnContainer() {
+        return this._onContainer;
+    }
+    getFont() {
+        return this._font;
+    }
+    getItalic() {
+        return this._italic;
+    }
+}

package/dist/paragraph/ParagraphStyles.d.ts

@@ -0,0 +1,11 @@
+import type { Theme } from '../theme';
+import type { PFont } from './models';
+import type { PSize } from './models/PSize';
+export interface ParagraphStyles {
+    getTheme(theme: Theme, onSurface: boolean): string;
+    setTheme(theme: Theme, onSurface: boolean, classes: string): void;
+    getSize(size: PSize): string;
+    setSize(size: PSize, classes: string): void;
+    getFont(font: PFont): string;
+    setFont(font: PFont, classes: string): void;
+}

package/dist/paragraph/ParagraphStyles.js

@@ -0,0 +1 @@
+export {};

package/dist/paragraph/__tests__/PStory.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { Theme } from '../../theme';
+	import { P, PFont } from '..';
+
+	interface Props {
+		message: string;
+		theme?: Theme;
+		font?: PFont;
+	}
+	const { message, theme, font }: Props = $props();
+</script>
+
+<P
+	{theme}
+	{font}>{message}</P>

package/dist/paragraph/__tests__/PStory.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Theme } from '../../theme';
+import { PFont } from '..';
+interface Props {
+    message: string;
+    theme?: Theme;
+    font?: PFont;
+}
+declare const PStory: import("svelte").Component<Props, {}, "">;
+type PStory = ReturnType<typeof PStory>;
+export default PStory;

package/dist/paragraph/__tests__/ParagraphBuilder.d.ts

@@ -0,0 +1,10 @@
+import type { Theme } from '../../theme';
+import { PFont } from '../models';
+export declare class ParagraphBuilder {
+    private _theme;
+    private _font;
+    static create(): ParagraphBuilder;
+    withTheme(theme: Theme): ParagraphBuilder;
+    withFont(font: PFont): ParagraphBuilder;
+    build(): Promise<void>;
+}

package/dist/paragraph/__tests__/ParagraphBuilder.js

@@ -0,0 +1,28 @@
+import { render } from 'vitest-browser-svelte';
+import PStory from './PStory.svelte';
+import { DEFAULT_THEME } from '../../theme/themeDefaults';
+import { PFont } from '../models';
+export class ParagraphBuilder {
+    _theme = DEFAULT_THEME;
+    _font = PFont.Default;
+    static create() {
+        return new ParagraphBuilder();
+    }
+    withTheme(theme) {
+        this._theme = theme;
+        return this;
+    }
+    withFont(font) {
+        this._font = font;
+        return this;
+    }
+    async build() {
+        await render(PStory, {
+            props: {
+                theme: this._theme,
+                message: 'test message',
+                font: this._font,
+            },
+        });
+    }
+}

package/dist/paragraph/index.d.ts

@@ -0,0 +1,5 @@
+import P from './P.svelte';
+import type { ParagraphStyles } from './ParagraphStyles';
+export { P };
+export * from './models';
+export declare const pKey: import("../di/DiContainer").InjectionKey<ParagraphStyles>;

package/dist/paragraph/index.js

@@ -0,0 +1,8 @@
+import { sveltix } from '..';
+import { createKey } from '../di/DiContainer';
+import { DefaultParagraphStyles } from './internal/DefaultParagraphStyles';
+import P from './P.svelte';
+export { P };
+export * from './models';
+export const pKey = createKey(DefaultParagraphStyles);
+sveltix.registerSingleton(pKey);

package/dist/paragraph/internal/DefaultParagraphStyles.d.ts

@@ -0,0 +1,15 @@
+import type { Theme } from '../../theme';
+import type { PFont } from '../models';
+import type { PSize } from '../models/PSize';
+import type { ParagraphStyles } from '../ParagraphStyles';
+export declare class DefaultParagraphStyles implements ParagraphStyles {
+    private _themes;
+    private _sizes;
+    private _fonts;
+    getTheme(theme: Theme, onContainer: boolean): string;
+    setTheme(theme: Theme, onContainer: boolean, classes: string): void;
+    getSize(size: PSize): string;
+    setSize(size: PSize, classes: string): void;
+    getFont(font: PFont): string;
+    setFont(font: PFont, classes: string): void;
+}

package/dist/paragraph/internal/DefaultParagraphStyles.js

@@ -0,0 +1,61 @@
+import { pClasses } from './classes';
+export class DefaultParagraphStyles {
+    _themes = {
+        Primary: {
+            onContainer: 'text-primary-on',
+            onSurface: 'text-primary-on-surface',
+        },
+        Secondary: {
+            onContainer: 'text-secondary-on',
+            onSurface: 'text-secondary-on-surface',
+        },
+        Neutral: {
+            onContainer: 'text-neutral-on',
+            onSurface: 'text-neutral-on-surface',
+        },
+        Info: {
+            onContainer: 'text-info-on',
+            onSurface: 'text-info-on-surface',
+        },
+        Negative: {
+            onContainer: 'text-negative-on',
+            onSurface: 'text-negative-on-surface',
+        },
+        Positive: {
+            onContainer: 'text-positive-on',
+            onSurface: 'text-positive-on-surface',
+        },
+        Warning: {
+            onContainer: 'text-warning-on',
+            onSurface: 'text-warning-on-surface',
+        },
+    };
+    _sizes = {
+        Xs: 'text-p-xs',
+        S: 'text-p-sm',
+        Default: 'text-p-md',
+        Lg: 'text-p-lg',
+    };
+    _fonts = {
+        Default: pClasses.fonts.default,
+        Mono: pClasses.fonts.mono,
+    };
+    getTheme(theme, onContainer) {
+        return this._themes[theme][onContainer ? 'onContainer' : 'onSurface'];
+    }
+    setTheme(theme, onContainer, classes) {
+        this._themes[theme][onContainer ? 'onContainer' : 'onSurface'] = classes;
+    }
+    getSize(size) {
+        return this._sizes[size];
+    }
+    setSize(size, classes) {
+        this._sizes[size] = classes;
+    }
+    getFont(font) {
+        return this._fonts[font];
+    }
+    setFont(font, classes) {
+        this._fonts[font] = classes;
+    }
+}

package/dist/paragraph/internal/classes.d.ts

@@ -0,0 +1,6 @@
+export declare const pClasses: {
+    fonts: {
+        default: string;
+        mono: string;
+    };
+};

package/dist/paragraph/internal/classes.js

@@ -0,0 +1,7 @@
+// TODO: Add remaining classes (sizes, theme)
+export const pClasses = {
+    fonts: {
+        default: 'font-body',
+        mono: 'font-mono',
+    },
+};

package/dist/paragraph/models/PFont.d.ts

@@ -0,0 +1,4 @@
+export declare enum PFont {
+    Default = "Default",
+    Mono = "Mono"
+}

package/dist/paragraph/models/PFont.js

@@ -0,0 +1,5 @@
+export var PFont;
+(function (PFont) {
+    PFont["Default"] = "Default";
+    PFont["Mono"] = "Mono";
+})(PFont || (PFont = {}));

package/dist/paragraph/models/PProps.d.ts

@@ -0,0 +1,12 @@
+import type { ThemableComponent } from '../../theme';
+import type { Snippet } from 'svelte';
+import type { PSize } from './PSize';
+import type { PFont } from './PFont';
+import type { ParagraphStyles } from '../ParagraphStyles';
+export interface PProps extends ThemableComponent<ParagraphStyles> {
+    size?: PSize;
+    onContainer?: boolean;
+    children?: Snippet;
+    font?: PFont;
+    italic?: boolean;
+}

package/dist/paragraph/models/PProps.js

@@ -0,0 +1 @@
+export {};

package/dist/paragraph/models/PSize.d.ts

@@ -0,0 +1,6 @@
+export declare enum PSize {
+    Xs = "Xs",
+    S = "S",
+    Default = "Default",
+    Lg = "Lg"
+}

package/dist/paragraph/models/PSize.js

@@ -0,0 +1,7 @@
+export var PSize;
+(function (PSize) {
+    PSize["Xs"] = "Xs";
+    PSize["S"] = "S";
+    PSize["Default"] = "Default";
+    PSize["Lg"] = "Lg";
+})(PSize || (PSize = {}));