sk-clib 1.18.9 → 2.0.4

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

@@ -0,0 +1,133 @@
+<script lang="ts">
+	// --- Logic ---
+	import { cn, Tokenizer } from '../../../utils/classname';
+	import type { Props } from '..';
+
+	let {
+		children,
+		class: className = $bindable(undefined),
+
+		// Flex Box
+		flex = $bindable(undefined),
+		row = $bindable(undefined),
+		col = $bindable(undefined),
+
+		// Positioning
+		center = $bindable(undefined),
+		centerx = $bindable(undefined),
+		centery = $bindable(undefined),
+
+		// Size Fillings
+		fill = $bindable(undefined),
+		fillw = $bindable(undefined),
+		fillh = $bindable(undefined),
+
+		// Flex Config
+		noshrink = $bindable(undefined),
+
+		// Aspect Ratios
+		aspectSquare = $bindable(undefined),
+
+		// Cursor options
+		cursorAuto = $bindable(undefined),
+		cursorDefault = $bindable(undefined),
+		cursorPointer = $bindable(undefined),
+
+		// Theme Colors
+		background = $bindable(undefined),
+		primary = $bindable(undefined),
+		primaryContainer = $bindable(undefined),
+		secondary = $bindable(undefined),
+		secondaryContainer = $bindable(undefined),
+		tertiary = $bindable(undefined),
+		tertiaryContainer = $bindable(undefined),
+		error = $bindable(undefined),
+		surface = $bindable(undefined),
+		surfaceVariant = $bindable(undefined),
+		outline = $bindable(undefined),
+		outlineVariant = $bindable(undefined),
+		shadow = $bindable(undefined),
+		scrim = $bindable(undefined),
+		inverseSurface = $bindable(undefined),
+		inversePrimary = $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');
+
+	// Background Options
+	tokenInstance.addTokenIf(background, 'bg-background');
+	tokenInstance.addTokenIf(primary, 'bg-primary');
+	tokenInstance.addTokenIf(primaryContainer, 'bg-primary-container');
+	tokenInstance.addTokenIf(secondary, 'bg-secondary');
+	tokenInstance.addTokenIf(secondaryContainer, 'bg-secondary-container');
+	tokenInstance.addTokenIf(tertiary, 'bg-tertiary');
+	tokenInstance.addTokenIf(tertiaryContainer, 'bg-tertiary-container');
+	tokenInstance.addTokenIf(error, 'bg-error');
+	tokenInstance.addTokenIf(surface, 'bg-surface');
+	tokenInstance.addTokenIf(surfaceVariant, 'bg-surface-variant');
+	tokenInstance.addTokenIf(outline, 'bg-outline');
+	tokenInstance.addTokenIf(outlineVariant, 'bg-outline-variant');
+	tokenInstance.addTokenIf(shadow, 'bg-shadow');
+	tokenInstance.addTokenIf(scrim, 'bg-scrim');
+	tokenInstance.addTokenIf(inverseSurface, 'bg-inverse-surface');
+	tokenInstance.addTokenIf(inversePrimary, 'bg-inverse-primary');
+
+</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, {}, "shadow" | "scrim" | "surfaceVariant" | "background" | "surface" | "inverseSurface" | "outline" | "outlineVariant" | "primary" | "primaryContainer" | "inversePrimary" | "secondary" | "secondaryContainer" | "tertiary" | "tertiaryContainer" | "error" | "fill" | "class" | "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,33 @@
+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;
+    background?: boolean;
+    primary?: boolean;
+    primaryContainer?: boolean;
+    secondary?: boolean;
+    secondaryContainer?: boolean;
+    tertiary?: boolean;
+    tertiaryContainer?: boolean;
+    error?: boolean;
+    surface?: boolean;
+    surfaceVariant?: boolean;
+    outline?: boolean;
+    outlineVariant?: boolean;
+    shadow?: boolean;
+    scrim?: boolean;
+    inverseSurface?: boolean;
+    inversePrimary?: boolean;
+};

package/dist/ui/frame/types.js

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

package/dist/ui/index.d.ts

@@ -0,0 +1,12 @@
+export { default as Button } from './button/components/button.svelte';
+export { default as Flex } from './flex/components/flex.svelte';
+export { default as Frame } from './frame/components/frame.svelte';
+export { default as Input } from './input/components/input.svelte';
+export { default as Spacer } from './spacer/components/spacer.svelte';
+export { default as Text } from './text/components/text.svelte';
+export type { tButtonProps } from './button/types';
+export type { tFlexProps } from './flex/types';
+export type { tFrameProps } from './frame/types';
+export type { tInputProps } from './input/types';
+export type { tSpacerProps } from './spacer/types';
+export type { tTextProps } from './text/types';

package/dist/ui/index.js

@@ -0,0 +1,9 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+// @ts-nocheck
+// Reexport your entry components here
+export { default as Button } from './button/components/button.svelte';
+export { default as Flex } from './flex/components/flex.svelte';
+export { default as Frame } from './frame/components/frame.svelte';
+export { default as Input } from './input/components/input.svelte';
+export { default as Spacer } from './spacer/components/spacer.svelte';
+export { default as Text } from './text/components/text.svelte';

package/dist/ui/input/components/input.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	// --- Logic ---
+	import { cn } from '../../../utils/classname';
+	import { uuidv4 } from '../../../utils/crypto';
+	import type { Props } from '..';
+	import { Frame } from '../..';
+
+	let {
+		children,
+
+		// Classes
+		classFrame = $bindable(undefined),
+		class: className = $bindable(undefined),
+		classLabel,
+
+		// Properties
+		type = $bindable(undefined),
+		name = $bindable(undefined),
+		id = $bindable(undefined),
+
+		// Frame Passdown
+		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();
+
+	// Set id if not specified
+	if (!id) {
+		id = uuidv4();
+	}
+</script>
+
+<Frame
+	{flex}
+	{row}
+	{col}
+	{center}
+	{centerx}
+	{centery}
+	{fill}
+	{fillw}
+	{fillh}
+	{noshrink}
+	{aspectSquare}
+	{cursorAuto}
+	{cursorDefault}
+	{cursorPointer}
+	class={cn(classFrame)}
+>
+	<input class={cn(className)} {type} {name} {id} {...rest} />
+
+	{#if children}
+		<label for={id} class={cn(classLabel)}>{@render children?.()}</label>
+	{/if}
+</Frame>
+
+<!--@component
+    Generated by SvelteForge🔥
+
+    # Input Component
+    Wrapper for input element that renders children within a label tag
+-->

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

@@ -0,0 +1,10 @@
+import type { Props } from '..';
+/**
+ * Generated by SvelteForge🔥
+ *
+ * # Input Component
+ * Wrapper for input element that renders children within a label tag
+ */
+declare const Input: import("svelte").Component<Props, {}, "fill" | "class" | "name" | "type" | "id" | "flex" | "row" | "col" | "centerx" | "centery" | "center" | "fillw" | "fillh" | "noshrink" | "aspectSquare" | "cursorAuto" | "cursorDefault" | "cursorPointer" | "classFrame">;
+type Input = ReturnType<typeof Input>;
+export default Input;

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

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

package/dist/ui/input/index.js

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

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

@@ -0,0 +1,6 @@
+import type { ClassValue, HTMLInputAttributes } from "svelte/elements";
+import type { tFrameProps } from "../frame/types";
+export type tInputProps = tFrameProps & HTMLInputAttributes & {
+    classFrame?: ClassValue;
+    classLabel?: ClassValue;
+};

package/dist/ui/input/types.js

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

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

@@ -0,0 +1,50 @@
+<script lang="ts">
+	// --- Logic ---
+	import { cn, Tokenizer } from '../../../utils/classname';
+	import type { Props } from '..';
+
+	let {
+		children,
+		class: className = $bindable(undefined),
+
+		// 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/spacer/components/spacer.svelte.d.ts

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

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

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

package/dist/ui/spacer/index.js

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

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

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export type tSpacerProps = HTMLAttributes<HTMLDivElement> & {
+    horizontal?: boolean;
+    vertical?: boolean;
+    width?: boolean;
+    height?: boolean;
+};

package/dist/ui/spacer/types.js

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

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

@@ -0,0 +1,90 @@
+<script lang="ts">
+
+    // --- Logic ---
+    import { cn, Tokenizer } from '../../../utils/classname';
+    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/classname.d.ts

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