sk-clib 1.4.0 → 1.6.0

package/dist/ui/header/components/header.svelte

@@ -1,147 +1,147 @@
-<script lang="ts">
-	// --- Logic ---
-	import { cn, Tokenizer } from '../../../utils';
-	import { type Props } from '..';
-
-	// Size Class Lookup Table
-	const sizeClasses = {
-		xxl: 'text-2xl',
-		xl: 'text-xl',
-		lg: 'text-lg',
-		md: 'text-base',
-		sm: 'text-sm'
-	};
-
-	// Semantic Sizes Lookup Table
-	const semanticSizes = {
-		xxl: 'h1',
-		xl: 'h2',
-		lg: 'h3',
-		md: 'h4',
-		sm: 'h5'
-	};
-
-	// Weight Classes Lookup Table
-	const weightClasses = {
-		extrabold: 'font-extrabold',
-		bold: 'font-bold',
-		semibold: 'font-semibold',
-		regular: 'font-normal',
-		light: 'font-light'
-	};
-
-	let {
-		children,
-		class: className,
-
-		// Sizing
-		size = 'md', // Catch All
-		xxl,
-		xl,
-		lg,
-		md,
-		sm,
-
-		// Weights
-		weight = 'regular', // Catch All
-		extrabold,
-		bold,
-		semibold,
-		regular,
-		light,
-
-		// Semantic Element
-		as = undefined, // Catchall
-
-		// Italics
-		em,
-
-		...rest
-	}: Props = $props();
-
-	const tokenInstance = new Tokenizer(className);
-
-	// === Catch All statements should be applied first ===
-
-	// Apply Size Class
-	tokenInstance.addTokenIf(true, sizeClasses[size] ?? 'text-base');
-
-	// Apply Weight Class
-	tokenInstance.addTokenIf(true, weightClasses[weight] ?? 'font-normal');
-
-	// Sizing Tokens
-	tokenInstance.addTokenIf(xxl, 'text-2xl');
-	tokenInstance.addTokenIf(xl, 'text-xl');
-	tokenInstance.addTokenIf(lg, 'text-lg');
-	tokenInstance.addTokenIf(md, 'text-base');
-	tokenInstance.addTokenIf(sm, 'text-sm');
-
-	function determineSemanticViaSize() {
-		// Go in order of importance, top-down
-		if (xxl) return 'h1';
-		if (xl) return 'h2';
-		if (lg) return 'h3';
-		if (md) return 'h4';
-		if (sm) return 'h5';
-
-		// Fallback to size prop
-		return semanticSizes[size] ?? 'span';
-	}
-
-	// Weight Tokens
-	tokenInstance.addTokenIf(extrabold, 'font-extrabold');
-	tokenInstance.addTokenIf(bold, 'font-bold');
-	tokenInstance.addTokenIf(semibold, 'font-semibold');
-	tokenInstance.addTokenIf(regular, 'font-normal');
-	tokenInstance.addTokenIf(light, 'font-light');
-
-	// Italic Token
-	tokenInstance.addTokenIf(em, 'italic');
-
-	// Determine Semantic Tag
-	let semanticTag = as ?? determineSemanticViaSize();
-</script>
-
-<svelte:element this={semanticTag} class={cn(tokenInstance.className)} {...rest}>
-	{@render children?.()}
-</svelte:element>
-
-<!--@component
-	Generated by SvelteForge🔥
-
-	# Header Component
-	A semantic and styled heading component that combines typography flexibility with accessible HTML.
-
-	This component maps `size` values to both Tailwind classes and semantic tags (`h1`–`h5`),
-	while also allowing direct override with the `as` prop for full control.
-
-	## Props
-
-	- `size`: `"xxl" | "xl" | "lg" | "md" | "sm"` — sets both font size and default semantic tag.
-	- `as`: `"h1" | "h2" | "h3" | "h4" | "h5" | "span"` — override the default semantic tag.
-	- `weight`: `"extrabold" | "bold" | "semibold" | "regular" | "light"` — font-weight control.
-	- `xxl`, `xl`, `lg`, `md`, `sm`: boolean shorthands to set font size via token (overrides `size`).
-	- `extrabold`, `bold`, `semibold`, `regular`, `light`: boolean shorthands to set weight (overrides `weight`).
-	- `em`: boolean — italicizes the text.
-	- `class`: Tailwind utility classes to append additional styling.
-	- `children`: Rendered content of the header.
-
-	## Example
-
-	```svelte
-	<Header size="xl" weight="semibold">
-		Dashboard
-	</Header>
-
-	<Header lg bold em>
-		Welcome Back!
-	</Header>
-
-	<Header size="md" as="h2">
-		Settings
-	</Header>
-	```
-
-	Defaults to a `h4` tag (`md` size) with `regular` weight if not specified.
--->
-
+<script lang="ts">
+	// --- Logic ---
+	import { cn, Tokenizer } from '../../../utils';
+	import { type Props } from '..';
+
+	// Size Class Lookup Table
+	const sizeClasses = {
+		xxl: 'text-2xl',
+		xl: 'text-xl',
+		lg: 'text-lg',
+		md: 'text-base',
+		sm: 'text-sm'
+	};
+
+	// Semantic Sizes Lookup Table
+	const semanticSizes = {
+		xxl: 'h1',
+		xl: 'h2',
+		lg: 'h3',
+		md: 'h4',
+		sm: 'h5'
+	};
+
+	// Weight Classes Lookup Table
+	const weightClasses = {
+		extrabold: 'font-extrabold',
+		bold: 'font-bold',
+		semibold: 'font-semibold',
+		regular: 'font-normal',
+		light: 'font-light'
+	};
+
+	let {
+		children,
+		class: className,
+
+		// Sizing
+		size = 'md', // Catch All
+		xxl,
+		xl,
+		lg,
+		md,
+		sm,
+
+		// Weights
+		weight = 'regular', // Catch All
+		extrabold,
+		bold,
+		semibold,
+		regular,
+		light,
+
+		// Semantic Element
+		as = undefined, // Catchall
+
+		// Italics
+		em,
+
+		...rest
+	}: Props = $props();
+
+	const tokenInstance = new Tokenizer(className);
+
+	// === Catch All statements should be applied first ===
+
+	// Apply Size Class
+	tokenInstance.addTokenIf(true, sizeClasses[size] ?? 'text-base');
+
+	// Apply Weight Class
+	tokenInstance.addTokenIf(true, weightClasses[weight] ?? 'font-normal');
+
+	// Sizing Tokens
+	tokenInstance.addTokenIf(xxl, 'text-2xl');
+	tokenInstance.addTokenIf(xl, 'text-xl');
+	tokenInstance.addTokenIf(lg, 'text-lg');
+	tokenInstance.addTokenIf(md, 'text-base');
+	tokenInstance.addTokenIf(sm, 'text-sm');
+
+	function determineSemanticViaSize() {
+		// Go in order of importance, top-down
+		if (xxl) return 'h1';
+		if (xl) return 'h2';
+		if (lg) return 'h3';
+		if (md) return 'h4';
+		if (sm) return 'h5';
+
+		// Fallback to size prop
+		return semanticSizes[size] ?? 'span';
+	}
+
+	// Weight Tokens
+	tokenInstance.addTokenIf(extrabold, 'font-extrabold');
+	tokenInstance.addTokenIf(bold, 'font-bold');
+	tokenInstance.addTokenIf(semibold, 'font-semibold');
+	tokenInstance.addTokenIf(regular, 'font-normal');
+	tokenInstance.addTokenIf(light, 'font-light');
+
+	// Italic Token
+	tokenInstance.addTokenIf(em, 'italic');
+
+	// Determine Semantic Tag
+	let semanticTag = as ?? determineSemanticViaSize();
+</script>
+
+<svelte:element this={semanticTag} class={cn(tokenInstance.className)} {...rest}>
+	{@render children?.()}
+</svelte:element>
+
+<!--@component
+	Generated by SvelteForge🔥
+
+	# Header Component
+	A semantic and styled heading component that combines typography flexibility with accessible HTML.
+
+	This component maps `size` values to both Tailwind classes and semantic tags (`h1`–`h5`),
+	while also allowing direct override with the `as` prop for full control.
+
+	## Props
+
+	- `size`: `"xxl" | "xl" | "lg" | "md" | "sm"` — sets both font size and default semantic tag.
+	- `as`: `"h1" | "h2" | "h3" | "h4" | "h5" | "span"` — override the default semantic tag.
+	- `weight`: `"extrabold" | "bold" | "semibold" | "regular" | "light"` — font-weight control.
+	- `xxl`, `xl`, `lg`, `md`, `sm`: boolean shorthands to set font size via token (overrides `size`).
+	- `extrabold`, `bold`, `semibold`, `regular`, `light`: boolean shorthands to set weight (overrides `weight`).
+	- `em`: boolean — italicizes the text.
+	- `class`: Tailwind utility classes to append additional styling.
+	- `children`: Rendered content of the header.
+
+	## Example
+
+	```svelte
+	<Header size="xl" weight="semibold">
+		Dashboard
+	</Header>
+
+	<Header lg bold em>
+		Welcome Back!
+	</Header>
+
+	<Header size="md" as="h2">
+		Settings
+	</Header>
+	```
+
+	Defaults to a `h4` tag (`md` size) with `regular` weight if not specified.
+-->
+

package/dist/ui/spacer/components/spacer.svelte

@@ -1,50 +1,50 @@
-<script lang="ts">
-	// --- Logic ---
-	import { cn, Tokenizer } from '../../../utils';
-	import type { Props } from '..';
-
-	let {
-		children,
-		class: className,
-
-		// Horizontal / Vertical
-		horizontal = $bindable(undefined),
-		vertical = $bindable(undefined),
-
-		// Width / Height
-		width = $bindable(undefined),
-		height = $bindable(undefined),
-
-		// Catch-alls
-		...rest
-	}: Props = $props();
-
-	const tokenInstance = new Tokenizer(className);
-
-	// Horizontal / Vertical
-	tokenInstance.addTokenIf(horizontal || width, 'w-full');
-	tokenInstance.addTokenIf(vertical || height, 'h-full');
-
-	if ([horizontal, vertical, width, height].every((val) => val === undefined)) {
-		tokenInstance.addTokenIf(true, 'size-full');
-	}
-
-</script>
-
-<div class={cn(tokenInstance.className)} {...rest}>
-	{@render children?.()}
-</div>
-
-<!--@component
-    ---
-    name: Spacer
-    props:
-        horizontal (undefined|boolean) = undefined: Expands the component to the most width it can occupy
-        vertical (undefined|boolean) = undefined: Expands the component to the most height it can occupy
-        width (undefined|boolean) = undefined: Expands the component to the most width it can occupy
-        height (undefined|boolean) = undefined: Expands the component to the most height it can occupy
-    ---
-    
-    Element that is soley made to fill in space. If nothing is passed, assumes 'size-full',
-    otherwise, it fills the direction you tell it to.
--->
+<script lang="ts">
+	// --- Logic ---
+	import { cn, Tokenizer } from '../../../utils';
+	import type { Props } from '..';
+
+	let {
+		children,
+		class: className,
+
+		// Horizontal / Vertical
+		horizontal = $bindable(undefined),
+		vertical = $bindable(undefined),
+
+		// Width / Height
+		width = $bindable(undefined),
+		height = $bindable(undefined),
+
+		// Catch-alls
+		...rest
+	}: Props = $props();
+
+	const tokenInstance = new Tokenizer(className);
+
+	// Horizontal / Vertical
+	tokenInstance.addTokenIf(horizontal || width, 'w-full');
+	tokenInstance.addTokenIf(vertical || height, 'h-full');
+
+	if ([horizontal, vertical, width, height].every((val) => val === undefined)) {
+		tokenInstance.addTokenIf(true, 'size-full');
+	}
+
+</script>
+
+<div class={cn(tokenInstance.className)} {...rest}>
+	{@render children?.()}
+</div>
+
+<!--@component
+    ---
+    name: Spacer
+    props:
+        horizontal (undefined|boolean) = undefined: Expands the component to the most width it can occupy
+        vertical (undefined|boolean) = undefined: Expands the component to the most height it can occupy
+        width (undefined|boolean) = undefined: Expands the component to the most width it can occupy
+        height (undefined|boolean) = undefined: Expands the component to the most height it can occupy
+    ---
+    
+    Element that is soley made to fill in space. If nothing is passed, assumes 'size-full',
+    otherwise, it fills the direction you tell it to.
+-->

package/dist/ui/text/components/text.svelte

@@ -1,90 +1,90 @@
-<script lang="ts">
-
-    // --- Logic ---
-    import { cn, Tokenizer } from '../../../utils';
-    import type { Props } from ".."
-
-    // Size Class Lookup Table
-	const sizeClasses = {
-		xxl: 'text-lg',
-		xl: 'text-base',
-		lg: 'text-sm',
-		md: 'text-xs',
-		sm: 'text-xxs'
-	};
-    
-    // Weight Classes Lookup Table
-	const weightClasses = {
-		extrabold: 'font-extrabold',
-		bold: 'font-bold',
-		semibold: 'font-semibold',
-		regular: 'font-normal',
-		light: 'font-light'
-	};
-    
-    let {
-        children,
-        class: className,
-
-        // Sizing
-		size = 'md', // Catch All
-		xxl,
-		xl,
-		lg,
-		md,
-		sm,
-
-        // Weights
-		weight = 'regular', // Catch All
-		extrabold,
-		bold,
-		semibold,
-		regular,
-		light,
-
-        // Semantic Element
-		as = "span", // Catchall
-
-        // Italics
-		em,
-
-        // Other Catchall
-        ...rest
-    }: Props = $props();
-
-    const tokenInstance = new Tokenizer(className);
-
-    // === Catch All statements should be applied first ===
-
-    // Apply Size Class
-    tokenInstance.addTokenIf(true, sizeClasses[size] ?? 'text-base');
-
-    // Apply Weight Class
-    tokenInstance.addTokenIf(true, weightClasses[weight] ?? 'font-normal');
-
-    // Sizing Tokens
-    tokenInstance.addTokenIf(xxl, sizeClasses['xxl']);
-    tokenInstance.addTokenIf(xl, sizeClasses['xl']);
-    tokenInstance.addTokenIf(lg, sizeClasses['lg']);
-    tokenInstance.addTokenIf(md, sizeClasses['md']);
-    tokenInstance.addTokenIf(sm, sizeClasses['sm']);
-
-    // Weight Tokens
-    tokenInstance.addTokenIf(extrabold, weightClasses['extrabold']);
-    tokenInstance.addTokenIf(bold, weightClasses['bold']);
-    tokenInstance.addTokenIf(semibold, weightClasses['semibold']);
-    tokenInstance.addTokenIf(regular, weightClasses['regular']);
-    tokenInstance.addTokenIf(light, weightClasses['light']);
-
-    // Italic Token
-    tokenInstance.addTokenIf(em, 'italic')
-</script>
-
-<svelte:element this={as} class={cn(tokenInstance.className)} {...rest}>
-	{@render children?.()}
-</svelte:element>
-
-<!--@component
-    Generated by SvelteForge🔥
--->
-
+<script lang="ts">
+
+    // --- Logic ---
+    import { cn, Tokenizer } from '../../../utils';
+    import type { Props } from ".."
+
+    // Size Class Lookup Table
+	const sizeClasses = {
+		xxl: 'text-lg',
+		xl: 'text-base',
+		lg: 'text-sm',
+		md: 'text-xs',
+		sm: 'text-xxs'
+	};
+    
+    // Weight Classes Lookup Table
+	const weightClasses = {
+		extrabold: 'font-extrabold',
+		bold: 'font-bold',
+		semibold: 'font-semibold',
+		regular: 'font-normal',
+		light: 'font-light'
+	};
+    
+    let {
+        children,
+        class: className,
+
+        // Sizing
+		size = 'md', // Catch All
+		xxl,
+		xl,
+		lg,
+		md,
+		sm,
+
+        // Weights
+		weight = 'regular', // Catch All
+		extrabold,
+		bold,
+		semibold,
+		regular,
+		light,
+
+        // Semantic Element
+		as = "span", // Catchall
+
+        // Italics
+		em,
+
+        // Other Catchall
+        ...rest
+    }: Props = $props();
+
+    const tokenInstance = new Tokenizer(className);
+
+    // === Catch All statements should be applied first ===
+
+    // Apply Size Class
+    tokenInstance.addTokenIf(true, sizeClasses[size] ?? 'text-base');
+
+    // Apply Weight Class
+    tokenInstance.addTokenIf(true, weightClasses[weight] ?? 'font-normal');
+
+    // Sizing Tokens
+    tokenInstance.addTokenIf(xxl, sizeClasses['xxl']);
+    tokenInstance.addTokenIf(xl, sizeClasses['xl']);
+    tokenInstance.addTokenIf(lg, sizeClasses['lg']);
+    tokenInstance.addTokenIf(md, sizeClasses['md']);
+    tokenInstance.addTokenIf(sm, sizeClasses['sm']);
+
+    // Weight Tokens
+    tokenInstance.addTokenIf(extrabold, weightClasses['extrabold']);
+    tokenInstance.addTokenIf(bold, weightClasses['bold']);
+    tokenInstance.addTokenIf(semibold, weightClasses['semibold']);
+    tokenInstance.addTokenIf(regular, weightClasses['regular']);
+    tokenInstance.addTokenIf(light, weightClasses['light']);
+
+    // Italic Token
+    tokenInstance.addTokenIf(em, 'italic')
+</script>
+
+<svelte:element this={as} class={cn(tokenInstance.className)} {...rest}>
+	{@render children?.()}
+</svelte:element>
+
+<!--@component
+    Generated by SvelteForge🔥
+-->
+

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sk-clib",
-	"version": "1.4.0",
+	"version": "1.6.0",
 	"type": "module",
 	"files": [
 		"dist",
@@ -30,8 +30,6 @@
 		"build": "svelte-package && npm run css_build",
 		"webbuild": "vite build",
 		"prepublishOnly": "npm run build && publint --skip-pack",
-		"dev": "vite dev",
-		"preview": "vite preview",
 		"check": "svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
 		"format": "prettier --write .",
@@ -69,6 +67,7 @@
 		"@semantic-release/changelog": "^6.0.3",
 		"@semantic-release/git": "^10.0.1",
 		"@semantic-release/npm": "^12.0.1",
+		"@sveltejs/adapter-auto": "^6.0.1",
 		"@sveltejs/adapter-static": "^3.0.8",
 		"@tailwindcss/cli": "^4.1.5",
 		"@tailwindcss/vite": "^4.1.7",

package/dist/docs/DocTree.svelte

@@ -1,67 +0,0 @@
-<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}