sk-clib 1.19.0 → 2.0.5

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.d.ts

@@ -1,2 +0,0 @@
-export * from "./theme";
-export * from './ui';

package/dist/index.js

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

package/dist/theme/index.d.ts

@@ -1,5 +1,4 @@
-export { theme_state as theme } from './stores.svelte';
+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';
-export type { tThemeInitProps } from './theme-init/types';
-export * from "./logic";
-export * from './types.js';

package/dist/theme/index.js

@@ -1,8 +1,4 @@
-// Stores
-export { theme_state as theme } from './stores.svelte';
-// Component
+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';
-// Logic
-export * from "./logic";
-// Types
-export * from './types.js';

package/dist/theme/logic.d.ts

@@ -1,4 +1,24 @@
-import type { Mode, Variant } from './types.js';
+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;
-export declare function build(seedHex: string, mode?: Mode, variant?: Variant, contrast?: number): any;
-export declare function applyScheme(scheme: any, color?: string, mode?: string, variant?: string): any;

package/dist/theme/logic.js

@@ -1,77 +1,80 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { argbFromHex, SchemeTonalSpot, Hct, hexFromArgb, SchemeContent, SchemeExpressive, SchemeFidelity, SchemeFruitSalad, SchemeMonochrome, SchemeNeutral, SchemeRainbow, SchemeVibrant } from '@material/material-color-utilities';
-export function saveTheme(theme) {
-    const expires = new Date();
-    expires.setFullYear(expires.getFullYear() + 10);
-    document.cookie = `md-theme=${JSON.stringify(theme)}; expires=${expires.toUTCString()}; path=/`;
-}
-export function build(seedHex, mode = "dark", variant = "vibrant", contrast = 0) {
-    const variant_map = {
-        "content": SchemeContent,
-        "expressive": SchemeExpressive,
-        "fidelity": SchemeFidelity,
-        "fruit-salad": SchemeFruitSalad,
-        "monochrome": SchemeMonochrome,
-        "neutral": SchemeNeutral,
-        "rainbow": SchemeRainbow,
-        "tonal-spot": SchemeTonalSpot,
-        "vibrant": SchemeVibrant
-    };
-    if (!(variant in variant_map)) {
-        variant = "content";
-    }
-    const source = Hct.fromInt(argbFromHex(seedHex));
-    const isDark = mode === "dark";
-    const scheme = new variant_map[variant](source, isDark, contrast);
-    return scheme;
+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;
 }
-export function applyScheme(scheme, color, mode, variant) {
-    const map = {
-        "--color-seed": scheme.sourceColorArgb,
-        "--color-primary": scheme.primary,
-        "--color-on-primary": scheme.onPrimary,
-        "--color-primary-container": scheme.primaryContainer,
-        "--color-on-primary-container": scheme.onPrimaryContainer,
-        "--color-secondary": scheme.secondary,
-        "--color-on-secondary": scheme.onSecondary,
-        "--color-secondary-container": scheme.secondaryContainer,
-        "--color-on-secondary-container": scheme.onSecondaryContainer,
-        "--color-tertiary": scheme.tertiary,
-        "--color-on-tertiary": scheme.onTertiary,
-        "--color-tertiary-container": scheme.tertiaryContainer,
-        "--color-on-tertiary-container": scheme.onTertiaryContainer,
-        "--color-error": scheme.error,
-        "--color-on-error": scheme.onError,
-        "--color-error-container": scheme.errorContainer,
-        "--color-on-error-container": scheme.onErrorContainer,
-        "--color-background": scheme.background,
-        "--color-on-background": scheme.onBackground,
-        "--color-surface": scheme.surface,
-        "--color-on-surface": scheme.onSurface,
-        "--color-surface-variant": scheme.surfaceVariant,
-        "--color-on-surface-variant": scheme.onSurfaceVariant,
-        "--color-outline": scheme.outline,
-        "--color-outline-variant": scheme.outlineVariant,
-        "--color-shadow": scheme.shadow,
-        "--color-scrim": scheme.scrim,
-        "--color-inverse-surface": scheme.inverseSurface,
-        "--color-inverse-on-surface": scheme.inverseOnSurface,
-        "--color-inverse-primary": scheme.inversePrimary
-    };
-    let out = {};
+/**
+ * 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;
-    for (const [name, argb] of Object.entries(map)) {
-        out[name] = hexFromArgb(argb);
-        root.style.setProperty(name, hexFromArgb(argb));
-    }
+    // 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 = {
-        "--theme-color": color,
-        "--theme-mode": mode,
-        "--theme-variant": variant
+        '--md-seed': hexFromArgb(scheme.sourceColorArgb),
+        '--md-mode': mode,
+        '--md-variant': variant
     };
-    for (const [name, value] of Object.entries(conf_out)) {
-        root.style.setProperty(name, value);
+    // Set the config properties
+    for (const [key, value] of Object.entries(conf_out)) {
+        root.style.setProperty(key, value);
     }
-    out = { ...out, ...conf_out };
-    return out;
+}
+/**
+ * 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/theme-init/components/theme-init.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	// --- Logic ---
-	import { cn } from '../../../utils';
+	import { cn } from '../../../utils/classname';
 	import type { Props } from '..';
 	import { onMount } from 'svelte';
 
@@ -8,6 +8,7 @@
 
 	// === State ===
 	import { theme, build, applyScheme, saveTheme } from '../..';
+	import { parse } from 'svelte/compiler';
 
 	const {
 		defaults = {
@@ -17,24 +18,6 @@
 		}
 	}: Props = $props();
 
-	/**
-	 * Checks if the user already has a set md-theme
-	 */
-	function hasTheme() {
-		const match = document.cookie.match(/(?:^|;\s*)md-theme=([^;]*)/);
-		return match ? true : false;
-	}
-
-	/**
-	 * Returns a fallback value if designated value is undefined
-	 * @param value Value to return normally
-	 * @param _default default if value is undefined
-	 */
-	function fallback(value: any, _default: any) {
-		return value === undefined ? _default : value;
-	}
-
-
 	$effect.pre(() => {
 		let mode = Cookie.get("theme.mode") || defaults.defaultMode
 		let variant = Cookie.get("theme.variant") || defaults.defaultVariant
@@ -71,7 +54,13 @@
 		 */
 		function getTheme() {
 			const match = document.cookie.match(/(?:^|;\s*)md-theme=([^;]*)/);
-			return match ? JSON.parse(decodeURIComponent(match[1])) : undefined;
+
+			let parsed = undefined;
+			try {
+				parsed = JSON.parse(decodeURIComponent(match[1]))
+			} catch {/* Do Nothing */}
+
+			return parsed ? parsed : undefined;
 		}
 
 		/**

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

@@ -1,14 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ThemeInitProps = typeof __propDef.props;
-export type ThemeInitEvents = typeof __propDef.events;
-export type ThemeInitSlots = typeof __propDef.slots;
+import type { Props } from '..';
 /**
  * ---
  * name: ThemeInit
@@ -18,6 +8,6 @@ export type ThemeInitSlots = typeof __propDef.slots;
  *
  * Used to initialize the theme within your projects
  */
-export default class ThemeInit extends SvelteComponentTyped<ThemeInitProps, ThemeInitEvents, ThemeInitSlots> {
-}
-export {};
+declare const ThemeInit: import("svelte").Component<Props, {}, "">;
+type ThemeInit = ReturnType<typeof ThemeInit>;
+export default ThemeInit;

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

@@ -1,15 +1,4 @@
-export declare const MODES: readonly ['light', 'dark'];
-export type Mode = string | (typeof MODES)[number];
-
-export declare const VARIANTS: readonly [
-	'content',
-	'expressive',
-	'fidelity',
-	'fruit-salad',
-	'monochrome',
-	'neutral',
-	'rainbow',
-	'tonal-spot',
-	'vibrant'
-];
-export type Variant = string | (typeof VARIANTS)[number];
+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

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

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	// --- Logic ---
-	import { cn } from '../../../utils';
+	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();
@@ -15,11 +15,11 @@
 asd
 
 {#if href}
-	<a {href} class={cn(buttonCls)} {...rest} tabindex="0">
+	<a {href} class={cn(buttonCls)} {...(rest as any)} tabindex="0">
 		{@render children?.()}
 	</a>
 {:else}
-	<button class={cn(buttonCls)} {...rest} tabindex="0">
+	<button class={cn(buttonCls)} {...(rest as any)} tabindex="0">
 		{@render children?.()}
 	</button>
 {/if}

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

@@ -1,14 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ButtonProps = typeof __propDef.props;
-export type ButtonEvents = typeof __propDef.events;
-export type ButtonSlots = typeof __propDef.slots;
+import type { Props } from '..';
 /**
  * Generated by SvelteForge🔥
  *
@@ -16,6 +6,6 @@ export type ButtonSlots = typeof __propDef.slots;
  *    Simple button component for easy customization and easy onclick functionality
  * Button is easily configured, colored, and will also abide to WCAG standards.
  */
-export default class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {
-}
-export {};
+declare const Button: import("svelte").Component<Props, {}, "class" | "buttonClass">;
+type Button = ReturnType<typeof Button>;
+export default Button;

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

@@ -4,7 +4,7 @@
     import { Frame } from "../.."
 
     // --- Logic ---
-    import { cn } from '../../../utils';
+    import { cn } from '../../../utils/classname';
     import type { Props } from ".."
     
     let {

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

@@ -1,20 +1,10 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type FlexProps = typeof __propDef.props;
-export type FlexEvents = typeof __propDef.events;
-export type FlexSlots = typeof __propDef.slots;
+import type { Props } from "..";
 /**
  * Generated by SvelteForge🔥
  *
  * # Flex Component
  * Wrapper component for Frame with the flex attribute passed
  */
-export default class Flex extends SvelteComponentTyped<FlexProps, FlexEvents, FlexSlots> {
-}
-export {};
+declare const Flex: import("svelte").Component<Props, {}, "class">;
+type Flex = ReturnType<typeof Flex>;
+export default Flex;

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	// --- Logic ---
-	import { cn, Tokenizer } from '../../../utils';
+	import { cn, Tokenizer } from '../../../utils/classname';
 	import type { Props } from '..';
 
 	let {