lithesome 0.2.4 → 0.3.0

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();
+let { children, use = [], class: klass, self = $bindable(), 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();
+let { children, class: klass, use = [], self = $bindable(), 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();
+let { children, class: klass, use = [], self = $bindable(), 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";
-let { children, class: klass, use = [], level = 3, self, ...props } = $props();
-const classProp = $derived(typeof klass === "function" ? klass({}) : klass);
+<script>import { useActions, classProp } from "../../internal/index.js";
+let { children, class: klass, use = [], level = 3, self = $bindable(), ...props } = $props();
 </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,7 +1,7 @@
 <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();
+let { children, class: klass, use = [], self = $bindable(), disabled = false, ...props } = $props();
 const API = context();
 const { uid } = createUID("item");
 onMount(() => {
@@ -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,18 +1,20 @@
 <script context="module"></script>
 
-<script>import { useActions } from "../../internal/index.js";
+<script>import {
+  useActions,
+  classProp
+} from "../../internal/index.js";
 let {
   children,
   class: klass,
   use = [],
-  self,
-  checked = false,
+  self = $bindable(),
+  checked = $bindable(false),
   required = false,
   disabled = false,
   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/Checkbox/Checkbox.svelte.d.ts

@@ -22,6 +22,7 @@ declare const __propDef: {
         contextmenu?: string | null | undefined;
         dir?: string | null | undefined;
         draggable?: import("svelte/elements").Booleanish | null | undefined;
+        elementtiming?: string | null | undefined;
         enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | null | undefined;
         hidden?: boolean | null | undefined;
         id?: string | null | undefined;

package/dist/components/Combobox/Combobox.svelte

@@ -0,0 +1,55 @@
+<script context="module">import { getContext, onMount, tick } from "svelte";
+import { createContext } from "./context.svelte.js";
+const contextName = "combobox-context";
+export const context = () => getContext(contextName);
+</script>
+
+<script generics="ValueType">import { createUID, useActions, classProp } from "../../internal/index.js";
+import { setContext } from "svelte";
+let {
+  children,
+  use = [],
+  class: klass,
+  value = $bindable(),
+  label = $bindable(),
+  touched = $bindable(),
+  self = $bindable(),
+  onChange,
+  ...props
+} = $props();
+const { uid } = createUID("combobox");
+const multiple = Array.isArray(value);
+const API = createContext(uid, multiple, {
+  onChange({ newValue, newTouched, newLabel }) {
+    if (newValue) {
+      value = newValue;
+      onChange?.({ value: newValue });
+    }
+    if (newLabel && !multiple) {
+      label = newLabel;
+      onChange?.({ label: newLabel });
+    }
+    if (typeof newTouched === "boolean")
+      touched = newTouched;
+  }
+});
+setContext(contextName, API);
+onMount(async () => {
+  await tick();
+  API.setInitialSelected(value);
+  API.close();
+  API.setMounted(true);
+});
+</script>
+
+<div
+	bind:this={self}
+	use:useActions={use}
+	id={uid()}
+	class={classProp(klass, { visible: API.visible && API.mounted })}
+	data-select=""
+	data-state={API.visible && API.mounted ? 'opened' : 'closed'}
+	{...props}
+>
+	{@render children({ visible: API.visible && API.mounted })}
+</div>

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

@@ -0,0 +1,50 @@
+import { SvelteComponent } from "svelte";
+export declare const context: () => {
+    visible: boolean;
+    hoveredIndex: number;
+    options: HTMLElement[];
+    touched: HTMLElement[];
+    dropdown: HTMLElement | null;
+    mounted: boolean;
+    selectedOptions: HTMLElement[];
+    hoveredOption: HTMLElement;
+    trigger: HTMLInputElement | null;
+    multiple: boolean;
+    open(): void;
+    close(): void;
+    toggle(): void;
+    queryElements(): void;
+    navigateOptions(action: import("../../internal/index.js").CalcIndexAction): void;
+    setHoveredOption(optionId?: string | undefined): void;
+    setSelectedOptions(): void;
+    setInitialSelected(value: unknown): Promise<void>;
+    setTrigger(node: HTMLInputElement): void;
+    setDropdown(node: HTMLElement): void;
+    setMounted(value: boolean): void;
+    setTouched(value: boolean): void;
+    uid: import("../../internal/index.js").UID;
+};
+import { type BaseProps } from '../../internal/index.js';
+declare class __sveltets_Render<ValueType> {
+    props(): BaseProps<HTMLDivElement, {
+        visible: boolean;
+    }> & {
+        value: ValueType;
+        label?: string | undefined;
+        touched?: boolean | undefined;
+        onChange?: ((payload?: {
+            value?: ValueType | undefined;
+            label?: string | undefined;
+        } | undefined) => void) | undefined;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+}
+export type ComboboxProps<ValueType> = ReturnType<__sveltets_Render<ValueType>['props']>;
+export type ComboboxEvents<ValueType> = ReturnType<__sveltets_Render<ValueType>['events']>;
+export type ComboboxSlots<ValueType> = ReturnType<__sveltets_Render<ValueType>['slots']>;
+export default class Combobox<ValueType> extends SvelteComponent<ComboboxProps<ValueType>, ComboboxEvents<ValueType>, ComboboxSlots<ValueType>> {
+}
+export {};

package/dist/components/Combobox/ComboboxDropdown.svelte

@@ -0,0 +1,83 @@
+<script>import { context } from "./Combobox.svelte";
+import {
+  clickOutside,
+  anchorElement,
+  portal,
+  useActions,
+  getTransition,
+  classProp
+} from "../../internal/index.js";
+import { log } from "../../internal/index.js";
+import { onMount } from "svelte";
+let {
+  children,
+  transition,
+  use = [],
+  portalTarget = "body",
+  sameWidth = false,
+  class: klass,
+  self = $bindable(),
+  placement = "bottom",
+  constrainViewport = false,
+  ...props
+} = $props();
+const API = context();
+let dropdownCleanup = $state(void 0);
+const _transition = getTransition(transition);
+const attrs = $derived({
+  id: API.uid("dropdown"),
+  "aria-labelledby": API.uid("trigger"),
+  role: "listbox",
+  class: classProp(klass, { visible: API.visible }),
+  "data-comboboxdropdown": "",
+  hidden: !API.mounted || void 0
+});
+onMount(() => {
+  if (!API)
+    log.error("<ComboboxDropdown> Must be a direct child of <Combobox />");
+});
+$effect(() => {
+  if (API.visible && self)
+    API.setDropdown(self);
+});
+$effect(() => {
+  if (API.visible && API.trigger && API.dropdown) {
+    dropdownCleanup = anchorElement(API.trigger, API.dropdown, {
+      placement,
+      constrainViewport,
+      sameWidth
+    });
+  }
+  return () => {
+    dropdownCleanup?.();
+  };
+});
+</script>
+
+{#if _transition}
+	{#if API.visible}
+		<div
+			bind:this={self}
+			use:clickOutside={{ exclude: [API.trigger], callback: API.close }}
+			use:portal={portalTarget}
+			use:useActions={use}
+			in:_transition.in.fn={_transition.in.params}
+			out:_transition.out.fn={_transition.out.params}
+			{...attrs}
+			{...props}
+		>
+			{@render children({ visible: API.visible })}
+		</div>
+	{/if}
+{:else if API.visible}
+	<div
+		bind:this={self}
+		use:clickOutside={{ exclude: [API.trigger], callback: API.close }}
+		use:portal={portalTarget}
+		use:useActions={use}
+		{...attrs}
+		{...props}
+	>
+		{@render children({ visible: API.visible })}
+	</div>
+{/if}

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

@@ -0,0 +1,33 @@
+import { SvelteComponent } from "svelte";
+import { type Transition, type BaseProps } from '../../internal/index.js';
+import type { Placement } from '@floating-ui/dom';
+declare const __propDef: {
+    props: BaseProps<HTMLDivElement, {
+        visible: boolean;
+    }> & {
+        /**
+         * The `svelte/transtion` you wish to use.
+         *
+         * @see https://lithesome.dev/docs/api#transition-prop
+         */
+        transition?: Transition | undefined;
+        /** The element to portal the dropdown menu to. */
+        portalTarget?: string | HTMLElement | undefined;
+        /** The anchor point of the dropdown relative to the trigger. */
+        placement?: Placement | undefined;
+        /** Keeps the dropdown from ever growing outside of the viewport. */
+        constrainViewport?: boolean | undefined;
+        /** Makes the dropdown the same width as the trigger. */
+        sameWidth?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ComboboxDropdownProps = typeof __propDef.props;
+export type ComboboxDropdownEvents = typeof __propDef.events;
+export type ComboboxDropdownSlots = typeof __propDef.slots;
+export default class ComboboxDropdown extends SvelteComponent<ComboboxDropdownProps, ComboboxDropdownEvents, ComboboxDropdownSlots> {
+}
+export {};

package/dist/components/Combobox/ComboboxInput.svelte

@@ -0,0 +1,82 @@
+<script>import { context } from "./Combobox.svelte";
+import {
+  useActions,
+  classProp,
+  PREVENT_KEYS,
+  KEYS
+} from "../../internal/index.js";
+import { onMount } from "svelte";
+let {
+  class: klass,
+  use = [],
+  value = $bindable(),
+  self = $bindable(),
+  disabled,
+  onClick,
+  onFocus,
+  onKeydown,
+  ...props
+} = $props();
+const API = context();
+onMount(() => {
+  if (!API || !self)
+    return;
+  API.setTrigger(self);
+});
+const handleClick = (e) => {
+  onClick?.(e);
+  if (disabled)
+    return;
+  API.toggle();
+};
+const handleKeydown = (e) => {
+  onKeydown?.(e);
+  if (disabled)
+    return;
+  const { key } = e;
+  if (!PREVENT_KEYS.includes(key)) {
+    API.setTouched(true);
+    if (!API.visible)
+      API.open();
+  }
+  if (key === KEYS.arrowUp || key === KEYS.arrowDown || key === KEYS.end || key === KEYS.home) {
+    e.preventDefault();
+    if (!API.visible)
+      API.open();
+  }
+  if (key === KEYS.home)
+    API.navigateOptions("first");
+  if (key === KEYS.end)
+    API.navigateOptions("last");
+  if (key === KEYS.arrowUp)
+    API.navigateOptions("prev");
+  if (key === KEYS.arrowDown)
+    API.navigateOptions("next");
+  if (key === KEYS.escape)
+    API.close();
+  if (key === KEYS.enter) {
+    e.preventDefault();
+    if (API.hoveredOption && API.visible) {
+      document.querySelector(`#${API.hoveredOption.id}`).click();
+      if (!API.multiple)
+        API.close();
+    } else {
+      API.open();
+    }
+  }
+  if (key === "Tab")
+    API.close();
+};
+</script>
+
+<input
+	type="text"
+	bind:this={self}
+	use:useActions={use}
+	id={API.uid('input')}
+	class={classProp(klass, { visible: API.visible })}
+	onclick={handleClick}
+	onkeydown={handleKeydown}
+	bind:value
+	{...props}
+/>

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

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import { type BasePropsNoChildren, type Handler } from '../../internal/index.js';
+declare const __propDef: {
+    props: BasePropsNoChildren<HTMLInputElement, {
+        visible: boolean;
+    }> & {
+        value: string;
+        disabled?: boolean | undefined;
+        onClick?: Handler<MouseEvent, HTMLInputElement> | undefined;
+        onFocus?: Handler<FocusEvent, HTMLInputElement> | undefined;
+        onKeydown?: Handler<KeyboardEvent, HTMLInputElement> | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ComboboxInputProps = typeof __propDef.props;
+export type ComboboxInputEvents = typeof __propDef.events;
+export type ComboboxInputSlots = typeof __propDef.slots;
+export default class ComboboxInput extends SvelteComponent<ComboboxInputProps, ComboboxInputEvents, ComboboxInputSlots> {
+}
+export {};

package/dist/components/Combobox/ComboboxOption.svelte

@@ -0,0 +1,75 @@
+<script>import { context } from "./Combobox.svelte";
+import {
+  useActions,
+  classProp,
+  isBrowser
+} from "../../internal/index.js";
+import { createUID } from "../../internal/index.js";
+import { onMount, tick } from "svelte";
+let {
+  children,
+  class: klass,
+  use = [],
+  value,
+  label: labelProp,
+  self = $bindable(),
+  disabled,
+  onClick,
+  onFocus,
+  onMouseenter,
+  ...props
+} = $props();
+let optionEl;
+const API = context();
+const { uid } = createUID("item");
+const hovered = $derived(API.hoveredOption?.id === uid());
+const selected = $derived(!!API.selectedOptions.find((el) => el.dataset.value === value));
+const label = $derived(labelProp || isBrowser && self ? self?.textContent?.trim() : "");
+const handleClick = (e) => {
+  onClick?.(e);
+  if (!disabled) {
+    API.setSelectedOptions();
+  }
+};
+const handleFocus = (e) => {
+  onFocus?.(e);
+};
+const handleMouseover = (e) => {
+  onMouseenter?.(e);
+  if (!disabled)
+    API.setHoveredOption(uid());
+};
+onMount(() => {
+  API.queryElements();
+  return async () => {
+    if (!API.visible)
+      return;
+    await tick();
+    API.queryElements();
+  };
+});
+</script>
+
+<button
+	bind:this={self}
+	bind:this={optionEl}
+	use:useActions={use}
+	id={uid()}
+	class={classProp(klass, { hovered, selected })}
+	type="button"
+	{disabled}
+	role="option"
+	tabindex="0"
+	aria-selected={selected}
+	data-hovered={hovered ? '' : undefined}
+	data-selected={selected ? '' : undefined}
+	data-comboboxoption=""
+	data-value={value}
+	data-label={label}
+	onmouseover={handleMouseover}
+	onfocus={handleFocus}
+	onclick={handleClick}
+	{...props}
+>
+	{@render children({ hovered, selected })}
+</button>

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

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+import { type BaseProps, type JsonValue, type Handler } from '../../internal/index.js';
+declare const __propDef: {
+    props: BaseProps<HTMLButtonElement | HTMLAnchorElement, {
+        hovered: boolean;
+        selected: boolean;
+    }> & {
+        value: JsonValue;
+        disabled?: boolean | undefined;
+        label?: string | undefined;
+        onClick?: Handler<MouseEvent, HTMLButtonElement | HTMLAnchorElement> | undefined;
+        onFocus?: Handler<FocusEvent, HTMLButtonElement | HTMLAnchorElement> | undefined;
+        onMouseenter?: Handler<MouseEvent, HTMLButtonElement | HTMLAnchorElement> | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ComboboxOptionProps = typeof __propDef.props;
+export type ComboboxOptionEvents = typeof __propDef.events;
+export type ComboboxOptionSlots = typeof __propDef.slots;
+export default class ComboboxOption extends SvelteComponent<ComboboxOptionProps, ComboboxOptionEvents, ComboboxOptionSlots> {
+}
+export {};

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

@@ -0,0 +1,40 @@
+import { type CalcIndexAction, type UID, type JsonValue } from '../../internal/index.js';
+export interface Option {
+    value: JsonValue;
+    label: string;
+    id: string;
+    disabled?: boolean;
+}
+interface Hooks<ValueType> {
+    onChange: (values: {
+        newValue?: ValueType;
+        newTouched?: boolean;
+        newLabel?: string;
+    }) => void;
+}
+export declare const createContext: <ValueType>(uid: UID, multiple: boolean | undefined, hooks: Hooks<ValueType>) => {
+    visible: boolean;
+    hoveredIndex: number;
+    options: HTMLElement[];
+    touched: HTMLElement[];
+    dropdown: HTMLElement | null;
+    mounted: boolean;
+    selectedOptions: HTMLElement[];
+    hoveredOption: HTMLElement;
+    trigger: HTMLInputElement | null;
+    multiple: boolean;
+    open(): void;
+    close(): void;
+    toggle(): void;
+    queryElements(): void;
+    navigateOptions(action: CalcIndexAction): void;
+    setHoveredOption(optionId?: string): void;
+    setSelectedOptions(): void;
+    setInitialSelected(value: ValueType): Promise<void>;
+    setTrigger(node: HTMLInputElement): void;
+    setDropdown(node: HTMLElement): void;
+    setMounted(value: boolean): void;
+    setTouched(value: boolean): void;
+    uid: UID;
+};
+export {};