lithesome 0.3.2 → 0.4.0

package/dist/components/Accordion/Accordion.svelte

@@ -1,5 +1,5 @@
 <script context="module">import { getContext } from "svelte";
-import { createContext } from "./context.svelte.js";
+import { AccordionContext } from "./context.svelte.js";
 const contextName = "accordion-context";
 export const context = () => getContext(contextName);
 </script>
@@ -7,11 +7,11 @@ export const context = () => getContext(contextName);
 <script>import { useActions, classProp } from "../../internal/index.js";
 import { setContext } from "svelte";
 let { children, use = [], class: klass, self = $bindable(), single = $bindable(false), ...props } = $props();
-const ctx = createContext({ single });
+const ctx = new AccordionContext({ single });
 const active = $derived(ctx.activeItems.length > 0);
 setContext(contextName, ctx);
 $effect(() => {
-  ctx.setSingle(single);
+  ctx.single = single;
 });
 </script>
 

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

@@ -1,13 +1,6 @@
 import { SvelteComponent } from "svelte";
-export declare const context: () => {
-    uid: (component?: string | undefined) => string;
-    toggle(itemId: string): void;
-    register(item: import("./context.svelte.js").Item): void;
-    setDisabled(id: string, val: boolean): void;
-    setSingle(val: boolean): void;
-    readonly items: import("./context.svelte.js").Item[];
-    readonly activeItems: string[];
-};
+import { AccordionContext } from './context.svelte.js';
+export declare const context: () => AccordionContext;
 import { type BaseProps } from '../../internal/index.js';
 declare const __propDef: {
     props: BaseProps<HTMLDivElement, {

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

@@ -1,17 +1,18 @@
+import { Context } from '../../internal/index.js';
 export interface Item {
     id: string;
     disabled: boolean;
 }
-interface InitialValues {
-    single?: boolean;
+interface Init {
+    single: boolean;
 }
-export declare const createContext: (init: InitialValues) => {
-    uid: (component?: string | undefined) => string;
-    toggle(itemId: string): void;
+export declare class AccordionContext extends Context {
+    items: Item[];
+    activeItems: string[];
+    single: boolean;
+    constructor(init: Init);
     register(item: Item): void;
+    toggle(itemId: string): void;
     setDisabled(id: string, val: boolean): void;
-    setSingle(val: boolean): void;
-    readonly items: Item[];
-    readonly activeItems: string[];
-};
+}
 export {};

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

@@ -1,40 +1,31 @@
-import { createUID } from '../../internal/index.js';
-export const createContext = (init) => {
-    const { uid } = createUID('accordion');
-    let items = $state([]);
-    let activeItems = $state([]);
-    let single = $state(init.single || false);
-    return {
-        uid,
-        toggle(itemId) {
-            if (single) {
-                if (activeItems[0] === itemId)
-                    activeItems = [];
-                else
-                    activeItems[0] = itemId;
-            }
-            else {
-                if (activeItems.includes(itemId))
-                    activeItems = activeItems.filter((el) => el !== itemId);
-                else
-                    activeItems = [...activeItems, itemId];
-            }
-        },
-        register(item) {
-            items = [...items, item];
-        },
-        setDisabled(id, val) {
-            const index = items.findIndex((el) => el.id === id);
-            items[index].disabled = val;
-        },
-        setSingle(val) {
-            single = val;
-        },
-        get items() {
-            return items;
-        },
-        get activeItems() {
-            return activeItems;
+import { Context } from '../../internal/index.js';
+export class AccordionContext extends Context {
+    items = $state([]);
+    activeItems = $state([]);
+    single = $state(false);
+    constructor(init) {
+        super('accordion');
+        this.single = init.single;
+    }
+    register(item) {
+        this.items.push(item);
+    }
+    toggle(itemId) {
+        if (this.single) {
+            if (this.activeItems[0] === itemId)
+                this.activeItems = [];
+            else
+                this.activeItems[0] = itemId;
         }
-    };
-};
+        else {
+            if (this.activeItems.includes(itemId))
+                this.activeItems = this.activeItems.filter((el) => el !== itemId);
+            else
+                this.activeItems.push(itemId);
+        }
+    }
+    setDisabled(id, val) {
+        const i = this.items.findIndex((el) => el.id === id);
+        this.items[i].disabled = val;
+    }
+}

package/dist/components/Combobox/Combobox.svelte

@@ -1,5 +1,5 @@
 <script context="module">import { getContext, onMount, tick } from "svelte";
-import { createContext } from "./context.svelte.js";
+import { ComboboxContext } from "./context.svelte.js";
 const contextName = "combobox-context";
 export const context = () => getContext(contextName);
 </script>
@@ -18,7 +18,7 @@ let {
   ...props
 } = $props();
 const multiple = Array.isArray(value);
-const ctx = createContext(
+const ctx = new ComboboxContext(
   { multiple },
   {
     onChange({ newValue, newTouched, newLabel }) {
@@ -40,7 +40,7 @@ onMount(async () => {
   await tick();
   ctx.setInitialSelected(value);
   ctx.close();
-  ctx.setMounted(true);
+  ctx.mounted = true;
 });
 </script>
 

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

@@ -1,29 +1,6 @@
 import { SvelteComponent } from "svelte";
-export declare const context: () => {
-    uid: (component?: string | undefined) => string;
-    open(): void;
-    close(): void;
-    toggle(): void;
-    queryElements(): void;
-    navigateOptions(action: import("../../internal/index.js").CalcIndexAction): void;
-    setHoveredOption(optionId?: string | undefined): void;
-    setSelectedOptions(): void;
-    setInitialSelected(value: unknown): Promise<void>;
-    setTrigger(node: HTMLInputElement): void;
-    setDropdown(node: HTMLElement): void;
-    setMounted(value: boolean): void;
-    setTouched(value: boolean): void;
-    readonly visible: boolean;
-    readonly hoveredIndex: number;
-    readonly options: HTMLElement[];
-    readonly touched: HTMLElement[];
-    readonly dropdown: HTMLElement | null;
-    readonly mounted: boolean;
-    readonly selectedOptions: HTMLElement[];
-    readonly hoveredOption: HTMLElement;
-    readonly trigger: HTMLInputElement | null;
-    multiple: boolean | undefined;
-};
+import { ComboboxContext } from './context.svelte.js';
+export declare const context: () => ComboboxContext<any>;
 import { type BaseProps } from '../../internal/index.js';
 declare class __sveltets_Render<ValueType> {
     props(): BaseProps<HTMLDivElement, {

package/dist/components/Combobox/ComboboxDropdown.svelte

@@ -38,7 +38,7 @@ onMount(() => {
 });
 $effect(() => {
   if (ctx.visible && self)
-    ctx.setDropdown(self);
+    ctx.dropdown = self;
 });
 $effect(() => {
   if (ctx.visible && ctx.trigger && ctx.dropdown) {
@@ -58,7 +58,10 @@ $effect(() => {
 	{#if ctx.visible}
 		<div
 			bind:this={self}
-			use:clickOutside={{ exclude: [ctx.trigger], callback: ctx.close }}
+			use:clickOutside={{
+				exclude: [ctx.trigger],
+				callback: () => ctx.close()
+			}}
 			use:portal={portalTarget}
 			use:useActions={use}
 			in:_transition.in.fn={_transition.in.params}
@@ -72,7 +75,10 @@ $effect(() => {
 {:else if ctx.visible}
 	<div
 		bind:this={self}
-		use:clickOutside={{ exclude: [ctx.trigger], callback: ctx.close }}
+		use:clickOutside={{
+			exclude: [ctx.trigger],
+			callback: () => ctx.close()
+		}}
 		use:portal={portalTarget}
 		use:useActions={use}
 		{...attrs}

package/dist/components/Combobox/ComboboxInput.svelte

@@ -21,7 +21,7 @@ const ctx = context();
 onMount(() => {
   if (!ctx || !self)
     return;
-  ctx.setTrigger(self);
+  ctx.trigger = self;
 });
 const handleClick = (e) => {
   onClick?.(e);
@@ -35,7 +35,7 @@ const handleKeydown = (e) => {
     return;
   const { key } = e;
   if (!PREVENT_KEYS.includes(key)) {
-    ctx.setTouched(true);
+    ctx.touched = true;
     if (!ctx.visible)
       ctx.open();
   }
@@ -45,19 +45,19 @@ const handleKeydown = (e) => {
       ctx.open();
   }
   if (key === KEYS.home)
-    ctx.navigateOptions("first");
+    ctx.navigate("first");
   if (key === KEYS.end)
-    ctx.navigateOptions("last");
+    ctx.navigate("last");
   if (key === KEYS.arrowUp)
-    ctx.navigateOptions("prev");
+    ctx.navigate("prev");
   if (key === KEYS.arrowDown)
-    ctx.navigateOptions("next");
+    ctx.navigate("next");
   if (key === KEYS.escape)
     ctx.close();
   if (key === KEYS.enter) {
     e.preventDefault();
     if (ctx.hoveredOption && ctx.visible) {
-      document.querySelector(`#${ctx.hoveredOption.id}`).click();
+      ctx.hoveredOption.click();
       if (!ctx.multiple)
         ctx.close();
     } else {

package/dist/components/Combobox/ComboboxOption.svelte

@@ -28,7 +28,7 @@ const label = $derived(labelProp || isBrowser && self ? self?.textContent?.trim(
 const handleClick = (e) => {
   onClick?.(e);
   if (!disabled) {
-    ctx.setSelectedOptions();
+    ctx.setSelected();
   }
 };
 const handleFocus = (e) => {
@@ -37,7 +37,7 @@ const handleFocus = (e) => {
 const handleMouseover = (e) => {
   onMouseenter?.(e);
   if (!disabled)
-    ctx.setHoveredOption(uid());
+    ctx.setHovered(uid());
 };
 onMount(() => {
   ctx.queryElements();

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

@@ -1,12 +1,12 @@
-import { type CalcIndexAction, type JsonValue } from '../../internal/index.js';
+import { Context, type CalcIndexAction, type JsonValue } from '../../internal/index.js';
 export interface Option {
     value: JsonValue;
     label: string;
     id: string;
     disabled?: boolean;
 }
-interface InitialValues {
-    multiple?: boolean;
+interface Init {
+    multiple: boolean;
 }
 interface Hooks<ValueType> {
     onChange?: (values: {
@@ -15,29 +15,26 @@ interface Hooks<ValueType> {
         newLabel?: string;
     }) => void;
 }
-export declare const createContext: <ValueType>({ multiple }: InitialValues, hooks?: Hooks<ValueType>) => {
-    uid: (component?: string | undefined) => string;
+export declare class ComboboxContext<ValueType = any> extends Context<Hooks<ValueType>> {
+    #private;
+    visible: boolean;
+    hoveredIndex: number;
+    options: HTMLElement[];
+    trigger: HTMLInputElement | null;
+    dropdown: HTMLElement | null;
+    selectedOptions: HTMLElement[];
+    mounted: boolean;
+    touched: boolean;
+    multiple: boolean;
+    hoveredOption: HTMLElement | undefined;
+    constructor(init: Init, hooks: Hooks<ValueType>);
     open(): void;
     close(): void;
     toggle(): void;
     queryElements(): void;
-    navigateOptions(action: CalcIndexAction): void;
-    setHoveredOption(optionId?: string): void;
-    setSelectedOptions(): void;
-    setInitialSelected(value: ValueType): Promise<void>;
-    setTrigger(node: HTMLInputElement): void;
-    setDropdown(node: HTMLElement): void;
-    setMounted(value: boolean): void;
-    setTouched(value: boolean): void;
-    readonly visible: boolean;
-    readonly hoveredIndex: number;
-    readonly options: HTMLElement[];
-    readonly touched: HTMLElement[];
-    readonly dropdown: HTMLElement | null;
-    readonly mounted: boolean;
-    readonly selectedOptions: HTMLElement[];
-    readonly hoveredOption: HTMLElement;
-    readonly trigger: HTMLInputElement | null;
-    multiple: boolean | undefined;
-};
+    navigate(action: CalcIndexAction): void;
+    setHovered(optionId?: string): void;
+    setSelected(): void;
+    setInitialSelected(value: ValueType): void;
+}
 export {};

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

@@ -1,134 +1,97 @@
-import { calculateIndex, disableScroll, removeDisabledElements, createUID } from '../../internal/index.js';
+import { calculateIndex, disableScroll, removeDisabledElements, Context, effects } from '../../internal/index.js';
 import { tick } from 'svelte';
-export const createContext = ({ multiple }, hooks) => {
-    const { uid } = createUID('combobox');
-    let visible = $state(true);
-    let hoveredIndex = $state(-1);
-    let options = $state([]);
-    let trigger = $state(null);
-    let dropdown = $state(null);
-    let selectedOptions = $state([]);
-    let mounted = $state(false);
-    let touched = $state(false);
-    const hoveredOption = $derived(options[hoveredIndex]);
-    $effect(() => {
-        disableScroll(visible && !document.body.style.overflow);
-    });
-    $effect(() => {
-        if (!visible || !options || hoveredIndex > options.length - 1) {
-            hoveredIndex = -1;
-        }
-    });
-    $effect(() => {
-        if (visible) {
-            tick().then(() => {
-                hoveredIndex = options.findIndex((option) => option.ariaSelected === 'true');
-            });
+export class ComboboxContext extends Context {
+    visible = $state(true);
+    hoveredIndex = $state(-1);
+    options = $state([]);
+    trigger = $state(null);
+    dropdown = $state(null);
+    selectedOptions = $state([]);
+    mounted = $state(false);
+    touched = $state(false);
+    multiple = $state(false);
+    hoveredOption = $derived(this.options[this.hoveredIndex]);
+    constructor(init, hooks) {
+        super('combobox', hooks);
+        this.multiple = init.multiple;
+    }
+    open() {
+        this.visible = true;
+    }
+    close() {
+        this.visible = false;
+    }
+    toggle() {
+        this.visible = !this.visible;
+    }
+    queryElements() {
+        const elements = removeDisabledElements(`#${this.uid('dropdown')} [data-comboboxoption]`);
+        if (!elements)
+            return;
+        this.options = elements;
+    }
+    navigate(action) {
+        this.hoveredIndex = calculateIndex(action, this.options, this.hoveredIndex);
+        if (this.hoveredOption)
+            this.hoveredOption.scrollIntoView({ block: 'nearest' });
+    }
+    setHovered(optionId) {
+        if (!optionId)
+            return;
+        this.hoveredIndex = this.options.findIndex((el) => el.id === optionId);
+    }
+    setSelected() {
+        if (!this.hoveredOption)
+            return;
+        if (this.multiple) {
+            if (this.selectedOptions.find((el) => el.dataset.value === this.hoveredOption?.dataset.value)) {
+                this.selectedOptions = this.selectedOptions.filter((el) => el.dataset.value !== this.hoveredOption?.dataset.value);
+            }
+            else {
+                this.selectedOptions.push(this.hoveredOption);
+            }
         }
         else {
-            options = [];
-            touched = false;
+            this.selectedOptions[0] = this.hoveredOption;
         }
-    });
-    $effect(() => {
-        if (!visible)
-            return;
-        hooks?.onChange?.({ newTouched: touched });
-    });
-    return {
-        uid,
-        open() {
-            visible = true;
-        },
-        close() {
-            visible = false;
-        },
-        toggle() {
-            visible = !visible;
-        },
-        queryElements() {
-            const elements = removeDisabledElements(`#${uid('dropdown')} [data-comboboxoption]`);
-            if (!elements)
-                return;
-            options = elements;
-        },
-        navigateOptions(action) {
-            hoveredIndex = calculateIndex(action, options, hoveredIndex);
-            document.querySelector(`#${hoveredOption?.id}`)?.scrollIntoView({ block: 'nearest' });
-        },
-        setHoveredOption(optionId) {
-            if (!optionId)
-                return;
-            hoveredIndex = options.findIndex((el) => el.id === optionId);
-        },
-        setSelectedOptions() {
-            if (!hoveredOption)
-                return;
-            if (multiple) {
-                if (selectedOptions.find((el) => el.dataset.value === hoveredOption.dataset.value)) {
-                    selectedOptions = selectedOptions.filter((el) => el.dataset.value !== hoveredOption.dataset.value);
-                }
-                else {
-                    selectedOptions = [...selectedOptions, hoveredOption];
-                }
+        if (!this.multiple)
+            this.visible = false;
+        const value = this.multiple
+            ? this.selectedOptions.map((el) => el.dataset.value)
+            : this.selectedOptions[0].dataset.value;
+        const label = this.multiple ? '' : this.selectedOptions[0].dataset.label || '';
+        this.hooks?.onChange?.({ newValue: value, newLabel: label });
+    }
+    setInitialSelected(value) {
+        this.selectedOptions = this.options.filter((el) => {
+            if (!Array.isArray(value) && el.dataset.value === value)
+                return el;
+            else if (Array.isArray(value) && value.includes(el.dataset.value))
+                return el;
+        });
+    }
+    #effects = effects(() => {
+        $effect(() => {
+            disableScroll(this.visible && !document.body.style.overflow);
+        });
+        $effect(() => {
+            if (!this.visible || !this.options || this.hoveredIndex > this.options.length - 1)
+                this.hoveredIndex = -1;
+        });
+        $effect(() => {
+            if (this.visible) {
+                tick().then(() => {
+                    this.hoveredIndex = this.options.findIndex((option) => option.ariaSelected === 'true');
+                });
             }
             else {
-                selectedOptions[0] = hoveredOption;
-            }
-            if (!multiple) {
-                visible = false;
+                this.options = [];
+                this.touched = false;
             }
-            const value = multiple ? selectedOptions.map((el) => el.dataset.value) : selectedOptions[0].dataset.value;
-            const label = multiple ? '' : selectedOptions[0].dataset.label || '';
-            hooks?.onChange?.({ newValue: value, newLabel: label });
-        },
-        async setInitialSelected(value) {
-            selectedOptions = options.filter((el) => {
-                if (!Array.isArray(value) && el.dataset.value === value)
-                    return el;
-                else if (Array.isArray(value) && value.includes(el.dataset.value))
-                    return el;
-            });
-        },
-        setTrigger(node) {
-            trigger = node;
-        },
-        setDropdown(node) {
-            dropdown = node;
-        },
-        setMounted(value) {
-            mounted = value;
-        },
-        setTouched(value) {
-            touched = value;
-        },
-        get visible() {
-            return visible;
-        },
-        get hoveredIndex() {
-            return hoveredIndex;
-        },
-        get options() {
-            return options;
-        },
-        get touched() {
-            return options;
-        },
-        get dropdown() {
-            return dropdown;
-        },
-        get mounted() {
-            return mounted;
-        },
-        get selectedOptions() {
-            return selectedOptions;
-        },
-        get hoveredOption() {
-            return hoveredOption;
-        },
-        get trigger() {
-            return trigger;
-        },
-        multiple
-    };
-};
+        });
+        $effect(() => {
+            if (this.visible)
+                this.hooks?.onChange?.({ newTouched: this.touched });
+        });
+    });
+}

package/dist/components/Menu/Menu.svelte

@@ -1,5 +1,5 @@
 <script context="module">import { getContext } from "svelte";
-import { createContext } from "./context.svelte.js";
+import { MenuContext } from "./context.svelte.js";
 const contextName = "menu-context";
 export const context = () => getContext(contextName);
 </script>
@@ -7,7 +7,7 @@ export const context = () => getContext(contextName);
 <script>import { useActions, classProp } from "../../internal/index.js";
 import { setContext } from "svelte";
 let { children, use = [], class: klass, self = $bindable(), ...props } = $props();
-const ctx = createContext();
+const ctx = new MenuContext();
 setContext(contextName, ctx);
 </script>
 

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

@@ -1,22 +1,6 @@
 import { SvelteComponent } from "svelte";
-export declare const context: () => {
-    uid: (component?: string | undefined) => string;
-    open(): void;
-    close(): void;
-    toggle(): void;
-    navigateItems(action: import("../../internal/index.js").CalcIndexAction): void;
-    register(item: string): void;
-    unregister(item: string): void;
-    setHoveredItem(itemId: string): void;
-    setTrigger(node: HTMLElement): void;
-    setDropdown(node: HTMLElement): void;
-    readonly visible: boolean;
-    readonly hoveredIndex: number;
-    readonly trigger: HTMLElement | null;
-    readonly dropdown: HTMLElement | null;
-    readonly items: string[];
-    readonly hoveredItem: string;
-};
+import { MenuContext } from './context.svelte.js';
+export declare const context: () => MenuContext;
 import { type BaseProps } from '../../internal/index.js';
 declare const __propDef: {
     props: BaseProps<HTMLDivElement, {

package/dist/components/Menu/MenuDropdown.svelte

@@ -37,7 +37,7 @@ onMount(async () => {
 });
 $effect(() => {
   if (ctx.visible && self)
-    ctx.setDropdown(self);
+    ctx.dropdown = self;
 });
 $effect(() => {
   if (ctx.visible && ctx.trigger && ctx.dropdown) {
@@ -57,7 +57,7 @@ $effect(() => {
 	{#if ctx.visible}
 		<div
 			bind:this={self}
-			use:clickOutside={{ exclude: [ctx.trigger], callback: ctx.close }}
+			use:clickOutside={{ exclude: [ctx.trigger], callback: () => ctx.close() }}
 			use:portal={portalTarget}
 			use:useActions={use}
 			in:_transition.in.fn={_transition.in.params}
@@ -71,7 +71,7 @@ $effect(() => {
 {:else if ctx.visible}
 	<div
 		bind:this={self}
-		use:clickOutside={{ exclude: [ctx.trigger], callback: ctx.close }}
+		use:clickOutside={{ exclude: [ctx.trigger], callback: () => ctx.close() }}
 		use:portal={portalTarget}
 		use:useActions={use}
 		{...attrs}

package/dist/components/Menu/MenuItem.svelte

@@ -31,7 +31,7 @@ const handleClick = (e) => {
   }
 };
 const handleMouseover = (e) => {
-  ctx.setHoveredItem(uid());
+  ctx.setHovered(uid());
   onMouseover?.(e);
 };
 const handleFocus = (e) => {