lithesome 0.0.7

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Gibbu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,44 @@
+> [!WARNING]
+> This library is still in very early development. Expect things to be broken.
+
+# Lithesome
+
+An unstyled component library for Svelte 5.
+
+<br>
+
+## Install
+
+```bash
+pnpm i -D lithesome
+```
+
+## Usage
+
+```svelte
+<script>
+	import { Menu, MenuTrigger, MenuDropdown, MenuItem } from 'lithesome';
+</script>
+
+<Menu>
+	<MenuTrigger>
+		<button>Auth</button>
+	</MenuTrigger>
+	<MenuDropdown>
+		<MenuItem>My Profile</MenuItem>
+		<MenuItem>Account Settings</MenuItem>
+		<MenuItem>Logout</MenuItem>
+	</MenuDropdown>
+</Menu>
+```
+
+<br>
+
+## Docs
+
+View more information at: https://lithesome.dev
+> MDsveX has a bug with Vercel that crashes the docs page. All the available components can be found and played around with on: https://lithesome.vercel.app/test
+
+## License
+
+See the [LICENSE](https://github.com/Gibbu/lithesome/blob/main/LICENSE.md) file for license rights and limitations (MIT).

package/dist/components/Accordion/Accordion.svelte

@@ -0,0 +1,19 @@
+<script context="module">import { getContext } from "svelte";
+import { createContext } from "./context.svelte.js";
+const contextName = "accordion-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, single, ...props } = $props();
+const { uid } = createUID("accordion");
+const API = createContext(uid, single);
+setContext(contextName, API);
+const active = $derived(API.activeItems.length > 0);
+const classProp = $derived(typeof klass === "function" ? klass({ active }) : klass);
+</script>
+
+<div bind:this={self} id={uid()} use:useActions={use} class={classProp} data-accordion="" {...props}>
+	{@render children({ active })}
+</div>

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

@@ -0,0 +1,26 @@
+import { SvelteComponent } from "svelte";
+export declare const context: () => {
+    items: import("./context.svelte.js").Item[];
+    activeItems: string[];
+    toggle(itemId: string): void;
+    register(item: import("./context.svelte.js").Item): void;
+    uid: import("../../internal/index.js").UID;
+};
+import { type BaseProps } from '../../internal/index.js';
+declare const __propDef: {
+    props: BaseProps<HTMLDivElement, {
+        active: boolean;
+    }> & {
+        single?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AccordionProps = typeof __propDef.props;
+export type AccordionEvents = typeof __propDef.events;
+export type AccordionSlots = typeof __propDef.slots;
+export default class Accordion extends SvelteComponent<AccordionProps, AccordionEvents, AccordionSlots> {
+}
+export {};

package/dist/components/Accordion/AccordionContent.svelte

@@ -0,0 +1,35 @@
+<script>import { context } from "./Accordion.svelte";
+import { useActions, getTransition } from "../../internal/index.js";
+import { getContext } from "svelte";
+let { children, class: klass, use = [], self, transition, ...props } = $props();
+const API = context();
+const itemId = getContext("accordionitem-id");
+const active = $derived(API.activeItems.includes(itemId));
+const classProp = $derived(typeof klass === "function" ? klass({ active }) : klass);
+const _transition = getTransition(transition);
+const attrs = $derived({
+  id: API.uid("content"),
+  "data-accordioncontent": "",
+  "data-active": active || void 0,
+  class: classProp
+});
+</script>
+
+{#if _transition}
+	{#if active}
+		<div
+			in:_transition.in.fn={_transition.in.params}
+			out:_transition.out.fn={_transition.out.params}
+			bind:this={self}
+			use:useActions={use}
+			{...attrs}
+			{...props}
+		>
+			{@render children({ active })}
+		</div>
+	{/if}
+{:else if active}
+	<div bind:this={self} use:useActions={use} {...attrs} {...props}>
+		{@render children({ active })}
+	</div>
+{/if}

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

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+import { type BaseProps, type Transition } from '../../internal/index.js';
+declare const __propDef: {
+    props: BaseProps<HTMLDivElement, {
+        active: boolean;
+    }> & {
+        /**
+         * 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 AccordionContentProps = typeof __propDef.props;
+export type AccordionContentEvents = typeof __propDef.events;
+export type AccordionContentSlots = typeof __propDef.slots;
+export default class AccordionContent extends SvelteComponent<AccordionContentProps, AccordionContentEvents, AccordionContentSlots> {
+}
+export {};

package/dist/components/Accordion/AccordionHeading.svelte

@@ -0,0 +1,16 @@
+<script>import { useActions } from "../../internal/index.js";
+let { children, class: klass, use = [], level = 3, self, ...props } = $props();
+const classProp = $derived(typeof klass === "function" ? klass({}) : klass);
+</script>
+
+<div
+	bind:this={self}
+	role="heading"
+	aria-level={level}
+	data-accordionheading=""
+	use:useActions={use}
+	class={classProp}
+	{...props}
+>
+	{@render children({})}
+</div>

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

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import { type BaseProps } from '../../internal/index.js';
+declare const __propDef: {
+    props: BaseProps<HTMLDivElement, any> & {
+        level?: 1 | 2 | 3 | 4 | 5 | 6 | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AccordionHeadingProps = typeof __propDef.props;
+export type AccordionHeadingEvents = typeof __propDef.events;
+export type AccordionHeadingSlots = typeof __propDef.slots;
+export default class AccordionHeading extends SvelteComponent<AccordionHeadingProps, AccordionHeadingEvents, AccordionHeadingSlots> {
+}
+export {};

package/dist/components/Accordion/AccordionItem.svelte

@@ -0,0 +1,32 @@
+<script>import { context } from "./Accordion.svelte";
+import { log, useActions, createUID } from "../../internal/index.js";
+import { onMount, setContext } from "svelte";
+let { children, class: klass, use = [], self, disabled = false, ...props } = $props();
+const API = context();
+const { uid } = createUID("item");
+onMount(() => {
+  if (!API)
+    log.error("<AccordionItem /> must be a direct child of <Accordion />");
+  if (!disabled)
+    API.register({
+      id: uid(),
+      disabled
+    });
+});
+const active = $derived(API.activeItems.includes(uid()));
+const classProp = $derived(typeof klass === "function" ? klass({ active }) : klass);
+setContext("accordionitem-id", uid());
+</script>
+
+<div
+	bind:this={self}
+	id={uid()}
+	use:useActions={use}
+	class={classProp}
+	data-accordionitem=""
+	data-disabled={disabled || undefined}
+	data-state={active ? 'opened' : 'closed'}
+	{...props}
+>
+	{@render children({ active })}
+</div>

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

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import { type BaseProps } from '../../internal/index.js';
+declare const __propDef: {
+    props: BaseProps<HTMLDivElement, {
+        active: boolean;
+    }> & {
+        disabled?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AccordionItemProps = typeof __propDef.props;
+export type AccordionItemEvents = typeof __propDef.events;
+export type AccordionItemSlots = typeof __propDef.slots;
+export default class AccordionItem extends SvelteComponent<AccordionItemProps, AccordionItemEvents, AccordionItemSlots> {
+}
+export {};

package/dist/components/Accordion/AccordionTrigger.svelte

@@ -0,0 +1,26 @@
+<script>import { context } from "./Accordion.svelte";
+import { useActions } from "../../internal/index.js";
+import { getContext } from "svelte";
+let { children, class: klass, use = [], self, ...props } = $props();
+const API = context();
+const itemId = getContext("accordionitem-id");
+const active = $derived(API.activeItems.includes(itemId));
+const item = API.items.find((el) => el.id === itemId);
+const classProp = $derived(typeof klass === "function" ? klass({ active }) : klass);
+</script>
+
+<button
+	type="button"
+	bind:this={self}
+	aria-expanded={active}
+	aria-disabled={item?.disabled}
+	aria-controls={active ? API.uid('content') : undefined}
+	data-accordiontrigger=""
+	data-active={active || undefined}
+	use:useActions={use}
+	class={classProp}
+	onclick={() => API.toggle(itemId)}
+	{...props}
+>
+	{@render children({ active })}
+</button>

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

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import { type BaseProps } from '../../internal/index.js';
+declare const __propDef: {
+    props: BaseProps<HTMLButtonElement, {
+        active: boolean;
+    }>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AccordionTriggerProps = typeof __propDef.props;
+export type AccordionTriggerEvents = typeof __propDef.events;
+export type AccordionTriggerSlots = typeof __propDef.slots;
+export default class AccordionTrigger extends SvelteComponent<AccordionTriggerProps, AccordionTriggerEvents, AccordionTriggerSlots> {
+}
+export {};

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

@@ -0,0 +1,12 @@
+import { type UID } from '../../internal/index.js';
+export interface Item {
+    id: string;
+    disabled: boolean;
+}
+export declare const createContext: (uid: UID, single?: boolean) => {
+    items: Item[];
+    activeItems: string[];
+    toggle(itemId: string): void;
+    register(item: Item): void;
+    uid: UID;
+};

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

@@ -0,0 +1,34 @@
+import {} from '../../internal/index.js';
+export const createContext = (uid, single = false) => {
+    let items = $state([]);
+    let activeItems = $state([]);
+    const functions = {
+        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];
+        }
+    };
+    return {
+        uid,
+        ...functions,
+        get items() {
+            return items;
+        },
+        get activeItems() {
+            return activeItems;
+        }
+    };
+};

package/dist/components/Menu/Menu.svelte

@@ -0,0 +1,26 @@
+<script context="module">import { getContext } from "svelte";
+import { createContext } from "./context.svelte.js";
+const contextName = "menu-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, ...props } = $props();
+const { uid } = createUID("menu");
+const API = createContext(uid);
+setContext(contextName, API);
+const classProp = $derived(typeof klass === "function" ? klass({ visible: API.visible }) : klass);
+</script>
+
+<div
+	bind:this={self}
+	use:useActions={use}
+	data-menu=""
+	data-state={API.visible ? 'opened' : 'closed'}
+	id={uid()}
+	class={classProp}
+	{...props}
+>
+	{@render children({ visible: API.visible })}
+</div>

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

@@ -0,0 +1,33 @@
+import { SvelteComponent } from "svelte";
+export declare const context: () => {
+    uid: import("../../internal/index.js").UID;
+    visible: boolean;
+    hoveredIndex: number;
+    trigger: HTMLElement | null;
+    items: string[];
+    hoveredItem: 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;
+};
+import { type BaseProps } from '../../internal/index.js';
+declare const __propDef: {
+    props: BaseProps<HTMLDivElement, {
+        visible: boolean;
+    }>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type MenuProps = typeof __propDef.props;
+export type MenuEvents = typeof __propDef.events;
+export type MenuSlots = typeof __propDef.slots;
+export default class Menu extends SvelteComponent<MenuProps, MenuEvents, MenuSlots> {
+}
+export {};

package/dist/components/Menu/MenuDropdown.svelte

@@ -0,0 +1,78 @@
+<script>import { context } from "./Menu.svelte";
+import {
+  clickOutside,
+  getElementPosition,
+  portal,
+  useActions,
+  getTransition
+} from "../../internal/index.js";
+import { log } from "../../internal/index.js";
+import { onMount } from "svelte";
+let {
+  children,
+  transition,
+  use = [],
+  portalTarget = "body",
+  stretch = false,
+  class: klass,
+  self,
+  ...props
+} = $props();
+const API = context();
+const positionDropdown = () => {
+  if (API.trigger)
+    pos = getElementPosition(API.trigger);
+};
+onMount(() => {
+  if (!API)
+    log.error("<MenuDropdown> Must be a direct child of <Menu />");
+});
+let pos = $state();
+$effect(() => {
+  if (API.visible && API.trigger) {
+    pos = getElementPosition(API.trigger);
+    window.addEventListener("resize", positionDropdown);
+  }
+  return () => {
+    window.removeEventListener("resize", positionDropdown);
+  };
+});
+const _transition = getTransition(transition);
+const classProp = $derived(typeof klass === "function" ? klass({ visible: API.visible }) : klass);
+const attrs = $derived({
+  id: API.uid("dropdown"),
+  "aria-labelledby": API.uid("trigger"),
+  role: "menu",
+  class: classProp,
+  "data-menudropdown": "",
+  style: pos ? `position: absolute; left: ${pos.left}px; top: ${pos.top}px; ${stretch ? `width: ${pos.width}` : ""}` : void 0
+});
+</script>
+
+{#if _transition}
+	{#if API.visible}
+		<div
+			bind:this={self}
+			in:_transition.in.fn={_transition.in.params}
+			out:_transition.out.fn={_transition.out.params}
+			use:clickOutside={{ exclude: [API.trigger], callback: API.close }}
+			use:portal={portalTarget}
+			use:useActions={use}
+			{...attrs}
+			{...props}
+		>
+			{@render children({ visible: API.visible })}
+		</div>
+	{/if}
+{:else if API.visible}
+	<div
+		bind:this={self}
+		use:clickOutside={{ exclude: [API.trigger], callback: API.close }}
+		use:portal={portalTarget}
+		use:useActions={use}
+		{...attrs}
+		{...props}
+	>
+		{@render children({ visible: API.visible })}
+	</div>
+{/if}

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

@@ -0,0 +1,28 @@
+import { SvelteComponent } from "svelte";
+import { type Transition, type BaseProps } from '../../internal/index.js';
+declare const __propDef: {
+    props: BaseProps<HTMLDivElement, {
+        visible: boolean;
+    }> & {
+        /**
+         * The `svelte/transtion` you wish to use.
+         *
+         * @see https://lithesome.dev/docs/api#transition-prop
+         */
+        transition?: Transition | undefined;
+        /** Apply the width of the `<MenuTrigger />` element to the dropdown. */
+        stretch?: boolean | undefined;
+        /** The element to portal the dropdown menu to. */
+        portalTarget?: string | HTMLElement | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type MenuDropdownProps = typeof __propDef.props;
+export type MenuDropdownEvents = typeof __propDef.events;
+export type MenuDropdownSlots = typeof __propDef.slots;
+export default class MenuDropdown extends SvelteComponent<MenuDropdownProps, MenuDropdownEvents, MenuDropdownSlots> {
+}
+export {};

package/dist/components/Menu/MenuItem.svelte

@@ -0,0 +1,43 @@
+<script>import { context } from "./Menu.svelte";
+import { useActions } from "../../internal/index.js";
+import { createUID } from "../../internal/index.js";
+import { onMount } from "svelte";
+let { children, class: klass, use = [], disabled, self, href, onClick, ...props } = $props();
+const API = context();
+const { uid } = createUID("item");
+onMount(() => {
+  if (!API.items.includes(uid()) && !disabled)
+    API.register(uid());
+  return () => {
+    API.unregister(uid());
+  };
+});
+const handleClick = () => {
+  if (!disabled) {
+    API.close();
+    onClick?.();
+  }
+};
+const hovered = $derived(API.hoveredItem === uid());
+const classProp = $derived(typeof klass === "function" ? klass({ hovered }) : klass);
+</script>
+
+<svelte:element
+	this={href ? 'a' : 'button'}
+	bind:this={self}
+	use:useActions={use}
+	id={uid()}
+	class={classProp}
+	data-hovered={hovered ? '' : undefined}
+	data-menuitem=""
+	href={href || undefined}
+	role="menuitem"
+	tabindex="0"
+	{disabled}
+	onmouseover={() => API.setHoveredItem(uid())}
+	onfocus={() => {}}
+	onclick={handleClick}
+	{...props}
+>
+	{@render children({ hovered })}
+</svelte:element>

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

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+import { type BaseProps } from '../../internal/index.js';
+declare const __propDef: {
+    props: BaseProps<HTMLButtonElement | HTMLAnchorElement, {
+        hovered: boolean;
+    }> & {
+        href?: string | undefined;
+        disabled?: boolean | undefined;
+        onClick?: (() => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type MenuItemProps = typeof __propDef.props;
+export type MenuItemEvents = typeof __propDef.events;
+export type MenuItemSlots = typeof __propDef.slots;
+export default class MenuItem extends SvelteComponent<MenuItemProps, MenuItemEvents, MenuItemSlots> {
+}
+export {};

package/dist/components/Menu/MenuTrigger.svelte

@@ -0,0 +1,78 @@
+<script>import { context } from "./Menu.svelte";
+import {
+  log,
+  setNodeProps,
+  removeNodeProps,
+  addEventListeners,
+  useActions,
+  KEYS
+} from "../../internal/index.js";
+import { onMount } from "svelte";
+let { children, class: klass, use = [], self, ...props } = $props();
+const API = context();
+const handleKeys = (e) => {
+  const { key } = e;
+  if (key === KEYS.arrowUp || key === KEYS.arrowDown || key === KEYS.end || key === KEYS.home)
+    e.preventDefault();
+  if (key === KEYS.home)
+    API.navigateItems("first");
+  if (key === KEYS.end)
+    API.navigateItems("last");
+  if (key === KEYS.arrowUp)
+    API.navigateItems("prev");
+  if (key === KEYS.arrowDown)
+    API.navigateItems("next");
+  if (key === KEYS.escape)
+    API.close();
+  if (key === KEYS.enter) {
+    e.preventDefault();
+    if (API.hoveredItem && API.visible) {
+      document.querySelector(`#${API.hoveredItem}`).click();
+      API.close();
+    } else {
+      API.open();
+    }
+  }
+  if (key === "Tab")
+    API.close();
+};
+onMount(() => {
+  if (self && self.children.length > 1) {
+    log.error("<MenuTrigger /> comoponent can only take 1 children node.");
+    return;
+  }
+  const target = self?.children[0];
+  setNodeProps(target, {
+    id: API.uid("trigger"),
+    "aria-haspopup": "true",
+    "aria-expanded": "false"
+  });
+  addEventListeners(target, {
+    click: API.toggle,
+    keydown: handleKeys
+  });
+  API.setTrigger(target);
+});
+$effect(() => {
+  if (!API.trigger)
+    return;
+  const target = API.trigger;
+  if (API.hoveredItem)
+    setNodeProps(target, { "aria-activedescendant": API.hoveredItem });
+  if (API.visible) {
+    setNodeProps(target, {
+      "aria-expanded": "true",
+      "aria-controls": API.uid("dropdown")
+    });
+  }
+  if (!API.visible) {
+    setNodeProps(target, { "aria-expanded": "false" });
+    removeNodeProps(target, "aria-activedescendant", "aria-controls");
+  }
+});
+const classProp = $derived(typeof klass === "function" ? klass({ visible: API.visible }) : klass);
+</script>
+
+<div bind:this={self} data-menutrigger="" use:useActions={use} class={classProp} {...props}>
+	{@render children({ visible: API.visible })}
+</div>