lithesome 0.2.4 → 0.2.5

package/dist/components/Accordion/Accordion.svelte

@@ -4,16 +4,15 @@ const contextName = "accordion-context";
 export const context = () => getContext(contextName);
 </script>
 
-<script>import { createUID, useActions } from "../../internal/index.js";
+<script>import { createUID, useActions, classProp } from "../../internal/index.js";
 import { setContext } from "svelte";
 let { children, use = [], class: klass, self, single, ...props } = $props();
 const { uid } = createUID("accordion");
 const API = createContext(uid, single);
 const active = $derived(API.activeItems.length > 0);
-const classProp = $derived(typeof klass === "function" ? klass({ active }) : klass);
 setContext(contextName, API);
 </script>
 
-<div bind:this={self} use:useActions={use} id={uid()} class={classProp} data-accordion="" {...props}>
+<div bind:this={self} use:useActions={use} id={uid()} class={classProp(klass, { active })} data-accordion="" {...props}>
 	{@render children({ active })}
 </div>

package/dist/components/Accordion/AccordionButton.svelte

@@ -1,14 +1,11 @@
 <script>import { context } from "./Accordion.svelte";
-import { useActions } from "../../internal/index.js";
+import { useActions, classProp } from "../../internal/index.js";
 import { getContext } from "svelte";
 let { children, class: klass, use = [], self, onClick, ...props } = $props();
 const API = context();
 const itemId = getContext("accordionitem-id");
 const active = $derived(API.activeItems.includes(itemId));
 const item = $derived(API.items.find((el) => el.id === itemId));
-const classProp = $derived(
-  typeof klass === "function" ? klass({ active, disabled: item?.disabled || false }) : klass
-);
 const handleClick = (e) => {
   onClick?.(e);
   if (!item?.disabled)
@@ -20,7 +17,7 @@ const handleClick = (e) => {
 	type="button"
 	bind:this={self}
 	use:useActions={use}
-	class={classProp}
+	class={classProp(klass, { active, disabled: item?.disabled || false })}
 	aria-expanded={active}
 	aria-disabled={item?.disabled}
 	aria-controls={active ? API.uid('content') : undefined}

package/dist/components/Accordion/AccordionContent.svelte

@@ -1,17 +1,16 @@
 <script>import { context } from "./Accordion.svelte";
-import { useActions, getTransition } from "../../internal/index.js";
+import { useActions, getTransition, classProp } from "../../internal/index.js";
 import { getContext } from "svelte";
 let { children, class: klass, use = [], self, transition, ...props } = $props();
 const API = context();
 const itemId = getContext("accordionitem-id");
 const active = $derived(API.activeItems.includes(itemId));
-const classProp = $derived(typeof klass === "function" ? klass({ active }) : klass);
 const _transition = getTransition(transition);
 const attrs = $derived({
   id: API.uid("content"),
   "data-accordioncontent": "",
   "data-active": active || void 0,
-  class: classProp
+  class: classProp(klass, { active })
 });
 </script>
 

package/dist/components/Accordion/AccordionHeading.svelte

@@ -1,12 +1,11 @@
-<script>import { useActions } from "../../internal/index.js";
+<script>import { useActions, classProp } from "../../internal/index.js";
 let { children, class: klass, use = [], level = 3, self, ...props } = $props();
-const classProp = $derived(typeof klass === "function" ? klass({}) : klass);
 </script>
 
 <div
 	bind:this={self}
 	use:useActions={use}
-	class={classProp}
+	class={classProp(klass)}
 	role="heading"
 	aria-level={level}
 	data-accordionheading=""

package/dist/components/Accordion/AccordionItem.svelte

@@ -1,5 +1,5 @@
 <script>import { context } from "./Accordion.svelte";
-import { log, useActions, createUID } from "../../internal/index.js";
+import { log, useActions, createUID, classProp } from "../../internal/index.js";
 import { onMount, setContext } from "svelte";
 let { children, class: klass, use = [], self, disabled = false, ...props } = $props();
 const API = context();
@@ -13,7 +13,6 @@ onMount(() => {
   });
 });
 const active = $derived(API.activeItems.includes(uid()));
-const classProp = $derived(typeof klass === "function" ? klass({ active }) : klass);
 setContext("accordionitem-id", uid());
 $effect(() => {
   API.setDisabled(uid(), disabled);
@@ -24,7 +23,7 @@ $effect(() => {
 	bind:this={self}
 	use:useActions={use}
 	id={uid()}
-	class={classProp}
+	class={classProp(klass, { active })}
 	data-accordionitem=""
 	data-disabled={disabled || undefined}
 	data-state={active ? 'opened' : 'closed'}

package/dist/components/Checkbox/Checkbox.svelte

@@ -1,6 +1,9 @@
 <script context="module"></script>
 
-<script>import { useActions } from "../../internal/index.js";
+<script>import {
+  useActions,
+  classProp
+} from "../../internal/index.js";
 let {
   children,
   class: klass,
@@ -12,7 +15,6 @@ let {
   onClick,
   ...props
 } = $props();
-const classProp = $derived(typeof klass === "function" ? klass({ checked }) : klass);
 const handleClick = (e) => {
   onClick?.(e);
   if (disabled)
@@ -25,7 +27,7 @@ const handleClick = (e) => {
 	type="button"
 	bind:this={self}
 	use:useActions={use}
-	class={classProp}
+	class={classProp(klass, { checked })}
 	role="checkbox"
 	aria-checked={checked}
 	aria-required={required}

package/dist/components/Menu/Menu.svelte

@@ -4,12 +4,11 @@ const contextName = "menu-context";
 export const context = () => getContext(contextName);
 </script>
 
-<script>import { createUID, useActions } from "../../internal/index.js";
+<script>import { createUID, useActions, classProp } from "../../internal/index.js";
 import { setContext } from "svelte";
 let { children, use = [], class: klass, self, ...props } = $props();
 const { uid } = createUID("menu");
 const API = createContext(uid);
-const classProp = $derived(typeof klass === "function" ? klass({ visible: API.visible }) : klass);
 setContext(contextName, API);
 </script>
 
@@ -17,7 +16,7 @@ setContext(contextName, API);
 	bind:this={self}
 	use:useActions={use}
 	id={uid()}
-	class={classProp}
+	class={classProp(klass, { visible: API.visible })}
 	data-menu=""
 	data-state={API.visible ? 'opened' : 'closed'}
 	{...props}

package/dist/components/Menu/MenuDropdown.svelte

@@ -4,7 +4,8 @@ import {
   anchorElement,
   portal,
   useActions,
-  getTransition
+  getTransition,
+  classProp
 } from "../../internal/index.js";
 import { log } from "../../internal/index.js";
 import { onMount } from "svelte";
@@ -23,12 +24,11 @@ let {
 const API = context();
 let dropdownCleanup = $state(void 0);
 const _transition = getTransition(transition);
-const classProp = $derived(typeof klass === "function" ? klass({ visible: API.visible }) : klass);
 const attrs = $derived({
   id: API.uid("dropdown"),
   "aria-labelledby": API.uid("trigger"),
   role: "menu",
-  class: classProp,
+  class: classProp(klass, { visible: API.visible }),
   "data-menudropdown": ""
 });
 onMount(async () => {

package/dist/components/Menu/MenuItem.svelte

@@ -1,5 +1,5 @@
 <script>import { context } from "./Menu.svelte";
-import { useActions } from "../../internal/index.js";
+import { useActions, classProp } from "../../internal/index.js";
 import { createUID } from "../../internal/index.js";
 import { onMount } from "svelte";
 let {
@@ -17,7 +17,6 @@ let {
 const API = context();
 const { uid } = createUID("item");
 const hovered = $derived(API.hoveredItem === uid());
-const classProp = $derived(typeof klass === "function" ? klass({ hovered }) : klass);
 onMount(() => {
   if (!API.items.includes(uid()) && !disabled)
     API.register(uid());
@@ -45,7 +44,7 @@ const handleFocus = (e) => {
 	bind:this={self}
 	use:useActions={use}
 	id={uid()}
-	class={classProp}
+	class={classProp(klass, { hovered })}
 	href={href || undefined}
 	disabled={disabled || undefined}
 	role="menuitem"

package/dist/components/Menu/MenuTrigger.svelte

@@ -5,12 +5,12 @@ import {
   addEventListeners,
   useActions,
   KEYS,
+  classProp,
   PREVENT_KEYS
 } from "../../internal/index.js";
 import { onMount } from "svelte";
 let { children, class: klass, use = [], self, onClick, onKeydown, ...props } = $props();
 const API = context();
-const classProp = $derived(typeof klass === "function" ? klass({ visible: API.visible }) : klass);
 onMount(() => {
   if (self && self.children.length > 1) {
     log.error("<MenuTrigger /> comoponent can only take 1 children node.");
@@ -75,6 +75,12 @@ const handleClick = (e) => {
 };
 </script>
 
-<div bind:this={self} use:useActions={use} class={classProp} data-menutrigger="" {...props}>
+<div
+	bind:this={self}
+	use:useActions={use}
+	class={classProp(klass, { visible: API.visible })}
+	data-menutrigger=""
+	{...props}
+>
 	{@render children({ visible: API.visible })}
 </div>

package/dist/components/Modal/Modal.svelte

@@ -4,12 +4,11 @@ const contextName = "modal-context";
 export const context = () => getContext(contextName);
 </script>
 
-<script>import { createUID, useActions, portal, KEYS, isBrowser } from "../../internal/index.js";
+<script>import { createUID, useActions, portal, KEYS, isBrowser, classProp } from "../../internal/index.js";
 import { setContext } from "svelte";
 let { children, use = [], class: klass, self, visible, portalTarget = "body", ...props } = $props();
 const { uid } = createUID("modal");
 const API = createContext(uid, visible);
-const classProp = $derived(typeof klass === "function" ? klass({}) : klass);
 setContext(contextName, API);
 const handleKeys = (e) => {
   const { key } = e;
@@ -34,7 +33,7 @@ $effect(() => {
 		use:portal={portalTarget}
 		use:useActions={use}
 		id={uid()}
-		class={classProp}
+		class={classProp(klass)}
 		data-modal=""
 		{...props}
 	>

package/dist/components/Modal/ModalContent.svelte

@@ -1,12 +1,11 @@
-<script>import { useActions, getTransition, trap } from "../../internal/index.js";
+<script>import { useActions, getTransition, classProp, trap } from "../../internal/index.js";
 import { context } from "./Modal.svelte";
 let { children, class: klass, use = [], self, transition, ...props } = $props();
 const API = context();
-const classProp = $derived(typeof klass === "function" ? klass({}) : klass);
 const _transition = getTransition(transition);
 const attrs = $derived({
   id: API.uid("content"),
-  class: classProp,
+  class: classProp(klass),
   role: "dialog",
   "aria-modal": "true",
   tabindex: -1,

package/dist/components/Modal/ModalDescription.svelte

@@ -1,15 +1,14 @@
-<script>import { useActions } from "../../internal/index.js";
+<script>import { useActions, classProp } from "../../internal/index.js";
 import { context } from "./Modal.svelte";
 let { children, class: klass, use = [], self, ...props } = $props();
 const API = context();
-const classProp = $derived(typeof klass === "function" ? klass({}) : klass);
 </script>
 
 <p
 	bind:this={self}
 	use:useActions={use}
 	id={API.uid('description')}
-	class={classProp}
+	class={classProp(klass)}
 	data-modaldescription=""
 	{...props}
 >

package/dist/components/Modal/ModalOverlay.svelte

@@ -1,14 +1,13 @@
-<script>import { useActions, getTransition } from "../../internal/index.js";
+<script>import { useActions, getTransition, classProp } from "../../internal/index.js";
 import { context } from "./Modal.svelte";
 let { class: klass, use = [], self, transition, ...props } = $props();
 const API = context();
 const _transition = getTransition(transition);
-const classProp = $derived(typeof klass === "function" ? klass({}) : klass);
 const attrs = $derived({
   id: API.uid("overlay"),
   "aria-hidden": "true",
   "data-modaloverlay": "",
-  class: classProp
+  class: classProp(klass)
 });
 </script>
 

package/dist/components/Modal/ModalTitle.svelte

@@ -1,10 +1,9 @@
-<script>import { useActions } from "../../internal/index.js";
+<script>import { useActions, classProp } from "../../internal/index.js";
 import { context } from "./Modal.svelte";
 let { children, class: klass, use = [], self, ...props } = $props();
 const API = context();
-const classProp = $derived(typeof klass === "function" ? klass({}) : klass);
 </script>
 
-<h2 bind:this={self} use:useActions={use} id={API.uid('title')} class={classProp} data-modaltitle="" {...props}>
+<h2 bind:this={self} use:useActions={use} id={API.uid('title')} class={classProp(klass)} data-modaltitle="" {...props}>
 	{@render children({})}
 </h2>

package/dist/components/Pin/Pin.svelte

@@ -4,7 +4,7 @@ const contextName = "pin-context";
 export const context = () => getContext(contextName);
 </script>
 
-<script>import { createUID, useActions } from "../../internal/index.js";
+<script>import { createUID, useActions, classProp } from "../../internal/index.js";
 import { setContext } from "svelte";
 let {
   children,
@@ -30,7 +30,6 @@ const API = createContext(
   }
 );
 setContext(contextName, API);
-const classProp = $derived(typeof klass === "function" ? klass({ filled: API.filled }) : klass);
 $effect(() => {
   API.setType(type);
   API.setDisabled(disabled);
@@ -45,7 +44,7 @@ $effect(() => {
 	bind:this={self}
 	use:useActions={use}
 	id={uid()}
-	class={classProp}
+	class={classProp(klass, { filled: API.filled })}
 	aria-disabled={disabled || undefined}
 	data-disabled={disabled || undefined}
 	data-pin=""

package/dist/components/Pin/PinInput.svelte

@@ -3,15 +3,13 @@ import {
   log,
   useActions,
   createUID,
-  KEYS
+  KEYS,
+  classProp
 } from "../../internal/index.js";
 import { onMount, tick } from "svelte";
 let { class: klass, use = [], self, onKeydown, onInput, onFocus, onBlur, onPaste, ...props } = $props();
 const API = context();
 const { uid } = createUID("input");
-const classProp = $derived(
-  typeof klass === "function" ? klass({ filled: API.filled, disabled: API.disabled }) : klass
-);
 const index = $derived(API.inputs.indexOf(uid()));
 let focused = $state(false);
 let value = $derived(API.value[index] || "");
@@ -103,22 +101,22 @@ const moveFocus = (direction) => {
   if (target)
     document.querySelector(`#${target}`)?.focus();
 };
-</script>
-
-<input
-	bind:this={self}
-	use:useActions={use}
-	{value}
-	id={uid()}
-	class={classProp}
-	disabled={API.disabled}
-	placeholder={focused ? '' : API.placeholder}
-	data-pininput=""
-	data-filled={API.filled || undefined}
-	oninput={handleInput}
-	onkeydown={handleKeyDown}
-	onfocus={handleFocus}
-	onblur={handleBlur}
-	onpaste={handlePaste}
-	{...props}
-/>
+</script>
+
+<input
+	bind:this={self}
+	use:useActions={use}
+	{value}
+	id={uid()}
+	class={classProp(klass, { filled: API.filled, disabled: API.disabled })}
+	disabled={API.disabled}
+	placeholder={focused ? '' : API.placeholder}
+	data-pininput=""
+	data-filled={API.filled || undefined}
+	oninput={handleInput}
+	onkeydown={handleKeyDown}
+	onfocus={handleFocus}
+	onblur={handleBlur}
+	onpaste={handlePaste}
+	{...props}
+/>

package/dist/components/Pin/PinValue.svelte

@@ -1,10 +1,9 @@
 <script>import { context } from "./Pin.svelte";
-import { log, useActions, createUID } from "../../internal/index.js";
+import { log, useActions, createUID, classProp } from "../../internal/index.js";
 import { onMount } from "svelte";
 let { class: klass, use = [], self, name, ...props } = $props();
 const API = context();
 const { uid } = createUID("input");
-const classProp = $derived(typeof klass === "function" ? klass({}) : klass);
 onMount(() => {
   if (!API)
     log.error("<AccordionItem /> must be a direct child of <Accordion />");
@@ -16,7 +15,7 @@ onMount(() => {
 	bind:value={API.transformedValue}
 	use:useActions={use}
 	id={uid()}
-	class={classProp}
+	class={classProp(klass)}
 	aria-hidden="true"
 	tabindex="-1"
 	hidden

package/dist/components/Popover/Popover.svelte

@@ -4,7 +4,7 @@ const contextName = "popover-context";
 export const context = () => getContext(contextName);
 </script>
 
-<script>import { createUID, useActions, KEYS, isBrowser } from "../../internal/index.js";
+<script>import { createUID, useActions, KEYS, isBrowser, classProp } from "../../internal/index.js";
 import { setContext } from "svelte";
 let { children, use = [], class: klass, self, visible = false, ...props } = $props();
 const { uid } = createUID("popover");
@@ -13,7 +13,6 @@ const API = createContext(uid, visible, {
     visible = val;
   }
 });
-const classProp = $derived(typeof klass === "function" ? klass({ visible: API.visible }) : klass);
 setContext(contextName, API);
 const handleKeys = (e) => {
   const { key } = e;
@@ -36,7 +35,7 @@ $effect(() => {
 	bind:this={self}
 	use:useActions={use}
 	id={uid()}
-	class={classProp}
+	class={classProp(klass, { visible: API.visible })}
 	data-popover=""
 	data-state={API.visible ? 'opened' : 'closed'}
 	{...props}

package/dist/components/Popover/PopoverContent.svelte

@@ -4,8 +4,9 @@ import {
   anchorElement,
   portal,
   useActions,
+  trap,
   getTransition,
-  trap
+  classProp
 } from "../../internal/index.js";
 import { log } from "../../internal/index.js";
 import { onMount } from "svelte";
@@ -24,12 +25,11 @@ let {
 const API = context();
 let contentCleanup = $state(void 0);
 const _transition = getTransition(transition);
-const classProp = $derived(typeof klass === "function" ? klass({ visible: API.visible }) : klass);
 const attrs = $derived({
   id: API.uid("content"),
   "aria-labelledby": API.uid("trigger"),
   role: "menu",
-  class: classProp,
+  class: classProp(klass, { visible: API.visible }),
   "data-menucontent": ""
 });
 onMount(async () => {

package/dist/components/Popover/PopoverTrigger.svelte

@@ -4,12 +4,12 @@ import {
   setNodeProps,
   addEventListeners,
   useActions,
-  KEYS
+  KEYS,
+  classProp
 } from "../../internal/index.js";
 import { onMount } from "svelte";
 let { children, class: klass, use = [], self, onClick, onKeydown, ...props } = $props();
 const API = context();
-const classProp = $derived(typeof klass === "function" ? klass({ visible: API.visible }) : klass);
 onMount(() => {
   if (self && self.children.length > 1) {
     log.error("<MenuTrigger /> comoponent can only take 1 children node.");
@@ -54,6 +54,12 @@ const handleClick = (e) => {
 };
 </script>
 
-<div bind:this={self} use:useActions={use} class={classProp} data-popovertrigger="" {...props}>
+<div
+	bind:this={self}
+	use:useActions={use}
+	class={classProp(klass, { visible: API.visible })}
+	data-popovertrigger=""
+	{...props}
+>
 	{@render children({ visible: API.visible })}
 </div>

package/dist/components/RadioGroup/RadioGroup.svelte

@@ -4,7 +4,7 @@ const contextName = "radiogroup-context";
 export const context = () => getContext(contextName);
 </script>
 
-<script>import { createUID, useActions } from "../../internal/index.js";
+<script>import { createUID, useActions, classProp } from "../../internal/index.js";
 import { setContext } from "svelte";
 let { children, use = [], class: klass, self, value, required, ...props } = $props();
 const { uid } = createUID("accordion");
@@ -14,13 +14,12 @@ const API = createContext(uid, value, {
   }
 });
 setContext(contextName, API);
-const classProp = $derived(typeof klass === "function" ? klass({}) : klass);
 </script>
 
 <div
 	bind:this={self}
 	use:useActions={use}
-	class={classProp}
+	class={classProp(klass)}
 	role="radiogroup"
 	aria-required={required}
 	data-radiogroup=""

package/dist/components/RadioGroup/RadioGroupItem.svelte

@@ -3,7 +3,8 @@ import {
   log,
   useActions,
   createUID,
-  KEYS
+  KEYS,
+  classProp
 } from "../../internal/index.js";
 import { onMount } from "svelte";
 let {
@@ -30,7 +31,6 @@ onMount(() => {
     });
 });
 const checked = $derived(API.selectedItem.id === uid());
-const classProp = $derived(typeof klass === "function" ? klass({ checked }) : klass);
 const handleClick = (e) => {
   onClick?.(e);
   if (!disabled) {
@@ -60,7 +60,7 @@ const handleKeydown = (e) => {
 <button
 	bind:this={self}
 	use:useActions={use}
-	class={classProp}
+	class={classProp(klass, { checked })}
 	type="button"
 	role="radio"
 	{disabled}

package/dist/components/Select/Select.svelte

@@ -4,7 +4,7 @@ const contextName = "select-context";
 export const context = () => getContext(contextName);
 </script>
 
-<script>import { createUID, useActions } from "../../internal/index.js";
+<script>import { createUID, useActions, classProp } from "../../internal/index.js";
 import { setContext } from "svelte";
 let { children, use = [], class: klass, value, self, onChange, ...props } = $props();
 const { uid } = createUID("select");
@@ -14,7 +14,6 @@ const API = createContext(uid, multiple, {
     value = val;
   }
 });
-const classProp = $derived(typeof klass === "function" ? klass({ visible: API.visible }) : klass);
 setContext(contextName, API);
 onMount(async () => {
   await tick();
@@ -29,7 +28,7 @@ onMount(async () => {
 	bind:this={self}
 	use:useActions={use}
 	id={uid()}
-	class={classProp}
+	class={classProp(klass, { visible: API.visible })}
 	data-select=""
 	data-state={API.visible ? 'opened' : 'closed'}
 	{...props}

package/dist/components/Select/SelectDropdown.svelte

@@ -4,7 +4,8 @@ import {
   anchorElement,
   portal,
   useActions,
-  getTransition
+  getTransition,
+  classProp
 } from "../../internal/index.js";
 import { log } from "../../internal/index.js";
 import { onMount } from "svelte";
@@ -23,12 +24,11 @@ let {
 const API = context();
 let dropdownCleanup = $state(void 0);
 const _transition = getTransition(transition);
-const classProp = $derived(typeof klass === "function" ? klass({ visible: API.visible }) : klass);
 const attrs = $derived({
   id: API.uid("dropdown"),
   "aria-labelledby": API.uid("trigger"),
   role: "listbox",
-  class: classProp,
+  class: classProp(klass, { visible: API.visible }),
   "data-selectdropdown": "",
   hidden: !API.mounted || void 0
 });

package/dist/components/Select/SelectOption.svelte

@@ -1,5 +1,8 @@
 <script>import { context } from "./Select.svelte";
-import { useActions } from "../../internal/index.js";
+import {
+  useActions,
+  classProp
+} from "../../internal/index.js";
 import { createUID } from "../../internal/index.js";
 import { onMount } from "svelte";
 let { children, class: klass, use = [], value, label, self, disabled, onClick, onFocus, ...props } = $props();
@@ -29,7 +32,6 @@ const handleFocus = (e) => {
 };
 const hovered = $derived(API.hoveredOption?.id === uid());
 const selected = $derived(!!API.selectedOptions.find((el) => el.value === value));
-const classProp = $derived(typeof klass === "function" ? klass({ hovered, selected }) : klass);
 </script>
 
 <button
@@ -37,7 +39,7 @@ const classProp = $derived(typeof klass === "function" ? klass({ hovered, select
 	bind:this={optionEl}
 	use:useActions={use}
 	id={uid()}
-	class={classProp}
+	class={classProp(klass, { hovered, selected })}
 	type="button"
 	{disabled}
 	role="option"

package/dist/components/Select/SelectTrigger.svelte

@@ -4,7 +4,8 @@ import {
   setNodeProps,
   removeNodeProps,
   addEventListeners,
-  useActions
+  useActions,
+  classProp
 } from "../../internal/index.js";
 import { onMount } from "svelte";
 let { children, class: klass, use = [], self, ...props } = $props();
@@ -70,13 +71,12 @@ $effect(() => {
     removeNodeProps(target, "aria-activedescendant", "aria-controls");
   }
 });
-const classProp = $derived(typeof klass === "function" ? klass({ visible: API.visible }) : klass);
 </script>
 
 <div
 	bind:this={self}
 	use:useActions={use}
-	class={classProp}
+	class={classProp(klass, { visible: API.visible })}
 	data-selecttrigger=""
 	{...props}
 	style="display: contents;"

package/dist/components/Select/SelectValue.svelte

@@ -1,16 +1,15 @@
 <script>import { context } from "./Select.svelte";
-import { useActions } from "../../internal/index.js";
+import { useActions, classProp } from "../../internal/index.js";
 let { class: klass, use = [], self, placeholder = "Select an option...", ...props } = $props();
 const API = context();
 const placeholderVisible = $derived(API.selectedOptions.length === 0);
-const classProp = $derived(typeof klass === "function" ? klass({ placeholderVisible }) : klass);
 </script>
 
 <span
 	bind:this={self}
 	use:useActions={use}
 	id={API.uid('value')}
-	class={classProp}
+	class={classProp(klass, { placeholderVisible })}
 	data-selectvalue=""
 	data-placeholder={placeholderVisible || undefined}
 	{...props}

package/dist/components/Tabs/Tabs.svelte

@@ -4,7 +4,7 @@ const contextName = "tabs-context";
 export const context = () => getContext(contextName);
 </script>
 
-<script>import { createUID, useActions } from "../../internal/index.js";
+<script>import { createUID, useActions, classProp } from "../../internal/index.js";
 import { setContext } from "svelte";
 let { children, use = [], class: klass, self, orientation = "horizontal", value, ...props } = $props();
 const { uid } = createUID("tabs");
@@ -12,7 +12,6 @@ const API = createContext(uid, {
   orientation,
   value
 });
-const classProp = $derived(typeof klass === "function" ? klass({ active: API.activeTab }) : klass);
 setContext(contextName, API);
 $effect(() => {
   API.setOrientation(orientation);
@@ -23,7 +22,7 @@ $effect(() => {
 	bind:this={self}
 	id={uid()}
 	use:useActions={use}
-	class={classProp}
+	class={classProp(klass, { active: API.activeTab })}
 	data-tabs=""
 	data-orientation={orientation}
 	data-active={API.activeTab}

package/dist/components/Tabs/TabsButton.svelte

@@ -2,7 +2,8 @@
 import {
   useActions,
   KEYS,
-  PREVENT_KEYS
+  PREVENT_KEYS,
+  classProp
 } from "../../internal/index.js";
 import { onMount } from "svelte";
 let {
@@ -18,7 +19,6 @@ let {
 } = $props();
 const API = context();
 const active = $derived(API.activeTab === value);
-const classProp = $derived(typeof klass === "function" ? klass({ active }) : klass);
 const handleClick = (e) => {
   onClick?.(e);
   if (disabled)
@@ -50,7 +50,7 @@ onMount(() => {
 <button
 	bind:this={self}
 	use:useActions={use}
-	class={classProp}
+	class={classProp(klass, { active })}
 	type="button"
 	role="tab"
 	tabindex={active ? 0 : -1}

package/dist/components/Tabs/TabsContent.svelte

@@ -1,15 +1,14 @@
 <script>import { context } from "./Tabs.svelte";
-import { useActions } from "../../internal/index.js";
+import { useActions, classProp } from "../../internal/index.js";
 let { children, class: klass, use = [], self, value, ...props } = $props();
 const API = context();
 const active = $derived(API.activeTab === value);
-const classProp = $derived(typeof klass === "function" ? klass({ active }) : klass);
 </script>
 
 <div
 	bind:this={self}
 	use:useActions={use}
-	class={classProp}
+	class={classProp(klass, { active })}
 	role="tabpanel"
 	hidden={!active ? true : undefined}
 	data-tabscontent=""

package/dist/components/Tabs/TabsList.svelte

@@ -1,14 +1,13 @@
 <script>import { context } from "./Tabs.svelte";
-import { useActions } from "../../internal/index.js";
+import { useActions, classProp } from "../../internal/index.js";
 let { children, class: klass, use = [], self, ...props } = $props();
 const API = context();
-const classProp = $derived(typeof klass === "function" ? klass({}) : klass);
 </script>
 
 <div
 	bind:this={self}
 	use:useActions={use}
-	class={classProp}
+	class={classProp(klass)}
 	role="tablist"
 	aria-orientation={API.orientation}
 	data-tabslist=""

package/dist/internal/helpers/anchor.js

@@ -1,5 +1,5 @@
 import { computePosition, flip, shift, autoUpdate, size } from '@floating-ui/dom';
-import { defaultConfig } from './utils.js';
+import { defaultConfig } from './utils.svelte.js';
 export const anchorElement = (anchor, target, config) => {
     if (!anchor || !target)
         return;

package/dist/internal/helpers/element.d.ts

@@ -1,5 +1,28 @@
+/**
+ * Sets attributes to a html element.
+ * @param node The element to apply attributes to.
+ * @param attrs The attributes to be applied.
+ */
 export declare const setNodeProps: <T extends HTMLElement>(node: T, attrs: Record<string, string>) => void;
+/**
+ * Removes attributes from a html element.
+ * @param node The element to remove the attributes from.
+ * @param attrs The attributes to be removed.
+ */
 export declare const removeNodeProps: <T extends HTMLElement>(node: T, ...attrs: string[]) => void;
+/**
+ * Adds event listeners to a html element.
+ * @param node The element to apply the listeners to.
+ * @param listeners The listeners to be applied.
+ */
 export declare const addEventListeners: <T extends HTMLElement>(node: T, listeners: Record<string, any>) => void;
+/**
+ * Removes event listeners from a html element.
+ * @param node The element to remove the listeners from.
+ * @param listeners The listeners to be removed.
+ */
 export declare const removeEventListeners: <T extends HTMLElement>(node: T, listeners: Record<string, any>) => void;
+/**
+ * Disables the browser scroll bar/functionality if any overlaying element requires focus.
+ */
 export declare const disableScroll: (state: boolean) => void;

package/dist/internal/helpers/element.js

@@ -1,25 +1,49 @@
+import { isBrowser } from './is.js';
+/**
+ * Sets attributes to a html element.
+ * @param node The element to apply attributes to.
+ * @param attrs The attributes to be applied.
+ */
 export const setNodeProps = (node, attrs) => {
     Object.entries(attrs).forEach(([k, v]) => {
         node.setAttribute(k, v);
     });
 };
+/**
+ * Removes attributes from a html element.
+ * @param node The element to remove the attributes from.
+ * @param attrs The attributes to be removed.
+ */
 export const removeNodeProps = (node, ...attrs) => {
     attrs.forEach((el) => {
         node.removeAttribute(el);
     });
 };
+/**
+ * Adds event listeners to a html element.
+ * @param node The element to apply the listeners to.
+ * @param listeners The listeners to be applied.
+ */
 export const addEventListeners = (node, listeners) => {
     Object.entries(listeners).forEach(([k, v]) => {
         node.addEventListener(k.toString(), v);
     });
 };
+/**
+ * Removes event listeners from a html element.
+ * @param node The element to remove the listeners from.
+ * @param listeners The listeners to be removed.
+ */
 export const removeEventListeners = (node, listeners) => {
     Object.entries(listeners).forEach(([k, v]) => {
         node.removeEventListener(k.toString(), v);
     });
 };
+/**
+ * Disables the browser scroll bar/functionality if any overlaying element requires focus.
+ */
 export const disableScroll = (state) => {
-    if (typeof window !== 'undefined') {
+    if (isBrowser) {
         if (state) {
             document.documentElement.style.setProperty('--scrollbar-width', '0px');
             document.body.style.setProperty('overflow', 'hidden');

package/dist/internal/helpers/is.d.ts

@@ -1 +1,4 @@
+/**
+ * Checks if the given runtime is the browser.
+ */
 export declare const isBrowser: boolean;

package/dist/internal/helpers/is.js

@@ -1 +1,4 @@
+/**
+ * Checks if the given runtime is the browser.
+ */
 export const isBrowser = typeof window !== 'undefined';

package/dist/internal/helpers/log.d.ts

@@ -0,0 +1,3 @@
+export declare const log: {
+    error(message: string): never;
+};

package/dist/internal/helpers/log.js

@@ -0,0 +1,5 @@
+export const log = {
+    error(message) {
+        throw Error(`[Lithesome] ${message}`);
+    }
+};

package/dist/internal/helpers/utils.svelte.d.ts

@@ -0,0 +1,34 @@
+import type { JsonValue, ClassProp } from '../types.js';
+export type CalcIndexAction = 'prev' | 'next' | 'first' | 'last';
+/**
+ * Calculates the index position of the action given.
+ * @param action Which direction to navigate the index.
+ * @param items The items to be navigated through.
+ * @param index The current index of the component state.
+ * @param loop Loops around the items array if true.
+ */
+export declare const calculateIndex: <T>(action: CalcIndexAction, items: T[] | readonly T[], index: number, loop?: boolean) => number;
+export type UID = (component?: string) => string;
+/**
+ * Creates a unique ID to be used for accessability.
+ */
+export declare const createUID: (namespace: string) => {
+    uid: (component?: string) => string;
+};
+/**
+ * Removes any "invalid" values from the given value.
+ * @param value The value to be pruned.
+ */
+export declare const pruneValue: (value: JsonValue) => string | number | true | JsonValue[] | undefined;
+/**
+ * Merges two objects, the first being the base config, the 2nd being the defaults
+ * it will fall back to if that property isn't found.
+ * @param config The base object to be parsed.
+ * @param defaults The object to be initalize the object.
+ */
+export declare const defaultConfig: <const T>(config: Partial<T> | undefined, defaults: Required<T>) => Required<T>;
+/**
+ * @param klass The `class` component prop.
+ * @param props Any state to be passed down to the function.
+ */
+export declare const classProp: <T extends Record<string, any>>(klass: ClassProp<T>, props?: T) => string | null | undefined;

package/dist/internal/helpers/{utils.js → utils.svelte.js}

@@ -1,3 +1,10 @@
+/**
+ * Calculates the index position of the action given.
+ * @param action Which direction to navigate the index.
+ * @param items The items to be navigated through.
+ * @param index The current index of the component state.
+ * @param loop Loops around the items array if true.
+ */
 export const calculateIndex = (action, items, index, loop = false) => {
     if (action === 'first')
         index = 0;
@@ -33,11 +40,10 @@ export const createUID = (namespace) => {
         }
     };
 };
-export const log = {
-    error(message) {
-        throw Error(`[Lithesome] ${message}`);
-    }
-};
+/**
+ * Removes any "invalid" values from the given value.
+ * @param value The value to be pruned.
+ */
 export const pruneValue = (value) => {
     if (!value)
         return;
@@ -50,9 +56,24 @@ export const pruneValue = (value) => {
     else
         return value.trim();
 };
+/**
+ * Merges two objects, the first being the base config, the 2nd being the defaults
+ * it will fall back to if that property isn't found.
+ * @param config The base object to be parsed.
+ * @param defaults The object to be initalize the object.
+ */
 export const defaultConfig = (config, defaults) => {
     return {
         ...defaults,
         ...config
     };
 };
+/**
+ * @param klass The `class` component prop.
+ * @param props Any state to be passed down to the function.
+ */
+export const classProp = (klass, props) => {
+    const _props = props || {};
+    const cls = $derived(typeof klass === 'function' ? klass(_props) : klass);
+    return cls;
+};

package/dist/internal/index.d.ts

@@ -3,9 +3,10 @@ export * from './actions/clickOutside.js';
 export * from './actions/portal.js';
 export * from './actions/action.js';
 export * from './actions/focusTrap.js';
-export * from './helpers/utils.js';
+export * from './helpers/utils.svelte.js';
 export * from './helpers/is.js';
 export * from './helpers/keyboard.js';
 export * from './helpers/element.js';
 export * from './helpers/transition.js';
 export * from './helpers/anchor.js';
+export * from './helpers/log.js';

package/dist/internal/index.js

@@ -3,9 +3,10 @@ export * from './actions/clickOutside.js';
 export * from './actions/portal.js';
 export * from './actions/action.js';
 export * from './actions/focusTrap.js';
-export * from './helpers/utils.js';
+export * from './helpers/utils.svelte.js';
 export * from './helpers/is.js';
 export * from './helpers/keyboard.js';
 export * from './helpers/element.js';
 export * from './helpers/transition.js';
 export * from './helpers/anchor.js';
+export * from './helpers/log.js';

package/package.json

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

package/dist/internal/helpers/utils.d.ts

@@ -1,15 +0,0 @@
-import type { JsonValue } from '../types.js';
-export type CalcIndexAction = 'prev' | 'next' | 'first' | 'last';
-export declare const calculateIndex: <T>(action: CalcIndexAction, items: T[] | readonly T[], index: number, loop?: boolean) => number;
-export type UID = (component?: string) => string;
-/**
- * Creates a unique ID to be used for accessability.
- */
-export declare const createUID: (namespace: string) => {
-    uid: (component?: string) => string;
-};
-export declare const log: {
-    error(message: string): never;
-};
-export declare const pruneValue: (value: JsonValue) => string | number | true | JsonValue[] | undefined;
-export declare const defaultConfig: <const T>(config: Partial<T> | undefined, defaults: Required<T>) => Required<T>;