sk-clib 1.18.9 → 2.0.4

package/README.md

@@ -1,42 +1,22 @@
-# sv
+# [sk-clib](https://treltasev.github.io/sk-clib/)
 
-Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
+[![NPM](https://img.shields.io/badge/NPM-%23CB3837.svg?style=for-the-badge&logo=npm&logoColor=white)](https://www.npmjs.com/package/sk-clib)
 
-## Creating a project
+A flexible and modular component library built for my SvelteKit projects.
 
-If you're seeing this, you've probably already done this step. Congrats!
+## 📦 Installation
 
-```sh
-# create a new project
-npx sv create my-app
+```bash
+npm install sk-clib # Install from npmjs
 ```
 
-To recreate this project with the same configuration:
+```css
+/* app.css */
+@import 'sk-clib/style';
 
-```sh
-# recreate this project
-npx sv@0.15.1 create --template minimal --types ts --add prettier eslint tailwindcss="plugins:none" --no-download-check --install npm .
+/* ... Other Styling ... */
 ```
 
-## Developing
+## 🔧 Documentation
 
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```sh
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
-
-## Building
-
-To create a production version of your app:
-
-```sh
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+Take a look at [https://treltasev.github.io/sk-clib/](https://treltasev.github.io/sk-clib/)

package/dist/index.js

@@ -0,0 +1,2 @@
+"use strict";
+// Reexport your entry components here

package/dist/theme/index.d.ts

@@ -0,0 +1,4 @@
+export * from './logic';
+export * from './types';
+export { theme_state as theme } from './state.svelte';
+export { default as ThemeInit } from './theme-init/components/theme-init.svelte';

package/dist/theme/index.js

@@ -0,0 +1,4 @@
+export * from './logic';
+export * from './types';
+export { theme_state as theme } from './state.svelte';
+export { default as ThemeInit } from './theme-init/components/theme-init.svelte';

package/dist/theme/logic.d.ts

@@ -0,0 +1,24 @@
+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`
+ *
+ *
+ * @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
+ *
+ * @param scheme Generated scheme that will be applied to the root element
+ */
+export declare function applyScheme(scheme: DynamicScheme): void;
+/**
+ * Stores the theme as a string in cookies
+ *
+ * @param theme JSON object to store
+ */
+export declare function saveTheme(theme: object): void;

package/dist/theme/logic.js

@@ -0,0 +1,80 @@
+import { snakeOrKebabToCamel, snakeToKebab } from '../utils/string';
+import { argbFromHex, DynamicScheme, Hct, hexFromArgb, SchemeContent, Variant as PVariant, SchemeExpressive, SchemeFidelity, SchemeFruitSalad, SchemeMonochrome, SchemeNeutral, SchemeRainbow, SchemeTonalSpot, SchemeVibrant, DynamicColor } from '@poupe/material-color-utilities';
+// map variant keys to scheme constructor functions
+const VARIANTMAP = {
+    content: SchemeContent,
+    expressive: SchemeExpressive,
+    fidelity: SchemeFidelity,
+    'fruit-salad': SchemeFruitSalad,
+    monochrome: SchemeMonochrome,
+    neutral: SchemeNeutral,
+    rainbow: SchemeRainbow,
+    'tonal-spot': SchemeTonalSpot,
+    vibrant: SchemeVibrant
+};
+/**
+ * Returns a dictionary representation of a generated color pallette given a `seed` `mode` and `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));
+    const isDark = mode == 'dark';
+    const SchemeCtor = VARIANTMAP[variant] ?? SchemeContent;
+    const schemeRaw = new SchemeCtor(source, isDark, contrast);
+    return schemeRaw;
+}
+/**
+ * Applies a given scheme to the root document element
+ *
+ * @param scheme Generated scheme that will be applied to the root element
+ */
+export function applyScheme(scheme) {
+    const mode = scheme.isDark ? 'dark' : 'light';
+    const variant = Object.values(PVariant)[scheme.variant].toString().toLowerCase();
+    const root = document.documentElement;
+    // Apply missing colors that library for some reason doesn't cover @material-color-utilities#199
+    const missingColors = [
+        "shadow",
+        "scrim",
+        "surfaceVariant",
+        "surfaceTint",
+        "primaryPaletteKeyColor",
+        "secondaryPaletteKeyColor",
+        "tertiaryPaletteKeyColor",
+        "neutralPaletteKeyColor",
+        "neutralVariantPaletteKeyColor"
+    ];
+    // Set the color properties
+    const allColors = [...scheme.colors.allColors, ...missingColors];
+    allColors.forEach((dynamicColor) => {
+        const colorName = typeof dynamicColor === 'string' ? dynamicColor : dynamicColor.name;
+        console.log(colorName);
+        const prop = snakeOrKebabToCamel(colorName);
+        const value = scheme[prop];
+        root.style.setProperty(`--md-${snakeToKebab(colorName)}`, hexFromArgb(value));
+    });
+    const conf_out = {
+        '--md-seed': hexFromArgb(scheme.sourceColorArgb),
+        '--md-mode': mode,
+        '--md-variant': variant
+    };
+    // Set the config properties
+    for (const [key, value] of Object.entries(conf_out)) {
+        root.style.setProperty(key, value);
+    }
+}
+/**
+ * Stores the theme as a string in cookies
+ *
+ * @param theme JSON object to store
+ */
+export function saveTheme(theme) {
+    const expires = new Date();
+    expires.setFullYear(expires.getFullYear() + 10);
+    document.cookie = `md-theme=${JSON.stringify(theme)}; expires=${expires.toUTCString()}; path=/`;
+}

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

@@ -0,0 +1,24 @@
+export const theme_state: ThemeState;
+/**
+ * Class representing the current state of the theme
+ *
+ * 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;
+    /**
+     * 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;
+    /**
+     * Main color used to generate the theme.
+     * @type {string|undefined}
+     */
+    seedColor: string | undefined;
+}
+export {};

package/dist/theme/state.svelte.js

@@ -0,0 +1,33 @@
+
+
+
+/**
+ * Class representing the current state of the theme
+ * 
+ * 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)
+
+    /**
+     * 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)
+
+    /**
+     * Main color used to generate the theme.
+     * @type {string|undefined}
+     */
+    seedColor = $state(undefined)
+}
+
+const theme_state = new ThemeState();
+
+export { theme_state }
+

package/dist/theme/theme-init/components/theme-init.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	// --- Logic ---
+	import { cn } from '../../../utils/classname';
+	import type { Props } from '..';
+	import { onMount } from 'svelte';
+
+	import Cookie from "js-cookie";
+
+	// === State ===
+	import { theme, build, applyScheme, saveTheme } from '../..';
+
+	const {
+		defaults = {
+			defaultMode: 'dark',
+			defaultVariant: 'vibrant',
+			defaultSeedColor: '#f8b518'
+		}
+	}: Props = $props();
+
+	$effect.pre(() => {
+		let mode = Cookie.get("theme.mode") || defaults.defaultMode
+		let variant = Cookie.get("theme.variant") || defaults.defaultVariant
+		let color = Cookie.get("theme.color") || defaults.defaultSeedColor
+	
+		theme.seedColor = color
+		theme.mode = mode
+		theme.variant = variant
+	})
+
+	$effect(() => {Cookie.set("theme.mode", theme.mode)})
+	$effect(() => {Cookie.set("theme.variant", theme.variant)})
+	$effect(() => {Cookie.set("theme.color", theme.seedColor)})
+
+	// Whenever any state changes, refresh theme
+	$effect(() => {
+		// Build the theme with material utilities
+		const built = build(theme.seedColor, theme.mode, theme.variant);
+		
+		// Create css variables object and save to body
+		let applied = applyScheme(built, theme.seedColor, theme.mode, theme.variant);
+
+		// Save the theme to the user's cookies
+		saveTheme(applied);
+	});
+</script>
+
+<svelte:head>
+	<!-- ============== Theme Script ============== -->
+	<script>
+		/**
+		 * Attempts to get the current theme stored in the user's cookies, returns it, otherwise undefined
+		 * @return {Object|undefined} The theme or undefined
+		 */
+		function getTheme() {
+			const match = document.cookie.match(/(?:^|;\s*)md-theme=([^;]*)/);
+			return match ? JSON.parse(decodeURIComponent(match[1])) : undefined;
+		}
+
+		/**
+		 * Attempts to apply a given theme
+		 * @param {Object|undefined} theme - The theme to be applied, if undefined, this method does nothing
+		 */
+		function applyTheme(theme) {
+			if (theme === undefined) {
+				return;
+			}
+
+			for (const [name, hex] of Object.entries(theme)) {
+				document.documentElement.style.setProperty(name, hex);
+			}
+		}
+
+		applyTheme(getTheme());
+	</script>
+</svelte:head>
+
+<!--@component
+    ---
+    name: ThemeInit
+    props:
+        defaultSeed (undefined|string) = undefine Default color seed for the theme.        
+    ---
+
+    Used to initialize the theme within your projects
+-->

package/dist/theme/theme-init/components/theme-init.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Props } from '..';
+/**
+ * ---
+ * name: ThemeInit
+ * props:
+ *     defaultSeed (undefined|string) = undefine Default color seed for the theme.
+ * ---
+ *
+ * Used to initialize the theme within your projects
+ */
+declare const ThemeInit: import("svelte").Component<Props, {}, "">;
+type ThemeInit = ReturnType<typeof ThemeInit>;
+export default ThemeInit;

package/dist/theme/theme-init/index.d.ts

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

package/dist/theme/theme-init/index.js

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

package/dist/theme/theme-init/types.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from 'svelte/elements';
+/**
+ * Possible default types, object contains
+ * `defaultMode`,
+ * `defaultVariant`,
+ * `defaultSeedColor`
+ */
+export type tDefaults = {
+    defaultMode: 'dark' | 'light' | undefined;
+    defaultVariant: 'content' | 'expressive' | 'fidelity' | 'fruit-salad' | 'monochrome' | 'neutral' | 'rainbow' | 'tonal-spot' | 'vibrant' | undefined;
+    defaultSeedColor: string | undefined;
+};
+export type tThemeInitProps = HTMLAttributes<HTMLDivElement> & {
+    defaults?: tDefaults;
+};

package/dist/theme/theme-init/types.js

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

package/dist/theme/theme.css

@@ -0,0 +1,162 @@
+@import 'tailwindcss';
+
+
+/* ! ========== Theme ========= */
+@theme {
+	/* Palettes [PA] */
+	--color-primary-palette-key-color: var(--md-primary-palette-key-color);
+	--color-secondary-palette-key-color: var(--md-secondary-palette-key-color);
+	--color-tertiary-palette-key-color: var(--md-tertiary-palette-key-color);
+	--color-neutral-palette-key-color: var(--md-neutral-palette-key-color);
+	--color-neutral-variant-palette-key-color: var(--md-neutral-variant-palette-key-color);
+
+	/* Surfaces [S] */
+	--color-background: var(--md-background);
+	--color-on-background: var(--md-on-background);
+	--color-surface: var(--md-surface);
+	--color-surface-dim: var(--md-surface-dim);
+	--color-surface-bright: var(--md-surface-bright);
+	--color-surface-container-lowest: var(--md-surface-container-lowest);
+	--color-surface-container-low: var(--md-surface-container-low);
+	--color-surface-container: var(--md-surface-container);
+	--color-surface-container-high: var(--md-surface-container-high);
+	--color-surface-container-highest: var(--md-surface-container-highest);
+	--color-on-surface: var(--md-on-surface);
+	--color-on-surface-variant: var(--md-on-surface-variant);
+	--color-outline: var(--md-outline);
+	--color-outline-variant: var(--md-outline-variant);
+	--color-inverse-surface: var(--md-inverse-surface);
+	--color-inverse-on-surface: var(--md-inverse-on-surface);
+	--color-shadow: var(--md-shadow);
+	--color-scrim: var(--md-shadow);
+	--color-surface-variant: var(--md-surface-variant);
+	--color-surface-tint: var(--md-surface-tint);
+
+	/* Primaries [P] */
+	--color-primary: var(--md-primary);
+	--color-primary-dim: var(--md-primary-dim);
+	--color-on-primary: var(--md-on-primary);
+	--color-primary-container: var(--md-primary-container);
+	--color-on-primary-container: var(--md-on-primary-container);
+	--color-primary-fixed: var(--md-primary-fixed);
+	--color-primary-fixed-dim: var(--md-primary-fixed-dim);
+	--color-on-primary-fixed: var(--md-on-primary-fixed);
+	--color-on-primary-fixed-variant: var(--md-on-primary-fixed-variant);
+	--color-inverse-primary: var(--md-inverse-primary);
+
+	/* Secondaries [S] */
+	--color-secondary: var(--md-secondary);
+	--color-secondary-dim: var(--md-secondary-dim);
+	--color-on-secondary: var(--md-on-secondary);
+	--color-secondary-container: var(--md-secondary-container);
+	--color-on-secondary-container: var(--md-on-secondary-container);
+	--color-secondary-fixed: var(--md-secondary-fixed);
+	--color-secondary-fixed-dim: var(--md-secondary-fixed-dim);
+	--color-on-secondary-fixed: var(--md-on-secondary-fixed);
+	--color-on-secondary-fixed-variant: var(--md-on-secondary-fixed-variant);
+
+	/* Tertiaries [T] */
+	--color-tertiary: var(--md-tertiary);
+	--color-tertiary-dim: var(--md-tertiary-dim);
+	--color-on-tertiary: var(--md-on-tertiary);
+	--color-tertiary-container: var(--md-tertiary-container);
+	--color-on-tertiary-container: var(--md-on-tertiary-container);
+	--color-tertiary-fixed: var(--md-tertiary-fixed);
+	--color-tertiary-fixed-dim: var(--md-tertiary-fixed-dim);
+	--color-on-tertiary-fixed: var(--md-on-tertiary-fixed);
+	--color-on-tertiary-fixed-variant: var(--md-on-tertiary-fixed-variant);
+
+	/* Errors [E] */
+	--color-error: var(--md-error);
+	--color-error-dim: var(--md-error-dim);
+	--color-on-error: var(--md-on-error);
+	--color-error-container: var(--md-error-container);
+	--color-on-error-container: var(--md-on-error-container);
+}
+
+
+/* ! ========== Components ========= */
+@layer components {
+	/* Surfaces [S] */
+	.surface-background {
+		@apply bg-background text-on-background;
+	}
+
+	.surface {
+		@apply bg-surface text-on-surface;
+	}
+
+	.surface-variant {
+		@apply bg-surface-variant text-on-surface-variant;
+	}
+
+	/* Primaries [P] */
+	.surface-primary {
+		@apply bg-primary text-on-primary;
+	}
+
+	.surface-primary-container {
+		@apply bg-primary-container text-on-primary-container;
+	}
+
+	.surface-primary-fixed {
+		@apply bg-primary-fixed text-on-primary-fixed;
+	}
+
+	.surface-primary-fixed-variant {
+		@apply bg-primary-fixed-dim text-on-primary-fixed-variant;
+	}
+
+	/* Secondaries [S] */
+	.surface-secondary {
+		@apply bg-secondary text-on-secondary;
+	}
+
+	.surface-secondary-container {
+		@apply bg-secondary-container text-on-secondary-container;
+	}
+
+	.surface-secondary-fixed {
+		@apply bg-secondary-fixed text-on-secondary-fixed;
+	}
+
+	.surface-secondary-fixed-variant {
+		@apply bg-secondary-fixed-dim text-on-secondary-fixed-variant;
+	}
+
+	/* Tertiaries [T] */
+	.surface-tertiary {
+		@apply bg-tertiary text-on-tertiary;
+	}
+
+	.surface-tertiary-container {
+		@apply bg-tertiary-container text-on-tertiary-container;
+	}
+
+	.surface-tertiary-fixed {
+		@apply bg-tertiary-fixed text-on-tertiary-fixed;
+	}
+
+	.surface-tertiary-fixed-variant {
+		@apply bg-tertiary-fixed-dim text-on-tertiary-fixed-variant;
+	}
+
+	/* Errors [E] */
+	.surface-error {
+		@apply bg-error text-on-error;
+	}
+
+	.surface-error-container {
+		@apply bg-error-container text-on-error-container;
+	}
+}
+
+/* ! ========== Base ========== */
+@layer base {
+	html,
+	body {
+		@apply size-full;
+		margin: 0;
+		padding: 0;
+	}
+}

package/dist/theme/types.d.ts

@@ -0,0 +1,4 @@
+export declare const MODES: readonly ["light", "dark"];
+export type Mode = (typeof MODES)[number];
+export declare const VARIANTS: readonly ["content", "expressive", "fidelity", "fruit-salad", "monochrome", "neutral", "rainbow", "tonal-spot", "vibrant"];
+export type Variant = (typeof VARIANTS)[number];

package/dist/theme/types.js

@@ -0,0 +1,12 @@
+export const MODES = ['light', 'dark'];
+export const VARIANTS = [
+    'content',
+    'expressive',
+    'fidelity',
+    'fruit-salad',
+    'monochrome',
+    'neutral',
+    'rainbow',
+    'tonal-spot',
+    'vibrant'
+];

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

@@ -0,0 +1,33 @@
+<script lang="ts">
+	// --- Logic ---
+	import { cn } from '../../../utils/classname';
+	import type { Props } from '..';
+
+	let { children, class: className = $bindable(undefined), buttonClass = $bindable('px-4 py-2 rounded-md bg-[var(--color-primary)] color-[var(--color-white)] w-fit'), href, ...rest }: Props = $props();
+	
+	// Setup Button's Default Class
+	let buttonCls = $state(cn(buttonClass, className));
+	$effect(() => {
+		buttonCls = cn(buttonClass, className);
+	});
+</script>
+
+asd
+
+{#if href}
+	<a {href} class={cn(buttonCls)} {...(rest as any)} tabindex="0">
+		{@render children?.()}
+	</a>
+{:else}
+	<button class={cn(buttonCls)} {...(rest as any)} tabindex="0">
+		{@render children?.()}
+	</button>
+{/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.
+-->

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

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

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

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

package/dist/ui/button/index.js

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

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

@@ -0,0 +1,5 @@
+import type { ClassValue, HTMLButtonAttributes } from "svelte/elements";
+export type tButtonProps = HTMLButtonAttributes & {
+    buttonClass?: ClassValue;
+    href?: string;
+};

package/dist/ui/button/types.js

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

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

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