lithesome 0.15.2 → 0.16.0

package/dist/components/Accordion/Accordion.svelte

@@ -1,31 +1,31 @@
-<script lang="ts">
-	import { useActions, classProp, stateValue } from '../../internal/index.js';
-	import type { AccordionProps } from './types.js';
-	import { createAccordionRootContext } from './main.svelte.js';
-
-	let {
-		children,
-		use = [],
-		class: klass,
-		value = $bindable([]),
-		self = $bindable(),
-		single = $bindable(false),
-		onChange,
-		...props
-	}: AccordionProps = $props();
-
-	const ctx = createAccordionRootContext({
-		single: stateValue(() => single),
-		value: stateValue(
-			() => value,
-			(v) => {
-				value = v;
-				onChange?.(v);
-			}
-		)
-	});
-</script>
-
-<div bind:this={self} use:useActions={use} class={classProp(klass)} {...ctx.attrs} {...props}>
-	{@render children?.({})}
-</div>
+<script lang="ts">
+	import { useActions, classProp, stateValue } from '../../internal/index.js';
+	import { createAccordionRootContext } from './main.svelte.js';
+	import type { AccordionProps } from './types.js';
+
+	let {
+		children,
+		use = [],
+		class: klass,
+		value = $bindable([]),
+		self = $bindable(),
+		single = $bindable(false),
+		onChange,
+		...props
+	}: AccordionProps = $props();
+
+	const ctx = createAccordionRootContext({
+		single: stateValue(() => single),
+		value: stateValue(
+			() => value,
+			(v) => {
+				value = v;
+				onChange?.(v);
+			}
+		)
+	});
+</script>
+
+<div bind:this={self} use:useActions={use} class={classProp(klass, ctx.state)} {...ctx.attrs} {...props}>
+	{@render children?.(ctx.state)}
+</div>

package/dist/components/Accordion/AccordionButton.svelte

@@ -1,22 +1,22 @@
-<script lang="ts">
-	import { useAccordionButton } from './main.svelte.js';
-	import { useActions, classProp } from '../../internal/index.js';
-	import type { AccordionButtonProps } from './types.js';
-
-	let { children, class: klass, use = [], self = $bindable(), onClick, ...props }: AccordionButtonProps = $props();
-
-	const ctx = useAccordionButton({
-		onClick
-	});
-</script>
-
-<button
-	type="button"
-	bind:this={self}
-	use:useActions={use}
-	class={classProp(klass, ctx.state)}
-	{...ctx.attrs}
-	{...props}
->
-	{@render children?.(ctx.state)}
-</button>
+<script lang="ts">
+	import { useAccordionButton } from './main.svelte.js';
+	import { useActions, classProp } from '../../internal/index.js';
+	import type { AccordionButtonProps } from './types.js';
+
+	let { children, class: klass, use = [], self = $bindable(), onClick, ...props }: AccordionButtonProps = $props();
+
+	const ctx = useAccordionButton({
+		onClick
+	});
+</script>
+
+<button
+	type="button"
+	bind:this={self}
+	use:useActions={use}
+	class={classProp(klass, ctx.state)}
+	{...ctx.attrs}
+	{...props}
+>
+	{@render children?.(ctx.state)}
+</button>

package/dist/components/Accordion/AccordionContent.svelte

@@ -1,27 +1,27 @@
-<script lang="ts">
-	import { useAccordionContent } from './main.svelte.js';
-	import { useActions, getTransition, classProp } from '../../internal/index.js';
-	import type { AccordionContentProps } from './types.js';
-
-	let { children, class: klass, use = [], self = $bindable(), transition, ...props }: AccordionContentProps = $props();
-
-	const ctx = useAccordionContent();
-
-	const { inTransition, outTransition } = getTransition(transition);
-	const attrs = $derived({
-		...ctx.attrs,
-		class: classProp(klass)
-	} as const);
-</script>
-
-{#if inTransition && outTransition && ctx.item.Active}
-	{@const { config: inConf, transition: inFn } = inTransition}
-	{@const { config: outConf, transition: outFn } = outTransition}
-	<div bind:this={self} use:useActions={use} in:inFn={inConf} out:outFn={outConf} {...attrs} {...props}>
-		{@render children?.({})}
-	</div>
-{:else if ctx.item.Active}
-	<div bind:this={self} use:useActions={use} {...attrs} {...props}>
-		{@render children?.({})}
-	</div>
-{/if}
+<script lang="ts">
+	import { useAccordionContent } from './main.svelte.js';
+	import { useActions, getTransition, classProp } from '../../internal/index.js';
+	import type { AccordionContentProps } from './types.js';
+
+	let { children, class: klass, use = [], self = $bindable(), transition, ...props }: AccordionContentProps = $props();
+
+	const ctx = useAccordionContent();
+
+	const { inTransition, outTransition } = getTransition(transition);
+	const attrs = $derived({
+		...ctx.attrs,
+		class: classProp(klass, ctx.state)
+	} as const);
+</script>
+
+{#if inTransition && outTransition && ctx.item.Active}
+	{@const { config: inConf, transition: inFn } = inTransition}
+	{@const { config: outConf, transition: outFn } = outTransition}
+	<div bind:this={self} use:useActions={use} in:inFn={inConf} out:outFn={outConf} {...attrs} {...props}>
+		{@render children?.(ctx.state)}
+	</div>
+{:else if ctx.item.Active}
+	<div bind:this={self} use:useActions={use} {...attrs} {...props}>
+		{@render children?.(ctx.state)}
+	</div>
+{/if}

package/dist/components/Accordion/AccordionHeading.svelte

@@ -1,13 +1,13 @@
-<script lang="ts">
-	import { useAccordionHeading } from './main.svelte.js';
-	import { useActions, classProp } from '../../internal/index.js';
-	import type { AccordionHeadingProps } from './types.js';
-
-	let { children, class: klass, use = [], level = 3, self = $bindable(), ...props }: AccordionHeadingProps = $props();
-
-	const ctx = useAccordionHeading({ level });
-</script>
-
-<div bind:this={self} use:useActions={use} class={classProp(klass)} {...ctx.attrs} {...props}>
-	{@render children?.({})}
-</div>
+<script lang="ts">
+	import { useAccordionHeading } from './main.svelte.js';
+	import { useActions, classProp } from '../../internal/index.js';
+	import type { AccordionHeadingProps } from './types.js';
+
+	let { children, class: klass, use = [], level = 3, self = $bindable(), ...props }: AccordionHeadingProps = $props();
+
+	const ctx = useAccordionHeading({ level });
+</script>
+
+<div bind:this={self} use:useActions={use} class={classProp(klass)} {...ctx.attrs} {...props}>
+	{@render children?.({})}
+</div>

package/dist/components/Accordion/AccordionItem.svelte

@@ -1,25 +1,25 @@
-<script lang="ts">
-	import { createAccordionItemContext } from './main.svelte.js';
-	import { useActions, classProp, stateValue } from '../../internal/index.js';
-
-	import type { AccordionItemProps } from './types.js';
-
-	let {
-		children,
-		class: klass,
-		use = [],
-		self = $bindable(),
-		disabled = $bindable(false),
-		value,
-		...props
-	}: AccordionItemProps = $props();
-
-	const ctx = createAccordionItemContext({
-		value: stateValue(() => value),
-		disabled: stateValue(() => disabled)
-	});
-</script>
-
-<div bind:this={self} use:useActions={use} {...ctx.attrs} class={classProp(klass, ctx.state)} {...props}>
-	{@render children?.(ctx.state)}
-</div>
+<script lang="ts">
+	import { createAccordionItemContext } from './main.svelte.js';
+	import { useActions, classProp, stateValue } from '../../internal/index.js';
+
+	import type { AccordionItemProps } from './types.js';
+
+	let {
+		children,
+		class: klass,
+		use = [],
+		self = $bindable(),
+		disabled = $bindable(false),
+		value,
+		...props
+	}: AccordionItemProps = $props();
+
+	const ctx = createAccordionItemContext({
+		value: stateValue(() => value),
+		disabled: stateValue(() => disabled)
+	});
+</script>
+
+<div bind:this={self} use:useActions={use} {...ctx.attrs} class={classProp(klass, ctx.state)} {...props}>
+	{@render children?.(ctx.state)}
+</div>

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

@@ -1,5 +1,5 @@
 import { type StateValues } from '../../internal/index.js';
-import type { AccordionButtonEvents } from './types.js';
+import type { AccordionButtonEvents, AccordionButtonState, AccordionContentState, AccordionItemState, AccordionState } from './types.js';
 interface Item {
     id: string;
     disabled: boolean;
@@ -21,6 +21,7 @@ declare class AccordionRoot {
         readonly 'data-value': string[] | undefined;
         readonly 'data-accordion': "";
     };
+    state: AccordionState;
 }
 type AccordionItemProps = StateValues<{
     disabled: boolean;
@@ -40,10 +41,7 @@ declare class AccordionItem {
         readonly 'data-state': "opened" | "closed";
         readonly 'data-value': string | undefined;
     };
-    state: {
-        active: boolean;
-        disabled: boolean;
-    };
+    state: AccordionItemState;
 }
 interface AccordionHeadingProps {
     level: 1 | 2 | 3 | 4 | 5 | 6;
@@ -72,10 +70,7 @@ declare class AccordionButton {
         readonly 'data-active': true | undefined;
         readonly onclick: import("../../internal/index.js").Handler<MouseEvent, HTMLButtonElement> | undefined;
     };
-    state: {
-        active: boolean;
-        disabled: boolean;
-    };
+    state: AccordionButtonState;
 }
 declare class AccordionContent {
     item: AccordionItem;
@@ -90,6 +85,7 @@ declare class AccordionContent {
         'data-accordioncontent'?: undefined;
         'data-active'?: undefined;
     };
+    state: AccordionContentState;
 }
 export declare const createAccordionRootContext: (props: AccordionRootProps) => AccordionRoot;
 export declare const createAccordionItemContext: (props: AccordionItemProps) => AccordionItem;

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

@@ -33,6 +33,9 @@ class AccordionRoot {
         'data-value': this.$value.val.length > 0 ? this.$value.val : undefined,
         'data-accordion': ''
     }));
+    state = $derived.by(() => ({
+        value: this.$value.val
+    }));
 }
 class AccordionItem {
     uid = createUID('item');
@@ -119,6 +122,9 @@ class AccordionContent {
             'data-active': this.item.Active
         }
         : {});
+    state = $derived.by(() => ({
+        active: this.item.Active
+    }));
 }
 //
 // Builders

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

@@ -1,4 +1,11 @@
 import type { Props, Handler, Transition } from '../../internal/index.js';
+/**
+ * The state that is exposed from the `Accordion` component.\
+ * Which can be used via the `class` prop function or `children` snippet block.
+ */
+export interface AccordionState {
+    value: string[];
+}
 export interface AccordionProps extends Props<HTMLDivElement> {
     /**
      * The value of the active item.\
@@ -14,6 +21,13 @@ export interface AccordionProps extends Props<HTMLDivElement> {
      */
     onChange?: (values: string[]) => void;
 }
+/**
+ * The state that is exposed from the `AccordionContent` component.\
+ * Which can be used via the `class` prop function or `children` snippet block.
+ */
+export interface AccordionContentState {
+    active: boolean;
+}
 export interface AccordionContentProps extends Props<HTMLDivElement> {
     /**
      * The `svelte/transtion` you wish to use.
@@ -26,7 +40,11 @@ export interface AccordionHeadingProps extends Props<HTMLDivElement> {
     /** The `aria-level` to be set. */
     level?: 1 | 2 | 3 | 4 | 5 | 6;
 }
-interface AccordionButtonState {
+/**
+ * The state that is exposed from the `AccordionButton` component.\
+ * Which can be used via the `class` prop function or `children` snippet block.
+ */
+export interface AccordionButtonState {
     /** True if the item is opened. */
     active: boolean;
     /** True if the item is disabled. */
@@ -43,7 +61,11 @@ export interface AccordionButtonEvents {
 }
 export interface AccordionButtonProps extends Props<HTMLButtonElement, AccordionButtonState>, AccordionButtonEvents {
 }
-interface AccordionItemState {
+/**
+ * The state that is exposed from the `AccordionItem` component.\
+ * Which can be used via the `class` prop function or `children` snippet block.
+ */
+export interface AccordionItemState {
     /** True if the item is opened. */
     active: boolean;
     /** True if the item is disabled. */
@@ -59,4 +81,3 @@ export interface AccordionItemProps extends Props<HTMLDivElement, AccordionItemS
     /** Disables the items, disallowing clicking and keyboard navigation. */
     disabled?: boolean;
 }
-export {};

package/dist/components/Checkbox/Checkbox.svelte

@@ -1,40 +1,40 @@
-<script lang="ts">
-	import { useActions, classProp } from '../../internal/index.js';
-	import type { CheckboxProps } from './types.js';
-
-	let {
-		children,
-		class: klass,
-		use = [],
-		self = $bindable(),
-		checked = $bindable(false),
-		required = false,
-		disabled = $bindable(false),
-		onClick,
-		...props
-	}: CheckboxProps = $props();
-
-	const handleClick: typeof onClick = (e) => {
-		if (disabled) return;
-		onClick?.(e);
-
-		checked = checked === 'mixed' ? true : !checked;
-	};
-</script>
-
-<button
-	type="button"
-	bind:this={self}
-	use:useActions={use}
-	class={classProp(klass, { checked })}
-	role="checkbox"
-	aria-checked={checked}
-	aria-required={required}
-	disabled={disabled || undefined}
-	data-state={checked ? 'checked' : 'unchecked'}
-	data-checkbox=""
-	onclick={handleClick}
-	{...props}
->
-	{@render children?.({ checked })}
-</button>
+<script lang="ts">
+	import { useActions, classProp } from '../../internal/index.js';
+	import type { CheckboxProps } from './types.js';
+
+	let {
+		children,
+		class: klass,
+		use = [],
+		self = $bindable(),
+		checked = $bindable(false),
+		required = false,
+		disabled = $bindable(false),
+		onClick,
+		...props
+	}: CheckboxProps = $props();
+
+	const handleClick: typeof onClick = (e) => {
+		if (disabled) return;
+		onClick?.(e);
+
+		checked = checked === 'mixed' ? true : !checked;
+	};
+</script>
+
+<button
+	type="button"
+	bind:this={self}
+	use:useActions={use}
+	class={classProp(klass, { checked })}
+	role="checkbox"
+	aria-checked={checked}
+	aria-required={required}
+	disabled={disabled || undefined}
+	data-state={checked ? 'checked' : 'unchecked'}
+	data-checkbox=""
+	onclick={handleClick}
+	{...props}
+>
+	{@render children?.({ checked })}
+</button>

package/dist/components/Checkbox/types.d.ts

@@ -1,6 +1,10 @@
 import type { Handler, Props } from '../../internal/index.js';
 export type Checked = boolean | 'mixed';
-interface CheckboxState {
+/**
+ * The state that is exposed from the `CheckboxState` component.\
+ * Which can be used via the `class` prop function or `children` snippet block.
+ */
+export interface CheckboxState {
     /** If the checkbox is checked or not. */
     checked: Checked;
 }
@@ -19,4 +23,3 @@ export interface CheckboxProps extends Props<HTMLButtonElement, CheckboxState> {
      */
     onClick?: Handler<MouseEvent, HTMLButtonElement>;
 }
-export {};

package/dist/components/Collapsible/Collapsible.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { useActions, classProp, stateValue } from '../../internal/index.js';
+	import { createCollapsibleRootContext } from './main.svelte.js';
+	import type { CollapsibleProps } from './types.js';
+
+	let {
+		children,
+		use = [],
+		class: klass,
+		visible = $bindable(false),
+		self = $bindable(),
+		disabled = $bindable(false),
+		onChange,
+		...props
+	}: CollapsibleProps = $props();
+
+	const ctx = createCollapsibleRootContext({
+		visible: stateValue(
+			() => visible,
+			(v) => {
+				visible = v;
+				onChange?.(v);
+			}
+		),
+		disabled: stateValue(() => disabled)
+	});
+</script>
+
+<div bind:this={self} use:useActions={use} class={classProp(klass, ctx.state)} {...ctx.attrs} {...props}>
+	{@render children?.(ctx.state)}
+</div>

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

@@ -0,0 +1,4 @@
+import type { CollapsibleProps } from './types.js';
+declare const Collapsible: import("svelte").Component<CollapsibleProps, {}, "self" | "disabled" | "visible">;
+type Collapsible = ReturnType<typeof Collapsible>;
+export default Collapsible;

package/dist/components/Collapsible/CollapsibleButton.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { useCollapsibleButton } from './main.svelte.js';
+	import { useActions, classProp } from '../../internal/index.js';
+	import type { CollapsibleButtonProps } from './types.js';
+
+	let { children, class: klass, use = [], self = $bindable(), onClick, ...props }: CollapsibleButtonProps = $props();
+
+	const ctx = useCollapsibleButton({
+		onClick
+	});
+</script>
+
+<button
+	type="button"
+	bind:this={self}
+	use:useActions={use}
+	class={classProp(klass, ctx.state)}
+	{...ctx.attrs}
+	{...props}
+>
+	{@render children?.(ctx.state)}
+</button>

package/dist/components/Collapsible/CollapsibleButton.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CollapsibleButtonProps } from './types.js';
+declare const CollapsibleButton: import("svelte").Component<CollapsibleButtonProps, {}, "self">;
+type CollapsibleButton = ReturnType<typeof CollapsibleButton>;
+export default CollapsibleButton;

package/dist/components/Collapsible/CollapsibleContent.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { useCollapsibleContent } from './main.svelte.js';
+	import { useActions, getTransition, classProp } from '../../internal/index.js';
+	import type { CollapsibleContentProps } from './types.js';
+
+	let {
+		children,
+		class: klass,
+		use = [],
+		self = $bindable(),
+		transition,
+		...props
+	}: CollapsibleContentProps = $props();
+
+	const ctx = useCollapsibleContent();
+
+	const { inTransition, outTransition } = getTransition(transition);
+	const attrs = $derived({
+		...ctx.attrs,
+		class: classProp(klass, ctx.state)
+	} as const);
+</script>
+
+{#if inTransition && outTransition && ctx.root.$visible.val}
+	{@const { config: inConf, transition: inFn } = inTransition}
+	{@const { config: outConf, transition: outFn } = outTransition}
+	<div bind:this={self} use:useActions={use} in:inFn={inConf} out:outFn={outConf} {...attrs} {...props}>
+		{@render children?.(ctx.state)}
+	</div>
+{:else if ctx.root.$visible.val}
+	<div bind:this={self} use:useActions={use} {...attrs} {...props}>
+		{@render children?.(ctx.state)}
+	</div>
+{/if}

package/dist/components/Collapsible/CollapsibleContent.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CollapsibleContentProps } from './types.js';
+declare const CollapsibleContent: import("svelte").Component<CollapsibleContentProps, {}, "self">;
+type CollapsibleContent = ReturnType<typeof CollapsibleContent>;
+export default CollapsibleContent;

package/dist/components/Collapsible/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Collapsible } from './Collapsible.svelte';
+export { default as CollapsibleButton } from './CollapsibleButton.svelte';
+export { default as CollapsibleContent } from './CollapsibleContent.svelte';

package/dist/components/Collapsible/index.js

@@ -0,0 +1,3 @@
+export { default as Collapsible } from './Collapsible.svelte';
+export { default as CollapsibleButton } from './CollapsibleButton.svelte';
+export { default as CollapsibleContent } from './CollapsibleContent.svelte';

package/dist/components/Collapsible/main.svelte.d.ts

@@ -0,0 +1,46 @@
+import { type StateValues } from '../../internal/index.js';
+import type { CollapsibleButtonEvents, CollapsibleState } from './types.js';
+type CollapsibleRootProps = StateValues<{
+    visible: boolean;
+    disabled: boolean;
+}>;
+declare class CollapsibleRoot {
+    uid: (component?: string) => string;
+    $visible: CollapsibleRootProps['visible'];
+    $disabled: CollapsibleRootProps['disabled'];
+    constructor(props: CollapsibleRootProps);
+    attrs: {
+        id: string;
+        'data-collapsible': string;
+        'data-disabled': true | undefined;
+        'data-state': string;
+    };
+    state: CollapsibleState;
+}
+declare class CollapsibleButton {
+    #private;
+    root: CollapsibleRoot;
+    constructor(root: CollapsibleRoot, events: CollapsibleButtonEvents);
+    attrs: {
+        id: string;
+        'aria-expanded': boolean;
+        'data-collapsiblebutton': string;
+        'data-disabled': boolean;
+        'data-state': string;
+        onclick: import("../../internal/index.js").Handler<MouseEvent, HTMLButtonElement> | undefined;
+    };
+    state: CollapsibleState;
+}
+declare class CollapsibleContent {
+    root: CollapsibleRoot;
+    constructor(root: CollapsibleRoot);
+    attrs: {
+        id: string;
+        'data-collapsiblecontent': string;
+    };
+    state: CollapsibleState;
+}
+export declare const createCollapsibleRootContext: (props: CollapsibleRootProps) => CollapsibleRoot;
+export declare const useCollapsibleButton: (events: CollapsibleButtonEvents) => CollapsibleButton;
+export declare const useCollapsibleContent: () => CollapsibleContent;
+export {};