lithesome 0.22.3 → 0.23.1

package/README.md

@@ -1,43 +1,43 @@
-> [!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, MenuContent, MenuItem, MenuTrigger } from 'lithesome';
-</script>
-
-<Menu>
-	<MenuTrigger>
-		<button>Auth</button>
-	</MenuTrigger>
-	<MenuContent>
-		<MenuItem>My Profile</MenuItem>
-		<MenuItem>Account Settings</MenuItem>
-		<MenuItem>Logout</MenuItem>
-	</MenuContent>
-</Menu>
-```
-
-<br>
-
-## Docs
-
-View more information at: https://lithesome.dev
-
-## License
-
-See the [LICENSE](https://github.com/Gibbu/lithesome/blob/main/LICENSE.md) file for license rights and limitations (MIT).
+> [!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, MenuContent, MenuItem, MenuTrigger } from 'lithesome';
+</script>
+
+<Menu>
+	<MenuTrigger>
+		<button>Auth</button>
+	</MenuTrigger>
+	<MenuContent>
+		<MenuItem>My Profile</MenuItem>
+		<MenuItem>Account Settings</MenuItem>
+		<MenuItem>Logout</MenuItem>
+	</MenuContent>
+</Menu>
+```
+
+<br>
+
+## Docs
+
+View more information at: https://lithesome.dev
+
+## 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

@@ -1,33 +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),
-		ref = $bindable(),
-		value = $bindable(''),
-		children,
-		custom,
-		onChange,
-		...props
-	}: AccordionProps<typeof ctx.props, typeof ctx.state> = $props();
-
-	let ctx = createAccordionRootContext({
-		id: stateValue(() => id),
-		ref: stateValue(() => ref!),
-		value: stateValue(
-			() => value,
-			(v) => {
-				value = v;
-				onChange?.(v);
-			}
-		)
-	});
-</script>
-
-<Element bind:ref {children} {custom} {ctx} {...props} />
+<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),
+		ref = $bindable(),
+		value = $bindable(''),
+		children,
+		custom,
+		onChange,
+		...props
+	}: AccordionProps<typeof ctx.props> = $props();
+
+	let ctx = createAccordionRootContext({
+		id: stateValue(() => 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

@@ -2,8 +2,6 @@ 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

@@ -1,20 +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: stateValue(() => id), ref: stateValue(() => ref!) });
-</script>
-
-<Element bind:ref {children} {custom} {ctx} as="button" {...props} />
+<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> = $props();
+
+	let ctx = useAccordionButton({ id: stateValue(() => id), ref: stateValue(() => ref!) });
+</script>
+
+<Element bind:ref {children} {custom} {ctx} as="button" {...props} />

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

@@ -6,9 +6,6 @@ declare const AccordionButton: import("svelte").Component<AccordionButtonProps<{
     readonly 'aria-expanded': boolean;
     readonly 'aria-controls': string | undefined;
     readonly tabindex: 0 | -1;
-}, {
-    active: boolean;
-    disabled: boolean;
 }>, {}, "ref">;
 type AccordionButton = ReturnType<typeof AccordionButton>;
 export default AccordionButton;

package/dist/components/accordion/AccordionContent.svelte

@@ -1,20 +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: stateValue(() => id), ref: stateValue(() => ref!) });
-</script>
-
-<Element bind:ref {children} {custom} {ctx} visible={ctx._item.Active} {...props} />
+<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> = $props();
+
+	let ctx = useAccordionContent({ id: stateValue(() => id), ref: stateValue(() => ref!) });
+</script>
+
+<Element bind:ref {children} {custom} {ctx} visible={ctx._item.Active} {...props} />

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

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

package/dist/components/accordion/AccordionHeading.svelte

@@ -1,26 +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: stateValue(() => id),
-		ref: stateValue(() => ref!),
-		level: stateValue(() => level)
-	});
-</script>
-
-<Element bind:ref {children} {custom} {ctx} {...props} />
+<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> = $props();
+
+	let ctx = useAccordionHeading({
+		id: stateValue(() => id),
+		ref: stateValue(() => ref!),
+		level: stateValue(() => level)
+	});
+</script>
+
+<Element bind:ref {children} {custom} {ctx} {...props} />

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

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

package/dist/components/accordion/AccordionItem.svelte

@@ -1,28 +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),
-		ref = $bindable(),
-		disabled = $bindable(false),
-		value,
-		children,
-		custom,
-		...props
-	}: AccordionItemProps<typeof ctx.props, typeof ctx.state> = $props();
-
-	let ctx = createAccordionItemContext({
-		id: stateValue(() => id),
-		ref: stateValue(() => ref!),
-		value: stateValue(() => value),
-		disabled: stateValue(() => disabled)
-	});
-</script>
-
-<Element bind:ref {children} {custom} {ctx} {...props} />
+<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),
+		ref = $bindable(),
+		disabled = $bindable(false),
+		value,
+		children,
+		custom,
+		...props
+	}: AccordionItemProps<typeof ctx.props> = $props();
+
+	let ctx = createAccordionItemContext({
+		id: stateValue(() => 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

@@ -3,9 +3,6 @@ declare const AccordionItem: import("svelte").Component<AccordionItemProps<{
     id: string;
     "data-accordion-item": string;
     'data-value': string;
-}, {
-    active: boolean;
-    disabled: boolean;
 }>, {}, "disabled" | "ref">;
 type AccordionItem = ReturnType<typeof AccordionItem>;
 export default AccordionItem;

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

@@ -1,6 +1,6 @@
 import { SvelteMap } from 'svelte/reactivity';
 import type { GetInternalProps } from '../../internals/types.js';
-import type { AccordionButtonProps, AccordionContentProps, AccordionHeadingProps, AccordionItemProps, AccordionProps } from '../../types/index.js';
+import type { AccordionButtonProps, AccordionContentProps, AccordionHeadingProps, AccordionItemProps, AccordionItemState, AccordionProps, AccordionState } from '../../types/index.js';
 type RootProps = GetInternalProps<AccordionProps>;
 export declare class AccordionRoot {
     $$: RootProps;
@@ -12,12 +12,7 @@ export declare class AccordionRoot {
         id: string;
         "data-accordion-root": string;
     };
-    state: {
-        /**
-         * The current value.
-         */
-        value: string | string[];
-    };
+    state: AccordionState;
 }
 type ItemProps = GetInternalProps<AccordionItemProps>;
 declare class AccordionItem {
@@ -31,16 +26,7 @@ declare class AccordionItem {
         "data-accordion-item": string;
         'data-value': string;
     };
-    state: {
-        /**
-         * True if the item is active.
-         */
-        active: boolean;
-        /**
-         * True the item is disabled.
-         */
-        disabled: boolean;
-    };
+    state: AccordionItemState;
 }
 type HeadingProps = GetInternalProps<AccordionHeadingProps>;
 declare class AccordionHeading {

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

@@ -31,9 +31,6 @@ export class AccordionRoot {
         [attrs.root]: ''
     }));
     state = $derived.by(() => ({
-        /**
-         * The current value.
-         */
         value: this.$$.value.val
     }));
 }
@@ -53,13 +50,7 @@ class AccordionItem {
         'data-value': this.$$.value.val
     }));
     state = $derived.by(() => ({
-        /**
-         * True if the item is active.
-         */
         active: this.Active,
-        /**
-         * True the item is disabled.
-         */
         disabled: this.$$.disabled.val
     }));
 }

package/dist/components/checkbox/CheckboxButton.svelte

@@ -1,57 +1,57 @@
-<script lang="ts">
-	import { stateValue } from '../../internals/context.svelte.js';
-	import { Element, parseId, styleObjectToString, visuallyHidden } from '../../internals/index.js';
-	import { useCheckboxButton } from './state.svelte.js';
-
-	import type { CheckboxButtonProps } from '../../types/index.js';
-
-	const uid = $props.id();
-
-	let {
-		id = parseId(uid),
-		ref = $bindable(),
-		checked = $bindable(false),
-		disabled = $bindable(false),
-		required,
-		name,
-		value,
-		onCheckedChange,
-		children,
-		custom,
-		...props
-	}: CheckboxButtonProps<typeof ctx.props, typeof ctx.state> = $props();
-
-	let ctx = useCheckboxButton({
-		id: stateValue(() => id),
-		ref: stateValue(() => ref!),
-		checked: stateValue(
-			() => checked,
-			(v) => {
-				checked = v;
-				onCheckedChange?.(v);
-			}
-		),
-		disabled: stateValue(
-			() => disabled,
-			(v) => (disabled = v)
-		),
-		value: stateValue(() => value!),
-		name: stateValue(() => name!),
-		required: stateValue(() => required!)
-	});
-</script>
-
-<Element bind:ref as="button" {children} {custom} {ctx} {...props} />
-
-{#if name}
-	<input
-		type="checkbox"
-		bind:checked={ctx.CheckedBool}
-		{name}
-		{required}
-		value={value || 'on'}
-		aria-hidden="true"
-		tabindex="-1"
-		style={styleObjectToString(visuallyHidden)}
-	/>
-{/if}
+<script lang="ts">
+	import { stateValue } from '../../internals/context.svelte.js';
+	import { Element, parseId, styleObjectToString, visuallyHidden } from '../../internals/index.js';
+	import { useCheckboxButton } from './state.svelte.js';
+
+	import type { CheckboxButtonProps } from '../../types/index.js';
+
+	const uid = $props.id();
+
+	let {
+		id = parseId(uid),
+		ref = $bindable(),
+		checked = $bindable(false),
+		disabled = $bindable(false),
+		required,
+		name,
+		value,
+		onCheckedChange,
+		children,
+		custom,
+		...props
+	}: CheckboxButtonProps<typeof ctx.props> = $props();
+
+	let ctx = useCheckboxButton({
+		id: stateValue(() => id),
+		ref: stateValue(() => ref!),
+		checked: stateValue(
+			() => checked,
+			(v) => {
+				checked = v;
+				onCheckedChange?.(v);
+			}
+		),
+		disabled: stateValue(
+			() => disabled,
+			(v) => (disabled = v)
+		),
+		value: stateValue(() => value!),
+		name: stateValue(() => name!),
+		required: stateValue(() => required!)
+	});
+</script>
+
+<Element bind:ref as="button" {children} {custom} {ctx} {...props} />
+
+{#if name}
+	<input
+		type="checkbox"
+		bind:checked={ctx.CheckedBool}
+		{name}
+		{required}
+		value={value || 'on'}
+		aria-hidden="true"
+		tabindex="-1"
+		style={styleObjectToString(visuallyHidden)}
+	/>
+{/if}

package/dist/components/checkbox/CheckboxButton.svelte.d.ts

@@ -8,9 +8,6 @@ declare const CheckboxButton: import("svelte").Component<CheckboxButtonProps<{
     'aria-required': true | undefined;
     'aria-labelledby': string | undefined;
     disabled: true | undefined;
-}, {
-    checked: import("../../types/index.js").CheckboxChecked;
-    disabled: boolean;
 }>, {}, "disabled" | "ref" | "checked">;
 type CheckboxButton = ReturnType<typeof CheckboxButton>;
 export default CheckboxButton;

package/dist/components/checkbox/CheckboxGroup.svelte

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