sk-clib 1.18.9 → 2.0.4

package/dist/utils/classname.js

@@ -0,0 +1,107 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { clsx } from 'clsx';
+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
+    }
+}
+/**
+ * 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/dist/utils/crypto.d.ts

@@ -0,0 +1 @@
+export declare function uuidv4(): string;

package/dist/utils/crypto.js

@@ -0,0 +1,3 @@
+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));
+}

package/dist/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from './classname';
+export * from './number';
+export * from './string';

package/dist/utils/index.js

@@ -0,0 +1,3 @@
+export * from './classname';
+export * from './number';
+export * from './string';

package/dist/utils/number.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Clamps a number between a given min and max
+ *
+ * @param number Number to clamp
+ * @param min Minimum the number can be
+ * @param max Maximum the number can be
+ */
+export declare function clamp(number: number, min: number, max: number): number;

package/dist/utils/number.js

@@ -0,0 +1,10 @@
+/**
+ * Clamps a number between a given min and max
+ *
+ * @param number Number to clamp
+ * @param min Minimum the number can be
+ * @param max Maximum the number can be
+ */
+export function clamp(number, min, max) {
+    return Math.max(min, Math.min(number, max));
+}

package/dist/utils/string.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Converts a string like "test_string" or "test-string" to "testString"
+ * @param s String to convert
+ */
+export declare function snakeOrKebabToCamel(s: string): string;
+/**
+ * Converts a snake_case string to kebab-case.
+ *
+ * Examples:
+ * - "test_string" -> "test-string"
+ * - "__Foo__Bar__" -> "foo-bar"
+ * - "already-kebab" -> "already-kebab"
+ *
+ * @param s Input string in snake_case (or similar).
+ * @returns The input converted to kebab-case (lowercased, underscores -> hyphens,
+ *          consecutive underscores collapsed, and leading/trailing separators trimmed).
+ */
+export declare function snakeToKebab(s: string): string;

package/dist/utils/string.js

@@ -0,0 +1,28 @@
+/**
+ * Converts a string like "test_string" or "test-string" to "testString"
+ * @param s String to convert
+ */
+export function snakeOrKebabToCamel(s) {
+    return s.toLowerCase().replace(/([-_][a-z])/g, (group) => group.toUpperCase().replace('-', '').replace('_', ''));
+}
+/**
+ * Converts a snake_case string to kebab-case.
+ *
+ * Examples:
+ * - "test_string" -> "test-string"
+ * - "__Foo__Bar__" -> "foo-bar"
+ * - "already-kebab" -> "already-kebab"
+ *
+ * @param s Input string in snake_case (or similar).
+ * @returns The input converted to kebab-case (lowercased, underscores -> hyphens,
+ *          consecutive underscores collapsed, and leading/trailing separators trimmed).
+ */
+export function snakeToKebab(s) {
+    if (!s)
+        return s;
+    // Replace one-or-more underscores with a single hyphen, then trim hyphens, then lowercase.
+    return s
+        .replace(/_+/g, '-')
+        .replace(/^-+|-+$/g, '')
+        .toLowerCase();
+}

package/package.json

@@ -1,17 +1,32 @@
 {
 	"name": "sk-clib",
-	"version": "1.18.9",
+	"version": "2.0.4",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/TreltaSev/sk-clib"
 	},
-	"type": "module",
+	"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",
+		"lint": "prettier --check .",
+		"format": "prettier --write ."
+	},
 	"files": [
 		"dist",
 		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*",
-		"dist/styles.css"
+		"!dist/**/*.spec.*"
+	],
+	"sideEffects": [
+		"**/*.css"
 	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
 	"exports": {
 		".": {
 			"types": "./dist/index.d.ts",
@@ -22,7 +37,7 @@
 			"svelte": "./dist/ui/index.js"
 		},
 		"./style": {
-			"default": "./dist/styles.css"
+			"default": "./dist/theme/theme.css"
 		},
 		"./theme": {
 			"types": "./dist/theme/index.d.ts",
@@ -30,53 +45,32 @@
 			"default": "./dist/theme/index.js"
 		}
 	},
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"sideEffects": [
-		"**/*.css"
-	],
-	"keywords": [
-		"svelte",
-		"component",
-		"library"
-	],
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build",
-		"preview": "vite preview",
-		"prepare": "svelte-kit sync || echo ''",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --check . && eslint .",
-		"format": "prettier --write ."
+	"peerDependencies": {
+		"svelte": "^5.0.0"
 	},
 	"devDependencies": {
-		"@eslint/compat": "^2.0.4",
-		"@eslint/js": "^10.0.1",
-		"@iconify/json": "^2.2.480",
-		"@sveltejs/adapter-auto": "^7.0.1",
+		"@sveltejs/adapter-static": "^3.0.10",
 		"@sveltejs/kit": "^2.57.0",
+		"@sveltejs/package": "^2.5.7",
 		"@sveltejs/vite-plugin-svelte": "^7.0.0",
 		"@tailwindcss/vite": "^4.2.2",
-		"@types/node": "^22",
-		"eslint": "^10.2.0",
-		"eslint-config-prettier": "^10.1.8",
-		"eslint-plugin-svelte": "^3.17.0",
-		"globals": "^17.4.0",
+		"@types/node": "^25.9.1",
 		"prettier": "^3.8.1",
 		"prettier-plugin-svelte": "^3.5.1",
 		"prettier-plugin-tailwindcss": "^0.7.2",
+		"publint": "^0.3.18",
 		"svelte": "^5.55.2",
 		"svelte-check": "^4.4.6",
 		"tailwindcss": "^4.2.2",
 		"typescript": "^6.0.2",
-		"typescript-eslint": "^8.58.1",
-		"unplugin-icons": "^23.0.1",
 		"vite": "^8.0.7"
 	},
+	"keywords": [
+		"svelte"
+	],
 	"dependencies": {
-		"@material/material-color-utilities": "^0.3.0",
-		"tailwind-merge": "^3.2.0",
-		"js-cookie": "^3.0.5"
+		"@poupe/material-color-utilities": "^0.4.1",
+		"js-cookie": "^3.0.8",
+		"tailwind-merge": "^3.6.0"
 	}
 }