lithesome 0.15.2 → 0.16.1

package/dist/components/Accordion/Accordion.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { useActions, classProp, stateValue } from '../../internal/index.js';
-	import type { AccordionProps } from './types.js';
 	import { createAccordionRootContext } from './main.svelte.js';
+	import type { AccordionProps } from './types.js';
 
 	let {
 		children,
@@ -26,6 +26,6 @@
 	});
 </script>
 
-<div bind:this={self} use:useActions={use} class={classProp(klass)} {...ctx.attrs} {...props}>
-	{@render children?.({})}
+<div bind:this={self} use:useActions={use} class={classProp(klass, ctx.state)} {...ctx.attrs} {...props}>
+	{@render children?.(ctx.state)}
 </div>

package/dist/components/Accordion/AccordionContent.svelte

@@ -10,7 +10,7 @@
 	const { inTransition, outTransition } = getTransition(transition);
 	const attrs = $derived({
 		...ctx.attrs,
-		class: classProp(klass)
+		class: classProp(klass, ctx.state)
 	} as const);
 </script>
 
@@ -18,10 +18,10 @@
 	{@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?.({})}
+		{@render children?.(ctx.state)}
 	</div>
 {:else if ctx.item.Active}
 	<div bind:this={self} use:useActions={use} {...attrs} {...props}>
-		{@render children?.({})}
+		{@render children?.(ctx.state)}
 	</div>
 {/if}

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/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 {};

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

@@ -0,0 +1,74 @@
+import { buildContext, createUID } from '../../internal/index.js';
+class CollapsibleRoot {
+    uid = createUID('collapsible');
+    $visible;
+    $disabled;
+    constructor(props) {
+        this.$visible = props.visible;
+        this.$disabled = props.disabled;
+    }
+    attrs = $derived.by(() => ({
+        id: this.uid(),
+        'data-collapsible': '',
+        'data-disabled': this.$disabled.val || undefined,
+        'data-state': this.$visible.val ? 'opened' : 'closed'
+    }));
+    state = $derived.by(() => ({
+        visible: this.$visible.val
+    }));
+}
+//
+// Button
+//
+class CollapsibleButton {
+    root;
+    #events;
+    constructor(root, events) {
+        this.root = root;
+        this.#events = events;
+    }
+    #handleClick = (e) => {
+        if (this.root.$disabled.val)
+            return;
+        this.#events.onClick?.(e);
+        this.root.$visible.val = !this.root.$visible.val;
+    };
+    attrs = $derived.by(() => ({
+        id: this.root.uid('button'),
+        'aria-expanded': this.root.$visible.val,
+        'data-collapsiblebutton': '',
+        'data-disabled': this.root.$disabled.val,
+        'data-state': this.root.$visible.val ? 'opened' : 'closed',
+        onclick: this.#handleClick
+    }));
+    state = $derived.by(() => ({
+        visible: this.root.$visible.val
+    }));
+}
+//
+// Content
+//
+class CollapsibleContent {
+    root;
+    constructor(root) {
+        this.root = root;
+    }
+    attrs = $derived.by(() => ({
+        id: this.root.uid('content'),
+        'data-collapsiblecontent': ''
+    }));
+    state = $derived.by(() => ({
+        visible: this.root.$visible.val
+    }));
+}
+// Builders
+const rootContext = buildContext(CollapsibleRoot);
+export const createCollapsibleRootContext = (props) => {
+    return rootContext.createContext(props);
+};
+export const useCollapsibleButton = (events) => {
+    return rootContext.register(CollapsibleButton, events);
+};
+export const useCollapsibleContent = () => {
+    return rootContext.register(CollapsibleContent);
+};

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

@@ -0,0 +1,36 @@
+import type { Handler, Props, Transition } from '../../internal/index.js';
+/**
+ * The state that is exposed from the `Collapsible` components.\
+ * Which can be used via the `class` prop function or `children` snippet block.
+ */
+export interface CollapsibleState {
+    /** Whether or not the collapsible content is visible. */
+    visible: boolean;
+}
+export interface CollapsibleProps extends Props<HTMLElement, CollapsibleState> {
+    /** Whether or not the collapsible content is visible. */
+    visible?: boolean;
+    /** Disables the entire collapsible component tree. */
+    disabled?: boolean;
+    /** An event that fires when the `visible` prop changes. */
+    onChange?: (value: boolean) => void;
+}
+export interface CollapsibleButtonEvents {
+    /**
+     * Add your own custom logic to the click event.\
+     * Using the regular `onclick` event will overwrite the event used and cause the component to fail.
+     *
+     * Event will **NOT** be fired if the component is disabled.
+     */
+    onClick?: Handler<MouseEvent, HTMLButtonElement>;
+}
+export interface CollapsibleButtonProps extends Props<HTMLButtonElement, CollapsibleState> {
+}
+export interface CollapsibleContentProps extends Props<HTMLElement> {
+    /**
+     * The `svelte/transtion` you wish to use.
+     *
+     * @see https://lithesome.dev/docs/api#transition-prop
+     */
+    transition?: Transition;
+}

package/dist/components/Collapsible/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Combobox/ComboboxContent.svelte

@@ -23,6 +23,7 @@
 	{children}
 	componentName="Combobox"
 	visible={ctx.root.SuperVisible}
+	bind:self
 	{ctx}
 	{transition}
 	{use}

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

@@ -1,5 +1,5 @@
 import { Floating, type CalcIndexAction, type JsonValue, type StateValues } from '../../internal/index.js';
-import type { ComboboxInputEvents, ComboboxOptionEvents } from './types.js';
+import type { ComboboxContentState, ComboboxInputEvents, ComboboxInputState, ComboboxOptionEvents, ComboboxOptionState, ComboboxState } from './types.js';
 type ComboboxRootProps = StateValues<{
     visible: boolean;
     value: JsonValue;
@@ -38,9 +38,7 @@ declare class ComboboxRoot extends Floating {
         readonly 'data-combobox': "";
         readonly 'data-state': "opened" | "closed";
     };
-    state: {
-        visible: boolean;
-    };
+    state: ComboboxState;
 }
 declare class ComboboxInput {
     #private;
@@ -60,9 +58,7 @@ declare class ComboboxInput {
         readonly onclick: import("../../internal/index.js").Handler<MouseEvent, HTMLInputElement> | undefined;
         readonly onkeydown: import("../../internal/index.js").Handler<KeyboardEvent, HTMLInputElement> | undefined;
     };
-    state: {
-        visible: boolean;
-    };
+    state: ComboboxInputState;
 }
 declare class ComboboxArrow {
     root: ComboboxRoot;
@@ -77,9 +73,7 @@ declare class ComboboxContent {
     attrs: {
         hidden: true | undefined;
     };
-    state: {
-        visible: boolean;
-    };
+    state: ComboboxContentState;
 }
 type ComboboxOptionProps = StateValues<{
     value: JsonValue;
@@ -111,10 +105,7 @@ declare class ComboboxOption {
         readonly onmouseover: import("../../internal/index.js").Handler<MouseEvent, HTMLButtonElement> | undefined;
         readonly onclick: import("../../internal/index.js").Handler<MouseEvent, HTMLButtonElement> | undefined;
     };
-    state: {
-        hovered: boolean;
-        selected: boolean;
-    };
+    state: ComboboxOptionState;
 }
 export declare const createRootContext: (props: ComboboxRootProps) => ComboboxRoot;
 export declare const useComboboxInput: (events: ComboboxInputEvents) => ComboboxInput;

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

@@ -1,6 +1,10 @@
 import type { Props, PropsNoChildren, ContentProps, Handler, JsonValue } from '../../internal/index.js';
 export type ComboboxElement = HTMLAnchorElement | HTMLButtonElement;
-interface ComboboxState {
+/**
+ * The state that is exposed from the `Combobox` component.\
+ * Which can be used via the `class` prop function or `children` snippet block.
+ */
+export interface ComboboxState {
     /** Whether or not the content is opened or not. */
     visible: boolean;
 }
@@ -24,8 +28,24 @@ export interface ComboboxProps extends Props<HTMLDivElement, ComboboxState> {
 }
 export interface ComboboxArrowProps extends PropsNoChildren<HTMLDivElement, ComboboxState> {
 }
+/**
+ * The state that is exposed from the `ComboboxContent` component.\
+ * Which can be used via the `class` prop function or `children` snippet block.
+ */
+export interface ComboboxContentState {
+    /** Whether or not the content is opened or not. */
+    visible: boolean;
+}
 export interface ComboboxContentProps extends Props<HTMLDivElement, ComboboxState>, ContentProps {
 }
+/**
+ * The state that is exposed from the `ComboboxInput` component.\
+ * Which can be used via the `class` prop function or `children` snippet block.
+ */
+export interface ComboboxInputState {
+    /** Whether or not the content is opened or not. */
+    visible: boolean;
+}
 export interface ComboboxInputEvents {
     /**
      * Add your own custom logic to the click event.\
@@ -42,11 +62,15 @@ export interface ComboboxInputEvents {
      */
     onKeydown?: Handler<KeyboardEvent, HTMLInputElement>;
 }
-export interface ComboboxInputProps extends PropsNoChildren<HTMLInputElement, ComboboxState>, ComboboxInputEvents {
+export interface ComboboxInputProps extends PropsNoChildren<HTMLInputElement, ComboboxInputState>, ComboboxInputEvents {
     /** Bind the value of the input value. */
     value: string;
 }
-interface ComboboxOptionState {
+/**
+ * The state that is exposed from the `ComboboxOption` component.\
+ * Which can be used via the `class` prop function or `children` snippet block.
+ */
+export interface ComboboxOptionState {
     /** If the option is hovered, either via mouse or keyboard. */
     hovered: boolean;
     /** If the option is selected. */
@@ -80,4 +104,3 @@ export interface ComboboxOptionProps extends Props<ComboboxElement, ComboboxOpti
      */
     label?: string;
 }
-export {};

package/dist/components/Hovercard/HovercardContent.svelte

@@ -24,15 +24,15 @@
 	componentName="Hovercard"
 	visible={ctx.root.$visible.val}
 	bind:self
-	bind:sameWidth
-	bind:transition
-	bind:constrainViewport
-	bind:placement
-	bind:portalTarget
+	{sameWidth}
+	{transition}
+	{constrainViewport}
+	{placement}
+	{portalTarget}
 	{ctx}
 	{use}
 	outsideCallback={() => ctx.root.forceClose()}
 	role="listbox"
-	class={classProp(klass, ctx.state)}
+	class={klass}
 	{...props}
 />

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

@@ -1,4 +1,5 @@
 import { Floating, type StateValues } from '../../internal/index.js';
+import type { HovercardState } from './types.js';
 type HovercardRootProps = StateValues<{
     visible: boolean;
     delays: {
@@ -21,9 +22,7 @@ declare class HovercardRoot extends Floating {
         readonly 'data-hovercard': "";
         readonly 'data-state': "opened" | "closed";
     };
-    state: {
-        visible: boolean;
-    };
+    state: HovercardState;
 }
 declare class HovercardTrigger {
     #private;
@@ -33,9 +32,7 @@ declare class HovercardTrigger {
     attrs: {
         'data-hovercardtrigger': string;
     };
-    state: {
-        visible: boolean;
-    };
+    state: HovercardState;
 }
 declare class HovercardArrow {
     root: HovercardRoot;
@@ -52,9 +49,7 @@ declare class HovercardContent {
         onmouseenter: () => void;
         onmouseleave: () => void;
     };
-    state: {
-        visible: boolean;
-    };
+    state: HovercardState;
 }
 export declare const createRootContext: (props: HovercardRootProps) => HovercardRoot;
 export declare const useHovercardTrigger: () => HovercardTrigger;

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

@@ -1,5 +1,9 @@
 import type { Props, PropsNoChildren, ContentProps } from '../../internal/index.js';
-interface HovercardState {
+/**
+ * The state that is exposed from the `Hovercard` components.\
+ * Which can be used via the `class` prop function or `children` snippet block.
+ */
+export interface HovercardState {
     /** Whether or not the content is opened or not. */
     visible: boolean;
 }
@@ -19,4 +23,3 @@ export interface HovercardContentProps extends Props<HTMLDivElement, HovercardSt
 }
 export interface HovercardTriggerProps extends Props<HTMLDivElement, HovercardState> {
 }
-export {};

package/dist/components/Menu/MenuContent.svelte

@@ -23,6 +23,7 @@
 	{children}
 	componentName="Menu"
 	visible={ctx.root.$visible.val}
+	bind:self
 	{ctx}
 	{transition}
 	{use}