lithesome 0.18.0 → 0.19.0

package/README.md

@@ -1,43 +1,58 @@
-> [!WARNING]
-> This library is still in very early development. Expect things to be broken.
+# Svelte library
 
-# Lithesome
+Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).
 
-An unstyled component library for Svelte 5.
+Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
 
-<br>
+## Creating a project
 
-## Install
+If you're seeing this, you've probably already done this step. Congrats!
 
-```bash
-pnpm i -D lithesome
+```sh
+# create a new project in the current directory
+npx sv create
+
+# create a new project in my-app
+npx sv create my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```sh
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+
+## Building
+
+To build your library:
+
+```sh
+npm pack
 ```
 
-## Usage
-
-```svelte
-<script>
-	import { Menu, MenuTrigger, MenuContent, MenuItem } from 'lithesome';
-</script>
-
-<Menu>
-	<MenuTrigger>
-		<button>Auth</button>
-	</MenuTrigger>
-	<MenuContent>
-		<MenuItem>My Profile</MenuItem>
-		<MenuItem>Account Settings</MenuItem>
-		<MenuItem>Logout</MenuItem>
-	</MenuContent>
-</Menu>
+To create a production version of your showcase app:
+
+```sh
+npm run build
 ```
 
-<br>
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
 
-## Docs
+## Publishing
 
-View more information at: https://lithesome.dev
+Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
 
-## License
+To publish your library to [npm](https://www.npmjs.com):
 
-See the [LICENSE](https://github.com/Gibbu/lithesome/blob/main/LICENSE.md) file for license rights and limitations (MIT).
+```sh
+npm publish
+```

package/dist/attachments/outside.d.ts

@@ -0,0 +1,12 @@
+import type { Attachment } from 'svelte/attachments';
+type ExcludeElement = HTMLElement | string | null | undefined;
+/**
+ * An attachment that fires if the node is not clicked on.
+ * @param callback The function called when clicking outside of the element.
+ * @param exlude The element to be excluded when calling the `callback` handler.
+ * @param event The event to trigger the callback function.
+ *
+ * Default = `click`
+ */
+export declare const outside: (callback: VoidFunction, exclude: ExcludeElement[], on?: keyof DocumentEventMap) => Attachment<HTMLElement>;
+export {};

package/dist/attachments/outside.js

@@ -0,0 +1,34 @@
+/**
+ * An attachment that fires if the node is not clicked on.
+ * @param callback The function called when clicking outside of the element.
+ * @param exlude The element to be excluded when calling the `callback` handler.
+ * @param event The event to trigger the callback function.
+ *
+ * Default = `click`
+ */
+export const outside = (callback, exclude, on) => {
+    return (node) => {
+        const event = (e) => {
+            const target = e.target;
+            let elements = [];
+            exclude.forEach((el) => {
+                if (el) {
+                    if (typeof el === 'string') {
+                        const query = Array.from(document.querySelectorAll(el));
+                        elements = [...elements, ...query];
+                    }
+                    else {
+                        elements.push(el);
+                    }
+                }
+            });
+            const contains = elements.some((el) => el?.contains(target));
+            if (node && !node.contains(target) && !e.defaultPrevented && !contains)
+                callback();
+        };
+        window.addEventListener(on || 'click', event);
+        return () => {
+            window.removeEventListener(on || 'click', event);
+        };
+    };
+};

package/dist/attachments/portal.d.ts

@@ -0,0 +1,7 @@
+import type { Attachment } from 'svelte/attachments';
+/**
+ * A svelte attachment to portal content from one part of the dom to another.
+ * @param target The element to be portaled to.\
+ * Default = `body`.
+ */
+export declare const portal: (target?: HTMLElement | string) => Attachment<HTMLElement>;

package/dist/attachments/portal.js

@@ -0,0 +1,27 @@
+import { tick } from 'svelte';
+import { log } from '../internals/index.js';
+/**
+ * A svelte attachment to portal content from one part of the dom to another.
+ * @param target The element to be portaled to.\
+ * Default = `body`.
+ */
+export const portal = (target = 'body') => {
+    return (node) => {
+        const update = async (newTarget) => {
+            let el = typeof newTarget === 'string' ? document.querySelector(newTarget) : newTarget;
+            await tick();
+            if (!el) {
+                log.error(`Cannot find the given target element: ${target}`);
+                return;
+            }
+            el.appendChild(node);
+        };
+        update(target);
+        return () => {
+            tick().then(() => {
+                if (node)
+                    node.remove();
+            });
+        };
+    };
+};

package/dist/attachments/trap.d.ts

@@ -0,0 +1,6 @@
+import type { Options } from 'focus-trap';
+import type { Attachment } from 'svelte/attachments';
+/**
+ * Creates a focus trap.
+ */
+export declare const trap: (opts: Options) => Attachment<HTMLElement>;

package/dist/attachments/trap.js

@@ -0,0 +1,20 @@
+import { createFocusTrap } from 'focus-trap';
+/**
+ * Creates a focus trap.
+ */
+export const trap = (opts) => {
+    return (node) => {
+        let trap = null;
+        if (trap)
+            return;
+        trap = createFocusTrap(node, {
+            fallbackFocus: node,
+            ...opts
+        });
+        trap.activate();
+        return () => {
+            trap?.deactivate();
+            trap = null;
+        };
+    };
+};

package/dist/components/accordion/Accordion.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { stateValue } from '../../internals/context.svelte.js';
+	import { Element, parseId } from '../../internals/index.js';
+	import { createAccordionRootContext } from './state.svelte.js';
+
+	import type { AccordionProps } from '../../types/index.js';
+
+	const uid = $props.id();
+
+	let {
+		id = parseId(uid),
+		children,
+		custom,
+		ref = $bindable(),
+		value = $bindable(''),
+		onChange,
+		...props
+	}: AccordionProps<typeof ctx.props, typeof ctx.state> = $props();
+
+	let ctx = createAccordionRootContext({
+		id,
+		ref: stateValue(() => ref!),
+		value: stateValue(
+			() => value,
+			(v) => {
+				value = v;
+				onChange?.(v);
+			}
+		)
+	});
+</script>
+
+<Element bind:ref {children} {custom} {ctx} {...props} />

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

@@ -0,0 +1,9 @@
+import type { AccordionProps } from '../../types/index.js';
+declare const Accordion: import("svelte").Component<AccordionProps<{
+    id: string;
+    "data-accordion-root": string;
+}, {
+    value: string | string[];
+}>, {}, "ref" | "value">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/components/accordion/AccordionButton.svelte

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

package/dist/components/accordion/AccordionButton.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { AccordionButtonProps } from '../../types/index.js';
+declare const AccordionButton: import("svelte").Component<AccordionButtonProps<{
+    readonly id: string;
+    readonly type: "button";
+    readonly 'aria-expanded': boolean;
+    readonly 'aria-disabled': boolean;
+    readonly 'aria-controls': string | undefined;
+    readonly tabindex: 0 | -1;
+    readonly 'data-accordionbutton': "";
+    readonly 'data-active': true | undefined;
+}, {
+    active: boolean;
+}>, {}, "ref">;
+type AccordionButton = ReturnType<typeof AccordionButton>;
+export default AccordionButton;

package/dist/components/accordion/AccordionContent.svelte

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

package/dist/components/accordion/AccordionContent.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { AccordionContentProps } from '../../types/index.js';
+declare const AccordionContent: import("svelte").Component<AccordionContentProps<{
+    id: string;
+    "data-accordion-content": string;
+    'data-active': boolean;
+}, {
+    active: boolean;
+}>, {}, "ref">;
+type AccordionContent = ReturnType<typeof AccordionContent>;
+export default AccordionContent;

package/dist/components/accordion/AccordionHeading.svelte

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

package/dist/components/accordion/AccordionHeading.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { AccordionHeadingProps } from '../../types/index.js';
+declare const AccordionHeading: import("svelte").Component<AccordionHeadingProps<{
+    id: string;
+    "data-accordion-heading": string;
+    role: string;
+    'aria-level': 2 | 1 | 3 | 4 | 5 | 6;
+    'data-opened': string;
+}, {
+    active: boolean;
+}>, {}, "ref">;
+type AccordionHeading = ReturnType<typeof AccordionHeading>;
+export default AccordionHeading;

package/dist/components/accordion/AccordionItem.svelte

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

package/dist/components/accordion/AccordionItem.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { AccordionItemProps } from '../../types/index.js';
+declare const AccordionItem: import("svelte").Component<AccordionItemProps<{
+    id: string;
+    "data-accordion-item": string;
+    'data-disabled': boolean;
+    'data-opened': string;
+    'data-value': string;
+}, {
+    active: boolean;
+    disabled: boolean;
+}>, {}, "disabled" | "ref">;
+type AccordionItem = ReturnType<typeof AccordionItem>;
+export default AccordionItem;

package/dist/components/{Accordion → accordion}/index.d.ts

@@ -1,6 +1,5 @@
 export { default as Accordion } from './Accordion.svelte';
-export { default as AccordionHeading } from './AccordionHeading.svelte';
 export { default as AccordionItem } from './AccordionItem.svelte';
 export { default as AccordionButton } from './AccordionButton.svelte';
+export { default as AccordionHeading } from './AccordionHeading.svelte';
 export { default as AccordionContent } from './AccordionContent.svelte';
-export type * from './types.js';

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

@@ -0,0 +1,99 @@
+import { SvelteMap } from 'svelte/reactivity';
+import type { GetInternalProps } from '../../internals/types.js';
+import type { AccordionButtonProps, AccordionContentProps, AccordionHeadingProps, AccordionItemProps, AccordionProps } from '../../types/index.js';
+type RootProps = GetInternalProps<AccordionProps>;
+export declare class AccordionRoot {
+    #private;
+    $value: RootProps['value'];
+    items: string[];
+    constructor(props: RootProps);
+    toggleActiveItem: (itemId: string) => void;
+    isActive: (value: string) => boolean;
+    props: {
+        id: string;
+        "data-accordion-root": string;
+    };
+    state: {
+        value: string | string[];
+    };
+}
+type ItemProps = GetInternalProps<AccordionItemProps>;
+declare class AccordionItem {
+    #private;
+    $value: ItemProps['value'];
+    $disabled: ItemProps['disabled'];
+    _root: AccordionRoot;
+    sharedIds: SvelteMap<"content" | "item" | "button", string>;
+    Active: boolean;
+    constructor(root: AccordionRoot, props: ItemProps);
+    props: {
+        id: string;
+        "data-accordion-item": string;
+        'data-disabled': boolean;
+        'data-opened': string;
+        'data-value': string;
+    };
+    state: {
+        active: boolean;
+        disabled: boolean;
+    };
+}
+type HeadingProps = GetInternalProps<AccordionHeadingProps>;
+declare class AccordionHeading {
+    #private;
+    $level: HeadingProps['level'];
+    _root: AccordionRoot;
+    _item: AccordionItem;
+    constructor(root: AccordionRoot, item: AccordionItem, props: HeadingProps);
+    props: {
+        id: string;
+        "data-accordion-heading": string;
+        role: string;
+        'aria-level': 2 | 1 | 3 | 4 | 5 | 6;
+        'data-opened': string;
+    };
+    state: {
+        active: boolean;
+    };
+}
+type ButtonProps = GetInternalProps<AccordionButtonProps>;
+declare class AccordionButton {
+    #private;
+    _item: AccordionItem;
+    _root: AccordionRoot;
+    constructor(item: AccordionItem, root: AccordionRoot, props: ButtonProps);
+    props: {
+        readonly id: string;
+        readonly type: "button";
+        readonly 'aria-expanded': boolean;
+        readonly 'aria-disabled': boolean;
+        readonly 'aria-controls': string | undefined;
+        readonly tabindex: 0 | -1;
+        readonly 'data-accordionbutton': "";
+        readonly 'data-active': true | undefined;
+    };
+    state: {
+        active: boolean;
+    };
+}
+type ContentProps = GetInternalProps<AccordionContentProps>;
+declare class AccordionContent {
+    #private;
+    _item: AccordionItem;
+    _root: AccordionRoot;
+    constructor(item: AccordionItem, root: AccordionRoot, props: ContentProps);
+    props: {
+        id: string;
+        "data-accordion-content": string;
+        'data-active': boolean;
+    };
+    state: {
+        active: boolean;
+    };
+}
+export declare const createAccordionRootContext: (props: RootProps) => AccordionRoot;
+export declare const createAccordionItemContext: (props: ItemProps) => AccordionItem;
+export declare const useAccordionHeading: (props: HeadingProps) => AccordionHeading;
+export declare const useAccordionButton: (props: ButtonProps) => AccordionButton;
+export declare const useAccordionContent: (props: ContentProps) => AccordionContent;
+export {};

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

@@ -0,0 +1,156 @@
+import { SvelteMap } from 'svelte/reactivity';
+import { attach } from '../../internals/attachment.js';
+import { buildContext } from '../../internals/context.svelte.js';
+import { addEvents, createAttributes } from '../../internals/utils.svelte.js';
+const { attrs } = createAttributes('accordion', ['root', 'item', 'heading', 'button', 'content']);
+export class AccordionRoot {
+    $value;
+    #id;
+    items = $state([]);
+    constructor(props) {
+        this.$value = props.value;
+        this.#id = props.id;
+    }
+    toggleActiveItem = (itemId) => {
+        if (Array.isArray(this.$value.val)) {
+            if (this.$value.val.includes(itemId))
+                this.$value.val = this.$value.val.filter((el) => el != itemId);
+            else
+                this.$value.val.push(itemId);
+        }
+        else {
+            if (this.$value.val === itemId)
+                this.$value.val = '';
+            else
+                this.$value.val = itemId;
+        }
+    };
+    isActive = (value) => {
+        return typeof this.$value.val === 'string' ? this.$value.val === value : this.$value.val.includes(value);
+    };
+    props = $derived.by(() => ({
+        id: this.#id,
+        [attrs.root]: ''
+    }));
+    state = $derived.by(() => ({
+        value: this.$value.val
+    }));
+}
+class AccordionItem {
+    $value;
+    $disabled;
+    #id;
+    _root;
+    sharedIds = new SvelteMap();
+    Active = $derived.by(() => this._root.isActive(this.$value.val));
+    constructor(root, props) {
+        this._root = root;
+        this.$value = props.value;
+        this.$disabled = props.disabled;
+        this.#id = props.id;
+        this.sharedIds.set('item', this.#id);
+    }
+    props = $derived.by(() => ({
+        id: this.#id,
+        [attrs.item]: '',
+        'data-disabled': this.$disabled.val,
+        'data-opened': this.Active ? 'opened' : 'closed',
+        'data-value': this.$value.val
+    }));
+    state = $derived.by(() => ({
+        active: this.Active,
+        disabled: this.$disabled.val
+    }));
+}
+class AccordionHeading {
+    $level;
+    #id;
+    _root;
+    _item;
+    constructor(root, item, props) {
+        this._root = root;
+        this._item = item;
+        this.$level = props.level;
+        this.#id = props.id;
+    }
+    props = $derived.by(() => ({
+        id: this.#id,
+        [attrs.heading]: '',
+        role: 'heading',
+        'aria-level': this.$level.val,
+        'data-opened': this._item.Active ? 'opened' : 'closed'
+    }));
+    state = $derived.by(() => ({
+        active: this._item.Active
+    }));
+}
+class AccordionButton {
+    #id;
+    _item;
+    _root;
+    constructor(item, root, props) {
+        this._item = item;
+        this._root = root;
+        this.#id = props.id;
+        this._item.sharedIds.set('button', this.#id);
+    }
+    props = $derived.by(() => ({
+        id: this.#id,
+        type: 'button',
+        'aria-expanded': this._item.Active,
+        'aria-disabled': this._item.$disabled.val,
+        'aria-controls': this._item.Active ? this._item.sharedIds.get('content') : undefined,
+        tabindex: this._item.$disabled.val ? -1 : 0,
+        'data-accordionbutton': '',
+        'data-active': this._item.Active || undefined,
+        ...attach((node) => addEvents(node, {
+            click: () => {
+                if (this._item.$disabled.val)
+                    return;
+                this._root.toggleActiveItem(this._item.$value.val);
+            }
+        }))
+    }));
+    state = $derived.by(() => ({
+        active: this._item.Active
+    }));
+}
+class AccordionContent {
+    #id;
+    _item;
+    _root;
+    constructor(item, root, props) {
+        this._item = item;
+        this._root = root;
+        this.#id = props.id;
+        this._item.sharedIds.set('content', this.#id);
+    }
+    props = $derived.by(() => ({
+        id: this.#id,
+        [attrs.content]: '',
+        'data-active': this._item.Active
+    }));
+    state = $derived.by(() => ({
+        active: this._item.Active
+    }));
+}
+//
+// ~~BUILDERS
+//
+const rootContext = buildContext(AccordionRoot);
+const itemContext = buildContext(AccordionItem);
+export const createAccordionRootContext = (props) => {
+    return rootContext.create(props);
+};
+export const createAccordionItemContext = (props) => {
+    return itemContext.create(rootContext.get(), props);
+};
+export const useAccordionHeading = (props) => {
+    return rootContext.register(AccordionHeading, itemContext.get(), props);
+};
+export const useAccordionButton = (props) => {
+    return itemContext.register(AccordionButton, rootContext.get(), props);
+};
+export const useAccordionContent = (props) => {
+    return itemContext.register(AccordionContent, rootContext.get(), props);
+};