lithesome 0.15.2 → 0.16.1

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

@@ -1,5 +1,5 @@
 import { Floating, type CalcIndexAction, type Handler, type StateValues } from '../../internal/index.js';
-import type { MenuItemEvents } from './types.js';
+import type { MenuContentState, MenuItemEvents, MenuItemState, MenuState, MenuTriggerState } from './types.js';
 type MenuRootProps = StateValues<{
     visible: boolean;
 }>;
@@ -22,9 +22,7 @@ declare class MenuRoot extends Floating {
         readonly 'data-menu': "";
         readonly 'data-state': "opened" | "closed";
     };
-    state: {
-        visible: boolean;
-    };
+    state: MenuState;
 }
 declare class MenuTrigger {
     #private;
@@ -34,9 +32,7 @@ declare class MenuTrigger {
     attrs: {
         'data-menutrigger': string;
     };
-    state: {
-        visible: boolean;
-    };
+    state: MenuTriggerState;
 }
 declare class MenuArrow {
     root: MenuRoot;
@@ -48,9 +44,7 @@ declare class MenuArrow {
 declare class MenuContent {
     root: MenuRoot;
     constructor(root: MenuRoot);
-    state: {
-        visible: boolean;
-    };
+    state: MenuContentState;
 }
 type MenuItemProps = StateValues<{
     disabled: boolean;
@@ -72,9 +66,7 @@ declare class MenuItem {
         readonly onmouseover: Handler<MouseEvent, HTMLButtonElement | HTMLAnchorElement> | undefined;
         readonly onclick: Handler<MouseEvent, HTMLButtonElement | HTMLAnchorElement> | undefined;
     };
-    state: {
-        hovered: boolean;
-    };
+    state: MenuItemState;
 }
 export declare const createRootContext: (props: MenuRootProps) => MenuRoot;
 export declare const useMenuTrigger: () => MenuTrigger;

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

@@ -1,6 +1,10 @@
 import type { Props, PropsNoChildren, ContentProps, Handler } from '../../internal/index.js';
 type MenuItemElement = HTMLButtonElement | HTMLAnchorElement;
-interface MenuState {
+/**
+ * The state that is exposed from the `Menu` component.\
+ * Which can be used via the `class` prop function or `children` snippet block.
+ */
+export interface MenuState {
     /** Whether or not the content is opened or not. */
     visible: boolean;
 }
@@ -14,11 +18,31 @@ export interface MenuProps extends Props<HTMLDivElement, MenuState> {
      */
     delay?: number | [number, number];
 }
-export interface MenuArrowProps extends PropsNoChildren<HTMLDivElement, MenuState> {
+/**
+ * The state that is exposed from the `MenuArrow` component.\
+ * Which can be used via the `class` prop.
+ */
+export interface MenuArrowState {
+    /** Whether or not the content is opened or not. */
+    visible: boolean;
+}
+export interface MenuArrowProps extends PropsNoChildren<HTMLDivElement, MenuArrowState> {
 }
-export interface MenuContentProps extends Props<HTMLDivElement, MenuState>, ContentProps {
+/**
+ * The state that is exposed from the `MenuContent` component.\
+ * Which can be used via the `class` prop function or `children` snippet block.
+ */
+export interface MenuContentState {
+    /** Whether or not the content is opened or not. */
+    visible: boolean;
 }
-interface MenuItemState {
+export interface MenuContentProps extends Props<HTMLDivElement, MenuContentState>, ContentProps {
+}
+/**
+ * The state that is exposed from the `MenuItem` component.\
+ * Which can be used via the `class` prop function or `children` snippet block.
+ */
+export interface MenuItemState {
     /** True if the option is hovered, via mouse or keyboard navigation. */
     hovered: boolean;
 }
@@ -44,6 +68,14 @@ export interface MenuItemProps extends Props<MenuItemElement, MenuItemState>, Me
     /** Disables the item, disallowing the clicking and keyboard navigation. */
     disabled?: boolean;
 }
+/**
+ * The state that is exposed from the `MenuTrigger` component.\
+ * Which can be used via the `class` prop function or `children` snippet block.
+ */
+export interface MenuTriggerState {
+    /** Whether or not the content is opened or not. */
+    visible: boolean;
+}
 export interface MenuTriggerProps extends Props<HTMLDivElement, MenuState> {
 }
 export {};

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

@@ -9,10 +9,6 @@ declare class ModalRoot {
     $visible: ModalRootProps['visible'];
     $portalTarget: ModalRootProps['portalTarget'];
     constructor(props: ModalRootProps);
-    attrs: {
-        readonly id: string;
-        readonly 'data-modal': "";
-    };
 }
 declare class ModalOverlay {
     root: ModalRoot;
@@ -42,16 +38,16 @@ declare class ModalTitle {
     root: ModalRoot;
     constructor(root: ModalRoot);
     attrs: {
-        readonly id: string;
-        readonly 'data-modaltitle': "";
+        id: string;
+        'data-modaltitle': string;
     };
 }
 declare class ModalDescription {
     root: ModalRoot;
     constructor(root: ModalRoot);
     attrs: {
-        readonly id: string;
-        readonly 'data-modaldescription': "";
+        id: string;
+        'data-modaldescription': string;
     };
 }
 export declare const createRootContext: (props: ModalRootProps) => ModalRoot;

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

@@ -20,10 +20,6 @@ class ModalRoot {
         if (e.key === KEYS.escape)
             this.$visible.val = false;
     };
-    attrs = $derived.by(() => ({
-        id: this.uid(),
-        'data-modal': ''
-    }));
 }
 //
 // Overlay

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

@@ -0,0 +1,26 @@
+export default Pagination;
+type Pagination = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Pagination: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/Pagination/PaginationPrevButton.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import { usePaginationPrev } from './main.svelte.js';
+	import type { PaginationPrevButtonProps } from './types.js';
+
+	let { children, class: klass, self = $bindable(), use = [], onClick }: PaginationPrevButtonProps = $props();
+
+	const ctx = usePaginationPrev({ onClick });
+</script>

package/dist/components/Pagination/PaginationPrevButton.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { PaginationPrevButtonProps } from './types.js';
+declare const PaginationPrevButton: import("svelte").Component<PaginationPrevButtonProps, {}, "self">;
+type PaginationPrevButton = ReturnType<typeof PaginationPrevButton>;
+export default PaginationPrevButton;

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

@@ -0,0 +1,30 @@
+import { type StateValues } from '../../internal/index.js';
+import type { PaginationPrevButtonEvents } from './types.js';
+type PaginationRootProps = StateValues<{
+    itemsCount: number;
+    itemsPerPage: number;
+    siblingCount: number;
+    currentPage: number;
+    disabled: boolean;
+}>;
+declare class PaginationRoot {
+    uid: (component?: string) => string;
+    $itemsCount: PaginationRootProps['itemsCount'];
+    $itemsPerPage: PaginationRootProps['itemsPerPage'];
+    $siblingCount: PaginationRootProps['siblingCount'];
+    $currentPage: PaginationRootProps['currentPage'];
+    $disabled: PaginationRootProps['disabled'];
+    constructor(props: PaginationRootProps);
+}
+declare class PaginationPrevPage {
+    #private;
+    root: PaginationRoot;
+    constructor(root: PaginationRoot, events: PaginationPrevButtonEvents);
+    attrs: {
+        'data-paginationprevbutton': string;
+        onclick: import("../../internal/index.js").Handler<MouseEvent, HTMLButtonElement> | undefined;
+    };
+}
+export declare const createPaginationContext: (props: PaginationRootProps) => PaginationRoot;
+export declare const usePaginationPrev: (events: PaginationPrevButtonEvents) => PaginationPrevPage;
+export {};

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

@@ -0,0 +1,47 @@
+import { buildContext, createUID } from '../../internal/index.js';
+class PaginationRoot {
+    uid = createUID('pagination');
+    $itemsCount;
+    $itemsPerPage;
+    $siblingCount;
+    $currentPage;
+    $disabled;
+    constructor(props) {
+        this.$itemsCount = props.itemsCount;
+        this.$itemsPerPage = props.itemsPerPage;
+        this.$siblingCount = props.siblingCount;
+        this.$currentPage = props.currentPage;
+        this.$disabled = props.disabled;
+    }
+}
+//
+// Prev page
+//
+class PaginationPrevPage {
+    root;
+    #events;
+    constructor(root, events) {
+        this.root = root;
+        this.#events = events;
+    }
+    #handleClick = (e) => {
+        if (this.root.$disabled.val)
+            return;
+        this.#events.onClick?.(e);
+        this.root.$currentPage.val -= 1;
+    };
+    attrs = $derived.by(() => ({
+        'data-paginationprevbutton': '',
+        onclick: this.#handleClick
+    }));
+}
+//
+// Builders
+//
+const rootContext = buildContext(PaginationRoot);
+export const createPaginationContext = (props) => {
+    return rootContext.createContext(props);
+};
+export const usePaginationPrev = (events) => {
+    return rootContext.register(PaginationPrevPage, events);
+};

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

@@ -0,0 +1,29 @@
+import type { Handler, Props } from '../../internal/index.js';
+export type PaginationProps = Props<HTMLElement> & {
+    itemsCount: number;
+    itemsPerPage?: number;
+    siblingCount?: number;
+    currentPage?: number;
+    onPageChange?: (pageNumber: number) => void;
+};
+export type PaginationPageButton = Props<HTMLButtonElement>;
+export type PaginationPrevButtonEvents = {
+    /**
+     * Add your own custom logic to the click event.\
+     * Using the regular `onclick` event will overwrite the event used and cause the component to fail.
+     *
+     * Event will **NOT** be fired if the component is disabled.
+     */
+    onClick?: Handler<MouseEvent, HTMLButtonElement>;
+};
+export type PaginationPrevButtonProps = Props<HTMLButtonElement> & PaginationPrevButtonEvents;
+export type PaginationNextButtonEvents = {
+    /**
+     * Add your own custom logic to the click event.\
+     * Using the regular `onclick` event will overwrite the event used and cause the component to fail.
+     *
+     * Event will **NOT** be fired if the component is disabled.
+     */
+    onClick?: Handler<MouseEvent, HTMLButtonElement>;
+};
+export type PaginationNextButtonProps = Props<HTMLButtonElement> & PaginationNextButtonEvents;

package/dist/components/Pagination/types.js

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

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

@@ -1,5 +1,5 @@
 import { type StateValues, type Handler } from '../../internal/index.js';
-import type { PinInputEvents, PinType } from './types.js';
+import type { PinInputEvents, PinInputState, PinState, PinType } from './types.js';
 type PinRootProps = StateValues<{
     value: string[];
     disabled: boolean;
@@ -18,15 +18,13 @@ declare class PinRoot {
     constructor(props: PinRootProps);
     setValue(index: number, value: string): void;
     attrs: {
-        readonly id: string;
-        readonly 'aria-disabled': true | undefined;
-        readonly 'data-pin': "";
-        readonly 'data-filled': boolean;
-        readonly 'data-disabled': true | undefined;
-    };
-    state: {
-        filled: boolean;
+        id: string;
+        'aria-disabled': true | undefined;
+        'data-pin': string;
+        'data-filled': boolean;
+        'data-disabled': true | undefined;
     };
+    state: PinState;
 }
 declare class PinInput {
     #private;
@@ -37,21 +35,18 @@ declare class PinInput {
     value: string;
     constructor(root: PinRoot, events: PinInputEvents);
     attrs: {
-        readonly id: string;
-        readonly disabled: boolean;
-        readonly placeholder: string;
-        readonly 'data-pininput': "";
-        readonly 'data-filled': boolean;
-        readonly oninput: Handler<Event, HTMLInputElement> | undefined;
-        readonly onkeydown: Handler<KeyboardEvent, HTMLInputElement> | undefined;
-        readonly onfocus: Handler<FocusEvent, HTMLInputElement> | undefined;
-        readonly onblur: Handler<FocusEvent, HTMLInputElement> | undefined;
-        readonly onpaste: Handler<ClipboardEvent, HTMLInputElement> | undefined;
-    };
-    state: {
-        filled: boolean;
+        id: string;
         disabled: boolean;
+        placeholder: string;
+        'data-pininput': string;
+        'data-filled': boolean;
+        oninput: Handler<Event, HTMLInputElement> | undefined;
+        onkeydown: Handler<KeyboardEvent, HTMLInputElement> | undefined;
+        onfocus: Handler<FocusEvent, HTMLInputElement> | undefined;
+        onblur: Handler<FocusEvent, HTMLInputElement> | undefined;
+        onpaste: Handler<ClipboardEvent, HTMLInputElement> | undefined;
     };
+    state: PinInputState;
 }
 declare class PinValue {
     root: PinRoot;

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

@@ -1,6 +1,10 @@
 import type { Props, PropsNoChildren, Handler } from '../../internal/index.js';
 export type PinType = 'text' | 'password';
-interface PinState {
+/**
+ * The state that is exposed from the `Pin` component.\
+ * Which can be used via the `class` prop function or `children` snippet block.
+ */
+export interface PinState {
     /** True if all inputs are filled out. */
     filled: boolean;
 }
@@ -20,7 +24,11 @@ export interface PinProps extends Props<HTMLDivElement, PinState> {
     onChange?: (value: string) => void;
     onFilled?: (value: string) => void;
 }
-interface PinInputState extends PinState {
+/**
+ * The state that is exposed from the `PinInput` component.\
+ * Which can be used via the `class` prop function.
+ */
+export interface PinInputState extends PinState {
     /** If the input is disabled by the `Pin` parent component. */
     disabled: boolean;
 }
@@ -71,4 +79,3 @@ export interface PinValueProps extends PropsNoChildren<HTMLInputElement> {
      */
     name?: string;
 }
-export {};

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

@@ -1,4 +1,5 @@
 import { Floating, type StateValues } from '../../internal/index.js';
+import type { PopoverState } from './types.js';
 type PopoverRootProps = StateValues<{
     visible: boolean;
 }>;
@@ -14,9 +15,7 @@ declare class PopoverRoot extends Floating {
         readonly 'data-popover': "";
         readonly 'data-state': "opened" | "closed";
     };
-    state: {
-        visible: boolean;
-    };
+    state: PopoverState;
 }
 declare class PopoverTrigger {
     #private;
@@ -26,9 +25,7 @@ declare class PopoverTrigger {
     attrs: {
         'data-popovertrigger': string;
     };
-    state: {
-        visible: boolean;
-    };
+    state: PopoverState;
 }
 declare class PopoverArrow {
     root: PopoverRoot;
@@ -36,13 +33,12 @@ declare class PopoverArrow {
     attrs: {
         id: string;
     };
+    state: PopoverState;
 }
 declare class PopoverContent {
     root: PopoverRoot;
     constructor(root: PopoverRoot);
-    state: {
-        visible: boolean;
-    };
+    state: PopoverState;
 }
 export declare const createRootContext: (props: PopoverRootProps) => PopoverRoot;
 export declare const usePopoverTrigger: () => PopoverTrigger;

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

@@ -101,6 +101,9 @@ class PopoverArrow {
     attrs = $derived.by(() => ({
         id: this.root.uid('arrow')
     }));
+    state = $derived.by(() => ({
+        visible: this.root.$visible.val
+    }));
 }
 //
 // Content

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

@@ -1,5 +1,9 @@
 import type { Props, PropsNoChildren, ContentProps } from '../../internal/index.js';
-interface PopoverState {
+/**
+ * The state that is exposed from the `Popover` components.\
+ * Which can be used via the `class` prop function or `children` snippet block.
+ */
+export interface PopoverState {
     /** Whether or not the content is opened or not. */
     visible: boolean;
 }
@@ -13,4 +17,3 @@ export interface PopoverContentProps extends Props<HTMLDivElement, PopoverState>
 }
 export interface PopoverTriggerProps extends Props<HTMLDivElement, PopoverState> {
 }
-export {};

package/dist/components/RadioGroup/RadioGroup.svelte

@@ -17,12 +17,15 @@
 	const ctx = createRootContext({
 		value: stateValue(
 			() => value,
-			(v) => (value = v)
+			(v) => {
+				value = v;
+				onChange?.(v);
+			}
 		),
 		required: stateValue(() => required)
 	});
 </script>
 
-<div bind:this={self} use:useActions={use} class={classProp(klass)} {...ctx.attrs} {...props}>
-	{@render children?.({})}
+<div bind:this={self} use:useActions={use} class={classProp(klass, ctx.state)} {...ctx.attrs} {...props}>
+	{@render children?.(ctx.state)}
 </div>

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

@@ -1,5 +1,5 @@
 import { type CalcIndexAction, type StateValues, type UID } from '../../internal/index.js';
-import type { RadioGroupItemEvents } from './types.js';
+import type { RadioGroupItemEvents, RadioGroupState } from './types.js';
 interface Item {
     id: string;
     value: string;
@@ -21,12 +21,13 @@ declare class RadioGroupRoot {
     navigate: (action: CalcIndexAction) => void;
     setSelected: (item: Item) => void;
     attrs: {
-        readonly id: string;
-        readonly role: "radiogroup";
-        readonly 'aria-required': boolean;
-        readonly 'data-radiogroup': "";
-        readonly 'data-value': string;
+        id: string;
+        role: string;
+        'aria-required': boolean;
+        'data-radiogroup': string;
+        'data-value': string;
     };
+    state: RadioGroupState;
 }
 type RadioGroupItemProps = StateValues<{
     value: string;

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

@@ -51,6 +51,9 @@ class RadioGroupRoot {
         'data-radiogroup': '',
         'data-value': this.$value.val
     }));
+    state = $derived.by(() => ({
+        value: this.$value.val
+    }));
 }
 class RadioGroupItem {
     uid = createUID('radioitem');

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

@@ -1,4 +1,12 @@
 import type { Handler, Props } from '../../internal/index.js';
+/**
+ * The state that is exposed from the `RadioGroup` component.\
+ * Which can be used via the `class` prop function or `children` snippet block.
+ */
+export interface RadioGroupState {
+    /** The current selected value. */
+    value: string;
+}
 export interface RadioGroupProps extends Props<HTMLDivElement> {
     /** The value of the radiogroup. */
     value?: string;
@@ -6,7 +14,11 @@ export interface RadioGroupProps extends Props<HTMLDivElement> {
     required?: boolean;
     onChange?: (value: string) => void;
 }
-interface RadioGroupItemState {
+/**
+ * The state that is exposed from the `RadioGroupItem` component.\
+ * Which can be used via the `class` prop function or `children` snippet block.
+ */
+export interface RadioGroupItemState {
     /** True if the item is selected. */
     checked: boolean;
 }
@@ -32,4 +44,3 @@ export interface RadioGroupItemProps extends Props<HTMLButtonElement, RadioGroup
     /** Disable the item, disallowing clicking and keyboard navigation. */
     disabled?: boolean;
 }
-export {};

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

@@ -1,5 +1,5 @@
 import { Floating, type CalcIndexAction, type JsonValue, type StateValues } from '../../internal/index.js';
-import type { SelectOptionEvents } from './types.js';
+import type { SelectOptionEvents, SelectOptionState, SelectState, SelectValueState } from './types.js';
 type SelectRootProps = StateValues<{
     multiple: boolean;
     visible: boolean;
@@ -28,13 +28,11 @@ declare class SelectRoot extends Floating {
     setSelected: () => void;
     setInitialSelected: (value: JsonValue) => void;
     attrs: {
-        readonly id: string;
-        readonly 'data-select': "";
-        readonly 'data-state': "opened" | "closed";
-    };
-    state: {
-        visible: boolean;
+        id: string;
+        'data-select': string;
+        'data-state': string;
     };
+    state: SelectState;
 }
 declare class SelectTrigger {
     #private;
@@ -44,9 +42,7 @@ declare class SelectTrigger {
     attrs: {
         'data-selecttrigger': string;
     };
-    state: {
-        visible: boolean;
-    };
+    state: SelectState;
 }
 declare class SelectArrow {
     root: SelectRoot;
@@ -54,6 +50,7 @@ declare class SelectArrow {
     attrs: {
         id: string;
     };
+    state: SelectState;
 }
 declare class SelectContent {
     root: SelectRoot;
@@ -61,9 +58,7 @@ declare class SelectContent {
     attrs: {
         hidden: true | undefined;
     };
-    state: {
-        visible: boolean;
-    };
+    state: SelectState;
 }
 type SelectOptionProps = StateValues<{
     value: JsonValue;
@@ -95,10 +90,7 @@ declare class SelectOption {
         readonly onmouseover: import("../../internal/index.js").Handler<MouseEvent, HTMLButtonElement> | undefined;
         readonly onclick: import("../../internal/index.js").Handler<MouseEvent, HTMLButtonElement> | undefined;
     };
-    state: {
-        hovered: boolean;
-        selected: boolean;
-    };
+    state: SelectOptionState;
 }
 type SelectValueProps = StateValues<{
     placeholder: string;
@@ -110,13 +102,11 @@ declare class SelectValue {
     constructor(root: SelectRoot, props: SelectValueProps);
     label: string;
     attrs: {
-        readonly id: string;
-        readonly 'data-selectvalue': "";
-        readonly 'data-placeholder': true | undefined;
-    };
-    state: {
-        placeholderVisible: boolean;
+        id: string;
+        'data-selectvalue': string;
+        'data-placeholder': true | undefined;
     };
+    state: SelectValueState;
 }
 export declare const createRootContext: (props: SelectRootProps) => SelectRoot;
 export declare const useSelectTrigger: () => SelectTrigger;

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

@@ -198,6 +198,9 @@ class SelectArrow {
     attrs = $derived.by(() => ({
         id: this.root.uid('arrow')
     }));
+    state = $derived.by(() => ({
+        visible: this.root.$visible.val
+    }));
 }
 //
 // Content