sk-clib 2.0.9 → 2.0.10

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./theme";
+export * from "./ui";
+export * from "./utils";

package/dist/index.js

@@ -1,2 +1,3 @@
-"use strict";
-// Reexport your entry components here
+export * from "./theme";
+export * from "./ui";
+export * from "./utils";

package/dist/theme/logic.d.ts

@@ -2,23 +2,25 @@ import type { Mode, Variant } from './types';
 import { DynamicScheme } from '@poupe/material-color-utilities';
 /**
  * Returns a dictionary representation of a generated color pallette given a `seed` `mode` and `contrast`
+ * @internal
  *
- *
- * @param seed Hex color string like `#ff0000`
- * @param mode Chooses light/dark rendering
- * @param variant Selects the algorithm variant
- * @param contrast is a -1..1 modifier for contrast
+ * @param seed - Hex color string like `#ff0000`
+ * @param mode - Chooses light/dark rendering
+ * @param variant - Selects the algorithm variant
+ * @param contrast - is a -1..1 modifier for contrast
  */
 export declare function build(seed: string, mode?: Mode, variant?: Variant, contrast?: number): DynamicScheme;
 /**
  * Applies a given scheme to the root document element
+ * @internal
  *
- * @param scheme Generated scheme that will be applied to the root element
+ * @param scheme - Generated scheme that will be applied to the root element
  */
 export declare function applyScheme(scheme: DynamicScheme): Record<string, any>;
 /**
  * Stores the theme as a string in cookies
+ * @internal
  *
- * @param theme JSON object to store
+ * @param theme - JSON object to store
  */
 export declare function saveTheme(theme: object): void;

package/dist/theme/logic.js

@@ -14,12 +14,12 @@ const VARIANTMAP = {
 };
 /**
  * Returns a dictionary representation of a generated color pallette given a `seed` `mode` and `contrast`
+ * @internal
  *
- *
- * @param seed Hex color string like `#ff0000`
- * @param mode Chooses light/dark rendering
- * @param variant Selects the algorithm variant
- * @param contrast is a -1..1 modifier for contrast
+ * @param seed - Hex color string like `#ff0000`
+ * @param mode - Chooses light/dark rendering
+ * @param variant - Selects the algorithm variant
+ * @param contrast - is a -1..1 modifier for contrast
  */
 export function build(seed, mode = 'dark', variant = 'content', contrast = 0) {
     const source = Hct.fromInt(argbFromHex(seed));
@@ -30,8 +30,9 @@ export function build(seed, mode = 'dark', variant = 'content', contrast = 0) {
 }
 /**
  * Applies a given scheme to the root document element
+ * @internal
  *
- * @param scheme Generated scheme that will be applied to the root element
+ * @param scheme - Generated scheme that will be applied to the root element
  */
 export function applyScheme(scheme) {
     const mode = scheme.isDark ? 'dark' : 'light';
@@ -75,8 +76,9 @@ export function applyScheme(scheme) {
 }
 /**
  * Stores the theme as a string in cookies
+ * @internal
  *
- * @param theme JSON object to store
+ * @param theme - JSON object to store
  */
 export function saveTheme(theme) {
     const expires = new Date();

package/dist/theme/state.svelte.d.ts

@@ -1,24 +1,23 @@
-export const theme_state: ThemeState;
+import type { Mode, Variant } from "./types";
 /**
  * Class representing the current state of the theme
+ * @public
  *
  * If either `mode`, `variant` or `seedColor` are updated, the whole theme will refresh
  */
 declare class ThemeState {
     /**
      * Current mode of the theme, either light or dark
-     * @type {"dark"|"light"|undefined}
      */
-    mode: "dark" | "light" | undefined;
+    mode: Mode | undefined;
     /**
      * Variant of the theme, Changes the look and feel of the used colors
-     * @type {"content"|"expressive"|"fidelity"|"fruit-salad"|"monochrome"|"neutral"|"rainbow"|"tonal-spot"|"vibrant"|undefined}
      */
-    variant: "content" | "expressive" | "fidelity" | "fruit-salad" | "monochrome" | "neutral" | "rainbow" | "tonal-spot" | "vibrant" | undefined;
+    variant: Variant | undefined;
     /**
      * Main color used to generate the theme.
-     * @type {string|undefined}
      */
     seedColor: string | undefined;
 }
-export {};
+declare const theme_state: ThemeState;
+export { theme_state };

package/dist/theme/state.svelte.js

@@ -1,33 +1,22 @@
-
-
-
 /**
  * Class representing the current state of the theme
- * 
+ * @public
+ *
  * If either `mode`, `variant` or `seedColor` are updated, the whole theme will refresh
  */
 class ThemeState {
-
     /**
      * Current mode of the theme, either light or dark
-     * @type {"dark"|"light"|undefined}
      */
-    mode = $state(undefined)
-
+    mode = $state(undefined);
     /**
      * Variant of the theme, Changes the look and feel of the used colors
-     * @type {"content"|"expressive"|"fidelity"|"fruit-salad"|"monochrome"|"neutral"|"rainbow"|"tonal-spot"|"vibrant"|undefined}
      */
-    variant = $state(undefined)
-
+    variant = $state(undefined);
     /**
      * Main color used to generate the theme.
-     * @type {string|undefined}
      */
-    seedColor = $state(undefined)
+    seedColor = $state(undefined);
 }
-
 const theme_state = new ThemeState();
-
-export { theme_state }
-
+export { theme_state };

package/dist/ui/button/components/button.svelte

@@ -23,9 +23,8 @@
 {/if}
 
 <!--@component
-    Generated by SvelteForge🔥
-
     # Button Component
     Simple button component for easy customization and easy onclick functionality
 	Button is easily configured, colored, and will also abide to WCAG standards.
+	@public
 -->

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

@@ -1,10 +1,9 @@
 import type { Props } from '..';
 /**
- * Generated by SvelteForge🔥
- *
- *    # Button Component
+ * # Button Component
  *    Simple button component for easy customization and easy onclick functionality
  * Button is easily configured, colored, and will also abide to WCAG standards.
+ * @public
  */
 declare const Button: import("svelte").Component<Props, {}, "class" | "buttonClass">;
 type Button = ReturnType<typeof Button>;

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

@@ -20,9 +20,9 @@
 </Frame>
 
 <!--@component
-    Generated by SvelteForge🔥
-
     # Flex Component
     Wrapper component for Frame with the flex attribute passed
+    @public
+    
 -->
 

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

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

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

@@ -114,13 +114,13 @@
 </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.
-
+	@public 
+	
     ## Usage
     ```svelte
     <Frame class="my-frame" flex row center fill>

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

@@ -1,21 +1,20 @@
 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.
+ *    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.
+ * @public
  *
- * ## Usage
- * ```svelte
- * <Frame class="my-frame" flex row center fill>
- *     <ChildComponent />
- * </Frame>
- * ```
+ *    ## 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.
+ *    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>;

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

@@ -68,8 +68,7 @@
 </Frame>
 
 <!--@component
-    Generated by SvelteForge🔥
+    Wrapper for an input element hat renders children within a label tag
+	@public
 
-    # Input Component
-    Wrapper for input element that renders children within a label tag
 -->

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

@@ -1,9 +1,7 @@
 import type { Props } from '..';
 /**
- * Generated by SvelteForge🔥
- *
- * # Input Component
- * Wrapper for input element that renders children within a label tag
+ * Wrapper for an input element hat renders children within a label tag
+ * @public
  */
 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>;

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

@@ -44,6 +44,8 @@
         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
     ---
+
+	@public
     
     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

@@ -1,16 +1,18 @@
 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
- * ---
+ *    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
+ *    ---
+ *
+ * @public
  *
- * 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.
+ *    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>;

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

@@ -85,6 +85,7 @@
 </svelte:element>
 
 <!--@component
-    Generated by SvelteForge🔥
+    Low Level Bare Text Element
+    @public
 -->
 

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

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

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

@@ -1,5 +1,8 @@
 import type { HTMLAttributes } from 'svelte/elements';
 import type { tHeaderWeights } from '../header/types';
+/**
+ * Representation of semantic sizes to header element
+ */
 export type tTextSizes = {
     xxl: 'h1';
     xl: 'h2';
@@ -7,7 +10,10 @@ export type tTextSizes = {
     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"];
+/**
+ * List of valid html tags that can be used with the text element
+ */
+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", "h1", "h2", "h3", "h4", "h5", "h6"];
 export type tTextTypes = (typeof tags)[number];
 export type tTextWeights = {
     light: 'font-light';
@@ -16,19 +22,36 @@ export type tTextWeights = {
     bold: 'font-bold';
     extrabold: 'font-extrabold';
 };
+/**
+ * Text Element Properties
+ * @internal
+ *
+ */
 export type tTextProps = HTMLAttributes<HTMLDivElement> & {
+    /**
+     * The element that the text element will take
+     */
     as?: tTextTypes;
+    /**
+     * Semantic size option for the text element
+     */
     size?: keyof tTextSizes;
     xxl?: boolean;
     xl?: boolean;
     lg?: boolean;
     md?: boolean;
     sm?: boolean;
+    /**
+     * Semantic bolding option for the text element
+     */
     weight?: keyof tHeaderWeights;
     extrabold?: boolean;
     bold?: boolean;
     semibold?: boolean;
     regular?: boolean;
     light?: boolean;
+    /**
+     * Whether or not the text is italicized
+     */
     em?: boolean;
 };

package/dist/ui/text/types.js

@@ -1,3 +1,6 @@
+/**
+ * List of valid html tags that can be used with the text element
+ */
 export const tags = [
     'p',
     'blockquote',
@@ -21,5 +24,11 @@ export const tags = [
     'b',
     'i',
     'u',
-    'span'
+    'span',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6'
 ];

package/dist/utils/classname.d.ts

@@ -2,7 +2,9 @@ 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
+ * @public
+ *
+ * @param inputs - All base classes
  * @returns Merged classes
  */
 export declare function cn(...inputs: (ClassValue | unknown)[]): string;
@@ -10,6 +12,7 @@ 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')`.
+ * @public
  *
  * ## Usage
  * ```ts
@@ -26,26 +29,31 @@ export declare class cn_a {
     constructor(selector: string);
     /**
      * Returns a string of all the classes with the attribute selector attached
-     * @param {string} classes tailwind/css classes string
+     *
+     * @param classes - tailwind/css classes string
      * @returns
      */
     build(classes: string): string;
     /**
+     * Wraps a given selector with a data attribute
      *
-     * @param selector some sort of boolean expression like state=toggled...
+     * @param selector - some sort of boolean expression like state=toggled...
      * @returns `data-[${selector}]`
      */
     static wrap_selector(selector: string): string;
     /**
+     * I honestly forgot what this function does, but I used it somewhere...
+     * It is now future me's problem
      *
-     * @param selector data attribute selector like state=toggled
-     * @param classes
+     * @param selector - data attribute selector like state=toggled
+     * @param classes - Classname string
      */
     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.
+ * @public
  *
  * ## Example Usage
  * ```typescript
@@ -60,13 +68,15 @@ 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.
+     *
+     * @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.
+     *
+     * @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/classname.js

@@ -4,7 +4,9 @@ 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
+ * @public
+ *
+ * @param inputs - All base classes
  * @returns Merged classes
  */
 export function cn(...inputs) {
@@ -14,6 +16,7 @@ export function cn(...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')`.
+ * @public
  *
  * ## Usage
  * ```ts
@@ -32,7 +35,8 @@ export class cn_a {
     }
     /**
      * Returns a string of all the classes with the attribute selector attached
-     * @param {string} classes tailwind/css classes string
+     *
+     * @param classes - tailwind/css classes string
      * @returns
      */
     build(classes) {
@@ -50,17 +54,20 @@ export class cn_a {
         return buffer.join(' '); // Return all the changes split
     }
     /**
+     * Wraps a given selector with a data attribute
      *
-     * @param selector some sort of boolean expression like state=toggled...
+     * @param selector - some sort of boolean expression like state=toggled...
      * @returns `data-[${selector}]`
      */
     static wrap_selector(selector) {
         return `data-[${selector}]`;
     }
     /**
+     * I honestly forgot what this function does, but I used it somewhere...
+     * It is now future me's problem
      *
-     * @param selector data attribute selector like state=toggled
-     * @param classes
+     * @param selector - data attribute selector like state=toggled
+     * @param classes - Classname string
      */
     static buildx(selector, classes) {
         // Convert a class string such as "bg-black flex flex-col" into ["bg-black", "flex", "flex-col"]
@@ -75,6 +82,7 @@ export class cn_a {
 /**
  * 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.
+ * @public
  *
  * ## Example Usage
  * ```typescript
@@ -89,15 +97,17 @@ 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.
+     *
+     * @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.
+     *
+     * @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) {

package/dist/utils/number.d.ts

@@ -1,8 +1,9 @@
 /**
  * Clamps a number between a given min and max
+ * @public
  *
- * @param number Number to clamp
- * @param min Minimum the number can be
- * @param max Maximum the number can be
+ * @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

@@ -1,9 +1,10 @@
 /**
  * Clamps a number between a given min and max
+ * @public
  *
- * @param number Number to clamp
- * @param min Minimum the number can be
- * @param max Maximum the number can be
+ * @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

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

package/dist/utils/string.js

@@ -1,20 +1,23 @@
 /**
  * Converts a string like "test_string" or "test-string" to "testString"
- * @param s String to convert
+ * @public
+ *
+ * @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.
+ * @public
  *
  * Examples:
- * - "test_string" -> "test-string"
- * - "__Foo__Bar__" -> "foo-bar"
- * - "already-kebab" -> "already-kebab"
+ * - "test_string" becomes "test-string"
+ * - "__Foo__Bar__" becomes "foo-bar"
+ * - "already-kebab" becomes "already-kebab"
  *
- * @param s Input string in snake_case (or similar).
- * @returns The input converted to kebab-case (lowercased, underscores -> hyphens,
+ * @param s - Input string in snake_case (or similar).
+ * @returns The input converted to kebab-case (lowercased, underscores become hyphens,
  *          consecutive underscores collapsed, and leading/trailing separators trimmed).
  */
 export function snakeToKebab(s) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sk-clib",
-	"version": "2.0.9",
+	"version": "2.0.10",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/TreltaSev/sk-clib"
@@ -62,7 +62,7 @@
 		"svelte": "^5.55.2",
 		"svelte-check": "^4.4.6",
 		"tailwindcss": "^4.2.2",
-		"typescript": "^6.0.2",
+		"typescript": "^5.9.3",
 		"vite": "^8.0.7"
 	},
 	"keywords": [