sk-clib 0.0.2 → 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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	// --- Logic ---
-	import { cn } from '../../../utils';
+	import { cn, Tokenizer } from '../../../utils';
 	import type { Props } from '..';
 
 	let {
@@ -23,6 +23,9 @@
 		...rest
 	}: Props = $props();
 
+	const tokenInstance = new Tokenizer(className);
+
+
 	function addTokenIf(statement: any, token: string) {
 		if (statement === true) {
 			className += ` ${token}`;
@@ -30,33 +33,33 @@
 	}
 
 	// Flex Box
-	addTokenIf(flex, 'flex');
-	addTokenIf(row, 'flex-row');
-	addTokenIf(col, 'flex-col');
+	tokenInstance.addTokenIf(flex, 'flex');
+	tokenInstance.addTokenIf(row, 'flex-row');
+	tokenInstance.addTokenIf(col, 'flex-col');
 
 	// Positioning
-	addTokenIf(center, 'items-center justify-center');
-	addTokenIf(centerx, 'items-center');
-	addTokenIf(centery, 'justify-center');
+	tokenInstance.addTokenIf(center, 'items-center justify-center');
+	tokenInstance.addTokenIf(centerx, 'items-center');
+	tokenInstance.addTokenIf(centery, 'justify-center');
 
 	// Size Fillings
-	addTokenIf(fill, 'size-full');
-	addTokenIf(fillw, 'w-full');
-	addTokenIf(fillh, 'h-full');
+	tokenInstance.addTokenIf(fill, 'size-full');
+	tokenInstance.addTokenIf(fillw, 'w-full');
+	tokenInstance.addTokenIf(fillh, 'h-full');
 
 	// Flex Config
-	addTokenIf(noshrink, 'shrink-0');
+	tokenInstance.addTokenIf(noshrink, 'shrink-0');
 
 	// Aspect Ratios
-	addTokenIf(aspectSquare, 'aspect-square');
+	tokenInstance.addTokenIf(aspectSquare, 'aspect-square');
 
 	// Cursor Options
-	addTokenIf(cursorAuto, 'cursor-auto');
-	addTokenIf(cursorDefault, 'cursor-default');
-	addTokenIf(cursorPointer, 'cursor-pointer');
+	tokenInstance.addTokenIf(cursorAuto, 'cursor-auto');
+	tokenInstance.addTokenIf(cursorDefault, 'cursor-default');
+	tokenInstance.addTokenIf(cursorPointer, 'cursor-pointer');
 </script>
 
-<div class={cn(className)} {...rest}>
+<div class={cn(tokenInstance.className)} {...rest}>
 	{@render children?.()}
 </div>
 

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

@@ -17,6 +17,6 @@ import type { Props } from '..';
  * 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">;
+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/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

@@ -1 +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

@@ -1 +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

@@ -52,3 +52,30 @@ export declare function expand(node: HTMLElement, params: any, { duration }: {
 };
 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

@@ -93,3 +93,36 @@ export function reference_package_to_form(package_name, location = undefined) {
     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,6 +1,6 @@
 {
 	"name": "sk-clib",
-	"version": "0.0.2",
+	"version": "0.0.3",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",