sk-clib 0.0.1 → 0.0.2

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

@@ -0,0 +1,80 @@
+<script lang="ts">
+	// --- Logic ---
+	import { cn } 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();
+
+	function addTokenIf(statement: any, token: string) {
+		if (statement === true) {
+			className += ` ${token}`;
+		}
+	}
+
+	// Flex Box
+	addTokenIf(flex, 'flex');
+	addTokenIf(row, 'flex-row');
+	addTokenIf(col, 'flex-col');
+
+	// Positioning
+	addTokenIf(center, 'items-center justify-center');
+	addTokenIf(centerx, 'items-center');
+	addTokenIf(centery, 'justify-center');
+
+	// Size Fillings
+	addTokenIf(fill, 'size-full');
+	addTokenIf(fillw, 'w-full');
+	addTokenIf(fillh, 'h-full');
+
+	// Flex Config
+	addTokenIf(noshrink, 'shrink-0');
+
+	// Aspect Ratios
+	addTokenIf(aspectSquare, 'aspect-square');
+
+	// Cursor Options
+	addTokenIf(cursorAuto, 'cursor-auto');
+	addTokenIf(cursorDefault, 'cursor-default');
+	addTokenIf(cursorPointer, 'cursor-pointer');
+</script>
+
+<div class={cn(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, {}, "flex" | "row" | "col" | "center" | "centerx" | "centery" | "fill" | "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/index.d.ts

@@ -0,0 +1 @@
+export { default as Frame } from './frame/components/frame.svelte';

package/dist/ui/index.js

@@ -0,0 +1 @@
+export { default as Frame } from './frame/components/frame.svelte';

package/dist/utils.d.ts

@@ -0,0 +1,54 @@
+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;

package/dist/utils.js

@@ -0,0 +1,95 @@
+/* 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;
+}

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.2",
+	"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"
+	}
+}