@wirekyt/svelte 0.0.1 → 0.0.2

package/dist/components/clipboard/value-text.svelte

@@ -0,0 +1,26 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+
+  export interface ClipboardValueTextBaseProps extends PolymorphicProps<"span">, RefAttribute {}
+  export interface ClipboardValueTextProps extends Assign<
+    HTMLProps<"span">,
+    ClipboardValueTextBaseProps
+  > {}
+</script>
+
+<script lang="ts">
+  import { Wire } from "../factory";
+  import { useClipboardContext } from "./use-context";
+
+  let { ref = $bindable(null), children, ...props }: ClipboardValueTextProps = $props();
+
+  const clipboard = useClipboardContext();
+</script>
+
+<Wire as="span" bind:ref {...props}>
+  {#if children}
+    {@render children()}
+  {:else}
+    {clipboard().value}
+  {/if}
+</Wire>

package/dist/components/clipboard/value-text.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+export interface ClipboardValueTextBaseProps extends PolymorphicProps<"span">, RefAttribute {
+}
+export interface ClipboardValueTextProps extends Assign<HTMLProps<"span">, ClipboardValueTextBaseProps> {
+}
+declare const ValueText: import("svelte").Component<ClipboardValueTextProps, {}, "ref">;
+type ValueText = ReturnType<typeof ValueText>;
+export default ValueText;

package/dist/components/collapsible/anatomy.d.ts

@@ -0,0 +1 @@
+export { anatomy as collapsibleAnatomy } from "@wirekyt/dom/machines/collapsible";

package/dist/components/collapsible/anatomy.js

@@ -0,0 +1 @@
+export { anatomy as collapsibleAnatomy } from "@wirekyt/dom/machines/collapsible";

package/dist/components/collapsible/collapsible.d.ts

@@ -0,0 +1,7 @@
+export type { OpenChangeDetails } from "@wirekyt/dom/machines/collapsible";
+export { default as Content, type CollapsibleContentBaseProps as ContentBaseProps, type CollapsibleContentProps as ContentProps, } from "./content.svelte";
+export { default as Context, type CollapsibleContextProps as ContextProps } from "./context.svelte";
+export { default as Indicator, type CollapsibleIndicatorBaseProps as IndicatorBaseProps, type CollapsibleIndicatorProps as IndicatorProps, } from "./indicator.svelte";
+export { default as Root, type CollapsibleRootBaseProps as RootBaseProps, type CollapsibleRootProps as RootProps, } from "./root.svelte";
+export { default as RootProvider, type CollapsibleRootProviderBaseProps as RootProviderBaseProps, type CollapsibleRootProviderProps as RootProviderProps, } from "./root-provider.svelte";
+export { default as Trigger, type CollapsibleTriggerBaseProps as TriggerBaseProps, type CollapsibleTriggerProps as TriggerProps, } from "./trigger.svelte";

package/dist/components/collapsible/collapsible.js

@@ -0,0 +1,6 @@
+export { default as Content, } from "./content.svelte";
+export { default as Context } from "./context.svelte";
+export { default as Indicator, } from "./indicator.svelte";
+export { default as Root, } from "./root.svelte";
+export { default as RootProvider, } from "./root-provider.svelte";
+export { default as Trigger, } from "./trigger.svelte";

package/dist/components/collapsible/content.svelte

@@ -0,0 +1,25 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+
+  export interface CollapsibleContentBaseProps extends PolymorphicProps<"div">, RefAttribute {}
+  export interface CollapsibleContentProps extends Assign<
+    HTMLProps<"div">,
+    CollapsibleContentBaseProps
+  > {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from "../../core";
+
+  import { Wire } from "../factory";
+  import { useCollapsibleContext } from "./use-context";
+
+  let { ref = $bindable(null), ...props }: CollapsibleContentProps = $props();
+
+  const collapsible = useCollapsibleContext();
+  const mergedProps = $derived(mergeProps(collapsible().getContentProps(), props));
+</script>
+
+{#if !collapsible().isUnmounted}
+  <Wire as="div" bind:ref {...mergedProps} />
+{/if}

package/dist/components/collapsible/content.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+export interface CollapsibleContentBaseProps extends PolymorphicProps<"div">, RefAttribute {
+}
+export interface CollapsibleContentProps extends Assign<HTMLProps<"div">, CollapsibleContentBaseProps> {
+}
+declare const Content: import("svelte").Component<CollapsibleContentProps, {}, "ref">;
+type Content = ReturnType<typeof Content>;
+export default Content;

package/dist/components/collapsible/context.svelte

@@ -0,0 +1,19 @@
+<script module lang="ts">
+  import type { Snippet } from "svelte";
+
+  import type { UseCollapsibleContext } from "./use-context";
+
+  export interface CollapsibleContextProps {
+    render?: Snippet<[UseCollapsibleContext]>;
+  }
+</script>
+
+<script lang="ts">
+  import { useCollapsibleContext } from "./use-context";
+
+  const { render }: CollapsibleContextProps = $props();
+
+  const context = useCollapsibleContext();
+</script>
+
+{@render render?.(context)}

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

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+import type { UseCollapsibleContext } from "./use-context";
+export interface CollapsibleContextProps {
+    render?: Snippet<[UseCollapsibleContext]>;
+}
+declare const Context: import("svelte").Component<CollapsibleContextProps, {}, "">;
+type Context = ReturnType<typeof Context>;
+export default Context;

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

@@ -0,0 +1,12 @@
+export type { OpenChangeDetails as CollapsibleOpenChangeDetails } from "@wirekyt/dom/machines/collapsible";
+export { default as CollapsibleContent, type CollapsibleContentBaseProps, type CollapsibleContentProps, } from "./content.svelte";
+export { default as CollapsibleContext, type CollapsibleContextProps } from "./context.svelte";
+export { default as CollapsibleIndicator, type CollapsibleIndicatorBaseProps, type CollapsibleIndicatorProps, } from "./indicator.svelte";
+export { default as CollapsibleRoot, type CollapsibleRootBaseProps, type CollapsibleRootProps, } from "./root.svelte";
+export { default as CollapsibleRootProvider, type CollapsibleRootProviderBaseProps, type CollapsibleRootProviderProps, } from "./root-provider.svelte";
+export { default as CollapsibleTrigger, type CollapsibleTriggerBaseProps, type CollapsibleTriggerProps, } from "./trigger.svelte";
+export { collapsibleAnatomy } from "./anatomy";
+export { splitCollapsibleProps } from "./split-props.svelte";
+export { useCollapsibleContext, type UseCollapsibleContext } from "./use-context";
+export { useCollapsible, type UseCollapsibleProps, type UseCollapsibleReturn } from "./use.svelte";
+export * as Collapsible from "./collapsible";

package/dist/components/collapsible/index.js

@@ -0,0 +1,11 @@
+export { default as CollapsibleContent, } from "./content.svelte";
+export { default as CollapsibleContext } from "./context.svelte";
+export { default as CollapsibleIndicator, } from "./indicator.svelte";
+export { default as CollapsibleRoot, } from "./root.svelte";
+export { default as CollapsibleRootProvider, } from "./root-provider.svelte";
+export { default as CollapsibleTrigger, } from "./trigger.svelte";
+export { collapsibleAnatomy } from "./anatomy";
+export { splitCollapsibleProps } from "./split-props.svelte";
+export { useCollapsibleContext } from "./use-context";
+export { useCollapsible } from "./use.svelte";
+export * as Collapsible from "./collapsible";

package/dist/components/collapsible/indicator.svelte

@@ -0,0 +1,22 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+
+  export interface CollapsibleIndicatorBaseProps extends PolymorphicProps<"div">, RefAttribute {}
+  export interface CollapsibleIndicatorProps extends Assign<
+    HTMLProps<"div">,
+    CollapsibleIndicatorBaseProps
+  > {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from "../../core";
+
+  import { Wire } from "../factory";
+  import { useCollapsibleContext } from "./use-context";
+
+  let { ref = $bindable(null), ...props }: CollapsibleIndicatorProps = $props();
+  const collapsible = useCollapsibleContext();
+  const mergedProps = $derived(mergeProps(collapsible().getIndicatorProps(), props));
+</script>
+
+<Wire as="div" bind:ref {...mergedProps} />

package/dist/components/collapsible/indicator.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+export interface CollapsibleIndicatorBaseProps extends PolymorphicProps<"div">, RefAttribute {
+}
+export interface CollapsibleIndicatorProps extends Assign<HTMLProps<"div">, CollapsibleIndicatorBaseProps> {
+}
+declare const Indicator: import("svelte").Component<CollapsibleIndicatorProps, {}, "ref">;
+type Indicator = ReturnType<typeof Indicator>;
+export default Indicator;

package/dist/components/collapsible/root-provider.svelte

@@ -0,0 +1,30 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+
+  import type { UseCollapsibleReturn } from "./use.svelte";
+
+  interface RootProviderProps {
+    value: UseCollapsibleReturn;
+  }
+
+  export interface CollapsibleRootProviderBaseProps
+    extends RootProviderProps, PolymorphicProps<"div">, RefAttribute {}
+  export interface CollapsibleRootProviderProps extends Assign<
+    HTMLProps<"div">,
+    CollapsibleRootProviderBaseProps
+  > {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from "../../core";
+
+  import { Wire } from "../factory";
+  import { CollapsibleProvider } from "./use-context";
+
+  let { ref = $bindable(null), value, ...props }: CollapsibleRootProviderProps = $props();
+  const mergedProps = $derived(mergeProps(value().getRootProps(), props));
+
+  CollapsibleProvider(() => value());
+</script>
+
+<Wire as="div" bind:ref {...mergedProps} />

package/dist/components/collapsible/root-provider.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+import type { UseCollapsibleReturn } from "./use.svelte";
+interface RootProviderProps {
+    value: UseCollapsibleReturn;
+}
+export interface CollapsibleRootProviderBaseProps extends RootProviderProps, PolymorphicProps<"div">, RefAttribute {
+}
+export interface CollapsibleRootProviderProps extends Assign<HTMLProps<"div">, CollapsibleRootProviderBaseProps> {
+}
+declare const RootProvider: import("svelte").Component<CollapsibleRootProviderProps, {}, "ref">;
+type RootProvider = ReturnType<typeof RootProvider>;
+export default RootProvider;

package/dist/components/collapsible/root.svelte

@@ -0,0 +1,43 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+
+  import type { UseCollapsibleProps } from "./use.svelte";
+
+  export interface CollapsibleRootBaseProps
+    extends UseCollapsibleProps, PolymorphicProps<"div">, RefAttribute {}
+  export interface CollapsibleRootProps extends Assign<
+    HTMLProps<"div">,
+    CollapsibleRootBaseProps
+  > {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from "../../core";
+
+  import { Wire } from "../factory";
+  import { splitCollapsibleProps } from "./split-props.svelte";
+  import { CollapsibleProvider } from "./use-context";
+  import { useCollapsible } from "./use.svelte";
+
+  let { ref = $bindable(null), open = $bindable(), ...props }: CollapsibleRootProps = $props();
+  const providedId = $props.id();
+
+  const [useCollapsibleProps, localProps] = $derived(splitCollapsibleProps(props));
+
+  const resolvedProps = $derived<UseCollapsibleProps>({
+    ...useCollapsibleProps,
+    id: useCollapsibleProps.id ?? providedId,
+    open,
+    onOpenChange(details) {
+      useCollapsibleProps.onOpenChange?.(details);
+      if (open !== undefined) open = details.open;
+    },
+  });
+
+  const collapsible = useCollapsible(() => resolvedProps);
+  const mergedProps = $derived(mergeProps(collapsible().getRootProps(), localProps));
+
+  CollapsibleProvider(collapsible);
+</script>
+
+<Wire as="div" bind:ref {...mergedProps} />

package/dist/components/collapsible/root.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+import type { UseCollapsibleProps } from "./use.svelte";
+export interface CollapsibleRootBaseProps extends UseCollapsibleProps, PolymorphicProps<"div">, RefAttribute {
+}
+export interface CollapsibleRootProps extends Assign<HTMLProps<"div">, CollapsibleRootBaseProps> {
+}
+declare const Root: import("svelte").Component<CollapsibleRootProps, {}, "ref" | "open">;
+type Root = ReturnType<typeof Root>;
+export default Root;

package/dist/components/collapsible/split-props.svelte.d.ts

@@ -0,0 +1,2 @@
+import type { UseCollapsibleProps } from "./use.svelte";
+export declare const splitCollapsibleProps: <T extends UseCollapsibleProps>(props: T) => [UseCollapsibleProps, Omit<T, "disabled" | "id" | "ids" | "lazyMount" | "unmountOnExit" | "open" | "defaultOpen" | "onOpenChange" | "onExitComplete" | "collapsedHeight" | "collapsedWidth">];

package/dist/components/collapsible/split-props.svelte.js

@@ -0,0 +1,15 @@
+import { createSplitProps } from "../../utils";
+const splitFn = createSplitProps();
+export const splitCollapsibleProps = (props) => splitFn(props, [
+    "collapsedHeight",
+    "collapsedWidth",
+    "defaultOpen",
+    "disabled",
+    "id",
+    "ids",
+    "lazyMount",
+    "onExitComplete",
+    "onOpenChange",
+    "open",
+    "unmountOnExit",
+]);

package/dist/components/collapsible/trigger.svelte

@@ -0,0 +1,22 @@
+<script module lang="ts">
+  import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+
+  export interface CollapsibleTriggerBaseProps extends PolymorphicProps<"button">, RefAttribute {}
+  export interface CollapsibleTriggerProps extends Assign<
+    HTMLProps<"button">,
+    CollapsibleTriggerBaseProps
+  > {}
+</script>
+
+<script lang="ts">
+  import { mergeProps } from "../../core";
+
+  import { Wire } from "../factory";
+  import { useCollapsibleContext } from "./use-context";
+
+  let { ref = $bindable(null), ...props }: CollapsibleTriggerProps = $props();
+  const collapsible = useCollapsibleContext();
+  const mergedProps = $derived(mergeProps(collapsible().getTriggerProps(), props));
+</script>
+
+<Wire as="button" bind:ref {...mergedProps} />

package/dist/components/collapsible/trigger.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Assign, HTMLProps, PolymorphicProps, RefAttribute } from "../../core";
+export interface CollapsibleTriggerBaseProps extends PolymorphicProps<"button">, RefAttribute {
+}
+export interface CollapsibleTriggerProps extends Assign<HTMLProps<"button">, CollapsibleTriggerBaseProps> {
+}
+declare const Trigger: import("svelte").Component<CollapsibleTriggerProps, {}, "ref">;
+type Trigger = ReturnType<typeof Trigger>;
+export default Trigger;

package/dist/components/collapsible/use-context.d.ts

@@ -0,0 +1,4 @@
+import type { UseCollapsibleReturn } from "./use.svelte";
+export interface UseCollapsibleContext extends UseCollapsibleReturn {
+}
+export declare const CollapsibleProvider: (opts: UseCollapsibleContext) => void, useCollapsibleContext: (fallback?: UseCollapsibleContext | undefined) => UseCollapsibleContext;

package/dist/components/collapsible/use-context.js

@@ -0,0 +1,4 @@
+import { createContext } from "../../utils";
+export const [CollapsibleProvider, useCollapsibleContext] = createContext({
+    name: "CollapsibleContext",
+});

package/dist/components/collapsible/use.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Accessor, Optional } from "../../core";
+import { type PropTypes } from "../../core";
+import * as collapsible from "@wirekyt/dom/machines/collapsible";
+import { type MaybeFunction } from "@wirekyt/dom/utils";
+export interface UseCollapsibleProps extends Optional<Omit<collapsible.Props, "dir" | "getRootNode">, "id"> {
+    lazyMount?: boolean;
+    unmountOnExit?: boolean;
+    onExitComplete?: () => void;
+}
+export interface UseCollapsibleReturn extends Accessor<collapsible.Api<PropTypes> & {
+    isUnmounted: boolean;
+}> {
+}
+export declare const useCollapsible: (props?: MaybeFunction<UseCollapsibleProps>) => UseCollapsibleReturn;

package/dist/components/collapsible/use.svelte.js

@@ -0,0 +1,33 @@
+import { normalizeProps, useMachine } from "../../core";
+import { useEnvironmentContext } from "../../providers";
+import { useLocaleContext } from "../../providers";
+import * as collapsible from "@wirekyt/dom/machines/collapsible";
+import { runIfFn } from "@wirekyt/dom/utils";
+export const useCollapsible = (props) => {
+    const env = useEnvironmentContext();
+    const locale = useLocaleContext();
+    let wasVisible = $state(false);
+    const machineProps = $derived.by(() => {
+        const resolvedProps = runIfFn(props);
+        // oxlint-disable-next-line no-unused-vars
+        const { lazyMount, unmountOnExit, onExitComplete, ...collapsibleProps } = resolvedProps || {};
+        return {
+            dir: locale().dir,
+            getRootNode: env().getRootNode,
+            ...collapsibleProps,
+        };
+    });
+    const service = useMachine(collapsible.machine, () => machineProps);
+    const api = $derived(collapsible.connect(service, normalizeProps));
+    const resolvedProps = $derived(runIfFn(props));
+    $effect(() => {
+        if (api.visible) {
+            wasVisible = true;
+        }
+    });
+    const isUnmounted = $derived.by(() => {
+        const { lazyMount, unmountOnExit } = resolvedProps || {};
+        return ((!api.visible && !wasVisible && lazyMount) || (unmountOnExit && !api.visible && wasVisible));
+    });
+    return () => ({ ...api, isUnmounted: Boolean(isUnmounted) });
+};

package/dist/components/collection/grid.d.ts

@@ -0,0 +1,3 @@
+import { type CollectionItem, type CollectionOptions, GridCollection, type GridCollectionOptions } from "@wirekyt/dom/collection";
+export declare const createGridCollection: <T extends CollectionItem>(options: GridCollectionOptions<T>) => GridCollection<T>;
+export type { GridCollection, CollectionOptions, CollectionItem, GridCollectionOptions };

package/dist/components/collection/grid.js

@@ -0,0 +1,2 @@
+import { GridCollection, } from "@wirekyt/dom/collection";
+export const createGridCollection = (options) => new GridCollection(options);

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

@@ -0,0 +1,6 @@
+export { createGridCollection, type GridCollection, type GridCollectionOptions } from "./grid";
+export { createListCollection, type CollectionItem, type CollectionOptions, type ListCollection, } from "./list";
+export { createFileTreeCollection, createTreeCollection, type FilePathTreeNode, type FlatTreeNode, type TreeCollection, type TreeCollectionOptions, type TreeNode, } from "./tree";
+export { useAsyncList, type UseAsyncListProps, type UseAsyncListReturn, } from "./use-async-list.svelte";
+export { useListCollection, type UseListCollectionProps, type UseListCollectionReturn, } from "./use-list.svelte";
+export { useListSelection, type UseListSelectionProps, type UseListSelectionReturn, } from "./use-list-selection.svelte";

package/dist/components/collection/index.js

@@ -0,0 +1,6 @@
+export { createGridCollection } from "./grid";
+export { createListCollection, } from "./list";
+export { createFileTreeCollection, createTreeCollection, } from "./tree";
+export { useAsyncList, } from "./use-async-list.svelte";
+export { useListCollection, } from "./use-list.svelte";
+export { useListSelection, } from "./use-list-selection.svelte";

package/dist/components/collection/list.d.ts

@@ -0,0 +1,3 @@
+import { type CollectionItem, type CollectionOptions, ListCollection } from "@wirekyt/dom/collection";
+export declare const createListCollection: <T extends CollectionItem>(options: CollectionOptions<T>) => ListCollection<T>;
+export type { ListCollection, CollectionOptions, CollectionItem };

package/dist/components/collection/list.js

@@ -0,0 +1,2 @@
+import { ListCollection, } from "@wirekyt/dom/collection";
+export const createListCollection = (options) => new ListCollection(options);

package/dist/components/collection/tree.d.ts

@@ -0,0 +1,4 @@
+import { type FilePathTreeNode, TreeCollection, type TreeCollectionOptions, type TreeNode } from "@wirekyt/dom/collection";
+export type { TreeCollection, TreeNode, TreeCollectionOptions, FilePathTreeNode, FlatTreeNode, } from "@wirekyt/dom/collection";
+export declare const createTreeCollection: <T extends TreeNode>(options: TreeCollectionOptions<T>) => TreeCollection<T>;
+export declare const createFileTreeCollection: (paths: string[]) => TreeCollection<FilePathTreeNode>;

package/dist/components/collection/tree.js

@@ -0,0 +1,3 @@
+import { TreeCollection, filePathToTree, } from "@wirekyt/dom/collection";
+export const createTreeCollection = (options) => new TreeCollection(options);
+export const createFileTreeCollection = (paths) => filePathToTree(paths);

package/dist/components/collection/use-async-list.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Accessor } from "../../core";
+import * as asyncList from "@wirekyt/dom/machines/async-list";
+import { type MaybeFunction } from "@wirekyt/dom/utils";
+export interface UseAsyncListProps<T, C = string> extends asyncList.Props<T, C> {
+}
+export interface UseAsyncListReturn<T, C = string> extends Accessor<asyncList.Api<T, C>> {
+}
+export declare const useAsyncList: <T, C = string>(props?: MaybeFunction<UseAsyncListProps<T, C>>) => UseAsyncListReturn<T, C>;

package/dist/components/collection/use-async-list.svelte.js

@@ -0,0 +1,9 @@
+import { useMachine } from "../../core";
+import * as asyncList from "@wirekyt/dom/machines/async-list";
+import { runIfFn } from "@wirekyt/dom/utils";
+export const useAsyncList = (props) => {
+    const machineProps = $derived.by(() => runIfFn(props));
+    const service = useMachine(asyncList.machine, () => machineProps);
+    const api = $derived(asyncList.connect(service));
+    return () => api;
+};

package/dist/components/collection/use-list-selection.svelte.d.ts

@@ -0,0 +1,29 @@
+import { type SelectionMode } from "@wirekyt/dom/collection";
+import { type MaybeFunction } from "@wirekyt/dom/utils";
+import type { CollectionItem, ListCollection } from "./list";
+export interface UseListSelectionProps<T extends CollectionItem> {
+    selectionMode?: SelectionMode;
+    deselectable?: boolean;
+    initialSelectedValues?: string[];
+    resetOnCollectionChange?: boolean;
+    collection: ListCollection<T>;
+}
+export declare function useListSelection<T extends CollectionItem>(props: MaybeFunction<UseListSelectionProps<T>>): UseListSelectionReturn;
+export interface UseListSelectionReturn {
+    selectedValues: () => string[];
+    isEmpty: () => boolean;
+    firstSelectedValue: () => string | null;
+    lastSelectedValue: () => string | null;
+    isSelected: (value: string | null) => boolean;
+    canSelect: (value: string) => boolean;
+    select: (value: string, forceToggle?: boolean) => void;
+    deselect: (value: string) => void;
+    toggle: (value: string) => void;
+    replace: (value: string | null) => void;
+    extend: (anchorValue: string, targetValue: string) => void;
+    setSelectedValues: (values: string[]) => void;
+    clear: () => void;
+    resetSelection: () => void;
+    isAllSelected: () => boolean;
+    isSomeSelected: () => boolean;
+}

package/dist/components/collection/use-list-selection.svelte.js

@@ -0,0 +1,78 @@
+import { Selection } from "@wirekyt/dom/collection";
+import { runIfFn } from "@wirekyt/dom/utils";
+import { untrack } from "svelte";
+export function useListSelection(props) {
+    const localProps = $derived.by(() => {
+        const { collection, selectionMode = "single", deselectable = true, initialSelectedValues = [], resetOnCollectionChange = false, } = runIfFn(props);
+        return {
+            collection,
+            selectionMode,
+            deselectable,
+            initialSelectedValues,
+            resetOnCollectionChange,
+        };
+    });
+    const createSelection = (values = []) => {
+        const selection = new Selection(values);
+        selection.selectionMode = localProps.selectionMode;
+        selection.deselectable = localProps.deselectable;
+        return selection;
+    };
+    const initialSelectedValues = untrack(() => localProps.initialSelectedValues);
+    let selection = $state(createSelection(initialSelectedValues));
+    $effect(() => {
+        const { collection, resetOnCollectionChange } = localProps;
+        collection.getValues();
+        if (resetOnCollectionChange) {
+            selection = createSelection();
+        }
+    });
+    const selectedValues = $derived(Array.from(selection));
+    const isEmpty = $derived(selection.isEmpty());
+    const firstSelectedValue = $derived(selection.firstSelectedValue(localProps.collection));
+    const lastSelectedValue = $derived(selection.lastSelectedValue(localProps.collection));
+    return {
+        selectedValues: () => selectedValues,
+        isEmpty: () => isEmpty,
+        firstSelectedValue: () => firstSelectedValue,
+        lastSelectedValue: () => lastSelectedValue,
+        isSelected: (value) => {
+            return selection.isSelected(value);
+        },
+        isAllSelected: () => {
+            const allValues = localProps.collection.getValues();
+            return allValues.length > 0 && allValues.every((value) => selection.isSelected(value));
+        },
+        isSomeSelected: () => {
+            const allValues = localProps.collection.getValues();
+            return allValues.some((value) => selection.isSelected(value));
+        },
+        canSelect: (value) => {
+            return selection.canSelect(localProps.collection, value);
+        },
+        select: (value, forceToggle) => {
+            selection = selection.select(localProps.collection, value, forceToggle);
+        },
+        deselect: (value) => {
+            selection = selection.deselect(value);
+        },
+        toggle: (value) => {
+            selection = selection.toggleSelection(localProps.collection, value);
+        },
+        replace: (value) => {
+            selection = selection.replaceSelection(localProps.collection, value);
+        },
+        extend: (anchorValue, targetValue) => {
+            selection = selection.extendSelection(localProps.collection, anchorValue, targetValue);
+        },
+        setSelectedValues: (values) => {
+            selection = selection.setSelection(values);
+        },
+        clear: () => {
+            selection = selection.clearSelection();
+        },
+        resetSelection: () => {
+            selection = createSelection();
+        },
+    };
+}

package/dist/components/collection/use-list.svelte.d.ts

@@ -0,0 +1,27 @@
+import { type MaybeFunction } from "@wirekyt/dom/utils";
+import { type CollectionOptions, type ListCollection } from "./list";
+export interface UseListCollectionProps<T> extends Omit<CollectionOptions<T>, "items"> {
+    initialItems: T[] | readonly T[];
+    filter?: (itemText: string, filterText: string, item: T) => boolean;
+    limit?: number;
+}
+export declare function useListCollection<T>(props: MaybeFunction<UseListCollectionProps<T>>): UseListCollectionReturn<T>;
+export interface UseListCollectionReturn<T> {
+    collection: () => ListCollection<T>;
+    filter: (inputValue: string) => void;
+    set: (items: T[]) => void;
+    reset: () => void;
+    clear: () => void;
+    insert: (index: number, ...items: T[]) => void;
+    insertBefore: (value: string, ...items: T[]) => void;
+    insertAfter: (value: string, ...items: T[]) => void;
+    remove: (...itemOrValues: Array<T | string>) => void;
+    move: (value: string, to: number) => void;
+    moveBefore: (value: string, ...values: string[]) => void;
+    moveAfter: (value: string, ...values: string[]) => void;
+    reorder: (from: number, to: number) => void;
+    append: (...items: T[]) => void;
+    upsert: (value: string, item: T, mode?: "append" | "prepend") => void;
+    prepend: (...items: T[]) => void;
+    update: (value: string, item: T) => void;
+}