sk-clib 0.0.6 → 1.1.1

package/dist/docs/DocTree.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	// --- Components ---
+	import { Header } from '..';
+    import DocTree from "./DocTree.svelte"
+
+	// --- Logic ---
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export type DocNode = {
+		root?: {
+			metadata?: {
+				order?: number;
+				title?: string;
+			};
+			component?: typeof import('svelte').SvelteComponent;
+		};
+		component?: typeof import('svelte').SvelteComponent;
+		[key: string]: any;
+	};
+
+	/**
+	 * Sorts the children of a documentation node by their `order` metadata.
+	 */
+	function getSortedDocs(obj: Record<string, any>) {
+		return Object.entries(obj)
+			.filter(([key]) => key !== 'root')
+			.sort(([, a], [, b]) => {
+				const orderA = a?.root?.metadata?.order ?? a?.metadata?.order ?? 9999;
+				const orderB = b?.root?.metadata?.order ?? b?.metadata?.order ?? 9999;
+				return orderA - orderB;
+			});
+	}
+
+
+	export type tProps = HTMLAttributes<HTMLDivElement> & {
+		node: DocNode,
+        prev?: string,
+	}
+
+	let { children, node, prev = $bindable(''), ...rest }: tProps | any = $props();
+</script>
+
+{#if node.root}
+	{@const Component = node.root.component as any}
+	<Component prev/>
+{/if}
+
+{#each getSortedDocs(node) as [key, value]}
+	{#if value.root?.component}
+        <value.root.component prev={`${prev}${key ? '/' : ''}${key}`}/>
+	{:else if value.component}
+        <value.component prev={`${prev}${key ? '/' : ''}${key}`}/>
+	{/if}
+
+	{#each Object.entries(value).filter(([k]) => k !== 'root') as [subKey, subValue]}
+		{#if typeof subValue === 'object' && subValue !== null && 'component' in subValue}
+			<!-- Render actual doc file -->
+			{@const SubComponent = subValue.component as any}
+            <SubComponent prev={`${prev}${subKey ? '/' : ''}${subKey}`}/>
+		{:else if typeof subValue === 'object' && !['metadata'].includes(subKey)}
+			<!-- Recurse into folder-like object -->
+            <DocTree prev={`${prev}${subKey ? '/' : ''}${subKey}`} node={subValue}/>
+		{:else}
+			<!-- Not valid doc node -->
+		{/if}
+	{/each}
+{/each}

package/dist/docs/DocTree.svelte.d.ts

@@ -0,0 +1,20 @@
+import DocTree from "./DocTree.svelte";
+import type { HTMLAttributes } from 'svelte/elements';
+export type DocNode = {
+    root?: {
+        metadata?: {
+            order?: number;
+            title?: string;
+        };
+        component?: typeof import('svelte').SvelteComponent;
+    };
+    component?: typeof import('svelte').SvelteComponent;
+    [key: string]: any;
+};
+export type tProps = HTMLAttributes<HTMLDivElement> & {
+    node: DocNode;
+    prev?: string;
+};
+declare const DocTree: import("svelte").Component<any, {}, "prev">;
+type DocTree = ReturnType<typeof DocTree>;
+export default DocTree;

package/dist/docs/_layouts/bare.svelte

@@ -0,0 +1,12 @@
+<script>
+	import { Header } from '../..';
+	let {
+		children,
+		title = $bindable('Not given a title :('),
+		prev = $bindable(undefined)
+	} = $props();
+</script>
+
+<Header xl class="mt-5" id={`${prev}`}>{title}</Header>
+
+{@render children?.()}

package/dist/docs/_layouts/bare.svelte.d.ts

@@ -0,0 +1,15 @@
+export default Bare;
+type Bare = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Bare: import("svelte").Component<{
+    children: any;
+    title?: string;
+    prev?: any;
+}, {}, "title" | "prev">;
+type $$ComponentProps = {
+    children: any;
+    title?: string;
+    prev?: any;
+};

package/dist/docs/contributing/+page.svelte

@@ -0,0 +1,12 @@
+<script context="module">
+	export const metadata = {"title":"Contributing"};
+	const { title } = metadata;
+</script>
+
+<script>
+	import Layout_MDSVEX_DEFAULT from '/home/runner/work/sk-clib/sk-clib/src/lib/docs/_layouts/bare.svelte';
+</script>
+
+<Layout_MDSVEX_DEFAULT {...$$props} {...metadata}>
+<p>You can choose to either contribute to the documentation or the library</p>
+</Layout_MDSVEX_DEFAULT>

package/dist/docs/contributing/documentation/+page.svelte

@@ -0,0 +1,12 @@
+<script context="module">
+	export const metadata = {"order":1,"title":"Contributing to Documentation"};
+	const { order, title } = metadata;
+</script>
+
+<script>
+	import Layout_MDSVEX_DEFAULT from '/home/runner/work/sk-clib/sk-clib/src/lib/docs/_layouts/bare.svelte';
+</script>
+
+<Layout_MDSVEX_DEFAULT {...$$props} {...metadata}>
+<p>So, you want to contribute to the documentation?</p>
+</Layout_MDSVEX_DEFAULT>

package/dist/docs/contributing/documentation/sublevel/+page.svelte

@@ -0,0 +1,12 @@
+<script context="module">
+	export const metadata = {"title":"This is a sub level","order":6};
+	const { title, order } = metadata;
+</script>
+
+<script>
+	import Layout_MDSVEX_DEFAULT from '/home/runner/work/sk-clib/sk-clib/src/lib/docs/_layouts/bare.svelte';
+</script>
+
+<Layout_MDSVEX_DEFAULT {...$$props} {...metadata}>
+<p>This is a dope sub level</p>
+</Layout_MDSVEX_DEFAULT>

package/dist/docs/contributing/library/+page.svelte

@@ -0,0 +1,12 @@
+<script context="module">
+	export const metadata = {"order":2,"title":"Contributing to Library"};
+	const { order, title } = metadata;
+</script>
+
+<script>
+	import Layout_MDSVEX_DEFAULT from '/home/runner/work/sk-clib/sk-clib/src/lib/docs/_layouts/bare.svelte';
+</script>
+
+<Layout_MDSVEX_DEFAULT {...$$props} {...metadata}>
+<p>So, you want to contribute to the library?</p>
+</Layout_MDSVEX_DEFAULT>

package/dist/docs/contributing/library/other.svelte

@@ -0,0 +1,12 @@
+<script context="module">
+	export const metadata = {"title":"Other Doc Key","order":2};
+	const { title, order } = metadata;
+</script>
+
+<script>
+	import Layout_MDSVEX_DEFAULT from '/home/runner/work/sk-clib/sk-clib/src/lib/docs/_layouts/bare.svelte';
+</script>
+
+<Layout_MDSVEX_DEFAULT {...$$props} {...metadata}>
+<p> sma lama duma</p>
+</Layout_MDSVEX_DEFAULT>

package/dist/docs/getting_started/+page.svelte

@@ -0,0 +1,13 @@
+<script context="module">
+	export const metadata = {"order":0,"strong":true,"title":null};
+	const { order, strong, title } = metadata;
+</script>
+
+<script>
+	import Layout_MDSVEX_DEFAULT from '/home/runner/work/sk-clib/sk-clib/src/lib/docs/_layouts/bare.svelte';
+</script>
+
+<Layout_MDSVEX_DEFAULT {...$$props} {...metadata}>
+<header>sk-clib</header>
+<p>A flexible and modular component library built for my SvelteKit projects.</p>
+</Layout_MDSVEX_DEFAULT>

package/dist/docs/getting_started/installation.svelte

@@ -0,0 +1,12 @@
+<script context="module">
+	export const metadata = {"title":"📦 Installation","order":1};
+	const { title, order } = metadata;
+</script>
+
+<script>
+	import Layout_MDSVEX_DEFAULT from '/home/runner/work/sk-clib/sk-clib/src/lib/docs/_layouts/bare.svelte';
+</script>
+
+<Layout_MDSVEX_DEFAULT {...$$props} {...metadata}>
+<pre class="language-bash">{@html `<code class="language-bash">bun <span class="token function">install</span> sk-clib</code>`}</pre>
+</Layout_MDSVEX_DEFAULT>

package/dist/docs/getting_started/usage.svelte

@@ -0,0 +1,18 @@
+<script context="module">
+	export const metadata = {"title":"🔧 Usage","order":0};
+	const { title, order } = metadata;
+</script>
+
+<script>
+	import Layout_MDSVEX_DEFAULT from '/home/runner/work/sk-clib/sk-clib/src/lib/docs/_layouts/bare.svelte';
+</script>
+
+<Layout_MDSVEX_DEFAULT {...$$props} {...metadata}>
+<p>Once installed, you can import and use components like this:</p>
+<pre class="language-html">{@html `<code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
+  <span class="token keyword">import</span> <span class="token punctuation">&#123;</span> Header<span class="token punctuation">,</span> Text <span class="token punctuation">&#125;</span> <span class="token keyword">from</span> <span class="token string">'sk-clib'</span><span class="token punctuation">;</span>
+</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
+
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Header</span> <span class="token attr-name">lg</span> <span class="token attr-name">bold</span><span class="token punctuation">></span></span>Welp... Hi there :)<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Header</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Text</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lg<span class="token punctuation">"</span></span> <span class="token attr-name">weight</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bold<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Hello World<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Text</span><span class="token punctuation">></span></span></code>`}</pre>
+</Layout_MDSVEX_DEFAULT>

package/dist/docs/handler/handler.d.ts

@@ -0,0 +1,49 @@
+import type { SvelteComponent } from 'svelte';
+/**
+ * Read DocComponent object, where `.component` is just a svelteComponent that can be rendered
+ */
+export type DocComponent = {
+    path: string;
+    component: typeof SvelteComponent;
+    metadata?: Record<string, unknown>;
+};
+/**
+ * Represents a Svelte component that has been dynamically imported.
+ *
+ * @property default - The default export of the imported module, which should be a Svelte component constructor.
+ */
+export type ImportedComponent = {
+    default: typeof SvelteComponent;
+    metadata: Record<string, unknown>;
+};
+/**
+ * Handles the discovery, parsing, organization, and setup of documentation components.
+ *
+ * The `DocsHandler` class is responsible for scanning the documentation directory,
+ * parsing all documentation files, and organizing them into a nested object structure
+ * that mirrors the folder hierarchy. It also provides access to the parsed documentation
+ * components and their metadata for rendering or further processing.
+ *
+ * Usage:
+ * ```ts
+ * const handler = new DocsHandler();
+ * const docs = handler.docs;
+ * ```
+ */
+export declare class DocsHandler {
+    docs: Record<string, any>;
+    constructor();
+    /**
+     * While the naming scheme of this method is kind-of uffed-scay
+     * Basically this runs all the methods below to not only find, but parse, sort, and setup
+     * all the doc components
+     */
+    handle(): Record<string, any>;
+    /**
+     * Finds all the available documentation files, then uses the mdsvex pre-processor to convert
+     * them into render-able components before being passed through and casted to `DocComponent`
+     *
+     * @returns A list of doc components that can be rendered
+     */
+    findAll(): DocComponent[];
+}

package/dist/docs/handler/handler.js

@@ -0,0 +1,74 @@
+/**
+ * Handles the discovery, parsing, organization, and setup of documentation components.
+ *
+ * The `DocsHandler` class is responsible for scanning the documentation directory,
+ * parsing all documentation files, and organizing them into a nested object structure
+ * that mirrors the folder hierarchy. It also provides access to the parsed documentation
+ * components and their metadata for rendering or further processing.
+ *
+ * Usage:
+ * ```ts
+ * const handler = new DocsHandler();
+ * const docs = handler.docs;
+ * ```
+ */
+var DocsHandler = /** @class */ (function () {
+    function DocsHandler() {
+        this.docs = this.handle();
+    }
+    /**
+     * While the naming scheme of this method is kind-of uffed-scay
+     * Basically this runs all the methods below to not only find, but parse, sort, and setup
+     * all the doc components
+     */
+    DocsHandler.prototype.handle = function () {
+        var parsedDocs = this.findAll();
+        var root = {};
+        for (var _i = 0, parsedDocs_1 = parsedDocs; _i < parsedDocs_1.length; _i++) {
+            var entry = parsedDocs_1[_i];
+            // Remove leading slash and split path
+            var parts = entry.path.replace(/^\/?src\/lib\/docs\//, '').split('/');
+            var current = root;
+            for (var i = 0; i < parts.length; i++) {
+                var part = parts[i];
+                var isLast = i === parts.length - 1;
+                // If it's a +page.svx file, use 'root' as the key
+                if (isLast && part === '+page.svx') {
+                    current['root'] = entry;
+                }
+                else if (isLast) {
+                    // If it's another file, use the file name (without extension) as the key
+                    var fileKey = part.replace(/\.[^/.]+$/, '');
+                    current[fileKey] = entry;
+                }
+                else {
+                    // Folder: create if not exists
+                    if (!current[part])
+                        current[part] = {};
+                    current = current[part];
+                }
+            }
+        }
+        return root;
+    };
+    /**
+     * Finds all the available documentation files, then uses the mdsvex pre-processor to convert
+     * them into render-able components before being passed through and casted to `DocComponent`
+     *
+     * @returns A list of doc components that can be rendered
+     */
+    DocsHandler.prototype.findAll = function () {
+        var imported_docs = import.meta.glob('@doc/**/**/*.{md,svx}', { eager: true });
+        var parsedDocs = Object.entries(imported_docs).map(function (_a) {
+            var path = _a[0], module = _a[1];
+            return {
+                path: path,
+                component: module.default,
+                metadata: module.metadata
+            };
+        });
+        return parsedDocs;
+    };
+    return DocsHandler;
+}());
+export { DocsHandler };

package/dist/docs/handler/index.d.ts

@@ -0,0 +1 @@
+export { DocsHandler } from "./handler";

package/dist/docs/handler/index.js

@@ -0,0 +1 @@
+export { DocsHandler } from "./handler";

package/dist/docs/index.js

@@ -0,0 +1 @@
+"use strict";

package/dist/index.d.ts

@@ -1,4 +1 @@
-export { default as Flex } from "./ui/flex/components/flex.svelte";
-export { default as Frame } from "./ui/frame/components/frame.svelte";
-export { default as Header } from "./ui/header/components/header.svelte";
-export { default as Text } from "./ui/text/components/text.svelte";
+export * from "./ui";

package/dist/index.js

@@ -1,5 +1 @@
-// Reexport your entry components here
-export { default as Flex } from "./ui/flex/components/flex.svelte";
-export { default as Frame } from "./ui/frame/components/frame.svelte";
-export { default as Header } from "./ui/header/components/header.svelte";
-export { default as Text } from "./ui/text/components/text.svelte";
+export * from "./ui";

package/dist/prism.css

@@ -0,0 +1,143 @@
+/**
+ * atom-dark theme for `prism.js`
+ * Based on Atom's `atom-dark` theme: https://github.com/atom/atom-dark-syntax
+ * @author Joe Gibson (@gibsjose)
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: #c5c8c6;
+	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+	font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace;
+	direction: ltr;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	line-height: 1.5;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+	border-radius: 0.3em;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #1d1f21;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #7C7C7C;
+}
+
+.token.punctuation {
+	color: #c5c8c6;
+}
+
+.namespace {
+	opacity: .7;
+}
+
+.token.property,
+.token.keyword,
+.token.tag {
+	color: var(--color-primary);
+}
+
+.token.class-name {
+	color: #FFFFB6;
+	text-decoration: underline;
+}
+
+.token.boolean,
+.token.constant {
+	color: #99CC99;
+}
+
+.token.symbol,
+.token.deleted {
+	color: #f92672;
+}
+
+.token.number {
+	color: #FF73FD;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+	color: var(--color-secondary);
+}
+
+.token.variable {
+	color: #C6C5FE;
+}
+
+.token.operator {
+	color: #EDEDED;
+}
+
+.token.entity {
+	color: #FFFFB6;
+	cursor: help;
+}
+
+.token.url {
+	color: #96CBFE;
+}
+
+.language-css .token.string,
+.style .token.string {
+	color: #87C38A;
+}
+
+.token.atrule,
+.token.attr-value {
+	color: #F9EE98;
+}
+
+.token.function {
+	color: #DAD085;
+}
+
+.token.regex {
+	color: #E9C062;
+}
+
+.token.important {
+	color: #fd971f;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+
+.token.italic {
+	font-style: italic;
+}

package/dist/prism.d.ts

@@ -0,0 +1,46 @@
+export namespace languages {
+    export namespace markup {
+        namespace tag { }
+        namespace doctype { }
+    }
+    import html = markup;
+    export { html };
+    import mathml = markup;
+    export { mathml };
+    import svg = markup;
+    export { svg };
+    export let xml: any;
+    import ssml = xml;
+    export { ssml };
+    import atom = xml;
+    export { atom };
+    import rss = xml;
+    export { rss };
+    export let clike: {
+        comment: {
+            pattern: RegExp;
+            lookbehind: boolean;
+            greedy: boolean;
+        }[];
+        string: {
+            pattern: RegExp;
+            greedy: boolean;
+        };
+        "class-name": {
+            pattern: RegExp;
+            lookbehind: boolean;
+            inside: {
+                punctuation: RegExp;
+            };
+        };
+        keyword: RegExp;
+        boolean: RegExp;
+        function: RegExp;
+        number: RegExp;
+        operator: RegExp;
+        punctuation: RegExp;
+    };
+    export let javascript: any;
+    import js = javascript;
+    export { js };
+}