lithesome 0.12.3 → 0.13.0

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

@@ -1,4 +1,4 @@
-import type { Handler, PropsMaybeChildren } from '../../internal/types.js';
+import type { Handler, PropsMaybeChildren } from '../../index.js/internal/types.js';
 export type Checked = boolean | 'mixed';
 interface CheckboxState {
     /** If the checkbox is checked or not. */

package/dist/components/Combobox/ComboboxOption.svelte

@@ -12,7 +12,7 @@ let {
   disabled = $bindable(false),
   onClick,
   onFocus,
-  onMouseenter,
+  onMouseover,
   ...props
 } = $props();
 let optionEl;
@@ -31,7 +31,7 @@ const handleFocus = (e) => {
   onFocus?.(e);
 };
 const handleMouseover = (e) => {
-  onMouseenter?.(e);
+  onMouseover?.(e);
   if (!disabled)
     ctx.setHovered(uid());
 };

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

@@ -1,4 +1,4 @@
-import type { Props, PropsNoChildren, ContentProps, Handler, JsonValue } from '../../internal/types.js';
+import type { Props, PropsNoChildren, ContentProps, Handler, JsonValue } from '../../index.js/internal/types.js';
 export type ComboboxElement = HTMLAnchorElement | HTMLButtonElement;
 interface ComboboxState {
     /** Whether or not the content is opened or not. */
@@ -48,6 +48,6 @@ export interface ComboboxOptionProps extends Props<ComboboxElement, ComboboxOpti
     label?: string;
     onClick?: Handler<MouseEvent, ComboboxElement>;
     onFocus?: Handler<FocusEvent, ComboboxElement>;
-    onMouseenter?: Handler<MouseEvent, ComboboxElement>;
+    onMouseover?: Handler<MouseEvent, ComboboxElement>;
 }
 export {};

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

@@ -1,4 +1,4 @@
-import type { Props, PropsNoChildren, ContentProps, Handler } from '../../internal/types.js';
+import type { Props, PropsNoChildren, ContentProps, Handler } from '../../index.js/internal/types.js';
 interface HovercardState {
     /** Whether or not the content is opened or not. */
     visible: boolean;

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

@@ -1,5 +1,5 @@
-import type { Props, PropsNoChildren, ContentProps, Handler } from '../../internal/types.js';
-export type MenuItemElement = HTMLButtonElement | HTMLAnchorElement;
+import type { Props, PropsNoChildren, ContentProps, Handler } from '../../index.js/internal/types.js';
+type MenuItemElement = HTMLButtonElement | HTMLAnchorElement;
 interface MenuState {
     /** Whether or not the content is opened or not. */
     visible: boolean;

package/dist/components/Modal/Modal.svelte

@@ -4,7 +4,7 @@ export const { context, contextName } = setupContext();
 </script>
 
 <script lang="ts">import { createUID, useActions, KEYS, classProp } from "../../internal/index.js";
-import { usePortal } from "../../index.js";
+import { usePortal } from "../../index.js/index.js";
 import { setContext } from "svelte";
 let {
   children,

package/dist/components/Modal/ModalContent.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { useActions, getTransition, classProp } from "../../internal/index.js";
-import { useTrap } from "../../index.js";
+import { useTrap } from "../../index.js/index.js";
 import { context } from "./Modal.svelte";
 let { children, class: klass, use = [], self = $bindable(), transition, ...props } = $props();
 const ctx = context();

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

@@ -1,5 +1,5 @@
 import type { Transition } from '../../internal/index.js';
-import type { Props, PropsNoChildren } from '../../internal/types.js';
+import type { Props, PropsNoChildren } from '../../index.js/internal/types.js';
 export interface ModalProps extends Props<HTMLDivElement> {
     /** Control the visibility of the modal. */
     visible: boolean;

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

@@ -1,4 +1,4 @@
-import type { Props, PropsNoChildren, Handler } from '../../internal/types.js';
+import type { Props, PropsNoChildren, Handler } from '../../index.js/internal/types.js';
 interface PinState {
     /** True if all inputs are filled out. */
     filled: boolean;

package/dist/components/Popover/PopoverContent.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { context } from "./Popover.svelte";
 import { FloatingContent } from "../../internal/index.js";
-import { useTrap } from "../../index.js";
+import { useTrap } from "../../index.js/index.js";
 let {
   children,
   transition,

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

@@ -1,4 +1,4 @@
-import type { Props, PropsNoChildren, ContentProps } from '../../internal/types.js';
+import type { Props, PropsNoChildren, ContentProps } from '../../index.js/internal/types.js';
 interface PopoverState {
     /** Whether or not the content is opened or not. */
     visible: boolean;

package/dist/components/Portal/Portal.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { useActions, classProp } from "../../internal/index.js";
-import { usePortal } from "../../index.js";
+import { usePortal } from "../../index.js/index.js";
 let {
   children,
   use = [],

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

@@ -1,4 +1,4 @@
-import type { Props } from '../../internal/types.js';
+import type { Props } from '../../index.js/internal/types.js';
 export interface PortalProps extends Props<HTMLDivElement> {
     /**
      * The element to mount the children content.

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

@@ -1,4 +1,4 @@
-import type { Props, Handler, JsonValue } from '../../internal/types.js';
+import type { Props, Handler, JsonValue } from '../../index.js/internal/types.js';
 export interface RadioGroupProps extends Props<HTMLDivElement> {
     /** The value of the radiogroup. */
     value: JsonValue;

package/dist/components/Select/SelectOption.svelte

@@ -12,7 +12,7 @@ let {
   disabled = $bindable(false),
   onClick,
   onFocus,
-  onMouseenter,
+  onMouseover,
   ...props
 } = $props();
 let optionEl;
@@ -31,7 +31,7 @@ const handleFocus = (e) => {
   onFocus?.(e);
 };
 const handleMouseover = (e) => {
-  onMouseenter?.(e);
+  onMouseover?.(e);
   if (!disabled)
     ctx.setHovered(uid());
 };

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

@@ -1,4 +1,4 @@
-import type { Props, PropsNoChildren, ContentProps, Handler, JsonValue } from '../../internal/types.js';
+import type { Props, PropsNoChildren, ContentProps, Handler, JsonValue } from '../../index.js/internal/types.js';
 interface SelectState {
     /** Whether or not the content is opened or not. */
     visible: boolean;
@@ -31,11 +31,14 @@ export interface SelectOptionProps extends Props<HTMLButtonElement, SelectOption
     label?: string;
     onClick?: Handler<MouseEvent, HTMLButtonElement>;
     onFocus?: Handler<FocusEvent, HTMLButtonElement>;
-    onMouseenter?: Handler<MouseEvent, HTMLButtonElement>;
+    onMouseover?: Handler<MouseEvent, HTMLButtonElement>;
 }
 export interface SelectTriggerProps extends Props<HTMLDivElement, SelectState> {
 }
-export interface SelectValueProps extends PropsNoChildren<HTMLSpanElement> {
+interface SelectValueState {
+    placeholderVisible: boolean;
+}
+export interface SelectValueProps extends PropsNoChildren<HTMLSpanElement, SelectValueState> {
     /** The fallback value of no option is selected. */
     placeholder?: string;
 }

package/dist/components/Slider/Slider.svelte

@@ -0,0 +1,106 @@
+<script lang="ts" context="module">import { clamp, setupContext } from "../../internal/index.js";
+import { SliderContext } from "./context.svelte.js";
+export const { context, contextName } = setupContext();
+</script>
+
+<script lang="ts">import { useActions, classProp } from "../../internal/index.js";
+import { setContext } from "svelte";
+let {
+  children,
+  use = [],
+  class: klass,
+  self = $bindable(),
+  min = $bindable(0),
+  max = $bindable(100),
+  step = $bindable(1),
+  value = $bindable(50),
+  orientation = $bindable("horizontal"),
+  reverse = $bindable(false),
+  disabled = $bindable(false),
+  onMousedown,
+  onClick,
+  ...props
+} = $props();
+const ctx = new SliderContext(
+  { min, max, step, value, orientation, reverse, disabled },
+  {
+    onChange(val) {
+      value = val;
+    }
+  }
+);
+const state = $derived({
+  value: ctx.value,
+  percentage: ctx.Percentage
+});
+setContext(contextName, ctx);
+const calculateValue = (e) => {
+  if (!ctx.dragging || !ctx.trackElement)
+    return;
+  const { clientX, clientY } = e;
+  const { width, height, left, right, top, bottom } = ctx.trackElement.getBoundingClientRect();
+  const position = ctx.orientation === "horizontal" ? clientX : clientY;
+  const length = ctx.orientation === "horizontal" ? width : height;
+  const start = ctx.orientation === "horizontal" ? ctx.reverse ? right : left : ctx.reverse ? top : bottom;
+  ctx.value = clamp(
+    ctx.min,
+    Math.round(
+      (max - min) * ((position - start) / length) * (ctx.reverse ? -1 : 1) * (ctx.orientation === "vertical" ? -1 : 1) / step
+    ) * step,
+    ctx.max
+  );
+};
+const loseFocus = (e) => {
+  const target = e.target;
+  if (target !== ctx.trackElement || ctx.thumbElement && !target.contains(ctx.thumbElement))
+    ctx.dragging = false;
+};
+const handleMousedown = (e) => {
+  onMousedown?.(e);
+  if (disabled)
+    return;
+  ctx.dragging = true;
+};
+const handleClick = (e) => {
+  onClick?.(e);
+  if (disabled)
+    return;
+  e.preventDefault();
+  ctx.dragging = true;
+  calculateValue(e);
+  ctx.dragging = false;
+};
+$effect(() => {
+  ctx.trackElement = self;
+  if (disabled || !ctx.trackElement)
+    return;
+  document.addEventListener("mousemove", calculateValue);
+  document.addEventListener("mouseup", loseFocus);
+  return () => {
+    document.removeEventListener("mousemove", calculateValue);
+    document.removeEventListener("mouseup", loseFocus);
+  };
+});
+$effect(() => {
+  ctx.updateProps({ min, max, disabled, orientation, reverse, step, value });
+});
+</script>
+
+<div
+	bind:this={self}
+	use:useActions={use}
+	id={ctx.uid()}
+	class={classProp(klass, state)}
+	tabindex="-1"
+	role="none"
+	data-slider=""
+	data-value={ctx.value}
+	data-percentage={ctx.Percentage}
+	data-reversed={ctx.reverse || undefined}
+	data-orientation={ctx.orientation}
+	onmousedown={handleMousedown}
+	onclick={handleClick}
+	{...props}
+>
+	{@render children(state)}
+</div>

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

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import { SliderContext } from './context.svelte.js';
+export declare const context: () => SliderContext, contextName: string;
+import type { SliderProps } from './types.js';
+declare const __propDef: {
+    props: SliderProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type SliderProps_ = typeof __propDef.props;
+export { SliderProps_ as SliderProps };
+export type SliderEvents = typeof __propDef.events;
+export type SliderSlots = typeof __propDef.slots;
+export default class Slider extends SvelteComponent<SliderProps_, SliderEvents, SliderSlots> {
+}

package/dist/components/Slider/SliderRange.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">import { classProp, useActions } from "../../internal/index.js";
+import { context } from "./Slider.svelte";
+let { use = [], class: klass, self = $bindable(), ...props } = $props();
+const ctx = context();
+const styles = $derived.by(() => {
+  const perc = `${ctx.Percentage}%`;
+  let obj = {};
+  if (ctx.orientation === "horizontal") {
+    obj = ctx.reverse ? { width: perc, right: "0" } : { width: perc, left: "0" };
+  } else if (ctx.orientation === "vertical") {
+    obj = ctx.reverse ? { height: perc, top: "0" } : { height: perc, bottom: "0" };
+  }
+  return Object.entries(obj).map(([k, v]) => `${k}:${v}`).join(";");
+});
+</script>
+
+<div
+	bind:this={self}
+	use:useActions={use}
+	id={ctx.uid('range')}
+	class={classProp(klass, { value: ctx.value, percentage: ctx.Percentage })}
+	tabindex="-1"
+	role="none"
+	data-slider=""
+	data-value={ctx.value}
+	data-percentage={ctx.Percentage}
+	data-reversed={ctx.reverse || undefined}
+	data-orientation={ctx.orientation}
+	style="position: absolute; {styles}"
+	{...props}
+></div>

package/dist/components/Slider/SliderRange.svelte.d.ts

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

package/dist/components/Slider/SliderThumb.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">import { ALL_ARROW_KEYS, KEYS, classProp, useActions } from "../../internal/index.js";
+import { context } from "./Slider.svelte";
+let { use = [], class: klass, self = $bindable(), onMousedown, onKeydown, ...props } = $props();
+const ctx = context();
+$effect(() => {
+  ctx.thumbElement = self;
+});
+const handleMousedown = (e) => {
+  onMousedown?.(e);
+  if (ctx.disabled)
+    return;
+  e.preventDefault();
+};
+const handleKeydown = (e) => {
+  onKeydown?.(e);
+  if (ctx.disabled)
+    return;
+  const { key } = e;
+  if (ALL_ARROW_KEYS.includes(key))
+    e.preventDefault();
+  if (key === KEYS.arrowRight || key === KEYS.arrowUp) {
+    if (ctx.reverse)
+      ctx.stepDown();
+    else
+      ctx.stepUp();
+  }
+  if (key === KEYS.arrowLeft || key === KEYS.arrowDown) {
+    if (ctx.reverse)
+      ctx.stepUp();
+    else
+      ctx.stepDown();
+  }
+};
+const styles = $derived.by(() => {
+  const perc = `${ctx.Percentage}%`;
+  let translate = "";
+  let obj = {};
+  if (ctx.orientation === "horizontal") {
+    obj = ctx.reverse ? { right: perc } : { left: perc };
+    translate = ctx.reverse ? "50%" : "-50%";
+  } else if (ctx.orientation === "vertical") {
+    obj = ctx.reverse ? { top: perc } : { bottom: perc };
+    translate = ctx.reverse ? "0 -50%" : "0 50%";
+  }
+  obj = { ...obj, translate };
+  return Object.entries(obj).map(([k, v]) => `${k}:${v}`).join(";");
+});
+</script>
+
+<div
+	bind:this={self}
+	use:useActions={use}
+	id={ctx.uid('thumb')}
+	class={classProp(klass, { value: ctx.value, percentage: ctx.Percentage })}
+	role="slider"
+	tabindex="0"
+	aria-valuenow={ctx.value}
+	aria-valuemin={ctx.min}
+	aria-valuemax={ctx.max}
+	data-sliderthumb=""
+	onmousedown={handleMousedown}
+	onkeydown={handleKeydown}
+	style="position: absolute; {styles}"
+	{...props}
+></div>

package/dist/components/Slider/SliderThumb.svelte.d.ts

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

package/dist/components/Slider/SliderValue.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">import { classProp, useActions } from "../../internal/index.js";
+import { context } from "./Slider.svelte";
+let { use = [], class: klass, self = $bindable(), ...props } = $props();
+const ctx = context();
+</script>
+
+<input
+	type="range"
+	bind:this={self}
+	use:useActions={use}
+	id={ctx.uid('value')}
+	class={classProp(klass, { value: ctx.value, percentage: ctx.Percentage })}
+	min={ctx.min}
+	max={ctx.max}
+	step={ctx.step}
+	bind:value={ctx.value}
+	aria-hidden="false"
+	data-slidervalue=""
+	style="display: none"
+	{...props}
+/>

package/dist/components/Slider/SliderValue.svelte.d.ts

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

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

@@ -0,0 +1,32 @@
+import { Context } from '../../internal/index.js';
+interface Init {
+    value: number;
+    min: number;
+    max: number;
+    step: number;
+    orientation: 'horizontal' | 'vertical';
+    reverse: boolean;
+    disabled: boolean;
+}
+interface Hooks {
+    onChange: (value: number) => void;
+}
+export declare class SliderContext extends Context<Hooks> {
+    #private;
+    min: number;
+    max: number;
+    step: number;
+    value: number;
+    orientation: "horizontal" | "vertical";
+    reverse: boolean;
+    disabled: boolean;
+    dragging: boolean;
+    Percentage: number;
+    trackElement: HTMLDivElement | undefined;
+    thumbElement: HTMLDivElement | undefined;
+    constructor(init: Init, hooks: Hooks);
+    stepUp(): void;
+    stepDown(): void;
+    updateProps(props: Init): void;
+}
+export {};

package/dist/components/Slider/context.svelte.js

@@ -0,0 +1,45 @@
+import { Context, clamp, effects } from '../../internal/index.js';
+export class SliderContext extends Context {
+    min = $state(0);
+    max = $state(100);
+    step = $state(1);
+    value = $state(0);
+    orientation = $state('horizontal');
+    reverse = $state(false);
+    disabled = $state(false);
+    dragging = $state(false);
+    Percentage = $derived(Math.round(((this.value - this.min) / (this.max - this.min)) * 100));
+    trackElement = $state(undefined);
+    thumbElement = $state(undefined);
+    constructor(init, hooks) {
+        super('slider');
+        this.hooks = hooks;
+        this.min = init.min;
+        this.value = init.value;
+        this.max = init.max;
+        this.step = init.step;
+        this.orientation = init.orientation;
+        this.reverse = init.reverse;
+        this.disabled = init.disabled;
+    }
+    stepUp() {
+        this.value = clamp(this.min, (this.value += this.step), this.max);
+    }
+    stepDown() {
+        this.value = clamp(this.min, (this.value -= this.step), this.max);
+    }
+    updateProps(props) {
+        this.min = props.min;
+        this.value = props.value;
+        this.max = props.max;
+        this.step = props.step;
+        this.orientation = props.orientation;
+        this.reverse = props.reverse;
+        this.disabled = props.disabled;
+    }
+    #effects = effects(() => {
+        $effect(() => {
+            this.hooks?.onChange(this.value);
+        });
+    });
+}

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

@@ -0,0 +1,5 @@
+export { default as Slider } from './Slider.svelte';
+export { default as SliderRange } from './SliderRange.svelte';
+export { default as SliderThumb } from './SliderThumb.svelte';
+export { default as SliderValue } from './SliderValue.svelte';
+export type * from './types.js';

package/dist/components/Slider/index.js

@@ -0,0 +1,4 @@
+export { default as Slider } from './Slider.svelte';
+export { default as SliderRange } from './SliderRange.svelte';
+export { default as SliderThumb } from './SliderThumb.svelte';
+export { default as SliderValue } from './SliderValue.svelte';

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

@@ -0,0 +1,35 @@
+import type { Handler, Props, PropsNoChildren } from '../../internal/index.js';
+interface SliderState {
+    /** The current percentage of the slider, from 0-100. */
+    percentage: number;
+    /** The current value of the slider. */
+    value: number;
+}
+export interface SliderProps extends Props<HTMLDivElement, SliderState> {
+    /** The value of the slider. */
+    value?: number;
+    /** The minimum value of the slider. */
+    min?: number;
+    /** The maximum value of the slider. */
+    max?: number;
+    /** The steps between each step of the value. */
+    step?: number;
+    /** The direction of the slider. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Switch the direction the slider. */
+    reverse?: boolean;
+    /** Disables the slider. */
+    disabled?: boolean;
+    onMousedown?: Handler<MouseEvent, HTMLDivElement>;
+    onClick?: Handler<MouseEvent, HTMLDivElement>;
+}
+export interface SliderThumbProps extends PropsNoChildren<HTMLDivElement, SliderState> {
+    onMousedown?: Handler<MouseEvent, HTMLDivElement>;
+    onKeydown?: Handler<KeyboardEvent, HTMLDivElement>;
+}
+export interface SliderRangeProps extends PropsNoChildren<HTMLDivElement, SliderState> {
+}
+export interface SliderValueProps extends PropsNoChildren<HTMLInputElement> {
+    name: string;
+}
+export {};

package/dist/components/Slider/types.js

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

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

@@ -1,4 +1,4 @@
-import type { Handler, PropsMaybeChildren } from '../../internal/types.js';
+import type { Handler, PropsMaybeChildren } from '../../index.js/internal/types.js';
 interface SwitchState {
     /** If the Switch is checked or not. */
     checked: boolean;

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

@@ -1,4 +1,4 @@
-import type { Props, Handler } from '../../internal/types.js';
+import type { Props, Handler } from '../../index.js/internal/types.js';
 interface TabsState {
     /** The current active tab. */
     tab: string;

package/dist/components/Toast/Toaster.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { useActions, classProp } from "../../internal/index.js";
-import { usePortal } from "../../index.js";
+import { usePortal } from "../../index.js/index.js";
 import { toasts } from "./context.svelte.js";
 let {
   children,

package/dist/index.d.ts

@@ -12,6 +12,7 @@ export * from './components/Hovercard/index.js';
 export * from './components/Portal/index.js';
 export * from './components/Switch/index.js';
 export * from './components/Toast/index.js';
+export * from './components/Slider/index.js';
 export * from './actions/portal.js';
 export * from './actions/outside.js';
 export * from './actions/trap.js';

package/dist/index.js

@@ -12,6 +12,7 @@ export * from './components/Hovercard/index.js';
 export * from './components/Portal/index.js';
 export * from './components/Switch/index.js';
 export * from './components/Toast/index.js';
+export * from './components/Slider/index.js';
 export * from './actions/portal.js';
 export * from './actions/outside.js';
 export * from './actions/trap.js';

package/dist/internal/components/FloatingContent.svelte

@@ -6,8 +6,8 @@
   useFloating,
   getTransition
 } from "../index.js";
-import { useOutside } from "../../actions/outside.js";
-import { usePortal } from "../../actions/portal.js";
+import { useOutside } from "../../index.js/actions/outside.js";
+import { usePortal } from "../../index.js/actions/portal.js";
 let {
   children,
   class: klass,

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

@@ -18,4 +18,5 @@ export declare const KEYS: {
     backspace: string;
 };
 export declare const ALL_KEYS: string[];
+export declare const ALL_ARROW_KEYS: string[];
 export declare const PREVENT_KEYS: string[];

package/dist/internal/helpers/keyboard.js

@@ -18,6 +18,7 @@ export const KEYS = {
     backspace: 'Backspace'
 };
 export const ALL_KEYS = Object.values(KEYS);
+export const ALL_ARROW_KEYS = [KEYS.arrowUp, KEYS.arrowDown, KEYS.arrowLeft, KEYS.arrowRight];
 export const PREVENT_KEYS = [
     KEYS.arrowUp,
     KEYS.arrowDown,

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

@@ -46,3 +46,10 @@ export declare const parseDelay: (delay: number | [number, number]) => {
  * @param value The value to be transformed.
  */
 export declare const parseDuration: (value: number | string) => number;
+/**
+ * Restrict a number value between 2 values.
+ * @param min The minimun value of the number.
+ * @param value The value to be clamped.
+ * @param max The maximum value of the number.
+ */
+export declare const clamp: (min: number, value: number, max: number) => number;

package/dist/internal/helpers/utils.svelte.js

@@ -103,3 +103,12 @@ export const parseDuration = (value) => {
         return duration;
     return duration * 1000;
 };
+/**
+ * Restrict a number value between 2 values.
+ * @param min The minimun value of the number.
+ * @param value The value to be clamped.
+ * @param max The maximum value of the number.
+ */
+export const clamp = (min, value, max) => {
+    return Math.max(min, Math.min(value, max));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lithesome",
-	"version": "0.12.3",
+	"version": "0.13.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",