lithesome 0.0.7

package/dist/components/Menu/MenuTrigger.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import { type BaseProps } from '../../internal/index.js';
+declare const __propDef: {
+    props: BaseProps<HTMLDivElement, {
+        visible: boolean;
+    }>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type MenuTriggerProps = typeof __propDef.props;
+export type MenuTriggerEvents = typeof __propDef.events;
+export type MenuTriggerSlots = typeof __propDef.slots;
+export default class MenuTrigger extends SvelteComponent<MenuTriggerProps, MenuTriggerEvents, MenuTriggerSlots> {
+}
+export {};

package/dist/components/Menu/context.svelte.d.ts

@@ -0,0 +1,17 @@
+import { type CalcIndexAction, type UID } from '../../internal/index.js';
+export declare const createContext: (uid: UID) => {
+    uid: UID;
+    visible: boolean;
+    hoveredIndex: number;
+    trigger: HTMLElement | null;
+    items: string[];
+    hoveredItem: string;
+    open(): void;
+    close(): void;
+    toggle(): void;
+    navigateItems(action: CalcIndexAction): void;
+    register(item: string): void;
+    unregister(item: string): void;
+    setHoveredItem(itemId: string): void;
+    setTrigger(node: HTMLElement): void;
+};

package/dist/components/Menu/context.svelte.js

@@ -0,0 +1,64 @@
+import { calculateIndex, disableScroll } from '../../internal/index.js';
+export const createContext = (uid) => {
+    // Internal state
+    let visible = $state(false);
+    let hoveredIndex = $state(-1);
+    let trigger = $state(null);
+    let items = $state([]);
+    // Derived state
+    const hoveredItem = $derived(items[hoveredIndex]);
+    // Effects
+    $effect(() => {
+        disableScroll(visible && !document.body.style.overflow);
+    });
+    $effect(() => {
+        if (!visible)
+            hoveredIndex = -1;
+    });
+    // Functions
+    const functions = {
+        open() {
+            visible = true;
+        },
+        close() {
+            visible = false;
+        },
+        toggle() {
+            visible = !visible;
+        },
+        navigateItems(action) {
+            hoveredIndex = calculateIndex(action, items, hoveredIndex);
+        },
+        register(item) {
+            items = [...items, item];
+        },
+        unregister(item) {
+            items = items.filter((el) => el === item);
+        },
+        setHoveredItem(itemId) {
+            hoveredIndex = items.findIndex((el) => el === itemId);
+        },
+        setTrigger(node) {
+            trigger = node;
+        }
+    };
+    return {
+        ...functions,
+        uid,
+        get visible() {
+            return visible;
+        },
+        get hoveredIndex() {
+            return hoveredIndex;
+        },
+        get trigger() {
+            return trigger;
+        },
+        get items() {
+            return items;
+        },
+        get hoveredItem() {
+            return hoveredItem;
+        }
+    };
+};

package/dist/components/Modal/Modal.svelte

@@ -0,0 +1,43 @@
+<script context="module">import { getContext } from "svelte";
+import { createContext } from "./context.svelte.js";
+const contextName = "modal-context";
+export const context = () => getContext(contextName);
+</script>
+
+<script>import { createUID, useActions, portal, KEYS, isBrowser } from "../../internal/index.js";
+import { setContext } from "svelte";
+let { children, use = [], class: klass, self, visible, portalTarget = "body", ...props } = $props();
+const { uid } = createUID("modal");
+const API = createContext(uid, visible);
+setContext(contextName, API);
+const classProp = $derived(typeof klass === "function" ? klass({}) : klass);
+const handleKeys = (e) => {
+  const { key } = e;
+  if (key === KEYS.escape)
+    visible = false;
+};
+$effect(() => {
+  API.updateVisible(visible);
+  if (isBrowser) {
+    if (visible) {
+      window.addEventListener("keydown", handleKeys);
+    } else {
+      window.removeEventListener("keydown", handleKeys);
+    }
+  }
+});
+</script>
+
+{#if visible}
+	<div
+		bind:this={self}
+		use:portal={portalTarget}
+		use:useActions={use}
+		id={uid()}
+		class={classProp}
+		data-modal=""
+		{...props}
+	>
+		{@render children({})}
+	</div>
+{/if}

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

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+export declare const context: () => {
+    visible: boolean;
+    updateVisible(value: boolean): void;
+    uid: import("../../internal/index.js").UID;
+};
+import { type BaseProps } from '../../internal/index.js';
+declare const __propDef: {
+    props: BaseProps<HTMLDivElement, any> & {
+        visible: boolean;
+        portalTarget?: string | HTMLElement | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ModalProps = typeof __propDef.props;
+export type ModalEvents = typeof __propDef.events;
+export type ModalSlots = typeof __propDef.slots;
+export default class Modal extends SvelteComponent<ModalProps, ModalEvents, ModalSlots> {
+}
+export {};

package/dist/components/Modal/ModalContent.svelte

@@ -0,0 +1,38 @@
+<script>import { useActions, trap, getTransition } from "../../internal/index.js";
+import { onMount } from "svelte";
+import { context } from "./Modal.svelte";
+let { children, class: klass, use = [], self, transition, ...props } = $props();
+const API = context();
+const classProp = $derived(typeof klass === "function" ? klass({}) : klass);
+const _transition = getTransition(transition);
+const attrs = $derived({
+  id: API.uid("content"),
+  class: classProp,
+  role: "dialog",
+  "aria-modal": "true",
+  tabindex: -1,
+  "aria-describedby": API.uid("description"),
+  "aria-labelledby": API.uid("title"),
+  "data-modalcontent": ""
+});
+</script>
+
+{#if _transition}
+	{#if API.visible}
+		<div
+			bind:this={self}
+			use:trap={{ allowOutsideClick: true }}
+			use:useActions={use}
+			in:_transition.in.fn|global={_transition.in.params}
+			out:_transition.out.fn|global={_transition.out.params}
+			{...props}
+			{...attrs}
+		>
+			{@render children({})}
+		</div>
+	{/if}
+{:else if API.visible}
+	<div bind:this={self} use:trap={{ allowOutsideClick: true }} use:useActions={use} {...props} {...attrs}>
+		{@render children({})}
+	</div>
+{/if}

package/dist/components/Modal/ModalContent.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import { type BaseProps, type Transition } from '../../internal/index.js';
+declare const __propDef: {
+    props: BaseProps<HTMLDivElement, any> & {
+        /**
+         * The `svelte/transtion` you wish to use.
+         *
+         * @see https://lithesome.dev/docs/api#transition-prop
+         */
+        transition?: Transition | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ModalContentProps = typeof __propDef.props;
+export type ModalContentEvents = typeof __propDef.events;
+export type ModalContentSlots = typeof __propDef.slots;
+export default class ModalContent extends SvelteComponent<ModalContentProps, ModalContentEvents, ModalContentSlots> {
+}
+export {};

package/dist/components/Modal/ModalDescription.svelte

@@ -0,0 +1,17 @@
+<script>import { useActions } from "../../internal/index.js";
+import { context } from "./Modal.svelte";
+let { children, class: klass, use = [], self, ...props } = $props();
+const API = context();
+const classProp = $derived(typeof klass === "function" ? klass({}) : klass);
+</script>
+
+<p
+	id={API.uid('description')}
+	bind:this={self}
+	data-modaldescription=""
+	use:useActions={use}
+	class={classProp}
+	{...props}
+>
+	{@render children({})}
+</p>

package/dist/components/Modal/ModalDescription.svelte.d.ts

@@ -0,0 +1,15 @@
+import { SvelteComponent } from "svelte";
+import { type BaseProps } from '../../internal/index.js';
+declare const __propDef: {
+    props: BaseProps<HTMLParagraphElement, any>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ModalDescriptionProps = typeof __propDef.props;
+export type ModalDescriptionEvents = typeof __propDef.events;
+export type ModalDescriptionSlots = typeof __propDef.slots;
+export default class ModalDescription extends SvelteComponent<ModalDescriptionProps, ModalDescriptionEvents, ModalDescriptionSlots> {
+}
+export {};

package/dist/components/Modal/ModalOverlay.svelte

@@ -0,0 +1,28 @@
+<script>import { useActions, getTransition } from "../../internal/index.js";
+import { context } from "./Modal.svelte";
+let { class: klass, use = [], self, transition, ...props } = $props();
+const API = context();
+const _transition = getTransition(transition);
+const classProp = $derived(typeof klass === "function" ? klass({}) : klass);
+const attrs = $derived({
+  id: API.uid("overlay"),
+  "aria-hidden": "true",
+  "data-modaloverlay": "",
+  class: classProp
+});
+</script>
+
+{#if _transition}
+	{#if API.visible}
+		<div
+			in:_transition.in.fn={_transition.in.params}
+			out:_transition.out.fn={_transition.out.params}
+			bind:this={self}
+			use:useActions={use}
+			{...props}
+			{...attrs}
+		/>
+	{/if}
+{:else if API.visible}
+	<div bind:this={self} use:useActions={use} {...props} {...attrs} />
+{/if}

package/dist/components/Modal/ModalOverlay.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import { type BaseProps, type Transition } from '../../internal/index.js';
+declare const __propDef: {
+    props: Omit<BaseProps<HTMLDivElement, any>, "children"> & {
+        /**
+         * The `svelte/transtion` you wish to use.
+         *
+         * @see https://lithesome.dev/docs/api#transition-prop
+         */
+        transition?: Transition | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ModalOverlayProps = typeof __propDef.props;
+export type ModalOverlayEvents = typeof __propDef.events;
+export type ModalOverlaySlots = typeof __propDef.slots;
+export default class ModalOverlay extends SvelteComponent<ModalOverlayProps, ModalOverlayEvents, ModalOverlaySlots> {
+}
+export {};

package/dist/components/Modal/ModalTitle.svelte

@@ -0,0 +1,10 @@
+<script>import { useActions } from "../../internal/index.js";
+import { context } from "./Modal.svelte";
+let { children, class: klass, use = [], self, ...props } = $props();
+const API = context();
+const classProp = $derived(typeof klass === "function" ? klass({}) : klass);
+</script>
+
+<h2 id={API.uid('title')} bind:this={self} data-modaltitle="" use:useActions={use} class={classProp} {...props}>
+	{@render children({})}
+</h2>

package/dist/components/Modal/ModalTitle.svelte.d.ts

@@ -0,0 +1,15 @@
+import { SvelteComponent } from "svelte";
+import { type BaseProps } from '../../internal/index.js';
+declare const __propDef: {
+    props: BaseProps<HTMLHeadElement, any>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ModalTitleProps = typeof __propDef.props;
+export type ModalTitleEvents = typeof __propDef.events;
+export type ModalTitleSlots = typeof __propDef.slots;
+export default class ModalTitle extends SvelteComponent<ModalTitleProps, ModalTitleEvents, ModalTitleSlots> {
+}
+export {};

package/dist/components/Modal/context.svelte.d.ts

@@ -0,0 +1,6 @@
+import { type UID } from '../../internal/index.js';
+export declare const createContext: (uid: UID, visibleInitial: boolean) => {
+    visible: boolean;
+    updateVisible(value: boolean): void;
+    uid: UID;
+};

package/dist/components/Modal/context.svelte.js

@@ -0,0 +1,19 @@
+import { disableScroll } from '../../internal/index.js';
+export const createContext = (uid, visibleInitial) => {
+    let visible = $state(visibleInitial);
+    $effect(() => {
+        disableScroll(visible && !document.body.style.overflow);
+    });
+    const functions = {
+        updateVisible(value) {
+            visible = value;
+        }
+    };
+    return {
+        uid,
+        ...functions,
+        get visible() {
+            return visible;
+        }
+    };
+};

package/dist/components/Pin/Pin.svelte

@@ -0,0 +1,51 @@
+<script context="module">import { getContext } from "svelte";
+import { createContext } from "./context.svelte.js";
+const contextName = "pin-context";
+export const context = () => getContext(contextName);
+</script>
+
+<script>import { createUID, useActions } from "../../internal/index.js";
+import { setContext } from "svelte";
+let {
+  children,
+  use = [],
+  class: klass,
+  self,
+  value,
+  disabled = false,
+  type = "text",
+  placeholder = "\u25CB",
+  onChange,
+  ...props
+} = $props();
+const { uid } = createUID("pin");
+const API = createContext(
+  uid,
+  { value, disabled, type, placeholder },
+  {
+    onChange(val) {
+      onChange?.(val);
+    }
+  }
+);
+setContext(contextName, API);
+const classProp = $derived(typeof klass === "function" ? klass({ filled: API.filled }) : klass);
+$effect(() => {
+  API.setType(type);
+  API.setDisabled(disabled);
+});
+</script>
+
+<div
+	bind:this={self}
+	id={uid()}
+	use:useActions={use}
+	class={classProp}
+	data-disabled={disabled || undefined}
+	aria-disabled={disabled || undefined}
+	data-pin=""
+	data-filled={API.filled || undefined}
+	{...props}
+>
+	{@render children({ filled: API.filled })}
+</div>

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

@@ -0,0 +1,37 @@
+import { SvelteComponent } from "svelte";
+export declare const context: () => {
+    inputs: string[];
+    value: string[];
+    disabled: boolean;
+    transformedValue: string;
+    type: "text" | "password";
+    filled: boolean;
+    placeholder: string;
+    register(inputId: string): void;
+    setValue(index: number, newVal: string): void;
+    setType(newVal: "text" | "password"): void;
+    setDisabled(newVal: boolean): void;
+    uid: import("../../internal/index.js").UID;
+};
+import { type BaseProps } from '../../internal/index.js';
+declare const __propDef: {
+    props: BaseProps<HTMLDivElement, {
+        filled: boolean;
+    }> & {
+        value: string[];
+        disabled?: boolean | undefined;
+        type?: "text" | "password" | undefined;
+        placeholder?: string | undefined;
+        onChange?: ((value: string) => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PinProps = typeof __propDef.props;
+export type PinEvents = typeof __propDef.events;
+export type PinSlots = typeof __propDef.slots;
+export default class Pin extends SvelteComponent<PinProps, PinEvents, PinSlots> {
+}
+export {};

package/dist/components/Pin/PinInput.svelte

@@ -0,0 +1,96 @@
+<script>import { context } from "./Pin.svelte";
+import { log, useActions, createUID, KEYS } from "../../internal/index.js";
+import { onMount, tick } from "svelte";
+let { class: klass, use = [], self, name, ...props } = $props();
+let value = $state("");
+const API = context();
+const { uid } = createUID("input");
+const classProp = $derived(
+  typeof klass === "function" ? klass({ filled: API.filled, disabled: API.disabled }) : klass
+);
+const index = $derived(API.inputs.indexOf(uid()));
+let focused = $state(false);
+onMount(() => {
+  if (!API)
+    log.error("<PinInput /> must be a direct child of <Pin />");
+  API.register(uid());
+});
+$effect(() => {
+  API.setValue(index, value);
+});
+const handleInput = async (event) => {
+  if (API.disabled)
+    return;
+  const e = event;
+  if (e.inputType !== "insertText")
+    return;
+  await tick();
+  if (value.length > 1) {
+    value = e.data;
+  }
+  if (value.length === 1) {
+    moveFocus("next");
+    return;
+  }
+};
+const handleKeyDown = (e) => {
+  if (API.disabled)
+    return;
+  const { key } = e;
+  if (key === KEYS.arrowLeft) {
+    e.preventDefault();
+    moveFocus("prev");
+  }
+  if (key === KEYS.arrowRight) {
+    e.preventDefault();
+    moveFocus("next");
+  }
+  if (index === API.inputs.length - 1 && value.length === 0 && key === KEYS.backspace) {
+    moveFocus("prev");
+    return;
+  }
+  if (key === KEYS.backspace && value.length === 0) {
+    moveFocus("prev");
+    return;
+  }
+};
+const handleFocus = () => {
+  if (API.disabled)
+    return;
+  focused = true;
+};
+const handleBlur = () => {
+  if (API.disabled)
+    return;
+  focused = false;
+};
+const moveFocus = (direction) => {
+  const dir = {
+    next: index + 1,
+    prev: index - 1,
+    first: 0,
+    last: API.inputs.length - 1
+  };
+  const target = API.inputs[dir[direction]];
+  if (target)
+    document.querySelector(`#${target}`)?.focus();
+};
+</script>
+
+<input
+	bind:this={self}
+	bind:value
+	id={uid()}
+	use:useActions={use}
+	class={classProp}
+	{name}
+	disabled={API.disabled}
+	data-pininput=""
+	data-filled={API.filled || undefined}
+	placeholder={focused ? '' : API.placeholder}
+	oninput={handleInput}
+	onkeydown={handleKeyDown}
+	onfocus={handleFocus}
+	onblur={handleBlur}
+	{...props}
+/>

package/dist/components/Pin/PinInput.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+import { type BaseProps } from '../../internal/index.js';
+declare const __propDef: {
+    props: Omit<BaseProps<HTMLInputElement, {
+        filled: boolean;
+        disabled: boolean;
+    }>, "children"> & {
+        /** The HTML Input element name attribute. */
+        name?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PinInputProps = typeof __propDef.props;
+export type PinInputEvents = typeof __propDef.events;
+export type PinInputSlots = typeof __propDef.slots;
+export default class PinInput extends SvelteComponent<PinInputProps, PinInputEvents, PinInputSlots> {
+}
+export {};

package/dist/components/Pin/PinValue.svelte

@@ -0,0 +1,27 @@
+<script>import { context } from "./Pin.svelte";
+import { log, useActions, createUID, KEYS } from "../../internal/index.js";
+import { onMount } from "svelte";
+let { class: klass, use = [], self, name, ...props } = $props();
+const API = context();
+const { uid } = createUID("input");
+const classProp = $derived(typeof klass === "function" ? klass({}) : klass);
+onMount(() => {
+  if (!API)
+    log.error("<AccordionItem /> must be a direct child of <Accordion />");
+});
+</script>
+
+<input
+	bind:this={self}
+	bind:value={API.transformedValue}
+	id={uid()}
+	use:useActions={use}
+	aria-hidden="true"
+	tabindex="-1"
+	hidden
+	class={classProp}
+	data-pininput=""
+	{name}
+	{...props}
+	style="opacity: 0; pointer-events: none; user-select: none; scale: 0;"
+/>

package/dist/components/Pin/PinValue.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+import { type BaseProps } from '../../internal/index.js';
+declare const __propDef: {
+    props: Omit<BaseProps<HTMLInputElement, any>, "children"> & {
+        /** The HTML Input element name attribute. */
+        name?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PinValueProps = typeof __propDef.props;
+export type PinValueEvents = typeof __propDef.events;
+export type PinValueSlots = typeof __propDef.slots;
+export default class PinValue extends SvelteComponent<PinValueProps, PinValueEvents, PinValueSlots> {
+}
+export {};

package/dist/components/Pin/context.svelte.d.ts

@@ -0,0 +1,25 @@
+import { type UID } from '../../internal/index.js';
+interface Defaults {
+    value: string[];
+    disabled: boolean;
+    type: 'text' | 'password';
+    placeholder: string;
+}
+interface Hooks {
+    onChange: (value: string) => void;
+}
+export declare const createContext: (uid: UID, defaults: Defaults, hooks: Hooks) => {
+    inputs: string[];
+    value: string[];
+    disabled: boolean;
+    transformedValue: string;
+    type: "text" | "password";
+    filled: boolean;
+    placeholder: string;
+    register(inputId: string): void;
+    setValue(index: number, newVal: string): void;
+    setType(newVal: 'text' | 'password'): void;
+    setDisabled(newVal: boolean): void;
+    uid: UID;
+};
+export {};