lithesome 0.14.0 → 0.14.2

package/dist/components/Accordion/Accordion.svelte

@@ -1,20 +1,24 @@
-<script lang="ts">import { useActions, classProp, stateValue } from "../../internal/index.js";
-import { createAccordionRootContext } from "./main.svelte.js";
-let {
-  children,
-  use = [],
-  class: klass,
-  value = $bindable(),
-  self = $bindable(),
-  single = $bindable(false),
-  ...props
-} = $props();
-const ctx = createAccordionRootContext({
-  single: stateValue(() => single),
-  value: stateValue(() => value)
-});
+<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),
+		...props
+	}: AccordionProps = $props();
+
+	const ctx = createAccordionRootContext({
+		single: stateValue(() => single),
+		value: stateValue(() => value)
+	});
 </script>
 
 <div bind:this={self} use:useActions={use} class={classProp(klass)} {...ctx.attrs} {...props}>
-	{@render children({})}
+	{@render children?.({})}
 </div>

package/dist/components/Accordion/AccordionButton.svelte

@@ -1,7 +1,13 @@
-<script lang="ts">import { useAccordionButton } from "./main.svelte.js";
-import { useActions, classProp } from "../../internal/index.js";
-let { children, class: klass, use = [], self = $bindable(), ...props } = $props();
-const ctx = useAccordionButton();
+<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
@@ -12,5 +18,5 @@ const ctx = useAccordionButton();
 	{...ctx.attrs}
 	{...props}
 >
-	{@render children(ctx.state)}
+	{@render children?.(ctx.state)}
 </button>

package/dist/components/Accordion/AccordionContent.svelte

@@ -1,22 +1,27 @@
-<script lang="ts">import { useAccordionContent } from "./main.svelte.js";
-import { useActions, getTransition, classProp } from "../../internal/index.js";
-let { children, class: klass, use = [], self = $bindable(), transition, ...props } = $props();
-const ctx = useAccordionContent();
-const { inTransition, outTransition } = getTransition(transition);
-const attrs = $derived({
-  ...ctx.attrs,
-  class: classProp(klass)
-});
+<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({})}
+		{@render children?.({})}
 	</div>
 {:else if ctx.item.Active}
 	<div bind:this={self} use:useActions={use} {...attrs} {...props}>
-		{@render children({})}
+		{@render children?.({})}
 	</div>
 {/if}

package/dist/components/Accordion/AccordionHeading.svelte

@@ -1,9 +1,13 @@
-<script lang="ts">import { useAccordionHeading } from "./main.svelte.js";
-import { useActions, classProp } from "../../internal/index.js";
-let { children, class: klass, use = [], level = 3, self = $bindable(), ...props } = $props();
-const ctx = useAccordionHeading({ level });
+<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({})}
+	{@render children?.({})}
 </div>

package/dist/components/Accordion/AccordionItem.svelte

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

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

@@ -1,4 +1,5 @@
-import { type StateValues } from '../../internal/index.js';
+import { type Handler, type StateValues } from '../../internal/index.js';
+import type { AccordionButtonEvents } from './types.js';
 interface Item {
     id: string;
     disabled: boolean;
@@ -56,7 +57,7 @@ declare class AccordionButton {
     #private;
     root: AccordionRoot;
     item: AccordionItem;
-    constructor(item: AccordionItem, root: AccordionRoot);
+    constructor(item: AccordionItem, root: AccordionRoot, events: AccordionButtonEvents);
     attrs: {
         readonly 'aria-expanded': boolean;
         readonly 'aria-disabled': boolean;
@@ -64,7 +65,7 @@ declare class AccordionButton {
         readonly tabindex: 0 | -1;
         readonly 'data-accordionbutton': "";
         readonly 'data-active': true | undefined;
-        readonly onclick: () => void;
+        readonly onclick: Handler<MouseEvent, HTMLButtonElement> | undefined;
     };
     state: {
         active: boolean;
@@ -88,6 +89,6 @@ declare class AccordionContent {
 export declare const createAccordionRootContext: (props: AccordionRootProps) => AccordionRoot;
 export declare const createAccordionItemContext: (props: AccordionItemProps) => AccordionItem;
 export declare const useAccordionHeading: (props: AccordionHeadingProps) => AccordionHeading;
-export declare const useAccordionButton: () => AccordionButton;
+export declare const useAccordionButton: (events: AccordionButtonEvents) => AccordionButton;
 export declare const useAccordionContent: () => AccordionContent;
 export {};

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

@@ -1,6 +1,6 @@
 import { buildContext, createUID } from '../../internal/index.js';
 class AccordionRoot {
-    uid = createUID('accordion').uid;
+    uid = createUID('accordion');
     $value;
     $single;
     items = $state([]);
@@ -26,7 +26,7 @@ class AccordionRoot {
     }));
 }
 class AccordionItem {
-    uid = createUID('item').uid;
+    uid = createUID('item');
     root;
     $disabled;
     Active = $derived.by(() => this.root.activeItems.includes(this.uid()) || false);
@@ -63,13 +63,16 @@ class AccordionHeading {
 class AccordionButton {
     root;
     item;
-    constructor(item, root) {
+    #events;
+    constructor(item, root, events) {
         this.root = root;
         this.item = item;
+        this.#events = events;
     }
-    #handleClick = () => {
+    #handleClick = (e) => {
         if (this.item.$disabled.val)
             return;
+        this.#events.onClick?.(e);
         this.root.toggleActiveItem(this.item.uid());
     };
     attrs = $derived.by(() => ({
@@ -118,8 +121,8 @@ export const createAccordionItemContext = (props) => {
 export const useAccordionHeading = (props) => {
     return rootContext.register(AccordionHeading, props);
 };
-export const useAccordionButton = () => {
-    return itemContext.register(AccordionButton, rootContext.getContext());
+export const useAccordionButton = (events) => {
+    return itemContext.register(AccordionButton, rootContext.getContext(), events);
 };
 export const useAccordionContent = () => {
     return itemContext.register(AccordionContent, rootContext.getContext());

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

@@ -1,4 +1,4 @@
-import type { Props, Transition } from '../../internal/index.js';
+import type { Props, Handler, Transition } from '../../internal/index.js';
 export interface AccordionProps extends Props<HTMLDivElement> {
     /** The value of the active item. */
     value?: string;
@@ -23,7 +23,16 @@ interface AccordionButtonState {
     /** True if the item is disabled. */
     disabled: boolean;
 }
-export interface AccordionButtonProps extends Props<HTMLButtonElement, AccordionButtonState> {
+export interface AccordionButtonEvents {
+    /**
+     * 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 AccordionButtonProps extends Props<HTMLButtonElement, AccordionButtonState>, AccordionButtonEvents {
 }
 interface AccordionItemState {
     /** True if the item is opened. */

package/dist/components/Checkbox/Checkbox.svelte

@@ -1,20 +1,25 @@
-<script lang="ts">import { useActions, classProp } from "../../internal/index.js";
-let {
-  children,
-  class: klass,
-  use = [],
-  self = $bindable(),
-  checked = $bindable(false),
-  required = false,
-  disabled = $bindable(false),
-  onClick,
-  ...props
-} = $props();
-const handleClick = (e) => {
-  onClick?.(e);
-  if (disabled) return;
-  checked = checked === "mixed" ? true : !checked;
-};
+<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

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

@@ -1,16 +1,22 @@
-import type { Handler, PropsMaybeChildren } from '../../internal/index.js';
+import type { Handler, Props } from '../../internal/index.js';
 export type Checked = boolean | 'mixed';
 interface CheckboxState {
     /** If the checkbox is checked or not. */
     checked: Checked;
 }
-export interface CheckboxProps extends PropsMaybeChildren<HTMLButtonElement, CheckboxState> {
+export interface CheckboxProps extends Props<HTMLButtonElement, CheckboxState> {
     /** If the checkbox is checked or not. */
     checked?: Checked;
     /** Adds aria attributes. */
     required?: boolean;
     /** Disabled the checkbox, disallowing the internal events. */
     disabled?: boolean;
+    /**
+     * 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 {};

package/dist/components/Combobox/Combobox.svelte

@@ -1,47 +1,52 @@
-<script lang="ts">import { useActions, classProp, stateValue } from "../../internal/index.js";
-import { createRootContext } from "./main.svelte.js";
-let {
-  children,
-  use = [],
-  class: klass,
-  value = $bindable(),
-  label = $bindable(),
-  touched = $bindable(false),
-  disabled = $bindable(false),
-  visible = $bindable(true),
-  self = $bindable(),
-  onChange,
-  ...props
-} = $props();
-const multiple = Array.isArray(value);
-const ctx = createRootContext({
-  value: stateValue(
-    () => value,
-    (v) => {
-      value = v;
-      onChange?.({ value: v });
-    }
-  ),
-  disabled: stateValue(() => disabled),
-  label: stateValue(
-    () => label || self?.textContent?.trim() || "",
-    (v) => {
-      label = v;
-      onChange?.({ label: v });
-    }
-  ),
-  multiple: stateValue(() => multiple),
-  touched: stateValue(
-    () => touched,
-    (v) => touched = v
-  ),
-  visible: stateValue(
-    () => visible,
-    (v) => visible = v
-  )
-});
+<script lang="ts">
+	import { useActions, classProp, stateValue } from '../../internal/index.js';
+	import { createRootContext } from './main.svelte.js';
+	import type { ComboboxProps } from './types.js';
+
+	let {
+		children,
+		use = [],
+		class: klass,
+		value = $bindable(),
+		label = $bindable(),
+		touched = $bindable(false),
+		disabled = $bindable(false),
+		visible = $bindable(true),
+		controlled,
+		self = $bindable(),
+		onChange,
+		...props
+	}: ComboboxProps = $props();
+
+	const ctx = createRootContext({
+		value: stateValue(
+			() => value,
+			(v) => {
+				value = v;
+				onChange?.({ value: v });
+			}
+		),
+		disabled: stateValue(() => disabled),
+		label: stateValue(
+			() => label || self?.textContent?.trim() || '',
+			(v) => {
+				label = v;
+				onChange?.({ label: v });
+			}
+		),
+		multiple: stateValue(() => Array.isArray(value)),
+		touched: stateValue(
+			() => touched,
+			(v) => (touched = v)
+		),
+		visible: stateValue(
+			() => visible,
+			(v) => (visible = v)
+		),
+		controlled: stateValue(() => controlled)
+	});
 </script>
 
 <div bind:this={self} use:useActions={use} class={classProp(klass, ctx.state)} {...ctx.attrs} {...props}>
-	{@render children(ctx.state)}
+	{@render children?.(ctx.state)}
 </div>

package/dist/components/Combobox/ComboboxArrow.svelte

@@ -1,7 +1,11 @@
-<script lang="ts">import { FloatingArrow } from "../../internal/index.js";
-import { useComboboxArrow } from "./main.svelte.js";
-let { class: klass, use = [], self = $bindable(), ...props } = $props();
-const ctx = useComboboxArrow();
+<script lang="ts">
+	import { FloatingArrow } from '../../internal/index.js';
+	import { useComboboxArrow } from './main.svelte.js';
+	import type { ComboboxArrowProps } from './types.js';
+
+	let { class: klass, use = [], self = $bindable(), ...props }: ComboboxArrowProps = $props();
+
+	const ctx = useComboboxArrow();
 </script>
 
 <FloatingArrow {ctx} component="Combobox" class={klass} {...props} />

package/dist/components/Combobox/ComboboxContent.svelte

@@ -1,24 +1,28 @@
-<script lang="ts">import { FloatingContent } from "../../internal/index.js";
-import { useComboboxContent } from "./main.svelte.js";
-let {
-  children,
-  transition,
-  use = [],
-  portalTarget = "body",
-  sameWidth = false,
-  class: klass,
-  self = $bindable(),
-  placement = "bottom",
-  constrainViewport = false,
-  ...props
-} = $props();
-const ctx = useComboboxContent();
+<script lang="ts">
+	import { FloatingContent } from '../../internal/index.js';
+	import { useComboboxContent } from './main.svelte.js';
+	import type { ComboboxContentProps } from './types.js';
+
+	let {
+		children,
+		transition,
+		use = [],
+		portalTarget = 'body',
+		sameWidth = false,
+		class: klass,
+		self = $bindable(),
+		placement = 'bottom',
+		constrainViewport = false,
+		...props
+	}: ComboboxContentProps = $props();
+
+	const ctx = useComboboxContent();
 </script>
 
 <FloatingContent
 	{children}
 	componentName="Combobox"
-	visible={ctx.root.$visible.val}
+	visible={ctx.root.SuperVisible}
 	{ctx}
 	{transition}
 	{use}

package/dist/components/Combobox/ComboboxInput.svelte

@@ -1,10 +1,23 @@
-<script lang="ts">import { useActions, classProp } from "../../internal/index.js";
-import { useComboboxInput } from "./main.svelte.js";
-let { class: klass, use = [], value = $bindable(), self = $bindable(), ...props } = $props();
-const ctx = useComboboxInput();
-$effect(() => {
-  if (self) ctx.registerTrigger(self);
-});
+<script lang="ts">
+	import { useActions, classProp } from '../../internal/index.js';
+	import { useComboboxInput } from './main.svelte.js';
+	import type { ComboboxInputProps } from './types.js';
+
+	let {
+		class: klass,
+		use = [],
+		value = $bindable(),
+		self = $bindable(),
+		onClick,
+		onKeydown,
+		...props
+	}: ComboboxInputProps = $props();
+
+	const ctx = useComboboxInput({ onClick, onKeydown });
+
+	$effect(() => {
+		if (self) ctx.registerTrigger(self);
+	});
 </script>
 
 <input bind:this={self} use:useActions={use} class={classProp(klass, ctx.state)} bind:value {...ctx.attrs} {...props} />

package/dist/components/Combobox/ComboboxOption.svelte

@@ -1,24 +1,33 @@
-<script lang="ts">import { useActions, classProp, stateValue } from "../../internal/index.js";
-import { useComboboxOption } from "./main.svelte.js";
-let {
-  children,
-  class: klass,
-  use = [],
-  value,
-  label,
-  self = $bindable(),
-  disabled = $bindable(false),
-  onClick,
-  onFocus,
-  onMouseover,
-  ...props
-} = $props();
-let optionEl;
-const ctx = useComboboxOption({
-  disabled: stateValue(() => disabled),
-  value: stateValue(() => value),
-  label: stateValue(() => label || self?.textContent?.trim() || "")
-});
+<script lang="ts">
+	import { useActions, classProp, stateValue } from '../../internal/index.js';
+	import { useComboboxOption } from './main.svelte.js';
+	import type { ComboboxElement, ComboboxOptionProps } from './types.js';
+
+	let {
+		children,
+		class: klass,
+		use = [],
+		value,
+		label,
+		self = $bindable(),
+		disabled = $bindable(false),
+		onClick,
+		onMouseover,
+		...props
+	}: ComboboxOptionProps = $props();
+	let optionEl: ComboboxElement;
+
+	const ctx = useComboboxOption(
+		{
+			disabled: stateValue(() => disabled),
+			value: stateValue(() => value),
+			label: stateValue(() => label || self?.textContent?.trim() || '')
+		},
+		{
+			onClick,
+			onMouseover
+		}
+	);
 </script>
 
 <button
@@ -29,5 +38,5 @@ const ctx = useComboboxOption({
 	{...ctx.attrs}
 	{...props}
 >
-	{@render children(ctx.state)}
+	{@render children?.(ctx.state)}
 </button>