@marianmeres/stuic 1.0.3

package/README.md

@@ -0,0 +1,15 @@
+# @marianmeres/stuic
+
+*S*velte *T*ailwind _UI_ *C*omponents.
+
+OPINIONATED, UNSTABLE, AND IN PROGRESS...
+
+Ongoing effort to build reusable Svelte UI primitives as I need them, inspired by many
+other libs, mainly:
+
+- https://www.skeleton.dev/
+- https://flowbite-svelte.com/
+- https://captaincodeman.github.io/svelte-headlessui/
+- https://www.svelteui.org/
+
+Cherry-picked, combined, adjusted and tweaked to my personal preference and needs.

package/dist/actions/click-outside.d.ts

@@ -0,0 +1,3 @@
+export declare const clickOutside: (node: HTMLElement, callback: () => void) => {
+    destroy(): void;
+};

package/dist/actions/click-outside.js

@@ -0,0 +1,15 @@
+export const clickOutside = (node, callback) => {
+    const handleClick = (event) => {
+        if (!event?.target)
+            return;
+        if (node && !node.contains(event.target) && !event.defaultPrevented) {
+            callback();
+        }
+    };
+    document.addEventListener('click', handleClick, true);
+    return {
+        destroy() {
+            document.removeEventListener('click', handleClick, true);
+        },
+    };
+};

package/dist/actions/focus-trap.d.ts

@@ -0,0 +1,4 @@
+export declare function focusTrap(node: HTMLElement, enabled: boolean): {
+    update(newArgs: boolean): void;
+    destroy(): void;
+};

package/dist/actions/focus-trap.js

@@ -0,0 +1,66 @@
+// copied from skeleton
+// Action: Focus Trap
+export function focusTrap(node, enabled) {
+    const elemWhitelist = 'a[href]:not([tabindex="-1"]), button:not([tabindex="-1"]), input:not([tabindex="-1"]), textarea:not([tabindex="-1"]), select:not([tabindex="-1"]), details:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])';
+    let elemFirst;
+    let elemLast;
+    // When the first element is selected, shift+tab pressed, jump to the last selectable item.
+    function onFirstElemKeydown(e) {
+        if (e.shiftKey && e.code === 'Tab') {
+            e.preventDefault();
+            elemLast.focus();
+        }
+    }
+    // When the last item selected, tab pressed, jump to the first selectable item.
+    function onLastElemKeydown(e) {
+        if (!e.shiftKey && e.code === 'Tab') {
+            e.preventDefault();
+            elemFirst.focus();
+        }
+    }
+    const onScanElements = (fromObserver) => {
+        if (enabled === false)
+            return;
+        // Gather all focusable elements
+        const focusableElems = Array.from(node.querySelectorAll(elemWhitelist));
+        if (focusableElems.length) {
+            // Set first/last focusable elements
+            elemFirst = focusableElems[0];
+            elemLast = focusableElems[focusableElems.length - 1];
+            // Auto-focus first focusable element only when not called from observer
+            if (!fromObserver)
+                elemFirst.focus();
+            // Listen for keydown on first & last element
+            elemFirst.addEventListener('keydown', onFirstElemKeydown);
+            elemLast.addEventListener('keydown', onLastElemKeydown);
+        }
+    };
+    onScanElements(false);
+    function onCleanUp() {
+        if (elemFirst)
+            elemFirst.removeEventListener('keydown', onFirstElemKeydown);
+        if (elemLast)
+            elemLast.removeEventListener('keydown', onLastElemKeydown);
+    }
+    // When children of node are changed (added or removed)
+    const onObservationChange = (mutationRecords, observer) => {
+        if (mutationRecords.length) {
+            onCleanUp();
+            onScanElements(true);
+        }
+        return observer;
+    };
+    const observer = new MutationObserver(onObservationChange);
+    observer.observe(node, { childList: true, subtree: true });
+    // Lifecycle
+    return {
+        update(newArgs) {
+            enabled = newArgs;
+            newArgs ? onScanElements(false) : onCleanUp();
+        },
+        destroy() {
+            onCleanUp();
+            observer.disconnect();
+        },
+    };
+}

package/dist/components/AppShell/AppShell.svelte

@@ -0,0 +1,201 @@
+<script>import { createEventDispatcher } from "svelte";
+import { twMerge } from "tailwind-merge";
+const dispatch = createEventDispatcher();
+let _class = "";
+export { _class as class };
+export let railClass = "";
+export let headerClass = "";
+export let contentClass = "";
+export let sidebarLeftClass = "";
+export let pageClass = "";
+export let pageHeaderClass = "";
+export let pageMainClass = "";
+export let pageFooterClass = "";
+export let sidebarRightClass = "";
+export let footerClass = "";
+export let scrollbarGutter = "auto";
+export let id = "shell";
+export let pageFlexGrow = 3;
+$:
+  _sidebarFlexCls = pageFlexGrow ? "flex-1" : "flex-none";
+const flexMap = ["flex-1", "flex-1", "flex-[2]", "flex-[3]", "flex-[4]", "flex-[5]"];
+$:
+  _pageFlexCls = flexMap[pageFlexGrow] || "flex-1";
+let shell;
+let rail;
+let header;
+let sidebarLeft;
+let page;
+let pageHeader;
+let pageMain;
+let pageFooter;
+let sidebarRight;
+let footer;
+$:
+  if (shell)
+    dispatch("element", { shell });
+$:
+  if (rail)
+    dispatch("element", { rail });
+$:
+  if (header)
+    dispatch("element", { header });
+$:
+  if (sidebarLeft)
+    dispatch("element", { sidebarLeft });
+$:
+  if (page)
+    dispatch("element", { page });
+$:
+  if (pageHeader)
+    dispatch("element", { pageHeader });
+$:
+  if (pageMain)
+    dispatch("element", { pageMain });
+$:
+  if (pageFooter)
+    dispatch("element", { pageFooter });
+$:
+  if (sidebarRight)
+    dispatch("element", { sidebarRight });
+$:
+  if (footer)
+    dispatch("element", { footer });
+</script>
+
+<!-- shell -->
+<div
+	bind:this={shell}
+	{id}
+	data-shell="shell"
+	class={twMerge(`w-full h-full flex overflow-hidden ${_class}`)}
+>
+	<!-- shell > rail -->
+	{#if $$slots.rail}
+		<div
+			bind:this={rail}
+			data-shell="rail"
+			class={twMerge(`flex-none overflow-x-hidden overflow-y-auto ${railClass}`)}
+		>
+			<slot name="rail" />
+		</div>
+	{/if}
+
+	<!-- shell > div-->
+	<div class="h-full flex-1 flex flex-col overflow-hidden">
+		<!-- shell > div > header -->
+		{#if $$slots.header}
+			<header
+				bind:this={header}
+				data-shell="header"
+				class={twMerge(`flex-none z-10 ${headerClass}`)}
+			>
+				<slot name="header" />
+			</header>
+		{/if}
+
+		<!-- shell > div > content -->
+		<div
+			data-shell="content"
+			class={twMerge(`flex-auto w-full h-full flex overflow-hidden ${contentClass}`)}
+		>
+			<!-- shell > div > content > sidebar-left -->
+			{#if $$slots.sidebarLeft}
+				<aside
+					bind:this={sidebarLeft}
+					data-shell="sidebar-left"
+					class={twMerge(
+						`${_sidebarFlexCls} overflow-x-hidden overflow-y-auto w-auto ${sidebarLeftClass}`
+					)}
+				>
+					<slot name="sidebarLeft" />
+				</aside>
+			{/if}
+
+			<!-- shell > div > content > page -->
+			<div
+				bind:this={page}
+				data-shell="page"
+				class={twMerge(`${_pageFlexCls} overflow-x-hidden flex flex-col ${pageClass}`)}
+				style:scrollbar-gutter={scrollbarGutter}
+				on:scroll
+			>
+				<!-- shell > div > content > page > page-header -->
+				{#if $$slots.pageHeader}
+					<header
+						bind:this={pageHeader}
+						data-shell="page-header"
+						class={twMerge(`flex-none ${pageHeaderClass}`)}
+					>
+						<slot name="pageHeader" />
+					</header>
+				{/if}
+
+				<!-- shell > div > content > page > page-main -->
+				<main
+					bind:this={pageMain}
+					data-shell="page-main"
+					class={twMerge(`flex-auto ${pageMainClass}`)}
+				>
+					<slot />
+				</main>
+
+				<!-- shell > div > content > page > page-footer -->
+				{#if $$slots.pageFooter}
+					<footer
+						bind:this={pageFooter}
+						data-shell="page-footer"
+						class={twMerge(`flex-none ${pageFooterClass}`)}
+					>
+						<slot name="pageFooter" />
+					</footer>
+				{/if}
+			</div>
+
+			<!-- shell > div > content > sidebar-right -->
+			{#if $$slots.sidebarRight}
+				<aside
+					bind:this={sidebarRight}
+					data-shell="sidebar-right"
+					class={twMerge(
+						`${_sidebarFlexCls} overflow-x-hidden overflow-y-auto ${sidebarRightClass}`
+					)}
+				>
+					<slot name="sidebarRight" />
+				</aside>
+			{/if}
+		</div>
+
+		<!-- shell > div > footer -->
+		{#if $$slots.footer}
+			<footer
+				bind:this={footer}
+				data-shell="footer"
+				class={twMerge(`flex-none ${footerClass}`)}
+			>
+				<slot name="footer" />
+			</footer>
+		{/if}
+	</div>
+</div>
+
+<style>/* from: https://www.skeleton.dev/components/app-shell
+
+The App Shell will need to expand to fill all available space within your app's body tag. 
+Open /src/app.html and add the following classes. This wrapping element is required 
+and the style of display: contents should remain.
+
+<body>
+	<div style="display: contents" class="h-full overflow-hidden">%sveltekit.body%</div>
+</body>
+
+Then update your global stylesheet with the following. This will disable overflow for 
+html and body tags to prevent duplicate scroll bars.
+
+html, body { @apply h-full overflow-hidden; }
+*/
+:global(html),
+:global(body) {
+  height: 100vh !important;
+  overflow: hidden !important;
+}</style>

package/dist/components/AppShell/AppShell.svelte.d.ts

@@ -0,0 +1,41 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string | undefined;
+        railClass?: string | undefined;
+        headerClass?: string | undefined;
+        contentClass?: string | undefined;
+        sidebarLeftClass?: string | undefined;
+        pageClass?: string | undefined;
+        pageHeaderClass?: string | undefined;
+        pageMainClass?: string | undefined;
+        pageFooterClass?: string | undefined;
+        sidebarRightClass?: string | undefined;
+        footerClass?: string | undefined;
+        scrollbarGutter?: string | undefined;
+        id?: string | undefined;
+        pageFlexGrow?: 0 | 1 | 2 | 3 | 4 | 5 | undefined;
+    };
+    events: {
+        scroll: Event;
+        element: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        rail: {};
+        header: {};
+        sidebarLeft: {};
+        pageHeader: {};
+        default: {};
+        pageFooter: {};
+        sidebarRight: {};
+        footer: {};
+    };
+};
+export type AppShellProps = typeof __propDef.props;
+export type AppShellEvents = typeof __propDef.events;
+export type AppShellSlots = typeof __propDef.slots;
+export default class AppShell extends SvelteComponent<AppShellProps, AppShellEvents, AppShellSlots> {
+}
+export {};

package/dist/components/Backdrop/Backdrop.svelte

@@ -0,0 +1,51 @@
+<script context="module">export class BackdropConfig {
+  static class = "";
+  static fadeInDuration = 50;
+  static fadeOutDuration = 150;
+}
+</script>
+
+<script>import { createEventDispatcher } from "svelte";
+import { fade } from "svelte/transition";
+import { twMerge } from "tailwind-merge";
+import { focusTrap } from "../../actions/focus-trap.js";
+import { prefersReducedMotionStore } from "../../utils/prefers-reduced-motion.js";
+const dispatch = createEventDispatcher();
+export let useFocusTrap = true;
+let _class = "";
+export { _class as class };
+export let fadeInDuration = BackdropConfig.fadeInDuration;
+export let fadeOutDuration = BackdropConfig.fadeOutDuration;
+export let transitionEnabled = !$prefersReducedMotionStore;
+$:
+  if (!transitionEnabled) {
+    fadeInDuration = 0;
+    fadeOutDuration = 0;
+  }
+let el;
+$:
+  if (el)
+    dispatch("element", { backdrop: el });
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- prettier-ignore -->
+<div
+	bind:this={el}
+	class={twMerge(`
+		fixed inset-0 flex z-10 
+		${BackdropConfig.class} ${_class}
+	`.trim())}
+	on:click
+	on:mousedown
+	on:touchstart|passive
+	on:touchend|passive
+	on:keydown={(e) => e.code === 'Escape' && dispatch('escape')}
+	in:fade={{ duration: fadeInDuration }}
+	out:fade={{ duration: fadeOutDuration }}
+	use:focusTrap={useFocusTrap}
+	role="presentation"
+	tabindex="-1" 
+>
+	<slot />
+</div>

package/dist/components/Backdrop/Backdrop.svelte.d.ts

@@ -0,0 +1,34 @@
+import { SvelteComponent } from "svelte";
+export declare class BackdropConfig {
+    static class: string;
+    static fadeInDuration: number;
+    static fadeOutDuration: number;
+}
+declare const __propDef: {
+    props: {
+        useFocusTrap?: boolean | undefined;
+        class?: string | undefined;
+        fadeInDuration?: number | undefined;
+        fadeOutDuration?: number | undefined;
+        transitionEnabled?: boolean | undefined;
+    };
+    events: {
+        click: MouseEvent;
+        mousedown: MouseEvent;
+        touchstart: TouchEvent;
+        touchend: TouchEvent;
+        escape: CustomEvent<any>;
+        element: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type BackdropProps = typeof __propDef.props;
+export type BackdropEvents = typeof __propDef.events;
+export type BackdropSlots = typeof __propDef.slots;
+export default class Backdrop extends SvelteComponent<BackdropProps, BackdropEvents, BackdropSlots> {
+}
+export {};

package/dist/components/Button/Button.svelte

@@ -0,0 +1,130 @@
+<script context="module">import { twMerge } from "tailwind-merge";
+export class ButtonConfig {
+  static defaultSize = "md";
+  static defaultShadow = false;
+  static defaultRounded = true;
+  static defaultVariant = void 0;
+  // hover:brightness-[1.15]
+  static presetBase = `
+			text-base
+			text-center whitespace-nowrap
+			inline-flex justify-center items-center gap-x-1
+			border border-transparent
+			hover:brightness-[1.1]
+			active:brightness-[0.95]
+			disabled:!cursor-not-allowed disabled:!opacity-50 disabled:hover:brightness-100
+			no-underline
+		`.trim();
+  static presetSquare = "p-0 aspect-square";
+  static presetsRounded = {
+    xs: "rounded",
+    sm: "rounded",
+    md: "rounded-md",
+    lg: "rounded-md",
+    xl: "rounded-lg"
+  };
+  static presetsShadow = {
+    xs: "shadow-sm dark:shadow-black",
+    sm: "shadow    dark:shadow-black",
+    md: "shadow    dark:shadow-black",
+    lg: "shadow-md dark:shadow-black",
+    xl: "shadow-md dark:shadow-black"
+  };
+  static presetsSize = {
+    xs: "px-2   py-0.5 text-xs",
+    sm: "px-3   py-1   text-sm",
+    md: "px-3.5 py-1   text-base",
+    lg: "px-4   py-1.5 text-lg",
+    xl: "px-4   py-2   text-xl"
+  };
+  static classBySize = {
+    xs: "",
+    sm: "",
+    md: "",
+    lg: "",
+    xl: ""
+  };
+  static class = "";
+  // to be defined at consumer level...
+  static variant = {};
+}
+</script>
+
+<script>let _class = "";
+export { _class as class };
+export let href = "";
+export let type = "button";
+export let shadow = ButtonConfig.defaultShadow;
+export let rounded = ButtonConfig.defaultRounded;
+export let variant = ButtonConfig.defaultVariant;
+export let square = false;
+export let disabled = false;
+const _whitelist = ["xs", "sm", "md", "lg", "xl"];
+export let size = ButtonConfig.defaultSize;
+$:
+  if (!_whitelist.includes(size))
+    size = ButtonConfig.defaultSize;
+let buttonClass;
+$:
+  buttonClass = twMerge(
+    ButtonConfig.presetBase,
+    // either full, or config, or none
+    rounded ? rounded === "full" || square ? "rounded-full" : ButtonConfig.presetsRounded[size] : "",
+    //
+    shadow && ButtonConfig.presetsShadow[size],
+    //
+    ButtonConfig.presetsSize[size],
+    //
+    ButtonConfig.classBySize[size],
+    //
+    ButtonConfig.class,
+    //
+    // variant && ButtonConfig.variant?.[variant],
+    variant && `${variant || ""}`.split(" ").reduce((m, v) => {
+      m += ButtonConfig.variant?.[v] + " ";
+      return m;
+    }, ""),
+    //
+    square && ButtonConfig.presetSquare,
+    //
+    _class
+  );
+</script>
+
+{#if href}
+	<a
+		{href}
+		class={buttonClass}
+		{...$$restProps}
+		role="button"
+		on:click
+		on:change
+		on:keydown
+		on:keyup
+		on:touchstart|passive
+		on:touchend
+		on:touchcancel
+		on:mouseenter
+		on:mouseleave
+	>
+		<slot />
+	</a>
+{:else}
+	<button
+		{type}
+		{disabled}
+		class={buttonClass}
+		{...$$restProps}
+		on:click
+		on:change
+		on:keydown
+		on:keyup
+		on:touchstart|passive
+		on:touchend
+		on:touchcancel
+		on:mouseenter
+		on:mouseleave
+	>
+		<slot />
+	</button>
+{/if}

package/dist/components/Button/Button.svelte.d.ts

@@ -0,0 +1,76 @@
+import { SvelteComponent } from "svelte";
+import type { HTMLButtonAttributes } from 'svelte/elements';
+export declare class ButtonConfig {
+    static defaultSize: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    static defaultShadow: boolean;
+    static defaultRounded: boolean;
+    static defaultVariant: string | undefined;
+    static presetBase: string;
+    static presetSquare: string;
+    static presetsRounded: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    static presetsShadow: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    static presetsSize: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    static classBySize: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    static class: string;
+    static variant: Record<string, string>;
+}
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string | undefined;
+        href?: string | undefined;
+        type?: HTMLButtonAttributes['type'];
+        shadow?: boolean | undefined;
+        rounded?: boolean | "full" | undefined;
+        variant?: string | undefined;
+        square?: boolean | undefined;
+        disabled?: boolean | undefined;
+        size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+    };
+    events: {
+        click: MouseEvent;
+        change: Event;
+        keydown: KeyboardEvent;
+        keyup: KeyboardEvent;
+        touchstart: TouchEvent;
+        touchend: TouchEvent;
+        touchcancel: TouchEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ButtonProps = typeof __propDef.props;
+export type ButtonEvents = typeof __propDef.events;
+export type ButtonSlots = typeof __propDef.slots;
+export default class Button extends SvelteComponent<ButtonProps, ButtonEvents, ButtonSlots> {
+}
+export {};

package/dist/components/Drawer/Drawer.svelte

@@ -0,0 +1,89 @@
+<script context="module">import { createClog } from "@marianmeres/clog";
+import { createSwitchStore } from "@marianmeres/switch-store";
+import { createEventDispatcher } from "svelte";
+import { slide, fly } from "svelte/transition";
+import { twMerge } from "tailwind-merge";
+import { prefersReducedMotionStore } from "../../utils/prefers-reduced-motion.js";
+import Backdrop from "../Backdrop/Backdrop.svelte";
+import { clickOutside } from "../../actions/click-outside.js";
+export const createDrawerStore = (open = false) => createSwitchStore(open);
+</script>
+
+<script>const clog = createClog("Drawer");
+const dispatch = createEventDispatcher();
+export let drawer;
+export let position = "left";
+const _whitelist = ["left", "top", "right", "bottom"];
+$:
+  if (!_whitelist.includes(position))
+    position = "left";
+let _class = "";
+export { _class as class };
+export let backdropClass = "";
+export let labelledby = "";
+export let describedby = "";
+export let transitionDuration = 250;
+export let transitionEnabled = !$prefersReducedMotionStore;
+export let animOffset = "66vw";
+$:
+  fadeInDuration = transitionEnabled ? Math.min(transitionDuration * 0.66, 200) : 0;
+const _presetsClsBackdrop = {
+  left: `justify-start`,
+  right: `justify-end`,
+  top: `items-start`,
+  bottom: `items-end`
+};
+const _presetsCls = {
+  left: `w-full sm:w-[66vw] h-full`,
+  right: `w-full sm:w-[66vw] h-full`,
+  top: `w-full h-full sm:h-[66vh]`,
+  bottom: `w-full h-full sm:h-[66vh]`
+};
+$:
+  _presetsAnim = {
+    left: { x: `-${animOffset}`, y: 0 },
+    right: { x: animOffset, y: 0 },
+    top: { x: 0, y: `-${animOffset}` },
+    bottom: { x: 0, y: animOffset }
+  };
+let el;
+$:
+  if (el)
+    dispatch("element", { drawer: el });
+</script>
+
+<!-- prettier-ignore -->
+{#if $drawer.isOpen}
+	<Backdrop
+		class={twMerge(`
+			${_presetsClsBackdrop[position] || ''}  ${backdropClass}
+		`.trim())}
+		on:escape
+		on:click={(e) => dispatch('click_backdrop')}
+		{fadeInDuration}
+		fadeOutDuration={transitionEnabled ? transitionDuration : 0}
+		on:element
+	>
+		<!-- 
+			svelte-ignore 
+			a11y-click-events-have-key-events 
+			a11y-no-noninteractive-element-interactions 
+		-->
+		<div
+			bind:this={el}
+			on:click|stopPropagation
+			aria-modal="true" 
+			role="dialog"
+			aria-labelledby={labelledby}
+			aria-describedby={describedby}
+			transition:fly={{
+				duration: transitionEnabled ? transitionDuration : 0,
+				...(_presetsAnim[position] || {}),
+			}}
+			class={twMerge(`overflow-y-auto ${_presetsCls[position] || ''} ${_class}`.trim())}
+			use:clickOutside={() => dispatch('click_outside')}
+		>
+			<slot />
+		</div>
+	</Backdrop>
+{/if}

package/dist/components/Drawer/Drawer.svelte.d.ts

@@ -0,0 +1,32 @@
+import { SvelteComponent } from "svelte";
+export type DrawerStore = ReturnType<typeof createDrawerStore>;
+export declare const createDrawerStore: (open?: boolean) => import("@marianmeres/switch-store").SwitchStore<any>;
+declare const __propDef: {
+    props: {
+        drawer: import("@marianmeres/switch-store").SwitchStore<any>;
+        position?: "left" | "top" | "right" | "bottom" | undefined;
+        class?: string | undefined;
+        backdropClass?: string | undefined;
+        labelledby?: string | undefined;
+        describedby?: string | undefined;
+        transitionDuration?: number | undefined;
+        transitionEnabled?: boolean | undefined;
+        animOffset?: string | number | undefined;
+    };
+    events: {
+        escape: CustomEvent<any>;
+        element: CustomEvent<any>;
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type DrawerProps = typeof __propDef.props;
+export type DrawerEvents = typeof __propDef.events;
+export type DrawerSlots = typeof __propDef.slots;
+export default class Drawer extends SvelteComponent<DrawerProps, DrawerEvents, DrawerSlots> {
+}
+export {};

package/dist/components/PrefersColorScheme/PrefersColorScheme.svelte

@@ -0,0 +1,28 @@
+<script context="module">export class ColorScheme {
+  static KEY = "color-scheme";
+  static getSystemValue = () => window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  static getLocalValue = () => localStorage.getItem(ColorScheme.KEY);
+  static getValue = () => {
+    return ColorScheme.KEY in localStorage ? localStorage.getItem(ColorScheme.KEY) : ColorScheme.getSystemValue();
+  };
+  static toggle = () => {
+    const isDark = window.document.documentElement.classList.toggle("dark");
+    localStorage.setItem(ColorScheme.KEY, isDark ? "dark" : "light");
+  };
+  static reset = () => {
+    localStorage.removeItem(ColorScheme.KEY);
+  };
+}
+</script>
+
+<svelte:head>
+	<script>
+		const KEY = 'color-scheme';
+		const cls = window.document.documentElement.classList;
+		if (KEY in localStorage) {
+			localStorage.getItem(KEY) === 'dark' ? cls.add('dark') : cls.remove('dark');
+		} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+			cls.add('dark');
+		}
+	</script>
+</svelte:head>

package/dist/components/PrefersColorScheme/PrefersColorScheme.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+export declare class ColorScheme {
+    static readonly KEY = "color-scheme";
+    static getSystemValue: () => "dark" | "light";
+    static getLocalValue: () => string | null;
+    static getValue: () => string | null;
+    static toggle: () => void;
+    static reset: () => void;
+}
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PrefersColorSchemeProps = typeof __propDef.props;
+export type PrefersColorSchemeEvents = typeof __propDef.events;
+export type PrefersColorSchemeSlots = typeof __propDef.slots;
+export default class PrefersColorScheme extends SvelteComponent<PrefersColorSchemeProps, PrefersColorSchemeEvents, PrefersColorSchemeSlots> {
+}
+export {};

package/dist/components/X/X.svelte

@@ -0,0 +1,16 @@
+<script>import { twMerge } from "tailwind-merge";
+let _class = "";
+export { _class as class };
+export let size = "1em";
+</script>
+
+<svg
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width="1.5"
+	stroke="currentColor"
+	style="width:{size};height:{size};"
+	class={twMerge(`inline ${_class}`)}
+>
+	<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+</svg>

package/dist/components/X/X.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string | undefined;
+        size?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type XProps = typeof __propDef.props;
+export type XEvents = typeof __propDef.events;
+export type XSlots = typeof __propDef.slots;
+export default class X extends SvelteComponent<XProps, XEvents, XSlots> {
+}
+export {};

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { default as AppShell } from './components/AppShell/AppShell.svelte';
+export { default as Backdrop, BackdropConfig, } from './components/Backdrop/Backdrop.svelte';
+export { default as Button, ButtonConfig } from './components/Button/Button.svelte';
+export { default as PrefersColorScheme, ColorScheme, } from './components/PrefersColorScheme/PrefersColorScheme.svelte';
+export { default as Drawer, createDrawerStore } from './components/Drawer/Drawer.svelte';
+export { default as X } from './components/X/X.svelte';

package/dist/index.js

@@ -0,0 +1,14 @@
+// Reexport your entry components here
+//
+export { default as AppShell } from './components/AppShell/AppShell.svelte';
+//
+export { default as Backdrop, BackdropConfig, } from './components/Backdrop/Backdrop.svelte';
+// export { BackdropConfig } from './components/Backdrop/backdrop.js';
+//
+export { default as Button, ButtonConfig } from './components/Button/Button.svelte';
+//
+export { default as PrefersColorScheme, ColorScheme, } from './components/PrefersColorScheme/PrefersColorScheme.svelte';
+//
+export { default as Drawer, createDrawerStore } from './components/Drawer/Drawer.svelte';
+//
+export { default as X } from './components/X/X.svelte';

package/dist/types.d.ts

@@ -0,0 +1,3 @@
+export type SvelteEvent<E extends Event = Event, T extends EventTarget = Element> = E & {
+    currentTarget: EventTarget & T;
+};

package/dist/types.js

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

package/dist/utils/prefers-reduced-motion.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="svelte" />
+/**
+ * Indicates that the user has enabled reduced motion on their device.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
+ */
+export declare const prefersReducedMotionStore: import("svelte/store").Readable<boolean>;

package/dist/utils/prefers-reduced-motion.js

@@ -0,0 +1,26 @@
+import { readable } from 'svelte/store';
+import { BROWSER } from 'esm-env';
+/** Prefers reduced motion  */
+const reducedMotionQuery = '(prefers-reduced-motion: reduce)';
+function prefersReducedMotion() {
+    if (!BROWSER)
+        return false;
+    return window.matchMedia(reducedMotionQuery).matches;
+}
+/**
+ * Indicates that the user has enabled reduced motion on their device.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
+ */
+export const prefersReducedMotionStore = readable(prefersReducedMotion(), (set) => {
+    if (BROWSER) {
+        const setReducedMotion = (event) => {
+            set(event.matches);
+        };
+        const mediaQueryList = window.matchMedia(reducedMotionQuery);
+        mediaQueryList.addEventListener('change', setReducedMotion);
+        return () => {
+            mediaQueryList.removeEventListener('change', setReducedMotion);
+        };
+    }
+});

package/package.json

@@ -0,0 +1,64 @@
+{
+	"name": "@marianmeres/stuic",
+	"version": "1.0.3",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run package",
+		"build:watch": "fswatch -o src | xargs -n1 -I{} npm run build",
+		"preview": "vite preview",
+		"package": "svelte-kit sync && svelte-package && publint",
+		"prepublishOnly": "npm run package",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check .",
+		"format": "prettier --write .",
+		"prettier": "npm run format",
+		"release:minor": "release -v minor",
+		"release": "release -v patch"
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
+	"devDependencies": {
+		"@marianmeres/icons-fns": "^2.0.2",
+		"@marianmeres/parse-boolean": "^1.1.7",
+		"@marianmeres/random-human-readable": "^1.6.1",
+		"@marianmeres/release": "^1.1.2",
+		"@sveltejs/adapter-auto": "^2.0.0",
+		"@sveltejs/kit": "^1.27.4",
+		"@sveltejs/package": "^2.0.0",
+		"autoprefixer": "^10.4.16",
+		"clsx": "^2.0.0",
+		"esm-env": "^1.0.0",
+		"postcss": "^8.4.32",
+		"prettier": "^3.0.0",
+		"prettier-plugin-svelte": "^3.0.0",
+		"publint": "^0.1.9",
+		"sass": "^1.69.5",
+		"svelte": "^4.2.7",
+		"svelte-check": "^3.6.0",
+		"tailwindcss": "^3.3.6",
+		"tslib": "^2.4.1",
+		"typescript": "^5.0.0",
+		"vite": "^4.4.2"
+	},
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"dependencies": {
+		"@marianmeres/clog": "^1.0.1",
+		"@marianmeres/switch-store": "^1.3.1",
+		"tailwind-merge": "^2.1.0"
+	}
+}