lithesome 0.18.0 → 0.19.0

package/dist/components/hovercard/Hovercard.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { stateValue } from '../../internals/context.svelte.js';
+	import { createHovercardRootContext } from './state.svelte.js';
+
+	import type { HovercardProps } from '../../types/index.js';
+
+	let {
+		children,
+		visible = $bindable(false),
+		delay = 700,
+		disabled = $bindable(false),
+		portalTarget = 'body',
+		floatingConfig = {}
+	}: HovercardProps<typeof ctx.state> = $props();
+
+	let ctx = createHovercardRootContext({
+		visible: stateValue(
+			() => visible,
+			(v) => {
+				visible = v;
+			}
+		),
+		disabled: stateValue(
+			() => disabled,
+			(v) => (disabled = v)
+		),
+		delay: stateValue(() => delay),
+		portalTarget: stateValue(() => portalTarget),
+		floatingConfig: stateValue(() => floatingConfig)
+	});
+</script>
+
+{@render children?.(ctx.state)}

package/dist/components/{Hovercard → hovercard}/Hovercard.svelte.d.ts

@@ -1,4 +1,6 @@
-import type { HovercardProps } from './types.js';
-declare const Hovercard: import("svelte").Component<HovercardProps, {}, "visible">;
+import type { HovercardProps } from '../../types/index.js';
+declare const Hovercard: import("svelte").Component<HovercardProps<{
+    visible: boolean;
+}>, {}, "disabled" | "visible">;
 type Hovercard = ReturnType<typeof Hovercard>;
 export default Hovercard;

package/dist/components/hovercard/HovercardArrow.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Element, parseId, stateValue } from '../../internals/index.js';
+	import { useHovercardArrow } from './state.svelte.js';
+
+	import type { HovercardArrowProps } from '../../types/index.js';
+
+	const uid = $props.id();
+
+	let {
+		id = parseId(uid),
+		children,
+		custom,
+		ref = $bindable(),
+		...props
+	}: HovercardArrowProps<typeof ctx.props> = $props();
+
+	let ctx = useHovercardArrow({
+		id,
+		ref: stateValue(() => ref!)
+	});
+</script>
+
+<Element bind:ref {children} {custom} {ctx} as="button" {...props} />

package/dist/components/hovercard/HovercardArrow.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { HovercardArrowProps } from '../../types/index.js';
+declare const HovercardArrow: import("svelte").Component<HovercardArrowProps<{
+    id: string;
+    "data-hovercard-arrow": string;
+}, any>, {}, "ref">;
+type HovercardArrow = ReturnType<typeof HovercardArrow>;
+export default HovercardArrow;

package/dist/components/hovercard/HovercardContent.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Element, parseId, stateValue } from '../../internals/index.js';
+	import { useHovercardContent } from './state.svelte.js';
+
+	import type { HovercardContentProps } from '../../types/index.js';
+
+	const uid = $props.id();
+
+	let {
+		id = parseId(uid),
+		children,
+		custom,
+		ref = $bindable(),
+		...props
+	}: HovercardContentProps<typeof ctx.props, typeof ctx.state> = $props();
+
+	let ctx = useHovercardContent({
+		id,
+		ref: stateValue(() => ref!)
+	});
+</script>
+
+<Element bind:ref {children} {custom} visible={ctx._root.$visible.val} {ctx} {...props} />

package/dist/components/hovercard/HovercardContent.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { HovercardContentProps } from '../../types/index.js';
+declare const HovercardContent: import("svelte").Component<HovercardContentProps<{
+    id: string;
+    "data-hovercard-content": string;
+}, {
+    visible: boolean;
+}>, {}, "ref">;
+type HovercardContent = ReturnType<typeof HovercardContent>;
+export default HovercardContent;

package/dist/components/hovercard/HovercardTrigger.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Element, parseId, stateValue } from '../../internals/index.js';
+	import { useHovercardTrigger } from './state.svelte.js';
+
+	import type { HovercardTriggerProps } from '../../types/index.js';
+
+	const uid = $props.id();
+
+	let {
+		id = parseId(uid),
+		children,
+		custom,
+		ref = $bindable(),
+		...props
+	}: HovercardTriggerProps<typeof ctx.props> = $props();
+
+	let ctx = useHovercardTrigger({
+		id,
+		ref: stateValue(() => ref!)
+	});
+</script>
+
+<Element bind:ref {children} {custom} {ctx} as="button" {...props} />

package/dist/components/hovercard/HovercardTrigger.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HovercardTriggerProps } from '../../types/index.js';
+declare const HovercardTrigger: import("svelte").Component<HovercardTriggerProps<{
+    id: string;
+    "data-hovercard-trigger": string;
+    'aria-describedby': string | undefined;
+}, any>, {}, "ref">;
+type HovercardTrigger = ReturnType<typeof HovercardTrigger>;
+export default HovercardTrigger;

package/dist/components/{Hovercard/index.d.ts → hovercard/index.js}

@@ -2,4 +2,3 @@ export { default as Hovercard } from './Hovercard.svelte';
 export { default as HovercardTrigger } from './HovercardTrigger.svelte';
 export { default as HovercardContent } from './HovercardContent.svelte';
 export { default as HovercardArrow } from './HovercardArrow.svelte';
-export type * from './types.js';

package/dist/components/hovercard/state.svelte.d.ts

@@ -0,0 +1,74 @@
+import { SvelteMap } from 'svelte/reactivity';
+import { Floating } from '../../internals/index.js';
+import type { GetInternalProps, GetInternalPropsNoId } from '../../internals/index.js';
+import type { HovercardArrowProps, HovercardContentProps, HovercardProps, HovercardTriggerProps } from '../../types/index.js';
+type RootProps = GetInternalPropsNoId<HovercardProps>;
+declare class HovercardRoot extends Floating {
+    $visible: RootProps['visible'];
+    $disabled: RootProps['disabled'];
+    $delay: RootProps['delay'];
+    $portalTarget: RootProps['portalTarget'];
+    $floatingConfig: RootProps['floatingConfig'];
+    sharedIds: SvelteMap<"content" | "trigger", string>;
+    timeout: {
+        set(fn: () => void, delay: number): void;
+        clear: () => void;
+    };
+    hovered: boolean;
+    ParsedDelay: {
+        in: number;
+        out: number;
+    };
+    constructor(props: RootProps);
+    open: () => void;
+    close: () => void;
+    props: {};
+    state: {
+        visible: boolean;
+    };
+}
+type TriggerProps = GetInternalProps<HovercardTriggerProps>;
+declare class HovercardTrigger {
+    #private;
+    _root: HovercardRoot;
+    constructor(root: HovercardRoot, props: TriggerProps);
+    props: {
+        id: string;
+        "data-hovercard-trigger": string;
+        'aria-describedby': string | undefined;
+    };
+    state: {
+        visible: boolean;
+    };
+}
+type ContentProps = GetInternalProps<HovercardContentProps>;
+declare class HovercardContent {
+    #private;
+    _root: HovercardRoot;
+    constructor(root: HovercardRoot, props: ContentProps);
+    props: {
+        id: string;
+        "data-hovercard-content": string;
+    };
+    state: {
+        visible: boolean;
+    };
+}
+type ArrowProps = GetInternalProps<HovercardArrowProps>;
+declare class HovercardArrow {
+    $id: ArrowProps['id'];
+    _root: HovercardRoot;
+    constructor(root: HovercardRoot, props: ArrowProps);
+    props: {
+        id: string;
+        "data-hovercard-arrow": string;
+    };
+    state: {
+        visible: boolean;
+    };
+}
+export declare const createHovercardRootContext: (props: RootProps) => HovercardRoot;
+export declare const useHovercardTrigger: (props: TriggerProps) => HovercardTrigger;
+export declare const useHovercardArrow: (props: ArrowProps) => HovercardArrow;
+export declare const useHovercardContent: (props: ContentProps) => HovercardContent;
+export {};

package/dist/components/hovercard/state.svelte.js

@@ -0,0 +1,149 @@
+import { SvelteMap } from 'svelte/reactivity';
+import { portal } from '../../index.js';
+import { addEvents, attach, buildContext, createAttributes, floating, Floating, parseDelay, trackTimeout } from '../../internals/index.js';
+const { attrs } = createAttributes('hovercard', ['trigger', 'content', 'arrow']);
+class HovercardRoot extends Floating {
+    $visible;
+    $disabled;
+    $delay;
+    $portalTarget;
+    $floatingConfig;
+    sharedIds = new SvelteMap();
+    timeout = trackTimeout();
+    hovered = $state(false);
+    ParsedDelay = $derived.by(() => parseDelay(this.$delay.val));
+    constructor(props) {
+        super();
+        this.$visible = props.visible;
+        this.$disabled = props.disabled;
+        this.$delay = props.delay;
+        this.$portalTarget = props.portalTarget;
+        this.$floatingConfig = props.floatingConfig;
+    }
+    open = () => {
+        this.timeout.set(() => {
+            this.$visible.val = true;
+        }, this.ParsedDelay.in);
+    };
+    close = () => {
+        this.timeout.set(() => {
+            if (!this.hovered)
+                this.$visible.val = false;
+        }, this.ParsedDelay.out);
+    };
+    props = {};
+    state = $derived.by(() => ({
+        visible: this.$visible.val
+    }));
+}
+class HovercardTrigger {
+    #id;
+    _root;
+    constructor(root, props) {
+        this._root = root;
+        this.#id = props.id;
+    }
+    props = $derived.by(() => ({
+        id: this.#id,
+        [attrs.trigger]: '',
+        'aria-describedby': this._root.sharedIds.get('content'),
+        ...attach((node) => {
+            this._root.trigger = node;
+            return addEvents(node, {
+                mouseenter: () => {
+                    if (this._root.$disabled.val)
+                        return;
+                    this._root.open();
+                },
+                mouseleave: () => {
+                    if (this._root.$disabled.val)
+                        return;
+                    this._root.close();
+                },
+                focus: () => {
+                    if (this._root.$disabled.val)
+                        return;
+                    this._root.open();
+                },
+                blur: () => {
+                    if (this._root.$disabled.val)
+                        return;
+                    this._root.close();
+                }
+            });
+        })
+    }));
+    state = $derived.by(() => ({
+        visible: this._root.$visible.val
+    }));
+}
+class HovercardContent {
+    #id;
+    _root;
+    constructor(root, props) {
+        this._root = root;
+        this.#id = props.id;
+        this._root.sharedIds.set('trigger', this.#id);
+    }
+    props = $derived.by(() => ({
+        id: this.#id,
+        [attrs.content]: '',
+        ...attach((node) => {
+            this._root.content = node;
+            const floatingCleanUp = floating(this._root.trigger, this._root.arrow, this._root.$floatingConfig.val)(node);
+            const portalCleanUp = portal(this._root.$portalTarget.val)(node);
+            const eventsCleanUp = addEvents(node, {
+                mouseenter: () => {
+                    this._root.hovered = true;
+                    this._root.timeout.clear();
+                },
+                mouseleave: () => {
+                    this._root.hovered = false;
+                    this._root.close();
+                }
+            });
+            return () => {
+                floatingCleanUp?.();
+                portalCleanUp?.();
+                eventsCleanUp?.();
+            };
+        })
+    }));
+    state = $derived.by(() => ({
+        visible: this._root.$visible.val
+    }));
+}
+class HovercardArrow {
+    $id;
+    _root;
+    constructor(root, props) {
+        this._root = root;
+        this.$id = props.id;
+    }
+    props = $derived.by(() => ({
+        id: this.$id,
+        [attrs.arrow]: '',
+        ...attach((node) => {
+            this._root.arrow = node;
+        })
+    }));
+    state = $derived.by(() => ({
+        visible: this._root.$visible.val
+    }));
+}
+//
+// ~~BUILDERS
+//
+const rootContext = buildContext(HovercardRoot);
+export const createHovercardRootContext = (props) => {
+    return rootContext.create(props);
+};
+export const useHovercardTrigger = (props) => {
+    return rootContext.register(HovercardTrigger, props);
+};
+export const useHovercardArrow = (props) => {
+    return rootContext.register(HovercardArrow, props);
+};
+export const useHovercardContent = (props) => {
+    return rootContext.register(HovercardContent, props);
+};

package/dist/components/menu/Menu.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { stateValue } from '../../internals/context.svelte.js';
+	import { parseId } from '../../internals/utils.svelte.js';
+	import { createMenuRootContext } from './state.svelte.js';
+
+	import type { MenuProps } from '../../types/index.js';
+
+	const uid = $props.id();
+
+	let {
+		children,
+		visible = $bindable(false),
+		disabled = $bindable(false),
+		portalTarget = 'body',
+		floatingConfig = {}
+	}: MenuProps<typeof ctx.state> = $props();
+
+	let ctx = createMenuRootContext({
+		id: parseId(uid),
+		visible: stateValue(
+			() => visible,
+			(v) => {
+				visible = v;
+			}
+		),
+		disabled: stateValue(
+			() => disabled,
+			(v) => (disabled = v)
+		),
+		portalTarget: stateValue(() => portalTarget),
+		floatingConfig: stateValue(() => floatingConfig)
+	});
+</script>
+
+{@render children?.(ctx.state)}

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

@@ -0,0 +1,6 @@
+import type { MenuProps } from '../../types/index.js';
+declare const Menu: import("svelte").Component<MenuProps<{
+    visible: boolean;
+}>, {}, "disabled" | "visible">;
+type Menu = ReturnType<typeof Menu>;
+export default Menu;

package/dist/components/menu/MenuArrow.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Element, parseId, stateValue } from '../../internals/index.js';
+	import { useMenuArrow } from './state.svelte.js';
+
+	import type { MenuArrowProps } from '../../types/index.js';
+
+	const uid = $props.id();
+
+	let { id = parseId(uid), children, custom, ref = $bindable(), ...props }: MenuArrowProps<typeof ctx.props> = $props();
+
+	let ctx = useMenuArrow({
+		id,
+		ref: stateValue(() => ref!)
+	});
+</script>
+
+<Element bind:ref {children} {custom} {ctx} as="button" {...props} />

package/dist/components/{Menu → menu}/MenuArrow.svelte.d.ts

@@ -1,4 +1,7 @@
-import type { MenuArrowProps } from './types.js';
-declare const MenuArrow: import("svelte").Component<MenuArrowProps, {}, "self">;
+import type { MenuArrowProps } from '../../types/index.js';
+declare const MenuArrow: import("svelte").Component<MenuArrowProps<{
+    id: string;
+    "data-menu-arrow": string;
+}, any>, {}, "ref">;
 type MenuArrow = ReturnType<typeof MenuArrow>;
 export default MenuArrow;

package/dist/components/menu/MenuContent.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Element, parseId, stateValue } from '../../internals/index.js';
+	import { useMenuContent } from './state.svelte.js';
+
+	import type { MenuContentProps } from '../../types/index.js';
+
+	const uid = $props.id();
+
+	let {
+		id = parseId(uid),
+		children,
+		custom,
+		ref = $bindable(),
+		...props
+	}: MenuContentProps<typeof ctx.props, typeof ctx.state> = $props();
+
+	let ctx = useMenuContent({
+		id,
+		ref: stateValue(() => ref!)
+	});
+</script>
+
+<Element bind:ref {children} {custom} visible={ctx._root.$visible.val} {ctx} {...props} />

package/dist/components/menu/MenuContent.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { MenuContentProps } from '../../types/index.js';
+declare const MenuContent: import("svelte").Component<MenuContentProps<{
+    id: string;
+    "data-menu-content": string;
+}, {
+    visible: boolean;
+}>, {}, "ref">;
+type MenuContent = ReturnType<typeof MenuContent>;
+export default MenuContent;

package/dist/components/menu/MenuItem.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Element, parseId, stateValue } from '../../internals/index.js';
+	import { useMenuItem } from './state.svelte.js';
+
+	import type { MenuItemProps } from '../../types/index.js';
+
+	const uid = $props.id();
+
+	let {
+		id = parseId(uid),
+		children,
+		custom,
+		disabled = $bindable(false),
+		closeOnClick = true,
+		href,
+		ref = $bindable(),
+		...props
+	}: MenuItemProps<typeof ctx.props, typeof ctx.state> & Record<string, any> = $props();
+
+	let ctx = useMenuItem({
+		id,
+		ref: stateValue(() => ref!),
+		disabled: stateValue(() => disabled),
+		closeOnClick: stateValue(() => closeOnClick)
+	});
+</script>
+
+<Element bind:ref as={href ? 'a' : 'button'} {href} {children} {custom} {ctx} {...props} />

package/dist/components/menu/MenuItem.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { MenuItemProps } from '../../types/index.js';
+declare const MenuItem: import("svelte").Component<MenuItemProps<{
+    id: string;
+    role: string;
+    "data-menu-item": string;
+    'aria-disabled': boolean;
+    'data-active': string | undefined;
+}, {
+    readonly disabled: boolean;
+    readonly active: boolean;
+}> & Record<string, any>, {}, "disabled" | "ref">;
+type MenuItem = ReturnType<typeof MenuItem>;
+export default MenuItem;

package/dist/components/menu/MenuSub.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { stateValue } from '../../internals/context.svelte.js';
+	import { parseId } from '../../internals/utils.svelte.js';
+	import { createMenuSubContext } from './state.svelte.js';
+
+	import type { MenuSubProps } from '../../types/index.js';
+
+	const uid = $props.id();
+
+	let {
+		children,
+		name,
+		visible = $bindable(false),
+		disabled = $bindable(false),
+		portalTarget = 'body',
+		floatingConfig = {}
+	}: MenuSubProps<typeof ctx.state> = $props();
+
+	let ctx = createMenuSubContext({
+		id: parseId(uid),
+		name: stateValue(() => name.toLowerCase().replace(/ /g, '')),
+		visible: stateValue(
+			() => visible,
+			(v) => {
+				visible = v;
+			}
+		),
+		disabled: stateValue(
+			() => disabled,
+			(v) => (disabled = v)
+		),
+		portalTarget: stateValue(() => portalTarget),
+		floatingConfig: stateValue(() => floatingConfig)
+	});
+</script>
+
+{@render children?.(ctx.state)}

package/dist/components/menu/MenuSub.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { MenuSubProps } from '../../types/index.js';
+declare const MenuSub: import("svelte").Component<MenuSubProps<{
+    visible: boolean;
+}>, {}, "disabled" | "visible">;
+type MenuSub = ReturnType<typeof MenuSub>;
+export default MenuSub;

package/dist/components/menu/MenuSubContent.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Element, parseId, stateValue } from '../../internals/index.js';
+	import { useMenuSubContent } from './state.svelte.js';
+
+	import type { MenuSubContentProps } from '../../types/index.js';
+
+	const uid = $props.id();
+
+	let {
+		id = parseId(uid),
+		children,
+		custom,
+		ref = $bindable(),
+		...props
+	}: MenuSubContentProps<typeof ctx.props, typeof ctx.state> = $props();
+
+	let ctx = useMenuSubContent({
+		id,
+		ref: stateValue(() => ref!)
+	});
+</script>
+
+<Element bind:ref {children} {custom} visible={ctx._sub.$visible.val} {ctx} {...props} />

package/dist/components/menu/MenuSubContent.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { MenuSubContentProps } from '../../types/index.js';
+declare const MenuSubContent: import("svelte").Component<MenuSubContentProps<{
+    id: string;
+    "data-menu-sub-content": string;
+}, {
+    visible: boolean;
+}>, {}, "ref">;
+type MenuSubContent = ReturnType<typeof MenuSubContent>;
+export default MenuSubContent;

package/dist/components/menu/MenuSubTrigger.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Element, parseId, stateValue } from '../../internals/index.js';
+	import { useMenuSubTrigger } from './state.svelte.js';
+
+	import type { MenuTriggerProps } from '../../types/index.js';
+
+	const uid = $props.id();
+
+	let {
+		id = parseId(uid),
+		children,
+		custom,
+		ref = $bindable(),
+		...props
+	}: MenuTriggerProps<typeof ctx.props, typeof ctx.state> = $props();
+
+	let ctx = useMenuSubTrigger({
+		id,
+		ref: stateValue(() => ref!)
+	});
+</script>
+
+<Element bind:ref {children} {custom} {ctx} as="button" {...props} />

package/dist/components/menu/MenuSubTrigger.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { MenuTriggerProps } from '../../types/index.js';
+declare const MenuSubTrigger: import("svelte").Component<MenuTriggerProps<{
+    id: string;
+    role: string;
+    'aria-haspopup': string;
+    'aria-expanded': boolean;
+    'aria-controls': string | undefined;
+    "data-menu-sub-trigger": string;
+    'data-active': string | undefined;
+    'data-opened': string | undefined;
+}, {
+    readonly disabled: boolean;
+    readonly active: boolean;
+    readonly opened: boolean;
+}>, {}, "ref">;
+type MenuSubTrigger = ReturnType<typeof MenuSubTrigger>;
+export default MenuSubTrigger;

package/dist/components/menu/MenuTrigger.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Element, parseId, stateValue } from '../../internals/index.js';
+	import { useMenuTrigger } from './state.svelte.js';
+
+	import type { MenuTriggerProps } from '../../types/index.js';
+
+	const uid = $props.id();
+
+	let {
+		id = parseId(uid),
+		children,
+		custom,
+		ref = $bindable(),
+		...props
+	}: MenuTriggerProps<typeof ctx.props> = $props();
+
+	let ctx = useMenuTrigger({
+		id,
+		ref: stateValue(() => ref!)
+	});
+</script>
+
+<Element bind:ref {children} {custom} {ctx} as="button" {...props} />