sk-clib 0.0.1 → 0.0.3

package/README.md

@@ -1,58 +1,61 @@
-# Svelte library
+# sk-clib
 
-Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).
+A flexible and modular component library built for my SvelteKit projects.
 
-Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
-
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
+## 📦 Installation
 
 ```bash
-# create a new project in the current directory
-npx sv create
-
-# create a new project in my-app
-npx sv create my-app
+bun install sk-clib
 ```
 
-## Developing
+## 🔧 Usage
 
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+Once installed, you can import and use components like this:
 
-```bash
-npm run dev
+```svelte
+<script>
+  import { Header, Text } from 'sk-clib';
+</script>
 
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
+<Header lg bold>Welp... Hi there :)</Header>
+<Text size="lg" weight="bold">Hello World</Text>
 ```
 
-Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+If you're using path aliases, make sure to configure them properly in your `tsconfig.json` or `jsconfig.json`.
 
-## Building
+## 🛠 Development
 
-To build your library:
+To contribute or develop locally:
 
 ```bash
-npm run package
+bun clone https://github.com/TreltaSev/sk-clib.git
+cd sk-clib
+bun install
+bun run dev
 ```
 
-To create a production version of your showcase app:
+This will launch the SvelteKit dev environment so you can view and test components live.
 
-```bash
-npm run build
-```
+### Commands
 
-You can preview the production build with `npm run preview`.
+* `npm run dev` – Start development server with live preview
+* `npm run build` – Build the library for publishing
+* `npm run lint` – Lint codebase
+* `npm run check` – Run type checking
+* `npm run test` – (If applicable) Run tests
 
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+## ✅ Publishing
 
-## Publishing
+Make sure everything builds correctly:
 
-Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+```bash
+bun run build
+```
 
-To publish your library to [npm](https://www.npmjs.com):
+Then publish:
 
 ```bash
-npm publish
+bun publish
 ```
+
+> Ensure your version is bumped and `package.json` is clean of any local dependencies before publishing.

package/dist/index.d.ts

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

package/dist/ui/flex/components/flex.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+
+    // --- Components ---
+    import { Frame } from "../.."
+
+    // --- Logic ---
+    import { cn } from '../../../utils';
+    import type { Props } from ".."
+    
+    let {
+        children,
+        class: className,
+        ...rest
+    }: Props = $props();
+
+</script>
+
+<Frame class={ cn(className) } {...rest} flex>
+    {@render children?.()}
+</Frame>
+
+<!--@component
+    Generated by SvelteForge🔥
+
+    # Flex Component
+    Wrapper component for Frame with the flex attribute passed
+-->
+

package/dist/ui/flex/components/flex.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Props } from "..";
+/**
+ * Generated by SvelteForge🔥
+ *
+ * # Flex Component
+ * Wrapper component for Frame with the flex attribute passed
+ */
+declare const Flex: import("svelte").Component<Props, {}, "">;
+type Flex = ReturnType<typeof Flex>;
+export default Flex;

package/dist/ui/flex/index.d.ts

@@ -0,0 +1,2 @@
+export { default as _, default as Root } from "./components/flex.svelte";
+export type { tFlexProps as Props, } from "./types";

package/dist/ui/flex/index.js

@@ -0,0 +1 @@
+export { default as _, default as Root } from "./components/flex.svelte";

package/dist/ui/flex/types.d.ts

@@ -0,0 +1,2 @@
+import type { tFrameProps } from "../frame/types.js";
+export type tFlexProps = tFrameProps & {};

package/dist/ui/flex/types.js

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

package/dist/ui/frame/components/frame.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+	// --- Logic ---
+	import { cn, Tokenizer } from '../../../utils';
+	import type { Props } from '..';
+
+	let {
+		children,
+		class: className,
+		flex = $bindable(undefined),
+		row = $bindable(undefined),
+		col = $bindable(undefined),
+		center = $bindable(undefined),
+		centerx = $bindable(undefined),
+		centery = $bindable(undefined),
+		fill = $bindable(undefined),
+		fillw = $bindable(undefined),
+		fillh = $bindable(undefined),
+		noshrink = $bindable(undefined),
+		aspectSquare = $bindable(undefined),
+		cursorAuto = $bindable(undefined),
+		cursorDefault = $bindable(undefined),
+		cursorPointer = $bindable(undefined),
+		...rest
+	}: Props = $props();
+
+	const tokenInstance = new Tokenizer(className);
+
+
+	function addTokenIf(statement: any, token: string) {
+		if (statement === true) {
+			className += ` ${token}`;
+		}
+	}
+
+	// Flex Box
+	tokenInstance.addTokenIf(flex, 'flex');
+	tokenInstance.addTokenIf(row, 'flex-row');
+	tokenInstance.addTokenIf(col, 'flex-col');
+
+	// Positioning
+	tokenInstance.addTokenIf(center, 'items-center justify-center');
+	tokenInstance.addTokenIf(centerx, 'items-center');
+	tokenInstance.addTokenIf(centery, 'justify-center');
+
+	// Size Fillings
+	tokenInstance.addTokenIf(fill, 'size-full');
+	tokenInstance.addTokenIf(fillw, 'w-full');
+	tokenInstance.addTokenIf(fillh, 'h-full');
+
+	// Flex Config
+	tokenInstance.addTokenIf(noshrink, 'shrink-0');
+
+	// Aspect Ratios
+	tokenInstance.addTokenIf(aspectSquare, 'aspect-square');
+
+	// Cursor Options
+	tokenInstance.addTokenIf(cursorAuto, 'cursor-auto');
+	tokenInstance.addTokenIf(cursorDefault, 'cursor-default');
+	tokenInstance.addTokenIf(cursorPointer, 'cursor-pointer');
+</script>
+
+<div class={cn(tokenInstance.className)} {...rest}>
+	{@render children?.()}
+</div>
+
+<!--@component
+    Generated by SvelteForge🔥 [Component Template]
+
+    # Frame Component
+    A simple wrapper for flexbox and other layout options.
+    This component is a wrapper for the `div` element, with additional classes and properties to control layout and styling.
+    It is designed to be used in conjunction with other components to create complex layouts.
+
+    ## Usage
+    ```svelte
+    <Frame class="my-frame" flex row center fill>
+        <ChildComponent />
+    </Frame>
+    ```
+
+    This will create a flex container that is a row, centered, and fills the available space.
+    The `class` prop can be used to add additional classes to the frame, and the `children` prop can be used to pass in child components.
+-->

package/dist/ui/frame/components/frame.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Props } from '..';
+/**
+ * Generated by SvelteForge🔥 [Component Template]
+ *
+ * # Frame Component
+ * A simple wrapper for flexbox and other layout options.
+ * This component is a wrapper for the `div` element, with additional classes and properties to control layout and styling.
+ * It is designed to be used in conjunction with other components to create complex layouts.
+ *
+ * ## Usage
+ * ```svelte
+ * <Frame class="my-frame" flex row center fill>
+ *     <ChildComponent />
+ * </Frame>
+ * ```
+ *
+ * This will create a flex container that is a row, centered, and fills the available space.
+ * The `class` prop can be used to add additional classes to the frame, and the `children` prop can be used to pass in child components.
+ */
+declare const Frame: import("svelte").Component<Props, {}, "fill" | "flex" | "row" | "col" | "centerx" | "centery" | "center" | "fillw" | "fillh" | "noshrink" | "aspectSquare" | "cursorAuto" | "cursorDefault" | "cursorPointer">;
+type Frame = ReturnType<typeof Frame>;
+export default Frame;

package/dist/ui/frame/index.d.ts

@@ -0,0 +1,2 @@
+export { default as _, default as Root } from "./components/frame.svelte";
+export type { tFrameProps as Props, } from "./types";

package/dist/ui/frame/index.js

@@ -0,0 +1 @@
+export { default as _, default as Root } from "./components/frame.svelte";

package/dist/ui/frame/types.d.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from "svelte/elements";
+export type tFrameProps = HTMLAttributes<HTMLDivElement> & {
+    flex?: boolean;
+    row?: boolean;
+    col?: boolean;
+    centerx?: boolean;
+    centery?: boolean;
+    center?: boolean;
+    fill?: boolean;
+    fillw?: boolean;
+    fillh?: boolean;
+    noshrink?: boolean;
+    aspectSquare?: boolean;
+    cursorAuto?: boolean;
+    cursorDefault?: boolean;
+    cursorPointer?: boolean;
+};

package/dist/ui/frame/types.js

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

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

@@ -0,0 +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.
+-->
+

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

@@ -0,0 +1,42 @@
+import { type Props } from '..';
+/**
+ * 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.
+ */
+declare const Header: import("svelte").Component<Props, {}, "">;
+type Header = ReturnType<typeof Header>;
+export default Header;

package/dist/ui/header/index.d.ts

@@ -0,0 +1,2 @@
+export { default as _, default as Root } from "./components/header.svelte";
+export type { tHeaderProps as Props, tHeaderSizes as Sizes, tHeaderWeights as Weights } from "./types";

package/dist/ui/header/index.js

@@ -0,0 +1 @@
+export { default as _, default as Root } from "./components/header.svelte";

package/dist/ui/header/types.d.ts

@@ -0,0 +1,31 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export type tHeaderSizes = {
+    xxl: 'h1';
+    xl: 'h2';
+    lg: 'h3';
+    md: 'h4';
+    sm: 'h5';
+};
+export type tHeaderWeights = {
+    light: 'font-light';
+    regular: 'font-normal';
+    semibold: 'font-semibold';
+    bold: 'font-bold';
+    extrabold: 'font-extrabold';
+};
+export type tHeaderProps = HTMLAttributes<HTMLDivElement> & {
+    size?: keyof tHeaderSizes;
+    xxl?: boolean;
+    xl?: boolean;
+    lg?: boolean;
+    md?: boolean;
+    sm?: boolean;
+    as?: tHeaderSizes[keyof tHeaderSizes];
+    weight?: keyof tHeaderWeights;
+    extrabold?: boolean;
+    bold?: boolean;
+    semibold?: boolean;
+    regular?: boolean;
+    light?: boolean;
+    em?: boolean;
+};

package/dist/ui/header/types.js

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

package/dist/ui/index.d.ts

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

package/dist/ui/index.js

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

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

@@ -0,0 +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🔥
+-->
+

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

@@ -0,0 +1,5 @@
+import type { Props } from "..";
+/** Generated by SvelteForge🔥 */
+declare const Text: import("svelte").Component<Props, {}, "">;
+type Text = ReturnType<typeof Text>;
+export default Text;

package/dist/ui/text/index.d.ts

@@ -0,0 +1,2 @@
+export { default as _, default as Root } from "./components/text.svelte";
+export type { tTextProps as Props, } from "./types";

package/dist/ui/text/index.js

@@ -0,0 +1 @@
+export { default as _, default as Root } from "./components/text.svelte";

package/dist/ui/text/types.d.ts

@@ -0,0 +1,34 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { tHeaderWeights } from '../header/types';
+export type tTextSizes = {
+    xxl: 'h1';
+    xl: 'h2';
+    lg: 'h3';
+    md: 'h4';
+    sm: 'h5';
+};
+export declare const tags: readonly ["p", "blockquote", "q", "cite", "abbr", "dfn", "time", "address", "code", "pre", "samp", "kbd", "var", "strong", "em", "mark", "small", "sub", "sup", "b", "i", "u", "span"];
+export type tTextTypes = (typeof tags)[number];
+export type tTextWeights = {
+    light: 'font-light';
+    regular: 'font-normal';
+    semibold: 'font-semibold';
+    bold: 'font-bold';
+    extrabold: 'font-extrabold';
+};
+export type tTextProps = HTMLAttributes<HTMLDivElement> & {
+    as?: tTextTypes;
+    size?: keyof tTextSizes;
+    xxl?: boolean;
+    xl?: boolean;
+    lg?: boolean;
+    md?: boolean;
+    sm?: boolean;
+    weight?: keyof tHeaderWeights;
+    extrabold?: boolean;
+    bold?: boolean;
+    semibold?: boolean;
+    regular?: boolean;
+    light?: boolean;
+    em?: boolean;
+};

package/dist/ui/text/types.js

@@ -0,0 +1,25 @@
+export const tags = [
+    'p',
+    'blockquote',
+    'q',
+    'cite',
+    'abbr',
+    'dfn',
+    'time',
+    'address',
+    'code',
+    'pre',
+    'samp',
+    'kbd',
+    'var',
+    'strong',
+    'em',
+    'mark',
+    'small',
+    'sub',
+    'sup',
+    'b',
+    'i',
+    'u',
+    'span'
+];

package/dist/utils.d.ts

@@ -0,0 +1,81 @@
+import { type ClassValue } from 'clsx';
+/**
+ * Fix class naming conflicts by utilizing both :function:`twMerge` and :function:`clsx`
+ * clsx allows very precise boolean specific class loading and twMerge removes all the conflicting but unused classes.
+ * @param inputs All base classes
+ * @returns Merged classes
+ */
+export declare function cn(...inputs: (ClassValue | unknown)[]): string;
+/**
+ * Allows for easy creation of data attribute specific classes in tailwind.
+ * First, you create the builder while specifying the root selector. then you can call
+ * `cn_a.build('bg-black')`.
+ *
+ * ## Usage
+ * ```ts
+ * const builder = new cn_a("state=toggled")
+ * builder.build("bg-black text-white") // >> "data-[state=toggled]:bg-black data-[state=toggled]:text-white"
+ *
+ * // Or
+ * cn_a.buildx("state=toggled", "bg-black text-white") // >> "data-[state=toggled]:bg-black data-[state=toggled]:text-white"
+ *
+ * ```
+ */
+export declare class cn_a {
+    selector: string | undefined;
+    constructor(selector: string);
+    /**
+     * Returns a string of all the classes with the attribute selector attached
+     * @param {string} classes tailwind/css classes string
+     * @returns
+     */
+    build(classes: string): string;
+    /**
+     *
+     * @param selector some sort of boolean expression like state=toggled...
+     * @returns `data-[${selector}]`
+     */
+    static wrap_selector(selector: string): string;
+    /**
+     *
+     * @param selector data attribute selector like state=toggled
+     * @param classes
+     */
+    static buildx(selector: string, classes: string): string;
+}
+export declare function expand(node: HTMLElement, params: any, { duration }: {
+    duration?: number | undefined;
+}): {
+    duration: number;
+    easing: any;
+    css: (t: number) => string;
+};
+export declare function uuidv4(): string;
+export declare function reference_package_to_form(package_name: string, location?: string | undefined): string;
+/**
+ * A utility class for dynamically building class names based on conditional logic.
+ * This class is particularly useful for managing conditional class tokens in a structured way.
+ *
+ * ## Example Usage
+ * ```typescript
+ * let sm: undefined | boolean = true;
+ * const tokenInstance = new Tokenizer();
+ * tokenInstance.addTokenIf(sm, 'text-small');
+ *
+ * <element class={cn(tokenInstance.className)}/>
+ * ```
+ */
+export declare class Tokenizer {
+    className: string | ClassValue;
+    /**
+     * Initializes a new instance of the `Tokenizer` class with an optional initial class name.
+     * @param className The initial class name to start with. Defaults to an empty string.
+     */
+    constructor(className?: string | null | undefined | ClassValue);
+    /**
+     * Adds a class token to the `className` property if the provided statement evaluates to `true`.
+     * @param statement A condition that determines whether the token should be added.
+     * @param token The class token to add if the condition is met.
+     */
+    addTokenIf(statement: any, token: string): void;
+}

package/dist/utils.js

@@ -0,0 +1,128 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { base } from '$app/paths';
+import { clsx } from 'clsx';
+import { cubicOut } from 'svelte/easing';
+import { twMerge } from 'tailwind-merge';
+/**
+ * Fix class naming conflicts by utilizing both :function:`twMerge` and :function:`clsx`
+ * clsx allows very precise boolean specific class loading and twMerge removes all the conflicting but unused classes.
+ * @param inputs All base classes
+ * @returns Merged classes
+ */
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}
+/**
+ * Allows for easy creation of data attribute specific classes in tailwind.
+ * First, you create the builder while specifying the root selector. then you can call
+ * `cn_a.build('bg-black')`.
+ *
+ * ## Usage
+ * ```ts
+ * const builder = new cn_a("state=toggled")
+ * builder.build("bg-black text-white") // >> "data-[state=toggled]:bg-black data-[state=toggled]:text-white"
+ *
+ * // Or
+ * cn_a.buildx("state=toggled", "bg-black text-white") // >> "data-[state=toggled]:bg-black data-[state=toggled]:text-white"
+ *
+ * ```
+ */
+export class cn_a {
+    selector;
+    constructor(selector) {
+        this.selector = selector;
+    }
+    /**
+     * Returns a string of all the classes with the attribute selector attached
+     * @param {string} classes tailwind/css classes string
+     * @returns
+     */
+    build(classes) {
+        // Make sure to stop if selector is not specified
+        if (!this.selector) {
+            console.warn('[classname_attribute_builder] Failed to build: Selector Undefined, Tried to build:', classes);
+            return '';
+        }
+        // Convert a class string such as "bg-black flex flex-col" into ["bg-black", "flex", "flex-col"]
+        const classes_indexed = classes.split(' ');
+        const buffer = [];
+        classes_indexed.forEach((_class) => {
+            buffer.push(`${cn_a.wrap_selector(this.selector || '')}:${_class}`); // Join selector and class
+        });
+        return buffer.join(' '); // Return all the changes split
+    }
+    /**
+     *
+     * @param selector some sort of boolean expression like state=toggled...
+     * @returns `data-[${selector}]`
+     */
+    static wrap_selector(selector) {
+        return `data-[${selector}]`;
+    }
+    /**
+     *
+     * @param selector data attribute selector like state=toggled
+     * @param classes
+     */
+    static buildx(selector, classes) {
+        // Convert a class string such as "bg-black flex flex-col" into ["bg-black", "flex", "flex-col"]
+        const classes_indexed = classes.split(' ');
+        const buffer = [];
+        classes_indexed.forEach((_class) => {
+            buffer.push(`${cn_a.wrap_selector(selector || '')}:${_class}`); // Join selector and class
+        });
+        return buffer.join(' '); // Return all the changes split
+    }
+}
+export function expand(node, params, { duration = 300 }) {
+    const height = node.scrollHeight;
+    return {
+        duration,
+        easing: params.easing || cubicOut,
+        css: (t) => `height: ${t * height}px; opacity: ${t}; margin-top: ${t * ((params.offset !== undefined) ? params.offset : 8)}px;`
+    };
+}
+export function uuidv4() {
+    return '10000000-1000-4000-8000-100000000000'.replace(/[018]/g, (c) => (+c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (+c / 4)))).toString(16));
+}
+export function reference_package_to_form(package_name, location = undefined) {
+    let buff = `?tour-package=${package_name}`;
+    if (location !== undefined) {
+        buff += `&location=${location}`;
+    }
+    window.location.href = `${base}/form${buff}`;
+    return buff;
+}
+/**
+ * A utility class for dynamically building class names based on conditional logic.
+ * This class is particularly useful for managing conditional class tokens in a structured way.
+ *
+ * ## Example Usage
+ * ```typescript
+ * let sm: undefined | boolean = true;
+ * const tokenInstance = new Tokenizer();
+ * tokenInstance.addTokenIf(sm, 'text-small');
+ *
+ * <element class={cn(tokenInstance.className)}/>
+ * ```
+ */
+export class Tokenizer {
+    className = "";
+    /**
+     * Initializes a new instance of the `Tokenizer` class with an optional initial class name.
+     * @param className The initial class name to start with. Defaults to an empty string.
+     */
+    constructor(className = "") {
+        this.className = className || "";
+    }
+    /**
+     * Adds a class token to the `className` property if the provided statement evaluates to `true`.
+     * @param statement A condition that determines whether the token should be added.
+     * @param token The class token to add if the condition is met.
+     */
+    addTokenIf(statement, token) {
+        if (statement === true) {
+            this.className += ` ${token}`;
+        }
+    }
+}

package/package.json

@@ -1,62 +1,65 @@
-{
-	"name": "sk-clib",
-	"version": "0.0.1",
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build && npm run prepack",
-		"preview": "vite preview",
-		"prepare": "svelte-kit sync || echo ''",
-		"prepack": "svelte-kit sync && svelte-package && publint",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"format": "prettier --write .",
-		"lint": "prettier --check . && eslint ."
-	},
-	"files": [
-		"dist",
-		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*"
-	],
-	"sideEffects": [
-		"**/*.css"
-	],
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"type": "module",
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js"
-		}
-	},
-	"peerDependencies": {
-		"svelte": "^5.0.0"
-	},
-	"devDependencies": {
-		"@eslint/compat": "^1.2.5",
-		"@eslint/js": "^9.18.0",
-		"@sveltejs/adapter-auto": "^6.0.0",
-		"@sveltejs/kit": "^2.16.0",
-		"@sveltejs/package": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^5.0.0",
-		"@tailwindcss/vite": "^4.0.0",
-		"eslint": "^9.18.0",
-		"eslint-config-prettier": "^10.0.1",
-		"eslint-plugin-svelte": "^3.0.0",
-		"globals": "^16.0.0",
-		"prettier": "^3.4.2",
-		"prettier-plugin-svelte": "^3.3.3",
-		"prettier-plugin-tailwindcss": "^0.6.11",
-		"publint": "^0.3.2",
-		"svelte": "^5.0.0",
-		"svelte-check": "^4.0.0",
-		"tailwindcss": "^4.0.0",
-		"typescript": "^5.0.0",
-		"typescript-eslint": "^8.20.0",
-		"vite": "^6.2.6"
-	},
-	"keywords": [
-		"svelte"
-	],
-	"license": "MIT"
-}
+{
+	"name": "sk-clib",
+	"version": "0.0.3",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run prepack",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"prepack": "svelte-kit sync && svelte-package && publint",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"format": "prettier --write .",
+		"lint": "prettier --check . && eslint ."
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"peerDependencies": {
+		"svelte": "^5.0.0"
+	},
+	"devDependencies": {
+		"@eslint/compat": "^1.2.5",
+		"@eslint/js": "^9.18.0",
+		"@sveltejs/adapter-auto": "^6.0.0",
+		"@sveltejs/kit": "^2.16.0",
+		"@sveltejs/package": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^5.0.0",
+		"@tailwindcss/vite": "^4.0.0",
+		"eslint": "^9.18.0",
+		"eslint-config-prettier": "^10.0.1",
+		"eslint-plugin-svelte": "^3.0.0",
+		"globals": "^16.0.0",
+		"prettier": "^3.4.2",
+		"prettier-plugin-svelte": "^3.3.3",
+		"prettier-plugin-tailwindcss": "^0.6.11",
+		"publint": "^0.3.2",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
+		"tailwindcss": "^4.0.0",
+		"typescript": "^5.0.0",
+		"typescript-eslint": "^8.20.0",
+		"vite": "^6.2.6"
+	},
+	"keywords": [
+		"svelte"
+	],
+	"license": "MIT",
+	"dependencies": {
+		"tailwind-merge": "^3.2.0"
+	}
+}