lithesome 0.10.3 → 0.11.0

package/dist/components/Accordion/Accordion.svelte

@@ -1,8 +1,8 @@
 <script lang="ts" context="module">import { setupContext } from "../../internal/index.js";
 import { AccordionContext } from "./context.svelte.js";
 export const { context, contextName } = setupContext();
-</script>
-
+</script>
+
 <script lang="ts">import { useActions, classProp } from "../../internal/index.js";
 import { setContext } from "svelte";
 let {
@@ -19,15 +19,15 @@ setContext(contextName, ctx);
 $effect(() => {
   ctx.single = single;
 });
-</script>
-
-<div
-	bind:this={self}
-	use:useActions={use}
-	id={ctx.uid()}
-	class={classProp(klass, { active })}
-	data-accordion=""
-	{...props}
->
-	{@render children({ active })}
-</div>
+</script>
+
+<div
+	bind:this={self}
+	use:useActions={use}
+	id={ctx.uid()}
+	class={classProp(klass, { active })}
+	data-accordion=""
+	{...props}
+>
+	{@render children({ active })}
+</div>

package/dist/components/Accordion/AccordionButton.svelte

@@ -11,21 +11,21 @@ const handleClick = (e) => {
   if (!item?.disabled)
     ctx.toggle(itemId);
 };
-</script>
-
-<button
-	type="button"
-	bind:this={self}
-	use:useActions={use}
-	class={classProp(klass, { active, disabled: item?.disabled || false })}
-	aria-expanded={active}
-	aria-disabled={item?.disabled}
-	aria-controls={active ? ctx.uid('content') : undefined}
-	tabindex={item?.disabled ? -1 : 0}
-	data-accordionbutton=""
-	data-active={active || undefined}
-	onclick={handleClick}
-	{...props}
->
-	{@render children({ active, disabled: item?.disabled || false })}
-</button>
+</script>
+
+<button
+	type="button"
+	bind:this={self}
+	use:useActions={use}
+	class={classProp(klass, { active, disabled: item?.disabled || false })}
+	aria-expanded={active}
+	aria-disabled={item?.disabled}
+	aria-controls={active ? ctx.uid('content') : undefined}
+	tabindex={item?.disabled ? -1 : 0}
+	data-accordionbutton=""
+	data-active={active || undefined}
+	onclick={handleClick}
+	{...props}
+>
+	{@render children({ active, disabled: item?.disabled || false })}
+</button>

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

@@ -1,14 +1,15 @@
 import { SvelteComponent } from "svelte";
+import type { AccordionButtonProps } from './types.js';
 declare const __propDef: {
-    props: any;
+    props: AccordionButtonProps;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export type AccordionButtonProps = typeof __propDef.props;
+type AccordionButtonProps_ = typeof __propDef.props;
+export { AccordionButtonProps_ as AccordionButtonProps };
 export type AccordionButtonEvents = typeof __propDef.events;
 export type AccordionButtonSlots = typeof __propDef.slots;
-export default class AccordionButton extends SvelteComponent<AccordionButtonProps, AccordionButtonEvents, AccordionButtonSlots> {
+export default class AccordionButton extends SvelteComponent<AccordionButtonProps_, AccordionButtonEvents, AccordionButtonSlots> {
 }
-export {};

package/dist/components/Checkbox/Checkbox.svelte

@@ -16,22 +16,21 @@ const handleClick = (e) => {
     return;
   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}
-	data-state={checked ? 'checked' : 'unchecked'}
-	data-checkbox=""
-	onclick={handleClick}
-	{...props}
->
-	{#if children}
-		{@render children({ checked })}
-	{/if}
-</button>
+</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/Combobox/ComboboxContent.svelte

@@ -52,38 +52,38 @@ $effect(() => {
     contentCleanup?.();
   };
 });
-</script>
-
-{#if inTransition && outTransition && ctx.visible}
-	{@const { config: inConf, transition: inFn } = inTransition}
-	{@const { config: outConf, transition: outFn } = outTransition}
-	<div
-		bind:this={self}
-		use:useOutside={{
-			exclude: ctx.trigger,
-			callback: () => ctx.close()
-		}}
-		use:usePortal={portalTarget}
-		use:useActions={use}
-		in:inFn={inConf}
-		out:outFn={outConf}
-		{...attrs}
-		{...props}
-	>
-		{@render children({ visible: ctx.visible })}
-	</div>
-{:else if ctx.visible}
-	<div
-		bind:this={self}
-		use:useOutside={{
-			exclude: ctx.trigger,
-			callback: () => ctx.close()
-		}}
-		use:usePortal={portalTarget}
-		use:useActions={use}
-		{...attrs}
-		{...props}
-	>
-		{@render children({ visible: ctx.visible })}
-	</div>
-{/if}
+</script>
+
+{#if inTransition && outTransition && ctx.visible}
+	{@const { config: inConf, transition: inFn } = inTransition}
+	{@const { config: outConf, transition: outFn } = outTransition}
+	<div
+		bind:this={self}
+		use:useOutside={{
+			exclude: ctx.trigger,
+			callback: () => ctx.close()
+		}}
+		use:usePortal={portalTarget}
+		use:useActions={use}
+		in:inFn={inConf}
+		out:outFn={outConf}
+		{...attrs}
+		{...props}
+	>
+		{@render children({ visible: ctx.visible })}
+	</div>
+{:else if ctx.visible}
+	<div
+		bind:this={self}
+		use:useOutside={{
+			exclude: ctx.trigger,
+			callback: () => ctx.close()
+		}}
+		use:usePortal={portalTarget}
+		use:useActions={use}
+		{...attrs}
+		{...props}
+	>
+		{@render children({ visible: ctx.visible })}
+	</div>
+{/if}

package/dist/components/Hovercard/HovercardContent.svelte

@@ -62,50 +62,50 @@ const handleMouseleave = (e) => {
   ctx.hovered = false;
   ctx.close();
 };
-</script>
-
-{#if inTransition && outTransition && ctx.visible}
-	{@const { config: inConf, transition: inFn } = inTransition}
-	{@const { config: outConf, transition: outFn } = outTransition}
-	<div
-		bind:this={self}
-		use:useOutside={{
-			exclude: ctx.trigger,
-			callback: () => {
-				ctx.visible = false;
-			}
-		}}
-		use:usePortal={portalTarget}
-		use:useActions={use}
-		in:inFn={inConf}
-		out:outFn={outConf}
-		onmouseenter={handleMouseenter}
-		onmouseleave={handleMouseleave}
-		role="menu"
-		tabindex={-1}
-		{...attrs}
-		{...props}
-	>
-		{@render children({ visible: ctx.visible })}
-	</div>
-{:else if ctx.visible}
-	<div
-		bind:this={self}
-		use:useOutside={{
-			exclude: ctx.trigger,
-			callback: () => {
-				ctx.visible = false;
-			}
-		}}
-		use:usePortal={portalTarget}
-		use:useActions={use}
-		onmouseenter={handleMouseenter}
-		onmouseleave={handleMouseleave}
-		role="menu"
-		tabindex={-1}
-		{...attrs}
-		{...props}
-	>
-		{@render children({ visible: ctx.visible })}
-	</div>
-{/if}
+</script>
+
+{#if inTransition && outTransition && ctx.visible}
+	{@const { config: inConf, transition: inFn } = inTransition}
+	{@const { config: outConf, transition: outFn } = outTransition}
+	<div
+		bind:this={self}
+		use:useOutside={{
+			exclude: ctx.trigger,
+			callback: () => {
+				ctx.visible = false;
+			}
+		}}
+		use:usePortal={portalTarget}
+		use:useActions={use}
+		in:inFn={inConf}
+		out:outFn={outConf}
+		onmouseenter={handleMouseenter}
+		onmouseleave={handleMouseleave}
+		role="menu"
+		tabindex={-1}
+		{...attrs}
+		{...props}
+	>
+		{@render children({ visible: ctx.visible })}
+	</div>
+{:else if ctx.visible}
+	<div
+		bind:this={self}
+		use:useOutside={{
+			exclude: ctx.trigger,
+			callback: () => {
+				ctx.visible = false;
+			}
+		}}
+		use:usePortal={portalTarget}
+		use:useActions={use}
+		onmouseenter={handleMouseenter}
+		onmouseleave={handleMouseleave}
+		role="menu"
+		tabindex={-1}
+		{...attrs}
+		{...props}
+	>
+		{@render children({ visible: ctx.visible })}
+	</div>
+{/if}

package/dist/components/Menu/MenuContent.svelte

@@ -51,32 +51,32 @@ $effect(() => {
     contentCleanup?.();
   };
 });
-</script>
-
-{#if inTransition && outTransition && ctx.visible}
-	{@const { config: inConf, transition: inFn } = inTransition}
-	{@const { config: outConf, transition: outFn } = outTransition}
-	<div
-		bind:this={self}
-		use:useOutside={{ exclude: ctx.trigger, callback: () => ctx.close() }}
-		use:usePortal={portalTarget}
-		use:useActions={use}
-		in:inFn={inConf}
-		out:outFn={outConf}
-		{...attrs}
-		{...props}
-	>
-		{@render children({ visible: ctx.visible })}
-	</div>
-{:else if ctx.visible}
-	<div
-		bind:this={self}
-		use:useOutside={{ exclude: ctx.trigger, callback: () => ctx.close() }}
-		use:usePortal={portalTarget}
-		use:useActions={use}
-		{...attrs}
-		{...props}
-	>
-		{@render children({ visible: ctx.visible })}
-	</div>
-{/if}
+</script>
+
+{#if inTransition && outTransition && ctx.visible}
+	{@const { config: inConf, transition: inFn } = inTransition}
+	{@const { config: outConf, transition: outFn } = outTransition}
+	<div
+		bind:this={self}
+		use:useOutside={{ exclude: ctx.trigger, callback: () => ctx.close() }}
+		use:usePortal={portalTarget}
+		use:useActions={use}
+		in:inFn={inConf}
+		out:outFn={outConf}
+		{...attrs}
+		{...props}
+	>
+		{@render children({ visible: ctx.visible })}
+	</div>
+{:else if ctx.visible}
+	<div
+		bind:this={self}
+		use:useOutside={{ exclude: ctx.trigger, callback: () => ctx.close() }}
+		use:usePortal={portalTarget}
+		use:useActions={use}
+		{...attrs}
+		{...props}
+	>
+		{@render children({ visible: ctx.visible })}
+	</div>
+{/if}

package/dist/components/Modal/ModalContent.svelte

@@ -14,24 +14,24 @@ const attrs = $derived({
   "aria-labelledby": ctx.uid("title"),
   "data-modalcontent": ""
 });
-</script>
-
-{#if inTransition && outTransition && ctx.visible}
-	{@const { config: inConf, transition: inFn } = inTransition}
-	{@const { config: outConf, transition: outFn } = outTransition}
-	<div
-		bind:this={self}
-		use:useTrap={{ allowOutsideClick: true }}
-		use:useActions={use}
-		in:inFn|global={inConf}
-		out:outFn|global={outConf}
-		{...props}
-		{...attrs}
-	>
-		{@render children({})}
-	</div>
-{:else if ctx.visible}
-	<div bind:this={self} use:useTrap={{ allowOutsideClick: true }} use:useActions={use} {...props} {...attrs}>
-		{@render children({})}
-	</div>
-{/if}
+</script>
+
+{#if inTransition && outTransition && ctx.visible}
+	{@const { config: inConf, transition: inFn } = inTransition}
+	{@const { config: outConf, transition: outFn } = outTransition}
+	<div
+		bind:this={self}
+		use:useTrap={{ allowOutsideClick: true }}
+		use:useActions={use}
+		in:inFn|global={inConf}
+		out:outFn|global={outConf}
+		{...props}
+		{...attrs}
+	>
+		{@render children({})}
+	</div>
+{:else if ctx.visible}
+	<div bind:this={self} use:useTrap={{ allowOutsideClick: true }} use:useActions={use} {...props} {...attrs}>
+		{@render children({})}
+	</div>
+{/if}

package/dist/components/Popover/PopoverContent.svelte

@@ -51,54 +51,54 @@ $effect(() => {
     contentCleanup?.();
   };
 });
-</script>
-
-{#if inTransition && outTransition && ctx.visible}
-	{@const { config: inConf, transition: inFn } = inTransition}
-	{@const { config: outConf, transition: outFn } = outTransition}
-	<div
-		bind:this={self}
-		use:useOutside={{
-			exclude: ctx.trigger,
-			callback: () => {
-				ctx.close();
-			}
-		}}
-		use:usePortal={portalTarget}
-		use:useActions={use}
-		use:useTrap={{
-			allowOutsideClick: true,
-			onDeactivate: () => {
-				ctx.visible = false;
-			}
-		}}
-		in:inFn={inConf}
-		out:outFn={outConf}
-		{...attrs}
-		{...props}
-	>
-		{@render children({ visible: ctx.visible })}
-	</div>
-{:else if ctx.visible}
-	<div
-		bind:this={self}
-		use:useOutside={{
-			exclude: ctx.trigger,
-			callback: () => {
-				ctx.close();
-			}
-		}}
-		use:usePortal={portalTarget}
-		use:useActions={use}
-		use:useTrap={{
-			allowOutsideClick: true,
-			onDeactivate: () => {
-				ctx.visible = false;
-			}
-		}}
-		{...attrs}
-		{...props}
-	>
-		{@render children({ visible: ctx.visible })}
-	</div>
-{/if}
+</script>
+
+{#if inTransition && outTransition && ctx.visible}
+	{@const { config: inConf, transition: inFn } = inTransition}
+	{@const { config: outConf, transition: outFn } = outTransition}
+	<div
+		bind:this={self}
+		use:useOutside={{
+			exclude: ctx.trigger,
+			callback: () => {
+				ctx.close();
+			}
+		}}
+		use:usePortal={portalTarget}
+		use:useActions={use}
+		use:useTrap={{
+			allowOutsideClick: true,
+			onDeactivate: () => {
+				ctx.visible = false;
+			}
+		}}
+		in:inFn={inConf}
+		out:outFn={outConf}
+		{...attrs}
+		{...props}
+	>
+		{@render children({ visible: ctx.visible })}
+	</div>
+{:else if ctx.visible}
+	<div
+		bind:this={self}
+		use:useOutside={{
+			exclude: ctx.trigger,
+			callback: () => {
+				ctx.close();
+			}
+		}}
+		use:usePortal={portalTarget}
+		use:useActions={use}
+		use:useTrap={{
+			allowOutsideClick: true,
+			onDeactivate: () => {
+				ctx.visible = false;
+			}
+		}}
+		{...attrs}
+		{...props}
+	>
+		{@render children({ visible: ctx.visible })}
+	</div>
+{/if}

package/dist/components/Portal/Portal.svelte

@@ -8,8 +8,8 @@ let {
   target = $bindable("body"),
   ...props
 } = $props();
-</script>
-
-<div bind:this={self} use:useActions={use} use:usePortal={target} class={classProp(klass)} data-portal="" {...props}>
-	{@render children({})}
-</div>
+</script>
+
+<div bind:this={self} use:useActions={use} use:usePortal={target} class={classProp(klass)} data-portal="" {...props}>
+	{@render children({})}
+</div>

package/dist/components/Select/SelectContent.svelte

@@ -52,32 +52,32 @@ $effect(() => {
     contentCleanup?.();
   };
 });
-</script>
-
-{#if inTransition && outTransition && ctx.visible}
-	{@const { config: inConf, transition: inFn } = inTransition}
-	{@const { config: outConf, transition: outFn } = outTransition}
-	<div
-		bind:this={self}
-		use:useOutside={{ exclude: ctx.trigger, callback: () => ctx.close() }}
-		use:usePortal={portalTarget}
-		use:useActions={use}
-		in:inFn={inConf}
-		out:outFn={outConf}
-		{...attrs}
-		{...props}
-	>
-		{@render children({ visible: ctx.visible })}
-	</div>
-{:else if ctx.visible}
-	<div
-		bind:this={self}
-		use:useOutside={{ exclude: ctx.trigger, callback: () => ctx.close() }}
-		use:usePortal={portalTarget}
-		use:useActions={use}
-		{...attrs}
-		{...props}
-	>
-		{@render children({ visible: ctx.visible })}
-	</div>
-{/if}
+</script>
+
+{#if inTransition && outTransition && ctx.visible}
+	{@const { config: inConf, transition: inFn } = inTransition}
+	{@const { config: outConf, transition: outFn } = outTransition}
+	<div
+		bind:this={self}
+		use:useOutside={{ exclude: ctx.trigger, callback: () => ctx.close() }}
+		use:usePortal={portalTarget}
+		use:useActions={use}
+		in:inFn={inConf}
+		out:outFn={outConf}
+		{...attrs}
+		{...props}
+	>
+		{@render children({ visible: ctx.visible })}
+	</div>
+{:else if ctx.visible}
+	<div
+		bind:this={self}
+		use:useOutside={{ exclude: ctx.trigger, callback: () => ctx.close() }}
+		use:usePortal={portalTarget}
+		use:useActions={use}
+		{...attrs}
+		{...props}
+	>
+		{@render children({ visible: ctx.visible })}
+	</div>
+{/if}

package/dist/components/Switch/Switch.svelte

@@ -0,0 +1,37 @@
+<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;
+};
+</script>
+
+<button
+	type="button"
+	bind:this={self}
+	use:useActions={use}
+	class={classProp(klass, { checked, disabled })}
+	role="switch"
+	aria-checked={checked}
+	aria-required={required}
+	aria-readonly={disabled || undefined}
+	disabled={disabled || undefined}
+	data-state={checked ? 'checked' : 'unchecked'}
+	data-switch=""
+	onclick={handleClick}
+	{...props}
+>
+	{@render children?.({ checked, disabled })}
+</button>

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

@@ -0,0 +1,15 @@
+import { SvelteComponent } from "svelte";
+import type { SwitchProps } from './types.js';
+declare const __propDef: {
+    props: SwitchProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type SwitchProps_ = typeof __propDef.props;
+export { SwitchProps_ as SwitchProps };
+export type SwitchEvents = typeof __propDef.events;
+export type SwitchSlots = typeof __propDef.slots;
+export default class Switch extends SvelteComponent<SwitchProps_, SwitchEvents, SwitchSlots> {
+}

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

@@ -0,0 +1,2 @@
+export { default as Switch } from './Switch.svelte';
+export type * from './types.js';

package/dist/components/Switch/index.js

@@ -0,0 +1 @@
+export { default as Switch } from './Switch.svelte';

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

@@ -0,0 +1,17 @@
+import type { Handler, PropsMaybeChildren } from '../../internal/types.js';
+interface SwitchState {
+    /** If the Switch is checked or not. */
+    checked: boolean;
+    /** If the Switch is disabled or not. */
+    disabled: boolean;
+}
+export interface SwitchProps extends PropsMaybeChildren<HTMLButtonElement, SwitchState> {
+    /** If the switch is checked or not. */
+    checked?: boolean;
+    /** Adds aria attributes. */
+    required?: boolean;
+    /** Disabled the switch, disallowing the internal events. */
+    disabled?: boolean;
+    onClick?: Handler<MouseEvent, HTMLButtonElement>;
+}
+export {};

package/dist/components/Switch/types.js

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

package/dist/index.d.ts

@@ -10,6 +10,7 @@ export * from './components/Popover/index.js';
 export * from './components/Combobox/index.js';
 export * from './components/Hovercard/index.js';
 export * from './components/Portal/index.js';
+export * from './components/Switch/index.js';
 export * from './actions/portal.js';
 export * from './actions/outside.js';
 export * from './actions/trap.js';

package/dist/index.js

@@ -10,6 +10,7 @@ export * from './components/Popover/index.js';
 export * from './components/Combobox/index.js';
 export * from './components/Hovercard/index.js';
 export * from './components/Portal/index.js';
+export * from './components/Switch/index.js';
 export * from './actions/portal.js';
 export * from './actions/outside.js';
 export * from './actions/trap.js';

package/dist/internal/components/FloatingArrow.svelte

@@ -19,6 +19,6 @@ onMount(() => {
     throw log.error(`Cannot initialize arrow node of <${component}Arrow />.`);
   ctx.arrow = self;
 });
-</script>
-
-<div bind:this={self} use:useActions={use} class={classProp(klass, state)} {...dataProps} {...props}></div>
+</script>
+
+<div bind:this={self} use:useActions={use} class={classProp(klass, state)} {...dataProps} {...props}></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lithesome",
-  "version": "0.10.3",
+  "version": "0.11.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/Gibbu/lithesome.git"